Computing and SE II

Chapter 10: HCI (Human Computer Interface ) DesignEr-Yu DingSoftware Institute, NJU

Main ContentsWhy HCI Design?Objectives of HCI DesignBasics of HCI DesignGolden Principles and Rules of HCI DesignProcess of HCI Design

1.Why HCI Design?What is HCI?UI design is not just about the arrangement of media on a screenIts designing an entire experience for people, hence a look and feelPsychology: building a mental modelErgonomics: facilitating navigation

1.Why HCI Design?Mental Model: An Example (1)

1.Why HCI Design?Mental Model: An Example (2)

1.Why HCI Design?Mental Model: An Example (3)

1.Why HCI Design?System users often judge a system by its interface rather than its functionality.User interfaces should be designed to match the skills, experience and expectations of its anticipated users.A poorly designed interface can cause a user to make catastrophic errors. A poor UI is often a reason why so many software systems are never used.A user interface is well-designed when the program behaves exactly how the user thought it would. Joel Spolsky

1.Why HCI Design?We remember only the bad!A good interface should be transparentBad interfaces cause user frustrationWhat was this product designer thinking?GOODBAD

2. Objectives of HCI Design What is a good HCI interface designA good HCI interface design encourage an easy, natural, and engaging interaction between a user and a system.It allows users to carry our their required tasks.With a good user interface, users forget that they are using a computer.How to judge good or bad?Usability!

2. Objectives of HCI Design Usability attributes of an interfaceUsability is not a single, one-dimensional property of a user interfaceLearnability: learn easily, user can do things with it in little timeEfficiency: skilled users can use it with great efficiencyMemorability: interrupted users can continual use it ,do not need to starting from scratchErrors: little errors, resume quickly from errorsSatisfaction: make users pleased

2. Objectives of HCI Design Learn Curve

2. Objectives of HCI Design MemoryInvolves encoding and recalling knowledge and acting appropriatelyWe dont remember everything involves filtering and processingContext is important in affecting our memoryWe recognize things much better than being able to recall thingsThe rise of the GUI over command-based interfacesBetter at remembering images than wordsThe use of icons rather than names

2. Objectives of HCI Design Human Factors in Interface DesignLimited short-term memoryPeople can instantaneously remember about 7 items of information. If you present more than this, they are more liable to make mistakes.People make mistakesWhen people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress and hence the likelihood of more mistakes.People are differentPeople have a wide range of physical capabilities. Designers should not just design for their own capabilities.People have different interaction preferencesSome like pictures, some like text.

3. Basics of HCI Design User-System interactionTwo problems must be addressed in interactive systems designHow should information from the user be provided to the computer system?How should information from the computer system be presented to the user?

User interaction and information presentation may be integrated through a coherent framework such as a user interface metaphor.

3. Basics of HCI Design Interaction stylesDirect manipulationEasiest to grasp with immediate feedbackDifficult to programMenu selectionUser effort and errors minimizedLarge numbers and combinations of choices a problemForm fill-inEase of use, simple data entryTedious, takes a lot of screen spaceCommand languageEasy to program and processDifficult to master for casual usersNatural languageGreat for casual usersTedious for expert users

3. Basics of HCI Design An Example of Direct manipulationControl panel interface

3. Basics of HCI Design Direct manipulationAdvantages:Users feel in control of the computer and are not intimidated by it.User learning time is relatively short.User get immediate feedback on their actions. Mistakes can often be detected and corrected quickly.Problems:How can an appropriate information model and metaphors be derived?Given that users have a large information space, how can they navigate around that space and always aware of their current position?Interfaces usually are complicated.

Pop-up menuPull-down menuWalking menu3. Basics of HCI Design Menu Systemspull-down menus: predictable, but need more screen spacedisplay the menu title. User can select commands through this menu.pop-up menus: flexible, tailorable, may cause user surprise-They are associated with entities (such as a field). Selecting the entity then clicking a mouse button --> cause the menu to appear.

