medium bookmark / Raindrop.io |

In previous posts, we’ve discussed how to build an effective medical mobile app, how to protect personal data, and why you should invest in developing a medical application in the first place. What we haven’t taken a closer look at yet, however, is the critical aspect of design. What should a great medical app look like and what things do you need to consider when developing the user interface (UI) and user experience (UX) for this particular audience?

Good quality design is important for any mobile application, but it’s especially important when developing an app for sensitive target audiences such as those using medical mobile apps. Since many users in this sector will be elderly, might have sensory impairments or other disabilities, or may lack the technical expertise of younger mobile app users, it’s necessary to think ahead when creating your medical mobile app’s design.

Creating a successful, effective app requires constant focus on what works best for the app’s specific audience. Development should take user needs into account and design should be centered around a clean, intuitive UI/UX. As part of the development process, you’ll need to choose the appropriate color scheme and fonts, as well as make decisions about important design elements and details. All of these different factors contribute to creating an easy-to-use, popular, and effective medical mobile app.

Choosing color schemes

When making a decision on your medical app’s color scheme, remember that it’s no ordinary app. While crazy, vibrant colors might work well for a mobile travel application, a sensible medical app requires a more delicate and soothing color palette for a variety of reasons.

Users should feel calm and comforted when opening your medical mobile app, knowing that they’ve come to the right place to address their healthcare needs, questions, and concerns. This atmosphere is best achieved with an appropriate color palette that projects a sense of well-being. There are many hues and tones to choose from on both the cold and warm sides of the spectrum.

Cold tones

Generally, we suggest using cold colors for the background of your app’s design. These tones establish an overall sense of tranquility that is necessary to help users concentrate on the more important features of your app.

White

White is often used as the background of apps because it represents reverence, purity, innocence, and nothingness. This association calms people and influences their brain activity in a very positive way. The “color” is also very versatile, coming in a wide variety of different shades such as snow, seashell, ivory, baby powder, and many more options that even the most meticulous mind can choose from.

Quip is a great example of a medical service that primarily utilizes shades of white in its design.

SteelKiwi Advice: In many Asian regions (China, Hong Kong, India, Taiwan, Japan, etc.), white also symbolizes mourning. This means it may not be appropriate as a background for medical mobile apps focused on a target audience in those regions.

Blue

Blue symbolizes a sense of calm, peace, harmony, trust, honesty, and knowledge. In cultures around the world, blue most often translates into trustworthiness and reliability. It is also regarded as the color of survival and healing support (perhaps hinting at why medical staff across the globe tend to wear blue-toned scrubs).

Many medical apps make use of blue hues to promote a tranquil environment for their users.

SteelKiwi Advice: In most countries, light hues of blue represent something kind and positive, but in Italy, blue is regarded as the color of mourning. In Mexico and much of the Caribbean (the Bahamas, Cuba, Jamaica, Haiti, the Dominican Republic, and Puerto Rico), blue also has some negative connotations, including mourning, death and pirates. Adjust your use of blue to match your audience!

Green

Green is often associated with health, good luck, youth, vigor, generosity, and fertility. This is why it’s commonly used in designs for paramedical or pharmaceutical services, as well as in platforms that promote healthy lifestyles (like yoga, pilates, aerobics, and more).

SteelKiwi Advice: Keep in mind that for Shiite Muslims (who mostly live in Iran, Pakistan, India, and Iraq), green is a sacred color and should only be used when specifically appropriate.

Warm tones

Warm tones also have their place in mobile app design. However, for medical mobile apps, we suggest using them thoughtfully and sparingly as highlighters, unless you’re planning to design the whole app using warm colors (which could be appropriate in some cases).

If you do prefer using a warm color palette as the foundation for your app’s design, we strongly recommend only using softer, more neutral shades. Vibrant colors can be quite irritating and hard on the eyes and they also tend to be much more difficult to combine with other colors aesthetically.

For a medical mobile app, warm tones are best used as particular design elements (such as icons or CTA buttons), in combination with a cold-toned background. By using palette contrasts appropriately, you can create an interface that has a clean, calming effect on the user, while also contributing to intuitive UX design.

Pink

Pink is the color of childhood, tenderness, sensitivity, and romance. It is often associated with being taken care of and with babies and mothers, which is why it’s primarily used for designing platforms related to women’s health and childbirth.

Jackson Women’s Health Organization provides family planning services focused on meeting the unique healthcare needs of thousands of women. Their website combines a beautiful pink color palette and well-placed accents with a cold-toned background.

SteelKiwi Advice: Generally, pink represents love, compassion, fertility, and youth. In many Western countries, however, pink has various connotations to gender and sexuality and is most often associated with femininity or more “girly” products.
Therefore, using pink in gender-neutral platforms may not be appropriate or could be considered offensive or gender-biased because of this association.

Yellow

