The 5 steps of better product design: 4. Visual & motion design

So, you’ve tested your prototype with users and it’s working well. What next? Now it’s time to develop the visual design and take time to focus on the intricacies of user interaction.

This is step 4 in a 5-piece series exploring product design best practices. This week, we’ll be considering ways to prepare and manage designs for a smooth development process. It will also offer a set of guidelines for making more widely accessible products.

After concluding usability testing outcomes, it’s important to record and share any design decisions with the team to create a unified understanding of the proposed solution. A rough sketch of the user journey can help to clarify screens, states and interactions.

Once the journey is defined, it’s important to plan how designs for different platforms, devices, languages and states will be managed. Defining a clear folder structure with clean, well-organised files will make your designs easier to navigate and maintain.

At this stage, you can also consider how you might track user behaviour. Early definition of analytics questions will help to ensure tracking is implemented in time for release with the appropriate tracking tools. Data Analytics will be covered further in Step 5: Track & validate.

Visual, interaction & motion design

A thorough understanding of your company’s brand is essential to create a consistent experience across touch-points. A well-defined style guide with re-usable elements and styles will help to increase efficiency and consistency.

A persistent visual language will help to ensure hierarchy, meaning and focus, guiding the user through the experience with ease and efficiency. Here are some things to consider.

• Grid-based layouts
• Consistent spacing
• Clear, legible typography
• Consistent use of colour
• Element hierarchy
• View states & interaction feedback
• Guiding transitions between states
• Loading and progress indication
• Supportive error guidance

Inclusive design

By considering some basic accessibility guidelines, we are able to open our products to users of all abilities, including those with low vision, blindness, cognitive impairments, or motor impairments.

Colour contrast

Text should meet a contrast ratio of 4.5:1 for normal size text and 3:1 for large text (14 point, typically 18.66px) against your chosen background colour. This allows users with low screen definition or visual impairments to read your content more easily. You can test your colour scheme using this free online contrast checker.

Text resizing

Enable text resizing in your app within responsive layouts. This will allow users with visual impairments to set a size appropriate to them.

Colour blindness

Make sure you’re not using colour as the only indicator for differences between elements. This will allow users with a colour vision limitation, which is roughly 4.5% of the global population, to clearly understand the differences between indicators or actions.

View states

Define view states for actionable items. This will ensure users interacting with your product via touch or external devices (keyboards, remotes, d-pads, joysticks, switch devices etc) will receive appropriate feedback as they navigate through the interface.

• Actionable items: Default, focussed, pressed
• Selectable items: Default, focussed, pressed, selected, selected & focussed, selected & pressed

Screen readers

Voiceover (iOS) and TalkBack (Android) are accessibility services that help vision-impaired users interact with their devices by providing spoken, audible, and vibration feedback on content and available actions.

You can help to enhance these services by:

• Considering the order of focus and content grouping for sequential navigation
• Including content descriptions and usage hints on all elements
• Considering alternative UIs for temporary views

Connection speed

Don’t forget about users with a poor internet connection. To avoid frustrating these users, give some thought to:

• Content loading optimisation
• Progress indication
• Connection error guidance

International languages

If you’re designing an international app, consider how your design will respond to localisation, as languages often have much longer words than English so your designs should adapt to accommodate this.

Clear layout and content

A clear layout will help the interface to appear easy to use and avoid users feeling intimidated or frustrated.

Clear error guidance

Guide users to avoid mistakes and offer positive support to enable a smooth, guided recovery should an error occur.

Time

Ensure sufficient time is allowed for communication and interactions.

You can find further advice on accessibility at W3C or in the Google Material Design Guidelines.

Preparing for development

Visual & interaction design specifications

Zeplin is the ultimate collaboration tool for designers and developers providing sizes, colours, font information and spacing with a simple cmd+e export from Sketch. It also generates visual assets and allows team members to tag and comment on screens should any questions arise.

Motion specification

Principle is a great tool for high-fidelity interactive prototypes and a natural choice for motion design. The record function in the preview is useful for sharing motion examples with the rest of the team. Adobe After Effects can be used for more advanced motion and visual effects.

Development acceptance criteria

When finalising designs, we’ve found it useful to detail the interaction in the development ticket. This highlights any specifics that haven’t been sufficiently detailed and ensures the desired behaviour is clearly outlined for development. During native development, designers and developers can work together to create smooth, natural transitions between states. This can help to save time and avoid endless review cycles.

It’s also important at this stage to outline analytics tracking points so we are able to measure the success of our product changes at a larger scale. The next post in this series will explore the process of tracking behaviour and KPIs post-release.

Originally published at https://blog.novoda.com on January 5, 2017.