Have you ever received feedback on new website mockups or prototypes starting with “Which language is that? I don’t understand “lorem ipsum!!”?
Well, yes? Then you’ve been there. And it isn’t really a great feeling. Not because of the question itself.
In this post we are going to show you 5 tips on how to prevent yourself from receiving such feedback and how to make your website mockups even better.
1. The Definition of Prototype Fidelity
As Jerry Cao wrote in a recent article on sixrevisions.com, the key to a successful website mockup can be found in the definition of the level of fidelity that will be used in the prototyping stage.
Starting with pen and paper for working on some first scribbles and sketches is a clear win. These sketches will be pretty generic and low-fi. While increase the fidelity of those sketches, I’d recommend launching a simple sketch tool, like balsamiq or moqups. Only go pro and use tools like Photoshop (or similar software) when you’re working high fidelity sketches.
The key takeaway here is to find a great timing from sketch to low-fi, to hi-fi.
(source: jfarny.com)
Both, starting too early or too late with high fidelity mockups will waste resources (both time and material) and you’ll risk to end up with a mediocre prototype.
2. Identify problems
While working on sketches and wireframe we easily tend to think about solutions, before we tackle the “real problem”.
The customer request: “make the logo bigger” isn’t identifying any problem.
It’s a proposed solution, though you’re not given information about the problem for that solution. Asking a lot of “Why”-questions can help in such situations.
Nowadays, we are trained to think in solutions and in many situations those thinking can be quite handy. Though, it isn’t really that much helpful when we’re in the middle of the creative process drafting wireframes and mockups.
And most of these solutions come in form of change requests, like “Can we change the color from red to blue?”.
So, if you’re getting such a “solution” from your colleagues and clients, try to ask the Why-question. For example: “Can you tell me what the challenge is that you’re trying to solve with this?”.
Getting to the ground and discovering the real problems will not only result in a way better outcome, but will make your life as a designer and developer easier 🙂
3. Use realistic assets
I know, images and copy won’t be on your priority list while working on a new mockup. Though they should be. Really.
The right asset in your mockup can not only ruin your whole wireframe, but it can also bring it to the next design level, the high fidelity design.
Besides the sketching and mockup stage, you (and your colleagues & clients) should be working on the visual language of your new web app or website as well.
Of course, there’s no need to present custom images or finished illustration in those mockups.
There’s a broad range of great stock images and videos available which will help you to make your mockups more vivid and will definitely make the difference when presenting those mockups.
(source: Google Style Imagery)
4. Fail fast and fix things faster
Keeping your mockup and prototyping workflow static can be a great waste of time. In most cases it’s way more efficient to keep it lean and simple. When concluding on the first sketches and wireframes you can iterate more quickly by little baby steps and a close feedback process.
Therefore I’d recommend to:
- Keep your prototyping workflow transparent & provide updates to your team.
- Communicate clearly and address issues right when they happen.
- Make sure to involve every project stakeholder.
5. Use different tools for different prototyping stages
Don’t get me wrong. In many of my previous blog posts, I’ve highlighted the importance of shared data and connected systems. However, this can be quite a challenge during the prototyping stage. In many cases it can even increase creativity when switching tools for different tasks. Personally, I found the following setup of tools and media quite useful:
- Sketches: using real paper and whiteboards for collecting first ideas. Evernote can be a great assistant for collecting those ideas.
- Wireframes and mockups: While working on Wireframes and mockups, balsamiq or moqups comes in super handy.
- prototypes: bringing your mockups to real life, tools like InVision, Usersnap or CodePen help you to collaborate on your drafts and prototypes while making sure that no feedback and idea is left behind.
Now up to you.
Being a creative professional requires deep expertise on the table. So do our clients. Just that our areas of expertise are different.
Your colleagues or clients know a lot about their audience and strategic goals. So let’s create a win-win situation for both parties. And let them guide when time’s appropriate and guide them how to make the most of the prototyping phase.
What’s your setup while working on mockups and prototypes?
This article was brought to you by Usersnap – a visual bug tracking and feedback tool for every web project.
Capture user feedback easily. Get more insights and make confident product decisions.
Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.
And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
