Gabriel Spitz 1. Light Switch Issues  Consistency – The switch design is inconsistent with common light switches  Visibility – No visible cue regarding.

Slides:



Advertisements
Similar presentations
What Is The User Interface Design Lecture # 2 Gabriel Spitz 1.
Advertisements

Interaksi Manusia Komputer – Marcello Singadji. design rules Designing for maximum usability – the goal of interaction design Principles of usability.
© De Montfort University, Characteristics of Good Dialogues Howell Istance Department of Computer Science De Montfort University.
Representation at the Interface Gabriel Spitz 1 Lecture #13.
Part 2c: Requirements Chapter 2: How to Gather Requirements: Some Techniques to Use Chapter 3: Finding Out about the Users and the Domain Chapter 4: Finding.
Design Activities in Usability Engineering laura leventhal and julie barnes.
Human Computer Interface. HCI and Designing the User Interface The user interface is a critical part of an information system -- it is what the users.
Heuristic Evaluation. Sources for today’s lecture: Professor James Landay: stic-evaluation/heuristic-evaluation.ppt.
7M701 1 User Interface Design Sommerville, Ian (2001) Software Engineering, 6 th edition: Chapter 15
CS147 - Terry Winograd - 1 Lecture 6 – Usability Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford.
Principles and Methods
User Interface Design Users should not have to adapt to a piece of software; the software should be designed to fit the user.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
Chapter 7 design rules.
User Centered Design Lecture # 5 Gabriel Spitz.
User Interface Design Principles Gabriel Spitz 1 Lecture # 4.
User Characteristics & Design Principles Gabriel Spitz 1 Lecture # 11.
Lecture Set 3 Introduction to Visual Basic Concepts Part A – User Interfaces and Windows Forms – The Toolbox.
1 ISE 412 Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation.
CS3205: HCI in SW Development More on Detailed Design: Guidance and Color.
User Modeling Lecture # 5 Gabriel Spitz 1. User-Interface design - Steps/Goals.
1 Human-Computer Interaction  Design process  Task and User Characteristics  Guidelines  Evaluation.
User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
CSCD 487/587 Human Computer Interface Winter 2013 Lecture 3 HCI and Interactive Design.
Design for Interaction Rui Filipe Antunes
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 7 Design Guidelines & Standards Gary Marsden ( ) July 2002.
These slides are designed to accompany Software Engineering: A Practitioner’s Approach, 7/e (McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.1.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
10 Usability Heuristics for User Interface Design.
Multimedia Specification Design and Production 2012 / Semester 1 / week 5 Lecturer: Dr. Nikos Gazepidis
SEG3120 User Interfaces Design and Implementation
Design Rules-Part B Standards and Guidelines
What Is The User Interface Design Gabriel Spitz1 Lecture # 2.
Chapter 9 Design guidance and design rationale. UIDE Chapter 9 Sources of Design Guidance Standards Standards –User interface standard Design Guidelines.
Software Architecture
Chapter 7 design rules. Designing for maximum usability – the goal of interaction design Principles of usability –general understanding Standards and.
Evaluating a UI Design Expert inspection methods Cognitive Walkthrough
1 chapter 7 design rules. 2 Designing for maximum usability – the goal of interaction design Principles of usability –general understanding Standards.
What Is The User Interface Design Lecture # 1 Gabriel Spitz 1.
Activity Flow Design Gabriel Spitz 1 Lecture # 12 Guiding the flow of activities.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
The Structure of the User Interface Lecture # 8 1 Gabriel Spitz.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
Importance of user interface design – Useful, useable, used Three golden rules – Place the user in control – Reduce the user’s memory load – Make the.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
What Is The User Interface Design Lecture # 1 Gabriel Spitz 1.
Metaphors Informing the user what to do Lecture 10 Gabriel Spitz 1.
User-Centered Design (UCD) Overview
IT323 - Software Engineering 2 1 Tutorial 3.  Suggest ways in which the user interface to an e-commerce system such as an online stores might be adapted.
Conceptual Model Design Informing the user what to do Lecture # 10 (b) Gabriel Spitz.
1 Design Principles – Part 2 of 3 Learnability Principles Flexibility Principles.
What Is The User Interface Design Lecture # 1 Gabriel Spitz 1.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Chapter 7 design rules. Designing for maximum usability – the goal of interaction design Principles of usability –general understanding Standards and.
Design rules.
Characteristics of Graphical and Web User Interfaces
Unit 2 User Interface Design.
Design rules.
Software engineering USER INTERFACE DESIGN.
HCI – DESIGN RATIONALE 20 November 2018.
Human Computer Interface design
Software Engineering D7025E
Systems Analysis and Design in a Changing World, 6th Edition
Characteristics of Graphical and Web User Interfaces
Proper functionality Good human computer interface Easy to maintain
Chapter 7 design rules.
Chapter 7 design rules.
Chapter 7 design rules.
Chapter 7 design rules.
Presentation transcript:

Gabriel Spitz 1

Light Switch Issues  Consistency – The switch design is inconsistent with common light switches  Visibility – No visible cue regarding on/off operation  Affordance – The switch design does not suggest how should it be operated Gabriel Spitz 2

User Characteristics & Design Principles Gabriel Spitz 3 Lecture # 4

Objective of this lecture  Describe a set of important UI design principles  Place these principles within the context of human characteristics and show how they contribute to usability Gabriel Spitz 4

What is a usable Product  A product that meet the 5 S of usable product  Easy to learn – no need for special instructions or lots of manuals  Efficient – minimal number of steps to complete a task  Effective – ability to complete tasks with no errors  Engaging – fun to use  Error tolerant – easy to recover from errors Gabriel Spitz 5

Achieving Usability  A key approach to achieving good usability is to continuously iterate our design with users  But iterations consume resources  To minimize the number of iterations we capitalize on our collective past experience to create as usable design as we can already on our first design cycle  Usability principles are our collective past experience and can help us maximize usability early in the design Gabriel Spitz 6

Usability and Product Success Gabriel Spitz 7 MS BOB Renault 4 circa 1970 Users rejected anthropomorphisms Negative transfer of training resulting in many errors Ignoring usability can impact the bottom line and safety

What is a UI Design Principle  Knowledge gained from past design experience and usability studies about how to impact the usability indicators  It ’ s a guide post pointing the way to a usable design  It is not by itself an end or a rule  One should try and follow it when it makes sense, and deviate from it when needed Gabriel Spitz 8

UI Design Principles  Know your user  Let the user control the interaction  Capitalize on what the user already knows  Maintain consistency at the interface  Provide effective feedback  Expose the interaction to the user  Minimize reliance on user memory  Minimize the impact of user error  Aesthetic matters  Always test your interface with users Gabriel Spitz 9

1) Know Your User  S/he is not you  Effective user interface is one that is compatible with and focuses on users and their tasks. It considers:  General human characteristics  Characteristics of our application’s users  Domain specific vocabulary  Computer literacy  General education  Task specific characteristics of your users  Touch typists  Frequency of task performance Gabriel Spitz 10

