HUMAN COMPUTER INTERACTION

UNIT IV-MOBILE HCI

BY
C.Vinoth (adhoc)
Dept CSE
GCES
MOBILE HCI
Mobile Ecosystem: Platforms, Application frameworks- Types of
Mobile Applications:Widgets, Applications, Games- Mobile
Information Architecture, Mobile 2.0, Mobile Design:Elements of
Mobile Design, Tools.
THE MOBILE ECOSYSTEM

 Mobile is an entirely unique ecosystem and, like the

Internet
 it is made up of many different parts that must all work
seamlessly together.
 With mobile technology, the parts are different, and
because you can use mobile devices to access the
Internet
 that means that not only do you need to understand the
facets of the Internet, but you also need to understand the
mobile ecosystem.
PLATFORMS

 A mobile platform‘s primary duty is to provide access to

the devices.
 To run software and services on each of these devices,
you need a platform
 or a core programming language in which all of your
software is written.
 Like all software platforms, these are split into three

 categories:
 Licensed
 Proprietary
 open source.
 Licensed
 Licensed platforms are sold to device makers for
nonexclusive distribution on devices.
 The goal is to create a common platform of development
Application Programming Interfaces (APIs) that work
similarly across multiple devices with the least possible effort
required to adapt for device differences
 Following are the licensed platforms:
 Java Micro Edition (Java ME)
 Binary Runtime Environment for Wireless (BREW)
Qualcomm for mobile devices, mostly for the U.S. market.
 Windows Mobile
 LiMo(LiMo is a Linux-based mobile platform created by the LiMo Foundation)
 Proprietary:
 Proprietary platforms are designed and developed by
device makers for use on their devices.
 They are not available for use by competing device
makers.
 Palm:
 Palm uses three different proprietary platforms.
 BlackBerry
 iPhone

 Open Source
 Open source platforms are mobile platforms that are
freely available for users to download, alter, and edit.
 APPLICATION FRAMEWORKS:
 Application frameworks often run on top of operating systems,
sharing core services such as communications, messaging,
graphics, location, security, authentication, and many others.
 Java

 Applications written in the Java ME framework

 S60

 The S60 platform, formerly known as Series 60, is the

application platform for devices that run the Symbian OS.
 BREW(BREW application framework can be deployed across
themajority of BREW-based deviceswith slightly less cross-device adaption
than other frameworks.)
 Flash Lite(Adobe Flash Lite is an application framework that uses the
Flash Lite andActionScript frameworks to create vector-based applications)
 Windows Mobile:(Applications written using the Win32 API can be
deployed across the majority of Windows Mobile-based devices)
 Cocoa Touch(Cocoa Touch is the API used to create native applications
for the iPhone and IPod touch)
 Android SDK(The Android SDK allows developers to create native applications
for any device thatruns the Android platform. By using the Android SDK,
developers can write applications inC/C++ or use a Java virtual machine included
in the OS)
 Web Runtimes (WRTs) (Nokia, Opera, and Yahoo! provide various Web Runtimes, or
WRTs. These are meant to be miniframeworks, based on web standards, to create mobile
widgets)
 WebKit(WebKit is a browser technology, so applications can be created simply by using
web technologies such as HTML, CSS, and JavaScript)
 The Web(The Web is the only application framework that works across
virtually all devices and all platforms.)
TYPES OF MOBILE APPLICATIONS

 Mobile Web Widgets:(A portable chunk of code that can be installed and
executed within any separate HTML based web page by an end user without
requiring additional compilation.)
 Pros
 The pros of mobile web widgets are:
• They are easy to create, using basic HTML, CSS, and JavaScript knowledge.
• They can be simple to deploy across multiple handsets.
• They offer an improved user experience and a richer design, tapping into device features and
offline use.
 Cons
 The cons of mobile web widgets are:

• They typically require a compatible widget platform to be installed on the

device.
• They cannot run in any mobile web browser.
• They require learning additional proprietary, non-web-standard techniques.
MOBILE WEB APPLICATIONS
 Pros: The pros of mobile web applications are:
• They are easy to create, using basic HTML, CSS, and
JavaScript knowledge.
• They are simple to deploy across multiple handsets.
• They offer a better user experience and a rich design, tapping
into device features & offline use.
• Content is accessible on any mobile web browser.
 Cons: The cons of mobile web applications are:

 The optimal experience might not be available on all

handsets.
• They can be challenging (but not impossible) to support
across multiple devices.
• They don‘t always support native application features, like
offline mode, location lookup, file system access, camera, and
so on.
GAMES
MOBILE INFORMATION
ARCHITECTURE

 The combination of organizations, labelling, search, and

navigation systems within websites and intranets
 The art and science of shaping information products and
experiences to support usability and find ability
 An emerging discipline and community of practice
