Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
What’s in your BA Toolbox?
Has User Experience and Usability gone to the wayside?
Objectives
 Learn about usability and why it is important
 Learn the basics of user interface design
 Where to go to le...
Presenters
 Susan Bernstein, Senior BA Consultant / Lead
 Over 20 years as a BA designing and enhancing applications
 G...
BA Skills
Requirements
Management
Processes
(BPM)
Interfaces
Usability
Testing
Better Workflows
Leverage
technology and
im...
Business
Analyst
Common
Center
UX Analyst
BA Skills
BA Skills
“This is a great opportunity for business analysts, but it
requires a shift in the way they define requirements....
What is User Experience Design (UXD)?
 The process of enhancing user
satisfaction by improving the
usability, ease of use...
User Experience Design
Credit: http://usabilitylab.walkme.com/awesome-dilbert-cartoon-usability/
User Experience Design - Not Just UI
User Experience Design - Experts
 Large companies have UI/UX departments
 Public facing applications
 Added cost for an...
User Experience Design - Key Elements
User
research
Interface
Design
Usability
Visual
Design
Requirement Life Cycle
High Level Business Requirements
• User Research
Detailed Business Requirements
• Interface Design
...
User Research
User Research focuses on understanding user behaviours,
needs, and motivations
Credit: http://lerablog.org/b...
User Research Techniques
 User Observation
 User Interviews
 Focus Groups
 Surveys
User Research Techniques – User Observation
 Observe the users do their own work tasks
 Discuss in person any issues
 E...
User Research Techniques – User Interview
 Researcher meets with the user and asks questions
 Not as effective as User O...
User Research Techniques – Focus Groups
 Groups of 3 -12 participants are asked a series of
questions on a set of topics
...
User Research Techniques - Surveys
 Intercept Surveys
 Surveying website users while they are using the website
 Email ...
ROI of User Research
 Meet the user and build relationships
 Gain confidence with stakeholder and sponsor
 May surface ...
Requirement Life Cycle
High Level Business Requirements
• User Research
Detailed Business Requirements
• Interface Design
...
Interface Design
A user interface is like a joke.
If you have to explain it, it’s not that
good
Credits: http://comedycent...
Interface Design Principles - Visibility
Credit::http://www.givegoodux.com/visibility-5-principles-interaction-design-supe...
Interface Design Principles - Visibility
Lead the user through an interaction
Interface Design Principles - Visibility
Indicate what actions are available to them
Interface Design Principles - Visibility
Communicate the context of the situation
Interface Design Principles - Navigation
Interface Design Principles - Navigation
Navigation is intuitive
Credit: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Interface Design Principles
 Pay attention to...
Interface Design Deliverables -Site Maps
Credit: http://www.artofanderson.com/website-site-map-example/
Interface Design Deliverables – Screen Flow
Interface Design Deliverables -Wireframes
Credits: http://graphicdesign.stackexchange.com/questions/30860/what-is-the-diff...
Interface Design Deliverables - Mockups
Credit: http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wi...
ROI of Improved Interface Design
 Buy in from the business/users
 Validation of requirements prior to documenting
 Tang...
Credit: http://www.komododigital.co.uk/blog/2015/03/usability/
Usability
Usability - Testing
 Early stages
 Helps guide the design
 Assess the overall experience from user
 Helpful Ideas
 Co...
ROI of Usability
 Increase user productivity
 Decrease user errors
 Decrease training and customer support costs
 Decr...
Requirement Life Cycle
High Level Business Requirements
• User Research
Detailed Business Requirements
• Interface Design
...
Visual Design
Credit: http://www.commend.com/en/intercom-news/article/comwin-30-web-client.html
Visual Design - Branding
Visual Design – Colours and Contrast
Credit: http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html
Visual Design - Style Guide
Visual Design - Style Guide
 Documents basic rules and features
 Ensures best practices
 Provides uniformity and consis...
Visual Design - Style Guide
 Layout
 Typography
 Forms
 Tables
 Navigation
 Wizards
 Right mouse
 Dialogs and Mess...
Visual Design - Style Guide: Layout
 Create a Template for the pages in the application
 Define each section
