ah teaches information design (Bare Bones lecture)
Bare Bones
Lecture outline
An introduction to interaction design and wireframing. Lecture slides will be made available on the day of the lecture (February 12).
Welcome Embark Sustainability!
Jamie Hill will be talking about Embark and provide some context for our final projects.
Teamwork
Working together
Teamwork reflections
We will have a brief teamwork reflection for you to complete each week in the lab time. These will provide us with a quick means of following up on questions or concerns as they come up for the team.
Teamwork talk
Information Architecture (IA) is...
- Organising content or objects.
- Describing them clearly.
- Providing ways for people to get them.
Generate a List
We need to know what we are organizing. For example: food, dog, scratching post, collar, snake, rock, aquarium, flea medication, leash, cat, laser pointer, sand, heater, catnip, cage, fish, frozen mice, ball, scratching post, water conditioner
Hierarchy Pattern
Types of hierarchies:
- Broad: Lots of top level items
- Deep: Lots of depth, little at top
- Strict: Items occur in one place only
- Poly: Items can be in more than one place
Sketching architecture
food, dog, scratching post, collar, snake, rock, aquarium, flea medication, leash, cat, laser pointer, sand, heater, catnip, cage, fish, frozen mice, ball, scratching post, water conditioner
- Broad: Lots of top level items
- Deep: Lots of depth, little at top
- Strict: Items occur in one place only
- Poly: Items can be in more than one place
Metadata
Information about information
The markup that we use in HTML — such as <p> for paragraphs — is a form of metadata, helping define what the information is for a computer. It helps us use the computer to build relationships.
In this category we have two patterns:
- Linear: One thing follows another
- Hypertext: Emergent structure
The Lowest Level
The very basics of wireframing
- Structure
- Hierarchy
- Purpose
IA and wireframing
- Structure - Organising content or objects.
- Hierarchy - Describing them clearly.
- Purpose - Providing ways for people to get to them.
Grids & Sketching
A recap
Low-fidelity wireframing
These help illustrate:
- Layout and structure
- Hierarchy of content
- Function (if applicable)
Interactive wireframes
Your final deliverables for the project are interactive wireframes which are meant to help us understand the structure of content and how we interact with it.
Flow + wires = chunks
Wireframes help us understand portions
In addition to helping us see the interactions and design fundamentals, wireframes will help illustrate how well the task has been broken up.
Mobile and desktop
As part of this project we are also 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
Context
Helping us understand
This is a link, but how do you know that?
The old iBook interface
The Windows 10 interface
Interaction as clarification
Avoid using interaction to make things 'cool'. Aim for purposeful and clarifying interactions with objects on the screen.
Wireframing interactions
Changing Formats
Our lecture will be adjusting
For the next couple weeks we'll be changing formats for our lecture.
- First half: Regular lecture
- Second half: Coding tutorial
Web Toolkits
Prepped and ready to go
Available on Canvas in next week's module will be links to programs for your first 'web toolkits'. They contain:
- Visual Studio Code (a free code editor)
- Google Chrome (a free web browser)
Please come with them installed for our lecture time if you want to follow along with the tutorial.
Next lecture
Semantics, Accessibility and Markup
This week we will introduce HTML and how proper use can mean more accessible websites. Lecture recordings will typically available over the weekend.