• Horde User Interface Design

[[toc]]

Notes and potential procedures for good design. http://www.lukew.com/ff/ and http://designingwebinterfaces.com/ are the source for many of these

++ Patterns/component libraries

• http://designingwebinterfaces.com/15-common-components

• http://designingwebinterfaces.com/essential_controls

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html (for cross-browser buttons)

• http://designingwebinterfaces.com/screencasts-added-to-flickr (390 screencasts)

++ Design Consideration

http://www.lukew.com/ff/entry.asp?754

• Pattern Recognition: allows us to identify relationships within information. (the data).

• Story Telling: gives us a way to organize data into something meaningful by focusing on a big idea and supporting messages (the synthesis).

• Visual Hierarchy: gives us a way to tell the story effectively (the means).

• Empathy: allows us to make the story memorable and impactful (the meaning).

• Visually associate dependent elements: http://www.lukew.com/ff/entry.asp?764

++ Local factors

http://www.lukew.com/ff/entry.asp?752

• Connection speed (broadband penetration)

• Index size (scale of local language content available)

• Task behaviors (bargaining in shopping)

• Infrastructure (transportation, electricity)

• Language characteristics (left to right, right to left, alphabetic vs. non, length)

• Desktop penetration

• Mobile penetration

• Literacy rates

• Demographics (age skew)

• Cultural symbols (icon semiotics)

• Visual conventions (color associations)

• Work conventions

• Cultural dimensions

• Expected visual density

++ Sketches

http://www.lukew.com/ff/entry.asp?747

In some organization, developers are doing design. How can we deal with this?

Parallel design: have several developers attempt to solve the problem at the same time. Parallel design means we get to hear from everybody

5 Sketches: saturate the design space, mash up the ideas, get to a pretty good solution, analyze it, and deliver a written statement

http://www.lukew.com/ff/entry.asp?749

We are taught to think that drawing is about making things look realistic.

But drawing is really about getting ideas down on a page. Think of it as another vocabulary that enables discussion.

http://www.lukew.com/ff/entry.asp?748

Clients want great experiences and they want them fast

Traditionally designers use wireframes to explore designs but they only focus on a single page of the experience at a time.

We need a process to explore ideas without getting bogged down in unnecessary detail. It needs to reveal the best of multiple options and gets everyone’s input and buy-in.

Sketching: explore and find lots of ideas (exploratory sketching) or gain convergence (refinement sketching).

http://www.lukew.com/ff/entry.asp?750

• Use quick sketches in the early stages of a project

• Ensure you do lots of sketches so many ideas come forward

• Discuss and edit the sketches collaboratively

• Build consensus and buy-in through this process

++ Swimlanes

http://www.lukew.com/ff/entry.asp?745

UX swimlanes outline a bird’s eye view of a story, scenario, or component for sponsors, designers, businesses, and engineers.