Credit: htt...
Visual Design - Style Guide: Typography
 Define standard font, font sizes, colors, background color
 Headings (H1, H2, H...
Visual Design - Style Guide: Typography
Credit: http://alistapart.com/article/creating-style-guides
Visual Design - Style Guide: Typography
Credit: http://static.bbci.co.uk/gel/0.2.16/downloads/GEL_web_styleguide.pdf
Visual Design - Style Guide: Typography
Credit: https://ui.netbeans.org/docs/nbui_styleguide/style_guide.html
Visual Design - Style Guide: Forms
 Primary goal for every form is completion
 Provide a clear path
 Prevent users from...
Visual Design - Style Guide: Forms
 Use the right control to help with selection(s)
 Mandatory fields (*) visibility
 P...
Visual Design - Style Guide: Forms
Label alignment
 Top Aligned
 Data required is familiar
 Right Aligned
 Fast Comple...
Visual Design - Style Guide: Forms
Mandatory
 Clearly highlight required fields
 If most fields are required: indicate o...
Visual Design - Style Guide: Forms
 Don’t use placeholders to replace labels
 Placeholder is gone once user starts typin...
Visual Design - Style Guide: Forms
 Field length should provide enough room for input
Credits: http://static.lukew.com/we...
Visual Design - Style Guide: Forms
 Group like information
Credit: http://www.nngroup.com/articles/form-design-white-spac...
Visual Design - Style Guide: Forms
Buttons
 Execute a single action or range of actions
 Text should use verbs
 No more...
Visual Design - Style Guide: Forms
Buttons
 Label of button should be intuitive
 Instead of OK, be more descriptive
Visual Design - Style Guide: Forms
Buttons
 Button State
 Left, Middle, Right, Split?
Credit Top Image: https://mockupst...
Visual Design - Style Guide: Forms
Text
 Free form data entry
 Use Textarea for long entries and allow for scrolling
Visual Design - Style Guide: Forms
Checkbox
 Yes/No selection
 Multiple Yes/No’s
Visual Design - Style Guide: Forms
Radio buttons
 Select only of one of maximum 4-6 selections
Visual Design - Style Guide: Forms
Drop down lists
 Select only one of many
 Autocomplete – completes entry based on exi...
Visual Design - Style Guide: Forms
Credit: https://mockupstogo.mybalsamiq.com/projects/controls/story
Visual Design - Style Guide: Forms
Selection lists – one of many or many to many
Credit: Left: Microsoft Word, Right: http...
Visual Design - Style Guide: Forms
Table CRUD (Create, Retrieve, Update, Delete)
Credit: https://mockupstogo.mybalsamiq.co...
Visual Design - Style Guide: Forms
Pagination
Credit: https://mockupstogo.mybalsamiq.com/projects/controls/story
Visual Design - Style Guide: Feedback
Errors - Explain why the information was not valid and what
needs to be fixed
Credit...
Visual Design - Style Guide: Feedback
Errors – Avoid Negative words
Credit: http://uxmovement.com/forms/how-to-make-your-f...
Visual Design - Style Guide: Feedback
 Bad Feedback examples
Visual Design – Bad Examples
 Green background
 Labels – not intuitive, drop shadow
 Buttons – inconsistent
Credit: htt...
Visual Design – Bad Examples
 Too much going on
Credit: http://www.codeproject.com/KB/cs/AAL-5A/screenshot.jpg
ROI of Visual Design Skills
 Ease of use by customer / user
 Enhances user engagement
 Builds trust and interest in bra...
Resources - Internal
 UX Team
 Style Guides
 Developer
 Helps determine any technology constraints
 Challenge the dev...
Resources - External
Our picks - Websites
 Jakob Nielson – http://www.nngroup.com
 Luke Wroblewski – http://www.lukew.co...
Objectives
 Learn about usability and why it is important
 Learn the basics of user interface design
 Where to go to le...
Final note
Navigation and simplicity are key
Upcoming SlideShare
Loading in …5
×

What’s in your BA Toolbox – Has User experience and Usability gone to the wayside?

729 views

Published on

Susan Bernstein, CGI
Glenn Teneycke, Rogers

Large companies generally have a user experience (UX) department where these designers are mostly utilized for building public facing applications. User Experience designers complement a business systems analyst and vice versa. But, when the UX designers are not
available for non-public facing internal applications, the company’s department then relies upon the BSA for user design. Too many times, these applications lack in user design and usability. Even the simplest changes can be implemented incorrectly.
How does a BSA gain expertise in this area? This presentation offers pitfalls discovered in applications and how to avoid them.

Published in: Business
  • Be the first to comment

  • Be the first to like this

What’s in your BA Toolbox – Has User experience and Usability gone to the wayside?

  1. 1. What’s in your BA Toolbox? Has User Experience and Usability gone to the wayside?
  2. 2. Objectives  Learn about usability and why it is important  Learn the basics of user interface design  Where to go to learn more information when building applications
  3. 3. Presenters  Susan Bernstein, Senior BA Consultant / Lead  Over 20 years as a BA designing and enhancing applications  Glenn Teneycke, User Experience Designer  Over 15 years UX experience
  4. 4. BA Skills Requirements Management Processes (BPM) Interfaces Usability Testing Better Workflows Leverage technology and improve interfaces Improved User Experience Improved reliability and functionality
  5. 5. Business Analyst Common Center UX Analyst BA Skills
  6. 6. BA Skills “This is a great opportunity for business analysts, but it requires a shift in the way they define requirements. UX skills are often absent from business analysts' (BAs') tool kits, because BAs have been trained to engage "the business" to learn about requirements but not to do true user research that will deepen their understanding. By gaining key skills, performing user research, and actually "becoming" their application's end users while defining requirements, BAs can improve the user experience — and organizational outcomes — by helping create apps that are useful, usable, and desirable.” Credit: https://www.forrester.com/Business+Analysts+Seize+The+Opportunity+To+Deliver+Compelling+User+Experiences/fulltext/-/E-RES56758
  7. 7. What is User Experience Design (UXD)?  The process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product. Credit: Donald Norman “The Design of Everyday Things” ”, www.jnd.org
  8. 8. User Experience Design Credit: http://usabilitylab.walkme.com/awesome-dilbert-cartoon-usability/
  9. 9. User Experience Design - Not Just UI
  10. 10. User Experience Design - Experts  Large companies have UI/UX departments  Public facing applications  Added cost for any project  Leverage these experts depending on cost:  Low cost – Access company UI guidelines  Medium cost - Use to review solution and provide best practices  High - Work as UI experts on your project team
  11. 11. User Experience Design - Key Elements User research Interface Design Usability Visual Design
  12. 12. Requirement Life Cycle High Level Business Requirements • User Research Detailed Business Requirements • Interface Design • Usability System Requirements • Visual Design
  13. 13. User Research User Research focuses on understanding user behaviours, needs, and motivations Credit: http://lerablog.org/business/the-role-of-moderator-in-conducting-focus-groups/
  14. 14. User Research Techniques  User Observation  User Interviews  Focus Groups  Surveys
  15. 15. User Research Techniques – User Observation  Observe the users do their own work tasks  Discuss in person any issues  Encourage user to share past stories relevant to the project  Most effective  Most expensive
  16. 16. User Research Techniques – User Interview  Researcher meets with the user and asks questions  Not as effective as User Observation  What they say they do may not be what they actually do.
  17. 17. User Research Techniques – Focus Groups  Groups of 3 -12 participants are asked a series of questions on a set of topics  Avoid leading participants  Good for quick feedback  Danger of 1 or 2 participants dominating
  18. 18. User Research Techniques - Surveys  Intercept Surveys  Surveying website users while they are using the website  Email surveys  Select a group of users  Benefits  Capturing trends  Large amount of feedback at a low cost  Drawbacks  Feedback can be flawed  Never gets the same level of detail found in user observation
  19. 19. ROI of User Research  Meet the user and build relationships  Gain confidence with stakeholder and sponsor  May surface additional requirements earlier rather than later
  20. 20. Requirement Life Cycle High Level Business Requirements • User Research Detailed Business Requirements • Interface Design • Usability System Requirements • Visual Design
  21. 21. Interface Design A user interface is like a joke. If you have to explain it, it’s not that good Credits: http://comedycentral.mtvnimages.com/images/ccsu/ccsu_azizansari/ccsu_ansari_delicious/ccsu_ansari_delicious_preview2.jpg? http://www.artversion.com/ui-ux/
  22. 22. Interface Design Principles - Visibility Credit::http://www.givegoodux.com/visibility-5-principles-interaction-design-supercharge-ui-2-5/ Guide them through a series of tasks
  23. 23. Interface Design Principles - Visibility Lead the user through an interaction
  24. 24. Interface Design Principles - Visibility Indicate what actions are available to them
  25. 25. Interface Design Principles - Visibility Communicate the context of the situation
  26. 26. Interface Design Principles - Navigation
  27. 27. Interface Design Principles - Navigation Navigation is intuitive
  28. 28. Credit: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals Interface Design Principles  Pay attention to patterns and stay consistent  Use visual hierarchy  Navigation and tasks are clear to the user what is next or what can be done  Buttons show available actions  Speak their language  Keep it simple  Keep moving forward
  29. 29. Interface Design Deliverables -Site Maps Credit: http://www.artofanderson.com/website-site-map-example/
  30. 30. Interface Design Deliverables – Screen Flow
  31. 31. Interface Design Deliverables -Wireframes Credits: http://graphicdesign.stackexchange.com/questions/30860/what-is-the-difference-between-wireframes-and-mockups http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches/
  32. 32. Interface Design Deliverables - Mockups Credit: http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches/
  33. 33. ROI of Improved Interface Design  Buy in from the business/users  Validation of requirements prior to documenting  Tangibility as users are visual  Reduces Drop off rate
  34. 34. Credit: http://www.komododigital.co.uk/blog/2015/03/usability/ Usability
  35. 35. Usability - Testing  Early stages  Helps guide the design  Assess the overall experience from user  Helpful Ideas  Comments  Techniques  Use paper prototyping, screen flows, site maps, mockups  Comparative testing on multiple designs (A/B testing)  Simulations  Card Sorting
  36. 36. ROI of Usability  Increase user productivity  Decrease user errors  Decrease training and customer support costs  Decrease user support  Increase user satisfaction and loyalty  Increase sales  Lower abandon rates Credit: http://www.amanda.com/joomla_uploads/whitepapers/AM+A_ROIWhitePaper_20Apr0%201.pdf
  37. 37. Requirement Life Cycle High Level Business Requirements • User Research Detailed Business Requirements • Interface Design • Usability System Requirements • Visual Design
  38. 38. Visual Design Credit: http://www.commend.com/en/intercom-news/article/comwin-30-web-client.html
  39. 39. Visual Design - Branding
  40. 40. Visual Design – Colours and Contrast Credit: http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html
  41. 41. Visual Design - Style Guide
  42. 42. Visual Design - Style Guide  Documents basic rules and features  Ensures best practices  Provides uniformity and consistency  Standards vs. Guidelines  Logo / fonts are standards  Guidelines are best practices
  43. 43. Visual Design - Style Guide  Layout  Typography  Forms  Tables  Navigation  Wizards  Right mouse  Dialogs and Messages
  44. 44. Visual Design - Style Guide: Layout  Create a Template for the pages in the application  Define each section Credit: http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
  45. 45. Visual Design - Style Guide: Typography  Define standard font, font sizes, colors, background color  Headings (H1, H2, H3)  Labels  Menu names  Text  Hyperlinks  Define consistent spacing and alignment  Headings  Form controls (Text boxes, radio buttons, check boxes, etc.)  Buttons  Dialogs
  46. 46. Visual Design - Style Guide: Typography Credit: http://alistapart.com/article/creating-style-guides
  47. 47. Visual Design - Style Guide: Typography Credit: http://static.bbci.co.uk/gel/0.2.16/downloads/GEL_web_styleguide.pdf
  48. 48. Visual Design - Style Guide: Typography Credit: https://ui.netbeans.org/docs/nbui_styleguide/style_guide.html
  49. 49. Visual Design - Style Guide: Forms  Primary goal for every form is completion  Provide a clear path  Prevent users from making mistakes  Provide defaults  Focus on first enterable field  Disabled fields vs. Visibility  Only show what is needed
  50. 50. Visual Design - Style Guide: Forms  Use the right control to help with selection(s)  Mandatory fields (*) visibility  Prevent continuing until all mandatory fields are entered  Use icons, labels and images  Consistent use of controls, navigation, alignment, etc. throughout application
  51. 51. Visual Design - Style Guide: Forms Label alignment  Top Aligned  Data required is familiar  Right Aligned  Fast Completion time  Left Aligned  Data required can be unfamiliar
  52. 52. Visual Design - Style Guide: Forms Mandatory  Clearly highlight required fields  If most fields are required: indicate optional fields  Asterisk (*) or Text Credits: http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ http://uxmovement.com/forms/always-mark-optional-form-fields-not-required-ones/
  53. 53. Visual Design - Style Guide: Forms  Don’t use placeholders to replace labels  Placeholder is gone once user starts typing  Use placeholder for added helpful information Credits: http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ http://uxmovement.com/forms/always-mark-optional-form-fields-not-required-ones/
  54. 54. Visual Design - Style Guide: Forms  Field length should provide enough room for input Credits: http://static.lukew.com/webforms_lukew.pdf http://www.uie.com/articles/web_forms/
  55. 55. Visual Design - Style Guide: Forms  Group like information Credit: http://www.nngroup.com/articles/form-design-white-space/
  56. 56. Visual Design - Style Guide: Forms Buttons  Execute a single action or range of actions  Text should use verbs  No more than five buttons on a page  Multilingual considerations
  57. 57. Visual Design - Style Guide: Forms Buttons  Label of button should be intuitive  Instead of OK, be more descriptive
  58. 58. Visual Design - Style Guide: Forms Buttons  Button State  Left, Middle, Right, Split? Credit Top Image: https://mockupstogo.mybalsamiq.com/projects/controls/story
  59. 59. Visual Design - Style Guide: Forms Text  Free form data entry  Use Textarea for long entries and allow for scrolling
  60. 60. Visual Design - Style Guide: Forms Checkbox  Yes/No selection  Multiple Yes/No’s
  61. 61. Visual Design - Style Guide: Forms Radio buttons  Select only of one of maximum 4-6 selections
  62. 62. Visual Design - Style Guide: Forms Drop down lists  Select only one of many  Autocomplete – completes entry based on existing values or prediction  Combo box – allows input
  63. 63. Visual Design - Style Guide: Forms Credit: https://mockupstogo.mybalsamiq.com/projects/controls/story
  64. 64. Visual Design - Style Guide: Forms Selection lists – one of many or many to many Credit: Left: Microsoft Word, Right: https://mockupstogo.mybalsamiq.com/projects/controls/story
  65. 65. Visual Design - Style Guide: Forms Table CRUD (Create, Retrieve, Update, Delete) Credit: https://mockupstogo.mybalsamiq.com/projects/controls/story
  66. 66. Visual Design - Style Guide: Forms Pagination Credit: https://mockupstogo.mybalsamiq.com/projects/controls/story
  67. 67. Visual Design - Style Guide: Feedback Errors - Explain why the information was not valid and what needs to be fixed Credit: http://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/
  68. 68. Visual Design - Style Guide: Feedback Errors – Avoid Negative words Credit: http://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/
  69. 69. Visual Design - Style Guide: Feedback  Bad Feedback examples
  70. 70. Visual Design – Bad Examples  Green background  Labels – not intuitive, drop shadow  Buttons – inconsistent Credit: http://stackoverflow.com/questions/15293782/how-to-design-a-forms-in-wpf-application-without-missmatches-in-design-and-runti
  71. 71. Visual Design – Bad Examples  Too much going on Credit: http://www.codeproject.com/KB/cs/AAL-5A/screenshot.jpg
  72. 72. ROI of Visual Design Skills  Ease of use by customer / user  Enhances user engagement  Builds trust and interest in brand Overall Reduction in future costs of development and support Higher Customer Satisfaction
  73. 73. Resources - Internal  UX Team  Style Guides  Developer  Helps determine any technology constraints  Challenge the developers for better solutions  You  Learn what is available for your technology  Google similar web applications
  74. 74. Resources - External Our picks - Websites  Jakob Nielson – http://www.nngroup.com  Luke Wroblewski – http://www.lukew.com/  Web Style Guide - http://webstyleguide.com/wsg3/index.html  Alan Cooper - http://www.cooper.com/  Controls Sample - https://mockupstogo.mybalsamiq.com/projects/controls/ story  Kendo UI – http://demos.telerik.com/kendo-ui/  Jquery UI –http://jqueryui.com/demos/
  75. 75. Objectives  Learn about usability and why it is important  Learn the basics of user interface design  Where to go to learn more information when building applications
  76. 76. Final note Navigation and simplicity are key

×