How to design a healthcare app
Mobile health is a growing IT sector that focuses on transforming how healthcare providers interact with their patients. According to Zion Market Research, the global mHealth market size is expected to reach $102.43 billion by 2022. Industry experts predict that 70% of healthcare organizations will invest in healthcare mobile app development by 2018.
“The market for digital health tools is finally starting to catch up to the demand. Unfortunately, this increase can lead to a surge in unreliable tools,” Nitin Goyal, MD, Orthopaedic Surgeon, Founder & CEO at Pulse Platform, said. “Nearly half of consumers today are considered digital health adopters—and that number is only going to rise as the benefits become apparent and tech-savvy generations get older.”
The following statistic displays the number of mHealth apps available on Google Play. During the last measured period, the store offered just over 51.000 medical apps, representing a 5.7 percent growth over the previous quarter. The most income-generating mHealth apps on Google Play are fitness and calories counter systems.
Apps have become an essential part of the healthcare field. Medicare providers and patients all benefit from up-to-date, user-friendly, and free or minimal-cost healthcare apps. Due to rising supply, it has become increasingly important to offer a high-quality product.
Thus, designing mHealth apps that provide efficient and convenient ways of providing healthcare services is among the top-most concerns of developers.
In this article, we talk about what colors are best suited for healthcare mobile software and give you some examples. We then focus on app notification design. Surely we compare iOS and Android design style and show you some key differences with actual screenshots. Finally, we refer to best practices to customize your app for users with disabilities.
Have an idea to create an mHealth app? Contact us to start your business!
FAMILIARIZING WITH COLORS
As part of the development process, it is necessary to choose a proper color scheme and fonts. Users should feel peaceful with confidence that they run a right medicare software to address their needs and concerns. To that end, vibrant colors should be replaced with a more delicate and calm color palette. Fortunately, there are many hues to pick from both cold and warm sides of the spectrum.
Cold tones are most often used for the background. These hues establish an overall sense of tranquility that is necessary to help users concentrate on the more important features of the healthcare app.
A pharmacy app by Lewis+Humphreys
Warm tones are great for accent colors and for attracting attention. However, products designed in this color scheme as their dominant may be used in obstetrics and gynecology. All because in Europe and the USA, pink is often associated with the women.
Zipdrug - a medication delivery app for iOS
Cliniklik healthcare app design by Pablo Barzet
Pills On Time - a medication reminder and pills tracker for Android
APP NOTIFICATION DESIGN
Notifications are crucial to mHealth apps, especially for those that provide tracking and reminders. Giving them different designs enables indicating importance and urgency.
For example, an app reminds users of their scheduled time to take a pill. Along with this, it also notifies of an upcoming physician’s appointment. To avoid confusion and highlight relevance, developers have to give the reminders various design elements. To this end, they can use color-coding, font choices, gestures, or notification behavior/animation.
ANDROID VS iOS: DIFFERENT DESIGN STYLES
Most popular apps, including mHealth, are released for both iOS and Android. The following are some differences to be taken into account when developing a mobile app.
- First off, the design rules for Android devices are determined by Material Design, while for iOS - by Human Interface Guidelines. The first one is based on a layered "paper" approach providing more hierarchy with realistic shadows, light, and motion. As for iOS, designers can use the effects of transparency, blurring, gradients or shadows to attract users attention.
- Moving between screens is a common action users take on apps. On Android, there is a universal navigation bar at the bottom. The back button is the simplest way to go back to a previous screen and it works in all apps.
Runtastic Balance Food Tracker and Calorie Counter for Android
The vision on iOS is a little different. As can be seen on the screenshot below, there is no back button here. Thus, the app screen has a button on the top left corner. Moreover, designers can also use the name of the previous page behind the back icon to let customers know where they will go back.
Runtastic Balance Food Tracker and Calorie Counter for iOS
In addition, Apple introduced a gesture of swiping from left to right in apps to go back.
The animation for the collecting samples flow for Bloodline for iOS by Bryce Thompson
- Apps have different areas within them, usually organized as tabs. Different sections on Android are displayed on top of the app. In addition, the Android version shows only icons on the tab row, whereas the iOS version also has labels.
However, iOS app’s sections are organized as tabs on the bottom of the screen.
Doctor On Demand for Android
Doctor On Demand for iOS
MyFitnessPal for Android
MyFitnessPal for iOS
- Action buttons are those that enable users to take some actions like share, upload/download etc. Both Android and iOS have their own icon styles.
My Diet Coach - a weight loss motivating and tracking app for Android
My Diet Coach for iOS
UNDERSTAND TARGET AUDIENCES
A proper quality design is important for any mobile app, but it’s especially vital when creating a program for sensitive target users.
“I’m not the first entrepreneur to create a digital health app for patients. But as a surgeon, I’m very aware of the day-to-day issues that arise, including the nuanced relationship between patient and provider,” Nitin Goyal said, “Not all entrepreneurs in digital healthcare have this level of awareness. That means some digital health tools don’t consider a patient’s best interest.”
The following are some obstacles disabled users have met:
- Blind people may use screen reader software or Braille devices to access content but only text-based.
- Deaf users cannot access audio content unless it is transcribed.
- People who can’t use a mouse have to able to access content with a keyboard alone.
- Users with low vision, dyslexia, or attention deficit are difficult to process extensive texts and require more white space, simple screen images, and proper color contrast.
Examples of color disabilities
Since this field is mainly represented by older people, or who might have sensory impairments and other disabilities or technically challenged, it’s necessary to tailor healthcare mobile app design.
DESIGNING FOR LOW- AND NO-VISION AND HEARING: LEGISLATION
Developing software that can be used by all people without the need for adaptation or specialized design is called “universal design”. Many software companies, unfortunately, focus on the characteristics of the “average” user.
“The term user experience is now widely used, especially by major players in the industry including Apple, IBM and Microsoft. However, in many cases, the term is contrasted to usability which is often depicted as a much narrower concept focusing on systems being easy to use,” Tom Stewart, Chair of the ISO sub-committee, said.
With a view to making software accessible for people with disabilities, the U.S. Congress has passed legislation in a range of areas. Section 504 of the Rehabilitation Act of 1973 and its amendment 508 suggested in 1986 require that information technology funded/used by the federal government must be designed to be accessible to people with disabilities.
The Americans with Disabilities Act of 1990 (ADA) and ADA Amendments Act of 2008 require public software be accessible to users with physical, sensory, or cognitive disabilities, regardless of what audience is targeted. In 2017, the U.S. Access Board published a final rule updating accessibility requirements for information and communication technology (ICT). Further, it boosts international harmonization, in particular with Canada, Germany, France, Australia, New Zealand, and Japan.
DESIGNING FOR LOW- AND NO-VISION AND HEARING: BEST PRACTICES
The “mobile accessibility” standards address devices that interact with the web, including smartphones, tablets, and wearables. Most often, mobile devices have a small screen size that limits how much information users can actually view at one time. Especially, when zoom is used by people with low vision.
Some best practices for helping low-vision users to make the most of small screens include:
- Cut the amount of the displayed content by providing a dedicated mobile version (providing fewer content modules, fewer images, or focus on important mobile usage scenarios) or a responsive design (on narrow screens the navigation menus may be hidden until a user taps a menu button).
The left picture shows a page with no modification, print preview at 100%. The picture on the right shows the same page at 200%.
- Provide a reasonable default size for content and touch controls to prevent text magnification by the user. The content has to be resizable without assistive technology up to 200 percent.
- Supply with on-page controls to change the text size (e.g. magnifying lens view under user’s finger).
- Avoid using complicated and decorative fonts because they can be discerned much harder. Use standard fonts like Arial or Times New Roman instead.
- Create alternative CSS with a highly contrasting color scheme. The WCAG 2.0. suggests Minimum (at least 4.5:1 or 3:1 for large-scale text) and Enhanced (at least 7:1 or 4.5:1 for large-scale text) contrasts.
- Arrange interactive elements where they can be easily seen when the device is held in different positions.
- Use a range of clearly contrasting colors and hues instead of relying on black and white as the design's only contrasting colors.
Type1 Diabetes Mobile App Design
- Avoid hard-to-see color combos, e.g:
- Green & red.
- Green & brown.
- Blue & purple.
- Green & Blue.
- Blue & Grey.
- Green & Grey.
- Indicate clearly interactive elements (buttons or links) from non-actionable elements (content, status info, etc.) through the following parameters:
- Conventional shape: rounded-corner shaded button shape.
- Iconography: question mark, home icon, back arrow, etc. for conventional visual icons.
- Color offset: various text color, shape with a different background color to distinguish the element from the page background.
- Conventional style: underlined text and different colors for links.
To ensure access to all potential audiences, it is essential that software companies develop products to be compatible with assistive technology. When a mobile app is designed to be accessible to users with a broad range of disabilities, the others benefit too. For example, video transcripts enable deaf users to access the content. However, this feature allows for viewing it in a noisy environment, or for whom English is a second language.
An important step toward a successful UX design for mHealth apps is to practice simplicity. We’ve reviewed dozens of healthcare apps, both on Google Play and App Store, and noticed there is one thing in common: simplistic or minimalist design. Indeed, such programs give users a clean and professional experience.
“Don’t re-invent the wheel,” Jeffery Kendall, SVP and GM at Kony, said. “Use models and frameworks developed by others, and modify them as needed [...] and incorporate what has worked before. Once that framework is established, it’s easier to go in and add elements that personalize or brand the experience.”
Health tracking app by Jakub Antalík
It is also essential to facilitate the register/sign-in process. User authorization has to take the minimum amount of time avoiding numerous screens and clicks. The simplification principle also applies to emergency data accessing, like doctor phone number, prescription medication, or allergies.
Icon sets used in healthcare apps should be highly intuitive so that users can easily understand what a particular icon means. However, more creative symbols can be added while including their description at hand. Thus, developers avoid the possibility of confusing their customers.
Medical Icon Set by Vivek Karthikeyan
Medical Icons by Asif Hussain
Complete Medical App by Asif Hussain
Designing an effective healthcare mobile app requires focusing on what works best for target audiences. Design should be centered around an intuitive UI/UX and proper coloring schemes. Moreover, to reach a wide audience, mHealth apps should be tailored for sensory impairment users.
You want your app to have a modern and harmonious look? Our talented designers will liven it up! Contact us for advice!