Yellow is a gentle color, often associated with joy, happiness, sunshine, and hope. Yellow tones are very versatile, combining in aesthetically pleasing ways with many other tones, both warm and cold. However, be careful when combining it with other colors as it’s easy to overdo the vibrancy effect.

The color works especially well for child-care platforms. For example, Little Crownis a children’s dentistry website that features various warm and cold colors, including yellow, creating an ideal combination of the two palettes.

SteelKiwi Advice: In most countries, yellow is associated with sunshine, happiness, and amusement. It is a universally accepted color with very few negative cultural connotations although, in some countries, the color can represent jealousy, duplicity, cowardice, or sickness.

Important notes on choosing color schemes

1: Choose subtlety

Since medical apps deal with sensitive information and personal health issues, it’s important to make sure that the colors used in the app’s design are soft, neutral, and don’t call for too much attention. This will help users safely look things up on their mobile devices, even in public, and is an especially critical aspect of developing an app focused on chronic conditions that are often stigmatized (such as HIV/AIDS, diabetes, mental health disorders, etc.).

Two great examples of color scheme subtlety in action are the Fonds Salamonwebsite:

and the Comprehensive Breast Care Center website:

2: Know your audience

Studies show that color perception changes with age. Children tend to prefer bright and vibrant colors that attract their attention. Older people are more likely to enjoy softer, more soothing colors. Make sure to take your target audience’s demographic details into account in order to choose the best, most appropriate tones for your app.

3: Colors for the colorblind

If your medical mobile app uses colors that could be problematic for colorblind people, you might want to consider adding color inversion options or creating a separate menu for the app’s color configuration. By taking the needs and abilities of various types of users into account, you can develop a website or application that more people can comfortably enjoy.

Choosing fonts

Fonts are another invaluable part of any app’s design. They’re like your business card, your outfit, or the way you comb your hair — they represent who you are and what you do. By carefully selecting fonts that effectively combine with your chosen color scheme, you can ensure that the first impression your app or website leaves on new users is a great one!

As with colors, there are many dos and don’ts to consider when choosing appropriate fonts for medical mobile applications. The sheer number of font styles makes the choice a rather difficult one, especially if you’re unfamiliar with best practices in digital typography. Our experience has taught us that approximately three-quarters of fonts won’t be appropriate for a medical type of mobile app. In fact, we can narrow it down even more than that.

Sans Serif versus Serif fonts

You’ll most likely want to go with a Sans Serif font when developing your medical mobile app. Although some people argue that Serif fonts make long, printed passages of text easier to read, this theory has yet to be proven. However, it’s a well-known fact that Sans Serif fonts are better suited to digital mediums. But why?

A Sans Serif font is, literally, a font without serifs. This type of font is very versatile in the digital world because of its overall minimalism and simplicity. Sans Serif fonts are easy to display across various devices and screen specifications without any problems.

Serif, on the other hand, is a type of font that contains little details at the ends of each letter’s stroke, visible in the red, circled portions of the image below.

These details make Serif fonts appear smaller, thinner, and more elegant, often reminiscent of classic book-like typography which many people prefer. However, not all devices and screen sizes are capable of displaying Serif font details properly, making them problematic to use in mobile app development.

Since medical applications target a wide range of users with varying abilities and device specifications, it’s important to use simple, easily readable fonts. Ensuring that the available information is accessible and consistently displayed across your user base will be a key component to developing a successful medical mobile app or website.

Other fonts to consider

Apart from Serifs and Sans Serifs, there are many other fonts that could be appropriate for your application. However, we still strongly suggest using a Sans Serif font for a medical app (unless, of course, you have a very good reason not to).

Best practices for font configuration

• Generally, best practices recommend using no more than three different fonts per platform.
• Make sure to adhere to Android or iOS typography guidelines, depending on your preferred publishing platform.
• Consider using simple fonts to positively influence users, helping them accomplish more with your app by applying scientific research to develop effective Call-to-Action (CTA) buttons.
• If your medical app’s target audience primarily consists of elderly people or people with visual impairments, you might also want to make all typefaces a font size or two larger for accessibility.
• Font color should be easily readable and contrasting with the app’s background.Avoid using colored fonts as their visibility tends to be rather poor. Usually, a black or dark-gray color on a light background is the best choice.
• Keep in mind that string length can vary, depending on screen size, so it’s best to plan those numbers carefully in the early days of development. Proper string length really adds to overall readability, making it vital for platforms that provide users with large quantities of text (such as medical reports, test results, articles, recommendations, and more).
• Apart from choosing an appropriate font, make sure to also pay attention to the font’s X-height. Generally, the higher this is, the better, but make sure that lowercase letters are easily distinguishable from titles and uppercase characters.
• You can also consider adding a small control panel to your app, allowing users to customize how the app is displayed based on their own preferences.

