GRIDS & GROUPING, and ALIGNMENT

Size: px

Start display at page:

Download "GRIDS & GROUPING, and ALIGNMENT"

Georgina Hamilton
6 years ago
Views:

1 GRIDS & GROUPING, and ALIGNMENT REF: Scott Klemmer

2 Grids & Grouping, and Alignment Designing grid Grouping and alignment to convey the structure 2

3 Grids & Grouping, and Alignment Grid Systems (Java L&F, 2001) Java Look and Feel Design Guidelines, 2001, 3

4 Grids & Grouping, and Alignment Columns, space between columns, horizontal baseline, text hierarchy 4

5 Grids & Grouping, and Alignment Text hierarchically 5

6 Grids & Grouping, and Alignment 6

7 7

8 8

9 9

10 10

11 11

12 12

13 13

14 14

15 15

16 16

17 17

18 18

19 19

20 20

21 When creating templates, design for the longest text block first and the shorter would adjust 21

22 In general, left-aligned text is faster to skim (in places that read left-to-right) 22

23 Slower for scanning 23

24 24

25 Alignment guides the eye, reducing clutter 25

26 When to use top, left, and right alignment 26

27 27

28 28

29 29

30 A brief word on color Pay attention to it Design in grayscale first Keep luminance values from grayscale when moving to color 30

31 31

32 Fewer colors are generally more powerful 32

33 3 shades of gray (for not click-able) 3 shades of purple (for click-able) 33

34 34

35 READING and NAVIGATING

36 Reading and Navigating People are always in search of information Information Scent Can people figure out how to get to the information they want? Do they realize what options are available? 36

37 Reading and Navigating How can you detect poor scent? Flailing-moving without knowing where to go Low confidence after e.g. clicking a link Back button frequently 37

38 Reading and Navigating Low-Scent Navigation Surprising categories Short links Hidden navigation Icons provide little additional Information Stanford Federal Credit Union, 38

39 Reading and Navigating 39

40 Reading and Navigating Icons help when... they facilitate repeat recognition i.e. when user return when you know what something looks like but not what it s called 40

41 Reading and Navigating Improving scent: multi-word links With specific, recognizable terms Trigger words This also helps accessibility Longer more specific trigger words 41

42 Reading and Navigating Putting explanation below the label 42

43 Reading and Navigating Does location matter? 43

44 Reading and Navigating Image courtesy Ed Cutrell, Microsoft Research 44

45 Reading and Navigating The Poynter Institute 45

46 Reading and Navigating Prime Real Estate Above the fold Where people expect Where other pages put similar content Not where ads usually 46

47 Reading and Navigating People are more than happy to scroll if they think they ll be rewarded 47

48 Reading and Navigating How People Read Online Jakob Nielsen, How Users Read on the Web, October 1997, 48

49 Reading and Navigating They Don t While browsing Jakob Nielsen, How Users Read on the Web, October 1997, 49

50 Reading and Navigating Interlaced Browsing Multiple tabs (not even related tabs) 50

51 Reading and Navigating Improving usability Making the text concise, making it scanable using sub headings, bullets n short paragraphs 51

Human-Computer Interaction Design

Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Week 6 - Visual Design (2016-11-01) some slides adapted from Scott Klemmer s Intro. HCI course Learning Objective use