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.
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.
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 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.
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.
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.
- 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.
Want to learn more? Check out these case studies below:
 |
Figma Tool Figma is a design platform that features good tools for UX/UI design, prototyping, collaboration, and specifications |
 |
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 Best practices in implementing search functionality. |
 |
Zeplin tool MCoE Design team has been using Zeplin for specs and comps. Learn about the Zeplin tool. |