SlideShare a Scribd company logo
1 of 33
Usability Lawrence Najjar
Outline ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Purpose ,[object Object],[object Object],[object Object],[object Object],[object Object]
Benefits of Usability ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Usability Benefits – Some Numbers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Usability Benefits – Money ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
General Usability Principles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example for “User is in control” ,[object Object]
Example for “Avoid errors” ,[object Object],[object Object]
Example for “Accessibility improves usability”” ,[object Object],[object Object]
Usability Process
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
Example of “low-fidelity prototype”
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
Example of “high-fidelity prototype”
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
Common User Interface Project ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Sample Web-based Concept
Accessibility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Some Accessibility Requirements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example of “color coding as only means of communicating info” ,[object Object],[object Object]
Browser Accessibility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example of “associate data cells and header cells … two or more logical levels” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Browser Accessibility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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;//www.ibm.com/i/c.gif&quot;/></a> . . . <a name=&quot;main&quot;><!--Main Content--></a> . . .
Getting Usability Services ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Usability Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Usability Resources (Continued) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thank You ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

Similar to Usability awareness brown bag

The Magic Of Application Lifecycle Management In Vs Public
The Magic Of Application Lifecycle Management In Vs PublicThe Magic Of Application Lifecycle Management In Vs Public
The Magic Of Application Lifecycle Management In Vs PublicDavid Solivan
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet ApplicationsYoussef Shaath
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For EverybodyEmpatika
 
What “Model” DITA Specializations Can Teach About Information Modelinc
What “Model” DITA Specializations Can Teach About Information ModelincWhat “Model” DITA Specializations Can Teach About Information Modelinc
What “Model” DITA Specializations Can Teach About Information ModelincDon Day
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
An Accessibility Update: Changes to Section 508
An Accessibility Update: Changes to Section 508An Accessibility Update: Changes to Section 508
An Accessibility Update: Changes to Section 508Kate Walser
 
Accessibility Enterprise
Accessibility EnterpriseAccessibility Enterprise
Accessibility EnterpriseJacques
 
Oracle OpenWorld 2009 AIA Best Practices
Oracle OpenWorld 2009 AIA Best PracticesOracle OpenWorld 2009 AIA Best Practices
Oracle OpenWorld 2009 AIA Best PracticesRajesh Raheja
 
User interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyUser interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyLawrenceNajjar
 
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...Glenn Teneycke
 
Standards Based Approach to User Interface Development
Standards Based Approach to User Interface DevelopmentStandards Based Approach to User Interface Development
Standards Based Approach to User Interface DevelopmentSameer Chavan
 
Recommendation systems
Recommendation systemsRecommendation systems
Recommendation systemsAnton Ermak
 
ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...
ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...
ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...Aberla
 
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015Mozaic Works
 

Similar to Usability awareness brown bag (20)

The Magic Of Application Lifecycle Management In Vs Public
The Magic Of Application Lifecycle Management In Vs PublicThe Magic Of Application Lifecycle Management In Vs Public
The Magic Of Application Lifecycle Management In Vs Public
 
Ch07
Ch07Ch07
Ch07
 
Nandini-CV
Nandini-CVNandini-CV
Nandini-CV
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)
EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)
EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
What “Model” DITA Specializations Can Teach About Information Modelinc
What “Model” DITA Specializations Can Teach About Information ModelincWhat “Model” DITA Specializations Can Teach About Information Modelinc
What “Model” DITA Specializations Can Teach About Information Modelinc
 
Rajendra asp.net
Rajendra asp.netRajendra asp.net
Rajendra asp.net
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
An Accessibility Update: Changes to Section 508
An Accessibility Update: Changes to Section 508An Accessibility Update: Changes to Section 508
An Accessibility Update: Changes to Section 508
 
Accessibility Enterprise
Accessibility EnterpriseAccessibility Enterprise
Accessibility Enterprise
 
Web engineering
Web engineeringWeb engineering
Web engineering
 
Oracle OpenWorld 2009 AIA Best Practices
Oracle OpenWorld 2009 AIA Best PracticesOracle OpenWorld 2009 AIA Best Practices
Oracle OpenWorld 2009 AIA Best Practices
 
User interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyUser interface design for the Web Engineering Psychology
User interface design for the Web Engineering Psychology
 
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
 
Standards Based Approach to User Interface Development
Standards Based Approach to User Interface DevelopmentStandards Based Approach to User Interface Development
Standards Based Approach to User Interface Development
 
Prakash_Ganapathy
Prakash_GanapathyPrakash_Ganapathy
Prakash_Ganapathy
 
Recommendation systems
Recommendation systemsRecommendation systems
Recommendation systems
 
ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...
ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...
ESEconf2011 - Hanin Makram: "Embedding Performance into Continuous Integratio...
 
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
 

Usability awareness brown bag

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 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
  • 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
  • 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.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 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;//www.ibm.com/i/c.gif&quot;/></a> . . . <a name=&quot;main&quot;><!--Main Content--></a> . . .
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

Editor's Notes

  1. [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.
  2. 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.
  3. This is the purpose of today’s brown bag.
  4. 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.
  5. 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.”
  6. We’re a business, so let’s talk about money. I checked the Dell statistics twice. The increase in DAILY purchases was $33 million.
  7. 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.]
  8. 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.
  9. “ 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.
  10. “ 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.
  11. 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.
  12. 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.”]
  13. 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.
  14. 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.”]
  15. This is a high-fidelity user interface prototype. It is written in Java and is INTERACTIVE..
  16. 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.]
  17. 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.
  18. 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.
  19. 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.]
  20. 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.]
  21. “ 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.
  22. 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.
  23. 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.
  24. [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.
  25. 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.
  26. 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.
  27. If you want to learn more about usability, here are some Web pages you can check out.
  28. And here is a book written by our very own Scott Isensee.
  29. [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.
  30. If you want to learn more about the statistics I mentioned, here are the sources.
  31. [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]