1. Page Design CMPT 281

2. Announcements

3. Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids – Visual economy Graphical redesign exercise

4. Graphic design Must account for: – a comprehensible mental image – an appropriate organization of data, functions, and tasks – quality appearance characteristics the “look” – effective interaction sequencing the “feel”

5. Components of visual language Layout – formats, proportions, and grids Typography – typefaces and typesetting Imagery – signs, icons, symbols – concrete to abstract Sequencing – how the interaction unfolds

6. Components of visual language Visual identity – unique appearance Animation – dynamics of display Color and Texture – convey complex information and pictorial reality

7. Design factors for interfaces Visual organization Visual consistency Navigational cues

8. Visual organization

9. Which elements to put on the screen? Clustering of widgets or data Use of white space and alignment

10. Visual organization http://en.wikipedia.org/wiki/Gestalt_psychology

11. Visual organization What components must be in the display? – what are the necessary visual affordances – frequent actions use direct manipulation for core activities use buttons, forms, toolbar, or special tools for frequent and immediate actions use menus or property window for less frequent actions use secondary windows for rare actions How are components related? – organize related items as “chunks” What are familiar and expected idioms? – cross-application look and feel

12. Visual organization

13. Link related elements, separate unrelated – create clusters based on related functionality – use white (negative) space – use alignment – provides implicit structure to the information

14. Visual organization Mmmm:  

15. Visual consistency

16. internal consistency – same conventions and rules for all elements of the GUI (unless a good reason not to) – application-specific grids encourage consistency external consistency – follow platform and interface style conventions – use platform and widget-specific grids – deviate only when it provides a clear benefit to user

17. Visual consistency Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss  

18. Visual consistency (?) http://www.mikeroweworks.com/

19. Navigational cues

20. Where should people look first? – provide an initial focus – direct attention to important, then secondary items – assist in navigation through material – order should follow a user’s conceptual model of sequences – people read top-bottom, left-right

21. Navigational cues  

22. How can window navigation be reduced? – avoid long paths – avoid deep hierarchies

23. Navigational cues http://www.shmarketing.co.uk/system-for-success.php

24. Techniques Clustering Grids Visual economy

25. Clustering

27. Grids Window components organized on horizontal and vertical lines – aligns related components Organization – contrast to bring out dominant elements – grouping of elements by proximity – show organizational structure – alignment Consistency – location – format – repetition – organization

28. Grids

29. Window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents

30. NoOk Message text in Arial 14, left adjusted Standard icon set NoOk Do you really want to delete the file “myfile.doc” from the folder “junk”? ?  Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !  Apply Cancel The file was destroyed

31. Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow

32. Haphazard layout from mullet & sano

33. Repairing a Haphazard layout from mullet & sano

34. Redesigning a layout from mullet & sano

36. Visual economy minimize the number of controls – include only those that are necessary eliminate or move others to secondary windows – minimize clutter so information is not hidden

37. Visual economy NNNN MMMM xxx: ____ MMMM NNNN  

38. Repairing excessive display density from mullet & sano

39. Visual economy Tabs – excellent means for encapsulating related items – but can be overdone!

40. Graphical redesign exercise Redesign a window using a grid Create a grid emphasising: – visual consistency – relationships between screen elements – navigational cues – economy – legibility and readability – imagery

41. Slide Show Options Timer Wait for click Timer Seconds:______ Sound Play sound Choose sound file... Options Loop mode Random overlay Fit in window Show menu bar Cancel Sort OK Sort by... DoneCancel Caption Direction Ascending Descending

42. A possible solution Step 1. Maintain visual consistency – locate standard components including title bar, window controls, dialog boxes... – create the grid: organizes elements into rows and columns also shows where generic components will appear – these generic components may have their own grids Step 2. Determine visual qualities – navigational layout – white space – legibility – typography

43. The grid Slide Show Options Title bar - see other grid Image in empty column First order labels: - 10pt Bold Arial Radio / checkboxes - standard widget set Second order controls - 10pt Normal Arial Spacing between groups Dialog box controls - see other grid

44. Using the grid Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Step 3. Determine relationships and navigational structure – map navigational structure onto the grid Step 4. Economize – collapse two windows into one – trim sound dialog

45. Finished version Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending

46. Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Slide Show Options Timer Wait for click Timer Seconds:______ Sound Play sound Choose sound file... Options Loop mode Random overlay Fit in window Show menu bar Cancel Sort OK Sort by... Done Cancel Caption Direction Ascending Descending

47. Further economization Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Step 5: can we remove other elements? – can remove image – compare two versions

48. Reading Text: – Pattern group I: Designing Effective Page Layouts Pages 631-657