Website Usability Website Usability By Group 1 : By Group 1 : Oge - - PowerPoint PPT Presentation

Website Usability Website Usability

By Group 1 : By Group 1 : Oge Onuoha Oge Onuoha Soju Mathew Soju Mathew So Hyun Kim So Hyun Kim Alexander Alexander Herm anow ski Herm anow ski Michael W illiam Curran Michael W illiam Curran

Problem Statement Problem Statement

• W hat is the standard for a

W hat is the standard for a w ebsite page ( w idth, length) ? w ebsite page ( w idth, length) ?

• How do you ( code w ise) restrict

How do you ( code w ise) restrict pages from changing size? pages from changing size?

Width and Length Width and Length

• Computer screens are typically smaller

Computer screens are typically smaller than most opened books or magazines. than most opened books or magazines.

• In academia and business are

In academia and business are 17 to 19 inches (43 to 48 cm) in size, 17 to 19 inches (43 to 48 cm) in size, 800 x 600 800 x 600-

• pixel screen (display)

pixel screen (display)

• Graphic "safe area" dimensions for layouts

Graphic "safe area" dimensions for layouts designed for 800 x 600 screens: designed for 800 x 600 screens: Maximum width = 760 pixels Maximum width = 760 pixels Maximum height = 410 pixels Maximum height = 410 pixels (visible without scrolling) (visible without scrolling)

Website Restriction Example: Website Restriction Example:

Mapquest Mapquest

Page Size Restriction Page Size Restriction

• Fixed vs. Flexible width table

Fixed vs. Flexible width table

• Table width:

Table width:

• will determine how much of the browser

will determine how much of the browser space (horizontally) will be used to display space (horizontally) will be used to display your table. your table.

• Depends largely on how its cells are

Depends largely on how its cells are defined defined

• Expand and collapse to accommodate the

Expand and collapse to accommodate the contents and also to fit the dimensions of contents and also to fit the dimensions of the viewer's browser window. the viewer's browser window.

Flexible Width Table Flexible Width Table

• Known as Relative, Variable width

Known as Relative, Variable width table. table.

• A relative table width is specified as

A relative table width is specified as a percentage of the width a percentage of the width eg) eg) < table width= "50% "> < table width= "50% ">

• Let table cells size themselves

Let table cells size themselves according to their contents and size according to their contents and size

• f the browser window.
• f the browser window.

Disadvantages Disadvantages

• You still can't anticipate exactly what

You still can't anticipate exactly what your page content will look like to a your page content will look like to a visitor. visitor.

• When the browser window gets too

When the browser window gets too narrow, your text and graphics in the narrow, your text and graphics in the various columns will suddenly be various columns will suddenly be misaligned. misaligned.

Fixed Width Table Fixed Width Table

• Where the cell width of the table is

Where the cell width of the table is specified in pixels. specified in pixels. eg) eg) < table width= "500"> < table width= "500">

• Restricts pages form changing size.

Restricts pages form changing size.

• If the resolution drops below the fixed

If the resolution drops below the fixed width assigned, the visitor would have to width assigned, the visitor would have to scroll horizontally. scroll horizontally.

• Pixels:

Pixels:

• sm allest logical unit for display.

sm allest logical unit for display.

Fixed Width Table Fixed Width Table

• Two technique:

Two technique: 1.

• 1. Defining cell widths with absolute

Defining cell widths with absolute values values

• To keep the tables from expanding to

To keep the tables from expanding to fill fill the window the window

2. 2.

Including an invisible image equal to Including an invisible image equal to the the width of the cell in each table cell. width of the cell in each table cell.

• To keep tables from collapsing when the

To keep tables from collapsing when the browser window is too small to accommodate browser window is too small to accommodate their dimensions their dimensions,

,

Fixed Width Table Fixed Width Table

• For precise layouts

For precise layouts

• For stable layouts

For stable layouts

means that:

• 1. You can fix the position of elements
• n the page.
• 2. Control typographic features such as

line length and spacing.

Fixed Width Table Fixed Width Table

• Dow nside

Dow nside: :

• On large display screens, a major

On large display screens, a major portion of screen is unused. portion of screen is unused.

• Generally speaking, if you want

Generally speaking, if you want greater control over how your site greater control over how your site looks then fixed tables might be a looks then fixed tables might be a better choice better choice

What is it? What is it?

• Usability

Usability m eans m eans that that users users can can easily easily perform perform the the tasks tasks associated associated w ith w ith using using or

• r navigating

navigating your your w eb w eb site. site.

(Assessing (Assessing Web Web Site Site Usability, Usability, Guenther) Guenther)

• Usability

Usability assesses assesses how how easy easy user user interfaces interfaces are are to to use.

• use. (

( Useit.com Useit.com ) )

• A

A usable usable W eb W eb interface interface is is accessible, accessible, appealing, appealing, consistent, consistent, clear, clear, sim ple, sim ple, navigable navigable and and forgiving forgiving of

• f user

user blunders. blunders.

( ( collectionscanada.ca collectionscanada.ca) )

Why use it? Why use it?

• People leave if…

People leave if…

