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.

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
Versatile Tool
UX Review
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 2

3. 3
Limitations
UX Review
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 3

4. 4
History
UX Review
Flowcharting is not new.
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 4

5. 5 1984
IBM
UX Review
Interaction Design
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 5

6. 6 Edwards Deming - 1950
W.
UX Review
Process
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 6

7. 7 Petronius – 450 AD
St.
UX Review
Memory Aid
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 7

8. 8 – 900 BC
Egypt
UX Review
Instruction
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 8

9. 9 – 900 BC
Egypt
UX Review
Instruction
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 9

10. 10 – 10,000 BC
15,000
UX Review
Task Flow
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 10

11. 11
Modern 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 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
How-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 Example
IxD
UX Review
Description
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 14

15. 15 Example
IxD
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 Method
SAC
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 Method
SAC
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 Method
SAC
UX Review
Extended to screen mock-ups and complete actions possible
to user while at Microsoft
FTR-000
FTR-000
Process
UI display
Window
FTR-000
FTR-000
FTR-000 User input
HTML LINK
Process
FTR-000
UI display
FTR-000
User input
Con-Area
BUTTON
User input
TAB
FTR-000
FTR-000 FTR-000 FTR-000
UI display User input
UI display UI display
TAB
Window
Dialog FTR-000 Dialog
FTR-000
User input
User input
JAVASCRIPT
FTR-000 OTHER
UI display
FTR-000
PH FTR-000
User input FTR-000 FTR-000
BUTTON
User input
User input Process
JAVASCRIPT
FTR-000 HTML LINK
UI 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
Microsoft 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
Microsoft 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 Uses
Other
UX Review
Other ways to use flowcharting for KNOWING
© Kall Consulting 2012 --- +1 937-648-4966 --- darrenkall@kallconsulting.com 21

22. 22
Contents
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