Prototype The Bejeezus Out Of It! The mindful way to prototyping.

Clickable prototypes are nothing new. We all know the drill to getting there, moving forward and releasing it into the wild.


I read this article a couple weeks back by Garrett Dworman from usability on “When to prototype, when to wireframe…” and I liked it.

Sort of.

My mild appreciation for the topic came from the fact that their seemed to be this line drawn in the sand; you either prototype or you wireframe based on budget, time etc…

I agree, and I disagree, because you should be practicing some form, if not all forms of fidelity in a given project. Wireframing is not exclusive to “quick, easy to do and cheap” scenarios. A complex project can still produce a large volume of sketches, which can still chew through time and money. Also with the plethora of prototyping tools out there today, I would maybe reevaluate your perception of speed.

My Process

My process has always been pencil to paper sketches, to wireframe then to prototype. Not necessarily in that order. I need to always test my assumptions and especially with hand-drawn prototypes, not assume size and ratio of certain elements, especially on a mobile device. You will need some level of accuracy.

Let me explain in a few scenarios:

If I have several elements in my navigation that need to be present in a certain concentrated area of the screen, a sketch will help determine the best shape and volume of such elements. It’s the translation from sketch to a digital wireframe where I can really get down to business with sizing, ratios, placement, font sizing and clickable areas.

Now. This is not a high level prototype, it is still a wireframe.

Another benefit to wireframes and even prototypes are PATTERNS. Reusable patterns can be created with a simple drag and drop or CSS class. You don’t have continue sketching out the same navigation bar or widget over, and over, and over.

Remember, proficiency facilitates speed. So, if there is a prototyping tool you like using (like Axure,Balsamiq and Just In Mind) then use it. Become a pro at it!

There are multiple ways of doing this, and I’ll get to mine in a minute. Yes, building a prototype will enable you to show a stakeholder and development team how to interact with your product. You can build an HTML, CSS and Javascript prototype, or you could leverage your nifty prototyping tool (like Axure). Either way you’re going to spend some time trying to define the best possible interaction to move your user along their given task.

Or, you could do what I did.

I’ve found a lot of resources that showed me what mobile patterns for certain apps looked like, but none of them actually showed me HOW they worked. So I started downloading every stinking app I could get my hands on. Of course I maxed out my phones storage! So my elegant solution was to start recording all the interactions I had, categorizing and labelling them.

Soon I had a library full of great examples. If I had to determine the best possible interaction for this particular timer on this particular app, BOOM I had a couple of examples to refer to. How are we going to scroll through this content and still keep it visually appealing? BOOM I had an example to show the team.

My point is, try not to re-invent the wheel! There are 1000’s of well thought out examples. They all borrowed from someone, who borrowed from someone and so forth, and you’re not breaking any rules. Provide an example of what you’re trying to achieve with your sketch, or wireframe or prototype and you will bel OK. Trust me.

Unless you’re new to this profession, you may stumble into problems such as timing, budgets and resourcing. I think our purpose, as we do more of this wonderful “Solving Problems For Other Humans” we get more proficient and savvy with our tools. So don’t think because you have a small budget or large budget, or eons versus mere days to deliver a project you should use THIS technique versus THAT technique. Use what you think will communicate the solution to a problem clearly.

Mobile Pattern Resources:
1. UI Inspired
2. Pttrns — Mobile UI Patterns
3. Android Niceties
4. Colour & Curiosity