• I f a w ebsite is difficult to use

I f a w ebsite is difficult to use

• I f the hom epage fails to clearly

I f the hom epage fails to clearly state w hat a com pany offers state w hat a com pany offers and w hat users can do on the and w hat users can do on the site site

• I f users get lost on a w ebsite

I f users get lost on a w ebsite

• I f a w ebsite's inform ation is

I f a w ebsite's inform ation is hard to read or doesn't answ er hard to read or doesn't answ er users' key questions users' key questions

When do you use it? When do you use it?

• We built it... but they didn’t come

We built it... but they didn’t come

• We want to get it right the first time

We want to get it right the first time

• Visitors come, they browse, but they don’t buy

Visitors come, they browse, but they don’t buy

• We have online self

We have online self-

• help, but our customers

help, but our customers keep calling keep calling

• Our customers say our site is unfriendly

Our customers say our site is unfriendly -

• but

but why? why?

• We want to expand and improve our site

We want to expand and improve our site -

• what

what new features do we add and in what order? new features do we add and in what order?

How do you use it? How do you use it?

• Site

Site W ide W ide

• Present

Present your your m essage m essage efficiently efficiently and and avoid avoid clutter.

• clutter. Every

Every elem ent elem ent of

• f your

your design design should should support support the the goal goal of

• f your

your m essage. m essage.

• Maintain

Maintain consistent consistent visual visual identity. identity.

• Use

Use either either plain plain-

• color

color backgrounds backgrounds or

• r extrem ely

extrem ely subtle subtle background background patterns. patterns.

• Use

Use navigation navigation elem ents elem ents consistently. consistently.

• Use

Use the the top top and and left left areas areas of

• f the

the page page for for navigation navigation and and id id entity. entity. Users Users are are com fortable com fortable and and fam iliar fam iliar w ith w ith this this design. design. I t I t also also clearly clearly and and consistently consistently separates separates navigation navigation from from content content so so that that users users know know w here w here to to find find each. each.

How do you use it? How do you use it?

• Page

Page

• Critical elements to identifying page contents

Critical elements to identifying page contents need to be visible in the image need to be visible in the image-

• safe area

safe area without scrolling without scrolling

• Avoid requiring the use of horizontal scroll

Avoid requiring the use of horizontal scroll

• bars. Keep the design from scrolling
• bars. Keep the design from scrolling

horizontally. horizontally.

• Provide persistent links to the home page and

Provide persistent links to the home page and to high to high-

• level site categories.

level site categories.

• All Web pages longer than two vertical screens

All Web pages longer than two vertical screens should have a jump button at the foot of the should have a jump button at the foot of the page. page.

How do you use it? How do you use it?

• Text

Text

• Create effective headings and place im portant

Create effective headings and place im portant inform ation first. inform ation first.

• Use labels that clearly indicate the function of

Use labels that clearly indicate the function of links. links.

• Use black text on w hite background w henever

Use black text on w hite background w henever possible for optim al legibility. possible for optim al legibility.

• Make sure text is in a printable color ( not

Make sure text is in a printable color ( not w hite) . w hite) .

• Design for default brow ser fonts

Design for default brow ser fonts

• W rite scannable text by using frequent sub

W rite scannable text by using frequent sub-

• headings, creating bulleted lists, and

headings, creating bulleted lists, and highlighting keyw ords highlighting keyw ords

• Draw attention to new or greatly changed

Draw attention to new or greatly changed content. content.

How do you use it? How do you use it?

• Graphics

Graphics

• Don't load your page up w ith

Don't load your page up w ith unnecessary graphical elem ents. unnecessary graphical elem ents.

• Anim ation is a visual distraction.

Anim ation is a visual distraction. Only use if it m akes a visual point Only use if it m akes a visual point about content. about content.

• I nform users of the content and

I nform users of the content and size of m edia objects. size of m edia objects.

• Encourage scrolling by splitting an

Encourage scrolling by splitting an im age at the fold. im age at the fold.

Current Issues: Current Issues: Top 10 Mistakes in Web Design Top 10 Mistakes in Web Design

• Bad search

Bad search

• PDF Files for Online Reading

PDF Files for Online Reading

• Not Changing the Color of Visited Links

Not Changing the Color of Visited Links

• Non

Non-

• Scannable

Scannable Text Text

• Fixed Font Size

Fixed Font Size

• Page Titles W ith Low Search Engine

Page Titles W ith Low Search Engine Visibility Visibility

• Anything That Looks Like an

Anything That Looks Like an Advertisem ent Advertisem ent

• Violating Design Conventions

Violating Design Conventions

• Opening New Brow ser W indow s

Opening New Brow ser W indow s

• Not Answ ering Users' Questions

Not Answ ering Users' Questions

Future trends Future trends

• Search Engine

Search Engine

• Advanced Graphics (Flash,

Advanced Graphics (Flash, Javascript Javascript , Perl, CGI, CSS, HTML and , Perl, CGI, CSS, HTML and (X)HTML) (X)HTML)

• Interactive Forms/ Email

Interactive Forms/ Email

Questions? Questions?

The End The End