Week 2: Information Architecture, Wireframes, & Prototypes Flashcards
Information Architecture (IA)
- focuses on the organization of information within analog and digital products
- primary focus: structure
- secondary focus: UI
- understands how people want to relate to the content and functionality contained in the structure
- understands the range of content and functionality to be supported by the structure
8 Principles of Information Architecture
- objects
- choices
- disclosure
- exemplars
- front doors
- multiple classification
- focused navigation
- growth
Objects
treat content as a living, breathing thing, with a lifecycle, behaviours and attributes
Choices
create pages that offer meaningful choices to users, keeping the range of choices available focused on a particular task
Disclosure
show only enough information to help people understand what kinds of information they’ll find as they dig deeper
Exemplars
describe the contents of categories by showing examples of the contents
Front doors
assume at least half of the website’s visitors will come through some page other than the home page
Multiple classification
offer users several different classification schemes to browse the site’s content
Focused navigation
don’t mix apples and oranges in your navigation scheme
Growth
assume the content you have today is a small fraction of the content you will have tomorrow
Utility Navigation
comprises secondary tools and actions, such as sign-in, contact, save, subscribe, share, print, and change view
Navigation Types
- structural navigation
- associative navigation
- utility navigation
Structural Navigation
- used to connect pages based on the site’s hierarchy, enabling users to move up and down throughout the levels of that hierarchy
- global and local navigation
Global Navigation (Structural)
- aka main or primary navigation
- consists of the website’s top-level pages
- it helps with site orientation due to its persistent nature
ex. Home, About, Contact
Local Navigation (Structural)
- aka sub-navigation and page-level navigation
- used to access the “lower levels” of a website
- often an extension of the global navigation
ex. table of contents on left side
Associative Navigation
- used to connect pages that have similar content, regardless of their in-site location (across a website’s content hierarchy)
Types of associative navigation
- contextual content
- quick links and related links
- footer
Contextual Navigation (Associative)
- aka associative links or related links
- placed near the content of a page
- can lead to areas of the site with related content
Quick Links (Associative)
- used for linking to important content not generally present in global navigation
- provide access to related content just like contextual navigation, except that the scope of the links is more global (site-wide)
Footer Navigation (Associative)
- contains links to supplementary website information (content unrelated to the main site content)
- footer navigation ≠ primary navigation menus (exists so visitors don’t have to scroll up again)
ex. Terms of Use and Privacy Policy
Utility Navigation
contains tools and features that may assist the visitors of a site
ex. login/register, shopping cart, search bar
Wireframes
- aka skeleton
- low-fidelity representation of the different screens and pages that form a product
- use simple shapes to create visual representations of page layouts
Purpose of Wireframes
- to communicate ideas and the structure of individual pages
- to prepare project documentation
Downside of Wireframes
- aren’t good for usability testing and assessing overall user experience
- aren’t the best tool for demonstrating a concept to stakeholders
- won’t help you if you need to describe complex design ideas, like animated effects, complex transitions, or gestures
