Usability (often referred to as User Experience Design – UXD/UX) is an umbrella term for any activity or profession that contributes to a better experience for the user
Usability is about people and how they understand and use things, not about technology
Interaction Design – deciding what happens next based on user input
Information Architecture – figuring out how everything should be organized
Something is useful if – a person of average ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth
Don’t Make Me Think
Make interfaces self-evident, obvious, and self-explanatory. People should just “get it”
Don’t make things busy
Ensure all elements clearly reflect what they are (buttons, navigation, etc)
Don’t make the user guess the functionality of something
Every little distraction adds to the cognitive load of the user – KISS
If dealing with complex content, make it self-explanatory if self-evident is too difficult
How We Really Use The Web
Most often people scan vs read a page, only after the initial scan does it become evident that further reading or interacting should continue. This is why it is important to make things obvious.
The exception to the scan is pages containing documents, news, reports, product descriptions, etc – but often still, reading is blended with scanning
Why do we scan?
Most web use involves trying to get something done, and usually done quickly
Often there is only a portion that is relevant so we scan to find the relevant bits
We’re already good at it (we do it every day)
Users don’t often choose the best option, but the first reasonable option – satisficing/efficiency. There is no penalty for being wrong – a simple back button fixes the issue
People muddle through vs fully learning – some things just aren’t important to people
If it works we stick to it, we don’t often search for, but stumble across better ways
Billboard Design 101
As the creator, you’re in control
Take advantage of conventions
Create effective visual hierarchies
Break pages up into clearly defined areas
Make it obvious what is clickable
Eliminate distractions
Format content to support scanning
Clarity over consistency - something significantly clearer by making it slightly inconsistent is ok
Pages with a clear visual hierarchy have three traits
The more important something is, the more prominent it is
Things that are related logically are related visually
Things are nested visually to show what is part of what
Get rid of anything that is not making a real contribution.
Format text to support scanning
Use plenty of headings (act as informal table of contents for a page)
Ensure heading is close to section it pertains to, don’t have it float in the middle
Keep paragraphs short (“wall of words” are daunting)
Use bulleted lists (anything that can be should be) & ensure proper spacing between items
Highlight key terms (help aid scanning but don’t over do it)
Animal, Vegetable, or Mineral
When providing a user with decisions, it’s best to:
Make it brief (the smallest amount of info that will help the user)
Make it timely (only encountered when needed)
Make it unavoidable (formatted in a way that ensures it is noticed)
Omit needless words
Reduces noise level of page
Makes useful content more prominent
Allows more of the page to be seen at a glance (supports scanning)
Eliminate instructions – the goal should be to make everything self explanatory – bare minimum
Street Signs and Breadcrumbs
People won’t use your website if they can’t find their way around it
Navigation isn’t a feature of a web site, it is the website (same way the interface is the product)
Navigation
Helps us find what we’re looking for
Tell us where we are
Reveals content (informs what the site contains)
Informs how to use the site (tells you where to begin and what your options are)
Gives confidence to users (“If done poorly, people are likely not going to return”
Naming
Every page needs a name (street signs of your site)
Name needs to be in the right place and prominent
Page name needs to match the name of what I clicked to get there (keep user’s trust)
"You are here" navigation visual needs to be prominent (don’t be too subtle)
Breadcrumbs
Put them at the top
Use “>” between levels
Boldface the last item (“you are here”) and because you’re already there it’s not a link
Tabs are a great UI element for dividing information on a page
They’re self-evident
Hard to miss
The Big Bang Theory of Web Design
The first few seconds on a new website are critical – make it obvious what the site is and what you can do
Even if a user’s first experience with a site isn’t the home page, they often next click to go to the home page to get their bearings
Motto – expresses a guiding principle, goal, or ideal whereas a Tagline – conveys a value proposition
Any shared resource will inevitably be destroyed by overuse – focus on what’s important, nothing more
The Farmer and the Cowman Should Be Friends
ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC
Usability Testing on 10 cents a Day
You must test – others aren’t blinded by what you’re blinded by as a creator
Even the worst test with the wrong user will show you important things
When facilitating a usability test, encourage the user to “think out loud” as they interact with the product
Mobile
It’s all about the tradeoffs, constraints actually make design easier and foster innovation/creativity
Whenever you’re designing, you’re dealing with constraints – with constraints come tradeoffs
Things that the user would want to do in a hurry/frequently should be close at hand, everything else can be a few taps away (with an obvious path to get there)
MANAGING REAL ESTATE CHALLENGES SHOULDN’T BE DONE AT THE COST OF USABILITY
Responsive design
Tends to be a lot of work
Is very hard to do well
Don’t hide affordances
Affordances are the meat of a UI (visual cues are extremely important)
Flat design can be an issue – just ensure sufficient visual cues
Focus on “above the fold” content and ensure it loads fast
