User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug,...

44
User Interfaces Lecture 24 Usability and Visual Design Hamza Bennani [email protected] October 4, 2018

Transcript of User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug,...

Page 1: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User Interfaces

Lecture 24

Usability and Visual Design

Hamza [email protected]

October 4, 2018

Page 2: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Usability

“Usability really just means making sure that something works well: that a person of average (or even below

average) ability and experience can use the thing - whether it’s a web site, remote control, or revolving door-for its

intended purpose without getting hopelessly frustrated."

“Don’t make me think"

Steve Krug, usability expert

“A well-designed and humane interface does not need to be split into beginner and expert subsystems.”

Jef Raskin, designer of the first Macintosh

“It is far better to adapt the technology to the user than to force the user to adapt to the technology.”

Larry Marine

“No matter how good your backend systems are, the users will only remember your front end. Fail there and you will

fail, period.”

Tristan Louis

1

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 3: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Application Navigation

I Application navigation tells the user:I Where they are now (signposts: labels, other visual cues)I Where they can go next (environmental clues: buttons,

controls)I How to get there from here (maps, help)

I Some general guidelines for navigation:I Keep navigation distance short: the 80% most used

features should be at most one click awayI Navigational controls often location sensitive: users expect

back button in the upper left, the OK button on the lowerright, etc.

I Always provide back, escape or cancel navigation pathsI Applications are similar to web pages: user only sees one

view at a time - many web design principles apply to apps.

2

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 4: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Example of Long Navigation Distance

3

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 5: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation Patterns

I Clear Entry Points - few options on startupI Global Navigation - repeated motif/toolbar on each

windowI Hub and Spoke - organises discrete tasks from central

hubI Pyramid - use back/next/up to organise documentsI Modal Panel - dialog box that must be resolved nowI Sequence Map - “you are here” indicator in a sequenceI Breadcrumbs - for hierarchies, show parent pagesI Annotated Scrollbar - provide information in scrollbarI Colour-coded Sections - use colour to identify locationsI Animated Transition - show next location by animationI Escape Hatch - cancel current action

4

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 6: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsClear Entry Points

In applications designed for first-time, infrequent users, presentonly a few entry points

Name a search engine famous for its clear entry point?

5

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 7: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsGlobal Navigation

Use the same small section of every window to provideconsistent navigation controls Common on the top of webpages

Hub and spoke is an alternative to this pattern for smallscreens, or self-contained tools

6

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 8: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsHub and Spoke

Isolate sections of application into mini-applications, each oneclick away from central hub Common in smartphone operatingsystems

7

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 9: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsPyramid

Link pages with back/next/up: form pyramid (Common in helpbrowsers, webpages)

Another option here is the One-Window Drill-down pattern

8

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 10: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsModal Panel

Avoid dialogue boxes disrupting workflow

9

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 11: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsSequence Map

Show user progress in a linear sequence

Even better: provide re-entrant “save and continue later”

10

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 12: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsBreadcrumbs

Show a map of parent pages in a hierarchy

11

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 13: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsAnnotated Scrollbar

Use the scrollbar to provide extra information as the usermoves through a document

12

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 14: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsColour-Coded Sections

Colour code sections of an application or webpage according touser’s location

13

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 15: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsAnimated Transitions

Capture attention to show what to do next or where to findsomething later Sheets for “save as", “minimise” feature in OS X

14

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 16: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Navigation PatternsEscape Hatch

Always provide a way to back out of any action if you can If notindicated visually, use escape key

15

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 17: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Design

16

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 18: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Page Layout

I Page layout is the art of manipulating the user’s attentionon a page to convey meaning, sequence, and points ofinteraction

I Visual Hierarchy: size, whitespace, contrast, colourI Visual Flow: top-to-bottom, left-to-right, colour, shapeI Grouping and Alignment: proximity, similarity, continuity,

closureI Dynamic Displays: tabs, panels, extras on demand

I Where do your eyes end up when looking at Xcode?

17

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 19: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Hierarchy

The most important content should stand out the most and theleast important the least Example with no visual hierarchy:

18

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 20: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Hierarchy

Example with visual hierarchy using whitespace:

19

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 21: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Hierarchy

Example with visual hierarchy using whitespace, alignment,and typography:

20

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 22: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Flow

