Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lecture 9 Usability Orignal


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

Lecture 9 Usability Orignal

  1. 1. Lecture 9: Usability Identifying the Good, the Bad and the Ugly. SFDV2001 Web Development
  2. 2. But first: Clickers You should all now have a clicker - a bright orange remote control. You are going to use these remote controls to answer questions in lectures. This means you can test your knowledge and we know when to spend more time on a concept. When I present a question, you aim your clicker at a receiver and press the button on the remote which corresponds to the answer you think is correct. Easy! Let’s try it.
  3. 3. What is usability? Usability is a quality used to refer to an interface’s ease of use. Usability is about ensuring that something you create is usable. Usable not by you, but by the intended audience. Why should we care about usability? Because if you don’t people won’t want to use your site. Remember there are millions of other web sites to use and they are all just a few clicks away.
  4. 4. The San Jose Police Force installed a new dispatch system in its patrol cars. Officers claim the system is too complex and difficult to use. A non-web example: Many of these “usability problems” are just old people not coping with technology. Younger people have no problems coping. Right? Wrong! Studies shows that teenagers are less web-savvy than their parents.
  5. 5. Accessibility is about measures you can take to make your pages easier to use for people with disabilities. Usability is about enhancing the experience for all users. Design is used rather openly with regard to web pages and people often really mean development (your textbook is a classic case). Usability, accessibility, design… what’s the difference? Usability Accessibility Design Development
  6. 6. <ul><li>Pay close attention to how you feel when you use a web page. </li></ul><ul><ul><li>What makes you feel frustrated or confused? </li></ul></ul><ul><ul><li>What makes your visit to a site a good one? </li></ul></ul><ul><li>Expectations for different kinds of sites vary: </li></ul><ul><ul><li>Personal </li></ul></ul><ul><ul><li>Commercial </li></ul></ul><ul><ul><li>Clubs and societies </li></ul></ul>Creating successful web pages depends on your ability to critically analyse pages that you create and encounter.
  7. 7. When we click on a result from our query we normally don’t know what we will be confronted with. One of the first questions we may ask ourselves upon arrival is: What is this about? First Impressions: Often when we want to find information on the web, we use a search engine to find a list of sites that possibly contain the information we are looking for. You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed. - Vincent Flanders ( Web Pages that Suck )
  8. 8. <ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>Some examples: <ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>Those who don’t get it: Those who do get it:
  9. 9. A (very) few companies can get away with not being explicit: But it wouldn’t hurt for them to say who they are and what they do. A product or company may be familiar in one particular culture, but the potential audience for web pages is world wide.
  10. 10. Content Quality content is vital. Your site needs to contain things of use or interest to those who visit. For repeat visitors you need to regularly provide fresh content. <ul><li>Ultimately, users visit your website for its content. Everything else is just the backdrop. </li></ul><ul><li>Jakob Nielsen ( ) </li></ul>
  11. 11. <ul><li>Problems occur when: </li></ul><ul><ul><ul><li>Initial enthusiasm for a website fades. </li></ul></ul></ul><ul><ul><ul><li>Company pays for development only, not maintenance. </li></ul></ul></ul><ul><li>Out of date </li></ul><ul><ul><li>For many sites the “freshness” of their content is key. </li></ul></ul><ul><li>Unfinished </li></ul><ul><ul><ul><li>Poorly planned. </li></ul></ul></ul><ul><ul><ul><li>Enthusiasm lost. </li></ul></ul></ul><ul><ul><ul><li>The dreaded “under construction” page. </li></ul></ul></ul>
  12. 12. <ul><li>Appropriate titles - [change examples below as required] </li></ul><ul><ul><ul><li>Used by both people and search engines. </li></ul></ul></ul><ul><ul><ul><li>Used as default bookmark names in many browsers. </li></ul></ul></ul><ul><ul><ul><li>Will be read out of context. </li></ul></ul></ul><ul><ul><ul><li>Should help distinguish pages from each other. </li></ul></ul></ul>
  13. 13. <ul><li>Writing for the web </li></ul><ul><li>Text should be: </li></ul><ul><ul><li>Simple </li></ul></ul><ul><ul><li>Clear </li></ul></ul><ul><ul><li>Short </li></ul></ul><ul><li>Avoid jargon & “geek speak”. </li></ul><ul><li>Check spelling and grammar, names and dates, etc. </li></ul><ul><li>Make important information easy to find </li></ul><ul><ul><li>Contact information - email, phone, address </li></ul></ul><ul><ul><li>Store location </li></ul></ul><ul><ul><li>Open hours </li></ul></ul>
  14. 14. <ul><li>Tiny text </li></ul><ul><li>Poor contrast </li></ul><ul><li>Inconsistency </li></ul><ul><li>Horizontal scrolling </li></ul><ul><li>Odd Behavior </li></ul>Appearance Problems
  15. 15. Backgrounds Flashing things Entrance pages Flash Intros Be careful with: Avoid: Music that starts up without warning Pop-up windows Required plug-ins
  16. 16. Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. -Tim Berners-Lee in Technology Review, July 1996 “ The site is best viewed in Internet Explorer because I am too lazy  to test it in anything else.” “ We can not be bothered to validate our HTML or look at the page in another browser.” Browser requirements
  17. 17. Your pages will not look the same in every browser. But they can be usable in every browser. [Change images as needed] The web isn’t like print
  18. 18. <ul><li>Planning - The key phase in any project. </li></ul><ul><ul><li>What is the purpose of your web site? </li></ul></ul><ul><ul><li>Who is your target audience? </li></ul></ul><ul><ul><li>What information will you present on your site? </li></ul></ul><ul><ul><li>How will your site be structured? </li></ul></ul>Creation process Plan first and code later. Measure twice and cut once.
  19. 19. <ul><li>Construction </li></ul><ul><ul><li>Construct and test a template page before continuing with the rest of the site. </li></ul></ul><ul><li>Evaluation </li></ul><ul><ul><li>Repeated throughout the creation of a web site. Never a one-off event. </li></ul></ul><ul><ul><li>Test, test some more, test again. </li></ul></ul>
  20. 20. It's easy to make things difficult, but it's difficult to make things easy. Learn the rules so you know how to break them properly. - Dali Lama
  21. 21. Recommended sites: Dey Alexander (user experience design specialist) Jakob Nielsen’s website Vincent Flanders’ Web Pages That Suck Further reading: Don’t Make Me Think by Steve Krug Web Bloopers by Jeff Johnson