Welcome back.
So we are here with part two of mobile design best practices.
Now we're going to start off with navigation, so make your products easy to navigate.
I mean, that seems simple, but I mean, the biggest priority of every single app is helping users
navigate everything.
Won't matter if users don't know necessarily how to get to places where they want to go.
So users should be able to browse your product effortlessly while completing all their primary tasks.
So here's an example.
I mean, this is just very easy.
I know this is a home icon.
I know this is some sort of saved or wishlists or whatever icon search profile.
See, this is kind of like search and profile.
So I got a three out of four.
Right.
But I mean, making your product easy to navigate is so key.
Now, the first thing we want to do is, you know, think about standard navigation patterns, whether
that be like a navigation draw a sidebar.
We don't have one here or it could be like a bottom bar iOS like using bottom bars.
So that's another design pattern or a mobile design pattern that we can use.
You know, users are familiar with these types of patterns.
So there's really no need to reinvent the wheel.
Like you don't want to have like some sort of navigation on the right and it being, like vertical or
something crazy like that, it won't work as well.
And that's kind of proven.
The second step is we got to think about the order and that is where we kind of prioritize the different
types of options within your product.
So, you know, in this one, it looks like they've kind of made this much more prominent, like their
filters.
And that's a big it looks like it's a big portion of their application.
So they've ordered it accordingly to where your thumb may actually hit it.
So that's very interesting.
Just in terms of implementation, something I've been thinking about for our application, like maybe
a search can go there and it could pop up a search instead of having search always fixed at the top.
So that's something to definitely think about.
And there it is again.
Consistency hits back its back.
So don't mix navigation patterns in your product you won't always stick to.
One is very confusing if you have something like this and then you implement some sort of draw sidebar.
So stick to one and stick to one only.
The next one is animations and micro interaction.
So these shouldn't be like an afterthought.
You should always be thinking about them, you know, right from the beginning of your design process.
You should kind of be thinking about that.
But also, before you get to High Fidelity designs, think about that as well.
Animations are kind of like that best tool to describe like a state transition.
So as you can see here, just like just the transition really helps.
Let users know exactly what's happening.
So let's take a look at another example, if I'm switching pages, I can see like that state transition
from right to left, I can see which pages I'm going to very easily if we take a step back.
And we think if this were to happen instantaneously, it would be much more confusing for your user.
It would be much more jarring for your user.
So that is one big part of like using micro interactions are just using like animation in general and
motion.
You also want to just stick to the basics.
I mean, you don't want to overcomplicate things by like adding different types of crazy gestures over
here.
We have like just pulls, tops, you know, sliding.
I mean, just the basic stuff is more than enough.
You know, it can be tempting to use a bunch of different available gestures.
But I mean, the learning curve is just way too high in most cases.
And most people are only really familiar with like the basic ones anyways.
So you stick to the basics when it comes to gestures and it'll make just the interactions in your application
much more smoother.
And one thing I really want you to think about is think about when the user comes to your application
or your product for the very first time, you really want to optimize for that because that first time
experience can really make or break like just the user's understanding of your application, even just
the user's feeling about your product.
So it's very important to kind of emphasize how much thought really should go into that experience.
So if your app allows for it or your product allows for it, 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, like, get started really quickly without necessarily having to go through assignable.
You know, mandatory registration is a common source of friction for users, and it's probably one of
the main reasons users abandon a product and they should only really be asked to sign up if it's essential.
So think about that.
Definitely when you're going through that process, even if we're thinking about our application that
we're building, we want to maybe delay that registration right to the end and let users actually try
our product first.
Also, allowing users to try your product just a bit in the beginning can kind of like get them more
likely to commit in the end if we gently remind them throughout the process to sign up or if users just
like our application overall, it gives them more of an incentive to actually sign up when they would
have just been like behind a wall in the first place and maybe have deleted the application without
wanting to sign up or give us their information.
Your onboarding is so important.
I mean, it should be so smooth.
Make sure your app showcases why users should stay.
So, I mean, whether that be like your value prop is hidden within your onboarding or just teaching
users how easy your app is to use in relation to competition, just make sure that it is a way to kind
of showcase why your app is so important.
These usually are screens that users see when they first come to your product or they can be kind of
contextually based.
If there's like an empty state in your product, there could be a chance to On-Board users to a feature
that they have never used before.
So, I mean, like, whether that be like a drag and drop that's been introduced for the first time,
we can have something that is based just within the app when the users first interact with it.
Also, I think it's really important to kind of create that illusion that your product is really fast.
I mean, loading time is extremely important for mobile users.
If pages take too long to load, users may become really frustrated and maybe decide to leave.
That's a big possibility.
So we want to make it clear that something is loading and the product is loading data.
It's not just a blank or static screen that, you know, runs the risk that users think that something
is frozen.
So many people have animations than you saw when in the beginning with like pulling down and something
was happening on top.
And that's really pleasant.
And it gives the user something interesting to look at in the meantime.
But then we have something like this where they're like kind of like skeleton screens.
And I like using these because they kind of display a blank slate of the screen that is gradually loading
content.
So unlike a loading spinner, the skeleton screen shows progress that the content on their screen is
actually loading.
So this is a really good pattern to use when you're kind of loading results or something like that and
they don't load right away.
And the last best practice would be that this is mobile, not desktop.
Please remember that and we need to optimize for that.
So we need to make sure our content is readable and legible.
You know, we need to optimize for that smaller screen that could be like font sizes.
Generally, anything below 14 pixels is going to be a little hard to read on mobile.
It could even be like font family.
You may need a clear and easy font to read.
So that's just something that we need to think about as well if you need to switch it up.
There's also contrast.
So make sure there is plenty of contrast between foreground and background colors when it comes to typography.
Even a light gray may look OK.
We need to make sure that it's actually accessible.
And we also need to limit the amount of characters on one line because it could be hard to read too
many characters, especially if it's a size 12 pixel font.
Having run right across could be a little harder to read or even smaller than that.
And remember, we're designing for fingers and not cursors.
Like the what?
I'm using a point right now.
It's easy to hit a small button with a cursor, but can you imagine trying to top that with your thumb
over here?
They've done a great job of making things really accessible with larger buttons, larger cards, just
making touch areas easily accessible and more spaced out, like over here on this map, when designing
for those actionable elements on a mobile product, your targets need to be larger so they're just easier
to hit.
You know, mistakes do happen and often because of small UI elements have definitely made that mistake
in the past.
You know, having the right amount of space between elements like this may be a little tight, but having
the right amount of space can really make a big difference if there are too close.
I mean, you kind of run the risk of somebody topping things like think about if you have like a cancel
and a save right beside each other.
I mean, that could be very problematic.
And sure, a lot of people have already seen these screens before.
I mean, there are a bunch of different variations of them.
And this is just essentially reminding us that, you know, there are thum zones and we should do our
best to keep our primary actions in the green.
We don't want to have them up here.
If this is your left hand, is what it would look like if this is combined, you have much more reach.
In terms of if you're using two hands and usually a lot of users with larger phones, you figure out
a way to reach that top area and whether that be with two hands or kind of like maneuvering around with
their hand, they could find a way to do it by means keeping your primary actions within the green.
Just much more success you'll have.
We need to consider like how we hold our devices.
So be very understanding how users will hold them.
But when we do hold them in one hand, like I mentioned before, we don't have much reach.
So these green zones are essentially kind of like your safe zones and you can strategically make sure
that all the elements you want users to actually use, more like your primary actions are within that
thumb reach.
Now, the red zone or yellow zones, those are kind of like your red zones or whatever you want to call
them.
But those are the zones to reach.
And this is probably best suited for keeping like options that you want users to trigger less frequently,
like a delete or cancel.
So maybe think about that.
I know a lot of like iOS devices, especially in the design system, they kind of keep like their cancel
or delete up there and their primary actions may be closer to the bottom as well.
So just think about that when you're designing.
That's why sometimes I like to use as a bottom Tabbaa for navigation if users are going to be navigating
between screens a lot.
That's also why I was thinking about the using like a search at the bottom instead of keeping at the
top.
So remember to stay in the green and that is the last thing I have for everyone.
Those are the practices that I follow in terms of the best practices for mobile design.
And if you follow those as well, I'm sure you're going to be able to design great mobile experiences.