1 / 39

USABILITY OF WEB SITE DESIGN

USABILITY OF WEB SITE DESIGN. Magdalena Zalas. Contents. Usability ISO Standards Eye tracking Jakob Nilsen. Web design Page Layout Home page Content strategy Navigation Colors Few more information. What is the Usability.

lolita
Download Presentation

USABILITY OF WEB SITE DESIGN

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. USABILITY OF WEB SITE DESIGN Magdalena Zalas

  2. Contents • Usability • ISO Standards • Eye tracking • Jakob Nilsen • Web design • Page Layout • Home page • Content strategy • Navigation • Colors • Few more information USABILITY OF WEB SITE DESIGN

  3. What is the Usability USABILITY OF WEB SITE DESIGN

  4. "Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don't want to wait. And they don't want to learn how to use a home page. There's no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page—for a few seconds at most” Jakob Nielsen USABILITY OF WEB SITE DESIGN

  5. What is the Usability • Elegance and clarity • Easy user interfaces • Object is designed to make it for user: • Easier to learn • Efficiency of use • Memorability • Error frequency and severity • More satisfying to use USABILITY OF WEB SITE DESIGN

  6. What is the usability? • User-oriented not technology-oriented • Make users easy accomplish their tasks • Called User-Centered Design (UCD) USABILITY OF WEB SITE DESIGN

  7. Difference between usability testing and usability engineering • Usability testing • measurement of ease of use • evaluate a product by testing it on users • how real users use the system • Usability engineering (UE) • research and design process which ensures a product with good usability • making user-friendly interfaces USABILITY OF WEB SITE DESIGN

  8. Questions • Who are the users, what do they know, and what can they learn? • What do users want or need to do? • What is the general background of the users? • What is the context in which the user is working? • What has to be left to the machine? • Can user easily accomplish task in given time? • The disabled users can use it? USABILITY OF WEB SITE DESIGN

  9. ISO STANDARDS USABILITY OF WEB SITE DESIGN

  10. International Organization for Standardization • Founded on 23 February 1947 • seated in Geneva, Switzerland • Official language: English and French • 157 members • Member bodies(have voting rights) • Correspondent members(countries that do not have their own standards organization) • Subscriber members(countries with small economies) • ISO/IEC JTC 1 is Joint Technical Committee 1 of the ISO and the International Electrotechnical Commission (IEC) • deals with all matters of information technology USABILITY OF WEB SITE DESIGN

  11. ISO standards about usability • ISO 9126Software quality mode • In part about Quality Model of software • Usabilityis a set of attributes that bear on the effort needed for use, and on the individual assessment of such use, by a stated or implied set of users • Learnability • Understandability • Operability USABILITY OF WEB SITE DESIGN

  12. ISO standards about usability • ISO 9241 Ergonomics of Human System Interaction • parts 110(old 10) and 11–17 deal with usability aspects of software • [Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of user USABILITY OF WEB SITE DESIGN

  13. Eyetracking USABILITY OF WEB SITE DESIGN

  14. Eyetracking ASL Eye Track 6000 • Where are we looking? • An eye tracker • a device for measuring • eye positions • eye movements • Measure o fixation • small steps • Technology • Directly observation of eye • Invasive mechanic methods • Video of eye movement • Electrooculography • Photoelectric method USABILITY OF WEB SITE DESIGN

  15. Alfred Yarbus (1967) Pioneer ‘s study of saccadic (simultaneous movements of both eyes in the same direction) "is dependent not only to what is shown on the picture, but also on the problem facing the observer and the information that he hopes to gain from the picture." USABILITY OF WEB SITE DESIGN

  16. Eyetracking "heatmap" • How much users look at different parts of a Web page • Red areas- most often • Yellow areas- smaller fixation • Blue areas- very small fixation • Gray areas- no fixation • F-shaped • horizontal movement • second horizontal movement • vertical movement USABILITY OF WEB SITE DESIGN

  17. Ph.D. Jakob Nielsen • Ph.D. in human-computer interaction (Technical University of Denmark in Copenhagen) • "the guru of Web page usability" (The New York Times) • "the smartest person on the Web" (ZDNet AnchorDesk) • "the world's leading expert on user-friendly design" (Stuttgarter Zeitung, Germany) • founded the "discount usability engineering” • holds 79 United States patents how to make internet easier USABILITY OF WEB SITE DESIGN

  18. Web design USABILITY OF WEB SITE DESIGN

  19. Page Layout • Have no mess on your web site • Importan things should be on the top • The most importan things give on the top center • Allow user easy comparision of information • High-to-low level of importance the information USABILITY OF WEB SITE DESIGN

  20. Page Layout • Create a page no crowded by informations • Use consistent alignments • Use fluid layout • Avoid user mistakes • Not create an ilusion about top and end of the site • Content should be visible without scrolling • Limit white place on page • Use frames • Avoid serif fonts USABILITY OF WEB SITE DESIGN

  21. USABILITY OF WEB SITE DESIGN

  22. Home page • The most important page on web site (first impression) • Clearly communicates the site's purpose • Show all major options available on the page • Key to show the quality of the site • Should contain a limited amount of prose text USABILITY OF WEB SITE DESIGN

  23. Home page • Accessshould be easy from every place in the site • It is clearly main page • Limit length to one screenful • Inform user about page redesign • The panels should be narrow as well as clearly recognized USABILITY OF WEB SITE DESIGN

  24. USABILITY OF WEB SITE DESIGN

  25. Content strategy • How much information is optimal • Cost: how much time user spends to read article • Benefit: how much benefit units (value information) user get from article • Decision: do we want all or only the most important information USABILITY OF WEB SITE DESIGN

  26. Content Strategy Examples Short articles: 105 b.u. per hour Long articles: 167 b.u. per hour 2/3 short articles + 1/3 long articles: 181 b.u. per hour Short art:600words(3min), 7 b.units Long art: 1000 words(5min), 10 b.u. USABILITY OF WEB SITE DESIGN

  27. Navigation • Find and access information effectively and efficiently • On all pages should be navigation options • Create the same scheme of navigation for all pages • Make a list of contents on long pages • Make a feedback where user is in the page • Use a color clue what user done USABILITY OF WEB SITE DESIGN

  28. Navigation • The best place for navigation is in the left panel • Make tab labels with error-free selection possible • Keep navigation on one screenful • Use Appropriate Menu Types • sequential (one open next) • simultaneous (all are displayed) USABILITY OF WEB SITE DESIGN

  29. Navigation • Use site maps for Web sites with many pages • Help users select correct links (glosses) • Breadcrumbs allow user with complete the task quicker USABILITY OF WEB SITE DESIGN

  30. Sequential navigation Simultaneous navigation Breadcrumbs USABILITY OF WEB SITE DESIGN

  31. Colors • Glaringcolors distractattention • Too much elements with the same color can be irritate USABILITY OF WEB SITE DESIGN

  32. Colors meaning USABILITY OF WEB SITE DESIGN

  33. Few ideas • One color and hues • Two colors related but not similar • Mixed warm and cold colors • Use white background, dark letters and red color to show something important • Reduce colors to three • Use colors from yours graphics and pictures to make harmony USABILITY OF WEB SITE DESIGN

  34. Never Use so similar colors Use a colors which are almost identical on gray scale! Use a gradient which makes text inposible to read USABILITY OF WEB SITE DESIGN

  35. USABILITY OF WEB SITE DESIGN

  36. Few more information • The most importan image: logo • Introduce animation before begin • Thumbnail versions of image shorten time of downloading pages • Images can help to understand subject • Don’t use pictures like the background USABILITY OF WEB SITE DESIGN

  37. Few more information • Show the data graphicaly when user must monitor the changes in time • Use images that look like real-world items when appropriate • Images should have meaning USABILITY OF WEB SITE DESIGN

  38. Sources • http://www.useit.com • http://en.wikipedia.org • http://www.nethut.pl • http://www.usability.gov • http://www.e-gineer.com/v1/articles/web-writing-for-many-interest-levels.htm USABILITY OF WEB SITE DESIGN

  39. Thank you for your attention USABILITY OF WEB SITE DESIGN

More Related