250 likes | 395 Views
Interface Design II. JMA 462/562 TTH 4:30 – 5:45 College Hall 205. Development Applications. JMA462/562. Effects on interface design.
E N D
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: 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. Social Sites E-commerce Media Players
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.
Interface idioms Vocabulary of objects: Click to go to another screen where video will play. Actions: move mouse over circular area click left-mouse button, etc.
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.
Interface idioms Several idioms can mixed in one interface Animation, sliders, buttons, links, forms
Interface idioms Several idioms can mixed in one interface Animation, sliders, buttons, links, forms
Interface idioms Several idioms can mixed in one interface 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 Iterative Design Prototype Evaluate
User Centered Design Analyze/Design/Patterns Empathizing with users, understanding their needs, the tools they use, & their social/organizational context Iterative Design Prototype Evaluate
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) • 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