Mobile User-Interface Design
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.
- 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:30-12:00 Lecture 1: Mobile UI Design: Intro, Tour, and Summary of Mobile UI Design Books, continued
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: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 (Shneidermans)
Offer informative feedback
Design dialogues to yield closure
Prevent errors; help users to recover quickly
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
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 users 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 TVs impact on social networking, customization, communication, and functionality of mobile devices. The lecture will summarize the books 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.