Interface design

Interface design

Multimedia and Web

Today’s Objectives

Defined User Interface Design Introduce User-Center Design Guidelines

Project portfolio page - Check Web accounts

IS IT EASY TO DESIGN INTERFACES?

Website examples

Let’s look at a few websites.

Design interfaces: Examples

Should be able to look at a home page and figure out what the site is about within a few seconds.

http://www.marshill.org/

http://marshillglobal.com/

Design interfaces: Examples

http://www.fedex.com/us/office/index.html (Mystery meat)

http://www.microsoft.com/germany/msdn/400differences/

http://www.etsy.com/color.php

http://www.juliegarwood.com/

Navigation isn’t just a feature of a web site, it is the web site, in the same way that the building, the shelves, and the cash registers are Sears. Without it, there’s no there there.

—Steve Krug

Design interfaces: Examples

All web navigation must answer these questions: Where am I?What’s here?Where have I been?Where can I go next?Where's the Home Page?What’s most important?

Design interfaces: Examples

http://www.iit.edu/arch/

Conventional:• Box• Label• Button Search or Go

Proximity to Pull-down suggests search functions in a similar manner

Usually:• Box• Label• Button Search of Go

Proximity to Pull-down suggests search functions in a similar manner

Use expected conventions – deviating from them can be problematic.

Design interfaces: Examples

http://NBA.com

Clickable Logo

Navigation

ADs

Search

Link to content

Breaks up flow

Defining ID

Terms

Defining ID “Whenever new technology is introduced into

society, there must be a counterbalancing human response - high touch- or the technology is rejected.”—John Naisbit - Megatrends - 1982

Defining ID The capacity for perception depends on

the amount, the kind, and the availability of past experiences....

We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley

http://www.webstyleguide.com/interface/index.html

Defining ID –Attention scarcity Often designers of information systems wrongly

perceive a design problem as information scarcity instead of attention scarcity.

They build systems that excel at supplying more and more information but what is needed are systems that filter out unimportant information. (Herbert Simon, 1996).

Defining ID –Attention scarcity

Attention is an important way to measure the success of a message.

Attention scarcity - a serious concern for organizations using the Web for information distribution.

Defining ID – Evolution of ID

With personal computers during the 80s and 90s, users’ tolerance for hard-to-use software began to decrease.

People had higher expectations of the software running on their computers than they had for software running on the corporate mainframe.

The need for improved interfaces…

Defining ID – Evolution of ID

From command prompts

What does the command line prompt afford?

What does Windows afford?

Defining ID – Evolution of ID

To more graphic user interactions

GUI – Graphical user interface

What does a menu afford?

Defining ID

An interface is a representation of a problem/taskDisplay/presentationOperations

A well-designed interface can transform a task, making it much simpler

Defining ID

Source: Norman, D. (2002). The Design of Everyday Things. P.24.

Defining ID

Source: Norman, D. (2002). The Design of Everyday Things. P.24.

Mapping

Titanic Exhibit

ControlVideo Windows

Direct Mapping

Defining ID

One approach to present a problem:

Identify as many sets of any 3 numbers from 1 to 9 that sum to 15.

e.g., 1, 9, 5 is one set because 1+9+5 = 15

Defining ID

1

2

34

5

67

8

9

Here is another way to present the problem

Identify as many sets of any 3 numbers from 1 to 9 that sum to 15.

Human computer interaction

HCI

Usability

Systems engineering

Computer programming

Anthropology

Graphic design

Algorithms and programming

Interface design

Cognitive Psychology

Defining ID

HCI is the study of how humans interact with computer systems.

When users interact with a computer system they do so through an interface.

Defining ID User interface (UI): computer-mediated means

to facilitate communication between human and an artifact.

User Interface (UI) - means by which humans interact with a computer to fulfill a purpose.

The term user experience (UX) recognizes that users have experiences that have been orchestrated by designers.

User input

System Output

User interface

UnderlyingHardware, Software,Interaction devices

Defining ID

Communication Channel – something that mediates between the user and the computer

