ah teaches information design: 04 Bare Bones

ah teaches information design: 04 Bare Bones — A slide deck

Bare Bones

Lecture outline

Covered in this lecture:

  1. Interacting with information
  2. Exploring layout and structure
  3. Wireframing and fidelity
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.

P1: 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

IA/Wireframing

  • 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 P1 design as if it was a low-level wireframe, it should help illustrate:

  • Content areas
  • Hierarchy of areas

The Next Level

Low-to-mid-level wireframes

These help illustrate:

  • Layout
  • Content
  • Function (if applicable)

The Next Level

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

  • Layout
  • Content
  • Function (if applicable)

Another Level!

Mid-level wireframes

These help illustrate:

  • Grids
  • Hierarchy of content
  • Basic aesthetics

Another Level!

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

  • Grids
  • Hierarchy of content
  • Basic aesthetics

P2: Wires

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

P2: Wires

Working in Groups

The team contract review.

P2 Final Deliverable

Interactive wireframes

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

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

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.

Adobe XD/Axure/...

A wireframing tool

Next lab you will receive an introduction to 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 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
Kaber Technologies
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 is MEGA-LAB

The low-down

Please meet in room 3100 with your P1 ready for review. Members of the Sustainability office will be joining us for crits.

A finger 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 will be completing it on paper.
  • It will be open book, but not open laptop.
  • It will use any readings and lecture materials up-to and including next lecture's.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1