3. Basics of HCI Design Menu SystemsAdvantages:Users do not need to know the command names.Typing efforts is minimal.Some user errors can be avoid.Context-dependent help can be provided.Problems:Actions which involve logical conjunction (and) or disjunction (or) are awkward to representTake care the structure of large menus.Solutions: a) scrolling menus,b) hierarchical menusc) walking menus,d) associated control panels

3. Basics of HCI Design Form-based interfaceAdvantageFor structured data representation and filling inProblemsJust for structured data representation and filling in

3. Basics of HCI Design Command-line interfacesAdvantages:Implementation is easy and simple due to the language processing.It can support very complex systems with a lot of commands.User interface needs a little effort.Typing efforts is minimal.Some user errors can be avoid.Context-dependent help can be provided.Problems:Users must learn and remember all commands.Hard to learn the system and not easy for operations.Users inevitably make errors.

3. Basics of HCI Design Natural language interfacesThe user types a command in a natural language. Generally, the vocabulary is limited and these systems are confined to specific application domains (e.g. timetable enquiries)NL processing technology is now good enough to make these interfaces effective for casual users but experienced users find that they require too much typing

3. Basics of HCI Design Multiple user interfaces

Interaction style

Main advantages

Main disadvantages

Application examples

Direct manipulation

Fast and intuitive interaction

Easy to learn

May be hard to implement.

Only suitable where there is a visual metaphor for tasks and objects.

Video games

CAD systems

Menu selection

Avoids user error

Little typing required

Slow for experienced users.

Can become complex if many menu options.

Most general-purpose systems

Form fill-in

Simple data entry

Easy to learn

Checkable

Takes up a lot of screen space.

Causes problems where user options do not match the form fields.

Stock control, Personal loan processing

Command language

Powerful and flexible

Hard to learn.

Poor error management.

Operating systems, Command and control systems

Natural language

Accessible to casual users

Easily extended

Requires more typing.

Natural language understanding systems are unreliable.

Information retrieval systems

3. Basics of HCI Design Interface TypesBatch: without interactionCopy, email-message, etc.Command: one-dimension interfaceFor skilled users with fixed tasksFull screen: two-dimension interfaceform, menu, navigation keyFor skilled users with limited number tasksGraphics screen: two and half dimension interfaceWindow, menu, icon, position devices (mouse, etc.)Object-oriented, operate directlyNext generation in the future: three or more dimensions interfaceAdditional dimensions: time, voice, etc.More facilitative, more personalization

4. Golden Principles and Rules of HCI Design Golden RulesPlace the user in controlReduce the users memory loadBe consistent

4. Golden Principles and Rules of HCI Design Place the User in ControlDefine interaction modes in a way that does not force a user into unnecessary or undesired actions. Provide for flexible interaction. Allow user interaction to be interruptible and undoable. Streamline interaction as skill levels advance and allow the interaction to be customized. Hide technical internals from the casual user. Design for direct interaction with objects that appear on the screen.

4. Golden Principles and Rules of HCI Design Reduce the Users Memory LoadReduce demand on short-term memory. Establish meaningful defaults. Define shortcuts that are intuitive. The visual layout of the interface should be based on a real world metaphor. Disclose information in a progressive fashion.

4. Golden Principles and Rules of HCI Design Make the Interface ConsistentAllow the user to put the current task into a meaningful context. Maintain consistency across a family of applications. If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so.

4. Golden Principles and Rules of HCI Design Ten Principles 1Compact and natural dialogueDesign graph and colorFew is muchUsing user languageLeast memory needed for userConsistentFeedback

4. Golden Principles and Rules of HCI Design Ten Principles 2Identify exit clearShortcutGood error messageAvoid mistakeHelp and document

4. Golden Principles and Rules of HCI Design Which Rules is there? Obtrusive Assistance

