Prototyping is more than making paper airplanes – Part 2

grüne Matte auf der Schrauben, ein Bleistift und ein Radiergummi liegen

Which tools are used for what

Have you already read our blogpost why it makes good sense to use mockups, prototyping and wireframes in successful IT projects? We at USECON are convinced of that the usage of these design methods is one of the keys to a successful IT project.

Benefits and disadvantages

Within our projects we use these methods as part of our user interface design process. Sometimes clients ask us which tools we are using. This is why we want to explain two of these design tools: Balsamiq Mockups and Axure RP.

At USECON both, designers and consultants are using these tools successfully on a regular basis. Basic wireframes and mockups can be created by nearly everyone. You do not need to be a user interface designer. Tools like Balsamiq Mockups support you in a very handy way. (Read more about the usage of Axure XP here).

Balsamiq Mockup

Benefits:

  • Quickly to learn, easy to handle via drag and drop
  • Reduced, sketchy presentation with focus on the priocess
  • Cost-effective

Disadvantages:

  • Limited functions
  • No interactive prototypes
  • Limited selection of UI elements

Axure RP

Benefits:

  • Creation of (complex) prototypes
  • HTML is divisible
  • Large selection of elements

Disadvantages:

  • Cost-intensive
  • Not easy for first-users
  • You get to know the repertoire by and by

Design tool or mockup tool?

Balsamiq Mockups is no design tool, it’s a mockup tool – what exactly does that mean?
It is important to be aware of one of the guidelines of user interface design:

Optics are not first priority throughout the design process – a software, a website or a web shop can be made appealing relatively quickly. Usability and the actual process are paramount. No one wants his clients to enter the web shop, say, “Yes, that looks very nice!” but leave it without a purchase. For sure you want your clients to be satisfied with the process that they are (re)purchasing.

Esspecially concerning complex processes it is important to define when the client sees what, e.g. which information is shown to premium clients, and which steps need to be undertaken by the client in order to complete the purchase. If these issues are being discussed before programming, all project members are able to make their comments and necessary changes are relatively easy and cheap to do. If everyone is satisfied with the wireframe or mockup, a graphic design and an application can be created. This sounds simple – which it is: of course there needs to be work done. But it needs to be taken into account that only a few people (or your user experience consultant by your choice) have to do it which means to reduce costs and there is the chance that conversion rises.

Note!

Measure twice, cut once: Go through the process as long as it is in an unfinished state. Only when the process is feasible, take care of “optics” – That’s the basis of a successful user interface design.

Please have a look why wireframes, mockups and prototyping make the difference in successful digital projects.

What exactly can be done with Balsamiq Mockups?

Let’s have a detailed look at Balsamiq Mockups: The company was created in 2008 in Sacramento, California. The main goal of this tool is to help people to create software and websites which are easy to use. In other words, supporting people working in IT-projects to create a high user experience.

User interface designers should sketch wireframes and mockups to design processes for websites, mobile or desktop applications before the technical and graphical implementation as user friendly as possible. Balsamiq Mockups focuses hereby on the idea finding phase because therefore the tool is supporting best. It focuses on structures, procedures and processes – not on colors and icons.

Visualization

Balsamiq Mockups’ library offers functions as sketchy elements which are normally used on websites or applications. These elements can be merged or complemented to a mockup or wireframe, only using drag and drop. Based on a few clicks it can be visualized how an idea in the designer’s head will look like in the user’s eyes. It reproduces the experience of sketching on a whiteboard, but using a computer. By means of simple settings it can be visualized how the design is changing because of using specific functions. We are not talking about click dummies here, but about the visualization of status displays. The available elements have already been created as user friendly.
The creation of sketches, similar to handwriting, is unique in the world of mockups or wireframing tools. It makes it possible to really focus on the process itself – free from elements like color, icons or similar elements which are often influencing taste.

Balsamiq Mockups offers manuals, tutorials and best practice studies to get used to this tool. Also for laypersons it is rather easy to design their processes in a user friendly way. What’s more, it is that easy to handle that first mockups can be created only in a few minutes of time. Balsamiq is pointing out that experience helps to facilitate the creation process and that the compilation of single elements does not constitute an excellent user interface design. Wireframes and mockups are only one part of the whole process of product design. Probably, the use of personas, focus groups, usability tests, experts’ interviews, sitemaps, prototypes or any further convenient design techniques helps to read the goal (increase conversion rate).

Contact us!

To implement a digital strategy and customer experience which satisfy your customers is our common goal – part of it is user interface design and part of it are mockups, wireframes and prototyping. Please keep in mind to sketch a quick mockup instead of describing a process with words – it does not only help to explain it to other people, it also makes it clear for yourself if the process is feasible and makes sense.

Besides Balsamiq Mockups, we also use Axure RP as design tool in our projects – please read more about it in our blogpost.

Would you like to know how to use Balsamiq Mockups expediently in your digitalization projects? For further information, please contact Michael Bechinie.
Please also have a look at our Prototyping training.

 

A guest article by Birgit Harthum

Share this post