SlideShare a Scribd company logo
1 of 20
IMD09117 and IMD09118  Web Design and Development Usability and User Centred Design.
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.
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.
People want things to work ,[object Object],Images courtesy of baddesigns.com
Don’t Make Me Think
Usability is about making objects easy and  comfortable to use for anyone. ,[object Object],[object Object],[object Object],[object Object],[object Object],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
Tolerance ,[object Object]
Frustration ,[object Object],[object Object],[object Object]
Access ,[object Object]
Access ,[object Object],[object Object]
Factors to consider ,[object Object],[object Object],[object Object],[object Object],[object Object]
Cinema Website ,[object Object],[object Object],[object Object],[object Object]
Jakob Nielsen ,[object Object],[object Object],[object Object],Picture from .net magazine 157 dec 2006 used with permission
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.
Nielsen’s Top Ten ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Non standard links ,[object Object],[object Object],[object Object],[object Object]
Google is usable ,[object Object],Make them clear and obvious. Differentiate between visited and unvisited links.
Nielsen’s Top Ten continued ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Nielsen’s Top Ten continued ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],Don’t Make Me Think

More Related Content

What's hot

10 Common Usability Mistakes
10 Common Usability Mistakes10 Common Usability Mistakes
10 Common Usability Mistakes
Emagination ®
 
CRO - Do beautiful sites convert better
CRO - Do beautiful sites convert betterCRO - Do beautiful sites convert better
CRO - Do beautiful sites convert better
ryan-webb
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
wendyr1974
 
Carl week 5 dont make me think pp
Carl week 5 dont make me think ppCarl week 5 dont make me think pp
Carl week 5 dont make me think pp
wendyr1974
 

What's hot (18)

Designing For Your Mom
Designing For Your MomDesigning For Your Mom
Designing For Your Mom
 
Hit the ground running - Top tips to immediately improve your user experience 
Hit the ground running - Top tips to immediately improve your user experience Hit the ground running - Top tips to immediately improve your user experience 
Hit the ground running - Top tips to immediately improve your user experience 
 
10 Common Usability Mistakes
10 Common Usability Mistakes10 Common Usability Mistakes
10 Common Usability Mistakes
 
How to improve your web content
How to improve your web contentHow to improve your web content
How to improve your web content
 
Finding weaknesses and increasing sales
Finding weaknesses and increasing salesFinding weaknesses and increasing sales
Finding weaknesses and increasing sales
 
Learning to Be Lean (LDS.org Homepage Redesign Case Study)
Learning to Be Lean (LDS.org Homepage Redesign Case Study)Learning to Be Lean (LDS.org Homepage Redesign Case Study)
Learning to Be Lean (LDS.org Homepage Redesign Case Study)
 
8 Critical Usability Tips Slideshare Post
8 Critical Usability Tips Slideshare Post8 Critical Usability Tips Slideshare Post
8 Critical Usability Tips Slideshare Post
 
You Are Not The User: Viewing Your Website Through Your Client's Eyes
You Are Not The User: Viewing Your Website Through Your Client's EyesYou Are Not The User: Viewing Your Website Through Your Client's Eyes
You Are Not The User: Viewing Your Website Through Your Client's Eyes
 
CRO - Do beautiful sites convert better
CRO - Do beautiful sites convert betterCRO - Do beautiful sites convert better
CRO - Do beautiful sites convert better
 
How to get a great website
How to get a great websiteHow to get a great website
How to get a great website
 
Best UX Quotes!
Best UX Quotes!Best UX Quotes!
Best UX Quotes!
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
 
