CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3....

CREATE-BEST UI

WORKSHOP

HUSSEIN AL OSMAN

1

ABOUT ME

• Hussein Al Osman

o Assistant Professor in Software Engineering, EECS

• Background

o Undergraduate and Graduate studies at the University of

Ottawa

o Industry: Nortel and Avaya (Software Developer and

Project Manager)

• Research Interest

o Affective Computing

o Human Computer Interaction

o Serious Gaming

2

WHAT WE WILL DO TODAY

The workshop is divided into five sections:

• Section 1: I will cover the core principles of UI design

• Section 2: I will discuss briefly the various UI Evaluation

methods and focus in particular on heuristic evaluation

• Section 3: Using a prototyping tool, I will improve the design of

a simple application

• Section 4: The students will design their own UI for a simple

application

• Section 5: The students will evaluate each other’s designs

3

USABILITY GOALS

Effectiveness: can the user complete their goals with a high

degree of accuracy?

Efficiency: how fast can the user get the job done?

Engagement: does the user finds the product pleasant and

gratifying to use?

Error Tolerance: can the user effectively recover from an

error?

Ease of Learning: how quickly can the user learn to use the

system?4

GOAL OF THIS WORKSHOP

Simply, learn enough usability principles to avoid

this:

5

GOAL OF THIS WORKSHOP

Or this:

6

WHY STUDY USER INTERFACE

DESIGN?

To the user, the UI is often the system

7

KEY IDEAS IN HCI - VISIBILITY

The UI should help the user always understand...

• The current state of the system

• What operations can be done

8

KEY IDEAS IN HCI - VISIBILITY

Which Facebook app

design provides better

visibility?

9Version A Version B

KEY IDEAS IN HCI - FEEDBACK

Give the users an indication that an action was performed

Activational feedback: evidence that control was activated successfully

Behavioral feedback: evidence that the action has had some effect on the system

10

KEY IDEAS IN HCI –

PERCEIVED AFFORDANCE

The set of operations and procedures that can be done to an object

‘Perceived affordance’ is what typical users think can be done to an object

11

KEY IDEAS IN HCI -

PERCEIVED AFFORDANCE

3D design

Flat design

12

KEY IDEAS IN HCI – NATURAL

MAPPING

Indicates the relationship between the action of the

user and the result

• The user’s natural understanding of action results

• Steering the wheel (direct association)

• Zooming in and out on a smart phone

• Controls of stove burners (logical association)

13


MAPPING

14

Stove Top A

Controls A

Controls B

Stove Top B


MAPPING

15

Change Case

lowercase

UPPERCASE

Title Case

tOGGLE cASE

OKCancel

X Change Case

Lowercase

UppercaseTitle CaseToggle Case

OKCancel

X

Option A Option B


MAPPING

16

2013 Toyota Camry SE

KEY IDEAS IN HCI – FORCING

FUNCTION

Design that prevents users from taking actions which are

inappropriate or which would lead to error

• Appliance shut off when opened

• Microwaves

• Washing Machines

• Radio buttons

• Choose one and one only

Good example of a forcing function design:

• Menu bar - grays out and prevents the selection of those items inapplicable

to the current context

New

Open

Close

Save

Save as... 17

KEY IDEAS IN HCI – FORCING

FUNCTION

18

KEY IDEAS IN HCI –

METAPHORS

Application of familiar concepts to represent more

abstract system concepts

• Help the user use prior knowledge to understand a system

• Make abstract ideas more concrete

19

ICONS

Avoid:

• Icons with too many elements

• Icons that look similar

• Lack of unity in style

• Ambiguous metaphors

20

HUMAN COGNITIVE SYSTEM

Attention limitations

• People can be readily distracted: provide cues about what to focus on

• People get lost in complexity

• Structure information so it is easy to browse through

• People multitask

• Make the ‘state’ clear so users can jump backwards and forwards

21

HUMAN COGNITIVE SYSTEM

Memory limitations

• Short term memory can contain 7±2 ‘chunks’

• The more meaningful, the more easily remembered (familiarity, imagery and consistency contribute to meaningfulness)

• Icons can be analogies, examples or abstract, but not arbitrary

• Watch out for cultural differences (e.g. washroom symbols)

22

USER-CENTERED DESIGN

(UCD)

Central question:

“How to design user interfaces that:

• Allow users to effectively accomplish their tasks

• Do not waste the user’s time”

23

ITERATIVE NATURE OF UI

DESIGN

EvaluateDesignInitial Planning and

Domain analysis

Prototype/ Implement

Requirements

User Analysis

Task Analysis

24


DESIGN


Domain analysis


Requirements

User Analysis

Task Analysis

25


DESIGN


Domain analysis


Requirements

User Analysis

Task Analysis

26


DESIGN


Domain analysis


Requirements

User Analysis

Task Analysis

27


DESIGN


Domain analysis


Requirements

User Analysis

Task Analysis

28


DESIGN


Domain analysis


Requirements

User Analysis

Task Analysis

29


DESIGN


Domain analysis


Requirements

User Analysis

Task Analysis

30

SKETCHING

Probably the most important design technique

Don’t try to picture your user interface mentally

