Week 4 - A User Centred Design
Download as PPT, PDF1 like250 views
The document discusses usability and user-centered design in web development. It defines usability as how easy, efficient, and satisfying a system is to use. It notes people expect websites to be as straightforward to use as road signs and will get frustrated if they can't easily find what they want. The document outlines Jakob Nielsen's top 10 usability problems, including poor fonts/contrast, non-standard links, flash content, bad search functions, and more. It stresses the importance of considering different types of users and their needs when designing websites.
Week 4 - A User Centred Design
- 1. IMD09117 and IMD09118 Web Design and Development Usability and User Centred Design.
- 2. Reminder of the 5 planes model Last week we looked at the strategy plane. We discussed understanding both the client’s and the users point of view. We considered how a website was built from 3 main perspectives. This week we will discuss what is meant by Usabillity and User Centred Design.
- 3. What is Usability? “ Usability is a quality attribute relating to how easy something is to use. More specifically, it refers to how quickly people can learn to use something, how efficient they are while using it, how memorable it is, how error-prone it is, and how much users like using it. If people can’t or won’t use a feature, it might as well not exist.” Nielsen &Loranger (2006) This image is copyright free and was distributed to promote World Usability Day.
- 4. People want things to work There is nothing more frustrating than not being able to use something that should be simple. Images courtesy of baddesigns.com
- 5. Don’t Make Me Think
- 6. Usability is about making objects easy and comfortable to use for anyone. It’s next to traffic lights. There’s a picture of a man waiting and another of a man walking. There are special surfaces on the pavement and markings on the road. There are often crash barriers either side. You probably have previous experience of road crossings. We know how to work it because there’s only 1 button. If you don’t read English, you can still understand it’s a crossing by visual cues. Although it helps if you read English, pelican crossings are reasonably straightforward to use. Picture courtesy of HMSO
- 7. Tolerance 10 years ago, Web sites were new and exciting. As the world wide web has developed, it has become more mundane and is seen as a tool, an everyday object.
- 8. Frustration People expect Websites to be as easy to understand as a Pelican crossing. Not being able to get information they want or buy something quickly and easily makes people feel stupid. If you make people feel stupid, they will just walk away.
- 9. Access If we look back to our first lecture we were trying to understand what a website is. If we consider the example of a road crossing, we can imagine the user on one side of the road and the information, service or entertainment they want on the other side of the road.
- 10. Access Not all users want the same information in the same way at the same time so we can’t just think about who uses our Website. We need to consider many other factors.
- 11. Factors to consider Who is using the site? What do they want from the site? How long are they going to want to spend on the site? When are they using the site? How often will they visit the site?
- 12. Cinema Website Pair up and consider this exercise. You have been asked to develop a website for an independent local cinema. List the different questions that someone might use the website to answer. How long do you think people will be prepared to spend finding this information?
- 13. Jakob Nielsen Jakob Nielsen is one of the world’s foremost authorities in Interaction Design. Nielsen has been at the heart of the usability debate for many years. His website www.useit.com is the first resource for usability. Picture from .net magazine 157 dec 2006 used with permission
- 14. Main problems in Usability In the .net article from December 2006 Nielsen highlighted the primary problems people have using a site. We will look at the top ten.
- 15. Nielsen’s Top Ten These are from an online survey conducted by Jakob Nielsen. Legibility problems. Poor fonts. Fonts that are too small. Poor contrast between text and background
- 16. Non standard links Links are one of the most important things people use on the Web. Make them clear and obvious. Differentiate between visited and unvisited links. Make it obvious where users will go if they use the link.
- 17. Google is usable Make it obvious where users will go if they use the link. Make them clear and obvious. Differentiate between visited and unvisited links.
- 18. Nielsen’s Top Ten continued Flash This is a contentious issue. Content not written for the web Content should be short scannable and to the point. Bad search If your site has a search tool, it is worth paying for quality.
- 19. Nielsen’s Top Ten continued Browser incompatibility Don’t design sites for only one browser on one platform. Cumbersome forms No contact information Frozen layouts with fixed widths Pop-ups
- 20. The title of a book by Steve Krug. Good web design doesn’t usually get commented or congratulated. A well designed site does what is expected and simply becomes a tool for the user. Don’t Make Me Think
Editor's Notes
- #3: This is an opportunity to discuss the model again. This is also an opportunity to revise any content students found difficult last week.
- #4: Firstly, apologies for including a large quote but it sums the ideas up well. Give the class time to read it and then ask them if they’ve ever left a website really quickly because it was too confusing. Ask them how they search and how much time they usually spend on a site.
- #5: These images are classic examples. The question being which knob controls which stove plate. The example on the right shows how we can easily and immediately understand how to use the cooker.
- #6: This example from Designing Interactions by Bill Moggridge is an adapted TV control for an elderly parent. Ask students if they’ve ever tried to teach someone to set up a video recorder or similar device. Ask them to discuss how they would explain it to an elderly person.
- #7: The pelican crossing is a good every day example of usability. The bullet points are designed to appear on clicking, allowing for class contribution. Discuss foreign visitors understanding that this is where you cross. Ask students if they’ve been to foreign countries and if they’ve found using road crossings fairly easy. Particularly highlight the last part “You probably have previous experience of road crossings” as the idea of familiarity is important in designing interactions.
- #8: Discuss how familiarity has led us to have higher expectations of the web and our experience of it. Users will no longer put up with bad design.
- #9: Discuss with students that feeling of stupidity. When a person finds technology difficult, they tend to blame themselves. People tend to assume that they have got it wrong when it’s usually the interface that has caused the problem.
- #10: Have a brief discussion on this issue, explain that we will be looking into navigation in further detail later in the course but the important concept to together is that we are facilitating access to information.
- #11: Ask the students what other factors they think may be important, the next slide is a bullet pointed list.
- #12: Who is using – we have discussed the importance of knowing your user. What do they want – contact information? Film reviews? Prices? How long are they going to want to spend – Do they just want quick information or are they going to look around and enjoy themselves? When are they using the site – Are they at work, at home, putting children to bed? How often - are they coming once only, weekly, daily?- ask students if they have sites they visit daily and why. Once again these factors are not mutually exclusive but they are some important things to consider.
- #13: This exercise is designed to create a continuity break, this should take roughly 5 minutes. Students should be getting an idea of Website functionality from this. Some answers are What’s on tonight? Are you showing this particular film? Are there any films on that I might like? (reviews) Where are you? Do you have disabled access? Where can I park? Can I pre-book? How much does it cost?
- #14: This is a perfect opportunity to look at www.useit.com ask the students why they think it’s so plain. The answer is that Nielsen has designed his site mainly as a hypertext system. As the only thing he’s selling is usability concepts and his consultancy he doesn’t need to make it beautiful.
- #15: The layout of this chart has been criticised but the important thing to point out is that findability is the No.1 problem, closely followed by page design. A pdf of the article should be available on the WebCT site for this course for students to download and read at their leisure.
- #16: This is one of the primary mistakes of inexperienced designers. This is your opportunity to explain that just because there are 3,000 fonts available doesn’t mean that they are all fit to use. There will be a detailed session on typography later in the course.
- #17: The next slide is a screenshot of a google search result which demonstrates these points. In the article Nielsen also mentions not using Javascript on links to add fancy techniques, such as drop down menus and not to open new windows except for pdf files or similar.
- #18: This is an opportunity to discuss these points with a good example. Explain that blue for unvisited and purple for visited links is an old convention dating back to the early days of hyperlinks. It is no longer necessary to use these colours but users are familiar with them. The same is true for underlining links. You may also want to demonstrate that the link itself describes it’s destination and that it is rare to see professional sites using “click here.”
- #19: Flash: can be used to great effect but is generally used to distract. Flash has issues of taking time to download (long download times mean people leave) and complex Flash sites tend to have complicated interfaces. Nielsen argues that if your site content isn’t compelling enough, you should rewrite it. Nielsen’s site is not the most visually appealing site in the world. The debate will run and run. http://www.billyharveymusic.com/ This is an excellent example of a site that uses Flash to great effect and would not be possible without it. Make sure you play a track by choosing the link on the left. Content will be dealt with in detail in another session.
- #20: Cumbersome forms: if your students going to include a form then they need to think carefully about it. No contact information: Often, users simply want the telephone number or address, it should be extremely quick to find. Also, if the company doesn’t publish an address, users are less likely to trust them enough to give them money. Frozen layouts with fixed widths: We will be discussing style sheets and flexible layouts in a later session. Pop-ups in a separate survey scored as the number one hated advertising technique.
- #21: Don’t make me think sums up the problem for users. Most of the time people don’t want to have to work out how to get what they want. They just want it. Now.