Transcript Document

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
Identify as many sets of any 3 numbers from 1 to 9 that sum
to 15.
Here is another way to present the problem
4
3
8
9
5
1
2
7
6
Defining ID
What makes an
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
Waterfall Life Cycle Model
Requirement
Definition
System &
Software Design
Implementation
Unit Testing
Integration &
System Testing
Operation &
Maintenance
Waterfall Life Cycle Model
Requirement
Definition
User
involvement
System &
Software Design
Implementation
Unit Testing
Integration &
System Testing
• Sequential phases
• Each phase complete before the next
Operation &
Maintenance
Iterative design process
e.g., Agile model
User Testing
Design
Prototyping
Iterative design process
Design
• Involve users throughout the process
• Process is highly iterative
User Testing
Prototyping
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.
Source: Lynch & Horton,
http://webstyleguide.com/wsg3/1-process/7-development-process.html
User centered
design
Common approaches
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)
www.usability.gov
SOURCE: http://www.usability.gov/methods/process.html
www.usability.gov
SOURCE: http://www.usability.gov/methods/process.html
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 Design
Seeks 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
The Site
Development
Process
Lynch & Horton
Source: Lynch & Horton,
http://webstyleguide.com/wsg3/1-process/7-development-process.html
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.
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
<link rel="styleSheet" type"text/css" href="styles.css“ />
page2.htm
page1.htm
index.htm
• Make changes
page3.htmfrom a single document
• Changes multiple documents
Style.css
page7.htm
page6.htm
page4.htm
page5.htm
Rules, Selectors,
Declarations
CSS
The Rule
h1 {color : #c0c0c0;}
Rule
The Rule
Rule
h1 {color : #c0c0c0;}
Selector
Declaration
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
Subject
Verb
The level 2 header’s text is blue.
Adjective
Object
The Declaration
Subject
Verb = “to be”
h2 { color : blue;}
Object
Adjective
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

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>
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*/
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>
64
CSS Typography

Five properties control font characteristics
font-family
font-style
font-weight
font-size
font-family
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 “ “
The font-size Property
em or percentage font sizes – these can be easily
enlarged in all browsers by users
 Use

Ex: http://webstyleguide.com/wsg3/1-process/6-types-of-sites.html
Leading
line-height
Use
property specifies leading
percentage (150%), ratio (1.5) or ems
(1.5em) to specify leading relative to font
size
Alignment
text-align property can take values left,
right, center or justify

body { text-align: left; }
p.display { text-align: center; }
CSS Guidelines

Review the design of the page
 Configure
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
Wrapper
Header
Side Bar Left
Footer
Main Content