If your program model is nontrivial, its probably wrong(invisible sheets in Excel)Click hereThis window comes to top!4. Golden Principles and Rules of HCI Design Which Rules is there?

4. Golden Principles and Rules of HCI Design Which Rules is there?Bad Wizards

XEROXs GUI (1981)4. Golden Principles and Rules of HCI Design Which Rules is there?

How do the following screen objects afford? What if you were a novice user? Would you know what to do with them?4. Golden Principles and Rules of HCI Design Which Rules is there?

phones, remote controlscalculators, computer keypads4. Golden Principles and Rules of HCI Design Which Rules is there?

click 4. Golden Principles and Rules of HCI Design Which Rules is there?

floating menu barhuge system trayHow many users want these?4. Golden Principles and Rules of HCI Design Which Rules is there?

vs.(30% usability)(100% usability)4. Golden Principles and Rules of HCI Design Which Rules is there?

4. Golden Principles and Rules of HCI Design Which Rules is there?

vs.4. Golden Principles and Rules of HCI Design Which Rules is there?

vs.vs.(no dialog)Which is better for an intimidated user?4. Golden Principles and Rules of HCI Design Which Rules is there?

4. Golden Principles and Rules of HCI Design Which Rules is there?

4. Golden Principles and Rules of HCI Design Which Rules is there?

4. Golden Principles and Rules of HCI Design Which Rules is there?

4. Golden Principles and Rules of HCI Design Which Rules is there?

5. Process of HCI DesignFour basic activitiesThere are four basic activities in interaction design:Identifying needs and establishing requirementsDeveloping alternative designsBuilding interactive versions of the designsEvaluating designs

5. Process of HCI Design User Interface Design Process

5. Process of HCI Design Interface AnalysisInterface analysis means understanding UserIndividual characteristicsUser groupsFrequency of usageWorkTask featuresTime constraintsErrorsContentFigure , graph or textEnvironmentGeneral environment factorsOrganizationCurture

5. Process of HCI Design Interface Analysis: User Why do we need to understand users?Interacting with technology is cognitiveWe need to take into account cognitive processes involved and cognitive limitations of usersWe can provide knowledge about what users can and cannot be expected to doIdentify and explain the nature and causes of problems users encounterSupply theories, modeling tools, guidance and methods that can lead to the design of better interactive products

5. Process of HCI Design Interface Analysis: UserUsage profilesNovice or first-time users Knowledgeable intermittent users Expert frequent users User characteristicsAge Gender Physical abilities Education Cultural or ethnic background Training Motivation Goals Personality

5. Process of HCI Design Interface Analysis: User

Are users trained professionals, technician, clerical, or manufacturing workers?What level of formal education does the average user have?Are the users capable of learning from written materials or have they expressed a desire for classroom training?Are users expert typists or keyboard phobic?What is the age range of the user community?Will the users be represented predominately by one gender?How are users compensated for the work they perform? Do users work normal office hours or do they work until the job is done?Is the software to be an integral part of the work users do or will it be used only occasionally?What is the primary spoken language among users?What are the consequences if a user makes a mistake using the system?Are users experts in the subject matter that is addressed by the system?Do users want to know about the technology the sits behind the interface?

5. Process of HCI Design Interface Analysis: WorkWhat tasks will a user of the system perform?High level - why people use the systemLow level - tasks involved in using the systemTasks define basic interaction styleHCI design should be transparent to userBusiness(user model ) .VS. Logic( designer model)

5. Process of HCI Design Interface Analysis: WorkTask profilesDecomposition into multiple middle-level task actions, which are refined into atomic actions task frequencies of use matrix of users and tasks helpful Interaction stylesDirect manipulation Menu selection Form fillin Command language Natural language

5. Process of HCI Design Interface Analysis: WorkTask Analysis and ModelingUse-cases define basic interactionTask elaboration refines interactive tasksObject elaboration identifies interface objects (classes)Workflow analysis defines how a work process is completed when several people (and roles) are involved Layered representation according to task refinements

