Sensorial/visual design STYLE, the visual presentation of information.
What it looks like, and how that makes you feel. All visual elements are included - color palette, typography, imagery, layout, motion / animation, and sensorial elements like touch, smell, sound

Interaction Design FUNCTION, REASON, and BEHAVIOR of users engaging with information.
Interaction design studies and designs for users in environments, with products, and in communities. Well-designed interactions give the users what they need - clearly and intuitively.

Information design is the skeleton; visual design is the flesh,
and interaction design is the muscle that joins the two.

These three elements of design well executed, and in a perfect union
can create an experience for the user.

Our goal is to design experiences - interactions that are longer lasting and resonate more meaningfully in a user's mind and life.

Create experiences by focusing on the concept and on storytelling,
and on usability, functionality, availability, reliability, usefulness,
while balancing cognition, emotion, perception, knowledge

The most significant design element of our time is interactivity.
Designers must capitalize on this to reach their audience.

There are different kinds of digital participation:

Sequential Watch, then interact, or interact, then watch (Sopranos site off HBO)
Simultaneous Interact here while watching that (CNN's community section)
Merged Watch and interact in the same environment (Typospace or lo9ic)

How do you make it interactive?
To some extent, every interactive experience has a measure of the following elements: (Check out Nathan Shedroff's articulate thoughts on this.)

The application should give Feedback to the user - a reward, some sort of stimulation?
Talk to yourself!
yugop.com
Reflex Tester
Learn to dance, properly

The user should feel that they have Control.
Play and learn with the wireframe skeleton
Dancing Paul, or Dancing Bush
Simulator: an oldy but a goody
Balance giving the user a sense of control, and controlling their path with an organization that is intuitive and appropriate. Enjoy the paced environment of ZEN.

Productivity is measured individually, or part of a group.
Take a poll and see what others say on Which is worse?
My Yahoo helps me organize "my" information
Ask Jeeves gets results in vernacular language

Creativity helps users become creators, not just viewers.
GE's Imagination at Work drawing tool
Haring Kid's Site
Mini-Mizer (explore the entire site)
TryGroup simple click and discover
Web Poetry Kit

Communication makes connections, and brings perspective beyong ourselves.
Rate products and services with a community epinions
Share your thoughts at The fray
Learn the power on context at space.com's universal viewer

Adaptivity is when technology changes for you.
Create your virtual modelBR> Preference profiles (through collaborative filtering) on NetFlix
Amazon makes suggestion based on last purchases
Users love questionnaires: IQ test
Nofrontierans are creative and adaptive.

If you think you have this down, take Togg's quiz to test your knowledge about interaction design.

User discovery: Assess Your Audience
If you make the target bigger, your aim just gets worse.
("My users are basically everybody" - sounds familiar?)

What is the goal? (Why is the user there? - entertainment, information, transaction)

What is the content? (visual, editorial, comparative analysis?)
Let the nature of your content inform the information organization
(Experimental, editorial, informational, e-commerce)

Who is the audience? (Age, sex, culture)
How web savvy are your users?
Do your users have the latest plug-in version? (Degrade gracefully)
Does not having the new plug-in disrupt the experience?
What speed are they connecting?
What's their resolution?

Place yourself in the user's position. Consider every aspect of their experience.

3 basic audience groups
Readers - read copy
Viewers - entertainment
Users - functionality

Understand your users by:
Researching the market
Reviewing current climate in interaction and technology, social and cultural trends
Learning from your past experiences online and offline

Break audience into 3 types and prioritize them.
Validate client's opinion.
Identify end user and go out and work with them.
Don't assume that offline users are the same as online will be/are.
Use EMPATHY, not task analysis to design your site.

Generate User Profiles to summarize your findings.
User profiles are demographic and psychographic specifications
about your 3 -4 most likely user groups.

Online magazines with specific audiences and successful ways of fulfilling their target's interests: Plastic, Fucked Company, Dextro (beware of the huge homepage), Salon, Shift Japan E-zine

Getting information about your users

1. When you have budget and time considerations, consider a survey online or in physical space to ask questions or connect with likely users

2. Structured user interview Conducted by 2 people (interviewer and observer); about one hour; Try to stay neutral, not ask leading questions; Listen to those users because everyone creates their own workflows and shortcuts; Do not judge them; Do not correct them/try to change their behaviors; Interview on their turf, at a minimum, see their space

3. Fly-on-the-wall ethnography Observation of a typical user in the appropriate environment.

4. Collaborative design sessions Small focus groups to brainstorm through directed activities.

Parts to a user research report:
Logistics (when, who)
Record of events (where, why)
Analysis (what)
Design implications (what now)

When you understand your users, write User Scenarios to map the user to the interaction. User scenarios are short realistic narratives based on what you learn from user profiles. Develop them so they plot out step-by-step how a typical user will behave on the site. Remember, users often act impulsively and emotionally, not rationally. These scenarios keep your work honest - refer to them throughout the process.

Next, consider how will you will organize your content / information.
Alphabetically (dictionary, encyclopedia)
Categorically (cookbook)
Chronologically + on continuum (how-to books in computers, from easy to difficult)
Location (geography)
Magnitude/size (books on a bookshelf)
Random (CDs)

The way you organize information influences:
The relationships users draw
Emphasis they place - what's important
The ways comparisons are drawn - user asks what was omitted...?
Ease-of-use

Represent the content organization as a Flowchart.
A flowchart is a meta scheme which represents areas, not necessarily specific pages of the site.

Establish hierarchy of information
Do you want to present information on the same level?
Or direct users to select areas?
Some sites have "internal ads" to pull users into specific areas

From the flowchart, come the Workflows.
A workflow is a diagram that shows how a particular transaction occurs. The reason to think about these workflow issues is to 1) Make sure you understand what your users main paths are through the site, and 2) Make sure they can locate the information they need as quickly and easily as possible.

