information design
TRANSCRIPT
IMD09117 and IMD09118 Web Design and Development
Information Design
The 5 Planes Model
Last session we looked at Navigation and Metaphor.
We have learnt some of the rules for navigation.
This session we will be looking at Information Design and how it links to navigation and interface design.
The Skeleton Plane
These three sections are inherently linked and this session is about considering these different aspects as a whole.
Interface Design is about allowing users to do things.
Navigation Design is about allowing users to go places.
Information Design is about communicating ideas.
Interface Design
“Successful Interfaces are those in which users immediately notice the important stuff” Garrett p.120
“Don’t make me think!” Krug
What will most users want to do with your site?
Make this the easiest option.
Most people just want to search the Web but one click…
….and our options expand enormously.
Home Page
Most customers go somewhere here.
Most customers go somewhere here.
Alternative locations for other requests.
Alternative locations for other requests.
There’s more information if you scroll down.
There’s more information if you scroll down.
Technical constraints
The technology used to display information on the web means that we are constrained to use specific techniques.
Checkboxes allow users to select options independently of one another.
Common objects
For inputting text.
Dropdowns are more compact than radio buttons and take up less space.
List boxes are also compact because they scroll.
Buttons are usually used to send the filled in form.
Within limits
“Design is the art of gradually applying constraints until only one solution remains.” —Unknown
By working with rather than against standard forms Oki-ni keep the continuity of their overall design and the interface seems to compliment their site.
Apple’s version
Case study
http://www.picturesonwalls.com
Navigation
In this context we need to be sure that navigation is designed for how users will use the site and we need to consider it in terms of our site diagram.
Global navigation
Local navigation
Navigation
Supplementary navigation.Shortcuts to related content, this allows users to change focus.
Navigation
Contextual navigation. Embedded in the content itself. Allow your users to decide
they need that information as they read the text. Wikipedia employs contextual navigation extremely well.
Information Design
How do our users think about information?
County Job Title Telephone Number Street Name and Number Name Postcode Organisation City Email
Information Design
How do our users think about information?
Name Job Title Organisation Street Name and Number City County Postcode Telephone Number Email
Information Design
Personal Information Name Job Title Organisation
Address Street Name and Number City County Postcode
Other Contact Telephone Number Email
Wayfinding
Successful wayfinding allows users to quickly ascertain.
Where they are
Where they can go
What choices to make to get closer to their objectives.
Wayfinding
Colours point the way.
Wireframe