TH6204 Advance Design Interface

TH6204Advance Design Interface

Topic 3Standards and GuidelinesTENGKU SITI MERIAM BT TENGKU WOOK1TSMTWIntroduction2TSMTWDesign rules for HCIMany sets of rules have been proposed to encapsulate understanding and best practiceOperate at various level

Designing for maximum usability the goal of interaction design

Principles of usabilitygeneral understanding

Standards and guidelinesdirection for design

Design patternscapture and reuse design knowledge3TSMTWtypes of design rulesprinciplesabstract design rulesAn interface should be easy to navigatestandardsspecific design ruleshigh authoritylimited applicationguidelinesAdvice on how to achieve principleMay conflict; understanding theory helps resolvelower authoritymore general application

increasing authorityincreasing generality4TSMTWUsing design rulesDesign rulessuggest how to increase usabilitydiffer in generality and authority

increasing authorityincreasing generality5TSMTW

6TSMTWStandards7TSMTWStandardsStandards for interactive system design are usually set by national or international bodies to ensure compliance by a large community of designers standards require sound underlying theory and slowly changing technology

Underlying theory: software standards are based on theories from psychology or cognitive science, which are less well formed, still evolving and not easy to interpret in the language of software design.Change: hardware is more difficult and expensive to change than software, which is usually designed to be very flexible 8TSMTWSTANDARDShardware standards more common than software high authority and low level of detailISO 9241 defines usability as effectiveness, efficiency and satisfaction with which users accomplish tasks

9TSMTWISO 9241Addresses the ergonomics requirements to work with VDTs (Visual Display Terminals), both hardware and softwareContains 17 parts:Part 1 General introductionPart 2 Guidance on task requirementsPart 3 Visual display requirementsPart 4 Keyboard requirementsPart 5 Workstation layout and postural requirementsPart 6 Environmental requirements Part 7Display requirements with reflectionsPart 8Requirements for displayed colours10TSMTWISO 9241Part 9 Requirements for non-keyboard input devicesPart 10Dialogue principlesPart 11Guidance on usability specification and measuresPart 12Presentation of informationPart 13User guidancePart 14Menu dialoguesPart 15Command dialoguesPart 16Direct manipulation dialoguesPart 17Form-filling dialogues11TSMTWGuidelines12TSMTWGuidelinesmore suggestive and generalmany textbooks and reports full of guidelinesabstract guidelines (principles) applicable during early life cycle activitiesdetailed guidelines (style guides) applicable during later life cycle activitiesunderstanding justification for guidelines aids in resolving conflicts

13TSMTWGolden rules and heuristicsBroad brush design rulesUseful check list for good designBetter design using these than using nothing!Different collections e.g.Shneidermans 8 Golden RulesNielsens 10 Heuristics

14TSMTWShneidermans 8 Golden Rules1. Strive for consistency 2. Enable frequent users to use shortcuts3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load15TSMTWShneidermans 8 Golden Rules1.Strive for ConsistencyConsistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.

Consistency

Workflows / ProcessesFunctionalityAppearanceTerminology16TSMTWStrive for Consistency

17TSMTWStrive for ConsistencyMS Word, WordPress, eBay, iPhone/iPad, Windows, car nav, home appliance, car, TV, (scripts, script direction, )rocker switch, dial , AppPlatformSystem TypeCultural RegionThe World18TSMTWStrive for Consistency

19TSMTWStrive for Consistency

20TSMTWStrive for Consistency

21TSMTWBad example:website colors of visited links and unvisited linksGood example:- Window control buttons22TSMTWShneidermans 8 Golden Rules2.Enable frequent users to use shortcutsAs the frequency of use increases, so do the users desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.

FlexibilityMinimalism

Keyboard shortcutsHidden Power User featuresAutomation23TSMTWEnable frequent users to use shortcuts

24TSMTW

25TSMTWGood example:CTRL-(x,c,v) :Microsoft applications for cut, copy and paste (consistency principle also)Bad examples:- Notepad does not provide CTRL-s for save files.

26TSMTWShneidermans 8 Golden Rules3.Offer informative feedbackFor every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.

Feedback

RelevantFits importance and urgencyComprehensible and meaningfulWithin appropriate context (time & place)27TSMTWOffer informative feedback0,1 s1,0 s10 sExperiencingcause and effectTaking turns ina conversationTypical humanattention spanRespond tomouse click,key press, Open window,bring up progressbar / spinner, Wake machine,load file into app,start printing, 28TSMTWOffer informative feedback

29TSMTWBad example:- Text editor that allows you to type during auto-save is in progress, but you will not see on the screen in a few seconds

Good example:- Color selection during the Paint program allows automatic feedback if user change the color

