Em Client for Android is getting really good! I hope it becomes the best email client on Android soon! Here’s some usability improvement recommendations though.
Label mystery meat icons by default so that users know what they do immediately.
It’s awesome that there are numerous customizable bottom row toolbars in different areas of Em Client. Customizability is great! But unlabeled icons are almost never immediately understandable by normal people. There should be a “Show labels” checkbox in the toolbars customization areas that is turned on by default for everything. This way, users can instantly know what those icons at the bottom do, and if they decide that the labels take up too much space, they can uncheck the “Show labels” options once they have memorized and customized which icons they want in the toolbars. See below for several studies about how labeled icons improves usability and engagement in human-computer interaction design:
- Yes, icons need text labels
- The Importance Of Labels
- The best icon is a text label
- Icon usability
- Do icons need labels?
- The Obvious UI is Often the Best UI
- Introduction to Mystery Meat Navigation (2) (3)
Put interactive items where fingers can reach them
20 years ago, it was okay to put buttons and interactive elements anywhere on the screen because smartphone screens were only 3.8" diagonal and a normal human thumb could reach all parts of that small area very easily. Today smartphone touch screens are no longer that small and reaching top-edge functions requires either a second hand, or awkward scooting and repositioning of fingers. That’s not a user-friendly, efficient, or ergonomic design at all.
Also see:
- 8 ways to tell if your mobile app sucks
- Responsive Navigation: Optimizing for Touch Across Devices
- How Do Users Really Hold Mobile Devices?
- How to design for thumbs in the Era of Huge Screens
- The Thumb Zone: Designing For Mobile Users
- Designing for Large Screen Smartphones
- Why Mobile Menus Belong at the Bottom of the Screen
Two of those articles are from Luke Wroblewski, Product Director at Google, which is why most new Android apps from Google are better at following these ergonomic usability principles.
Sidebar discoverability
Currently, there’s no obvious way to access the left edge sidebar for accessing important things like Settings, Calendar, Tasks, Notes, Contacts sections. If you have Gesture navigation enabled for the Android system launcher, a left edge swipe does not show the app’s sidebar as Android’s system assigns the left edge swipe to the back function. In that case, the only way to find that sidebar is to tap the icon in the upper left corner; an icon which looks like it’s just a view indicator and changes depending on the view status; usually it’s an icon of my email account’s avatar image created for the account. That is not a consistent or obvious way to show a menu.
I suggest a persistent “main navigation” bottom row of labeled icons for one tap access to the important main sections of the app. This should also be customizable so that users can decide for themselves which sections are the most important to have easy 1 tap access to. Of course, the bottom row navigation bar should have a “menu” button at the end that reveals other options that don’t fit in the bottom row.
I made similar recommendations to the Microsoft Outlook for Android team years ago and you can see that Outlook for Android now has an extremely easy way of accessing mail, calendar, contacts, and other sections of the app in the bottom toolbar which is also easily accessible by a thumb while holding a phone. Sometimes they add things there that we may not want, like CoPilot, but thankfully the customization interface there makes those easy to remove.
Use accessible colors to comply with WCAG
Some of the buttons have very bad color contrast ratios. For example, the “new” button has a background color of #FE9500 and a foreground text color of #FFFFFF. That turns out to a 2.21 contrast ratio, which is very far below the AAA Web Content Accessibility Guidelines compliance level of 7:1.
Calendar Free/Busy differentiation shading
In the calendar, free and busy appointments have the same color while tentative appointments have lines to differentiate. Appointments marked as free should not look the same as appointments marked as busy.
Dark mode should be black
The whole point of dark mode is that on OLED screens pixels that are black don’t use any electricity. So if a majority of your OLED screen area is set to black, you’re saving battery life. This is something that’s pretty important for mobile devices like smartphones. Currently your dark mode uses a grey color which still requires power in all pixels of the display. A black background would also improve the contrast ratios for better accessibility compliance as well.
Multiple section windows for multi-tasking
Currently Em Client only loads one window in the Android system. If it loaded multiple windows, we could manage them as floating windows or split-screen windows for improved multitasking. For example, “Nine” (another Android email app), creates separate windows for new emails, email list, calendar, contacts, tasks, and notes sections. This means I can use Android split screen features to see the calendar, email list, and draft email all at the same time thus making it very easy to reference appointments or other emails while writing a new one.
The Android Share option only allows sharing to email
When using the “Share” command from other apps, the Em Client listing only allows sharing to a new email. A competitor email client (Nine), has a much better interface for this which allows users to choose to share to Email, Calendar, Tasks, or Notes. These options are extremely useful as often I might see a web page about an event that I want to attend… tapping Share > Em Client > Calendar would make adding that event info to my calendar extremely easy.