ui-for-mobile-devices
Content
Session:
430077
®
User Interface Design for Mobile Devices
Greg Hintermeister
[email protected]
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
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 Design
Example:
Competitive advantage
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 Stationary - at least for the task being done All inclusive - user expects to perform any task to get the job done
Small screen - little information to view at once Mobile - even while the task is being done Limited tasks - user expects to perform emergency, 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
Solves a unique mobile need Examples:
Find closest ATM Interactive Chat
Example:
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 this feature?"
"If Jim is at his beach house, will he need this 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. Examples: Hover help over a text link, navigation tabs with translatable text, hiding and showing controls.
Tip: Always put a couple things you think are beyond what can be done so you can "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: [email protected] 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 AS/400e e (logo) business IBM
IBM(logo) iSeries OS/400 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
430077
®
User Interface Design for Mobile Devices
Greg Hintermeister
[email protected]
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
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 Design
Example:
Competitive advantage
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 Stationary - at least for the task being done All inclusive - user expects to perform any task to get the job done
Small screen - little information to view at once Mobile - even while the task is being done Limited tasks - user expects to perform emergency, 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
Solves a unique mobile need Examples:
Find closest ATM Interactive Chat
Example:
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 this feature?"
"If Jim is at his beach house, will he need this 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. Examples: Hover help over a text link, navigation tabs with translatable text, hiding and showing controls.
Tip: Always put a couple things you think are beyond what can be done so you can "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: [email protected] 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 AS/400e e (logo) business IBM
IBM(logo) iSeries OS/400 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
Sponsor Documents
Recommended
No recommend documents