Interface Design IIJMA 462/562TTH 4:30 – 5:45College Hall 205

Development Applications

JMA462/562

Effects on interface design

IBM's Web site, most popular feature was Search function, "because people couldn't figure out how to navigate the site," said Second most popular feature was the "help" button, because the search technology was so ineffective (Carol Moore, IBM's vice president for Internet operations, 1999).

•After re-design, • use of the "help" button decreased 84%• sales increased 400 %.

Source: http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce

Effects on interface design

• Today users’ expectations are high—if interface isn’t easy to use “out of the box,” users won’t think well of it.

• Impatient or frustrated give up and move on very easily - to a competitor.

• Cost of building a mediocre interface is higher than it used to be.

Effects on the craft of interface design• First - Proliferation of interface idioms:

• recognizable types or styles of interfaces, • with own vocabulary of objects, actions, and visuals.

Media Players

Social Sites

E-commerce

Recognizable types or styles of interfaces, with own vocabulary of objects, actions, and visuals.

What are the vocabulary, actions, visuals here?

Recognizable types or styles of interfaces, with own vocabulary of objects, actions, and visuals.

Recognizable types or styles of interfaces, with own vocabulary of objects, actions, and visuals.

There are specific patterns related to these doors.

Vocabulary of objects: Click to go to another screen where video will play.

Actions: move mouse over circular area click left-mouse button, etc.

Interface idioms

User Centered Design

Analyze/Design/Patterns

Prototype

Evaluate

Effects on the craft of interface design• Second effect: Loosening of rules for building interfaces from

these idioms.

• Now several idioms can mixed in one interface or parts of some controls mixed up with parts of other controls.

Several idioms can mixed in one interface

Interface idioms

Animation, sliders, buttons, links, forms

Several idioms can mixed in one interface

Interface idioms

Animation, sliders, buttons, links, forms

Several idioms can mixed in one interface

Interface idioms

Web has taught users to relax expectations with respect to graphics and interactivity.

It’s OK to break the old style guide rules, as long as users can figure out what you’re doing - and this can be hard.

Web has taught users to relax expectations with respect to graphics and interactivity.

It’s OK to break the old style guide rules, as long as users can figure out what you’re doing - and this can be hard.

Effects on the craft of interface design• Today interface designers have countless choices, which

can make design difficult.

• Interfaces are amalgamations of visual and information design, tools, and functionality that afford:• unparalleled connections among content, services,

and people,• multimodal human-computer interactions (e.g., touch,

speech) through a single point-of-contact across many different device types.

Effects on the craft of interface design

• How do we make interfaces that are easy to use?

• What characteristics do these interfaces have?

Effects on the craft of interface design• “Applications that are easy to use are designed to be familiar.”

• “Familiar” doesn’t mean that the interface is identical to some genre-defining product (e.g., Word, Photoshop, Mac OS, or a Walkman).

Patterns

If parts of interface are recognizable enough and the relationships among parts are clear, people can apply their previous knowledge to a novel interface and figure it out.

Tidwell, 2011• Design Patterns can be helpful here.• They capture a common structure, such as a list layout—

without being too concrete on the details, which gives you flexibility to be creative.

To Use Patterns

• Know what users expect.• Choose carefully from your toolbox of idioms • Choose patterns carefully, then you can put

together something that “feels familiar” while remaining original.

User Centered Design

Analyze/Design/Patterns

Prototype

Evaluate

Itera

tive D

esig

nIt

era

tive D

esig

n

User Centered Design

Analyze/Design/Patterns

Prototype

Evaluate

Itera

tive D

esig

nIt

era

tive D

esig

n

Empathizing with users, understanding their needs, the tools they use, & their social/organizational context

Empathizing with users, understanding their needs, the tools they use, & their social/organizational context

PatternsSo what are design patterns?

Patterns

• Design patterns communicate common design problems and solutions:• how to create navigation bars for finding

relevant content…• how to create a shopping cart that

supports check out…• how to make sites where people return

& buy…

Patterns

• Not too general & not too specific– use a solution “a million times over, without ever

doing it the same way twice”

• Design patterns are a shared language – a language for “building and planning towns,

neighborhoods, houses, gardens, and rooms.”

Patterns• Patterns come from successful examples

• successful sites have users familiar with their paradigms (e.g., Yahoo)

• Techniques that work well across many sites (e.g., shopping carts)

• Not too general (principles) & not too specific (guidelines)• designer specialize to their needs

• Patterns let designers focus on the hard, unique problems to their design situation