Redirecting to default login... Sign Out Button – Mobility Center of Excellence Team Website

Sign Out Button

At KP we strive to create a universal brand across our apps. The Sign Out button is an important asset for KP applications that contain sensitive information. In a healthcare organization, we aim for an environment where our users can easily navigate to common features, such as the Sign Out button, across all KP apps. This case study explores the inconsistencies of KP apps Sign Out button locations and design, and provides recommendations for a button standard.

Design Standard Importance

Good quality design is an integral part of a sustainable development. Achieving good design is about creating spaces that adapt to the needs of the clients, is visually appealing, and works well for everyone. Having a design standard will enhance the quality of our apps and impact the efficiency and effectiveness of our KP apps for our patients and workforce.

External KP app Examples

Flagship: The KP Flagship app displays the Sign Out in the fly-out menu at the bottom of the screen in both the iOS and the Android versions. They use a white background and an icon to insinuate a button.

iOS

Flagship Sign Out Screens

Android

Flagship Sign Out Screens



KP Preventative Care: The iOS and Android versions display the Sign Out button in different locations. In the Android version the Sign Out button lives within the fly-out menu and is displayed as a list item with a visual icon to the left. In the iOS version the Sign Out button is in the form of a button within the Settings. The button uses the KP actionable blue to insinuate that the user can tap on it.

iOS

KPPC Sign Out Screens

Android

KPPC Sign Out Screens


KP My Baby and Me: This app only has an iOS version as of right now. The Sign Out button lives within the More tab in the middle of the screen. It is displayed as a small teal button with an icon.

iOS

KP My baby and Me Sign Out Screens


KP Meds: The KP Meds app houses the Sign Out button within the Settings tab at the bottom of the screen. The button has a white background and the words “Sign Out” are centered within the white button.

iOS

KP Meds Sign Out Screens


User Testing

User testing was performed on two forms of a Sign Out button to gain an understanding as to which locations and button designs were the easiest for the users to use and recognize. We compared the current flagship design to a design with a blue Sign Out button. The feedback was more favorable of the blue Sign Out button. Users reported the blue button stood out more in comparison to the current design. They recognized the blue color as being a tappable object and it had more of a button feel. The users reported the icon in the current design as confusing. It is the same icon used as the power icon on Apple products.

Current Design

Flagship Sign Out Screen User Testing

Iteration 1

Flagship Sign Out Screen User Testing


Sign Out Button Design Recommendations

Using a design standard and ADA compliance we can create a universal Sign Out button that is intuitive and easy to find in all KP apps.

    • Use an actionable blue button: The actionable blue color tells the user that the Sign Out button is a tappable asset. This will help to create a more intuitive environment across the KP apps.
    • No icons: The current icons KP is using are confusing to the user and not uniform across the apps. A button without an icon gives a cleaner feel and does not create confusion.
    • Place in a common area: Place the button in the fly-out menu at the bottom of the screen or in the Settings/More tab. These are both common places that a user would look to sign out. We want to aim for an environment with instinctual navigational features.
    • Keep the placement the same for iOS and Android: The location of the Sign Out button should be in the same location for both versions. If the Sign Out button is in the fly-out menu for Android, then it should also be there for iOS and visa versa.
    • Keep button at the bottom of the screen: The Sign Out button should always live in the bottom half of the screen. This is the most logical place to put the button and the easiest for the user’s thumb to reach. The diagram below shows in green the most natural locations for the thumb. This is an important factor to consider in a health care app because there is often medical information stored in the app. The Sign Out button should be something the user can access quickly and easily.

Thumb access diagram


  • Use the same verbiage across all KP apps: Use the words “Sign Out” with the S and O in title case. Do not change to “Log Out” or any other wording. Keep all words and letter cases the same.
  • Use a medium to small button size: Too large of a button can take away from the other content on the screen and become too distracting.

Summary

This is an example of a well-designed Sign Out button. Based on the user research and the design recommendations, a Sign Out button with an actionable blue color located at the bottom of the screen is most ideal. The button is a medium size and not distracting to the user with an easy access point. This button also follows all the design recommendations for the Sign Out button.

Sign Out Screen Recommendation

Want to learn more? Check out these case studies below:

Figma Tool Figma Tool
Figma is a design platform that features good tools for UX/UI design, prototyping, collaboration, and specifications
Hamburger Menu v.Tab Bar Hamburger Menu v. Tab Bar
Determine which navigation style – hamburger or tab bar menu- provides the most intuitive and positive user experience as well which one was preferred by users.
Search tool Search Tool
Best practices in implementing search functionality.
Zeplin tool Zeplin tool
MCoE Design team has been using Zeplin for specs and comps. Learn about the Zeplin tool.