Ui design-day1

Utility | Meaning | Engagement

UI Design Basics

?

Design

Not Design

Do not confuse design with decoration

5

“…shaping digital things for people’s use”-Raj Lal

7

Three Legged Stool

Engagement

MeaningUtility

The Horror

The Horror http://www.arngren.net/

http://www.arngren.net/

The Horror http://ronoslund.com/

http://ronoslund.com/

The Horror http://www.mrbottles.com/

http://www.mrbottles.com/

Design for Utility

UI Design Basics

14

Usabiltiy Performance

Usability

16

Usability is a quality attribute that assesses how easy user interfaces are to use.

17

Learnability

18

Learnability

19

Efficiency

20

Efficiency

21

Memorability

22

Errors

23

Satisfaction

Flight Search - http://www.hipmunk.com/

Online Music - http://grooveshark.com/

Zelda NES Emulator - http://game-oldies.com/play-online/legend-of-zelda-the-nintendo-nes#

24

Exercise

http://www.hipmunk.com/

http://grooveshark.com/

http://game-oldies.com/play-online/legend-of-zelda-the-nintendo-nes#

25

LearnabilityHow easy is it for users to accomplish basic tasks the first

time they encounter the design?

Identify the “basic tasks”.

EfficiencyOnce users have learned the design, how quickly can they

perform tasks?

Identify the task flow - identify how may steps are involved

MemorabilityWhen users return to the design after a period, how easily

can they reestablish proficiency?

You’re going to have to guess

ErrorsHow many errors do users make, how severe are they, and

how easily can they recover?

Identify potential errors and how easily they are avoided

Satisfaction How pleasant is it to use the design?

Usability Heuristics

1. Visibility of system status

28

Visibility of system status

Loading…

28

Visibility of system status

29

Progress Buttons

Progress Buttons Examples

http://tympanus.net/Development/ProgressButtonStyles/

2. Match between system and the real world

31

iBooks “Library”

32

Desktop

33

Paper Paradigm

3. User control and freedom

35

Support Undo/Redo

36

Chrome

37

Turbotax

4. Help and documentation

39

Garageband Help

5. Help users recover from errors

41

Help users recover from errors

42


42


6. Aesthetic and minimalist design

44

Aesthetic and minimalist design

45

Aesthetic and minimalist design

7. Flexibility and efficiency of use

47

Accelerators

48

Accelerators

49

Tailor Frequent Actions

8. Recognition rather than recall

51

Minimize Memory Load

52

Avoid Visual Clutter

53

Use Conventions

54

OSX Help Menu

54

OSX Help Menu

54

OSX Help Menu

54

OSX Help Menu

9. Error prevention

56

Error PreventionWhat is your name? What is your quest?

What is your birthdate?

56

Error PreventionLancelot

What is your name?The Holy Grail

What is your quest?

The Ides of March MCCXXV


57

Error PreventionsWhat is your name? What is your quest?


57

Error PreventionsLancelot

What is your name?The Holy Grail

What is your quest?

What is your birthdate?March 15 1225

10. Consistency and standards

59

Consistency and standards

60

Consistency and standards

61

Affordances

Underlined Links

62

Affordances

http://www.theverge.com/2014/3/13/5503894/google-removes-underlined-links-site-redesign

63

Affordances

64

Affordances

Flight Search - http://www.hipmunk.com/

Online Music - http://grooveshark.com/

Zelda NES - http://game-oldies.com/play-online/legend-of-zelda-the-nintendo-nes#

65

Exercise

http://www.hipmunk.com/

http://grooveshark.com/

http://game-oldies.com/play-online/legend-of-zelda-the-nintendo-nes#

1. Visibility of System Status

2. Speak the user’s language

3. Provide user control and freedom (undo/redo)

4. Help and documentation

5. Help users recover from errors

6. Aesthetic and minimalist design

7. Flexibility and efficiency of use

8. Recognition rather than recall (reduce memory load)

9. Error prevention

10. Consistency and standards (affordances)

Break

Some Research

69

Experiment

1. Get some paper and pencil 2. Look for 2 seconds 3. Sketch what you see

70

70

71

71

72

72

73

Eye Tracking

Some people will read your content, but most won't.

74

F-Pattern: Lessons

The first two paragraphs should state the most important information.

75

F-Pattern: Lessons

Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning.

76

F-Pattern: Lessons

77

F-Pattern: Not Absolute

“The primary goal forevery form is completion”

Luke Wroblewski Web Form Design: Filling in the Blanks

78

Forms

The Horror

80

80

81

Illuminate A Clear Path to Completion

82

Scan Lines

83

Scan Lines

84

Button Placement

85

Button Placement

86

Button Placement

The Winner

87

Top Align LabelsFirst Name

Last Name

Telephone( ) -

88

Lastpass

89

Right Align LabelsFirst Name

Middle Initial

Telephone ( ) -

Last Name

Occupation

90

Left Align LabelsTax ID

Form 102B box1

Capital of Ireland

91

Turbotax

92

Labels Within FieldsTax ID

Middle Initial

Telephone*

Last Name

Occupation

!

93

When in doubt: Top Align

94

Forms Suck. If you don’t believe me, try to find people

who like filling them in.

-Luke Wroblewski

Performance

It’s time for us to treat performance as an essential design feature, not just as a

technical best practice.

-Brad Frost

97

Time Scales in User Experience

source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

Column 1 ! Column 2 ! Column 3 !

Value 1 Value 2 Value 3




0.1 sec “I did that”

http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

97









97














98








0.2 - 1.0 seconds“I told the computer to do that”


98









98














99








Greater than 1.0 second“Im waiting on the computer”


99









99









Value 10Value 2 Value 3





See Heuristic #1 Indicate system status






101



10 seconds…







101









101









Minimize http requests

Concatenate, Minify, gzip css and javascript

Optimize images

102

Performance Best Practices

Run your current project through these performance tools. What could you do to increase performance?

http://developers.google.com/speed/pagespeed/insights/

http://tools.pingdom.com/

103

Exercise

http://developers.google.com/speed/pagespeed/insights/

http://tools.pingdom.com/

Ui design-day1

Technology