Tutorial Details

By Day - Selected
By Presenter
By Track
View My Agenda

Mobile User-Interface Design

Designing the Mobile Experience

Smart mobile UIs offer phone, Internet, media, and other PC products/services for work, home, and leisure, enabling users to find, sort, play, and pay. Participants will learn how to make mobile devices more usable, useful, and appealing through key principles, techniques, and a survey of design/usability issues in current products/services.

Tutorial by Aaron Marcus (Aaron Marcus and Associates, Inc.)
8:30am to 5:30pm on Tuesday, May 25, 2010

About the Tutorial

The following is the schedule of events and time allocations:

09:00 Tutorial begins

09:00-09:15 Lecture 0: Introduction to speaker

09:15-10:00 Lecture 1: Mobile UI Design: Intro, Tour, and Summary of Mobile UI Design Books

10:00-10:30 Break

10:30-12:00 Lecture 1: Mobile UI Design: Intro, Tour, and Summary of Mobile UI Design Books, continued

12:00-13:00 Lunch

13:00-13:30 Lecture 2: Asian Technology/Culture in UI Design

13:30-13:45 Lecture 3: Case Study of Asian Mobile/Culture UI Design: Wukong Project

13:45-14:00 Lecture 4: Making Media Metadata Management Fun

14:00-15:00 Lecture 5: MobileTV: an Intro

15:00-15:30 Break

15:30-15:45 Lecture 6: Wrist-Top UI Design

15:45-16:00 Lecture 7: Universal Mobile Sign System UI: LoCoS

16:00-16:30 Lecture 8: User-Centered Design: Case Study

16:30-17:30 Lecture 9: Designing Smartphone Prototype UIs: Case Study

17:30 pm Tutorial ends

Detailed Description and Allocation of Time: Lecture 0: Introduction to instructor and tutorial (15 minutes) Introduces the presenter, schedule, procedures, and objectives.

Lecture 1: Mobile UI Design: Intro, Tour and Book Summary (135 minutes) Introduces key terminology and concepts regarding the user-interface development process (planning, research, analysis, design, implementation, evaluation, documentation, training, and maintenance) and user-interface components (metaphors, mental models, navigation, interaction, and appearance). We also introduce key issues for mobile user interfaces in terms of challenges of limited space, multimodal interaction, multiple contents, multiple use environments, and the wide range of user types. We tour current products (navigation, phone, PDA, wrist-top, etc.) and discuss how they are/are not providing adequate usability, usefulness, and appeal. We introduce branding, cross-cultural communication, and information-visualization challenges. We summarize key sections of two leading books about mobile UI design:

Jones, Matt, and Marsden, Gary, Mobile Interaction Design:

 Golden Rules (Shneiderman’s) Be consistent Offer informative feedback Design dialogues to yield closure Prevent errors; help users to recover quickly Allow undo Make users feel they are in control Reduce short-term memory load  Microsoft Advice for converting desktop apps Find, then remove/replace unnecessary/unsupported UI elements Avoid recursive pop-up dialogue boxes/panes Put UI elements below each other, descriptive labels above all elements Find, then remove common dialogues; try longer dialogues that autoscroll Reduce number of menus to one and menu items to 4-8 Define softkeys consistently Test app UI with one hand  Encourages interviews, watching, testing users Inexpensive, engaging methods, e.g., diaries, ethnography-lite  Emphasizes personas/profiles and scenarios  Emphasizes prototypes Different purposes with varying fidelity  Emphasizes multiple evaluation techniques
Recording observations, interviews, questionnaires, heuristic evaluations, contextual (physical, technological, social, cultural) analysis  Discusses UI/Info design details Menu design, searching, use of images, information visualization, digital divide

Studio 75, Designing for Small Screens:

 Gives beautiful advice: typical, what to do/avoid Dialogue boxes, windows, tabs, pull-downs, pop-ups, scrolls, zoom  Reviews typical interaction techniques One-handed, clickable scroll wheel, mini-joystick, touch pad, voice i/o, keyboards, natural mappings, motor memory  How to organize/visualize large amounts of data Spatial, alphabetical, chronological, categorical, hierarchical  Entertainment Shows examples of visual design, logic, moving images, sound  Reviews many examples of text, icons, color Fonts, highlighting methods, icon sets, layout, color, Gestalt principles

Lecture 2: Asian Technology Trends and Culture Issues in Mobile UI Design (30 minutes) This lecture focuses on recent developments of mobile products and services in China, Japan, Korea, and Taiwan. Some current trends are illustrated. Examples show the influence of different cultures on mobile products and services. The differences among Asian countries as well as differences from USA products and services are highlighted. We shall also briefly refer to a video-based ethnographic study of mobile phone users in four different countries.

Lecture 3: Case Study of Asian Mobile UI Design: Wukong Project (15 minutes) This lecture summarizes the development of a PDA oriented to Chinese culture, especially in relation to the principle of Xuang-shi, or relationship building. These differences lead to strikingly different approaches to metaphors, mental models, navigation, interaction, and appearance.

Lecture 4: Making Media Metadata Management Fun in Consumer Electronics (15 minutes) This lecture introduces the issues of consumer electronics UI design issues, especially for media players with media metadata management functions for phones, music players, video players, PDAs, desktop synching, and vehicle systems. We discuss several possible improvements, and show information visualization techniques that can improve the user’s experienced, making it more “fun” to find, sort, play, and pay.

Lecture 5: MobileTV: An Intro (30 minutes) This lecture presents a an introduction to the book MobileTV: Customizing Content and Experience, which the author recently co-edited. The book contains 20 authors discussing all aspects of mobile video and mobile TV’s impact on social networking, customization, communication, and functionality of mobile devices. The lecture will summarize the book’s key ideas about the current state and future of this important technology development..

Lecture 6: Wrist-Top UI Design (15 minutes) This lecture introduces issues of designing user-interfaces for wrist-top devices, reviews current product and service trends, and shows several examples of simple channel content design for such devices.

Lecture 7: Universal Mobile Sign System: LoCoS (15 minutes) This lecture introduces the universal sign system called LoCoS, which was invented in Japan in 1964. We show how LoCoS could be used in mobile devices to facilitate users communicating who do not share a natural spoken or written language. We present several use scenarios, show prototype screens, discuss issues of input, and mention future development directions for LoCoS.

Lecture 8: User-Centered Design in Mobile Systems: A Case Study (30 minutes) This lecture summarizes a usability study of a mobile emergency response and communication system. The study indicated many significant errors in a system marred by usability problems that could have been avoided with better user-centered design. User-centered design was a key objective of an earlier AM+A project seeking to summarize much human factors advice about designing for the driver experience.

Lecture 9: Case Study of Phone/PDA UI (15 minutes) This lecture presents a case study of advanced UI development for Samsung that sought to explore opportunities to combine phone and PDA functions. The lecture introduces fundamental elements of mobile UI development, including user data gathering, including contextual inquiry and “shadowing” (which is necessary for mobile users), user profiling (personas and models), use scenarios, task analysis, rapid prototyping, and usability evaluation, including consideration of usefulness, appeal, and culture criteria. The lecture shows the development process and the issues that arose in conducting research about business and culture models, emerging technology, and advanced UI techniques. We explain the six fundamental use spaces for all mobile products (identity, information resource access, commerce, entertainment, relationship building/maintenance with others, and self-enhancement. We show how we used information about a limited number of users to determine key characteristics of the functions, data, and UI. We shall look at excerpts from an interactive prototype that shows the best 100 ideas produced from the study combined into one demonstration.