Table of contents
- Episode 15: Mobile Design
- Introduction
- Best Practices of Mobile Design
- Don't Make Users Think.
- Be Consistent in your Design
- Give your Users Control.
- Make your Product Easy to Navigate.
- Think about Standard Navigation Patterns.
- Stay Consistent.
- Micro-interactions and Motion Shouldn't be an Afterthought.
- Stick to the Basics.
- Think About the First Time Experience.
- Try Letting your Users use the App First.
- Onboarding Screens are so Important.
- The Illusion of a Fast App.
- This is Mobile, not Desktop.
- Stay in the Green.
Udemy Course: Complete Web & Mobile Designer in 2023: UI/UX, Figma, + more by Andrei Neagoie & Daniel Schifano.
Episode 15: Mobile Design
Introduction
Mobile Design is so important, especially when building a responsive product. So, we will be going through the best practices for creating a good mobile design.
We all know that the difference between a good app and a bad app is the quality of its user experience.
Now, if we think about it, many of us use our phones for a large portion of the day over our laptops. It's never been more important to design a very good mobile experience.
Mobile users expect a lot from an app, whether that be a delight from an interaction or fast loading time or clarity/simplicity of the app, to just the general ease of use of the app. All these different things make a great user experience.
Best Practices of Mobile Design
Don't Make Users Think.
Your product should strive to be easy to understand and use. Because we don't want to make users think too much.
If your app is too hard to use or understand, you risk having the user walk away from the product.
To make your app easy to use or understand, you can carry out the steps below:
\==> Step 1: Declutter (Cut away unnecessary content)
\==> Step 2: Break Tasks into Smaller Chunks (e.g. breaking forms into sections of related information)
\==> Step 3: Stick to the Patterns (e.g. onboarding screens, product description screens etc.)
\==> Step 4: Minimize User Inputs
\==> Step 5: Pre-format and AutoComplete Fields
Be Consistent in your Design
This is a fundamental principle of design and it eliminates a lot of confusion.
It is essential to help with visual consistencies like Typeface, Buttons, Labels, Colours, Functional consistency, Interactive elements across the app, etc.
Give your Users Control.
Give your users as much control or the illusion of control.
This can make the users understand how things work and that's like the user having this overall predictability of the product.
Using familiar design patterns will help our users understand how our system works already.
Make your Product Easy to Navigate.
It seems simple but the biggest priority of every single app is helping users navigate around the app easily.
Everything won't matter, if users don't know how to get to places they want to get access to in the app. So, users should be able to browse your product effortlessly while completing all their primary tasks.
Think about Standard Navigation Patterns.
Stay Consistent.
Don't Mix Different Navigation Patterns into Your Design.
Micro-interactions and Motion Shouldn't be an Afterthought.
Start thinking about the process of micro-interactions and motion right from the beginning of your designs.
Stick to the Basics.
Don't go about introducing complex stuff. Place in the basics that your users can relate to appropriately.
Think About the First Time Experience.
Think about when the user comes to your application or product for the first time, we must optimize for that. Because that first-time experience can make or break the user's understanding of your product.
This is why it is so important to emphasize how much thought should go into that experience.
Try Letting your Users use the App First.
Think about allowing your users to try your app first without actually having to sign in. So they could have like an onboarding screen and then they could just get started real quick without necessarily having to go through a sign-in wall.
Mandatory registration is a common source of friction for users and it is one of the main reasons users abandon a product. So, they should only be asked to sign up if it's essential.
Onboarding Screens are so Important.
Your onboarding concept should be so smooth, making sure to showcase why users should stay.
So, the product value prop or teaching users about major features could be hidden in the onboarding concept.
The Illusion of a Fast App.
Loading Time is extremely important for mobile users. If pages take too long to load, users may become frustrated and may decide to leave.
It is really important to kind of create an illusion that makes your product look fast. This is a very good design pattern to use in aspects of stuff like search results.
This is Mobile, not Desktop.
Please remember that we need to optimize for mobile. So, we need to make sure our content is readable and legible.
And always be reminded that you're designing for fingers and not cursors. It's easier to hit a small button with a cursor but can be hard trying to do the same with a thumb. Having the right amount of space within buttons and appropriate button sizes can make a big difference. This is why we must ensure that our design is well-optimized on mobile.
Stay in the Green.
The image above is essentially reminding us that there are thumb zones and we should do our best to keep our primary actions in the Green.
The Yellow Zone and the Red Zone are the hardest zones to reach respectively. It is best suited for handling options that you want users to trigger less frequently like a delete or cancel button.
We need to consider how we hold our devices, so we must optimize our design to fit in for mobile users.
In conclusion, these are most of the best practices for mobile design. If you use them as a guide in your mobile design, you will be able to design a great mobile experience.
The journey gets better...
#Figma #ProductDesign #UIUXDesign #UIUX #UIUXCourse #Branding #BrandStrategy #UIElement #Design #MobileDesign #Udemy #UdemyCourses #ZTM #ZeroToMastery #DocumentingMyTechJourney #BuildingMySkillset #TechSkill #SkillSets #ProductDesigner #EngrShege #ES