SketchFlow, the prototyping environment in Expression Blend, lets you build deep, dynamic prototypes with a lot of “real” interactivity.
Sometimes, these deep prototyping abilities make it easy to forget about another side of SketchFlow – the side that lets you explore and “mind map” ideas without having to think about UI details earlier than you need to.
This “mind map” aspect always is an important aspect for me in designing UX – I like to think about the abstract flow, navigation and composition (in other words, the structure) of a design first, without immediately thinking in terms of concrete UI, controls and layouts. Early on, it often does not matter much which exact widget you use to navigate or interact.
To use SketchFlow in this way, don’t think about the screens you create as Windows, Pages, Dialogs or Forms. Think of the screens as whiteboards, and think of the SketchFlow map as a playground of connected whiteboards that lets you tell stories and explore ideas.
I often start by just drawing out a couple of empty screens on the map to represent separate ideas.
To add content, I might use the Note from the SketchStyles category in the asset panel, or the drawing tools to “sticky note” and sketch ideas on these whiteboards. I connect ideas/screens together as relationships become apparent. At this stage, I may sometimes use the built-in controls on a screen, but in general I am not focused on creating concrete UI yet.
One thing I really like about the “mind map” approach to SketchFlow is that it is pretty easy to explore design variants with this approach: I just create additional screens or flows for alternatives – after all, navigation connections don’t need to strictly mean navigation at all times.
Paper or the whiteboard still are my favorite place to draw, sketch and doodle. Luckily, taking photos with a little camera or a phone and dragging the pictures into SketchFlow is pretty fast and easy, as you can drag photos right from any explorer Window into Blend. This lets you bring paper and electronic sketching together, and use the SketchFlow map to triage or explore how static sketches feel as a flow.
Of course, you can also copy in sketches from dedicated drawing or sketching programs such as SketchBook Pro or ArtRage.
Keep in mind that the SketchFlow player lets you navigate through SketchFlow maps even if there is not a single bit of UI on your screens – that’s what the navigation bar at the right really is for: To explore SketchFlow maps that are mind-maps, as abstract and un-concrete as sets of idea sketches can be.
And of course, the player lets others participate in this process, by annotating your prototype and sharing their feedback with you: With the built-in feedback tools, the player becomes an additional arena for exploration and collaboration.
Good points to remember:
- Screens don’t have to represent dialogs, windows or pages. Think of them as just whiteboards. You can scribble notes, draw a process diagram, or a workflow, or a concept. Be as loose as you need – you can always refine and re-define the screen content later
- Bring in scanned or photographed sketches and drawings as content. Use the drawing tools or the sticky note to quickly jot down ideas. Try specialized sketching programs together with SketchFlow
- You can use the SketchFlow map to draw out mind maps and storyboards and idea flows even in the most abstract way… sometimes the map structure itself is exploration, without any content on the screens
- You can create design variants on the map quite easily by just dragging out new flows and screens
- Resist the temptation to add too much detail too early.
- When you run a SketchFlow prototype, you can navigate and explore even if there is no UI at all on your screens. Just use the navigation bar and map to go where you want to explore
- Take advantage of the feedback features in the player to present, collaborate and explore
- Refine where you want – remember that animation and visual states are often super easy and effective even if just applied to some image snippets, and if they are just done very roughly. Try out SketchFlow animations for walkthroughs – they let you do scenarios and stories really quickly. You don’t have to do precise “real” UI to take advantage of these features