focused on bringing principles of design and architecture
to the digital landscape
 Information architecture

 The organization of data within an informational space.

In other words, how the user will get to information or
perform tasks within a website or application.
 Interaction design:
 The design of how the user can participate with the
information present, either in a direct or indirect way
 Information design:

 The visual layout of information or how the user will

assess meaning and direction given the information
presented to him.
 Navigation design:

 The words used to describe information spaces; the

labels or triggers used to tell the users what something is
and to establish the expectation of what they will find.
 Interface design:

 The design of the visual paradigms used to create action

or understanding.
MOBILE INFORMATION ARCHITECTURE
 Information architecture has become a common
discipline in the web industry, unfortunately, the mobile
industry like software has only a handful of specialized
mobile information architects.
 Keeping It Simple

 Support your defined goals

 Clear, simple labels

 Site Maps
SITE MAPS
CONFIRM THE PATH BY TEASING
CONTENT

 Information-heavy sites and applications often employ

nested or drill-down architectures, forcing the user to
select category after category to get to their target
 To reduce risking the user‘s time and money, we want to
make sure we present enough information for the user to
wade through our information architecture successfully
 Clickstreams
 Clickstream is a term used for showing the behaviour on
websites, displaying the order in which users travel
through a site‘s information architecture, usually based
on data gathered from server logs
 A good architect‘s job is to create a map of user goals, not map
out every technical contingency or edge case.
 Remember, in mobile, our job is to keep it as simple as possible.
We need to have an unwavering focus on defining an excellent
user experience first and foremost.
Anything that distracts us from that goal is just
a distraction.
 Wireframes:

 Wireframes are a way to lay out information on the page, also

referred to as information design.
 Site maps show how our content is organized in our informational
space
 Wireframes show how the user will directly interact with it.
 Prototyping:
 Paper prototypes:

 Context prototype:
 Take your wireframes or sketches and load them onto the
device, sized to fill the device screen. Leave the office. Go
for a walk down to your nearest café. Or get on a bus or a
train.
 HTML prototypes:The third step is creating a
lightweight, semi functional static prototype using
XHTML, CSS.
THE DESIGN MYTH

 people don‘t respond to the visual aesthetic as much as

you might think.
 What colors you use, whether you use square or rounded
corners, or, gradients or flat backgrounds, helps build
first impressions.
 but it doesn‘t do too much to improve the user‘s
experience
 users appreciate good design, but they move almost
immediately to the layout, what things are called, the
find ability of content, how
 intuitive it is to perform tasks.
MOBILE 2.0
 The Web as a platform for the mobile context, this
means ―write once, deploy everywhere,‖
 Data is the next Intel inside Mobile takes this principle
several steps further. It can include the data we seek, the
data we create, and the data about or around our physical
locations
 End of the software release cycle Long development
and testing cycles heavily weigh on mobile projects,
Shorter agile cycles are needed to make mobile
development work as a business.
 Lightweight programming models
 Mobile 2.0, refers to a perceived next generation of mobile internet
services that influence the social web, or what some call Web 2.0.
 Mobile 2.0 refers to services that integrate the social web with the
core aspects of mobility – personal, localized, always-on and ever-
present.
 Enablers of Mobile 2.0:
 UbiquitousMobile Broadband Access
 Affordable, unrestricted access to enabling software platforms, tools and
technologies
 Open access, with frictionless distribution and monetization

 Characteristics of Mobile 2.0:

 The social web meets mobility

 Extensive use of User-Generated Content, so that the site is

owned by its contributors
 Leveraging services on the web via mashups

 Fully leveraging the mobile device, the mobile context, and

delivering a rich mobile user experience
 Personal, Local, Always-on, Ever-present
IMPLEMENTATIONS OF MOBILE 2.0
 Mobile 2.0 is still at the development stage but there are
already a range of sites available, both for so-called
"smartphones" and for more ordinary "feature" mobile
phones.
 The best examples are Micro-blogging services Jaiku,
Twitter, Pownce, CellSpin, and open platforms for
creating sms services like Fortumo and Sepomo or
providing information and services like mobeedo.
THE ELEMENTS OF MOBILE DESIGN
 Context:
 As the designer, it is your job to make sure that the user
can figure out how to address context using your app.
Make sure you do your homework to answer the
following questions.
 Who are the users? What do you know about them? What
type of behavior can you assume or predict about the
users?
 What is happening? What are the circumstances in which
the users will best absorb the content you intend to
present?
 When will they interact? Are they at home and have large
amounts of time? Are they at work where they have short
periods of time? Will they have idle periods of time while
waiting for a train, for example?
 Where are the users? Are they in a public space or a private
space? Are they inside or outside? Is it day or is it night?
 Why will they use your app? What value will they gain from
