Mobile Application UI Design

1
Mobile Application UI Design
2
Introduction

• This chapter introduces design considerations for
  MIDlets in the consumer market.
• Designing MIDlets differs significantly from
  designing desktop computer software.
• Some important differences, such as focusing on
  ease of use, resource limitations, and the domain
  of consumer devices, and their design
  implications are covered in the following
  sections of this chapter
• Consumer Characteristics
• The Nature of Consumer Products
• Consumer-Product Domains
• Design Considerations for Consumer Products

3
Design of Applications
vMiles
Mobile Controls
Micrographs
Color Dialog
Signature Capture Control
Pocket ftCalc
Registry Control
Simple Wireless API
4
Consumer Characteristics

• Consumer application users have different
  characteristics than users of desktop systems.
• Consumers are familiar with appliances that
  typically have simple, predictable UIs, such as
  phones, microwave ovens and might feel
  uncomfortable dealing with anything they consider
  too high-tech.
• They expect consumer products to be predictable,
  easy to learn, and easy to use.
• Make new devices and applications as familiar,
  responsive, easy to learn, and easy to use as
  possible.

Recommendation
5
The Nature of Consumer Products

• It is important to consider the limited resources
  and particular input and output (I/O) mechanisms
  of a consumer device .
• Software and hardware must be tightly
  integrated.
• Understand the limitation of target platform and
  conduct performance tuning.

Recommendation
6
Consumer-Product Domains

• Specialization for particular activities is a
  strength of consumer products such as televisions
  and mobile phones.
• The focus of a device (the tasks it performs and
  the setting in which it is used) identifies its
  domain.
• For example, the domain of a basic pager is
  information access.
• Its tasks are receiving phone numbers or short
  text messages and displaying them.
• It is used in very short sessions and can be
  carried to any location.
• The consumer must be able to retrieve information
  (a phone number or a short message) quickly.

7
Consumer-Product Domains

• A products domain has implications for the UI
  design and the user experience.
• There are many domains for consumer products.
  Three that are relevant to MIDP are discussed
  below
• Information Access and Communication
• Business Functions
• Entertainment

8
Information Access and Communication

• e.g. Booking a movie ticket, Reading stock,
  reading email etc.
• Typical applications of mobile phones.
• The domain has these characteristics
• Products are used for
• Short periods at a time (a few seconds to five
  minutes)
• Specific tasks
• Tasks
• Are usually structured and directed

9
Information Access and Communication

• Consumers
• Are likely to concentrate during their
  interactions
• Approach the product with specific task or goals
  in mind
• Are motivated to complete tasks and want quick,
  efficient, easy experiences
• May be skeptical of the devices network
  connectivity
• May doubt the devices ability to communicate
  properly at all times

10
Information Access and Communication

• Buying Movie Ticket

11
Information Access and Communication

• User Requirement
• Create UIs that provide efficient experiences.
• Task completion is important and time may be a
  critical factor.
• Consumers must be able to complete tasks quickly
  and efficiently.
• Make screens work together.
• For example, an application should not ask the
  consumer to input data in one screen and again a
  few screens later.

Recommendation
12
Information Access and Communication

• Let the consumer know the outcome of an
  interaction that takes place across a network.
• It is obvious when some interactions have
  completed successfully.
• For example, when a browser requests a web page,
  the information exchange has obviously completed
  when the page is displayed.
• For other interactions, such as sending data to a
  remote location, the outcome might not be as
  obvious. Let consumers know that such data
  exchanges are progressing and when they
  completed.

13
Business Functions

• Products in the business functions domain help
  workers or operators perform specific,
  job-related tasks.
• Examples include
• Devices to help waiters take orders
• Applications to help assembly line supervisors
  debug problems
• Stock checking in a warehouse
• These products can also be thought of as
  vertical-market devices and applications, because
  they target a specific task in a narrow field.

14
Business Functions

• The business functions domain has the following
  characteristics
• Products are used for job-related tasks, for
  which training costs can be an issue.
• Tasks might be completed incrementally.
• Consumers usually have domain knowledge specific
  to the application.
• The characteristics and design implications of
  the business functions domain are similar to
  those of the information access and communication
  domain.

15
Business Functions

• Applications in this domain need to be efficient
  and predicable. Here is a screen from an example
  application in this domain

16
Entertainment

• Consumer products used for entertainment, such as
  a games on PDAs or gaming devices, share these
  characteristics
• Products are used
• In comfortable, low-stress environments
• For 10 to 30 minutes or more at a time
• For less structured tasks
• Tasks are such that interruptions are possible
• Consumers
• Are likely to have varying levels of
  concentration and attention during their
  interactions
• Approach the products with a relaxed attitude
• Are more interested in a pleasant experience than
  in performing a specific task

17
Entertainment

• e.g. Playing a game on a mobile phone while
  standing in line at the grocery store.
• User Requirement
• Create entertainment UIs that provide a pleasant
  experience in preference to an efficient one.
• Task completion time in this domain is not a
  critical factor and the consumer is not under
  significant time pressure.

18
Entertainment
Recommendation

• Devote as much input/output bandwidth as possible
  to seeing, hearing, and interacting with the
  entertainment.
• The interaction of the consumer and the game is
  the products most important feature.
• Create UIs that interfere as little as possible
  with the content. For example, an applications
  controls should take up as little screen
  real-estate as possible so that consumers can see
  more of the screen.

19
Design Considerations

