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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces GUI History Command-line interface –User must learn computer's language Menu Interface –Full screen –Menu bars –Pop-up (contextual)‏

Computer Graphics and User Interfaces GUI Timeline 1962: Sketchpad by 1970: Mouse pointing device 1981: Xerox Star 1982: Apple Lisa 1984: Apple Macintosh 1984: X Windows 1985: Microsoft Windows

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces Cognitive Psychology The study of how our minds work –How we we think –How we remember –How we learn Information-processing model of cognition

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces Memory strategies Rehearsal Chunking –divide the information into pieces that can be remembered easier Mnemonics attach meaning to the information

Computer Graphics and User Interfaces Strategies for Retrieval Recognition –use cues to help retrieve information Recall –retrieve information without any cues

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces Design Principles User should be in control Reduce memory load for users Be consistent

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces Consistency Within and across "products" –Follow guidelines if provided Sustain context of tasks Keep interaction results the same Provide aesthetic appeal Encourage exploration

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces Principles of User Interface Design 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

Computer Graphics and User Interfaces Principles of User Interface Design Make the program adaptable –short-cuts for power users Provide help Provide a safety net –"Are you sure?" dialogs –Undo and redo

Computer Graphics and User Interfaces 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

Computer Graphics and User Interfaces Usability Heuristics Ease of learning and remembering Efficiency of use Minimize errors –Facilitate recovery from errors

Computer Graphics and User Interfaces On-Line Articles Don Norman – User Interface Design Principles – mlhttp:// ml User Interface heuristics – mlhttp:// ml Digital Web Magazine – web.com/articles/user_interface_design_taking_the_g ood_with_the_bad/ web.com/articles/user_interface_design_taking_the_g ood_with_the_bad/

Computer Graphics and User Interfaces User Interface Guidelines IBM Common User Access – Apple User Interface Guidelines – nce/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_ 1_section_1.htmlhttp://developer.apple.com/documentation/UserExperie nce/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_ 1_section_1.html Windows User Experience Interaction Guidelines –