Justinmind

BLOG

Expand your prototyping knowledge

Prototyping accessibility in web and mobile UI design

Prototyping accessibility in web and mobile UI design


Adaptable, interactive and coherent prototypes for users with disabilities. Covering accessibility in the prototyping phase of web and app design.

User-centered design as we now know it demands that our web and mobile apps be clear and coherent. But what about being accessible? According to the WHO, roughly 285 million people are visually impaired, between 110 million and 190 million adults have significant mobility difficulties and 360 million people worldwide have disabling hearing loss. Our apps and software need to take into account these users, right from the beginning of the design process. In this post, we explore how you can make your web and mobile apps accessible for users with disabilities and how prototyping with Justinmind can be a helpful stepping stone in the process.

Pay close attention to color, contrast and visual hierarchy

Many individuals with low vision, or color blindness, have a decreased sensitivity to certain colors and the contrast between different colors. This means that your choice of color is extremely important. Try to make your web or app distinguishable through smart color matching and use color to highlight information that is already visible, rather than using it to show something that would otherwise have been missed. For example, highlight URLs and links to make their intended purpose more meaningful. Boldface and underlined links are more likely to be picked up on by users who skim read, or indeed users with low vision. Moreover, color blind individuals need well-contrasting colors, so consider placing light elements against dark backgrounds – think about your whitespace! For instance, Justinmind offers its users two types of UI layout: the classic UI has a dark themed background with lighter elements on the surface – best for users who have trouble differentiating colors, whilst the light theme has a cleaner appearance, allowing users to differentiate types of text and other UI elements better.


Download Justinmind and create your most accessible prototype yet

DOWNLOAD NOW


Make your interactive UI elements more interactive

Last year we wrote about prototyping for different age groups, namely for kids, using participatory design. We explained the importance of affordances and feedback when designing for younger users. Whilst giving feedback is important for any user, it is imperative when designing for users who need things to be explicit or who cannot interact in the traditional manner with an app.

A great way of providing feedback for users is to use interactive elements in the user interface, such as cues and gestures. This might seem pretty obvious, but note that the interactive elements must appear different to the static content on screen for a user who may not otherwise pick up on them, or who might have trouble with the type of movement needed to complete an action, say, on a mobile app. So get the gestures in early, in the prototyping stage. Many prototyping tools offer a wide range of animations, transitions and effects to help you add functionality to your web and mobile apps. With Justinmind, you can add events to your UI elements with drag-and-drop technology and simulate what’s on screen to see the events in action. Events and triggers such as our “On Page Load & Move” event combination, that will move an element on screen to the requested position upon page load, offer users with limited vision or movement an interactive experience with your app. Learn more about different types of mobile gestures to cater for users with limited mobility here.

Additionally, try going audible for those with visual impairment. You can embed HTML with Justinmind so that users who have low vision can listen.

Don’t crowd me!

Individuals who suffer from low vision or are hard of hearing may benefit from clearer signposting online. It’s important to pay attention to the visual hierarchy of your UI elements. Don’t crowd your screens – note that people with impaired vision may require items on-screen to be magnified, so don’t make your content too weedy or un-scalable. Make sure you mark Calls to Action clearly and place important information at eye level.

By focusing on color and placement of content in your web or mobile app UI early on, you can get a better idea for what your app is going to turn out like, as well as saving yourself (hopefully!) some rework. Prototyping with Justinmind allows you to integrate with other design tools. You can import your designs from Sketch into Justinmind, giving you the freedom to add as much or as little color detail as needed to your designs. Additionally, many of our UI elements and icons have been made using SVG vector files, meaning you can easily change their color and scale them.

Make your app accessible by being adaptable

Making your web or mobile app comfortable and accessible for individuals who are visually impaired doesn’t necessarily require massive amounts of work. The most important thing to remember is that different users will have different needs – not just in terms of visibility and audio limitations but also because they may be using different devices from those that we typically design for. This means that your app needs to be customizable, e.g. the content should be adjustable for different screen sizes. You might consider using a responsive layout which will allow your design to scale across different screen sizes on a range of devices.

“Flexibility is the key to ensuring that your website is accessible to everyone.” Shaun Anderson, Hobo Web

Prototyping responsive design is actually pretty easy. With Justinmind prototyping tool, it really only involves creating a set of screens of different sizes (to represent the different screens sizes that your users use), adding the content to each screen, and adding linking events between the screens. In fact, we’ve created a nifty tutorial in our Support section to teach you step by step.

You can also learn more about customizable prototyping in this post.

Don’t forget the user testing

It’s all well and good to create a prototype of your design before you go on to coding. But really, to understand the range of functional limitations of your users, you need to know what types of limitations they’re dealing with. The best way to understand your users is to interact with them through performing usability and user testing. User testing in the prototyping stage of the design process will allow you to get a better grasp of the capabilities of your target user group(s) – all the more important when your users have a visual or mobility disability, or hearing impairment.

With Justinmind, you can actually perform user testing through the platform because it’s integrated with the top user testing tools, including UserZoom, UserTesting and Validately.

Download Justinmind now and start creating accessible web and mobile apps for your users today. download-justinmind-prototyping-tool-banner-1

Emily Grace Adiseshiah

About the Author

Emily is Marketing Content Editor at Justinmind

6 Comments

  1. connectfirms Says :

    January 6, 2017 at 5:38 pm

    Thank you for sharing the valuable tips

    • Emily Grace Adiseshiah

      Emily Grace Adiseshiah

      January 9, 2017 at 11:45 am

      Thanks for your support!

  2. AppDevelopment Says :

    January 20, 2017 at 11:11 pm

    Thank you for sharing the valuable tips. I can now perform user testing through the platform which you have mentioned above. Keep us posted these valuable information.

    • Emily Grace Adiseshiah

      Emily Grace Adiseshiah

      January 24, 2017 at 10:12 am

      We’re so pleased this was useful to you!

  3. Laura Web G

    February 1, 2017 at 11:25 pm

    These tips helped me a lot in performing UI design test for my web and mobile site. Thanks for posting 🙂

    • Emily Grace Adiseshiah

      Emily Grace Adiseshiah

      February 2, 2017 at 10:41 am

      Thanks Laura! Is there anything else you’d like to see on the blog?

Leave a reply

Your email address will not be published. Required fields are marked *