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.
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.
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.
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.
Enable text resizing in your app within responsive layouts. This will allow users with visual impairments to set a size appropriate to them.
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.
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.
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:
Don’t forget about users with a poor internet connection. To avoid frustrating these users, give some thought to:
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.
A clear layout will help the interface to appear easy to use and avoid users feeling intimidated or frustrated.
Guide users to avoid mistakes and offer positive support to enable a smooth, guided recovery should an error occur.
Ensure sufficient time is allowed for communication and interactions.
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.
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.
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.
We plan, design, and develop the world’s most desirable software products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.
Let’s get in contact