User Interface Design Users should not have to adapt to a piece of software; the software should be...

User Interface Design

Users should not have to adapt to a piece of software; the software should be designed to fit the user.

Computer Graphics and User Interfaces

Definitions

• User Interface is means through which users interact with devices– input allows manipulation of the system– output provides results of that manipulation

• Graphical User Interface (GUI) is a UI which allows users to interact with electronic devices– Offers graphical icons and visual indicators– Actions are performed through direct

manipulation of graphical elements


User Interface Design

• Focus on the user's experience and interaction– Not just on looks

• Need to understand cognitive psychology, human factors, graphic design – not just programming


Goal of the User Interface

• Goal is to make the user's experience as simple and efficient as possible

• Facilitate getting the job done– UI should not draw attention to itself

• Be useable and adaptable


GUI History

• Command-line interface– User must learn computer's language

• Menu Interface– Full screen– Menu bars– Pop-up (contextual)


GUI Timeline

• 1962: Sketchpad• by 1970: Mouse pointing device• 1981: Xerox Star• 1982: Apple Lisa• 1984: Apple Macintosh• 1984: X Windows• 1985: Microsoft Windows


X Windows• Client-server window system

– designed to run across the network

• UI is separate from X– Xlib has the basic functions– Toolkits make it easy to create well-

defined, consistent interfaces• Toolkits provide look and feel

• UI is divided into two parts– Application interface– Window-management interface


Human Factors

• Perception– How you interpret something can depend on

the context– How long does information need to be

available to be perceived

• Cognition– How do we think

• Memory– short-term memory has small capacity– long-term memory takes time to access


Three Models of a User Interface

• User's model• Programmer's model

– functional specification of the program

• Designer's model– needs to merge user and programmer

model


User Models

• People try to understand something new by relating it to something that they are familiar with

• People expect similar behavior from things that seem related

• Goal of interface design is to facilitate the process of building a mental model


Why form a model

• to predict what will happen• to explain what did happen• to help select actions to reach a

goal• as a reminder of how things work


Cognitive Psychology

• The study of how our minds work– How we we think – How we remember– How we learn

• Information-processing model of cognition


Perception and Attention

• Perception combines data from senses with knowledge stored in memory– You aren't necessarily aware that it is

happening

• People respond to changes in the environment– Sound and visuals are just distractions

if they don't serve a useful purpose


Human Memory System• Sensory storage is where information

gathered by your senses is acquired and processed

• Short-term (working) memory collects information from sensory storage that is deemed important – limited capacity

• Long-term memory is like permanent storage– need strategies for retrieval


Memory strategies

• Rehearsal• Chunking

– divide the information into pieces that can be remembered easier

• Mnemonics attach meaning to the information


Strategies for Retrieval

• Recognition– use cues to help retrieve information

• Recall– retrieve information without any cues


Quality of Experience

• From a paper by Lauralee Alben– ACM Interactions,

May-June 1996, page 11

• Describes the criteria used for the ACM/interactions design awards


Design Principles

• User should be in control• Reduce memory load for users• Be consistent


Let the User be in control

• Use modes sparingly• Allow use of both mouse and

keyboard• Messages should be in terms user

can understand• Provide immediate, visible feedback• Make it easy to navigate• Accommodate different skill levels


Reduce the Memory Load

• Don't ask the user to remember too much

• Rely on recognition rather than recall

• Provide visual cues• Provide short cuts• Use real-world metaphors• Visual clarity


Consistency

• Within and across "products"– Follow guidelines if provided

• Sustain context of tasks• Keep interaction results the same• Provide aesthetic appeal• Encourage exploration


Principles of User Interface Design

• Know the user• Listen to the users• Let the users test it• Make it pleasing• Some aspects are more visible than

others



• Provide familiar behavior• Make functionality visible• Make behavior consistent

– both internally and externally

• Reflect changes in behavior with changes in appearance– mouse cursor shape can reflect changes in

mode

• Limit activity to one context



• Make the program adaptable– short-cuts for power users

• Provide help• Provide a safety net

– "Are you sure?" dialogs– Undo and redo


UI Design involves compromise

• Limits to– how much can be displayed on a single

screen– how much information a user can

process at one time


Usability Heuristics

• Ease of learning and remembering• Efficiency of use• Minimize errors

– Facilitate recovery from errors


On-Line Articles

• Don Norman– http://www.jnd.org/dn.pubs.html

• User Interface Design Principles– http://www.sylvantech.com/~talin/projects/ui_d

esign.html

• User Interface heuristics– http://www.useit.com/papers/heuristic/heuristic

_list.html

• Digital Web Magazine– http://www.digital-web.com/articles/user_interf

ace_design_taking_the_good_with_the_bad/


User Interface Guidelines

• IBM Common User Access– http://www.research.ibm.com/journal/sj/273/ibms

j2703E.pdf

• Apple User Interface Guidelines – http://developer.apple.com/documentation/UserE

xperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html

• Windows User Experience Interaction Guidelines– http://msdn.microsoft.com/en-us/library/aa51125

8.aspx

User Interface Design Users should not have to adapt to a piece of software; the software should be...

Documents

Transcript of User Interface Design Users should not have to adapt to a piece of software; the software should be...