Objective
To explore the importance of ergonomics in UI design by improving a mobile banking app’s user interface to enhance usability, comfort, and accessibility, ultimately resulting in increased user engagement, satisfaction, and retention.
Background
A well-established financial institution wanted to redesign its mobile banking app, which had received numerous complaints from users about its usability. Despite having a comprehensive feature set, the app was hard to use for both new and existing customers. Feedback from users indicated issues such as difficulty navigating the app for common tasks like checking balances, transferring funds, and paying bills.
The design was not ergonomic — the buttons were small, touch targets were difficult to tap, text was hard to read, and interactions were not optimized for different screen sizes. The institution wanted to improve the app’s ergonomics, making it more intuitive and accessible for all users, with a focus on simplifying the user experience while maintaining security and functionality.
Challenges:
- Small buttons and interactive elements difficult to tap.
- Complex navigation that wasn’t intuitive for first-time users.
- Overcrowded screens, leading to a cluttered feel and cognitive overload.
- Lack of clear visual hierarchy, making it hard to distinguish between primary and secondary actions.
- Poor text readability, especially for older users or those with visual impairments.
Approach: Applying Ergonomics in UI Design
Step 1: Reconsidering Touch Target Size
- Issue: The small touch targets (buttons, icons, and links) made it difficult for users to interact with them, especially for those with larger fingers or dexterity challenges.
- Solution: Increased the size of all tappable elements to meet the recommended minimum size of 44px by 44px (Apple’s Human Interface Guidelines and Google’s Material Design). This improvement was made across the app for buttons, form fields, icons, and links.
- Result: Users with different hand sizes could easily tap interactive elements, reducing accidental presses and frustration. This change improved task completion rates and overall usability.
Step 2: Optimizing Navigation for Simplicity
- Issue: The app’s navigation was complex and required multiple steps to complete tasks, such as transferring funds or checking balances.
- Solution: Introduced a bottom navigation bar for primary actions (e.g., Home, Accounts, Transfers, Payments). Additionally, implemented a clear hierarchical structure with a “hamburger” menu for secondary options like settings, security, and customer support. The goal was to prioritize the most common actions, making them easily accessible with one hand.
- Result: The simplified navigation reduced user effort, making it easier to complete tasks with fewer steps. The improved flow led to a decrease in task time and fewer errors, particularly among first-time users.
Step 3: Prioritizing Legible Typography
- Issue: The text used in the app was too small and lacked contrast, which made it difficult for users, especially older adults and those with visual impairments, to read.
- Solution: Increased the font size for readability and ensured a high contrast between text and background (using dark text on a light background). Used easy-to-read sans-serif fonts like Helvetica Neue and Roboto, which are known for their readability on digital devices.
- Result: Readability improved significantly, and users with visual impairments reported a more comfortable experience. This also resulted in fewer mistakes in interactions where users needed to read and understand financial information.
Step 4: Implementing Consistent Visual Hierarchy
- Issue: A lack of visual hierarchy meant that users often couldn’t easily differentiate between important and less important actions or information.
- Solution: Enhanced the visual hierarchy using size, color contrast, and whitespace. Important buttons, like “Send Money” or “Pay Bills,” were given more prominence by making them larger and using accent colors. Secondary actions were placed lower on the screen and given less visual weight.
- Result: Users could more easily distinguish between primary and secondary actions, reducing decision fatigue and improving task completion. The redesign led to quicker navigation and higher success rates for financial tasks.
Step 5: Designing for One-Handed Use
- Issue: Many mobile users, especially on larger smartphones, struggled to interact with elements placed at the top of the screen due to the need to stretch their thumbs.
- Solution: Moved the most common actions (e.g., account balance, recent transactions, and transfer funds) closer to the bottom of the screen for easy thumb access. The bottom navigation bar was designed to allow thumb access even when the phone was being held in one hand.
- Result: The app became more comfortable to use, particularly for users with larger smartphones, and resulted in smoother interactions, with users reporting less strain when using the app.
Outcomes
Business Metrics:
- Conversion rate: Increased by 15%, particularly for completing high-priority tasks such as bill payments and money transfers.
- App retention rate: Increased by 20% in the first month after the redesign, indicating that users found the app more enjoyable and easier to use.
- Customer satisfaction (CSAT): Improved from 70% to 85%, with many users specifically mentioning the ergonomic changes (e.g., bigger buttons, better navigation) as a major improvement.
UX Metrics:
- Task success rate: Increased from 80% to 95%, indicating users could complete tasks with fewer mistakes and more efficiently.
- Usability score: Improved from 70 to 90, based on user feedback and usability testing.
- Time on task: Decreased by 10%, with users completing actions like transferring money in less time.
Key Insights
- Ergonomics is Crucial for Mobile Design: Ergonomics in UI design focuses on creating interfaces that are easy to use, comfortable, and accessible. By prioritizing touch target sizes, readability, and user flow, the app became more user-friendly, reducing cognitive load and making it easier for users to complete tasks.
- User-Centered Design Leads to Better Engagement: Focusing on the needs of users, especially in terms of accessibility and comfort, leads to higher engagement and retention rates.
- Mobile Design Must Consider Real-World Contexts: Since most users interact with apps on the go, ergonomic considerations like one-handed use and large touch targets were essential in creating a smoother experience for a broader audience.
- Iterative Design Pays Off: Small but impactful changes, such as improving button sizes or adjusting font legibility, have a big impact on overall app usability and user satisfaction.
Conclusion
This case study demonstrates the importance of ergonomics in UI design, especially in mobile apps. By applying ergonomic principles—such as optimizing touch targets, improving navigation, and enhancing readability—the mobile banking app was transformed into a more intuitive, accessible, and comfortable experience for users. The improvements not only led to higher user satisfaction but also contributed to key business metrics, such as higher conversion rates and increased retention.
Key Takeaway: Ergonomics in UI design is not just about making things look good; it’s about creating experiences that are easy, efficient, and comfortable for users. When done right, ergonomic design can significantly improve usability, engagement, and user loyalty.
