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 Herm anow ski Herm anow ski Alexander 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- - pixel screen (display) pixel screen (display) 800 x 600 � 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) < table width= "50% "> < table width= "50% "> eg) � Let table cells size themselves Let table cells size themselves � according to their contents and size according to their contents and size of the browser window. of 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) < table width= "500"> eg) < 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. Defining cell widths with absolute Defining cell widths with absolute 1. values values - To keep the tables from expanding to - To keep the tables from expanding to fill fill the window the window Including an invisible image equal to the the Including an invisible image equal to 2. 2. 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 on 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 the the tasks tasks associated associated w ith w ith perform using or or navigating navigating your your w eb w eb site. site. using (Assessing Web Web Site Site Usability, Usability, Guenther) Guenther) (Assessing • Usability Usability assesses assesses how how easy easy user user • interfaces are are to to use. use. ( interfaces ( Useit.com Useit.com ) ) • A A usable usable W eb W eb interface interface is is accessible, accessible, • appealing, consistent, consistent, clear, clear, sim ple, sim ple, appealing, navigable and and forgiving forgiving of of user user blunders. blunders. navigable ( 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. Every Every elem ent elem ent of of your your design design should should clutter. support the the goal goal of of your your m essage. m essage. support • Maintain Maintain consistent consistent visual visual identity. identity. • • Use Use either either plain plain- - • color backgrounds backgrounds or or extrem ely extrem ely subtle subtle color background patterns. patterns. background • Use Use navigation navigation elem ents elem ents consistently. consistently. • Use the the top top and and left left areas areas of of the the page page for for navigation navigation and and id id Use � � entity. entity. Users are are com fortable com fortable and and fam iliar fam iliar w ith w ith this this design. design. Users I t also also clearly clearly and and consistently consistently separates separates navigation navigation I t from content content so so that that users users know know w here w here to to find find each. each. from

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- - safe area safe area need to be visible in the image 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- - level site categories. level site categories. to high • 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.