More-so now than ever before we are utilising technology and apps to help us in our day to day jobs. Occupational Therapists use apps to help with rehabilitation after a person suffers a stroke. Teachers use educational apps on iPads as learning aids in classrooms. But one thing that’s sometimes overlooked, is the changes required to our designs to ensure these apps are usable in these environments.
Key Considerations
Before you start designing your application you first need to understand the use cases and scenarios the mobile app will be used for. This involves asking a lot of questions and you may have to do some initial user research or workshops to get answers to them all. A good place to start is to simply write out what questions you have and see how many you already know the answer too.
Some questions you may not have considered are: Does your application allow users to use the app without being connected to the internet? Is there data that requires an internet connection to sync? If the user loses connection will this data be stored or cached until they regain connection? How will you alert the user to the loss in the connection? Can you allow them to continue using the application if they loose connection? All these things will need to be explained in full to each user of the product so they are aware of the limitations of the application they are using.
Will there be audio that the user has to hear? If so will the app be used in a noisy environment? Will the user be able to hear what they need to? Will the user be required to wear headphones or earphones for the best use of the app?
Where is the application going to be used? Will the product be used outdoors or indoors? If it’s outdoors you will have to think about how it will hold up in direct sunlight. If it’s indoors you may still need to consider glare from fluorescent lighting.
Answering these questions will allow you to understand the limits and restrictions you are working with and will create a jumping-off point for design considerations.
Designing for Accessibility
A lot of the issues that can affect someone when using an application in the field can be tackled by looking at the problem through the lens of accessibility. Designing for increased accessibility can often benefit everyone, allowing apps to be used in a wider variety of settings, and improving the overall user experience of the app. There are some basic principles for designing with accessibility in mind such as; colour, typography, graphical elements, navigation controls, and accessibility elements.
Colour
Avoid large white or light surfaces
It’s widely known that in optics a white surface reflects all the components of light while a black surface absorbs light. Using large areas of white in your design can lead to eye strain due to the high contrast between the white area and darker areas of text. It can also increase glare as light is reflected back to the user.
Avoid 100% pure black
Something you’ve probably noticed just using your phone day today is that when the screen is shut off your phone is almost mirror-like. This can happen if you have larger areas of pure black in your designs. Although some reflection cannot be avoided, what can be done is to minimise the amount of this reflection by adjusting the black tone slightly to very low-value colours, close to black, usually called ‘off-black’ or ‘shades of black’. These very dark hues will ensure there is high enough contrast but will help avoid the mirror-like reflections you can get with pure black.
Avoid 100% pure white
Similarly to avoiding the use of pure black, you should also avoid the use of pure white. This is especially important if your application has a lot of text for the user to read. Think of a newspaper, they are never bright white. A slightly ‘off-white’ background with almost black text will increase the legibility of text and again reduce eye strain.
Graphic Elements
Highlight user actions
Reducing visual clutter can help users narrow in on the content and functions they need to find quickly. For each screen narrow down exactly what the user needs to be doing on that screen and make it the most prominent element on the page.
Reduce graphic details
If your user will be using your application outdoors, in direct sunlight or indoors under bright fluorescent light, smaller details will be washed out and may be nearly impossible to see. For this reason, you will want to ensure any icons used or interactive elements are clean and as simple as possible visually. Try to use block icons rather than line icons and stick to familiar icons where possible (a house for home, a cog for settings etc).
Avoid visual noise
The reduction of graphic details will also affect the rest of the components in your interface. The user will search for visual hints as to what is interactive so reducing visual noise from non-interactive elements will help users find calls to action easily. Removing things like shadows, fades and gradients will increase the contrast between an element and its background and help it stand out visually on screen.
Typography
Prioritise digital fonts
Some fonts such as Open Sans have been designed specifically for digital interfaces and utilising these fonts can generally improve legibility. However, this might not always be possible where a brand has already been created. If this is the case reducing the variety of font weights used can help prioritise content on the screen. Generally speaking light, regular and bold are all you should need.
Reduce the length of informative text
Copywriting is an impotent aspect of accessibility in design. Ensure line length is capped and paragraphs are short and concise helps with readability. Font size should follow guidelines of 16px and up, though slightly larger font size may be required for apps that are to be used in direct sunlight. Where scrolling is enabled a scrollbar should always be visible to help prompt users to continue scrolling through the content.
Navigational Controls
Providing quick links for superusers can be a way to increase usability in the field quickly. Look at the use cases for the app, gather feedback on the use cases. Is there one or two that crop up a lot that will be used regularly? If there are main actions that a user will take most frequently on the app, then you should design for these actions to be upfront and easily accessible.
A navigation menu of ‘quick links’ to actions a user can take within the application can reduce frustration. Rather than forcing the user to click through screens to get to a specific action, ensure the actions they take most often are prioritised within a quick links section. If there are multiple users of an app with different common actions or use cases you could allow these users to customise which actions are in the quick links section. Allowing users to configure their setup to best meet their needs is one way to ensure a happy user.
Accessibility Controls
By utilising the readily available accessibility controls built into a lot of mobile devices you can help users navigate around the system with ease.
Use area zooms
Allowing the user to pinch or use built-in zoom controls within your application can help users read smaller text. This will be very important if users are reading important guidance text or viewing a diagram etc as legibility and clarity will be very important here. You can also use zoom button indicators on images or graphs to allow the user to quickly expand the image out to be full screen using light-boxes in your design.
Optimise spacing
Spacing in design is very important. Things like line-height, padding inside elements and margins between components all contribute to the hierarchy of actions you want the user to take. Related content should be grouped together, such as similar form fields or a button group for actions that can be taken. On the other hand, enough space should be given to stand-alone content or priority content so that it stands out from the rest of the content on the page.
In this particular case, I would give priority to the interaction elements (buttons, scrollbars, zooms), avoid noise (described in previous points), try to group elements with similar functionalities, minimise information elements with the addition of zoom controls. Certain things like buttons and clickable actions should be given visible priority and ensure that they are given a large enough touch area that they are easily clickable even on the move.
Non-Design Improvements
There are a number of things that can be implemented on top of these technical specs that can significantly improve the usability of any product to be used in the field. Some technical things can be implemented by developers, such as caching data in-app in case of loss of internet connection (if that is required) however there are easier wins by adapting hardware where possible.
Consider advising whomever the product is being made for, to invest in anti-glare screen protectors. This is beneficial for two factors; it will increase the usability of the application and it will protect the screen from the inevitable dings and scratches that come with handling any device regularly. Particularly for sectors such as construction, this might be an easy win.
If the application is to be used outside during colder months, you could advise on the purchasing of device gloves - gloves specifically designed to be used with devices. Keeping workers hands warm but allowing them to continue to do their job.
Finally, remember that every device may render your designs differently. Unless your app will be used on a company-issued device, this means that you won’t have control over the make or model of the device. This could result in your app being used on much older devices than you were prepared for. The only thing you can do in this scenario is to try and test your application interface on a number of devices before going live.
These little additional touch-points will make using your application much nicer in the field.