your content or services in their present situation?
 How are they using their mobile device? Is it held in their
hand or in their pocket? How are they holding it? Open or
closed? Portrait or landscape?
 Message:
 Another design element is your message, or what you are
trying to say about your site or application visually.
 One might also call it the ―branding,‖ although I see
branding and messaging as two different things.
 Your message is the overall mental impression you create
explicitly through visual design.
 ―What can this do for me? or ―Why is this important to
me?
 I like to think of it as the holistic or at times instinctual
reaction someone will have to your design. If you take a
step back, and look at a design from a distance, what is
your impression? Or conversely, look at a design for 30
seconds, and then put it down. What words would you
use to describe the experience?
 Branding shouldn‘t be confused with messaging.
Branding is the impression your company name and logo
gives—essentially, your reputation. Branding serves to
reinforce the message with authority, not deliver it.
 Yahoo!
 Yahoo! sort of delivers a message. This app provides a clean
interface, putting a focus on search and location, using color to
separate it from the news content.
 ESPN

 The ESPN site clearly is missing a message. It is heavily text-

based, trying to put a lot of content above the fold, but doesn‘t
exactly deliver a message of any kind.
 Disney

 Disney creates a message with its design. It gives you a lot to

look at—probably too much— but it clearly tries to say that
the company is about characters for a younger audience
 Wikipedia
 The Wikipedia design clearly establishes a message.
With a prominent search and text-heavy layout featuring
an article, you know what you are getting with this
design.
 Amazon

 Amazon sort of creates a message. Although there are

some wasted opportunities above the fold with the odd
ad placement, you can see that it is mostly about
products (which is improved even more if you scroll
down).
LAYOUT

 it is how the user will visually process the page

 but the structural and visual components of layout often
get merged together
 The first time layout should rear its head is during
information architecture
 It prefer to make about 90 percent of my layout decisions
during the information architecture period.
 design opinions of the CEO or Chief Marketing Officer
(CMO) might influence a design direction more than,
say, the Creative Director or Design Director
 Creating mobile designs in an environment with multiple
reviewers is all about getting the right feedback at the
right time
COLOR
 The fifth design element, color, is hard to talk about in a
black-and-white book
 These days, we have nearly the entire spectrum of colors
to choose from for mobile designs.
 The most common obstacle you encounter when dealing
with color is mobile screens, which come in a number of
different color or bit depths, meaning the number of bits
(binary digits) used to represent the color of a single
pixel in a bitmapped image.
 Different devices have different colour depths.
 12-bit
 depth Supported colors 4,096 colors Used with older
phones;
 dithering artifacts in photos can easily be seen.

 Examples: Nokia 6800

 16-bit depth
 Supported colors 65,536 colors Also known as
HighColor;
 very common in today‘s mobile devices.

 Can cause some banding and dithering artifacts in some

designs.
 Examples: HTC G1, BlackBerry Bold 9000, Nokia 6620
THE PSYCHOLOGY OF COLOUR

 People respond to different colours differently

 Colour palettes
 Defining color palettes can be useful for maintaining a
consistent use of color in your mobile design
 Color palettes typically consist of a predefined number
of colors to use throughout the design.
 Sequential

 In this case, there are primary, secondary, and tertiary

colors. Often the primary color is reserved as the
―brand‖ color or the color that most closely resembles
the brand‘s meaning.
 Adaptive

 An adaptive palette is one in which you leverage the

most common colors present in a supporting graphic or
image.
 Inspired
 This is a design that is created from the great pieces of
design you might see online, as shown in Figure below,
or offline, in which a picture of the design might inspire
you
 MOBILE DESIGN TOOLS
 Mobile design requires understanding the design
elements and specific tools. The closest thing to a
common design tool is Adobe Photoshop, though each
framework has a different method of implementing the
design into the application
 Designing for the Right Device
 The truly skilled designer doesn‘t create just one product
—she translates ideas into experiences.
 The spirit of your design should be able to be adapted to
multiple devices.
 What device suits this design best?

 What market niche would appreciate it most?

 What devices are the most popular within that niche?‖

DESIGNING FOR DIFFERENT SCREEN SIZES
 Mobile devices come in all shapes and sizes

 Choice is great for consumers, but bad for design. It can

be incredibly difficult to create that best possible
experience for a plethora of different screen sizes.
 The greatest challenge to creating a design that works
well on multiple screen sizes is filling the width.
 The problem is when you have to present a number of
tasks or actions
 The easiest and most compatible way is to present a
stacked list of links or buttons, basically one action per
line
 As devices get larger, denser screens, you will see an
increase in the use of touch, forcing the size of content to
increase to fingertip size—typically 40 pixels wide and
40 pixels tall
 This actually solves part of the horizontal axis problem,
simply by making content larger for larger screens.