• Draw pictures (you do not need a lot of talent)

Lay out many ideas on a big table or stick them on a wall

Generate many ideas

• Don’t fixate on an early vision and stop brainstorming

Design in a group

• Maybe group members can come up with ideas before hand

31

EXAMPLE OF A SKETCH

32

WIREFRAMING

Some people consider paper sketching and wireframing to be

synonymous

• Others like to draw on the distinctions between them

Typically, a wireframe is refined version of the paper sketch

• Paper sketches are typically faster to create

• Some previously eliminated details are added (font, spacing,

possibly colors…)

• Takes into account device screen size, resolutions and

limitations

• CAD tools are typically used (although not necessarily)

33

HAND SKETCHES VS. CAD

Hand Sketch Sketch (wireframe) using a CAD tool

34

HAND SKETCHES VS. CAD

Hand Sketch Sketch (wireframe) using a CAD tool

35

CONCEPTUAL MODELS

Designer’s Model User’s Model

System image

36

MENTAL MODELS EXAMPLE:

NETFLIX

Netflix (back when it was a DVD mailing service)

worked differently than typical e-commerce sites

37

WHAT DO YOU THINK?

Accessed in 2014 38

WHAT DO YOU THINK?

Accessed in 2019 39

UI EVALUATION

UI Evaluation

Passive Evaluation Active Evaluation Predictive Evaluation

Videotaped Evaluation

Experiments

Heuristic Evaluation

Cognitive Walkthrough

Notification by user

Logging mechanism

Questionnaires/ surveys

40

HEURISTICS

H1: Visibility of the system status

H2: Match between the system and the real world

H3: User control and freedom

H4: Consistency and standards

H5: Error prevention

H6: Recognition rather than recall

H7: Flexibility and efficiency of use

H8: Aesthetic and minimalist design

H9: Help users recognize, diagnose, and recover from errors

H10: Help and documentation

41

HEURISTICS

H1: Visibility of the system status

42

HEURISTICS


43

HEURISTICS


44

HEURISTICS

H3: User control and freedom

45

HEURISTICS


46

HEURISTICS


47

HEURISTICS


48

HEURISTICS


49

HEURISTICS


50

HEURISTICS


51

Opposite of error

prevention:

HEURISTICS


52

HEURISTICS


53

HEURISTICS


54

HEURISTICS


55

HEURISTICS


56

HEURISTICS


57

HEURISTICS


58

HEURISTICS


59

HEURISTICS


60

HEURISTICS


61

Windows 8Windows NT

HEURISTICS


62

What do you

think of these

messages?

HEURISTICS


63

What about

this gem?

HEURISTICS


64

HEURISTICS


65

LET’S ANALYZE…

66

Step 1

Step 2

LET’S ANALYZE…

67

Step 1

Step 2

H1: Visibility of the system statusH2: Match between the system and the real worldH3: User control and freedomH4: Consistency and standardsH5: Error preventionH6: Recognition rather than recallH7: Flexibility and efficiency of useH8: Aesthetic and minimalist designH9: Help users recognize, diagnose, and recover from errors


Heuristic Principals

• Visibility• Feedback• Perceived affordance• Natural Mapping• Forcing Functions• Metaphors

Key HCI Ideas

• Effectiveness• Efficiency• Engagement• Error Tolerance• Ease of Learning

Usability Goals

IMPROVING THE DESIGN OF

AN ONLINE BANKING APP

68

IT’S YOUR TURN TO DESIGN

You will design the user interface for a Pill Reminder mobile app to notify users when they should take their

medication. The app is intended mostly for senior citizens, which might not be as technically adept as

younger users. Therefore, you need to pay special attention to the user interface design to ensure it is easy

to learn.

The app should allow the user to: 1) add a pill reminder, 2) edit a pill reminder, and 3) delete a pill reminder.

When the user adds a pill reminder, they should be able to enter the following details (you can add more

details in your design):

• Times of the day when the pill should be taken (e.g. 9:00 AM and 9:00 PM)

• Whether the reminder should be repeated and for how long (and if yes, what days and until when?)

• How should the user be notified (e.g. play an alarm sound, vibrate, or both)

• Notes about the pill that popup when the user receives the notification

Sketch the series of screens that allows the user to

• Task 1: add a pill reminder

• Task 2: edit a pill reminder

• Task 3: delete a pill reminder

The sketches should show the user interface from the moment the user launches the application to the

point they complete the three tasks.

69

IT’S EVALUATION TIME!

70

H1: Visibility of the system statusH2: Match between the system and the real worldH3: User control and freedomH4: Consistency and standardsH5: Error preventionH6: Recognition rather than recallH7: Flexibility and efficiency of useH8: Aesthetic and minimalist designH9: Help users recognize, diagnose, and recover from errorsH10: Help and documentation

Heuristic Principals

• Visibility• Feedback• Perceived affordance• Natural Mapping• Forcing Functions• Metaphors

Key HCI Ideas

• Effectiveness• Efficiency• Engagement• Error Tolerance• Ease of Learning

Usability Goals

THANK YOU!

QUESTIONS?

71

CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3....

Documents

Transcript of CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3....