Flowcharts and Wireframes
Flowcharts
- Specifies sequence of interaction
- Covers contingencies and loops with conditionals
Wireframes
- Specifies screen layout including general placement and user controls
- Usually does not specify color, font and exact placement
General considerations
- Diagrams cannot stand alone: they require context, captions and additional explanations
- Consider presenting high-level overview first with references to details that appear later in the document
- Flowcharts and wireframes are useful for presenting resulting design; other diagrams (e.g. mental maps, sketches) are useful for the design process
Discussion questions
- How might flowcharts and wireframes be combined?
- What tools can be used? Does it matter?