http://shawncalvert.com/webdesign-1Web Design 1 Columbia College Chicago

1. 22-3375 Web Design I // Columbia College Chicago
Usability & User Experience

2. 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.

4. Internet

5. Usability

6. 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)

7. 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)

8. Project 1: Group Crits
Easy 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

9. 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

10. 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

13. User Experience (UX)

14. 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)

15. 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.

16. O N E D O L L A R
Building Credibility and Trust

21. User Centered Design
(UCD)

22. 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.

23. 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)

24. Procrustean Bed

25. PROXIMITY COMMON REGION
SIMILARITY
Size Shape Shade Color
CONNECTEDNESS
LARGE TO SMALL IRREGULAR TO REGULAR DARK SHADE TO LIGHT
SATURATED TO
UNSATURATED COLOR
Gestalt Principles

37. 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

38. There is plenty of room for ‘design’ in UCD

41. 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

43. UCD in a new user context

44. Worksheet
!
Can you think of a web design technique
that is NOT user-centered?
Why?

45. 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.

47. 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.

51. 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.

52. Conventions in Life

67. Worksheet
!
Can you think of any new design patterns
that have emerged in the past year?

68. 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.

69. Use Case

70. Personas

71. User/Task Flows

72. 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.

73. 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.

74. 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.