Interface design Multimedia and Web. Today’s Objectives User-Center Design : Users | Tasks CSS Project portfolio page Box model | Floats.

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>