Layouts are represented as Storyboards.
Storyboards are single page mockups of all of the elements that belong on a page . While they don't represent visual design, they do indicate positioning and proportion.

Typical layout conventions on the web:
The vertical bar: The Discovery Channel, msnbc.com (notice # of clicks to access full content) and the more (comparitively) streamlined CNN interactive
and the horizontal bar: Barnes&Noble and Amazon

Disciplined layouts that are clean and interesting, and leverage obvious user behaviors: IHT, Spiegel, and the BBC portal

Rules on Navigation

1. Cues and clues must be easily learned (intuitive, clear)
What do you think about the "Web Pages That Suck" book authors' commentary on mystery meat navigation?
(But don't underestimate the joy of discovery: JOURNAL INFIME)

2. Remain consistent (colors, location on page, typeface color code, size, weight)

3. Give users feedback (color change, JavaScript, DHTML menu)

4. For icons, they must be intuitive and paired with text
(Use text and imagery, not just icons ­ words disambiguate icons and icons disambiguate words)
JetBlue does this very well

5. Contain an economy of action and time (streamlined)

6. Offer clear visual messages (vlink, link) ­ the user asks: have I been there before?

7. Have clear and understandable labels ­ clever names don't work

Forms of Navigation

Most Internet users locate information on a website using the search feature: Getty has a very intuitive and powerful search functionality.
Very innovative abstract search methods at the Hermitage museum website (QBIC searches powered by IBM)

Forrester Research says 85 percent of consumer sessions initiate at a search engine, and 30 percent of site traffic comes from search engines. Consumers usually only look through the first page of results.

Search spiders read the following when indewing sites:
title . meta tags . text at beginning of documents . embedded links .
word repetition . and the importance of Web destinations linked to a site

Google (the definitive leader in search technology) ranks pages according to how many people point to that page, and what that URL's rank is. (Explore Sinnzeug too.)

Navigation should be appropriate to the content - have fun at less rain's fish site, and notice the photography contact sheet metaphor used at Terra.

Visual menuing at slashdot's topic page.
Artandculture.com has multiple ways to navigate.
The Apartment sells the experience, definitely worth spending some time here.

Visit Coldwatercreek.com or eBay help for a good online chat with an operator, or find out about vReps (bots) at NativeMinds.

Navigate geographically at thinkquest.org.
See innovative, responsive navigation ideas at lo9ic.
Spatial navigation at Plumb Design Visual Thesaurus, The Crystal Web, and The Brain
And also on Mikkel McAlinden's site and on whatiswhat.

There are general assumptions that we make about users. Some users respond to an explanatory structure, others to an exploratory configuration. Designers often successfully utilize physical world words and concepts (breadcrumb trail and signposts) to used to describe the sense of place for the users online.

Tell users: where they are, what can they do, where can they go

Use the correct forms of relaying information in order to relay information properly:
Graphs: represents information about trends, changes, relationships.
Pictograms: succinct + immediate concepts or functions.
Illustrations: drawings and photographs bring an idea to life.
Text: where exact information is needed.

Design according to site’s content (appropriate, logical, intuitive design)
Establish a convention for visual and information system
Use color and screen logic consistently
Show a clear and consistent relationship between main and sub navigation.

Navigation: How and how many?
Provide redundant text navigation for users surfing with text only (and alt tags).
Follow sociologist's theory of channel capacity: give a user 4-7 primary options.
The designer's major objective is to highlight the most important information. The designer is the editor.

Studies show that users are more likely to click on a link if it is contextualized by non-linked text.
Never rely on the Back button as navigation - your site navigation should provide enough options and clues to the user so they don't use the browser buttons to navigate. (Incidentally, 40% of users rely on the Back button to navigate.)

Page titles should repeat the site name and distinguish that page from the others on the site and describe the page contents in under 10 words - Be brief and descriptive

Indicate currency of information - Add last-updated date as a comment in the HTML, or on the visible page.

Forrester attributes repeat visitors to:
High-quality content
Ease of use and quick download

Updated content (copy and visuals)
New offerings - set a timeline for changes (30 - 45 days), incentives, coupons
Community section/forum

Finally, build a Prototype. A prototype is like abbreviated functional build that explores a main function. Prototyping is a way to test your idea before building the entire piece. Studies show that low-fidelity prototypes encouraged better collaboration. Users are more likely to volunteer critical feedback when a prototype doesn't look well developed. Very "complete" prototypes may lead users to believe their critique is less valid; they often blame themselves for misunderstandings.

Examine how different user groups approach problems. User Test and validate your design decisions with a prototype before building out the whole site. Five to eight people will catch 80 percent of the problems. Ten to 12 people will catch 95 percent. From there, you are just getting the minor fixes.

Ergo labs glossary helps define basic terms in usability. It's a great reference. Additional resources for learning about current thinking and ideas in information and interaction design and methods: InfoDesign, University of Maryland CHARM, goodexperience.com, Aaron Marcus, SIGCHI, and Christopher Alexander's website on Pattern Language,



©1998-2004 www.valcasey.com