1. Visual Organization Layout

2. Importance Users form their 1 st impression of your website in SECONDS When users know what they want, they want to find it quickly Distracted multi-tasking users need to find their place back Reading is USUALLY the primary task of a web page Studies show that visually pleasing interfaces are easier to learn

3. TOP 5 1. EASY TO READ Content organization drives visual organization 2. EASY TO NAVIGATE (page and website) 3. EASY TO FIND (skimming) 4. FAMILIAR (consistent across pages) 5. FAST

4. Layout Styles GRID or BOX model an adjustable grid (layout changes for content) Does not mean it changes to the user, this is from printing Example: classified ads, yearbook photos, comics Template rigid, fill-in-the-blank approach Commonly used

5. The 4 Organization Principles Proximity Alignment Consistency Contrast

6. Proximity A Gestalt principle Grouping or locating things near each other People tend to think things that are close are related red, orange tan, brown green, light green red, orange, tan, brown, green, light green

7. Proximity in Reading Newspaper columns Line spacing and visual line width (column width) Wider lines are more difficult to read Sequences of articles on a page or in multiple page spans (print) Images with text Images near the text are expected to be connected (often are not)

8. Dan’s Clothing Store Bad checkout closeout on pink socks email us july specials kid’s clothes mens clothes open an account sale on rainwear special sizes store locations your account status women’s clothes

9. Dan’s Clothing Store Good women’s clothes men’s clothes kids clothes july specials sale on rainwear closeout on pink socks store locations store hours open an account your account status checkout email us

10. Alignment A Gestalt principle Minimize the number of broken lines Broken line items appear to stick out Notes: Center alignment on text is unpredictable and causes many broken “tracing” lines

11. Text alignment Horizontal left, right, center (aka left justified, right justified) justified dyslexia can have troubles with the slightly altered spacing

12. Consistency On the web, users might think they changed websites large changes might take more bandwidth keep navigation’s position on pages builds user familiarity

13. Contrast Contrast is similar to Gestalt’s similarity Generally contrast is used with size and color Low contrast between items makes them harder to separate Can be used sparingly to subtly group items.

14. Contrast Not just a setting on your monitor Level of visual difference Color (black on white or white on green) Size (BOLD text, large headings) Shape (triangle vs circle) Draws attention, Highlights separation Can indicates grouping as well (low contrast)

15. Whitespace Often whitespace overlooked and shunned “whitespace” or “negative space” Anti-content (anti-matter exists) ZERO does exist, it represents nothing (its null not undefined) Saves busy looking layouts ( busy → zebra stripes) whitespace can be a guide for the eyes

16. Guiding the Direction

17. Animation Gets attention (most the time) Distracts the eyes/attention Peripheral animation can distract users

18. aka Divine Proportion Pythagoreans discovered it Math ratio common in nature’s proportions 1:1.62 An irrational number: phi or Φ Φ = (1+√5) ÷ 2 Golden Ratio

19. Rule of 3 rds Based upon the golden ratio ( 1.6 ≈ 1+⅔ ) Dividing the layout into multiples of ⅓ Segments can use ⅔ or could be ⅙ This slide uses the rule Photography, video, film, page layout

20. Planning Organization