Session: 430077

User Interface Design

for Mobile Devices

Greg Hintermeister
gregh@us.ibm.com

8 Copyright IBM Corporation, 2002. All Rights Reserved.

This publication may refer to products that are not currently
available in your country. IBM makes no commitment to make
available any products referred to herein.

ibm.com /eserver/iseries
Goal and Agenda

"To understand the power of UI Design, and the special care

needed when designing for mobile devices"

Why Care About UI Design?

Why Care About Mobile Devices?

What Makes a Mobile Device?

Thoughts on Devices and Technology

Mobile Applications (Types and Problems)

Example

Discoveries

Tools and Resources

8 2002 IBM Corporation

 ibm.com /eserver/iseries
Why Care About UI Design?

Money Example:
Users lose time completing tasks successfully
Education / training expense
Service / Support costs
Hot line calls for products you use
On-site visits
Help desk expense It's not just user
interface design, it's
User Interaction
Competitive advantage Design

Marketplace competition has moved to the user interface

Fortune 500 companies are testing products before buying

People
Good UI Designs enable users and make them fiercely loyal
Bad UI Designs make users feel stupid and make them fiercely mad
User interfaces turn the computer into a useful tool

8 2002 IBM Corporation

ibm.com /eserver/iseries
Why Care About Mobile Devices?

Big Market and Growing!

More mobile Internet subscribers than fixed subscribers by 2003
Ericsson Annual Report, 2000

Many are dropping traditional phone service for cell phones

There's a constant rush of new devices hoping to become the "killer device"

Makes a Company Look Good

It's a great addition to a companies portfolio of products (forward thinking)

It's fun to design!

Does there need to be another reason?

8 2002 IBM Corporation

 ibm.com /eserver/iseries
What Makes a Mobile Device?
Highly Portable
Can be carried in a pocket or purse
It's a constant companion

Small Display

Varied Connection
Currently slow (but a temporary problem)
Intermittent connection (longer term problem)

Used in a public setting

Whereas PCs are used in a private setting

One per person

vs. multiple PCs for home and work that are shared with others
Note: Technology is changing so fast that it's not the best to pick a current type of
device and depend on it's idiosyncrasies to make your design work (including
presentation technology and connection technology)

8 2002 IBM Corporation

ibm.com /eserver/iseries
Thoughts on Devices and Technology

"Wireless devices are the future"

True, but don't design for the wireless connection. Everything is becoming
wireless. Design for the screen size and how it is going to be used.

VS..

Large screen - lots of information to view at once Small screen - little information to view at once
Stationary - at least for the task being done Mobile - even while the task is being done
All inclusive - user expects to perform any task to get Limited tasks - user expects to perform emergency,
the job done quick, focused tasks to keep him mobile

8 2002 IBM Corporation

 ibm.com /eserver/iseries
More Thoughts on Devices and Technology

IT'S NOT A PC!

Don't try to make a mobile device something it's not. It's like complaining about a
laser scalpel because it can't cut through trees. Don't think about it's limitations,
focus on its benefits and capabilities.
As soon as you've used a technology as an excuse for your product, your design
has failed.

Have We Seen "IT" Yet?

No. The "Killer App" has yet to be designed for the Mobile device. Go for it!

Is This a Short-term Environment to Consider? Yes and No

Mobile devices have connection speed problems - for the short term. In the next
few years, connection speed won't be a problem
There will ALWAYS be small devices. Even Star Trek takes advantage of small,
portable displays

Design your product to solve a users need, not to show a cool, new technology. The best technology is transparent to the
user. People don't care about a neat technology, they care about how your product will make their life better.

8 2002 IBM Corporation

ibm.com /eserver/iseries

Mobile Applications
Their Types

Original Mobile Application Example:

Solves a unique mobile need
Examples:
Find closest ATM
Interactive Chat

Companion Mobile Application

