Building the screen
My earlier article focused on primary requirements to have & know {Check it out here}. It’s part 2 now — let’s build the screen!
What I’ll be covering :
- Color Palettes
- Typefaces and Hierarchy
- CTA buttons
- Familiarity
Color Palettes :
Colors evoke emotions — it’s as simple as that. This is why choosing the appropriate color for your app is essential. We begin by selecting primary and secondary hues, ensuring consistency across the app to reinforce brand identity.
Blue evokes calmness, while energetic hues like red, orange, and yellow can signify strength and danger. Green often represents growth, reminiscent of nature. Black is versatile: when used effectively, it conveys sophistication, but it can also suggest pessimism.
When selecting red or green as primary colors, consider color-blind users. Additionally, conducting contrast checks is crucial. For this, I recommend using tools like WebAIM’s Contrast Checker: https://webaim.org/resources/contrastchecker/, a favorite resource for ensuring visual accessibility.
Our ultimate goal is to design for usability, ensuring accessibility for all users.
Typefaces and Hierarchy :
While choosing typefaces (Font Family) for your app, we consider the legibility and spacing of the letters the most. Hierarchy of typefaces plays a role because it helps the user read better — know which information is important based on the text sizes.
Case in point : Remember during the Miss Universe pageant, Steve Harvey mistakenly announced Miss Colombia was the winner when it was actually Miss Philippines? How did that happen? The typography hierarchy was poor. This insightful example was inspired by my UX in Healthcare course :)
How else could it have been? Well, it could’ve been as simple as the following:
CTA Buttons
Click-To-Action (CTA) buttons serve as clear indicators for users on the next steps they should take, such as “Sign Up,” “Login,” or “Place Order.” These buttons are crafted with concise, actionable phrases rather than lengthy text to maintain clarity and promptness.
Recalling the thumb zone concept discussed previously, positioning CTAs at the bottom of the mobile screen aligns with best practices, optimizing ease of interaction for users.
For mobile interfaces, it’s advisable to feature a single CTA per page to maintain focus, except in cases where the content necessitates multiple actions.
Concerning button dimensions, a minimum size of 44px ensures accessibility and ease of use. Utilizing Auto Layout in Figma can simplify the design process, with button dimensions adjusting based on text size. Typically, I apply a horizontal padding of 25px and a vertical padding of 10px, though these values can vary depending on the specific design requirements.
Familiarity
Users goals are simple : they want to get things done quickly in the app and be done with it. Although trying new stuff isn’t a bad thing, users get apprehensive when they’re not familiar with the app.
When you reduce the time taken for the user to learn about your app, you make the user feel comfortable and increase their likability for your design. Changing a major screen, which they see everyday might throw them off.
Eg: Snapchat’s Redesign in 2017
Snapchat, the popular social media platform, underwent a comprehensive redesign in November 2017. This redesign significantly altered the layout of the app, particularly the “Stories” page, which was one of its most used features. The update aimed to separate social interactions with friends from media content, moving the latter to a different part of the app. Read more here.
Impact:
- User Backlash: The redesign was met with widespread criticism from Snapchat’s user base. Many found the new layout confusing and less intuitive, which deviated from the familiar user experience they had grown accustomed to.
- Decline in User Engagement: Although the exact number in decline of user engagement weren’t revealed, Snap Inc. reported in its Q2 2018 earnings that for the first time, the daily active users (DAU) count dropped by 2% from 191 million in the first quarter of 2018 to 188 million.
Lessons Learned:
The Snapchat redesign serves as a cautionary tale about the importance of familiarity in user experience design. Although it is encouraged to be fresh and new, it should be balanced between user’s comfort and familiarity.
Who knew such a small thing could play a vital role, huh?
I’d love to hear your thoughts and any feedback you might have! Reach out to me to talk more about design :)
https://www.linkedin.com/in/nikethana-nn/ — My LinkedIn
https://nikethana.framer.website/ — My Portfolio
