1. Designing User Interfaces User Interface: People’s perception of “The Product” Good UIs have two well-integrated conceptual parts: –Form / Visual Design –Functionality / Navigation Implementing good UIs requires harmony between them

2. Visual Design is about Information “Resolution” –How much you try to tell in a screenshot –Especially if you convey quantitative information “Interaction” between Design Elements –It draws your attention, then what? Color Issues -- Support or interfere with UI? Typographical Issues -- Support or interfere with UI? Overall Design “Quality”

3. The Problem Intelligent human Powerful machine Communication Bottleneck One screenshot < 10% of one printed page

4. Map page to screen? Scrolling requires users to rely on visual memory (a weak skill) Multiple screens per page make it difficult –to make a comparison, a choice –to keep track of context (“Where am I?”) Multiple screens management adds lots of administrative debris (buttons, menus, navigational images, etc.) Design needs to increase “signal” & reduce “noise”

5. Principles of design ways to achieve unity Alignment Contrast Proximity Repetition Robin Williams’ cheatsheet: http://www.urlsinternetcafe.com/classroom/features/featuresgood.html

6. Alignment is central to understanding Lay out the page with grids

7. Alighment creates template of expectation

8. Negative grid space can be powerful

9. Break the rules only when you know why

10. Grid is pleasing and calming…

11. Diagonals add tension

12. Think of usage

13. Alignment is not strictly via squares

14. Alignment is not strictly straight lines

15. Contrast brings out the focal point

17. Contrast should be intentional

18. Where you place graphics or text creates or upsets balance Visual weight Contrast in : Color size shape photo v. drawing orientation font Anything that is different from the rest

19. proximity

23. The edges of the page and the center seem to exert a magnetic force on everything within the page

25. Margins relax edge magnetism

30. empty space can be effective

32. Metaphors

39. Map physical or mental, is a very familiar metaphor.

40. Example of a map used in lieu of menus or buttons

41. Historylines very useful but tricky to compress tons of data in a small screen

42. A good example of increasing information density

43. Beware!

44. Form beats function

45. Screen real estate sold cheap

46. What is this a metaphor for?