5. Process of HCI Design Interface Analysis: WorkAnswers the following questions What work will the user perform in specific circumstances?What tasks and subtasks will be performed as the user does the work?What specific problem domain objects will the user manipulate as work is performed?What is the sequence of work tasksthe workflow?What is the hierarchy of tasks?

5. Process of HCI Design Interface Analysis: ContentTerminology Prompts Menus Help screens Color Layout Capitalization Fonts Most frequently violated

5. Process of HCI Design Interface Analysis: ContentAre different types of data assigned to consistent geographic locations on the screen (e.g., photos always appear in the upper right hand corner)?Can the user customize the screen location for content?Is proper on-screen identification assigned to all content? If a large report is to be presented, how should it be partitioned for ease of understanding?Will mechanisms be available for moving directly to summary information for large collections of data.Will graphical output be scaled to fit within the bounds of the display device that is used?How will color to be used to enhance understanding?How will error messages and warning be presented to the user?

5. Process of HCI Design Interface Analysis: ContentShape

5. Process of HCI Design Interface Analysis: Content

Dynamic information display

5. Process of HCI Design Interface Analysis: ContentColor Use Guidelines Limit the number of colors and be conservative in their use.No more than 4 or 5 colors in a window.Use color change to show a change in system status.Use color to support the task that users are trying to perform.Color should emphasize the most important data.Use color coding in a thoughtful and consistent way.Using red to indicate success is probably not a good idea.Be careful about color pairings.E.g. Dark blue on black is not a good choice.Avoid associating meaning with colors.Users may not see colors or associate with different meaning.

5. Process of HCI Design Interface Analysis: EnvironmentsSystems model

Physical environments

Culture ambience

5. Process of HCI Design Interface Analysis: EnvironmentsSystem modelGlobalTemporaryBackgroundPhysical environmentsColorNoiceEtc.

Cultural constraintsLearned arbitrary conventions

5. Process of HCI Design Interface Analysis: Environments

5. Process of HCI Design Interface Analysis: EnvironmentsCultural constraintsHow/what to represent the target culture?Should designs impose foreign values?

5. Process of HCI Design Interface Design StepsUsing information developed during interface analysis, define interface objects and actions (operations).Define events (user actions) that will cause the state of the user interface to change. Model this behavior.Depict each interface state as it will actually look to the end-user.Indicate how the user interprets the state of the system from information provided through the interface.

5. Process of HCI DesignPrototyping HCI InterfacesHigh-fidelity: implement it in FlashLow-fidelity: use paper, glue, index cards, tape, colored markersAdvantages of low-fidelity prototype?Easy and inexpensive to buildEasy and cheap to change, many timesDisadvantages of low-fidelity prototype?Dont simulate computer response time accurately

5. Process of HCI DesignPrototyping HCI Interfaces:An example

5. Process of HCI Design Interface Design PatternsPatterns are available forThe complete UIPage layoutForms and inputTablesDirect data manipulationNavigationSearchingPage elements (Wizard)e-Commerce

5. Process of HCI DesignHCI Design IssuesResponse timeHelp facilitiesError handlingMenu and command labelingApplication accessibilityInternationalization

5. Process of HCI DesignHCI Design EvaluationSome evaluation of a user interface design should be carried out to assess its suitabilityFull scale evaluation is very expensive and impractical for most systemsIdeally, an interface should be evaluated against a usability specification. However, it is rare for such specifications to be produced

5. Process of HCI Design Simple evaluation techniquesQuestionnaires for user feedbackVideo recording of system use and subsequent tape evaluation.Instrumentation of code to collect information about facility use and user errors.The provision of a grip button for on-line user feedback.

5. Process of HCI Design Design Evaluation Cycle

The EndNext LectureSoftware Construction