HUMAN COMPUTER INTERACTION System Analysis and Design Introduction

HUMAN COMPUTER INTERACTION System Analysis and Design

Introduction Forms and Reports LEARNING OBJECTIVES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üUnderstand the Design of Forms and Reports. üUnderstand Formatting. üUnderstand Usability. üUnderstand the Design of Interfaces and Dialogues. üUnderstand Impact of Poor User Interface Choices

Introduction Forms and Reports WHY AUDIT Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üIf the user interface is poorly designed, it can: üSeverely restrict the user’s ability to use the system üCause confusion and frustration üCause difficulty in learning how to use the system üCause misunderstanding of what the system is doing and of what the user should do üCause errors üCause difficulties in using the system to successfully complete tasks

Introduction Forms and Reports HUMAN-COMPUTER INTERFACE (HCI) Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üProgrammable, or software, interface which enable an end-user (i. e. the person using the computer) to üAccess and interact with a computer application system üMake use of the facilities and functions which it provides üCarry out the tasks for which the system has been designed

Introduction Forms and Reports FORMATTING Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üStructuring the presentation of information in a meaningful, and easy to navigate fashion.

Introduction Forms and Reports USABILITY Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üThe extent to which an end-user is able to carry out required tasks successfully, and without difficulty using the computer application system

Introduction Forms and Reports INTERFACES AND DIALOGUES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üFocuses on applying the principles from Forms and Reports on the specific user interaction screens

Introduction Forms and Reports BAD USER INTERFACE (UI) Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üThere are many examples of poor UI. We will focus on a few exemplars.

Introduction Forms and Reports FORMS AND REPORTS Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üThe difference between a form and a report üForms typically display information for a single instance of data üReports typically display multiple sets of data

Introduction Forms and Reports FORMS AND REPORTS Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üFundamental Questions to ask: üWho will use this üWhat is the purpose üWhen is this needed and used üWhere is the form used or seen (Web, Mobile, Printed…) üHow many people need to use or view

Introduction Forms and Reports FORMATTING Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üFundamental Principle is that properly formatted displays and documents are better: üMore effective üMore efficient üBetter received üFewer misunderstandings or errors

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üMeaningful Titles üClear and Specific titles describing content an use of forms or report üRevision date or code so users can know if they have the latest information üCurrent date (Date form or report was generated) üValid Date

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üMeaningful Information üOnly needed information should be displayed (Think Google Landing Screen) üInformation provided in usable manner üShouldn’t need to copy into a spreadsheet and manipulate

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üBalance of Layout üInformation should be balanced on screen or page üAdequate spacing and Margins üData and Entry fields clearly labeled üSufficiently sized fonts (or compliance to browser scaling)

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üDesign for Easy Navigation üClearly show to move forward and backward üClearly show where you are (page 1 of 3) üNotify user when final page is reached

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üColor Benefits üSoothes or Strikes the Eye üAccents an uninteresting Display üFacilitates subtle distinctions in data üEmphasizes logical organization of data üDraws attention to warnings üEvokes more emotional reactions

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üColor Problems üColor pairings may wash out EXAMPLE üColor fidelity may degrade on different displays (Printed vs Screen vs Projector)

Introduction Forms and Reports FORMATTING GUIDELINES Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üFinal Caution on Color üManagers and Executives instinctively react to RED, YELLOW, and GREEN üThese colors should only be used when trying to convey that red items require action, yellow items require watching, and green items do not require attention

Introduction Forms and Reports USABILITY Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üUsability typically refers to: üSpeed üAccuracy üSatisfaction üAccessibility

Introduction Forms and Reports USABILITY Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üGuidelines for Usability üConsistency üOrganization üClarity üFormat üFlexibility

Introduction Forms and Reports USABILITY Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üMeasures of Usability üLearnability üEfficiency üError Rate

Introduction Forms and Reports USABILITY Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üAccessibility üDoes the application support visually impaired or limited hand movement users üVisually Impaired üText to speech options üExtreme zoom üLimited hand movement üProper use of the [TAB] key to move around fields üEye motion capture

Introduction Forms and Reports INTERFACE AND DIALOGUE Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üGuidance from Forms and Reports still applies üInterface and Dialogue is an extension of the same principles

Introduction Forms and Reports INTERFACE AND DIALOGUE Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üGuidelines üConsistency üShortcuts üFeedback üClosure üError Handling üReversal (Think Undo and Redo) üControl üEase

Introduction Forms and Reports INTERFACE AND DIALOGUE Formatting Usability Design of Interfaces and Dialogues Review of Bad UI üCommon Properties of Graphic Interfaces üModality – Can’t move to next option until current is populated üResizable üMovable üMaximize üMinimize üSystem Menus – This can be abused if implemented poorly

Introduction Forms and Reports EXAMPLES OF BAD UI Formatting Usability Design of Interfaces and Dialogues Review of Bad UI ühttps: //userinyerface. com/ ühttps: //www. mockplus. com/blog/post/bad-ui-design-examples ühttps: //webdesignledger. com/best-examples-worst-ui-designs/ ühttps: //cs. stanford. edu/people/eroberts/cs 201/projects/2010 -11/Psychology. Of. Trust/ui 3. html ühttps: //www. mockplus. com/blog/post/bad-web-design ühttps: //edit. co. uk/blog/top-10 -worst-websites/

SUMMARY In this unit you learned how to: üDesign Forms and Reports. üUnderstand Formatting. üUnderstand Usability. üUnderstand the Design of Interfaces and Dialogues. üUnderstand Impact of Poor User Interface Choices

SUMMARY (CONT. )