1. Don’t make me think
Usability

2. Usability
A web page should be self-evident- obvious and self explanatory
Effective UI design is intuitive
User should understand how it works–and quickly.

3. Usability BAD UI DESIGN Drops you off in the middle of the desert
A web page should be self-evident- obvious and self explanatory
Effective UI design is intuitive
User should understand how it works–and quickly.
BAD UI DESIGN
Drops you off in the middle of the desert
Expects you to make it on your own
Does not lead you where you need to go

5. Things that make you think
• Cute or clever names
• Marketing-induced names
• Company-specific names

6. Things that make you think
• Cute or clever names
• Marketing-induced names
• Company-specific names
• Unfamiliar technical terms
• Too much information
• Not clear links

8. Goal is to get rid of question marks

9. Every question mark adds to our cognitive workload, distracting our attention from the task at hand. These distractions can add up and cause frustration. Not making things obvious can erode confidence in the site and the organization behind it.

10. Every question mark adds to our cognitive workload, distracting our attention from the task at hand. These distractions can add up and cause frustration. Not making things obvious can erode confidence in the site and the organization behind it.

11. Every question mark adds to our cognitive workload, distracting our attention from the task at hand. These distractions can add up and cause frustration. Not making things obvious can erode confidence in the site and the organization behind it.

13. Some things a user shouldn’t need to spend their time thinking
Where am I
Where should I begin
Where did they put ______?
What are the most important things on this page?
Why did they call it that ?
Is that an ad or part of the site?

15. Always keep your user informed of what is going on and where they are
Make your interface simple, do not be tempted to sacrifice clarity to artistic expression
When in doubt, mimic interactions and cause-and-effects examples from the real-life
Microinteractions can have a macro impact on UX, do not overlook them
Know your audience and let it inspire you
Allow your users to explore and make mistakes

16. How we really use the Web

17. We don’t read pages we scan them
People spend very little time reading most web pages
Why do we scan?
We are on a mission. Users are trying to get something done and get that done quickly
We know we don’t need to read everything. Users are really only interested in a fraction of the page. We are looking for the bits that interest us.
We are good at it.

19. We don’t make optimal choices
Why don’t Web users look for the best choice?
Usually in a hurry
There is not much a penalty for choosing wrong
Weighing options may not improve chances. On poorly designed sites putting effort in sometimes doesn’t give good results
Guessing is more fun and sometimes faster

20. WE don’t figure out how things work. WE muddle through
Why does this happen?
Its not important to us. Its doesn’t matter to most of us if we don’t understand how it works, just that it works
If we find something that works, we stick with it. Even if it works badly people tend not to make changes unless they have to or stumble upon something better.

21. If the user “gets it”
There is a better chance they will find what they are looking for
Better chance they will understand the full range of what your site has to offer
You have a better chance of steering them to the parts of your site that you want them to see
They will feel smarter and more in control when they are using your site.

22. Making sure your users sees and understands as much of what they need to know and of what you want them to know
Take advantage of conventions
Create effective visual hierarchies
Break page up into clearly defined areas
Make what’s clickable obvious
Eliminate distractions
Format content to support scanning

23. MAKE IT EASY FOR USERS

24. Conventions are your friends

25. Conventions are your friends

26. Conventions for webpages – in last 20 years conventions have evolved
Conventions for webpages – in last 20 years conventions have evolved. Users have some general expectations.
Where things are located on a page. Users expect logo to be in the top left corner and the primary navigation to be across the top or the down the left side
How things work. Using the shopping cart metaphor for commerce sites. Clicking a button and being taken to new information
How things look. Standardized appearance, icons for video or social networks.

27. Effective Visual Hierarchies

28. Pages with clear VISUAL HIERARCHY have 3 traits
1. The more important something is the more prominent it is

29. Pages with clear VISUAL HIERARCHY have 3 traits
2. Things that are related logically are related visually

30. Pages with clear VISUAL HIERARCHY have 3 traits
3. Things are nested visually to show what’s part of what

31. A good VISHUAL HIERARCHY saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.

32. FLAWED VH
Parsing a page with a VH that is even slightly flawed – where heading spans things that aren’t part of it is like reading a carelessly constructed sentence.

33. Make it obvious what is clickable

34. Format Text to support scanning

35. Make sure there’s an obvious impossible to miss visual distinction
Use plenty of headings
Make sure there’s an obvious impossible to miss visual distinction
Don’t let heading float. Make sure closer to the selection they introduce.

36. Keep Paragraphs short
Use bulleted lists
Highlight key terms