Transcript Document

Interface design
Multimedia and Web
Today’s Objectives
User-Center Design : Users | Tasks
 CSS

Project portfolio page
 Box model | Floats

User centered
design
User-Centered Design

Major activities:
Understand/specify the context of use
2. Specify user and organization requirements
3. Create prototypes
4. Evaluate designs with users against
requirements.
1.
(British Standards Institution 1998; Stone, Jarrett, Woodroffe,
& Minocha, 2005)
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.
www.usability.gov
SOURCE: http://www.usability.gov/methods/process.html
Planning: Goal
Setting
Plan
Setting Goals: IDD
Planning and Analysis
 Define the project/topic for which you are
going to create a Web site.
 Why is the Web site being developed? Or
What will the Web site accomplish?
 What services/features will users want?
 What are the primary goals of the Web
site?
Setting Goals
What value will the site provide to users?
Write a value proposition statement that
explains the site’s value in one sentence or
less.
 What do you want people to think of when
they think of your site?
 Do you want to be thought of as trustworthy
and reliable or fun and exciting?

Setting Goals

Who are the intended users? Summarize
their key characteristics.

What do you know about them (age,
computer expertise, connectivity,
disabilities, etc.) and their activities or
tasks.

Who are the secondary users?
Setting Goals

Why the current design (or approach) is
inappropriate, ineffective or inefficient for the
task(s) and the reasons why people would
benefit by switching to the interface you propose.

How do you plan to approach the design
problem? What methods, approaches, designs,
ideas, etc. do you have that will enable you to
improve the design.
Keep in mind…
You are not your users – you must learn from
them.
 Understand users, their tasks, their
environment, social context.
 Users are different (age, cultures, skills, etc)
 Users are the same (memory, etc).

Interface Design
Analyze
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.
Design Process: Discovery
Discovery: Requirements-definition
Assess needs

Design Exploration

Design Refinement

Production

understand client
expectations
determine project
scope
characteristics of
users & tasks
evaluate existing
practices & products
Iterative design process
The key:
 Good
interface = Involving users
Usability testing, focus group,
observations, etc.
If this was a Web site who would use it?
What if you have a family of 5?
What if you have special needs?
What if you needed it to transport the elderly?
Etc.
If this was a Web site who would use it?
If this was a Web site who would use it?
Users have diverse needs. Before
we build we must know something
about the people who will use the
thing.
What is User-Centered Design?
UCD seeks to answer questions about users
and their tasks and goals such as:



Who are the users of the 'thing'?
What are the users’ tasks and goals?
What are the users’ experience levels with this
thing, and things like it?
Discovery: Know the User
Requirements-definition

User Analysis: what do you need to know about the
users? To get a good interface you have to figure out
who is going to use it to do what.

Task Analysis: what are user’s goals and what tasks
do they perform to achieve those goals?

Environment analysis: where is the user going to
use the site? What is the user’s environment? What
effect does it have on task performance?
Discovery: Tasks
Identified a Need
(sell product online)
Identified user
characteristics
What are the Tasks?
Discovery: Tasks

Tasks analysis helps you understand what
your users do now and how they do it.

Provides ideas for what users can do on
your web site.
Discovery: Task Analysis
Goals, tasks, and actions
 Task list
 Task sequence
 Task hierarchies
 Observing and listening to users

Discovery: Task Analysis

You need $36 dollars

What are the tasks, to withdraw the money
from an ATM – from drive up to drive away
Discovery: Task Analysis
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Position car near ATM
Place foot on brake to stop car
Place car in park
Lower window
Locate ATM card
Position card and insert it * (what type of machine swipe or insert card)
Select language
Enter pin and press enter
Select withdraw
Enter amount and press enter (or press fast cash).
Confirm amount and press enter
Choose receipt?
Print receipt
Remove receipt
Discovery: Task Analysis

You are redesigning a Web site for a
College.

Primary audiences: Students, parents,
administrators, faculty, staff.
Discovery: Task Analysis

What are students needs and tasks?

What are parents needs and task?

Does it matter?
Discovery: Task Analysis

Students tasks – locating information
about:
 Academics,
classes, library, course
schedules, profs, academic support
 Recreational, sports, fraternities/sorority,
social events, social networking
 Purchases of books, computers, software,
media devices
 Student employment
Discovery: Task Analysis

Parent tasks – locating information about:
 Costs,
location, campus safety.
 Academic quality
 Living facilities
Discovery: Task Analysis

How do we identify different user needs
and their tasks?
 Observe
users while performing task
 Talk with potential users about task
 Look for similar model (e.g., how does
Amazon do it?)
 Examine job descriptions
 Personas
Persona

description of an ‘example’ user
 not

necessarily a real person
use as surrogate user
 what

would Betty think?
details matter
 makes
her ‘real’
example persona
Betty is 37 years old, She has been Warehouse Manager for five years
and worked for Simpkins Brothers Engineering for twelve years. She
didn’t go to university, but has studied in her evenings for a business
diploma. She has two children aged 15 and 7 and does not like to work
late. She did part of an introductory in-house computer course some
years ago, but it was interrupted when she was promoted and could no
longer afford to take the time. Her vision is perfect, but her right-hand
movement is slightly restricted following an industrial accident 3 years
ago. She is enthusiastic about her work and is happy to delegate
responsibility and take suggestions from her staff. However, she does
feel threatened by the introduction of yet another new computer
system (the third in her time at SBE).
Cascading Style
Sheets
CSS
Types of selectors
1.
HTML selector
h1 {color : red ;}
2.
Class selector
.highlight

h1.highlight
3.
Dependent classes
ID selector
#site_info
Classes

Classes (applies to more than one type of element –
several different styles for the same element.)
.mytext {font-family : Verdana; font-size : 1.5em;}
<p class=“mytext”>Hello World</p>
Combining Classes

Classes (applies to more than one type of element –
several different styles for the same element.)
.mytext {font-family : Verdana; font-size : 1.5em;}
.myColor { background-color : blue;}
<p class=“mytext myColor”>Hello World</p>
Dependent Classes
.highlight {background-color : green;}
h1.highlight {text-transform : uppercase;}
/*if highlight class is used with h1, it has
green background color and uppercase*/
<h1 class="highlight">Hello world!</h1>
ID Selector

id Selector

Use to apply a CSS
rule to ONE element
on a Web page.
<style type="text/css">
#new { color: #FF0000;
font-size:2em;
font-style: italic;
}
</style>

Configure with #idname

The sample creates an id called “new” with red,
large, italic text.

To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>
40
Types of selectors
1.
HTML selector
h1 {color : red ;}
2.
Class selector
.highlight

h1.highlight
Dependent classes
3.
ID selector
4.
Styling in context
#site_info
Styling in context

Style in context based on HTML, classes,
or ID of parent elements.

Nested elements inside one another
Styling in context
Citation text is blue
 cite { color : blue; }

h1 cite {color : blue; }
 If a citation is in a level 1 header, its text is
blue


<h1><cite>Hello world</cite></h1>
Styling in context

#brand p.intro cite {color : blue; }

If a citation is in a <p> with intro class that
is within brand ID, the text is blue
<div id="brand">
<p class="intro">.
..above allows <cite>Firefox, Chrome, and Safari</cite> to resize
...</p>
</div>
Child selectors

p > cite {color : blue; }
If the cite tag is in a paragraph and does
not have any other parent tags, it color is
red
 <p><cite>…Firefox, Chrome…</cite></p>

Siblings

p + cite {color : blue; }

If a citataion is next to a <p> tag, its color
is blue.

<p>hello world…</p><cite>Joe Doe</cite>