Gets access to a full function product
Provides a subset of function of "full" version
Examples:
Mobile Tax Preparation Software
Mobile VCR
Mobile PC "remote-control"

8 2002 IBM Corporation

 ibm.com /eserver/iseries

Mobile Applications
Their Problems

Does the Wrong Thing

Function creep. Always a fear of putting too much function in for its own good.
Putting function in that will NEVER get used because of the mobile device inherent
target use.

Management "Visions"
Management wants "Run everywhere: Phone, PDA, full-function browser".
Problem: full-function browser is meant for a very different task.

Using Traditional UI Guidelines

Same complex navigation as a UI in a large display
Text entry
Big lists
Lots of flexibility
Lots of graphics
Context menus

8 2002 IBM Corporation

ibm.com /eserver/iseries

Example
iSeries Navigator for Wireless
Discover the Need
Administrators have all these systems to manage. They need to
know from ANYWHERE how they are doing. If something needs
their attention, the administrator needs to be able to run an action
to fix the problem, or at least keep the problem from getting worse.

Investigate How to Solve the Need

Find who really needs this
Gather both tasks and goals (very different things) from users

Get Requirements from Management

Need a marketing splash
Need something that "demo's" well
Need a phone, PDA, and full web version

8 2002 IBM Corporation

 ibm.com /eserver/iseries

Example
iSeries Navigator for Wireless

Develop a target user, or Persona

Jim: We designed this product for Jim
Related users are accommodated, too
Kelly the executive and Jonathan the developer will both benefit because of the clarity of the
design

Meet Jim. Jim is our target user. He is the

lead systems administrator of a mid-sized
company specializing in medical equipment.
His IT shop makes sure the systems needed
by his company are running in top shape.
What's interesting is that because of the
nature of his company, he has accumulated
38 iSeries eServers in his realm of
responsibility. He has a staff of 4 that help
keep things running, but when it comes down
to it, he is the one responsible for making sure
it all runs smoothly.

8 2002 IBM Corporation

ibm.com /eserver/iseries

Example
iSeries Navigator for Wireless

Needed to create a new tool: The Reality Check Question

It's like a scenario, but we needed something that would capture the goal of the design
in one sentence so it could be used over and over again in meetings throughout the
design process

Mobile Version Full-function Browser Version

"If Jim is at the zoo with his boy, will he need "If Jim is at his beach house, will he need this
this feature?" feature?"

8 2002 IBM Corporation

 ibm.com /eserver/iseries

Notes: Reality Check Questions

When thinking of a feature, or navigation scheme, or other design point, we need to ask:

"If Jim is at the zoo with his boy, will he need this feature?"
Reasons:
We chose the zoo because it's easy to picture being there. Jim won't be there forever, but it's an important event for his family.
His goal is to finish his visit to the zoo, then decide if he needs to attend to his work. He doesn't want to cut short his visit to the
zoo because of a problem.
At the zoo, Jim will have a phone or PDA with him. He will be in troubleshooting mode. All he wants to do is quickly fix things, or
at least quickly keep things stable enough so he can finish his visit to the zoo, then, if needed, to back into work.
If we see that Jim doesn't need this feature, function, or set of data while visiting the zoo, then it doesn't belong on the phone or
PDA version.

"If Jim is at his beach house, will he need this feature?"

Reasons:
We chose the beach house because it's also easy to picture being there. Jim plans on being there for a long time. This is not a
temporary thing. His end goal is to never leave the beach house because the ocean is 30 feet away and it is, quite simply, paradise.
At the beach house, Jim will have a large display and a full-function browser at his disposal. He wants to perform many different
tasks ranging from quick fix tasks to long-term planning tasks. He needs all tools available to fix any problem.
We need to provide Jim with the tools needed to fix any problem, as well as perform any configuration or planning tasks.

8 2002 IBM Corporation

ibm.com /eserver/iseries

Example
iSeries Navigator for Wireless

