All right guys in this lecture we're going to be talking about the mobile design for user experience.
Now we already know what the user experience is.
Right.
That is how people are going to be perceiving our Web site.
And this time we're going to be focusing on the mobile design.
So right now for example our Web site is looking like this on a cell phone and we can see that there
are a couple of errors even though we have gotten a lot for free from elementary right.
Because now you can access the website and it actually works and you can do all the things you want
to do in it if it wasn't for elements or you'd have to assume in and out and it would be a mess.
So we can thank elements for that and ocean WP theme.
Now there's still a couple of issues in here that we're going to want to correct.
The first thing that's pretty clear is that we can see that the menu is huge right.
It's really really big.
We have the logo on top.
We have the menu to the right and then we just have a bunch of white there doing no good at all.
And when we are on our cell phone space becomes really precious.
Like really really precious.
So what we're going to want to do here is move our menu up towards and put it next to the logo.
What that is going to do is that that is going to make a lot of extra space for people's cell phones
to be displaying more of our content that is severely going to be improving the user experience for
our visitors.
Right.
And as you can see there's quite a chunk that's going to disappear and that's going to be displaying
our website instead.
So this is really smart design for improving user experience.
Now there are more things there for us to fix.
For example looking down we can see that the text is quite crammed up and we're going to want to have
their experience as good as possible.
So we're going to go ahead and move over into our website and fix all of these little details in the
upcoming lecture.
Now in this lecture we're going to be focusing more on the user experience before we move over solely
to the user interface right.
The design itself first of all why should you be caring about the mobile user experience.
Well the reason is this over 50 percent of traffic on the web is actually from the mobile.
That is insane statistics that's been all the way back since 2015.
So since 2015 more than half of all the traffic is actually from people's cell phones.
That is insane.
And it is estimated that in the upcoming years there's going to be as much as up towards 75 and 80 percent
of all traffic will be mobile.
So guys if you don't adapt your website to be mobile friendly you are missing out.
And don't think that you can only make your web some mobile friendly too because studies show that 83
percent of everyone who prefers to use their mobile still want to be able to use their desktop to browse
Web sites.
OK.
So we're really going to need both here.
Now next up is that mobile friendliness is actually super important for a CEO.
Now if your Web site is not mobile friendly the search engines are actually going to demote you.
And as we know Google is the biggest search engine of all.
And Google sort of becomes like the parent who always want to have their approval right.
So what we can do is check if our Web site is mobile friendly approved from Google because otherwise
we're going to miss out on SEO and they're going to demote us.
So what we're going to do here is we're going to do a little test from Google to check our mobile friendliness.
So this.
So this test will be in the resources and all we're going to go ahead and do is enter a euro which is
for us ETP as for us less forest large Robin and Jasper dot com.
We know this already.
Right.
And then we're going to click on Test you Earl.
And as we can see here Page is mobile friendly.
And this is really good news not surprising because uptime gave us almost full score on mobile friendliness
but you still want to be doing this check to make sure that everything is in order.
On our Web site.
Right.
We always want the approval of Google the big parent of search engines.
Right now the next thing we're going to want to do is learn how to prioritize because when it comes
to cell phones and the user experience and user interface we have less space.
That's just the way it is.
Cell phones are smaller than a desktop so we're gonna have less space to be showing our content to be
using our call to action buttons to be using our opt in forms our menu everything.
So we need to learn to prioritize for example what is the most important that I want to be showing them
on this site.
In this section and you want to be displaying only that then remove all of the clutter.
So for example if you're having an e-mail update and you're asking for their first name last name phone
number email middle name grandparents names all of this information you want to make that shorter you
want to make that form more simple because otherwise there's going to be too much being picked up on
the display and it's not going to be looking good and you are going to be ruining your own conversions
here.
So we're gonna have to learn to prioritize.
Look what is it that's most important for me to show on the home page on the start here page in this
section in the next section et cetera et cetera.
Now the next thing we're going to talk about is the thumb design and what the thumb design is is actually
based on a lot of studies that show that 67 percent and above actually prefer to use their cell phone
with one hand and scroll and use and navigate with their thumb looking something like this.
So what this means is that there are going to be certain areas is going to be easier to navigate than
others.
Most people by the way are also right handed.
So if we look at this chart for example we can see that there are some limits to using your thumb we
can see that the space there to the lower left comes more natural to the thumb because it's easier to
be reaching that space if you have a cell phone near you which most people do.
You can actually grab your own phone and try this out.
Now this is also going to be depending on what kind of model you had the resolution on your screen et
cetera et cetera.
There are big phones or small phones so this isn't set in stone but it is a very good estimate that
this area the green area will basically always be easy to reach for everyone preferring to use one hand
and use their thumb which is the majority.
And then we also have the orange part where you're going to need to stretch your thumbs in order to
reach those areas.
And then we have the red parts where you're usually going to have to flip around your phone or use the
other hand or do some awkward movement in order to reach there.
So what this means is that we want to be putting our most important material or rather where we need
them to do an action in the Green Zone.
So with this in mind navigation is key.
We always want to keep navigation in mind when we are designing.
This is going to be a huge part of the user experience.
So if we take our own website right now as an example we can see that we have learn more bottom.
That's being put in the lower left in the Green Zone.
This is Google.
This is exactly how we want our design because we want them to be pressing that button to get them to
the starts here page or we're going to be introducing them to our concept to our products and then have
them buy something.
But in order to do that they need to click on that button to learn more button and the easier it is
for them to click on that button.
The higher are the chances that they will actually click and you will have a conversion.
So if you're not adapting your website for mobiles overall you are missing out.
And if you're not using the proper navigation you will be losing conversion guys.
But the great news is it's not that hard would just need to keep this in mind when we move over to the
next lecture and we start designing for the mobile user interface.
Right.
So we're going to move over to the next lecture do some designing and make our website even more mobile
friendly than it already is.
Make sure that it is easy to click on the buttons it is easy to see all of the content and clean some
things up.
So guys see in the next lecture.