In this node we dive into some User Interface Design and User Experience, also known as UI/UX, concepts with Art Director, Torch. Slides are provided by Pixel Perfect Precision.

Users
Your primary consideration should always be your users. Guide design decisions by finding out what they want to do, and then structure your product so they can carry out that task as quickly as possible. Always bear in mind what is suitable for them as well; for example, a completely flat, cutting edge interface guided by grids and typography may work for a younger audience, but perhaps some friendlier skeuomorphic touches would be more appropriate for older users who aren’t quite so tech-savvy.

Environment
Environment refers not only to the platform you’re designing for, but also how it will be operated and the physical space that it will be used in. For example, TVs have a completely different set of variables to mobile phones — they are viewed from a much greater distance, almost always used indoors, and operated via remote. This in turn means different considerations for things like text size, colours, and contrast within the interface.

Accessibility
Accessibility is relevant to every one of your users — not just those with some kind of disability. Good practice such as ease of use and clarity are a given, but there are also steps you can take to make your work more accessible for those with conditions such as colour blindness and dyslexia. See the Accessibility chapter for more information.

Affordance
Affordance is an object’s ability to convey its function through sensory means, for example a button suggests that you press it by being slightly raised; a door handle suggests that you pull it by being the right size and position for a hand. This technique can also be used in digital design to lead users into interacting with objects. Commonly used affordances include buttons which are given depth to emulate the real world, and text which flows off the page to show that it scrolls.

Copy
What you say in your design is just as important as how it looks. Good copy can not only make an app easier to understand, but also gives it personality through the tone of voice used. Speaking to people like human beings, rather than machines, creates an emotional connection that results in a better experience with your product.

Colour and Shape
Certain colours and shapes have become synonymous with specific meanings in digital design. Be mindful of these norms, as mixing them up can cause confusion for the user. Green and ticks are commonly used to indicate good, likewise red and crosses bad, but jumbling the two up creates a mixed message. Similarly, yellow and triangles are often associated with warnings, blue and circles with information.

Visual Hierarchy
Layout, colours and typography have a huge influence on what the eye is drawn to, and consequently how information is consumed. Think about what you want the user to look at on the page and in what order, then design around that hierarchy. Grab attention with high contrast and large, bold type, or push items back with lower contrast and smaller, lighter type. Culture also plays a part: for example Westerners will naturally start near the top left of a screen as that’s the way we read.

Typography
Typography is often overlooked in digital products, but since most information is conveyed through text it should be high on your list of priorities. Apply the same basic principles as for other mediums: is it a comfortable size for reading without squinting? Is there enough leading and are the line lengths short enough to make reading comfortable? Don’t just accept the default font settings in your design environment — treat type with the respect it deserves!

Motion
With the ever-increasing power of hardware it’s now possible to make your designs not only look good, but also move elegantly. Subtle animations can enhance interfaces, giving them character and increasing their intuitiveness by hinting to functions and features; for example, if you wanted to draw attention to a new button you could make it periodically bounce to catch a user’s eye.

Prototyping
Closely linked to testing is prototyping, which is a quick way to try out ideas and designs without investing time and effort into polished versions. There are many forms this can take, from simple drawings on paper, right up to building limited apps in the platform’s native development environment. Pick whichever suits the feature you want to test; the basic structure of a screen can easily be tested on paper, whereas an animated transition may require something mocked up as a video or even coded.

Organisation
No man is an island, and most of the time your files won’t be either! Good organisation is essential as it saves a lot of time for other people on the project; well ordered files and layers mean other designers can jump straight into your work and find their way around, and a logically named set of assets will make developers very happy.