Week 5 Using The Social Web For Social Change - Elluminate (#bgimgt566sx)
Week 5 Using The Social Web For Social Change - Elluminate (#bgimgt566sx)Week 5 Using The Social Web For Social Change - Elluminate (#bgimgt566sx)
Week 5 Using The Social Web For Social Change - Elluminate (#bgimgt566sx)
 
2019-CertiFUNcation-UX-relationship_matters
2019-CertiFUNcation-UX-relationship_matters2019-CertiFUNcation-UX-relationship_matters
2019-CertiFUNcation-UX-relationship_matters
 
Persuasion through Page Architecture with Nancy Webb
Persuasion through Page Architecture with Nancy WebbPersuasion through Page Architecture with Nancy Webb
Persuasion through Page Architecture with Nancy Webb
 
Carl week 5 dont make me think pp
Carl week 5 dont make me think ppCarl week 5 dont make me think pp
Carl week 5 dont make me think pp
 
iMedia October Breakthrough Summit - Launch Pad Day: "Flipping the Tablet Me...
iMedia October Breakthrough Summit - Launch Pad Day:  "Flipping the Tablet Me...iMedia October Breakthrough Summit - Launch Pad Day:  "Flipping the Tablet Me...
iMedia October Breakthrough Summit - Launch Pad Day: "Flipping the Tablet Me...
 
Digital copywriting
Digital copywriting Digital copywriting
Digital copywriting
 

Similar to Week 4 - A User Centred Design

Many people can intuitively categorize a website as good or bad,.docx
Many people can intuitively categorize a website as good or bad,.docxMany people can intuitively categorize a website as good or bad,.docx
Many people can intuitively categorize a website as good or bad,.docx
healdkathaleen
 
Design Basics for Nashville Software School (full pres)
Design Basics for Nashville Software School (full pres)Design Basics for Nashville Software School (full pres)
Design Basics for Nashville Software School (full pres)
Susan Culkin
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
sirferds
 
Information Design
Information DesignInformation Design
Information Design
Graeme Smith
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
teaguese
 

Similar to Week 4 - A User Centred Design (20)

Lecture 9 Usability Orignal
Lecture 9 Usability OrignalLecture 9 Usability Orignal
Lecture 9 Usability Orignal
 
Many people can intuitively categorize a website as good or bad,.docx
Many people can intuitively categorize a website as good or bad,.docxMany people can intuitively categorize a website as good or bad,.docx
Many people can intuitively categorize a website as good or bad,.docx
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
 
Design Basics for Nashville Software School (full pres)
Design Basics for Nashville Software School (full pres)Design Basics for Nashville Software School (full pres)
Design Basics for Nashville Software School (full pres)
 
Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Review
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
20 Website 'Must Haves'
20 Website 'Must Haves'20 Website 'Must Haves'
20 Website 'Must Haves'
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux design
 
Information Design
Information DesignInformation Design
Information Design
 
From Zero to Hero
From Zero to HeroFrom Zero to Hero
From Zero to Hero
 
Don’t Just Build Pretty Websites — UX in the Real World
Don’t Just Build Pretty Websites — UX in the Real WorldDon’t Just Build Pretty Websites — UX in the Real World
Don’t Just Build Pretty Websites — UX in the Real World
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web design
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
guide3_webwork
guide3_webworkguide3_webwork
guide3_webwork
 
The Top 10 things that UX people get obsessed about
The Top 10 things that UX people get obsessed aboutThe Top 10 things that UX people get obsessed about
The Top 10 things that UX people get obsessed about
 
UX Usability Heuristics
UX Usability HeuristicsUX Usability Heuristics
UX Usability Heuristics
 
Website Changes Over the Years
Website Changes Over the YearsWebsite Changes Over the Years
Website Changes Over the Years
 

More from Graeme Smith (20)

Project Management - An Introductiuon
Project Management - An IntroductiuonProject Management - An Introductiuon
Project Management - An Introductiuon
 
Intro to the unit
Intro to the unitIntro to the unit
Intro to the unit
 
The CSS Box Model
The CSS Box ModelThe CSS Box Model
The CSS Box Model
 
The art of presentations
The art of presentationsThe art of presentations
The art of presentations
 
Typography, A Presentation
Typography, A PresentationTypography, A Presentation
Typography, A Presentation
 
Flip Book
Flip BookFlip Book
Flip Book
 
Typography
TypographyTypography
Typography
 
Typography and grids
Typography and gridsTypography and grids
Typography and grids
 
Intro to Game Design
Intro to Game DesignIntro to Game Design
Intro to Game Design
 
Composition, some basic rules of photography
Composition, some basic rules of photographyComposition, some basic rules of photography
Composition, some basic rules of photography
 
Form Validation
Form ValidationForm Validation
Form Validation
 
1 - Designing A Site
1 - Designing A Site1 - Designing A Site
1 - Designing A Site
 
Personality Emotion
Personality EmotionPersonality Emotion
Personality Emotion
 
Personality Emotion
Personality EmotionPersonality Emotion
Personality Emotion
 
Perspective Principles
Perspective PrinciplesPerspective Principles
Perspective Principles
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
 
Colour
ColourColour
Colour
 
Web Functionality
Web FunctionalityWeb Functionality
Web Functionality
 
Layout Principles
Layout PrinciplesLayout Principles
Layout Principles
 
Layout Principles 1
Layout Principles 1Layout Principles 1
Layout Principles 1
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

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.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 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.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

Editor's Notes

  1. This is an opportunity to discuss the model again. This is also an opportunity to revise any content students found difficult last week.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. Ask the students what other factors they think may be important, the next slide is a bullet pointed list.
  10. 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.
  11. 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?
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.”
  17. 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.
  18. 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.
  19. 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.