Upload
romeo
View
38
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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?