IAT-235: 04 Bare Bones

IAT-235: 04 Bare Bones — A slide deck

A pair of very low-fidelity wireframes
Bare Bones

Please Close All Laptops

Only the back row may make use of their laptops during lecture.

IAT-235 — P01: Information Design

Information Architecture (IA) is...

  1. Organising content or objects.
  2. Describing them clearly.
  3. Providing ways for people to get them.

The Lowest Level

The very basics of wireframing

  • Structure
  • Hierarchy
  • Purpose

Curious.... no?

  • Structure - Organising content or objects.
  • Hierarchy - Describing them clearly.
  • Purpose - Providing ways for people to get to them.
A pair of very low-fidelity wireframes
Why were wireframes identified as 'controversial' in your reading?

Block Sketches

Low-level wireframes

These help illustrate:

  • Content areas
  • Hierarchy of areas

Please sketch your current P01 design as if it was a low-level wireframe, it should help illustrate:

  • Content areas
  • Hierarchy of areas
A City of Vancouver Municipal Election poster

The Next Level

Low-to-mid-level wireframes

help illustrate:

  • Layout
  • Content
  • Function

The Next Level

Please sketch your current P01 design as if it was a low-to-mid-level wireframe, it should help illustrate:

  • Layout
  • Content
  • Function
A City of Vancouver Municipal Election poster

Another Level!

Mid-level wireframes

These help illustrate:

  • Grids
  • Hierarchy of content
  • Basic aesthetics

Another Level!

Please sketch your current P01 design as if it was a mid-level wireframe, it should help illustrate:

  • Grids
  • Hierarchy of content
  • Basic aesthetics
A City of Vancouver Municipal Election poster

Submit Your Sketches

Please take a photo of your mid-level sketches and submit them to https://ah1.ca/wires

Break-time

You may:

  • Have a dance party
  • Plan your next vacation
  • Do nothing

P02

This project has you beginning to work with interaction and information.

IAT-235 — P02: Wires

Working in Groups

The team contract review.

P02 Final Deliverable

Interactive wireframes

Your final deliverables for P02 include interactive wireframes and a sitemap; both are meant to help us understand the structure of content, and how we interact with it.

Mobile and Desktop

As part of this project we are requiring you to consider both mobile and desktop displays. We will talk in more depth next week, but think about:

  • Using the grid structure
  • How might my content reorganize for mobile?
  • How can I keep consistency when reflowing content?
  • Using the grid structure

Wireframing Display Sizes

Challenges to consider

  • Linguistic considerations
  • Misinformation, or information overload
  • Accessibility of information
  • and more...

Interactive Wireframes

Sitemaps and low-to-mid-level wireframes should help inform our interactive wireframes. This is how we will test if our interactions with information are reasonable.

Axure

A wireframing tool

This week you will receive an introduction to Axure, a wireframing tool. Remember that wireframes — just like everything else in design — come in different levels of fidelity.

Flow + Wires = Chunking

Wireframes help us understand task chunking

In addition to helping us see the interactions and design fundamentals, wireframes will help illustrate how well the task has been broken up.

Interaction Wayfinding

Help us know what and how to focus

Wayfinding through:

  • Context
  • Metaphor
  • Narrative

Context

Helping us understand

This is a link, but how do you know that?

An image of the metaphor-heavy Magic Cap interface
The interface from Magic Cap uses metaphor heavily (more at The Anti-Mac User Interface)
An info-graphic illustrating how to make a kid's book
How to Make a Kid's Book by Nicholas Blechman
VanSort Recycling Game

Interaction as Clarification

Avoid using interaction to make things 'shiney'; aim for purposeful and clarifying interactions with objects on the screen.

Wireframing Interactions

Questions?

This week's labs

The low-down

  • Axure Tutorial
  • P02 Groups + Introduction
Afinger touching a user interface filled with text-based nodes
"Type and Interface" from Type on Screen by Lupton

Your second reading is Allsopp's The Dao of Web Design.

Next week's lecture is on 'teh webz' and its fluid nature.

There will also be a quiz.

Quiz

Things to note

  • You will have 30 minutes
  • You can complete it on a computer, or on paper
  • It will be open book
  • It will use any readings/lectures up-to and including next week's

Note: Sometimes not all readings are available at quiz time

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1