View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
COURSE OBJECTIVE:To provide a foundation that will allow students tosuccessfully build a usable website. We will look at theroles information architecture, navigation, design, andwriting play in creating a usable website. Additionally, wewill perform a usability test. Each class will have lectureand workshop segments.
OPENING SURVEYPLEASE FILL OUT THE SURVEY:http://ow.ly/92AZn
WORKSHOP #1 Please divide into three groups. GROUP #1: realbusiness.com GROUP #2: lifehacker.com GROUP #3: getharvest.com Answer: 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?
Usability is “the extent to which a product can be used byspecified 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 withwhich the user interface of a computer program or a website is designed.” (Wikipedia)
“...the measure of the quality of a user’s experience wheninteracting with a product or system,” whether a Web site, asoftware application, mobile technology, or any user-operated device.” (Usability.gov)
“Usability really just means making sure that somethingworks well: that a person of average (or even below average)ability and experience can use the thing - whether its a Website, a fighter jet, or a revolving door - for its intendedpurpose without getting hopelessly frustrated.” (Steve Krug)
THINGS THAT MAKE US THINK: Where do I start? What do they do? Clever names/Marketing induced names Links that are not self evident Navigation in non traditional places Where’s the contact info? Where do I sign in?
WHAT USERS LOOK FOR: Ease of use Speed Practicality Credibility Consistency Simplicity, simplicity, simplicity
HUMAN FACTORS SPECIALISTS: Design products for improved safety & ease of use Design systems to accommodate specific user groups Raise productivity by improving human performance Improve information displays to reduce human error
THREE MILE ISLANDA control panel status made engineers think that a valve hadbeen engaged, while the status simply meant that the valvehad been attempted to be engaged.
PUT IT IN CONTEXTPeople need some way of understanding the productor service.Forget affordances: what people need are signifiers. They are broader and richer. They provide valuable clues to sift information.
DESIGN ELEMENTS Websites rely on pictures and icons to convey messages. Design elements that give the user context: Navigation Buttons Icons
USER ACTIONSUsers plan actions based on their models.People expect websites to act alike.Goal is to create interfaces that match how people thinksomething should work.
WHY DOESN’T THIS IPAD WORK? (because it’s a magazine)
DIAGNOSING PROBLEMSUnderstanding the concept of mental models can help youmake 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 ontarget audience.
YOU HAVE LESS THAN TWO MINUTES TOCOMMUNICATE THE FIRST TIME A PROSPECTIVECUSTOMER VISITS YOUR WEBSITE.Every page must justify its claim on their time. If a pagedoesn’t do that immediately and clearly, users goelsewhere. Most people don’t even bother scrolling to seewhat’s farther down the page.
THE AVERAGE USER... ...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.
MORE ABOUT USERS... 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.
GUIDELINES Let users know where they are and how to proceed. Company name or logo in upper left corner Direct, one click link to home page Search (ideally in upper right corner) Consider using breadcrumbs to orient user
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
WHAT IS USER CENTERED DESIGN? Design philosophy that focuses on the end user through: Planning Phase Design Phase Development Phase Requires research on end user.
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 ofusers, tasks and environments.2. Users are involved throughout design and development.3. The design is driven and refined by user-centeredevaluation.
ISO 9241-210 (formerly 13407)The process is iterative.The design addresses the whole user experience.The design team includes multidisciplinary skills andperspectives.
STEP #1:Identify your users.Who are they?What are their tasks and goals?What is their experience level?
KNOW YOUR USERS 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?
STEP #2:What functions are required?What information do they need?What form should it be?How do users think it should work?
THE TEN USABILITY HEURISTICSThese are ten general principles for user interface design. Theyare called “heuristics” because they are more in the nature ofrules of thumb than specific usability guidelines. -Jacob Nielsen, 1994
THE TEN USABILITY HEURISTICS #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
#1 VISIBILITY OF SYSTEM STATUSThe system should always keep users informed about what isgoing on, through appropriate feedback within reasonable time.
#2 MATCH BETWEEN SYSTEM AND THE REAL WORLDThe system should speak the users language, with words,phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, makinginformation appear in a natural and logical order.
#3 USER CONTROL AND FREEDOMUsers often choose system functions by mistake and will need aclearly marked "emergency exit" to leave the unwanted statewithout having to go through an extended dialogue. Supportundo and redo.
#5 ERROR PREVENTIONEven better than good error messages is a careful design whichprevents a problem from occurring in the first place. Eithereliminate error-prone conditions or check for them and presentusers with a confirmation option before they commit to theaction.
#6 RECOGNITION RATHER THAN RECALLMinimize the users memory load by making objects, actions,and options visible. The user should not have to rememberinformation from one part of the dialogue to another.Instructions for use of the system should be visible or easilyretrievable whenever appropriate.
#7 FLEXIBILITY AND EFFICIENCY OF USEAccelerators -- unseen by the novice user -- may often speed upthe interaction for the expert user such that the system can caterto both inexperienced and experienced users. Allow users totailor frequent actions.
#8 AESTHETIC AND MINIMALIST DESIGNDialogues should not contain information which is irrelevant orrarely needed. Every extra unit of information in a dialoguecompetes with the relevant units of information and diminishestheir relative visibility.
#10 HELP AND DOCUMENTATIONEven though it is better if the system can be used withoutdocumentation, it may be necessary to provide help anddocumentation. Any such information should be easy to search,focused on the users task, list concrete steps to be carried out,and not be too large.
Your blog name is too long, it doesn’t A search box is a great thing to have,sound like a website name. It also and this is the perfect place to put it.sounds like it’s referring to a speciﬁcdiscovery. A shorter blog name willallow people to remember your siteand URL more easily. You don’t need a comment feed.. Unless you know for a fact that your users are using this feature, just having aThis small square should not be there, it post feed is ﬁne enough. Then you don’tlinks to different version of the about even need to have all that text, thepage with no title.You can delete that orange icon is an industry standard.page to get rid of the square.This title is too long. People getconfused by page titles that do not Though aesthetically pleasing, this imagedescribe the page intuitively and just doesn’t say “science”. It speaksconcisely. It should read “About” or more to travel and history, and the“About The Blog” discovery of ancient worlds as opposed to new studies in science.Who are you? How are you associatedwith science? I can’t even ﬁnd your fullname on this page! It is important that There is too little typographic hierarchyyou include an “About the Author” page on your site. Not even the site’s nameto establish your credibility and put a or the post titles really come out andface to the site. 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 poston the homepage. Show the title and anexcerpt, and allow the user to “read As the eye can only comfortably track 7more” if they’re interested. This keeps to 10 words a line, your sentences are ausers from having to scroll down tad too long.through articles that they have nointerest in.Your blog posts could beneﬁt from the Though the design (layout/color palette/addition of relevant images that fonts) of your website isn’t necessarilysummarize what the content is about. bad, we don’t feel that it communicatesRight they appear as just a big, gray box to your target audience effectively. Ifof text intimidating text. you are looking to make science accessible and understandable to laymen, the design should reﬂect that. HOMEPAGE The current design seems too scholarly, clinical, and outdated.
These questions (links) would make for excellent callouts, but not necessarily navigational links. Because this is green, I am assuming Too many navigation options! this is the page that I am on, but it is not.Too much movement.Very distracting. This block could be confused with advertising and may be ignored. Unappealing image. 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 opens in a new window, with newcolors.Very disorienting. These buttons are totally lost among all the options on this page. Seeing Fans is nice, but just adds to the clutter and creates further distraction on this very busy page. I need a little hint as to what Is this advertising? attainivf is before I click. This is too vague.
This can move to the bottom of the page.Clean this area up. Remove the image of Everyone takes these credit cards.Las Vegas, Make it a clean and simplelogo like all your competition does. Remove all this. Replace with: Register for Free with a link to register. And have Log In button. This appears to be an ad! Why would you encourage users to LEAVE your This whole area takes up valuable real estate. On site to play Fantasy Football? Doesn’t Sport’s Advisors, the ads are smaller allowing the even open in another window. 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. I would remove everything in this green block and replace with this.This is a wonderful service, but itpushed down the menu ofhandicappers which is what peopleare going to be looking for. They canget the scores via your top navigation.You may want to consider saying “LiveScores” Remove the word Menu. Not needed. Move this whole block up. HOMEPAGE
This blur looks like it is a mistake. 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. Navigation is too light in color. No contrast. Needs to be more obvious. This Giving aid link is too passive. No one will see it. This extranet link may be confusing if it refers to the CLUB.. The site map link should be more prominent. 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 identiﬁed early. I question if they have been. Search box is not obvious. It needs to be moved to the Who is IAAATA and SNA?The word “HOT” does not belong on a site of this nature. upper right as that is now standard practice and where Partners? Agencies?It cheapens the work and seems inappropriate. most users will look for it. Plus it is buried in with the Memberships? Should at the contact information and not self evident. very least have a link so the uninformed user can research what they are.
WORKSHOP #3 Please break into groups. Find a site to do a “heuristic” (usability) review. Be prepared to share your observations with the class.
BUSINESS GOALS“Customer experience is the defining success factor inbusiness for the next twenty years. Learning fromcustomers, creating the experience they want, measuringthe success of what you do, continually fine-tuning theservice and returning to customers to learn more--this nowmust be the primary mission of any business that hascustomers. If you create a great customer experience, you’llalmost certainly win.” Mark Hurst
KNOW THE BUSINESSHaving a satisfied user doesnt necessarily build a satisfiedcompany.Interview the stakeholders, get to understand their strategyand business goals.Ultimately usability must serve the bottom line.
HERE’S WHAT HAPPENS: Suits decide on business goals Convert to strategy Brings 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
DESIRABILITYDelight comes not from the latest widget but from helpinguses accomplish their goals.
DESIRABILITY Brings value to the user Highlights value Persuades user of value Adds emotional value to user piano stairs Pentagram
HOMEWORK WEEK #1 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.