Appszoom for Developers

How (And Why) To Build A Mock User Interface For Your App

Posted by on 07/14/2015

Building a mock user interface for your app is a critical step towards creating effective software of any kind. Yet, it can seem overwhelming to actually go about creating sketches of how our finished products will look.

These are the factors that you should take into consideration when creating your mock UI. We have also listed some great tools for getting the job done in a way that will best suit your app development process.

Who are you developing for?

This first consideration is an important one, and it’s also one that developers forget to think about a lot of the time. Before you create your mockup, it’s critical that you are aware of your audience.

If you’re making sketches for your own personal benefit, then that’s fine; you don’t need to think about anything other than what will create the most efficient and effective user interface. Accordingly, you can make the sketches as primitive or detailed as you like.

On the other hand, if you’re putting it together for someone else, then you have some other factors to account for.

If you’re going to be showing off your mockup to people who aren’t particularly IT-minded, it’s worth remembering that some people can confuse designs with finished products. For this reason, it might be worth not creating something that looks just like an app, but instead more a rough sketch. Sticking to basic lines and shapes, black and white as opposed to full color, and so on is a good idea. Leave no ambiguity as to the current stage of development.

If someone who doesn’t know much about development was to see your mockup – which looks dangerously close to a finished product – they might confuse it for a nearly-finished product without understanding that the entire engine needs to be coded first. I have heard stories of app developers being called “lazy” by clients because they didn’t manage to turn their designs into working products in a few weeks!

What you need to include in your mock user interface

Whether you are creating the mockup for yourself or someone else, there are certain elements that should always be included:

  • Fundamental Components: The mockup should include everything that will be needed for the app to actually be used. The buttons (or swipes/navigation mechanisms) for getting to each screen should be implemented into each screen sketch.
  • Annotations and Numbering: It should be clear from looking at the mockup where each screen leads. Likewise, each screen should be numbered. Explicitly stating where each button takes the user will ensure that there are no blank spots or regions of the app that cannot be accessed (like if you forget to include a button).

Once you have the basic design down, you can then start to elaborate a bit with other processes:

  • Trimming: There’s no better time to start re-drafting your app’s interface than before you’ve actually written your first line of code. Likewise, now that you have the design in front of you, you might actually start noticing steps and components that could be reduced or removed completely so that the app’s navigation is much more efficient. A great example is replacing several static buttons with a “hamburger”-activated sidebar.
  • Additional Features: There might be other parts of your app that aren’t necessarily paramount to its operation, but which you would like to include anyway. For example, a settings menu or a screen where the user can share content from the app via social networks. It’s still beneficial for you to have a solid idea of how they will be included in the app, even if they are not paramount in its usability, so it’s worth trying to include these in your mockups too.

What you don’t need to include in your mockup

You don’t need to worry about going all-out in your mockup. Like stated above, if you’re creating it for a client who doesn’t really have a firm understanding of app development, it’s good to keep things as “blueprint-ish” as possible.

Likewise, it’s probably not necessary to include every single graphic and detail in these images, even if it is just for your own eyes. The purpose of this design stage is to have a grasp of how the app will work, and not particularly of how it will look.

Methods for prototyping your app

There are dozens – if not hundreds – of processes you can use to create your mockup.

Firstly, you might wish to use pen and paper. This is a great way to cut out any distracting features you might encounter with fancy design software, so that you can get the most basic understanding of how your app will work. Whenever I’m coding, I always revert back to my trusty notebook and a biro for my first design sketches. Then, if necessary, I’ll create a more detailed version in Photoshop or Illustrator.

Using pen and paper also makes re-drafting and adding or removing components incredibly easy. An even easier way to re-draft your work is to present it on a whiteboard. That way, you can just rub out the part that you don’t want and add in the new one in a matter of seconds.

In terms of software, you might opt to use any of the following tools to complete your mockup:

  • POP 2.0 – Prototyping on Paper (AndroidiPhone): Scan your pen-and-paper mockups into your mobile, then add tappable hotspots to your sketched buttons. Share your designs with potential users and get quick feedback on something that feels just like a normal app.
  • Balsamiq: You will need to buy a license, but this software easily creates nice mockups that are still rough enough that no one will mistake them for the finished product.
  • Mockupscreens: This software also streamlines the design process, while providing skins so that you can easily modify your creations according to taste.
  • Flash: It might not be everyone’s cup of tea, but if you happen to have an old copy of Flash lying around, you can still use it to get an impression of how your app will function. Likewise, actionscript will allow you to make the design as functional as you desire.
  • HTML: Who remembers image maps? It might be a little rough around the edges, but you can find old freeware image-mapping software incredibly easily these days. Your designs will be limited in functionality, but you’ll have the benefit of creating mockups with a very small time and financial investment.

Likewise, there are options out there that will allow you to create electronic, interactive mockups more intuitively. A basic Wacom tablet can be purchased for under $100 these days, and will let you produce designs easily once you get used to the feel of an electronic tablet. Likewise, there are various iOS and Android apps dedicated to creating vector-based sketches.

Go Forth And Create Thy Mockups

There are hopefully enough options (and pieces of advice) here, that you now feel slightly more confident in creating your sketches.

Remember: the happier you are with your product in the initial design stages, the less likelihood there is of needing to revamp your product when it’s already on the assembly line – or, in this case, when you’ve already written thousands of lines of code.

Topics: Uncategorized