kuniform

Introduction to the course and to each other. We will discuss your expectations for the course and your prior experience with the Internet and computer technology. There will be a broad overview of the course, the course materials and computer access, and the SAIC facilities followed by one on one sessions with each student.

An overview of Information Architecture, Graphic Design, Interaction Design, and Usability. What is meant by these disciplines, and how do they help us craft new media artifacts?

In class exercise: heuristic evaluation

Choose a web site

• Yahoo!
• Joshua Davis
• Jesse James Garrett
• Del.icio.us
• Your own website.
• Your email client, or Yahoo! Hotmail, Gmail, etc.
• Try to evaluate a site you do not often use or have heard about from a friend.

• Methodologies
• Information Architecture
• Interaction Design
• Usability
• Personalities
• Adaptive Path
• Don Norman
• Jakob Nielsen
• Cooper
• Tools
• Visio, Omnigraffle
• Inspiration

Navigation, interaction, task completion. Fitts' Law: Evaluate an application below using Tog's First Principles

Choose an interactive web app

• Google Maps
• Kayak Travel site
• a9.com
• Chicago crime
• Backpack it

• Tog's First Principles
• The CHARM of HCI
• Task-Centered User Interface Design
• Other tools: Illustrator, photoshop, flash

The key principles of graphic design and the mechanics behind image formats.

We will discuss our web projects (i.e.--what it is you would like to build) and how to build it. We will review Adaptive Path's Project Brief, a fairly generic project overview I found, and a project profiler I have used in the past.

We will have two in class exercises, the first will be to fill out the project profiler, and the second will be to design a business card using Robin William's Design Principles

Today we will be reviewing our project profile documents and will discuss two design issues: documentation of our system, and the design grid.

Methods

• processes— rigorous, creative, empathic approaches to user modeling and problem-solving
• principles— a set of general and situational rules of thumb for organizing and specifying products that exhibit a human-centered form and behavior
• patterns— a set of generalizable solutions driven by persona and business goals, shaped by design principles, and compiled in the course of our practice

Our process flows and sitemap documents must communicate systems that exhibit this behavior as well as behaving this way themselves. The principles and methods of interaction design approximate those found in industrial design, as well. Examine features of node systems and site map generation tools, etc. Talk about particular stencils for mind-mapping or develop a stencil, Omnigraffle, Inspiration site maps, etc., etc. Discuss strategies in create process flows and sitemaps.

What do patterns mean for us?

• Consistency in behavior and principles in both system design and documentation
• Same types of interactions get same types of UI treatment
• Stress heuristics of usability and accessibility in system design
• Stress legibility and readability in documentation design
• Talking Tufte: principles of small multiples, and macro/micro representation

Personas

Cooper’s 4 truisms:

• There is no “Elastic User”
• Being the victim of a problem doesn’t mean you know the solution
• Designing with equal weight for all users leads to a weak interface
• Real users (an audience of one) are often quirky. Personas smooth out the rough edges

Make many personas, and as you work with the customer, you will discover the primary persona. (Multiple models, Maximize stakeholder investment) Dial in to the level of fidelity you need now. You can always add metadata like education, emotional profiles, etc., later. (Embrace change, incremental change) Often times the work can provide insight, but you need to turn it into results. Update personas over time, keep them current as you learn about your users and their demands change.

Key question: what research are you doing to inform the personas?

Site maps and process flows: primary issues

• Legibility—is there a legend explaining symbols? Can symbols be intuitive enough to forego a legend?
• Readability—is the right amount of detail modeled in each view for efficient communication of the process or flow?
• Transferability—does it transfer well to other mediums (projection, color or b&w print, web, etc.)

Exercise: in Illustrator, Photoshop, Omnigraffle, or using pencil and paper sketch out a site map and a design template for your project.

Read chapters 6 and 7 in Don't Make Me Think.

• Persona resources
• Persona creation explained
• Leacock's deliverables list
• Designing within a grid system
• Overview of web design issues
• Khoi Vinh's subtraction

The grid

• Can use the Golden Mean, but any arbitary grid system will work.
• A good design should have both tension and balance. Good design engages the observer as the designer intends. It communicates the product's purpose, personality, and brand.
• Static composition - tension is created by centering design elements in the picture plane. Elements are balanced around this center.
• Dynamic composition - tension is created by placing elements around the center. Elements are often left unbalanced, creating more visual tension.

Gestalt Principles: the unified whole

• similarity, continuation, figure ground, closure, proximity, symmetry

Bertin's Visual Variables

Navigation and wayfinding

• Wickens (1992) and Thorndyke (1980)
• Landmark knowledge - we use landmarks to find our way and mark our path. Visual cues such as titles, labels, link names and graphics are powerful landmarks.
• Route knowledge - navigation from landmark to landmark. On the web, visual history and the back button.
• Survey knowledge - the mental model the user forms of the site. Web equivalent: a site map

Wireframes

Determine placement on the grid of the following elements:

• Content - what can be found
• Features - what can be done
• Organization - what should be seen first, second and third
• Search: have the search prominently displayed

• Gestalt principles
• Gestalt principles 2
• 10 most popular newspaper fonts
• Original newspaper fonts articles

Today, we'll discuss a bit about fonts and colors, but mostly we'll work on our wireframes and designing our sites.

random

• perception of use
• Simple design

typography

• Introduction to typography
• Five simple steps to better typography
• Installed fonts by platform
• An essay on type
• Great fonts for web2.0
• 8 cliches of web2.0

color theory

• visible spectrum
• color theory
• the prism
• additive color
• subtractive color
• color theory tutorial
• Poynter institute color tutorial
• html color
• Color pickers
• web2.0 color palette