Problem
PDA/Phone is a totally different tool than full-function browser
Analogy: Laser scalpel vs. a chain saw

Solution
Come up with 2 different layouts that can be developed as one

NOTE: You need to know enough about development

tools to explain your design. In theory you don't, but in
practice you do. Builds credibility as well. Tip: Always put a couple
things you think are
beyond what can be
Examples: Hover help over a text link, navigation tabs done so you can
with translatable text, hiding and showing controls. "compromise" later on

8 2002 IBM Corporation

 ibm.com /eserver/iseries

Example
Discoveries

Needed to show summary status at every level

Only 1 page to show at a time so need to convey multiple sets of information

Job1 problem shows up Job1 problem is fixed

Keeps Navigation to a Minimum

Gives as much information as possible

8 2002 IBM Corporation

ibm.com /eserver/iseries

Example
Discoveries

"Standard" controls and guidelines don't always work on mobile devices.

Needed to reverse label/value to value/label. For the phone, if the label was too
long, then the values was off the screen

VS..

Good Bad

Design assuming Limited artwork (or no artwork)

Design with limited wording

Shows important information at all times

8 2002 IBM Corporation

 ibm.com /eserver/iseries
Tools and Resources

developer.openwave.com for mobile design tips, simulator tool for phones

Interactions Magazine

cooper.com

Me: gregh@us.ibm.com

IBM web sites

iSeries Navigator: www.ibm.com/eserver/iseries/navigator
Information Center: www.ibm.com/eserver/iseries/infocenter

8 2002 IBM Corporation

ibm.com /eserver/iseries

Thanks

8 2002 IBM Corporation

 ibm.com /eserver/iseries
Trademarks and Disclaimers
8 IBM Corporation 1994-2002. All rights reserved.
References in this document to IBM products or services do not imply that IBM intends to make them available in every country.
The following terms are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both:

AS/400 IBM(logo)
AS/400e iSeries
e (logo) business OS/400
IBM Websphere

Lotus, Freelance Graphics, and Word Pro are registered trademarks of Lotus Development Corporation and/or IBM Corporation.
Domino is a trademark of Lotus Development Corporation and/or IBM Corporation.

C-bus is a trademark of Corollary, Inc. in the United States, other countries, or both.
Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both.
ActionMedia, LANDesk, MMX, Pentium and ProShare are trademarks of Intel Corporation in the United States, other countries, or both.
UNIX is a registered trademark of The Open Group in the United States and other countries.
SET and the SET Logo are trademarks owned by SET Secure Electronic Transaction LLC.
Other company, product and service names may be trademarks or service marks of others.

Information is provided "AS IS" without warranty of any kind.

All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and
performance characteristics may vary by customer.

Information in this presentation concerning non-IBM products was obtained from a supplier of these products, published announcement material, or other publicly available sources and does
not constitute an endorsement of such products by IBM. Sources for non-IBM list prices and performance numbers are taken from publicly available information, including vendor
announcements and vendor worldwide homepages. IBM has not tested these products and cannot confirm the accuracy of performance, capability, or any other claims related to non-IBM
products. Questions on the capability of non-IBM products should be addressed to the supplier of those products.

All statements regarding IBM future direction and intent are subject to change or withdrawal without notice, and represent goals and objectives only. Contact your local IBM office or IBM
authorized reseller for the full text of the specific Statement of Direction.

Some information in this presentation addresses anticipated future capabilities. Such information is not intended as a definitive statement of a commitment to specific levels of performance,
function or delivery schedules with respect to any future products. Such commitments are only made in IBM product announcements. The information is presented here to communicate
IBM's current investment and development activities as a good faith effort to help with our customers' future planning.

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will
vary depending upon considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed.
Therefore, no assurance can be given that an individual user will achieve throughput or performance improvements equivalent to the ratios stated here.

Photographs shown are of engineering prototypes. Changes may be incorporated in production models.

8 2002 IBM Corporation