Flowcharting: The UX Socket Wrench

787 views

Published on

Flowcharting is an underutilized but versatile tool that supports quality web interaction design. A lot of websites and web apps are good looking and use the latest technology, but are hard to use because the people who are designing them didn’t plan the feature relationships and navigation paths in the product. Flowcharting is a tool to help improve this aspect of web design. This talk covers a ridiculously condensed history of flowcharting, shows many uses related to web site, web app and desktop product design, shares case studies, and describes an award-winning flowcharting technique.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
787
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Flowcharting: The UX Socket Wrench

  1. 1. 1 UX Review Flowcharting: The UX Socket Wrench Darren Kall KALL Consulting customer and user experience design and strategy 1 hour version: 1Feb2012 © Kall Consulting 2012 +1 937-648-4966 --- darrenkall@kallconsulting.com 1
  2. 2. 2Versatile Tool UX Review © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 2
  3. 3. 3Limitations UX Review © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 3
  4. 4. 4History UX Review Flowcharting is not new. © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 4
  5. 5. 5 1984IBM UX Review Interaction Design © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 5
  6. 6. 6 Edwards Deming - 1950W. UX Review Process © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 6
  7. 7. 7 Petronius – 450 ADSt. UX Review Memory Aid © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 7
  8. 8. 8 – 900 BCEgypt UX Review Instruction © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 8
  9. 9. 9 – 900 BCEgypt UX Review Instruction © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 9
  10. 10. 10 – 10,000 BC15,000 UX Review Task Flow © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 10
  11. 11. 11Modern Day UX Review Product design is complicated The larger and more complex - the more appropriate to use flowcharting Humans have limited memory, limited ability to visualize, etc. Flowcharting augments human limitations in design Product Design © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 11
  12. 12. 12 Flowchart?Why UX Review The value of making a flowchart is KNOWING © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 12
  13. 13. 13How-To UX Review • Standards by discipline/industry • De facto standards • Applications online and desktop • Manual • Automated • I’m telling you the way I do it (biases showing) © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 13
  14. 14. 14 ExampleIxD UX Review Description © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 14
  15. 15. 15 ExampleIxD UX Review Finding what is missing early: • Pre-existing state • Notifying user • How assigned? Programmatic, manager, but not self? • Conflict with active content work • Conflict with populated working list • Navigation back and forth to working list to update • No way to tell task list that task was complete • Dead-ended in working area when task list was complete Cognitive Walkthrough Inspection © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 15
  16. 16. 16 MethodSAC UX Review Started with a standard process flow chart method that I learned at IBM NO Process Decision User input YES User input © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 16
  17. 17. 17 MethodSAC UX Review Added the predecessors and dependencies while I was at AT&T Bell Labs FTR-000 FTR-000 Document name Data Supply or type created FTR-000 FTR-000 FTR-000 FTR-000 FTR-000 NO User input EXIT ENTRY Process Decision Action BUTTON FTR-000 YES User input BUTTON FTR-000 FTR-000 Customer Data Process created Opportunity Mapping System View Dependencies © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 17
  18. 18. 18 MethodSAC UX Review Extended to screen mock-ups and complete actions possible to user while at Microsoft FTR-000 FTR-000 ProcessUI display Window FTR-000 FTR-000 FTR-000 User input HTML LINK Process FTR-000UI display FTR-000 User input Con-Area BUTTON User input TAB FTR-000 FTR-000 FTR-000 FTR-000 UI display User inputUI display UI display TAB Window Dialog FTR-000 Dialog FTR-000 User input User input JAVASCRIPT FTR-000 OTHERUI display FTR-000 PH FTR-000 User input FTR-000 FTR-000 BUTTON User input User input Process JAVASCRIPT FTR-000 HTML LINKUI display FTR-000 Other FTR-000 UI display User input Other OTHER FTR-000 Process Possibilities © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 18
  19. 19. 19Microsoft Best Practice UX Review Spread from UX/IxD to PM/BA Dev mapped code flow onto this flowchart Test used the flowchart as test plan Eliminated spec Code Mapping Test Plans Spec replacement © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 19
  20. 20. 20Microsoft Best Practice UX Review Became a collaborative technique Supported agile and waterfall development Living document, communications tool On wall behind office - scratching and tapping Collaboration © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 20
  21. 21. 21 UsesOther UX Review Other ways to use flowcharting for KNOWING © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 21
  22. 22. 22Contents UX Review DESK CAR Week 1 Writing Dictating Dictating Week 2 Writing Week 3 Writing Writing Writing Week 4 Practice Writing Planned vs. Actual Planning © Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 22

×