CMSC 345, Version 1/11 S. Mitchell 1 Usability and User Interface Design.

Slides:



Advertisements
Similar presentations
DEVELOPING A METHODOLOGY FOR MS3305 CW2 Some guidance.
Advertisements

Man and Machine: HCI Principles
© De Montfort University, Characteristics of Good Dialogues Howell Istance Department of Computer Science De Montfort University.
User Interface Design Lecture #4 Part-B.
EST/CSE/ISE 323 Spring 2011 Tony Scarlatos
Ch 11 Cognitive Walkthroughs and Heuristic Evaluation Yonglei Tao School of Computing and Info Systems GVSU.
11 HCI - Lesson 5.1 Heuristic Inspection (Nielsen’s Heuristics) Prof. Garzotto.
Electronic Communications Usability Primer.
Multimedia and the World Wide Web
Dialog Styles. The Five Primary Styles of Interaction 4 Menu selection 4 Form fill-in 4 Command language 4 Natural language 4 Direct manipulation.
Dialog Styles. The Six Primary Styles of Interaction n Q & A n Menu selection n Form fill-in n Command language n Natural language n Direct manipulation.
MScIT HCI Web GUI design. IBM’s CUA guidelines - taster Design Principles Each principle has supporting implementation techniques. The two design.
Part 4: Evaluation Days 25, 27, 29, 31 Chapter 20: Why evaluate? Chapter 21: Deciding on what to evaluate: the strategy Chapter 22: Planning who, what,
AJ Brush Richard Anderson
Heuristic Evaluation. Sources for today’s lecture: Professor James Landay: stic-evaluation/heuristic-evaluation.ppt.
CS147 - Terry Winograd - 1 Lecture 6 – Usability Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford.
Testing your design Without users: With users: Cognitive walkthrough
Today’s class Group Presentation More about principles, guidelines, style guides and standards In-class exercises More about usability Norman’s model of.
Principles and Methods
Chapter 7 design rules.
Evaluation techniques Part 1
Heuristic Evaluation of Usability Teppo Räisänen
Human-Computer Interaction
1 SKODA-AUTO.CZ prototype evaluation Poznań, 23th of March 2015.
Heuristic evaluation IS 403: User Interface Design Shaun Kane.
Heuristic Evaluation: Hotels.com
1 ISE 412 Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation.
User Centred Design Overview. Human centred design processes for interactive systems, ISO (1999), states: "Human-centred design is an approach to.
Mario Čagalj University of Split 2013/2014. Human-Computer Interaction (HCI)
1 Human-Computer Interaction  Design process  Task and User Characteristics  Guidelines  Evaluation.
SAMPLE HEURISTIC EVALUATION FOR 680NEWS.COM Glenn Teneycke.
INFO3315 Week 4 Personas, Tasks Guidelines, Heuristic Evaluation.
CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
Basic Principles of HCI Lecture Requirements Analysis Establish the goals for the Website from the standpoint of the user and the business. Agree.
Nielsen’s Ten Usability Heuristics
Usability Evaluation/LP Usability: how to judge it.
10 Usability Heuristics for User Interface Design.
Multimedia Specification Design and Production 2012 / Semester 1 / week 5 Lecturer: Dr. Nikos Gazepidis
Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application.
Design Rules-Part B Standards and Guidelines
Design 2 (Chapter 5) Conceptual Design Physical Design Evaluation
LZW Compression Grant Friedline Robert Frankeny Thomas Sutcavage.
Chapter 7 design rules. Designing for maximum usability – the goal of interaction design Principles of usability –general understanding Standards and.
Mahindra Infotainment System Heuristic Evaluation v1.0 Maya Studios July 6, 2010.
Evaluating a UI Design Expert inspection methods Cognitive Walkthrough
Information Systems and Organisations
 What to “know”? ◦ Goals of information visualization. ◦ About human perceptual capabilities. ◦ About the issues involved in designing visualization for.
Usability 1 Usability evaluation Without users - analytical techniques With users - survey and observational techniques.
Developed by Tim Bell Department of Computer Science and Software Engineering University of Canterbury Human Computer Interaction.
CENG 394 Introduction to HCI Usability Heuristics.
Heuristic Evaluation Short tutorial to heuristic evaluation
Alan Woolrych My Background Currently – Research & Liaison Officer (DMN) From 1 st January 2003 Usability Researcher with.
Usability Heuristics Avoid common design pitfalls by following principles of good design Nielsen proposes 10 heuristics, others propose more or less. Inspect.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
Basic Elements.  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific.
CS 575 Spring 2012 CSULA Bapa Rao Lecture 6. Agenda for today Review of previous meeting Student Comments Heuristic Evaluation Presentation Team reports.
User Interface Evaluation Heuristic Evaluation Lecture #17.
© 2016 Cognizant. © 2016 Cognizant Introduction PREREQUISITES SCOPE Heuristic evaluation is a discount usability engineering method for quick, cheap,
Ten Usability Heuristics These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of.
User Interface Design SCMP Special Topic: Software Development
Human-Computer Interaction
Human Computer Interaction Slide 2
HCI – DESIGN RATIONALE 20 November 2018.
A NEW FACE OF THE TECHNICAL COMMUNICATOR – UX IS OUR STRENGTH – WE DESIGN TO WRITE BY CHRIS GANTA © 2016, STC INDIA CHAPTER.
Unit 14 Website Design HND in Computing and Systems Development
Heuristic Evaluation Jon Kolko Professor, Austin Center for Design.
Software Engineering D7025E
One-timer?. A new face of the technical communicator – UX is our strength – we design to write.
10 Design Principles.
Nilesen 10 hueristics.
Presentation transcript:

