1 / 36

Information Architecture & Navigation

Information Architecture & Navigation. Summary. Standards Why? Information Architecture Visual language Formatting Navigation Where are you now? How did you get here? Where are you going ?. Standards. Why have them?. Standards help users. Users scan, rely on common knowledge

bess
Download Presentation

Information Architecture & Navigation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Information Architecture & Navigation

  2. Summary • Standards • Why? • Information Architecture • Visual language • Formatting • Navigation • Where are you now? • How did you get here? • Where are you going?

  3. Standards Why have them?

  4. Standards help users • Users scan, rely on common knowledge • Help find content • Use your site

  5. Information Architecture

  6. Information Architecture Visual language

  7. :hover states Tested.com

  8. evernote designsponge

  9. a { text-decoration: none; } a:hover { text-decoration: underline; }

  10. Icons • How recognizable? • Labels or alt text • No mystery-meat navigation squarespace

  11. gmail squarespace

  12. Add alt text to an image

  13. Information Architecture Formatting content

  14. Lists and menus • Categories based on content • Manageable # of items • Clear grouping

  15. The Line up • Focus on key differences • Reduce visual noise • Continuation: Lines can be implied Snapfish

  16. Home depot

  17. Navigation

  18. Navigation gives orientation clues to users • Where are you now? • How did you get here? • Where are you going now?

  19. Navigation Where are you now?

  20. Site Logo & page title • Logos top left or top center • Window size • Name of page/section

  21. Indicate current state • Font weight, color • Background • Icon • Size

  22. hulu etsy uber arstechnica

  23. Navigation How did you get here?

  24. Breadcrumbs • Trail/path you took, category hierarchy • General > specific • Top left, page title underneath Home Depot

  25. History indicators Mailchimp Etsy

  26. Navigation Where are you going?

  27. Link text • Action: read more, add to cart, [go] back to top • Content to be revealed: previous page, account, portfolio

  28. etsy

  29. Review: • Standards • Why? • Information Architecture • Visual language • Formatting • Navigation • Where are you now? • How did you get here? • Where are you going?

More Related