website usability | day 1
TRANSCRIPT
PLEASE MAKE A NAME CARD.
NAME CARDWHAT USABILITY CONSIDERATIONS DID YOU TAKE IN MAKING YOUR NAME CARD?
HELLO,Website Usability I: Foundations
Professor Cathline Marshall
nyuusability.wordpress.com
COURSE OBJECTIVE:To provide a foundation that will allow students to successfully build a usable website. We will look at the roles information architecture, navigation, design, and writing play in creating a usable website. Additionally, we will perform a usability test. Each class will have lecture and workshop segments.
Please divide into three groups.
GROUP #1: realbusiness.comGROUP #2: lifehacker.comGROUP #3: getharvest.comAnswer:
What is the purpose of the site?What can you do on the site?What do you think the main goal of the site is?Can you find the contact info?
WORKSHOP #1
WHAT IS USABILITY?
WHAT IS USABILITY?
Usability is “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”
(ISO 9241-11)
“In human-computer interaction and computer science, usability usually refers to the elegance and clarity with which the user interface of a computer program or a web site is designed.”
(Wikipedia)
“...the measure of the quality of a user’s experience when interacting with a product or system,” whether a Web site, a software application, mobile technology, or any user-operated device.”
(Usability.gov)
“Usability really just means making sure that something works well: that a person of average (or even below average) ability and experience can use the thing - whether it's a Web site, a fighter jet, or a revolving door - for its intended purpose without getting hopelessly frustrated.”
(Steve Krug)
DON’T MAKE ME THINK.
Where do I start?What do they do?Clever names/Marketing induced namesLinks that are not self evidentNavigation in non traditional placesWhere’s the contact info?Where do I sign in?
THINGS THAT MAKE US THINK:
Ease of useSpeedPracticalityCredibilityConsistencySimplicity, simplicity, simplicity
WHAT USERS LOOK FOR:
HUMAN FACTORS
HUMAN FACTORS Forms the basis of usability testing.
Has its roots in military research.
Understanding how people think and interact with their environment.
THE HISTORY OF USABILITYThe study of human factors dates back to World War II, when the growing complexity of fighter planes created a need for more user friendly designs.
PsychologyEngineeringIndustrial designGraphic designStatistics
HUMAN FACTORS INCORPORATES:
Design products for improved safety & ease of useDesign systems to accommodate specific user groupsRaise productivity by improving human performance Improve information displays to reduce human error
HUMAN FACTORS SPECIALISTS:
THREE MILE ISLANDA control panel status made engineers think that a valve had been engaged, while the status simply meant that the valve had been attempted to be engaged.
THE WEB HAS CHANGED.
HOW PEOPLE USE SITES.
AFFORDANCE• The perceived ability of an object to behave in a certain way, by nature of its design.
• The quality of an object which allows one to perform an action.
I’m a button. Really, I am.
I’m a button. Really, I am.
I’m a button. Really, I am.
I’m a button. Really, I am.
I’m a button. Really, I am.
What does this thing do?
What does this thing do?
SIGNIFIERSPeople search for clues to help them understand context.
Photo: CelticSong22
PUT IT IN CONTEXTPeople need some way of understanding the product
or service.
Forget affordances: what people need are signifiers.
They are broader and richer.
They provide valuable clues to sift information.
Websites rely on pictures and icons to convey messages.
Design elements that give the user context:
NavigationButtonsIcons
DESIGN ELEMENTS
Navigation
Buttons
Icons
Scenario:
You’ve just rented a new apartment and your landlord told you to open an account with ConEd to get your electricity turned on.Go for it.
WORKSHOP #2
MENTAL MODELSOur ideas of how things work.
Are an explanation of our thought process about how something works.
Includes what we think is true, not necessarily what is actually true.
www.bing.com
Why, oh why, do people search for a website ifthey already know its name?
www.bing.com
USER ACTIONSUsers plan actions based on their models.
People expect websites to act alike.
Goal is to create interfaces that match how people think something should work.
WHY DOESN’T THIS IPAD WORK?(because it’s a magazine)
DIAGNOSING PROBLEMSUnderstanding the concept of mental models can help you make sense of usability problems.
Users expect to know which elements on a page are clickable.
On e-commerce sites they expect to see photos.
Headings, labels and categories will differ depending on target audience.
HOW PEOPLE USE SITES.
YOU HAVE LESS THAN TWO MINUTES TO COMMUNICATE THE FIRST TIME A PROSPECTIVE CUSTOMER VISITS YOUR WEBSITE.
Every page must justify its claim on their time. If a page doesn’t do that immediately and clearly, users go elsewhere. Most people don’t even bother scrolling to see what’s farther down the page.
...will fail a third of the time when trying to complete a task.
...will choose sites that have proven useful in the past.
...will spend 1 minute 49 seconds on a site before abandoning.
...will visit 3.2 sites (besides search engines) to find a site.
...has only a 12% possibility of revisiting a site.
THE AVERAGE USER...
Users don’t read they scan. Users don’t make optimal choices.Users don’t figure out how things work.Users don’t always come through the homepage.
MORE ABOUT USERS...
Let users know where they are and how to proceed.
Company name or logo in upper left cornerDirect, one click link to home pageSearch (ideally in upper right corner)Consider using breadcrumbs to orient user
GUIDELINES
WHY PEOPLE LEAVE SITES.
POP UPS
LONG WAIT TIME
CAN’T FIND SOMETHING
PAGINATION
INTERSTITIAL ADS
BAD NAVIGATION
POOR INFORMATION SCENT- dictates maximum benefit for minimum effort
- users access if their paths show cues related to
desired outcome
- progress must seem rapid to be worth the effort required to reach the destination
- don’t use made up words
REQUIRED TO REGISTER
TYPOS & POOR GRAMMARMy suns is cutting wood with a acts but they ain’t aloud to
drink ail in front of there ant.
LAME FONTS
COBWEBS
LACK OF CLARITY
FLASH BASED
NO ABOUT OR CONTACT PAGE
PR JARGONBlue-sky thinking = Creative
Grey Beard = Corporate Head
Seed = Share
IT’S UGLY.
USER CENTERED DESIGN
Design philosophy that focuses on the end user through:
Planning PhaseDesign PhaseDevelopment Phase
Requires research on end user.
WHAT IS USER CENTERED DESIGN?
ISO 9241-210 (formerly 13407) International standard for human-centered process.
ISO 9241-210 (formerly 13407) 6 key principles that will ensure your design is user centered:
1. The design is based upon an explicit understanding of users, tasks and environments.
2. Users are involved throughout design and development.
3. The design is driven and refined by user-centered evaluation.
ISO 9241-210 (formerly 13407) The process is iterative.
The design addresses the whole user experience.
The design team includes multidisciplinary skills and perspectives.
STEP #1:Identify your users.
Who are they?
What are their tasks and goals?
What is their experience level?
Who are the users?What do they need to do, their tasks?What do they currently do?How satisfied are they with their current routines?What is their experience level?What kind of environment are they working in?What are their preferences, and their goals?
KNOW YOUR USERS
STEP #2:What functions are required?
What information do they need?
What form should it be?
How do users think it should work?
STEP #3:Create design solutions.
(Think simplicity, simplicity, simplicity.)
STEP #4:Evaluate designs by testing usability.
IDENTIFY NEED FOR HUMAN
CENTERED DESIGNSPECIFY CONTEXT OF USE
SPECIFY REQUIREMENTS
PRODUCE DESIGN SOLUTIONS
EVALUATE DESIGNSSYSTEM
SATISFIES SPECIFIED REQUIREMENTS
enlarge
THE TEN USABILITY HEURISTICS
THE TEN USABILITY HEURISTICS These are ten general principles for user interface design. They are called “heuristics” because they are more in the nature of rules of thumb than specific usability guidelines.
-Jacob Nielsen, 1994
#1 VISIBILITY OF SYSTEM STATUS #2 MATCH BETWEEN SYSTEM AND THE REAL WORLD#3 USER CONTROL AND FREEDOM#4 CONSISTENCY AND STANDARDS#5 ERROR PREVENTION#6 RECOGNITION RATHER THAN RECALL#7 FLEXIBILITY AND EFFICIENCY OF USE#8 AESTHETIC AND MINIMALIST DESIGN#9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORS#10 HELP AND DOCUMENTATION
THE TEN USABILITY HEURISTICS
#1 VISIBILITY OF SYSTEM STATUS
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
DO
DON’T
#2 MATCH BETWEEN SYSTEM AND THE REAL WORLD
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
DO
DON’T
#3 USER CONTROL AND FREEDOM
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
DO
DON’T
#4 CONSISTENCY AND STANDARDS
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
DO
DON’T
#5 ERROR PREVENTION
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
DO
DON’T
#6 RECOGNITION RATHER THAN RECALL
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
DO
DON’T
#7 FLEXIBILITY AND EFFICIENCY OF USE
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
DO
DON’T
#8 AESTHETIC AND MINIMALIST DESIGN
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
DO
DON’T
#9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORS
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
DO
DON’T
#10 HELP AND DOCUMENTATION
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
DO
DON’T
USABILITY REVIEWS
HOMEPAGE
This small square should not be there, it links to different version of the about page with no title. You can delete that page to get rid of the square.
This title is too long. People get confused by page titles that do not describe the page intuitively and concisely. It should read “About” or “About The Blog”
A search box is a great thing to have, and this is the perfect place to put it.
You don’t need a comment feed.. Unless you know for a fact that your users are using this feature, just having a post feed is fine enough. Then you don’t even need to have all that text, the orange icon is an industry standard.
Your blog name is too long, it doesn’t sound like a website name. It also sounds like it’s referring to a specific discovery. A shorter blog name will allow people to remember your site and URL more easily.
Though the design (layout/color palette/fonts) of your website isn’t necessarily bad, we don’t feel that it communicates to your target audience effectively. If you are looking to make science accessible and understandable to laymen, the design should reflect that. The current design seems too scholarly, clinical, and outdated.
Though aesthetically pleasing, this image just doesn’t say “science”. It speaks more to travel and history, and the discovery of ancient worlds as opposed to new studies in science.
There is too little typographic hierarchy on your site. Not even the site’s name or the post titles really come out and grab your attention. It all looks like a wall of text, which makes it harder for a user to navigate.
You should not display the full blog post on the homepage. Show the title and an excerpt, and allow the user to “read more” if they’re interested. This keeps users from having to scroll down through articles that they have no interest in.
Your blog posts could benefit from the addition of relevant images that summarize what the content is about. Right they appear as just a big, gray box of text intimidating text.
Who are you? How are you associated with science? I can’t even find your full name on this page! It is important that you include an “About the Author” page to establish your credibility and put a face to the site.
As the eye can only comfortably track 7 to 10 words a line, your sentences are a tad too long.
Too much movement. Very distracting.
Because this is green, I am assumingthis is the page that I am on, but it is not.
This opens in a new window, with newcolors. Very disorienting.
Most Popular Topics (is this different than the blog topics?), Today’s News, Popular Links, Latest News. SO MUCH TO CHOOSE FROM! I don’t know where to start? What is most important?
This block could be confused with advertising and may be ignored.
Too many navigation options!
These questions (links) would makefor excellent callouts, but not necessarilynavigational links.
These buttons are totally lost among all the options on this page.
I need a little hint as to what attainivf is before I click. This istoo vague.
Seeing Fans is nice, but just adds to the clutter and creates further distraction on this very busy page.
Unappealing image.
Is this advertising?
This appears to be an ad! Why would you encourage users to LEAVE your site to play Fantasy Football? Doesn’t even open in another window.
Remove all this. Replace with: Register for Free with a link to register. And have Log In button.
Clean this area up. Remove the image of Las Vegas, Make it a clean and simple logo like all your competition does.
This whole area takes up valuable real estate. On Sport’s Advisors, the ads are smaller allowing the left side bar to come up. Also, the content of the ads are much more compelling. I would reconsider what if anything you want to put here.
This can move to the bottom of the page. Everyone takes these credit cards.
This is a wonderful service, but it pushed down the menu of handicappers which is what people are going to be looking for. They can get the scores via your top navigation. You may want to consider saying “Live Scores”
Remove the word Menu. Not needed.Move this whole block up.
I would remove everything in this green block and replace with this.
HOMEPAGE
Navigation is too light in color. No contrast. Needs to be more obvious.
This blur looks like it is a mistake.
Search box is not obvious. It needs to be moved to the upper right as that is now standard practice and where most users will look for it. Plus it is buried in with the contact information and not self evident.
While you can have news bites on the homepage, that is not the role of the homepage.The role of the homepage is to communicate what the company is, the value the site offers over the competition and the product or services offered. Presently, it does NONE of those things.
The novice user can feel overwhelmed by homepages that do not help them understand their options. They may become embarrassed and blame themselves. They will just leave the site and go to a more welcoming site.
The challenge is to design a homepage that gives the user access to important features without cramming them onto the page itself. Focus and clarity are most important, as are the users' goals. They need to be identified early. I question if they have been.
The word “HOT” does not belong on a site of this nature. It cheapens the work and seems inappropriate.
The logo on the homepage is customarily larger and more prominent. It is getting lost on this page because of lack of contrast and the blurring of the image.
This Giving aid link is too passive. No one will see it.
The site map link should be more prominent.
This extranet link may be confusing if it refers to the CLUB..
Who is IAAATA and SNA? Partners? Agencies? Memberships? Should at the very least have a link so the uninformed user can research what they are.
Please break into groups.
Find a site to do a “heuristic” (usability) review.Be prepared to share your observations with the class.
WORKSHOP #3
USER AND BUSINESS GOALS
BUSINESS GOALS“Customer experience is the defining success factor in business for the next twenty years. Learning from customers, creating the experience they want, measuring the success of what you do, continually fine-tuning the service and returning to customers to learn more--this now must be the primary mission of any business that has customers. If you create a great customer experience, you’ll almost certainly win.” Mark Hurst
USER AND BUSINESS GOALS ...should be aligned.
KNOW THE BUSINESS Having a satisfied user doesn't necessarily build a satisfied company.
Interview the stakeholders, get to understand their strategy and business goals.
Ultimately usability must serve the bottom line.
Suits decide on business goalsConvert to strategyBrings in design team Do it cheap Put everything on the homepage Put my division on the top of the hierarchy Hide the contact info Get to market asap
HERE’S WHAT HAPPENS:
WHAT’S THE RESULT?Bad user experience.
BUSINESS GOALS ARE UNIVERSALIncrease traffic to the site.
Retain users.
Improve conversion rates.
CONVERSIONWhen a prospective customer takes the marketer's intended action.
-Wikipedia
SALESSign ups
Contact form submissions
Timely, relevant contentEngage themProvide an experience
SERVE THEIR NEEDS.
HOW TO RETAIN USERS:
Easy to use siteClear hierarchyCalls to actionCommunicate valueStudy analyticsA/B testing
SERVE THEIR NEEDS.
HOW TO IMPROVE CONVERSION:
Interesting, original copyIn-bound linksSearch Engine Optimization (SEO)E-blasts/NewslettersSocial Media
SERVE THEIR NEEDS.
HOW TO INCREASE TRAFFIC:
DESIRABILITY
DESIRABILITY Delight comes not from the latest widget but from helping uses accomplish their goals.
Brings value to the userHighlights valuePersuades user of valueAdds emotional value to user
DESIRABILITY
piano stairs Pentagram
1. Surf the web. Find one site that is easy to use. One that isn’t. Tell why.2. If you had to do a comprehensive usability plan for the Coca Cola website or Microsoft Web site, which would you chose and why? Type your answers and submit next week.3. Download “Research Based Web Design & Usability Guidelines.” Read chapter one and two.4. Look at the site you reviewed at the start of the class. Write down what changes you would make to make the site more user-friendly. Type your answers and submit next week.
www.realbusiness.comwww.lifehacker.com
HOMEWORK WEEK #1