Visual flow refers to the path that your eyes follow when youlook at a page

What is the visual flow of this dialog box?

21

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 23: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Flow

Visual flow is influenced by: Top-to-bottom, left-to-right (culturalchanges?), Strong focal points, User’s expectations, e.g., dialogboxes almost always end with OK button in lower right

22

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 24: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Visual Flow

23

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 25: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Grouping and Alignment

I Grouping things together visually implies that they arefunctionally related

I There are four Gestalt principles that describe how ourvisual system groups layouts:

I Proximity: things close together are associatedI Similarity: things of the same shape, size, colour, or

orientation are associatedI Continuity: things which together form lines and curves

are associatedI Closure: simple closed forms like rectangles or whitespace

are associated - true even if the actual rectangles are notdrawn

24

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 26: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Grouping and Alignment

25

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 27: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patterns

I Visual Framework - consistency betweenwindows/dialogs in your application

I Centre Stage - make the most important window largeI Titled Sections - delineate categories with obvious titlesI Card Stack - use tabs to organise informationI Closable Panels - tabs that can dynamically resizeI Movable Panels - let user move panels around the windowI Right/Left Alignment - align columns to provide vertical

linesI Diagonal Balance - balance from top-left to bottom-rightI Responsive Disclosure - show only what needs to be

shownI Responsive Enabling - allow only relevant responsesI Liquid Layout - change window contents during resize

26

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 28: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsVisual Framework

I Decide on a consistent basic layout for each window/dialogbox/web page, including:

I Colour scheme, stylistic elements, fonts, marginsI Navigation controls (back button, breadcrumbs, sequence

maps)I Tabs, sections, etc.

27

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 29: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsCentre Stage

Make the most important part of the UI large. Use size, colour,titles, etc.

28

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 30: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsTitled Sections

Define separate sections using obvious titles. Use font, colour,whitespace, highlighting, boxes to separate titles

29

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 31: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsCard Stack

Use tabs/drop-downs to organise information

30

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 32: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsClosable Panels

Too much stuff to present at once User may want to have anumber of different things visible at a time

31

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 33: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsMovable Panels

Let the user reorganise the desktop by moving panels around

Be sure to have a “reset to defaults" option somewhere!

32

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 34: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsRight/Left Alignment

Forms and tables: use vertical alignment

33

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 35: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsDiagonal Balance

Arrange page elements so that they are balanced around adiagonal line from top left to bottom right

34

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 36: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsResponsive Disclosure

Show only what user needs to know at the time Example: guidea user through a series of steps by showing more of the UI aseach step is completed

Similar to a wizard, but user is not forced to follow a particularpath

35

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 37: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsResponsive Enabling

Show all options always, but only enable relevant controls

What is the difference between responsive disclosure andresponsive enabling?

36

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 38: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

Layout design patternsLiquid Layout

Resize/rearrange window contents when user resizes window.Commonly done in web browsers

37

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 39: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User Interfaces on Filmfrom http://www.creativebloq.com

“ . . . shifting images and screens around an enormous glasswall display”

I Futuristic in 2002;I By now many multi-touch interfaces have appearedI Gesture recognition in Microsoft Kinect and friends

38

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 40: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User Interfaces on Filmfrom http://www.creativebloq.com

“ . . . interfacing via a hologrammatic display inside his helmet -even when he’s flying"

39

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 41: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User Interfaces on Filmfrom http://www.creativebloq.com

“Touch screen and gesture technologies were front and centrethroughout, portraying an exciting - if somewhat dark anddepressing-future for user interface technology”

40

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 42: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User Interfaces on Filmfrom http://www.creativebloq.com

“ . . . took . . . influences from coral reefs and abstract art to givean organic feel to their interface designs”

41

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 43: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User Interfaces on Filmfrom http://www.creativebloq.com

42

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018

Page 44: User Interfaces - Lecture 24 Usability and Visual Design · “Don’t make me think" Steve Krug, usability expert “A well-designed and humane interface does not need to be split

User InterfacesWhat is next?

I Input / output devices: radical changes within a generation. . . but still require context

I Google Glass and other HUD-like technology suddenlygain popularity?

I Speech comprehension breakthroughs? Direct mindreading? . . .

43

Hamza Bennani -*- COSC346 -*- Usability and Visual Design -*- October 4, 2018