lecture three
agenda
- interaction design & information architecture
- interface & navigation design
- information design
- tools & resources
- random design tutorials
- readings
interaction design & information architecture
- interaction design
- applies to web as software system
- the form is not important at this stage; we want to know how it will respond - what is the flow (I want to login - what happens when I do it incorrectly?)
- describes possible user behaviour and defines how the system will accommodate and respond to that behaviour (I *will* forget my password - how can I be reminded?)
- usability heuristics apply here: using real-world analogues (shopping cart); error prevention (help me get my password)
- information architecture
- applies to web as hypertext system
- the art of organizing information and providing users with a way to navigate through it quickly and easily
- the number of steps it takes to do/find something is not important - did each step make sense to the user and follow naturally from the previous one?
- defines a structure for the information of the site:
- hierarchical
- matrix
- organic
- sequential
- structure is often reflected in navigation systems
- organizing principles (schemes):
- alphabetical
- chronological
- task-based
- audience-specific
- difficulty in IA is that things can be organized and labelled in many different ways (facets) - our job is to find the right way for our users
interface & navigation design
- interaction design and information architecture begin to give shape to requirements of the site - we refine that structure and begin to make it tangible through interface, information and navigation design
- convention and metaphor
- drop down menu for selecting province/state
- shopping cart metaphor
- navigation on the left
- interface design
- web as software system
- the arrangement of elements to facilitate interaction
- well-designed interface recognizes the courses of action users are most likely to take and makes those interface elements easiest to access and use
- in JJG's context, interface design applies specifically to the design of form-based functions on web sites, the primary way that we interact with web-based applications
- more than just throwing up some checkboxes and pulldown menus
- navigation design
- web as hypertext system
- the arrangement of elements to enable movement through the site
- navigation has three primary goals:
- allow users to get from one point to another in a web site
- communicate how the links are related
- indicate the relationship between the links it contains and the page the user is currently looking at
- navigation comes in different flavours:
- global/main navigation
- local navigation
- supplementary navigation - shortcuts
- contextual navigation - inline
- courtesy navigation
- remote navigation - a-z index, sitemap
- navigation will be informed by IA -organization, labelling, etc.
information design
- information can be difficult to pinpoint, but it boils down to how to present information so that people can use it and understand it more easily
- involves grouping and arranging pieces of information - important, because the way elements are arranged on screen can carry meaning that is interpreted on a subconscious level
- relative positions can imply relationships
- we use different techniques to achieve different results:
- make elements different through contrast and spacing
- imply a relationship through association (containment, proximity, etc.)
- we need to know what's important and what needs to be communicated on each page:
- page title
- site id
- where am I?
- local navigation
- how to search
- get back to the home page
- what can I do next?
- and not necessarily in that order
- for people in the west, there is an innate visual hierarchy that flows from top-left to bottom-right of pages
- following this relationship can help to communicate the relationships between elements
tools & resources
- interaction design & information architecture:
- A visual vocabulary for describing information architecture and interaction design
- A sample interaction flow for metafilter.com
- Interaction-Design.org
- boxes and arrows
- The Interaction Designer's Coffee Break
- InfoDesign: Understanding by Design
- The relationship of IA to ID as told through products
by Dan Saffer - convention, metaphor & patterns
- Repository of Navigation/Structure Patterns
- Web Design Patterns at welie.com:
- UI Patterns and Techniques
- Developing Schemas for the Location of Common Web Objects
- An Introduction to Using Patterns in Web Design
- wireframes & visio:
random design tutorials
If you're looking for a bit of fun with Photoshop, here are some random design tutorials for you to walk through:
- Clipping Paths & Close Cropping
Merge images into complex backgrounds. - Five Great Background Masking Techniques in Photoshop
More techniques for isolating objects. - Image Blending
Blend images using layer masks.