CMSC 345, Version 1/11 S. Mitchell 1 Usability and User Interface Design

CMSC 345, Version 1/11 S. Mitchell 2 Usability Usability Professionals’ Association Usability is the degree to which something - software, hardware or anything else - is easy to use and a good fit for the people who use it. ( accessed 8/8/07) Wikipedia The ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal. ( accessed 8/8/07) Jakob Nielson A quality attribute that assesses how easy user interfaces are to use. ( accessed 8/8/07)

CMSC 345, Version 1/11 S. Mitchell 3 Heuristics General principles and rules of thumb found through discovery and observation Usability heuristics Jakob Nielson Ben Shneiderman Donald Norman

CMSC 345, Version 1/11 S. Mitchell 4

5 Nielsen’s Usability Heuristics Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

CMSC 345, Version 1/11 S. Mitchell 6

7

8 Nielsen’s Usability Heuristics Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. Help and documentation Even 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 user's task, list concrete steps to be carried out, and not be too large.

CMSC 345, Version 1/11 S. Mitchell 9

10

CMSC 345, Version 1/11 S. Mitchell 11

CMSC 345, Version 1/11 S. Mitchell 12 Nielsen’s Usability Heuristics Aesthetic and minimalist design Dialogues 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.

CMSC 345, Version 1/11 S. Mitchell 13

CMSC 345, Version 1/11 S. Mitchell 14

CMSC 345, Version 1/11 S. Mitchell 15

CMSC 345, Version 1/11 S. Mitchell 16 Ten Usability Heuristics Jakob Nielsen 1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. Nielsen, Jakob, 2005, ISSN Access date: 8/7/07

CMSC 345, Version 1/11 S. Mitchell User control and freedom Users 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. 4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

CMSC 345, Version 1/11 S. Mitchell Recognition rather than recall Minimize the user's memory load by making 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. 7. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- 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. 8. Aesthetic and minimalist design Dialogues 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.

CMSC 345, Version 1/11 S. Mitchell Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10. Help and documentation Even 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 user's task, list concrete steps to be carried out, and not be too large.

CMSC 345, Version 1/11 S. Mitchell 20 Eight Golden Rules of Interface Design Ben Shneiderman 1. Strive for consistency. Consistent 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. 2. Enable frequent users to use shortcuts. As the frequency of use increases, so do the user's 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. Shneiderman, B. and C. Plaisant, Designing the User Interface: Strategies for Effective Human-Computer Interaction. 2004: Addison-Wesley.

CMSC 345, Version 1/11 S. Mitchell Offer informative feedback. For 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. 4. Design dialog to yield closure. Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of 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. 5. Offer simple error handling. As 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 the error and offer simple, comprehensible mechanisms for handling the error.

CMSC 345, Version 1/11 S. Mitchell Permit easy reversal of actions. This feature relieves 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. 7. Support internal locus of control. Experienced 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. 8. Reduce short-term memory load. The 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.

CMSC 345, Version 1/11 S. Mitchell 23 Seven Principles for Transforming Difficult Tasks Into Simple Ones Donald A. Norman 1.Use both knowledge in the world and knowledge in the head 2.Simplify the structure of tasks 3.Make things visible: bridge the gulfs of Execution and Evaluation 4.Get the mappings right 5.Exploit the power of constraints, both natural and artificial 6.Design for error 7.When all else fails, standardize Norman, Donald A., The Design of Everyday Things. 2002: Basic Books.

CMSC 345, Version 1/11 S. Mitchell 24 Good References & Interesting Reading Cooper, Alan, The Inmates are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity. 2004: Sams - Pearson Education. Garrett,Jesse James, The Elements of User Experience: User-Centered Design for the Web. 2002: New Riders Press. Johnson, Jeff, Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them. 2003: Morgan Kaufmann. Krug, Steve, Don’t Make Me Think: A Common Sense Approach to Web Usability. 2005: New Riders Press, 2 nd ed. Neilsen, Jakob, Designing Web Usability: The Practice of Simplicity. 1999: Peachpit Press. Norman, Donald A., The Design of Everyday Things. 2002, New York: Basic Books. Shneiderman, B. and C. Plaisant, Designing the User Interface: Strategies for Effective Human-Computer Interaction. 2004: Addison-Wesley.

CMSC 345, Version 1/11 S. Mitchell 25 Fun Website Bad Human Factors Designs

CMSC 345, Version 1/11 S. Mitchell 26 Organizations and Conferences Nielsen Norman Group Usability Professionals’ Association ACM's Special Interest Group on Computer-Human Interaction Computer-Human Interaction (CHI)