interface design multimedia and web. today’s objectives layouts & css positioning introduce...

Interface design

Multimedia and Web

Today’s Objectives

Layouts & CSS Positioning Introduce User-Center Design Design Activity

CSS Positioning

<div id=“wrapper”>

<div id=“banner”> </div

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

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

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

</div>

Positioning: Document flow

1. BANNER

2. NAVIGATION

3. CONTENT

1.BANNER

2 3.CONTENT

FLOAT LEFT

L

Normal Flow

1. BANNER

2. NAVIGATION

3. CONTENT

1.BANNER

23.CONTENT

FLOAT RIGHT

R

Normal Flow

Positioning

CSS position property lets you control how and where a web browser displays elements.

Four types of positioning:AbsoluteRelativeFixedStatic

Absolute Positioning

Absolute : determine element’s location by left, right, top, or bottom position in pixels, ems, or percentages.

Move out of the normal flow of the page as determined by the HTML.

Detached from document flow. Elements fill-in the space left by an absolutely positioned element.

Absolute Positioning

Absolute Positioning

AP depends on positioning of other elements.

AP elements placed relative to the boundaries of closest positioned ancestor.

Absolute Positioning

Tag positioned relative to browser if it has absolute position and is not inside any other tag with absolute, relative, or fixed positioning.

Tag positioned relative to edges of another element if it’s inside another tag with absolute, relative, or fixed positioning.

Relative positioning

Relative. Element placed relative to its current position in the normal document flow.

Other elements do NOT fill in the space left in the document flow.

Relative positioning

A benefit of relative positioning is to set a new point of reference for absolutely positioned elements that are nested inside it.

Relative positioning creates a positioning context for nested tags.

Fixed Positioning

Element is locked into place on the screen.

When scrolling, fixed elements remain onscreen.

Useful for creating a fixed sidebar.

Static Positioning

Normal positioning method – what an element appears in the normal document flow.

Setting Positioning Values

Any of the valid CSS measurements—pixels, ems, percentages, etc. can be used.

You can also use negative values for positioning.

Setting Positioning Values

Position element from the top and left edges of window:

#banner { position: absolute;

left: 100px;

top: 50px;

width: 760px;}

Layouts

Layouts Fixed Width - regardless of browser window’s

width, page content’s width remains the same.

Liquid – layout adjusts to fit the browser’s width.

Elastic. Fixed width with type size flexibility. Define page width using em. An em changes size when browser’s font size changes, page width based on the browser’s base font size.

Review | Defining ID

Attention scarcity

Often designers of systems wrongly perceive a design problem as information scarcity instead of attention scarcity.

…what is needed are systems that filter out unimportant information (Herbert Simon, 1996).

Need to filter out the unimportant

Most Important?

Filter out the unimportant by:SizeShapeProximity

Most Important?

Defining Interface Design Computer-mediated means to facilitate

communication between human and an artifact.

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

Goal, tasks, etc.

Make call, get money,create graphics, make purchase, etc…IN

TE

RF

AC

E

Interface

Between the person and the tasks he/she needs to perform is an Interface – 2-way communication.

TasksPerson

Defining ID

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.

Task orientation

Task orientation

Is it usable?Effective?Efficient?Enjoyable?

DefinitionsSix main qualities of a successful user interface:

usefulness: are user’s needs satisfied by the interface functionality?

learnability: how easy is it for the user to fulfill basic tasks when using the system for the first time?

efficiency: after the user knows the interface, how fast is s/he able to accomplish the given tasks?

ease of memorization: when the user returns to the interface after a while, how easily does s/he find the various functions again?

reliability: is the interface conceived so user makes as few mistakes as possible?

user-friendliness : do users like using the interface?

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.

Looks at user actions/activity.

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.

UCD – major activities

What is involved in the process

1. Identifying needs, establishing requirements for the user experience (understand the problem and your users)

2.Developing alternative designs to meet needs

3.Building interactive prototypes that can be communicated and assessed

4.Evaluating what is being built throughout the process and the user experience it offers

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?

What are the classes like, do they have what I want to major in, what activities are there, etc.

Costs, will she be safe, will she be able to get a job, how good are the professors, etc.

Do you think Lauren’s picture is on the site, how good is this school, she’s in the theater department, etc.

I need to find information about grants and research, what electronic resources does the library have, etc.

User-Centered DesignSeeks to answer questions

What hardware and software do the users have?

What relevant knowledge and skills do users already have?

What functions do users need from this interface?

How do they currently perform these tasks?

Why do users currently perform 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 processes

Examples

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/specifications document:

what you intend to do and why, what technology and content, how long will process take, how much you will spend, and how will you 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)

Development process

Teague (2009):

1. Plan site

2. Build site

3. Deploy site

4. Iterate the process

Plan site

1. Know the problem and users – critical!!!

2. Make sketches

3. Define site structure –

4. Decide page flowFixed width/fluid heightEtc.

Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Information Architecture

Plan site

3. Make wireframesHelp in planning structure of pagesServe as blueprints for developmentShould include placement and measurement

of elements in pixelsWireframe Example

Plan site

Visual compositions (comps) Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.

Build

Cutting ChromeUse background imagesTransparent png (Example)CSS spritesPhotoshop/Illustrator, etc.

Build

Prototype | show interactivityDefine markup structureCreate CSS | program

Organize CSS Programming

Deploy

Alpha – site not released Beta – site made available to public – not

promoted.

Iterations

Validator

http://jigsaw.w3.org/css-validator/

  http://validator.w3.org/