Of course, your final font choices should be made based on the needs and peculiarities of your platform’s target audience and should be in tune with your app’s UI and UX design. Choosing simple, readable fonts and configuring them with the help of best practices will allow you to develop an accessible, useful medical mobile app.

Other important elements of medical mobile app design

There are a lot of other important details to consider when developing a medical mobile app. Not only do you want the product to look great, but you want it to be comfortable to use as well. Small details such as button size, kerning, spacing, alignment, icon sets, and image display all add up to bring the app’s entire design together into one smooth user experience.

Button size

The average width of an adult fingertip is 10mm. Generally speaking, if your product’s target audience consists of elderly people or of those who might possibly have visual impairments, we suggest making all buttons larger than that average.

In their recommendations for interface design, Android suggests properly configuring the viewport and setting the size of all active elements to at least 7mm (or 48px in CSS). As for Apple, their recommendations specify that all buttons should be no smaller than 44x44px in size.

SteelKiwi Advice: A nice feature that can increase the overall accessibility of your product is to accompany buttons with sound effects that give users the name and purpose of the button. This feature can provide additional assistance to visually impaired users.

Kerning

Kerning, the distance between separate characters in a font, is a very important element of design. It affects a great number of things on the screen, including general aesthetics, readability, and comfort.

Many fonts available online make great use of kerning, but it’s much more likely that your product will need some specific, personalized configurations which a professional designer can achieve quickly.

Interline spacing

Interline spacing, also known as line spacing, is the vertical distance between lines of text. Like kerning, this is another element of design that can have a significant impact on the overall readability of text, especially important when creating an accessible medical mobile app.

Text alignment

Usually, aligning paragraph text to the left of the screen is considered best practice. However, certain regions (such as the Middle East) require unconventional text alignment because they primarily use right-to-left language formats. If you’re developing or designing an app for RTL regions, make sure to adjust text alignment accordingly. Proper alignment also removes the need for hyphenation, making the screen less cluttered and the text easier to read.

Icons

Icon sets used in a medical app should be obvious and very intuitive so that users can easily understand what a particular icon represents. However, if you want to add more creative symbols into the mix, make sure to include their detailed descriptions somewhere that is easily accessible to avoid the possibility of confusing your users.

Images

Any image that you want to add to your product must be in high resolution to appear sharp in quality on both smartphones and desktop computers.

Generally, it is a good idea to add a magnifying feature to your app. Even if the user isn’t able to see an image properly by default, this feature will ensure that they can always get a detailed version of it.

There are many aspects that go into creating a successful, usable medical mobile app. These are just a few of the design elements that you’ll need to consider before developing an app of your own.

SteelKiwi First-hand Experience

SteelKiwi has developed a number of medical applications, and we’d like to show you a couple of the most recent ones.

The Medical app (its official title is protected by the NDA) operates as an online doctor, allowing for real-time medical consultations between patients and medical professionals.

Nova Vita is a hospital management system that simultaneously serves as a CRM and an ERP, providing means for simple and comfortable hospital management.

The design of both apps primarily utilizes cold and neutral tones. In order to give Nova Vita that crisp-clean and professional minimalist look, we used deep blue and green colors on a white background. They always work best for management-related products.

As for the Medical app, we implemented a different approach, using soft pastel-based hues of blue and highlighting the important elements with either mint greens or warm pink colors. This creates a soothing balance, which is very important in the sensitive area of patient-doctor interactions. We would also like to underline that, having different target audiences, the two products present quite a contrast in their design.

Nova Vita, being meant for a hospital in the Netherlands, sports a very clean and rather simplistic look. There are few colors on the palette, sharp lines and no excess detail — all characteristic of the minimalist design which is highly regarded in the West.

The Medical app, being primarily targeted at the Thai audience, presents the usual for Asian applications abundance of content and detail, appearing to be a web app rather than a mobile application the Westerners would normally be used to seeing.

Both products utilize sans serif fonts: Open Sans for Nova Vita and Athiti for the Medical app. The fonts are very clean and ensure comfortable readability of all written material.

Designing an effective medical mobile app for your audience

As the health sector continues to adapt to technological innovation, it is increasingly important for those looking to enter the market to be aware of the best practices associated with creating effective UI/UX for medical apps. Taking color schemes and font selection into account, as well as making smart decisions on various other elements and design details is critical to an app’s success.

Medical mobile apps that cater to users with sensory impairments or those that lack the technical savvy needed, such as elderly people, must be designed and developed in a way that makes every single feature as crystal clear and accessible as possible. It’s good practice to always test your final product’s design to make sure that it is accessible and comfortable for all of your users.

If you’re looking for another real-life example of medical application design, there’s also a Dribbble shot of a Qatar-based startup we developed not so long ago.

For any further information regarding designing or developing your own medical mobile application, we welcome you to contact us!