Small Screens, Big Lessons: Learning from Well Designed Small Screen Interfaces Paul D. Hibbitts www.paulhibbitts.com

About Me Macintosh OS multimedia development (1989) User interface design specialist for over 12 years Platforms include Macintosh, Windows, Web, Pocket PC, SmartPhone, Palm OS, and WAP Between 2000-02 led user experience design of small screen interfaces at Infowave Software Currently developing streamlined techniques for remote user studies and usability testing

Macintosh OS multimedia development (1989)

User interface design specialist for over 12 years

Platforms include Macintosh, Windows, Web, Pocket PC, SmartPhone, Palm OS, and WAP

Between 2000-02 led user experience design of small screen interfaces at Infowave Software

Currently developing streamlined techniques for remote user studies and usability testing

Small Screen Devices

Common Attributes of Small Screen Devices Minimal screen display area Limited interaction styles with users Operated with limited attention from users Often one highly optimized task/application Users highly aware of effort and time

Minimal screen display area

Limited interaction styles with users

Operated with limited attention from users

Often one highly optimized task/application

Users highly aware of effort and time

Designing for Small Screens The physical constraints and demanding target market of small screen devices call for the design of highly concise, effective user interfaces Many of the resulting design methods can also be applied to desktop applications and Web sites

The physical constraints and demanding target market of small screen devices call for the design of highly concise, effective user interfaces

Many of the resulting design methods can also be applied to desktop applications and Web sites

Small Screens, Big Lessons Applying the three keys to success Increasing task completion rates Managing visual complexity Organizing the user interface Supporting a state of flow Writing clear and consistent interface text Refining the design process

Applying the three keys to success

Increasing task completion rates

Managing visual complexity

Organizing the user interface

Supporting a state of flow

Writing clear and consistent interface text

Refining the design process

Supporting a State of Flow

References Csikszentmihalyi, M. (1990). Flow: The Psychology of Optimal Experience . New York, NY: HarperCollins. Danger. (2004). Danger Hiptop User Interface Guidelines. Mayhew, D. (1992). Principles and Guidelines in Software User Interface Design . Englewood Cliffs, NJ :Prentice Hall. Microsoft. (2003). Picking the Right Degree of Control for User Interfaces . http://msdn.microsoft.com/Longhorn/understanding/ux/default.aspx?pull=/library/en-us/dnaero/html/usercontrol.asp Olsen, H. (2003). Balancing Visual and Structural Complexity in Interaction Design. http://www.guuui.com/issues/04_03.php

Csikszentmihalyi, M. (1990). Flow: The Psychology of Optimal Experience . New York, NY: HarperCollins.

Danger. (2004). Danger Hiptop User Interface Guidelines.

Mayhew, D. (1992). Principles and Guidelines in Software User Interface Design . Englewood Cliffs, NJ :Prentice Hall.

Microsoft. (2003). Picking the Right Degree of Control for User Interfaces . http://msdn.microsoft.com/Longhorn/understanding/ux/default.aspx?pull=/library/en-us/dnaero/html/usercontrol.asp

Olsen, H. (2003). Balancing Visual and Structural Complexity in Interaction Design. http://www.guuui.com/issues/04_03.php

Supporting a State of Flow As defined by behavioral psychologist Mihaly Csikszentmihalyi (pronounced chick-sent-me-high-ee), “flow” is a state of optimal experience that people reach when they are totally absorbed in an activity

As defined by behavioral psychologist Mihaly Csikszentmihalyi (pronounced chick-sent-me-high-ee), “flow” is a state of optimal experience that people reach when they are totally absorbed in an activity

Danger HipTop/T-Mobile SideKick 3

Conditions for Experiencing Flow Balance of skill and challenge Clear goals and feedback Concentration on the task at hand Sense of control

Balance of skill and challenge

Clear goals and feedback

Concentration on the task at hand

Sense of control

Balance of Skill and Challenge Flow Anxiety Boredom (Low) Challenge (High) (Low) User Skill (High) Source: Csikszentmihalyi 1990

Balance of Skill and Challenge

Providing Flexibility

Using Progressive Disclosure

Clear Goals and Feedback Goals should be clear, and feedback rapid and unambiguous

Clear Goals and Feedback

Goals should be clear, and feedback rapid and unambiguous

Bringing Forward the Information that Users Care About the Most

Considering the Level of Feedback Obtrusiveness

Concentration on the Task at Hand The task should be the focus, and not the user interface

Concentration on the Task at Hand

The task should be the focus, and not the user interface

Considering the Aspects of Interface Simplicity Functional Visual Structural Simplicity

Balancing Visual and Structural Simplicity

Anticipating Likely User Errors

Sense of Control The user interface should provide the sense of being in control

Sense of Control

The user interface should provide the sense of being in control

Providing a High-level Overview of the Entire System

Determining the Right Level of User Control

Supporting a State of Flow Summary Balance of skill and challenge Clear goals and feedback Concentration on the task at hand Sense of control

Balance of skill and challenge

Clear goals and feedback

Concentration on the task at hand

Sense of control

Thank You – Questions? My contact information [email_address] The slides presented today are available at www.paulhibbitts.com/downloads.html Usability design resources, including small screens www.paulhibbitts.com/links.html

My contact information

[email_address]

The slides presented today are available at

www.paulhibbitts.com/downloads.html

Usability design resources, including small screens

www.paulhibbitts.com/links.html