usability and user experience
DESCRIPTION
http://shawncalvert.com/webdesign-1Web Design 1 Columbia College ChicagoTRANSCRIPT
![Page 1: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/1.jpg)
22-3375 Web Design I // Columbia College Chicago
Usability & User Experience
![Page 2: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/2.jpg)
Utility, Usability, User Experience
Utility: Does it provide the features you need?
Usability: How easy and pleasant is it to use the features?
User Experience: “UX” encompasses all aspects of the end-user's interaction with the company, its services, and its products.
![Page 3: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/3.jpg)
![Page 4: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/4.jpg)
Internet
![Page 5: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/5.jpg)
Usability
![Page 6: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/6.jpg)
Project 1: Group Crits
Is there a clear visual hierarcy?
Is it obvious what is clickable?
Does the design match the user goals (from last week)
Does the visual design embody the site’s message?
Is the imagery, type and color compelling, professional?
In what ways is the design using gestalt principles? Proximity, common region, connectedness, similarity
How is the design using these basic design principles: balance, emphasis, rhythm, unity contrast
In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process.
(usability.gov)
![Page 7: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/7.jpg)
Project 1: Group Crits
Is there a clear visual hierarcy?
Is it obvious what is clickable?
Does the design match the user goals (from last week)
Does the visual design embody the site’s message?
Is the imagery, type and color compelling, professional?
In what ways is the design using gestalt principles? Proximity, common region, connectedness, similarity
How is the design using these basic design principles: balance, emphasis, rhythm, unity contrast
Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.
(useit.com)
![Page 8: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/8.jpg)
Project 1: Group CritsEasy to Learn How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficient to Use: Once users have learned the design, how quickly can they perform tasks?
Easy to Remember: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Few Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?
(useit.com)
Five Basic Attributes of Usability
![Page 9: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/9.jpg)
Project 1: Group Crits
Is there a clear visual hierarcy?
Is it obvious what is clickable?
Does the design match the user goals (from last week)
Does the visual design embody the site’s message?
Is the imagery, type and color compelling, professional?
In what ways is the design using gestalt principles? Proximity, common region, connectedness, similarity
How is the design using these basic design principles: balance, emphasis, rhythm, unity contrast
Usability Testing
≠ Focus Groups
![Page 10: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/10.jpg)
Project 1: Group Crits
Is there a clear visual hierarcy?
Is it obvious what is clickable?
Does the design match the user goals (from last week)
Does the visual design embody the site’s message?
Is the imagery, type and color compelling, professional?
In what ways is the design using gestalt principles? Proximity, common region, connectedness, similarity
How is the design using these basic design principles: balance, emphasis, rhythm, unity contrast
Usability Testing = what they do
!
Focus Groups = what they say
![Page 11: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/11.jpg)
![Page 12: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/12.jpg)
![Page 13: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/13.jpg)
User Experience (UX)
![Page 14: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/14.jpg)
User Experience: The creation and synchronization of the elements that affect user’s experience with a particular company, with the intent of influencing their perceptions and behavior. (Unger and Chandler, A Project Guide to UX Design)
![Page 15: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/15.jpg)
A Slippery Definition
There is no one defined role or definition for a UX designer within web and application design; typically it is a hybrid role that combines:
information architecture,
interaction design,
visual design and
usability engineering
— but different aspects of those roles may be emphasized more heavily depending on the team.
![Page 16: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/16.jpg)
O N E D O L L A R
Building Credibility and Trust
![Page 17: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/17.jpg)
![Page 18: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/18.jpg)
![Page 19: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/19.jpg)
![Page 20: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/20.jpg)
![Page 21: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/21.jpg)
User Centered Design (UCD)
![Page 22: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/22.jpg)
Project 1: Group Crits
Is there a clear visual hierarcy?
Is it obvious what is clickable?
Does the design match the user goals (from last week)
Does the visual design embody the site’s message?
Is the imagery, type and color compelling, professional?
In what ways is the design using gestalt principles? Proximity, common region, connectedness, similarity
How is the design using these basic design principles: balance, emphasis, rhythm, unity contrast
BASIC PRINCIPLE
Know your user, for they are not you.
![Page 23: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/23.jpg)
The chief difference from other product design philosophies is that user-centered design tries to optimize the product around how users can, want, or need to use the product, rather than forcing the users to change their behavior to accommodate the product.
(Wikipedia)
![Page 24: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/24.jpg)
Procrustean Bed
![Page 25: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/25.jpg)
PROXIMITY COMMON REGION
SIMILARITY
Size Shape Shade Color
CONNECTEDNESS
LARGE TO SMALL IRREGULAR TO REGULAR DARK SHADE TO LIGHTSATURATED TO
UNSATURATED COLOR
Gestalt Principles
![Page 26: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/26.jpg)
![Page 27: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/27.jpg)
![Page 28: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/28.jpg)
![Page 29: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/29.jpg)
![Page 30: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/30.jpg)
![Page 31: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/31.jpg)
![Page 32: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/32.jpg)
![Page 33: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/33.jpg)
![Page 34: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/34.jpg)
![Page 35: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/35.jpg)
![Page 36: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/36.jpg)
![Page 37: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/37.jpg)
UCD principles in fork & spoon design
Needs to fit in a range of mouth sizes
Handle needs to accommodate large and small hands
Needs to function on both solids and liquids
Needs to be produced in large sets, equal amounts of each
Needs to be easily stackable in small spaces
Needs to be durable and reusable
![Page 38: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/38.jpg)
There is plenty of room for ‘design’ in UCD
![Page 39: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/39.jpg)
![Page 40: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/40.jpg)
![Page 41: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/41.jpg)
Change in plans.
We need a low-cost, single use, all-purpose utensil. Our costs must come in below $.000001 a unit or I won’t get a bonus this year.
Business-Centered Design
![Page 42: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/42.jpg)
![Page 43: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/43.jpg)
UCD in a new user context
![Page 44: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/44.jpg)
Worksheet
!
Can you think of a web design technique
that is NOT user-centered?
Why?
![Page 45: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/45.jpg)
Users are not designers
The goal of user-centered designs is not simply to give the user what they ask for; it isn’t their job to know how to solve their needs relating to your site.
No matter what objectives you have set for your Web site, it must carefully balance the needs of users and the needs of your organization. If users don't find your Web site helpful, they will not use it.
![Page 46: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/46.jpg)
![Page 47: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/47.jpg)
Iterative Design
To “iterate” just means “to repeat.”
Iterative Design is a term that describes a common sense idea: you build something, test if it works, learn from your mistakes, and make it better.
![Page 48: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/48.jpg)
![Page 49: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/49.jpg)
![Page 50: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/50.jpg)
![Page 51: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/51.jpg)
Understanding Conventions & Expectations
Users have certain expectations when they visit a website, expectations that, if not met, could result in them having trouble understanding how it works. Therefore, it's important that websites are designed so that users can predict how things will work and where certain elements will be.
![Page 52: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/52.jpg)
Conventions in Life
![Page 53: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/53.jpg)
![Page 54: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/54.jpg)
![Page 55: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/55.jpg)
![Page 56: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/56.jpg)
![Page 57: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/57.jpg)
![Page 58: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/58.jpg)
![Page 59: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/59.jpg)
![Page 60: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/60.jpg)
![Page 61: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/61.jpg)
![Page 62: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/62.jpg)
![Page 63: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/63.jpg)
![Page 64: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/64.jpg)
![Page 65: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/65.jpg)
![Page 66: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/66.jpg)
![Page 67: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/67.jpg)
Worksheet
!
Can you think of any new design patterns
that have emerged in the past year?
![Page 68: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/68.jpg)
How do we get to know the user?
In the planning stages of the design (refer back to our workflow presentation), you might define your users through:
focus groups,
use cases,
personas,
and/or user/task flowcharts.
![Page 69: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/69.jpg)
Use Case
![Page 70: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/70.jpg)
Personas
![Page 71: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/71.jpg)
User/Task Flows
![Page 72: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/72.jpg)
How do we get to know the user?
During design and after launch of the design, you might perform formal and informal:
usability testing,
analysis of site analytics,
heuristic analysis,
and/or surveys.
![Page 73: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/73.jpg)
How do we get to know the user?
Which is all very nice, but ...
In truth, the ux designer needs to make hundreds of small decisions, not all of which can be empirically tested; and the ones that have been tested need subjective interpretation to actually mean anything.
Much of the art of ux design is in the process of empathizing with users — the ability to “walk in their shoes” though scenarios and tasks, and making a best guess on whatever information is available to you at a given time.
![Page 74: Usability and User Experience](https://reader031.vdocuments.us/reader031/viewer/2022020217/54c785d64a7959575f8b4580/html5/thumbnails/74.jpg)
Cognitive Science
Cognitive science is the interdisciplinary study of mind and intelligence, embracing philosophy, psychology, artificial intelligence, neuroscience, linguistics, and anthropology.
Cognition: The mental action or process of acquiring knowledge and understanding through thought, experience, and the senses.