interface design multimedia and web. today’s objectives user-center design : users | tasks css...
TRANSCRIPT
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:1. Understand/specify the context of use
2. Specify user and organization requirements
3. Create prototypes
4. Evaluate designs with users against requirements.
(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.
SOURCE: http://www.usability.gov/methods/process.html
www.usability.gov
Planning: Goal Setting
Plan
Setting Goals: IDDPlanning 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
Assess needs understand client
expectations determine project
scope characteristics of
users & tasks evaluate existing
practices & products
Production
Design Refinement
Design Exploration
Discovery: Requirements-definition
Iterative design process
The key:
Good interface = Involving usersUsability 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.
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?
What is User-Centered Design?
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: Know the User
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 Analysis1. Position car near ATM
2. Place foot on brake to stop car
3. Place car in park
4. Lower window
5. Locate ATM card
6. Position card and insert it * (what type of machine swipe or insert card)
7. Select language
8. Enter pin and press enter
9. Select withdraw
10. Enter amount and press enter (or press fast cash).
11. Confirm amount and press enter
12. Choose receipt?
13. Print receipt
14. 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 supportRecreational, sports, fraternities/sorority, social
events, social networkingPurchases of books, computers, software,
media devicesStudent employment
Discovery: Task Analysis
Parent tasks – locating information about:Costs, location, campus safety.Academic qualityLiving facilities
Discovery: Task Analysis
How do we identify different user needs and their tasks?Observe users while performing task Talk with potential users about taskLook for similar model (e.g., how does Amazon
do it?)Examine job descriptionsPersonas
Persona
description of an ‘example’ usernot necessarily a real person
use as surrogate userwhat would Betty think?
details mattermakes 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 Dependent classes h1.highlight
3. 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>
40
ID Selector id Selector
Use to apply a CSSrule to ONE element on a Web page.
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>
<style type="text/css">#new { color: #FF0000;
font-size:2em; font-style: italic;
}</style>
Types of selectors
1. HTML selector h1 {color : red ;}
2. Class selector .highlight Dependent classes h1.highlight
3. ID selector #site_info
4. Styling in context
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>