Interface Design II JMA 462/562 TTH 4:30 – 5:45 College 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:

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.

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.

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 Iterative Design

User Centered Design Analyze/Design/Patterns Prototype Evaluate Iterative Design Empathizing with users, understanding their needs, the tools they use, & their social/organizational context

Patterns So 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) 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