What is Site Architecture and What is UI Design?

Introduction...

Site Architecture, Information Architecture, Information Design, User Interface Design, Visual Design...All of the above

My experience as artist and designer

Organization-what did we do before site architecture?

From small to large [ www.rolo.com >> www.go.com ]

Good Design, Bad Design

Usability, User experience and Visual experience (dos v. windows, faucet handles)

We just want to get what we need...

Web experience suitable for its needs [ www.superbad.com ]

Site Definition and Planning

Mission Statement and Business Goals

Branding

• way site reflects the value propositions behind company brand
• color, typography, graphic elements and style as important as usability
• www.djsneak.com
• definition-how company defines its business, who are they
• differentiation-what makes the company special
• www.cnet.com

Audience-Nuts and Bolts

• www.webmonkey.com
• www.statmarket.com
• Size of monitors, dialup, t1 user, pda users, platform, 4.0, 3.0, dhtml, javascript, colors

Clients

Homework-Educate your client

Teams-Your new best pals

What kind of site are we talking about

Competitor site analysis-types of sites

• commerce [ www.amazon.com ]
• brochureware [ www.fdml.com ]
• application [www.bigstep.com]
• ASP-B2B [www.noosh.com]
• portal [ www.go.com ]
• intranet
• community [www.thedigs.com]
• information [ www.salon.com, www.cbsmarketwatch.com, www.alistapart.com ]
• entertainment [ www.ebay.com, www.sissyfight.com ]
• analysis of feature sets-search, personalization, chat, listserv, templated
• Ranking features in matrix format

Focus Groups and testing

• Really knowing the audience, does site work for beginners and advanced users?
• [ www.webvan.com, www.etrade.com ]

Content

What is going into site?

What is static, what is dynamic?

How is backend integration being handled?

How is content getting there?

How do we organize it?

Navigation

• primary, secondary, tertiary
• global/local

• [www.bluefly.com]
• design for fast reading & non reading (aka finding bathrooms in airport)
• information hierarchy
• labeling vernacular for easy access
• ways for user to talk back
• info above the fold
• multiple cues, clarity, consistency, buttons, html, gifs or links

Features?

• Functionality-engineers, programmers, databases
• Custom solutions or off the shelf
• The admin backend

User Flow

User Experience Scenario [ www.videogreetings.com ]

Site Map [ overall site map, user flow specific map, site map styles ]

User Flow docs [ doc page one, doc page 2]

User Pathways [user pathway chart]

Functionality spec site map

Static Prototype [vg prototype

Success? Usability Testing

Testing Models

Variations from the tests

Visual Design-Blueprint (adobe illustrator) and Comps (adobe photoshop)

References

Jakob Nielsen, Designing Web Usability

Richard Saul Wurman, Information Architects

JoAnn T. Hackos, Janice C. Redish, User and Task Analysis for Interface Design

www.webmonkey.com

www.cnet.com