Week 2: Information Architecture, Wireframes, & Prototypes

Question 1

Information Architecture (IA)

Answer 1

• 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

Question 2

8 Principles of Information Architecture

Answer 2

• objects
• choices
• disclosure
• exemplars
• front doors
• multiple classification
• focused navigation
• growth

Question 3

Objects

Answer 3

treat content as a living, breathing thing, with a lifecycle, behaviours and attributes

Question 4

Choices

Answer 4

create pages that offer meaningful choices to users, keeping the range of choices available focused on a particular task

Question 5

Disclosure

Answer 5

show only enough information to help people understand what kinds of information they’ll find as they dig deeper

Question 6

Exemplars

Answer 6

describe the contents of categories by showing examples of the contents

Question 7

Front doors

Answer 7

assume at least half of the website’s visitors will come through some page other than the home page

Question 8

Multiple classification

Answer 8

offer users several different classification schemes to browse the site’s content

Question 9

Focused navigation

Answer 9

don’t mix apples and oranges in your navigation scheme

Question 10

Growth

Answer 10

assume the content you have today is a small fraction of the content you will have tomorrow

Question 11

Utility Navigation

Answer 11

comprises secondary tools and actions, such as sign-in, contact, save, subscribe, share, print, and change view

Question 12

Navigation Types

Answer 12

• structural navigation
• associative navigation
• utility navigation

Question 13

Structural Navigation

Answer 13

• 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

Question 14

Global Navigation (Structural)

Answer 14

• 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

Question 15

Local Navigation (Structural)

Answer 15

• 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

Question 16

Associative Navigation

Answer 16

• used to connect pages that have similar content, regardless of their in-site location (across a website’s content hierarchy)

Question 17

Types of associative navigation

Answer 17

• contextual content
• quick links and related links
• footer

Question 18

Contextual Navigation (Associative)

Answer 18

• aka associative links or related links
• placed near the content of a page
• can lead to areas of the site with related content

Question 19

Quick Links (Associative)

Answer 19

• 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)

Question 20

Footer Navigation (Associative)

Answer 20

• 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

Question 21

Utility Navigation

Answer 21

contains tools and features that may assist the visitors of a site

ex. login/register, shopping cart, search bar

Question 22

Wireframes

Answer 22

• 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

Question 23

Purpose of Wireframes

Answer 23

• to communicate ideas and the structure of individual pages
• to prepare project documentation

Question 24

Downside of Wireframes

Answer 24

• 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

Question 25

Prototypes

Answer 25

• represents the final product, including simulations of the user interface interactions
• the process of building an interactive experience
• includes simulations of the user interface interactions
• first phase in which designers can actually interact with their creations

Question 26

Low-fidelity prototype

Answer 26

• a rough representation of a design concept that helps designers validate them early on in the design process
• generally limited in function and interaction

ex. a clickable prototype created from sketches or wireframes

Question 27

High-fidelity prototype

Answer 27

• an interactive prototype that simulates the real website or app’s functionality and design details
• helps users understand the look and feel of a future product

Question 28

Downside of Prototyping

Answer 28

• expensive and time-consuming
• requires some design skills, which not everyone can do