Image Hot Linking

Quick And Dirty UX Design Techniques

It is always a daunting task to create a great user experience. The increase in both available UX tools and consumer expectations means UX designers can get caught up in using the latest technologies and overlook core user experience principles. Many great designers in any field will often resort to shorthand techniques to create the base product, then refine and modify their prototype into a representation of the final design.

In this article we will explore a number of UX design techniques you can add to your workflow. These techniques are intended to help you build a representation of the end user experience using different tools and methods to quickly reach a rudimentary portrayal of the end design. Thus allowing you to rapidly construct effective and engaging user experiences. In short, we are going to show you some quick and dirty techniques to help you design awesome user experiences.

1 – Image Hot Linking

Image Hot Linking

Image Hot Linking or “Click-Through Prototyping” is the use of static images combined with interactive software which allow you to simulate the flow of your user experience. This technique can be used during the initial phase of design and/or towards the end of a project. The ability for user testing is another huge benefit of the Image Hot Linking technique, since it can very closely resemble your final design.

Think of Image Hot Linking as the wireframes for your design’s interactions and flow.

Traditionally wireframes are used to help designers create aesthetic and functional layouts by reducing the design to its basic elements. Image Hot Linking does the same thing for the flow and interactions of your user experience. Used correctly, you can map and plan your entire user experience with this one technique.

The images that you use can range from photographed hand-drawn wireframes, or digital designs created from Photoshop. The point is to map out how each section of your design flows to the next, and the interactions between the user and the design.

Tools such as InvisionApp, Blueprint, Marvel App and Balsamiq Mockups provide great features for Image Hot Linking. Not to mention that your clients will love this approach as they have something tangible to work with and it comes at little to no cost for you to produce.

2 – Paper Prototyping

Paper prototyping is a more “arts and crafts” approach to UX design. If you enjoy being hands-on then you will enjoy using the paper prototyping technique. Pen and paper is an extremely versatile medium and still has a place in today’s society of advanced software and digital solutions. The ability to manipulate the medium in various ways and artistically illustrate your design allows UX designers to put together a primitive model of their final design.

Paper prototyping can go much further than simple sketches.

For example, you can simulate a drop down menu with folded pieces of paper to display how the interactions and transitions will work in your design. And stick-it notes can be used to represent moving elements that rearrange themselves.

Watch the following video which demonstrates the power yet simplicity of using a paper prototype.

3 – Mind-Mapping

Mind maps are universally used for all activities that require great thought and for generating ideas. They are ideal for logically representing creative ideas and thoughts in one collective space. Mind maps can also be adapted to help lay the foundation for your UX design. By using a mind map you can label and direct the flow of the user experience, all from one or a collection of simple diagrams.

Designers that prefer structure and logic to creativity and chaos will appreciate mind maps as a design and communicative device.

Whether you decide to use mind map software or simply draw the mind maps by hand, they can act as blueprints for your UX design. They help designers to process the thoughts behind their ideas and aid the design of a systematic flow. The simple act of writing/drawing your thoughts down into a logical diagram helps you fill in the blanks and form the flow of your UX.

Mind maps provide designers with a quick and easy way of plotting out the entire user experience and also give room to describe how each section will interface with one another. For example, you can write notes about the different outcomes and behaviors that exist around form submissions and data. While you may make changes along the way as you develop your user experience, mind maps are a quick and easy way to create the skeleton of your design to help get you started.

4 – Shorthand UI Flow Design

shorthand ui design flow
Image from “A shorthand for designing UI flows

The flow of your user experience is just as important as the design of the screens. In the article “A shorthand for designing UI flows” by Signal v. Noise, Ryan describes his shorthand design method..

In the mind of the designer the flow between each individual screen may be obvious, but it can a difficult concept to explain to others. This is where the shorthand UI flow design technique can come in handy.

Ryan describes the flow as being made up of individual interactions. Therefore it is very important that each interaction flows nicely onto the next to form a coherent user experience. However it would take way too long to draw out each interaction, especially during the initial design phase when you are still feeling out the design. A fast and effective way to “sketch” these interactions is to use Ryan’s shorthand method which is like a combination of a diagram and written text. The idea is to carefully consider each interaction and how it will roll onto the next. For more information about Ryan’s shorthand method, visit his “A shorthand for designing UI flows” article.

5 – Writing-First Design

A writing-first design technique is literally writing down your entire plan and design before you create wireframes or do any real “designing”. The key to using this technique is to liberally express all your ideas and goals in words. We recommend using pen and paper as it is more loose and allows you to freely make edits and scribbles which encourage creative thinking.

Writing-first breaks down the entire design process into its most simplest form. Just as you would not jump head-first into opening your own business without a written business plan, designers should also take a step back during the initial phase of a project. While it may feel like an exercise in futility, if you put your mind to it you will instantly see the benefits of a writing-first approach to UX design.

Writing down your thoughts opens up the opportunity for deeper understanding behind your design choices.

The writing-first technique also takes you away from the role of UX designer so you can see your design from another perspective. By understanding your client and user needs you will create a user experience that fits the brief, rather than an inadequate flashy design.

6 – Low Fidelity Wireframing and Prototyping

slide001
Image from Nintendo’s Iwata Asks 

A low fidelity wireframe and prototyping is a rough representation in some form of your concepts and ideas. A paper prototype would be an example of a low fidelity prototype and a simple rough layout sketch can be considered a low fidelity wireframe.

The point of low fidelity wireframing and prototyping is to somehow convey the final design without having to spend too much time or money.

Many designers will know the feeling of having spent many hours on a design, only to have their client discard it within seconds because it doesn’t “look right”.

A low fidelity wireframe or prototype is the best solution in terms of costs and functionality for creating a quick and dirty representation of your UX design. Above is a picture of a low fidelity Wii U Miiverse prototype which was built by the Nintendo design staff. Note the simple yet effective execution.

Conclusion

These quick and dirty UX design techniques are all tools you should add to your arsenal. As with most wireframes and prototypes, they might not be seen by anyone other than the designer and their team, but that doesn’t make them any less important. They help designers to evaluate their design choices and explore their possibilities.

For your next project, instead of going straight to your fancy UX design tools try one of the six techniques mentioned in this article. Building a representation of your design will save you time and money that might be wasted chasing an idea that didn’t fit the client’s brief.

Finding the right solution or idea means you have won half the battle.

These quick and dirty UX design techniques were created to help designers build more effective user experiences and reach that goal quickly and without great cost. We hope that you were able to learn something of use from this article and hope that these techniques will serve you well in your future projects.