Controls input and output - translatorUser says/does something Interface translates it into computer languageComputer does something Interface translates into user language

Users don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design.

Lynch & Hortonhttp://www.webstyleguide.com/wsg3/4-interface-design/index.html

Graphic user interface (GUI) comprises:

•interaction metaphors, images, and concepts used to convey function and meaning on the screen.

•detailed visual characteristics of components of the interface, and

•the functional sequence of interactions.

Lynch & Hortonhttp://www.webstyleguide.com/wsg3/4-interface-design/index.html

Some ID professional terms?

interaction designers - people involved in the design of all the interactive aspects of a product

usability engineers - people who focus on evaluating products, using usability methods and principles

web designers - people who develop and create the visual design of websites, such as layouts

information architects - people who come up with ideas of how to plan and structure interactive products

user experience designers - people who do all the above but who may also carry out field studies to inform the design of products

Defining ID

What makes an What makes an interface good?interface good?

Defining ID

What is a good interface?A good ID encourages an easy, natural, and

engaging interaction between users and system.

BUT…

Defining ID

Easy, natural, good, bad, and engaging are subjective.

We need to be concerned with whether a user interface is good, bad, or poor, etc. in relation to usability.

Can our users use it effectively.

Defining ID

What’s usability?… the extent to which a product can be used

by specified users to achieve specified goals with effectiveness.

(BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

Some problems with bad UI design

User frustrationReduced productivityIncreased costsLost salesLower efficiencyJeopardized safetyEtc.

What should we do?

Understand human behavior and apply this information to the user interface design.

Employ consistency placements that have become the standards in website design.

Use expected conventions – deviating from them can be problematic.

User Centered Design

Introduction

What is User-Centered Design?

Places the person (as opposed to the 'thing') at the center.

Focuses on cognitive factors (such as perception, memory, learning, problem-solving, etc.) as they impact interactions.

http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

What is User-Centered Design?

To improve a system’s usability, UCD strives to understand: users of the system tasks environment (organizational, social, and

physical)

What is User-Centered Design?

Four main principles:1. Active involvement of users

2. Appropriate allocation of function between user and system

3. Iteration of design solution

4. Multidisciplinary design teams

(BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

What is User-Centered Design?

Four main activities:1. Understand/specify the context of use

2. Specify user and organization requirements

3. Create prototypes

4. Evaluate designs with users against requirements.

(BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

SOURCE: http://www.usability.gov/methods/process.html

RequirementDefinition

System &Software Design

ImplementationUnit Testing

Integration &System Testing

Operation & Maintenance

Waterfall Life Cycle Model

RequirementDefinition

System &Software Design

ImplementationUnit Testing

Integration &System Testing

Operation & Maintenance

Waterfall Life Cycle Model

User involvement

• Sequential phases• Each phase complete before the next

Iterative design process

User Testing

Design

Prototyping

e.g., Agile model

Iterative design process

User Testing

Design

Prototyping

• Involve users throughout the process• Process is highly iterative

Iterative design process Steps

1. Requirements-definition - client gives developers information about functionality and requirements.

2. Establish design for the project.3. Develop prototypes that reflect the emerging design, using

the programming language or development environment.4. Submit prototypes to client for feedback and modifications.5. Revise prototypes to reflect the client’s changes.6. Repeat steps 3 and 5 for additional part of the system.

What is User-Centered Design?UCD seeks to answer questions about users

and their tasks and goals such as: Who are the users of this 'thing'? What are the users’ tasks and goals? What are the users’ experience levels with this

thing, and things like it? How can the design of this ‘thing’ facilitate users'

cognitive processes?

What is User-Centered Design? What hardware, software, and browsers do the users

have? What are the users’ preferred learning styles? How much

training, if any, will the users receive? What relevant knowledge and skills do the users already

possess? What functions do the users need from this interface? How

do they currently perform these tasks? Why do the users currently perform these tasks the way they do?

What information might the users need and in what form do they need it?

What do users expect from this Web site? How do users expect this interface will work?