Wireframes vs flowcharts
Wireframes and flowcharts are basically diagrams created early on in the design process as a way of developing the core UX of a design.
A wireframe is the skeletal structure of a screen (or series of screens) that show the content and user interface in its most basic form. Fundamentally, wireframes consist of text, lines and shapes. They are designed to help develop the most important aspects of usability, accessibility and the overall user experience before starting to think about visual aesthetics.
When designers refer to mid-fidelity design (or sometimes low-fidelity design), they’re often referring to creating wireframes. High-fidelity would be considered fairly detailed with the addition of colour, fonts and other visual aesthetics. We‘d typically move up to screen design tools for that.
But how do we decide which content to display on which screens? How many screens do we even need? We need to plan our design first and this is exactly where flowchart tools become a tremendously useful asset in a designer’s toolbox.
With the functional requirements of a design already in mind (collected from user research earlier on in the process), organising the content and functions in a way that corresponds with the user’s mental expectations (i.e. according to how users expect them to be organised) is much easier when we’re mapping out the design with logical, easy-to-understand diagrams that illustrate the user flows and architecture of information.
We do this with what’s called a sitemap, depicted as a flowchart that describes the breakdown of functions and information across various screens, as well as how users might flow from one screen to the next as they digest this information and complete their objective in logical steps.
By using flowcharts to map out our design first, we’re ensuring that when we begin wireframing the screens, we know what we’re wireframing and the specific role that each screen plays in helping the user complete their objective.
customer journey maps to map existing apps and websites, don’t use connectors to illustrate user flows that aren’t being taken.
If creating a customer journey map, there’ll be insights to reap where certain touchpoints might indicate a UX flaw.
In our online store example, we realised that while users were reaching the ebook screens as desired, they weren’t actually buying the ebook until three to 16 days later, leading us to believe that we may be losing customers who forget to come back and buy them. Our map has helped us identify an area of interest. We can then make the decision to investigate this theory during user tests.
Fast-forward a little more, we found out (via the user tests) that customers are often too busy to properly assess the value of our ebooks and end up either bookmarking the web page or leaving it in their browser tabs for later. Another user flow told us that customers who immediately check out tend to do so on a Saturday, when they’re less busy.
So, in this next step we’ll use wireframes to design features that help users remember to go back and buy the book when they’re less busy. Note: abandoned cart recovery is useless here because customers aren’t actually adding ebooks to their cart.
Wireframes are used during the low-fidelity and mid-fidelity stages of design – they’re for experimenting with ideas when we haven’t quite figured out the user experience yet.
In the case of the store, we eventually came up with two ideas. One of the ideas was to add a flashing favicon to catch the user’s attention and remind
them that the browser tab still exists – this feature is for those who keep the web page in their tabs with the intention of going back to it later. The other idea was to design an on-site ‘remind me later’ feature.
Navigate back to the home screen (in Whimsical), and this time select “+ Create Wireframe”. You’ll notice that creating wireframes isn’t too different to creating flowcharts. We still have many of the same objects available and placing/arranging/styling them on the canvas is much like any other design tool. What’s different is that we have two new objects:
Element: E Frame: F
Elements are pre-made wireframe components that save us the hassle of having to mock up common design elements such as tables, buttons, menus and so on. Frames are like artboards, used to represent a specific device screen or browser window.
I couldn’t find anything to represent a browser tab, but a generic-looking button did the trick. Simply select elements, then click to add them to the canvas as with other objects. Next, mock up the required screens as wireframes. We decided to opt for a ‘Remind me later’ text link that appears alongside the call-to-action buttons, which then reveals a modal where the user can set up an email reminder. Remember to use connectors to convey how the user flows between these screens.
Next, we need to collect feedback. Don’t worry about how the wireframe looks, as long as the concept is easy to understand for those offering their feedback (that being said, Whimsical makes the wireframes look quite impressive). Click the share icon in the top-right corner, then choose Get Sharable Link, accessible from the drop-down list. Give this link to anybody that wishes to weigh in with their thoughts and feedback.
To add a comment, first click on an object on the canvas, then click the comment icon from the contextual toolbar. Comments can be replied to (creating a thread) and then resolved when amendments have been made or matters have been cleared up. We can do this several times, iterating over and over and collecting feedback each time until we’re sure that the user flow, information architecture and overall UX is top-notch.
Comparing wireframes (left) vs flowcharts (right). Flowcharts help to map out the design before wireframing them
Above A cross between a user flow map and a customer journey map, made with Whimsical’s flowchart tools
Above A mid-fidelity mockup that was made using Whimsical’s wireframe tools