Interface design

Multimedia and Web

Today’s Objectives

Introduce User-Center Design Guidelines CSS

Project portfolio page

Defining ID

Terms

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.

Communication Channel – something that mediates between the user and the computer.

Controls input and output - translator

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.

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

Must be concerned with whether an interface is good, bad, or poor, etc. in relation to usability.

User Centered Design

Model & approaches

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

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

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html

The Site Development Process Model

Lynch & Horton

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html

The Site Development Process

Lynch & Horton

• Broad input & participation in beginning.

• Narrow focused team at the end.

• Necessary, to finish your site on time and on budget.

User centered design

Common approaches

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)

SOURCE: http://www.usability.gov/methods/process.html

www.usability.gov

SOURCE: http://www.usability.gov/methods/process.html

www.usability.gov

User-Centered Design Major 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.

User-Centered Design

Major Steps

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.

User-Centered DesignSeeks 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?

User-Centered Design What hardware, software, and browsers do the users

have? 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? What do users expect from this Web site? How do users expect this interface will work?

Site Development Process(Lynch & Horton)

Site definition and planning Information architecture Site design Site construction Site marketing Tracking, evaluation, and maintenance

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html

The Site Development Process

Lynch & Horton

The first step to design web site is to define your goals.

Careful planning and a clear purpose are the keys to success in building web sites, particularly when working with a development team.

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Site Development Process(Lynch & Horton)

Step 1:

Gather development team, analyze needs/goals, and work through development process to refine plans.

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Site Development Process(Lynch & Horton)

Step 2: Create charter document:

what you intend to do and why, what technology and content you’ll need, how long will process take, how much you will spend, and how you will assess the results of your efforts.

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Site Development Process(Lynch & Horton)

Charter document is crucial to creating a successful site:

Charter document is blueprint and will help keep project focused on the agreed-on goals and deliverables.

Site Development Process(Lynch & Horton)

Design guidelines

Home: Communicating the purpose

Design guides• Try to accommodate a majority (95%) of all users.

• As of Jan. 2008, 48% of users had screen resolution set at 1024x768; and 38% had it higher.

• As of Jan. 2009, 36% of users had screen resolution set at 1024x768; and 57% had it higher.

• 1024 x 768 is still one of the most popular screen resolutions in 2009 (others 1280 x 800, 1280 x 1024, 1680 x 1050 & 1440 x 900)

• Ensure all testing of sites is done using the most common screen resolutions.

Source Research-Based Web Design & Usability Guidelines US Government Usability Guidelines;http://www.w3schools.com/

Display Resolution (Jan 2008)

Source: W3Schools:, Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp

Display Resolution Jan. 2009

Source: W3Schools: Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp

Browsers (July 2008)

Source: W3Schools:, Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp

Browser Use July 2009

Source: W3Schools: Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp

Design guidelines: Home

Many people have screen resolutions of 1024X768. In time, 1024X768 will be the smallest.

Width: design pages at roughly 984 pixels for 1024X768 resolution.

Width: design pages at roughly 760 pixels for 800X600 resolution.

Design guidelines: Home

Show company name or logo in a reasonable size and location on the home page.

Include a tag line. Indicate what your site does that is valuable

from users’ perspectives. Give prominence to the highest priority tasks

(e.g., purchase books, check stock quotes, etc). Make the home page distinct from other pages.

Design guidelines

Liquid design rather than frozen. Page length: roughly two full screens.

Don’t cram everything on one page. Make sure important features are “above

the fold”

Design guidelines

Logo – upper left Logo is a link to the home page on all

pages except the home page. Logo size roughly 74px X 74px

Design guidelines

Search – upper portion of screen – upper right

Search on every page Search box 35 characters wide

Cascading Style Sheets

CSS

Cascading Style Sheets

HTML was not meant to specify an exact appearance for your Web pages.

CSS (Cascading Style Sheets) allows you to specify more information about the appearance of elements on a Web page.

Zen Garden

Structure and style

Structure document with html<ul><ol><dl><h1..6><p><div><span>

Focus on content and organization first. All documents should be readable without

CSS.

Structure and style

Use styles to attached to block in document (<h1>, <p>, <div>, <span>…)

Use classes for repeated styles

Use IDs to style a specific section

Cascading Style Sheets

A style sheet is a set of one or more rules that apply to an HTML document.

h1 { color : red; }

Cascading Style Sheets

Why use styles?

Cascading Style Sheets

Update the look of a Web site by changing a single document.

Keep content separate from styling.

Greater typography and page layout control

Easier site maintenance

External Styles

page4.htm

page6.htmpage7.htm

page2.htmpage3.htmpage1.htm

index.htm Style.cssStyle.css

page5.htm

• Make changes from a single document• Changes multiple documents

• Make changes from a single document• Changes multiple documents

<link rel="styleSheet" type"text/css" href="styles.css“ />

Rules, Selectors, Declarations

CSS

The Rule

h1 {color : #c0c0c0;}

Rule

The Rule

h1 {color : #c0c0c0;}

Selector Declaration

Rule

The Declaration

Has two parts separated by a colon:

Property - that part before the colon

Value - that part after the colon

h1 {color : #c0c0c0; }

The Declaration

Curly brackets { } help distinguish between selector, property, and value

Colon separates property and values

Semicolon separates declarations

h1 {color : #c0c0c0;}

The Declaration

The level 2 header’s text is blue.

Subject

Object

Verb

Adjective

The Declaration

Subject

Object

Verb = “to be”

Adjective

h2 { color : blue;}

Combining Rules

h1 { color : red; } h2 { color : red; }

h3 { color : red; }

h1, h2, h3 { color : red; }

Types of Style Sheets Inline Styles <h1 style="color:#ff0000">Heading text is red</h1>

Embedded Styles<style type ="text/css">

body { background-color: #000000; color: #FFFFFF;} </style>

External Styles (browser waits for styles before page)<link rel=“stylesheet” type=“text/css” href=“mystyle.css />

Imported Styles (styles applied after page renders)@import url(Layout_A.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>

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*/

64

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>

Five properties control font characteristics

font-familyfont-stylefont-weightfont-size

CSS Typography

Value is a list of font names in decreasing order of preference

p { font-family: "The Sans", Verdana, Helvetica, sans-serif; }

Names separated by a space should be in “ “

font-family

The font-size Property

Use em or percentage font sizes – these can be easily enlarged in all browsers by users Ex: http://webstyleguide.com/wsg3/1-process/6-types-of-sites.html

line-height property specifies leading

Use percentage (150%), ratio (1.5) or ems (1.5em) to specify leading relative to font size

Leading

text-align property can take values left, right, center or justify

body { text-align: left; } p.display { text-align: center; }

Alignment

CSS Guidelines

Review the design of the pageConfigure global font and color properties

for the body selector Identify typical elements (such as <h1>,

<h3>, and so on) and declare style rules for these if needed.

Identify page areas such as logo, navigation, footer, and so on – configure an appropriate class or id for each.

CSS Guidelines

Create a prototype page that contains most of the elements you plan to use and test.Once your design is set – move styles to an

external .css file

Planning and testing are important activities when designing a Web site

<div id=“wrapper”>

<div id=“header”> </div

<div id=“sideBarLeft”> </div>

<div id=”mainContent”> </div>

<div id=“footer”> </div>

</div>

Box Model

Header

Side Bar Left Main Content

Footer

Wrapper