Usability awareness brown bag


Published on

Describes the benefits of usability, general usability principles, usability process & activities, and accessibility.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • [introduce speaker (years at BMC, education, years of usability experience)] [introduce other department members; mention other offices and new-hires] [you’ve got a couple of pieces of paper on your tables, Clair and Rebecca will tell you what they are for] Clair and Rebecca will lead usability lab tours after the talk. If you want to go on a usability lab tour, just meet up with them after we’re done.
  • This is what we’re going to cover today. Since we only have an hour, we’ll move quickly through these topics. Remember, this is not a presentation; it is a brown bag. Informal, interactive. Please make comments and ask questions as we move along.
  • This is the purpose of today’s brown bag.
  • Here are some well-known general benefits of usability. Help me out. Why do they work? Increase user satisfaction – Easier to learn and use. Increase user productivity – Easier to learn and use, get more work done in less time Increase product acceptance – Users productive right away, uses familiar words and steps. Increase product marketability – Easier to demo, looks easy to use. Decrease development costs – Requirements control, task analysis, iterative design allow developers to code right the first time. Decrease user error and frustration – Users just get their tasks done. UI is transparent. Decrease training costs – More intuitive, means less training needed. Decrease support costs – Since many support calls due to usability, if improve usability then get fewer calls. Decrease maintenance costs – Upfront requirements analysis means fewer customer change requests and fewer usability bugs to fix.
  • Those were some general benefits of usability. Let’s look at some numbers. The number 2 predictor of successful projects was “executive management support.” The number 2 predictor of failed projects was “lack of user involvement.” The number 1 predictor of failed projects was “incomplete requirements.”
  • We’re a business, so let’s talk about money. I checked the Dell statistics twice. The increase in DAILY purchases was $33 million.
  • Let’s talk about some general usability principles. As I go through these, please tell what you think they mean. [For “Consistency is usability, “ could mention SmartDBA console, common UI project. Put navigation in consistent locations, use consistent name for functions, etc.] [For “User is in control,” be able to stop a long process, go back, undo a delete, skip a Flash animation] [For “Just because you can,” say how just because we have some neato, coolo technology does not mean we should use it. We use what will help users get their work done easily.] [For “Don’t make users think,” could mention that users are trying to get their work done. They have lots of other work to do. Help users get their work done quickly by providing intuitive UIs.]
  • User is not in control when you go to a Web site that has a Flash introduction that you cannot skip. Every time you go to the page, you have to watch the entire Flash introduction again. User is in control when designers add a “Skip Intro” link. Even better, don’t provide a Flash intro at all.
  • “ Before” does not tell user in what format to enter date. So, user is likely to get error that tells user the format was wrong and how to enter date format correctly. UI forces user to get an error before figuring out what to do. “ After” tells user correct date format before user begins to enter date. So, user enters date in correct format the first time. UI allows user to avoid an error. This is a very simple example that shows the concept.
  • “ Before” forces user to figure out what the status graphic means or to mouseover if a tool tip is available. Difficult for blind users to understand (unless the developer provides an ALT tag for the screen reader to read). Difficult for users with color-deficiency to see. Difficult for black and white printout to show color change. “ After” allows blind users and users with color deficiencies to understand meaning of graphic. Shows differences on black and white printout. Status is immediately obvious to users without visual challenges.
  • This is a summary of the new Enterprise Database Management (EDM) usability process. We’re hoping to use a similar process in ESM. The table shows each of the phases in the development process (Concept, Analysis, Definition, Design, Development, Verification). The project management office documents that are affected at each phase are also shown (MRD, PFG, SRS, RCD, SDD). The usability tasks for each phase are shown along the bottom. The left side shows levels of product releases. An “A” launch is a major new version of a product. A “C” launch is just a few minor changes. And a “B” launch is somewhere in the middle. The number of usability tasks that we should do increases as the releases get larger. So we do a lot of work for “A” launches but much less work for “C” launches.
  • PMO = Project Management Office MRD = Market Requirements Document PFG = Product Feature Guide UPP = Usability Project Plan SRS = Software Requirements Specification Since that chart was hard to read, the next few pages show the usability tasks we can perform for each phase. [Note: For “Define usability goals for project,” we define high-level usability goals, like “Be quick and easy for users to get tasks done without training.”]
  • This is a low-fidelity user interface prototype for the product I’m on currently. It was created in Visio and is STATIC. It is a simple, easy-to-change drawing. It is great to work with because we just draw UI improvements right on the paper, I got make the changes, and we do it all over again.
  • RCD = Release Contents Document SDD = Software Design Document [Note: For “Define usability objective,” we get very specific and create detailed, measurable usability objectives like “95% of representative users shall perform the most frequent and important tasks without errors in five minutes or less.”]
  • This is a high-fidelity user interface prototype. It is written in Java and is INTERACTIVE..
  • QA = Quality Assurance BPP = Beta Project Plan [Note: For “Create usability test plan,” we define WHO tests the usability, WHAT tasks they perform, and HOW we measure usability performance.”] [Note: For “Conduct usability walkthrough,” we step through the UI actions that users have to do to get their work done. We look for UI design problems, such as navigational dead-ends.] [Note: For “Perform usability test,” we ask representative users to perform typical tasks with the prototype or incomplete actual code.] [Note: For “Conduct executive installation and use of product,” we try to get one of the business unit managers to install and use the product. That way, the manager gets a better idea what his or her business unit is making and trying to sell.]
  • Now, I ‘d like to let you know about a couple of things that will affect usability and, maybe, your job in a big way. The first one is the common user interface project. It is being led by our manager, Tony Haverda, and our visual designer, Molly Barksdale, but all the usability people are helping out. The project got reviewed and approved by upper-level BMC management. Was requested by many of our customers. Improves BMC branding because will provide a consistent look to all the items that consumers see that have our logo on them. Improves ease of use because our software UIs will look very similar to each other. This is something we don’t have now. Decreases development time because we will have a common library of UI code for developers to use. Decreases QA evaluation time because our software UIs will be consistent. Reduces maintenance costs because the common code should have few bugs and UI code will be reusable.
  • Here is the most recent version of the Web-based common UI design. We are still iterating it. You can see that Metropolis wants to get a common user interface in their next version.
  • Another concept that will affect all of us is accessibility. [Note: For “Spreading beyond Federal government,” it is being adopted by state, county, and city governments. I wouldn’t be surprised if some larger companies add it to their purchase requirements.] [Note: For “Provides a marketing opportunity for us,” Section 508 requires the Federal government to buy the most accessible product, regardless of price. If we make our products more accessible than our competitors’ products, and we can prove it, then the government has to buy our products.]
  • Here are some of the Section 508 standards that affect us. [For “Color coding”] We can’t just change the color of text or a graphic to indicate a change in status. We need to change the text. [For “electronic forms”] Assistive technology is some device that helps a person with disabilities to perform tasks. The most well-known assistive technology for software is the screen reader. But this requirement also means that users who can operate only a keyboard (like users who can’t see or users with cerebral palsy) have to be able to use the form. [For “Support services”] E-mail and digital versions of user guides are big helps here. But one of the challenges is, what happens when a deaf user calls our customer support line? Deaf people use something called a “teletypewriter” – a “TTY” – to send text over the phone. Right now, I don’t think our customer support people have TTYs.]
  • “ Before” uses the color red to highlight a failed database. People who cannot see or people who are color deficient cannot tell that a database failed. “ After” keeps the red text highlight but supplements it with the word “Failed.” The graphic helps get users’ attention and should also have a programming tag that describes its meaning. This change also improves the usability.
  • So, those were some general accessibility requirements. Since some of our products are moving to the Web, here are some accessibility requirements for browser-based user interfaces. [For “text equivalent”] What is a “non-text element?” A graphic, sound, video. [For “Row and column headers”] We need to use “TH” tabs to identify headers. [For “Markup shall be”] One way to do this is to assign an ID attribute to each row and column header, then use the HEADER attribute to call the row and column header for each cell. That way, screen readers read the row and column header for each cell in a table.
  • The TH tags set column and row headers. Each TH tag has a unique ID attribute. On each table cell, the HEADER tag calls the ID’s for the column and row headers. The screen reader reads the column and row name for each cell.
  • [For “When pages utilize”] What are some scripting languages? Javascript, Perl [For “When a web page”] So we need to provide links to allow users to get the plug-ins or applets. And those plug-ins and applets have to be accessible. [For “A method shall”] The problem that this requirement addresses is this: Screen readers read a table from left to right, one cell at a time. If we use a table to lay out the content, we often put the navigation controls in the left column and the content in the next column to the right. The screen reader reads the entire left column (every navigation control) before getting to the main content. This gets very annoying when users of screen readers have to listen to all the navigation controls on every page. Here is a clever way to get around this problem. Near the top of the page, insert a graphic that is 1 pixel. Make the pixel match the background color of the page. Make the pixel graphic a hyperlink with an ALT tag that says “Skip to main content.” That way, sighted readers don’t notice the graphic, but users of screen readers hear it and can skip right to the main content.
  • Right after the IBM logo and ALT tag, IBM inserts a one-pixel graphic that we can’t see, but screen readers read. It is a hyperlink. When users of screen readers click on it, the screen reader goes right to the main content on the page.
  • So, if you want to get usability services for your project, here are some of the services we can provide and who to contact to get them.
  • If you want to learn more about usability, here are some Web pages you can check out.
  • And here is a book written by our very own Scott Isensee.
  • [For “Identify users and”] WHO is using the product,WHAT they are trying to get done [For “Keep users involved”] Remember the statistics about user involvement and the success of a product? Ask users to help you gather requirements, organize information, use familiar workflows, and give you feedback as you evolve the user interface design. [For “Iterate designs quickly”] This makes a huge contribution to improving usability. Design, get user feedback, improve, repeat. [For “Evaluate usability with”] Get representative users to perform typical tasks.
  • If you want to learn more about the statistics I mentioned, here are the sources.
  • [this is how to get a copy of this presentation] [and how to get usability services] [So, will you please fill out the feedback questionnaire and give it to Rebecca?] [If you want to go on a usability lab tour, please meet up with Clair and Rebecca]
  • Usability awareness brown bag

    1. 1. Usability Lawrence Najjar
    2. 2. Outline <ul><li>Purpose </li></ul><ul><li>Usability benefits </li></ul><ul><li>General usability principles </li></ul><ul><li>Usability process and activities </li></ul><ul><li>Common user interface project </li></ul><ul><li>Accessibility </li></ul><ul><li>Getting usability services </li></ul><ul><li>Usability resources </li></ul><ul><li>Summary </li></ul><ul><li>Usability lab tour </li></ul>
    3. 3. Purpose <ul><li>Learn some usability principles </li></ul><ul><li>Get familiar with usability process, tools, and </li></ul><ul><li>techniques </li></ul><ul><li>Get exposed to accessibility </li></ul><ul><li>Learn how to get usability services </li></ul>
    4. 4. Benefits of Usability <ul><li>Increase </li></ul><ul><ul><li>User satisfaction </li></ul></ul><ul><ul><li>User productivity </li></ul></ul><ul><ul><li>Product acceptance </li></ul></ul><ul><ul><li>Product marketability </li></ul></ul><ul><li>Decrease </li></ul><ul><ul><li>Development costs </li></ul></ul><ul><ul><li>User errors and frustration </li></ul></ul><ul><ul><li>Training costs </li></ul></ul><ul><ul><li>Support costs </li></ul></ul><ul><ul><li>Maintenance costs </li></ul></ul><ul><ul><li>(Karat, 1990) </li></ul></ul>
    5. 5. Usability Benefits – Some Numbers <ul><li>Estimated savings when software problem found and </li></ul><ul><li>fixed in early design phase rather than after delivery: </li></ul><ul><li>100 times (Boehm, 1987) </li></ul><ul><li>Estimated amount of software code saved by </li></ul><ul><li>prototyping compared to not prototyping: 40% </li></ul><ul><li>(Boehm et al., 1984) </li></ul><ul><li>Rank of user involvement as predictor of successful </li></ul><ul><li>projects: 1 (The Standish Group, 1994) </li></ul>
    6. 6. Usability Benefits – Money <ul><li>Estimated sales increase for SQL Explorer 5.0 vs. 4.0 </li></ul><ul><li>due to usability improvements: 25% (Landry, 2001) </li></ul><ul><li>Increase in e-commerce sales after improving usability </li></ul><ul><li>on 400% (Tedeschi, 1999) </li></ul><ul><li>Increase in daily online purchases after improving </li></ul><ul><li>usability on $33 million (Black, 2002) </li></ul>
    7. 7. General Usability Principles <ul><li>Know your user. </li></ul><ul><li>You’re not the user. </li></ul><ul><li>Iterate. Iterate. Iterate. </li></ul><ul><li>Consistency is usability. </li></ul><ul><li>The user is in control. (example) </li></ul><ul><li>Just because you can, doesn’t mean you should. </li></ul><ul><li>Make important stuff look important. </li></ul><ul><li>Avoid errors. (example) </li></ul><ul><li>Accessibility improves usability. (example) </li></ul>
    8. 8. Example for “User is in control” <ul><li>Needs a “Skip Intro” hyperlink </li></ul>
    9. 9. Example for “Avoid errors” <ul><li>Before </li></ul><ul><li>After </li></ul>
    10. 10. Example for “Accessibility improves usability”” <ul><li>Before </li></ul><ul><li>After </li></ul>
    11. 11. Usability Process
    12. 12. Usability Activities PHASE ACTIVITY PMO DOCUMENT Concept User profile creation MRD Define usability activities for project PFG Define usability goals for project PFG Review UPP, MRD, PFG MRD, PFG Analysis Perform task analysis SRS Create and evaluate low-fidelity prototype (example) SRS
    13. 13. Example of “low-fidelity prototype”
    14. 14. Usability Activities (Continued) Review SRS architecture SRS Definition Write usability project plan RCD Define usability objectives RCD Design Request & define product visuals SDD Evaluate hi-fidelity prototype (example) SDD Write user interface design specification SDD Review SDD architecture SDD
    15. 15. Example of “high-fidelity prototype”
    16. 16. Usability Activities (Continued) Present usability section to release team SDD Create usability test plan Development Conduct usability walkthrough Perform usability test Create QA usability checklist QA Master Test Plan Review Beta Project Plan BPP Verification Conduct executive installation and use of product
    17. 17. Common User Interface Project <ul><li>Goal: Common visual “look” for all BMC products, </li></ul><ul><li>documentation, and marketing materials </li></ul><ul><li>Advantages: </li></ul><ul><ul><li>Addresses customer preferences </li></ul></ul><ul><ul><li>Improves BMC branding </li></ul></ul><ul><ul><li>Improves ease of use </li></ul></ul><ul><ul><li>Decreases development time </li></ul></ul><ul><ul><li>Decreases QA evaluation time </li></ul></ul><ul><ul><li>Reduces maintenance costs </li></ul></ul><ul><li>Status </li></ul><ul><ul><li>Presented idea to various internal BMC groups </li></ul></ul><ul><ul><li>Got feedback from customers </li></ul></ul><ul><ul><li>Currently iterating Web-based design </li></ul></ul>
    18. 18. Sample Web-based Concept
    19. 19. Accessibility <ul><li>Required for Federal electronic and information </li></ul><ul><li>technology purchases by Section 508 of the </li></ul><ul><li>Rehabilitation Act of 1998 </li></ul><ul><li>Requires equivalent functional access for persons with </li></ul><ul><li>disabilities compared to persons without disabilities </li></ul><ul><li>Spreading beyond Federal government </li></ul><ul><li>Provides a marketing opportunity for us </li></ul>
    20. 20. Some Accessibility Requirements <ul><li>“ Color coding shall not be used as the only means of </li></ul><ul><li>conveying information, indicating an action, prompting </li></ul><ul><li>a response, or distinguishing a visual element.” </li></ul><ul><li>(example) </li></ul><ul><li>“ When electronic forms are used, the form shall allow </li></ul><ul><li>people using assistive technology to access the </li></ul><ul><li>information, field elements, and functionality required </li></ul><ul><li>for completion and submission of the form, including all </li></ul><ul><li>directions and cues.” </li></ul><ul><li>“ Support services for products shall accommodate the </li></ul><ul><li>communication needs of end-users with disabilities.” </li></ul>
    21. 21. Example of “color coding as only means of communicating info” <ul><li>Before </li></ul><ul><li>After </li></ul>
    22. 22. Browser Accessibility <ul><li>“ A text equivalent for every non-text element shall be </li></ul><ul><li>provided (e.g., via &quot;alt&quot;, &quot;longdesc&quot;, or in element </li></ul><ul><li>content).” </li></ul><ul><li>“ Row and column headers shall be identified for data </li></ul><ul><li>tables.” (example) </li></ul><ul><li>“ Markup shall be used to associate data cells and </li></ul><ul><li>header cells for data tables that have two or more </li></ul><ul><li>logical levels of row or column headers.” (example) </li></ul>
    23. 23. Example of “associate data cells and header cells … two or more logical levels” <ul><li><TABLE </li></ul><ul><li>BORDER=1 CELLPADDING=3 CELLSPACING=1 FRAME=BOX </li></ul><ul><li>summary=&quot;This database status summary table </li></ul><ul><li>lists the Status, Office, Datasource, and DBMS </li></ul><ul><li>(column headings) and the regions (rows)&quot;> </li></ul><ul><li><CAPTION>Database Backups</CAPTION> </li></ul><ul><li><TR> </li></ul><ul><li><TH></TH> </li></ul><ul><li><TH id=&quot;c2&quot; >Status</TH> </li></ul><ul><li><TH id=&quot;c3&quot;>Office</TH> </li></ul><ul><li><TH id=&quot;c4&quot;>Datasource</TH> </li></ul><ul><li><TH id=&quot;c5&quot;>DBMS</TH> </li></ul><ul><li></TR> </li></ul><ul><li><TR> <TH id=&quot;r2&quot; >East Region</TH> </li></ul><ul><li><TD></TD><TD></TD><TD></TD><TD></TD></TR> </li></ul><ul><li><TR> <TD id=&quot;r3&quot; ></TD> </li></ul><ul><li><TD headers=&quot;c2 r2 r3 &quot; >Failed</TD> </li></ul><ul><li><TD headers=&quot;c3 r2 r3&quot;>New York</TD> </li></ul><ul><li><TD headers=&quot;c4 r2 r3&quot;>zimbabwe : ZIM817MA</TD> </li></ul><ul><li><TD headers=&quot;c5 r2 r3&quot;>Oracle 8.0.5</TD></TR> </li></ul><ul><li>. </li></ul><ul><li>. </li></ul><ul><li>. </li></ul><ul><li></TABLE> </li></ul>
    24. 24. Browser Accessibility <ul><li>“ When pages utilize scripting languages to display </li></ul><ul><li>content, or to create interface elements, the </li></ul><ul><li>information provided by the script shall be identified </li></ul><ul><li>with functional text that can be read by assistive </li></ul><ul><li>technology.” </li></ul><ul><li>“ When a web page requires that an applet, plug-in or </li></ul><ul><li>other application be present on the client system to </li></ul><ul><li>interpret page content, the page must provide a link to </li></ul><ul><li>a plug-in or applet that complies with §1194.21(a) </li></ul><ul><li>through (l).” </li></ul><ul><li>“ A method shall be provided that permits users to skip </li></ul><ul><li>repetitive navigation links.” (example) </li></ul>
    25. 25. Example of “skip repetitive navigation links” <a href=&quot;#main&quot;><img alt=&quot;Skip to main content&quot; height=&quot;1&quot; width=&quot;1&quot; border=&quot;0&quot; src=&quot;//;/></a> . . . <a name=&quot;main&quot;><!--Main Content--></a> . . .
    26. 26. Getting Usability Services <ul><li>Usability services include: </li></ul><ul><ul><li>Getting usability person assigned to your project </li></ul></ul><ul><ul><li>Having usability person perform usability review </li></ul></ul><ul><ul><li>Creating visual designs </li></ul></ul><ul><ul><li>Getting assistance with accessibility </li></ul></ul><ul><li>Contact: </li></ul><ul><ul><li>Tony Haverda, manager, Interface Design and Usability </li></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><ul><ul><li>Internal 2-6474 </li></ul></ul></ul>
    27. 27. Usability Resources <ul><li>BMC Usability Web site: </li></ul><ul><li>Feigenbaum, B. A. (2002, October 1). Coding for </li></ul><ul><li>accessibility – Use JFC/Swing to build accessibility into </li></ul><ul><li>your Java applications [On-line]. Available: </li></ul><ul><li> </li></ul><ul><li> library/j-access/ </li></ul><ul><li>Hom, James (2003). Usability methods toolbox [On- </li></ul><ul><li>line]. Available: </li></ul><ul><li>Nielsen, J. – Jakob Nielsen’s Web site [On- </li></ul><ul><li>line]. Available: </li></ul>
    28. 28. Usability Resources (Continued) <ul><li>Sun Microsystems (2003). Accessibility quick reference </li></ul><ul><li>[On-line]. Available: </li></ul><ul><li> developers/access.quick.ref.html#apptips </li></ul><ul><li>Vredenburg, K., Isenssee, S., & Righi, C. (2001). User- </li></ul><ul><li>centered design: An integrated approach. Prentice </li></ul><ul><li>Hall: Upper Saddle River, NJ. </li></ul>
    29. 29. Summary <ul><li>For maximum usability: </li></ul><ul><ul><li>Start usability work early </li></ul></ul><ul><ul><li>Identify users and their objectives </li></ul></ul><ul><ul><li>Keep users involved throughout the project </li></ul></ul><ul><ul><li>Iterate designs quickly, easily, and cheaply </li></ul></ul><ul><ul><li>Evaluate usability with representative users </li></ul></ul>
    30. 30. References <ul><li>Black, J. (2002, December 4). Usability is next to </li></ul><ul><li>profitability. BusinessWeek Online [On-line]. Available: </li></ul><ul><li> </li></ul><ul><li> dec2002/tc2002124_2181.htm </li></ul><ul><li>Boehm, B. (1987). Industrial software metrics top 10 </li></ul><ul><li>list. IEEE Software, 4(5), 84-85. </li></ul><ul><li>Boehm, B. W., Gray, T. E., & Seewaldt, T. (1984). </li></ul><ul><li>Prototyping vs. specifying: A multi-project experiment. </li></ul><ul><li>IEEE Transactions on Software Engineering, 10(3), 290- </li></ul><ul><li>333. </li></ul>
    31. 31. References <ul><li>Landry, R. (2001, September 24). Usability ROI. BMC </li></ul><ul><li>internal memo to Neil Backes from Scott Isensee. </li></ul><ul><li>Statement by Rich Landry, SQL Explorer product </li></ul><ul><li>manager. </li></ul><ul><li>Karat, C.-M. (1990). Cost-benefit analysis of usability </li></ul><ul><li>engineering techniques. Proceedings of the Human </li></ul><ul><li>Factors Society, Orlando, Florida, 839-843. </li></ul><ul><li>Section 508 standards [On-line]. Available: </li></ul><ul><li> </li></ul>
    32. 32. References <ul><li>Tedeschi, B. (1999, August 30). Good Web site design </li></ul><ul><li>can lead to healthy sales. New York Times e-commerce </li></ul><ul><li>report [On-line]. Available: </li></ul><ul><li> library/tech/99/08/cyber/commerce/ </li></ul><ul><li> 30commerce.html </li></ul><ul><li>The Standish Group (1994). The CHAOS report [On- </li></ul><ul><li>line]. Available: </li></ul><ul><li> sample_research/chaos_1994_1.php </li></ul>
    33. 33. Thank You <ul><li>To get a copy of this presentation: </li></ul><ul><li>Go to </li></ul><ul><li>Click on “Usability Brown Bag” </li></ul><ul><li>To get usability services: </li></ul><ul><ul><li>Contact Tony Haverda, manager, Interface Design and Usability </li></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><ul><ul><li>Internal 2-6474 </li></ul></ul></ul><ul><li>Usability lab tour! </li></ul>