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:

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 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 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?

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 Analysis 1. 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 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 selectorh1 {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;} Hello World

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;} Hello World

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*/ Hello world!

40 ID Selector id Selector  Use to apply a CSS rule 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: This is text is red, large, and in italics #new { color: #FF0000; font-size:2em; font-style: italic; }

Types of selectors 1. HTML selectorh1 {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 Hello world

Styling in context #brand p.intro cite {color : blue; } If a citation is in a with intro class that is within brand ID, the text is blue...above allows Firefox, Chrome, and Safari to resize...

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 …Firefox, Chrome…

Siblings p + cite {color : blue; } If a citataion is next to a tag, its color is blue. hello world… Joe Doe