A well-designed mobile app has functional communication cues that help users navigate the app effectively. UX designers need to follow industry standards to ensure their communication and direction cues are easily understood to avoid app abandonment or an influx of support tickets from confused users.
That’s why, in today’s blog post, we’re exploring some of the fundamentals of universal communication cues in menus, accordions, and other elements of your mobile app. Creating a versatile user experience can be made easy by incorporating communication cues in the design process.
Pro tip: Using heat maps to scan the website for user activity hotspots is a great way to understand the correct placement for your cues if they are unique to your app.
Here are three important sections where using the right kind of communication cue is vital:
1. Hamburger Menus
When designing a mobile app, space constraints may lead UX designers to include a hamburger menu. They’ve become a staple across popular mobile apps for companies like Google and Twitter. Hamburger menus are hidden side drawers that slide in from the app screen’s left side when the user initiates the right action.
Icon cues that direct the user to the hamburger menu must be clear since discoverability is a significant issue. The hamburger menu is mainly used as a secondary navigation menu and is often hidden behind an icon that usually resembles three lines or a home icon cue.
2. Accordions
Accordions are drop-down sections on a website that tend to have a lot of copy and information. FAQ pages and product information pages are good placements for accordions. Users can click a down arrow or plus symbol to open them up to access the information. To allow users to exit out of the section or question, apps use an upwards arrow, a cross (X), or a minus symbol that collapses the accordion.
Using the right direction of icon cues is an excellent way to ensure your user understands how to access the information within your accordion.
3. Floating Action Button
Several apps place a floating action button to help users start a new project quickly. For instance, Gmail’s floating action button is designed with bright saturated colours and placed prominently on the app screen to make composing emails a breeze. The universal sign for addition (plus)‘+’ is used to denote the start of something new within a mobile app.
If you use non-standard cues or place them in the wrong position, it is difficult for users to create anew. When Instagram rolled out Reels, they replaced the action button from their bottom navigation bar and redesigned it in the top left corner. Users were left frustrated as they were forced to navigate differently to make a new story or post.
Mistakes to avoid
When choosing the type of icon cues to communicate with your users through the UI, there are a few things you should keep in mind.
1. Inconsistent Cues
Ensure your menu icon cues, accordion cues, and any other cues throughout the apps are the same. If you use arrows instead of plus signs to indicate to your user that they need to click to access information, be consistent. Use the same type of arrows wherever else they are applicable throughout the app.
Inconsistent icon cues cause confusion and frustration, whereas consistency enhances learning and increases app usability. Similarly, don’t change command words or controls or offer different ways for the same action. Consistency helps users feel in control, especially when their expectations prove correct. Users tend to like and use apps which they understand easily and quickly, so it’s best not to use new cues to give them the information they don’t need.
2. Wrong Cues
Along with inconsistency, the wrong communication cues can also drive your users away. For instance, if a user wants to cancel an action, placing “CANCEL” in a white action button while you place “CONTINUE” in a saturated action button can irritate the user. No one likes to feel like they’re being tricked into using your product. Make sure your cues are honest, transparent, and straightforward in their usage.
Similarly, when choosing your icons for your menus, choose universally understood and accepted icons. Using a cross or an X to denote exiting a section or the app is good — keeps the UI simple and easy to understand.
3. Directional Cues
If you want your user to take a specific action or go to a particular section, make it easy for them to do so. Directional cues should not be underestimated in their ability to guide users to CTA buttons and understanding core functionalities. Directional cues improve user interface and enhance page scannability, strengthen visual hierarchy, and improve navigation, resulting in increased customer understanding.
An experiment by CXL Institute explored the differences well-placed and clear directional cues can make towards sign-ups and conversions. Arrows highlight the important action areas, graphics employ the eye gaze (line direction) technique to draw user attention, and visual prompts like illustrations and icons can help users find what they need.
UI UX design is rooted in making the user experience easy and smooth, and the right communication cues only enhance that. Brucira experiments with icon cues and directional cues through illustrations and graphics to make the product more relatable and helpful for the end-user.
Want to know more about how we use communication cues in our mobile app products? Reach out to [email protected].
Follow us for design and development best practices and ideas: Instagram | LinkedIn | Facebook | Twitter | Behance | Dribbble
