RoleSolo UX Designer
|
CategoryAndroid 9.0 (Pie) Google Pixel 3A
|
ApproachLaws of UX & Usability Heuristics
|
Duration1 week
|
Tools
Figma
|
According to Miller’s Law, the average person can only keep seven (plus or minus two) items in their working memory. With the current navigation bar design of sixteen menu options per page, too many choices will overload a new user’s working memory. They could struggle to quickly find what they are looking for and potentially abandon using the app altogether.
In addition to the poor organization of the menu, the icons for each menu item take up a lot of space. As a result, it takes takes more time for users to navigate through each option. This cluttered menu could be a potential pain point for the user. |
Users should be able to immediately recognize information in the interface, rather than forcing them to remember it. Following the Von Restorff Effect, an object in a group of similar objects is more likely to be remembered when it differs from the rest of the group. The team channel indicator should differ from the rest of the information on the card so that it is immediately recognizable.
On the Activity Feed, an update for a new message is given the same card size as an update for an emoji reaction to an existing message. This is confusing for the user because it signals that these interactions have the same level of importance. A message reply should be given more visual importance than emojis because there is more content for the user to process. To incorporate this into the design, an update card for emoji reactions should be created for the activity feed. Users need visibility of system status, meaning the design should keep them informed about the emoji reactions they receive. |
The number of options in the navigation bar should be reduced to the most important functions. The extraneous functions currently nestled within the vertical-more icon in the navigation bar should be reorganized into a side menu. The main navigation bar should now only include the five main functions: Activity, Chat, Teams, Assignments and Calendar.
The menu options are chunked into four categories within a hamburger menu: Productivity apps, Communication apps, Education apps, and Administrative apps. Following Miller's Law, each category holds between 4-7 menu items and is organized into an accordion menu, which can expand or collapse on tap. By grouping the functions into smaller chunks, the menu options will become easier for the user to quickly scan and navigate. To accommodate for the addition of the hamburger menu in the top right of the screen, the miscellaneous icons that currently occupy the top right corner of each screen should be relocated to the left of the search bar. Following the industry standard of a top-right hamburger menu aligns with users' expectations for mobile-app functionality and is easy for them to use. Repositioning the previous top-right icons instead of removing them altogether also maintains internal consistency for Teams functionality. |
To create visual distinction for the team channel name, each team should be associated with a color. An activity card labeled with its corresponding team color allows the user to instantly recognize which team the alert belongs to. This would reduce the mental effort needed for the user to navigate the interface and let them to do so more quickly and easily.
To establish a visual hierarchy between message activity and emoji reactions, the emoji reaction cards should be reduced in size. The current design includes activity cards with a height of 80pts. For this redesign, standard activity cards should remain at 80pts high, but emoji reaction cards should be reduced to 44pts (44pts is the shortest acceptable height for a tappable area in a mobile interface). In order for the emoji reaction card to fit its new height, extraneous information such as the original message details and Team channel are omitted. In its place, a single string of text signals to the user that they received an emoji reaction. The last item in the string is presented in a contrasting color to signal to the user that it is tappable. Tesler’s Law states all processes have a core of complexity that cannot be ignored and must be assumed by the system or user. With the redesign, the user is encouraged to tap into the emoji reaction card to uncover the details of the interaction. |
💌 contact
|
|