30TSMTWShneidermans 8 Golden Rules4.Design dialogue to yield closureSequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.

Task conformance

Grouping of actionsExplicit completion of an actionWell-defined options for the next step31TSMTWDesign dialogue to yield closureExample

32TSMTWDesign dialogue to yield closure

33TSMTWDesign dialogue to yield closure

34TSMTWDesign dialogue to yield closure

35TSMTWShneidermans 8 Golden Rules5.Offer simple error handlingAs much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect error and offer simple, comprehensible mechanisms for handling the error.

RecoverabilityForgiveness

Error prevention over error correctionAutomatic detection of errorsClear error notificationsHints for solving the problem36TSMTWOffer simple error handling

37TSMTWOffer simple error handling

38TSMTWOffer simple error handling

39TSMTWGood Examples: if the user select an existing file name when save the file, a dialog box will come out to check if the old file should be replaced or not.

40TSMTWShneidermans 8 Golden Rules6.Permit easy reversal of actionsThis feature relives anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.

Recoverability

No interference with workflowMore freedom for the userSingle-action undo vs. action history41TSMTWPermit easy reversal of actionsExample: Back button in the web browser is also in the form of undo button

42TSMTWPermit easy reversal of actions

43TSMTWPermit easy reversal of actions

44TSMTWShneidermans 8 Golden Rules7.Support internal locus of controlExperienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.

Dialog inititive

The user commands, the system obeys Strongly relies on Informative FeedbackThe Principle of Least Surprise45TSMTWSupport internal locus of controlExamples: Helpful pictures on buttons are good Unhelpful pictures on buttons are bad

46TSMTWSupport internal locus of control

47TSMTWSupport internal locus of control

ModalNon-modalDialog boxinspector48TSMTWSupport internal locus of control

HotelAlarmClocks49TSMTWSupport internal locus of control

50TSMTWBad examples from Microsoft Word 97: Hyperlinks automatically underlined and font-selected51TSMTWShneidermans 8 Golden Rules8.Reduce short-term memory loadThe limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

Minimalism

Clear structure:windows, dialogs, app in its entiretyRecognition over RecallImplicit help52TSMTWReduce short-term memory loadUnderstanding a simple sentence can ifinterrupted with a tangent like this one, which contains just twenty words, but already noticeably challenges your short-term memory become a problem.53TSMTWReduce short-term memory loadChunks of Information7 254TSMTWReduce short-term memory load

55TSMTWReduce short-term memory load

56TSMTWReduce short-term memory load

57TSMTWNielsens Heuristics10 heuristics evaluation58TSMTWNielsens Heuristics1. Visibility of system status 2. Match between system and the real world3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use8. Aesthetic and minimalist design9. Help users recognise, diagnose and recover from errors10. Help and documentation59TSMTWNielsens Usability Heuristics1.Visibility of system statusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time

ObservabilityResponsiveness

60TSMTWNielsens Usability Heuristics2.Match between system and the real worldThe system should speak the users language, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in natural and logical order.

MappingFamiliarity

61TSMTWNielsens Usability Heuristics3.User control and freedomUsers often choose system functions by mistake and will need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Dialog initiativeRecoverabilityForgiveness

62TSMTWNielsens Usability Heuristics4.Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Consistency

63TSMTWNielsens Usability Heuristics5.Error PreventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place.

RecoverabilityForgiveness

64TSMTWNielsens Usability Heuristics6.Recognition rather than recallMake objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

VisibilityMinimalism

65TSMTWNielsens Usability Heuristics7.Flexibility and efficiency of useAccelerators (unseen by novice users) may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Flexibility (and all the supporting principles)

66TSMTWNielsens Usability Heuristics8.Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

VisibilityMinimalism

67TSMTWNielsens Usability Heuristics9.Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

RecoverabilityForgiveness

68TSMTWNielsens Usability Heuristics10. Help and documentationEven though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the users task, list concrete steps to be carried out, and not to be too large.

69TSMTWSummary:The 10 most general principles for interaction design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.70TSMTWMore specific GuidelinesWindows User Experience Interaction Guidelineshttp://msdn.microsoft.com/en-us/library/aa511258.aspx

Apple Human Interface Guidelines http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.html

GNOME Human Interface Guidelines 2.2.1 http://developer.gnome.org/hig-book/stable/

71TSMTWGUI Bloopers (Booksite)United States, California, San FranciscoJeff Johnson2002-05-20UI Wizards, Inc.jjohnson@uiwizards.comBooksite for GUI Bloopers book.

72TSMTWExerciseMany seems like common sense- but often violatedPick one everyday object and one piece of software and assess with respect to these rules.

73TSMTW