• Some principles for designing mobile application
  UIs.
• Key Factors to keep in mind
• Simplicity
• Consistency/Predictability
• User Control
• Feedback
• Aesthetics

20
Design Considerations Simplicity

• Show the most frequently used controls directly
  on the interface
• Hide secondary controls in menus
• Automate as many processes as you can
• Show only relevant data
• Group related tasks
• Allow users to navigate to data by selecting
  options
• Reduce the amount of data entry users must
  perform
• Reduce number of steps needed to complete a task

21
Simplicity

• Functionality Versus Simplicity
• The more functionality included in a product, the
  more difficult it is to learn and use.
• Use the 80/20 rule Identify the 20 of the
  functionality that will meet 80 of the
  consumers needs and optimize your design
  accordingly. Do not change your design to provide
  the same level of access to these functions as to
  the critical 20.

22
Simplicity

• Choice Versus Simplicity
• Choice is useful when it is appropriate but too
  much choice can create a complicated, perhaps
  overwhelming, situation.
• For example, consider replying to an email. An
  email application could give you the choice of
• replying to the sender and including the original
  mail
• replying to the sender without including the
  original mail
• replying to everyone who received the original
  mail and including the original mail in the
  reply
• and replying to everyone who received the
  original mail without including it in the reply.
• Reduce choice by providing reasonable defaults
  and removing non-essential options.

23
Simplicity

• What are the problems of the following menu for
  the operations of a mail client?

24
Simplicity

• Too many "Reply" options.
• "Next" is the most popular option and should be
  the very first one.

25
Simplicity

• Suppose you have conducted the usability study
  and found the statistics of the operation usage
• Reply (with original mail) 10
• Reply (no original mail) 5
• Reply All (with original mail) 10
• Reply All (no original mail) 3
• Forward 8
• Delete 12
• Previous 20
• Next 32
• How would you redesign the interface?

26
Design Considerations Consistency

• Reuse existing user interface concepts and design
  guidelines.
• Use controls, such as scroll bars, that behave
  similarly regardless of context.
• Extend existing concepts to cover new situations.
  
• Design a new control or concept if you cannot
  extend your solution.

27
Make It Predictable

• Consumers should be able to predict what will
  happen when they take an action they rarely look
  at documentation.
• For example, in a book ordering system, customers
  will not know the next steps for a menu item
  "Create Order".
• Should use "Buy Book" instead.
• If you must choose between predictable and
  efficient, choose predictable.

28
Make It Predictable

• What are the problems of the following UIs?
• Press Cancel command is to cancel or not to
  cancel.

29
Make It Predictable

• How can a customer to return if he does not want
  to continue?

30
Design Considerations User Control

• Allow users to complete tasks in fewer steps.
• Provide ways for users to customize your
  application.
• Give users the opportunity to reverse or continue
  their actions despite non-critical errors.
• Allow programs to be interrupted

31
Make Everything Interruptible

• Enable consumers to interrupt an application no
  matter what state it is in.
• Consumers should always be able to cancel or
  simply interrupt the device in order to do
  something else.
• If a consumer is in the middle of an activity,
  the consumer should be able to start over at the
  beginning.
• Allowing consumers to interrupt anything keeps
  the control of the product in the hands of the
  consumer.

32
Design Considerations Feedback

• Users need and should receive clear and immediate
  feedback on their actions.
• Such feedback can enhance the presentation of
  written and graphical information.
• Two types of Feedback are
• Visual Feedback achieved through
• Messages
• Animation
• Audio Feedback achieved through
• A piece of music or voice message.
• Alert messages.

33
Design Considerations Aesthetics

• Select interface elements carefully
• Create a tidy appearance
• Establish a design strategy and style convention
  before you begin development
• Respect user settings and preferences
• Select the fewest elements needed to communicate
  information

34
All Mobile Casino
GPS GolfPro
JL MobileXSales Rep
Microsoft CRMMobile
Pocket Humanity
Valentin IliescuChess
35
Know Your User

• When designing user interfaces for mobile phones,
  developers should consider the following
• Target group. Designers should have a clear
  vision of their application target users (and
  target devices as well) before actual design and
  implementation begins.
• Early focus on users. Designers should have
  direct contact with intended or actual users to
  make sure that they are fulfilling user
  requirements. In practical terms, applications
  should be simple, easy, and comfortable to use.

36
Know Your User

• Early and continual user testing. Designers
  should conduct sufficient testing so that they
  can detect usability errors as early as possible.
• Integrated design. All aspects of usability
  (e.g., user interface, help system,
  documentation) should evolve in parallel, rather
  that sequentially.

37
Other Design Tips

• After developers know the end users well enough,
  it is time for them to produce the actual
  application.
• Here are some practical design tips
• Use a "screen map" or some other modeling
  technique to visualize your design.
• Split the application into the various states and
  clarify the connections between states (starting
  point and end point).
• In this phase, consider the issue of navigation
  throughout the entire application, and make sure
  that users can always go back.

38
Screen map technique example
39
Other Design Tips

• Proceed to a more detailed level.
• Think about the different messages that you want
  to give to the user in various situations.
• Think also about all possible errors!
• Remember that your MIDlet can go to a variety of
  mobile devices, and that the screens, shapes, and
  sizes of devices may vary.
• Test as much as possible.
• Take advantage of the MIDP high-level user
  interface when possible, so that your MIDlet
  behaves like the phone's own applications.