Self Check-In Kiosk Gabriel Spitz 11 Designed for the general traveling population – What can you assume about the users of this system?

2) Let the User Control the Interaction  People want to control their environment  Software applications should be designed to support the users, their task, and their interaction style  Constraining users ’ action is fine  Controlling users ’ action should be avoided  Controllability can impact user satisfaction Gabriel Spitz 12

Ways to Increase User Control  Don’t force users to perform a task in a predetermined way  Allow Select & than create an account or vice versa  Always allow users to change their mind cancel out  Allow users to save partial work such as forms Gabriel Spitz 13

3) Capitalize on what Users Know  Using metaphors or familiar idioms (cut & paste) at the interface will enable users to instantly understand the details of the application  Reusing knowledge will significantly reduce the amount of learning needed to achieve proficiency Gabriel Spitz 14

Using Metaphor– CD Control Gabriel Spitz 15

Using Metaphor - PIM Gabriel Spitz 16

4) Maintain Consistency  Consistency enables users to anticipate events and reuse learned behaviors -Positive Transfer  It is achieved by reusing UI design patterns within and between applications  Complying with standards or guidelines for example  Reuse of knowledge reduces learning and enhances performance Gabriel Spitz 17

Consistent Menu and Tool Bars Gabriel Spitz 18

Consistency is not Always Good Gabriel Spitz 19 Usability is maximized by reusing usable elements – Duplicating bad design will result in a consistently bad design This is a poor design for water temperature control and rinsing soapy hands

When Inconsistency is Good  Inconsistent pattern or design can be used to attract user attention and prevent an automated response e.g., The delete dialog box Gabriel Spitz 20

5) Provide Effective Feedback  Feedback closes the action loop and “ enables ” the user to continue with his/her task or sequence of actions  Effective feedback is feedback that is provided to users:  Immediately following their action  At an appropriate level  E.g., Action, Context, System state level  At an appropriate place  E.g., at the locus of attention  Feedback improves performance and learning Gabriel Spitz 21

Effective Feedback Gabriel Spitz 22

6) “Expose” the Interaction to the User  Let the user see clearly the functions that are available at the interface  Exposing the interaction facilitates learning and performance  Recall the action Model by D. Norman Gabriel Spitz 23

Poor Visibility Gabriel Spitz 24

7) Minimize Reliance on Memory  Ability of users to recall commands, object names, sequence of actions, etc. is limited  Make the interface visual with limited reliance on recall  Allow selection rather than relying on users to remember a command or object name  Exceeding memory limits hinders performance-errors and speed Gabriel Spitz 25

Supporting Memory Limitation Gabriel Spitz 26 One way of supporting memory limitation is to use name recognition

Supporting Memory Limitation Gabriel Spitz 27 A better way of supporting memory limitation is to capitalize on both name recognition and visual recognition

Supporting Memory Limitation Gabriel Spitz 28 Another way of supporting memory limitation with both name recognition and visual recognition

8) Minimize the Impact of Error  Cost of errors impacts user performance  We are all afraid to err or loose our work  When possible enable users to reverse their actions  Undo  Confirm delete  Else, limit the cost of error  Auto Save  But don ’ t over protect the user  Easy recovery from errors enhances user satisfaction and performance Gabriel Spitz 29

9) Aesthetics Matter  Consider function first, form later  But don ’ t ignore form  Form or presentation often sets the moods of the user which in turns impacts users ’ experience  Form or presentation facilitates:  Visual scanning of a dialog box, window, page  Location or detection of objects  Aesthetics enhances user satisfaction and performance Gabriel Spitz 30

Poor Aesthetics Gabriel Spitz 31 Poor alignment Inconsistent use of colors Also poor task flow

Use of color to convey information in the interface should be accompanied with clear secondary cues If red vs. green is the only way to tell which section is within bounds, about 6% of all users will have trouble telling the difference (9% Male, 2% Female) Everyone is colorblind in low light Gabriel Spitz 32 Use Colors carefully

10) Always Test Your Interface  We don ’ t have strong models of the human operator/user  We can not predict (but can anticipate) how certain design attributes will effect performance or satisfaction  We use testing to assess and refine our designs Gabriel Spitz 33

Main Points  Effective interaction design is built on understanding how human act and the factors that impact human activity within a given context  Many of these factors have been captured by UI design principles  Adhering to these design principles will significantly enhance the usability of an interface Gabriel Spitz 34