In order to understand how important the mobile life-style is for online marketing, let’s look at some data.
According to broadband în 2018 about 52.2% of the world’s internet traffic came from mobile. In 2019 around 63% of the traffic came from mobile so having a responsive website is CRUCIAL.
Let’s look at other data, this time from Google itself. In May 2019 the biggest search engine announced that starting with July 2019, it will use predominantly the mobile version for indexing (https://developers.google.com/search/mobile-sites/mobile-first-indexing). What does that mean? That your main site is no longer the desktop version, but the mobile one.
If you own a website and it is not yet optimized for mobile, you should start as soon as today to make it fast, easy to read and responsive. This is crucial, especially because mobile phones don’t have the same speed as computers do with cable connection (even though with the help of 5G, things will change). Having a fast and well-optimized site for mobile is mandatory!
Mobile is not important only because it is the most used medium for searching the internet, it is also different from how we are used to interact with desktop devices. The screens are different, the interaction is completely different (click vs touch) which means that you need to understand how to develop a proper UX and UI structure that is very different from the desktop one.
Before getting into the differences between the desktop and mobile interface (so you can understand how to properly optimize your website) you need to know about a tool that is a lot of times overlooked by a lot of people. That is Google Market Finder! Create an account there, enter your website, choose the categories from your industry and check the behaviour of people online for your whole country.
Based on that you can make an educated decision about what you should do when it comes to mobile optimization. If people watch more videos on their phones, it might be good to create video ads targeted for mobile (which might be cheaper), or you can implement videos on your site. If people use credit cards for online purchases, make the buyer’s experience very easy on mobile etc. It is a process that you have to go through, to adjust what we are recommending to do with mobile UX and UI.
How is the mobile UX/UI different from the desktop UI/UX?
In order to understand the differences, we need to understand how desktop UI and UX work. When it comes to the User Experience of a desktop owner, the interaction with the computer is with a mouse (or touchpad) most of the time. This gives people more agility but it also changes the way people use websites (right or left click, single or double click, scrolling etc.).
The size of the screen also influences the UX. Because screens are bigger you have more room to see and interact with. Usually, desktops are used to watch more video content in platforms like youtube, and less for social media (Facebook, Instagram, LinkedIn or Tweeter).
The way computers are made, they offer users the possibility to interact with the search bar at the top of the page first (this is due to visual hierarchy and the way we learnt to read in school). A header underneath the search bar of the browser it is importat because it is one of the first things people see. There you should put your logo or something very important.
After the reader sees the logo, it goes directly to your headline and depending on the quality of the headline he either scrolls down or looks at the menu bar (If they look at the menu bar and they don’t scroll, your headline is probably not good enough).
User Experience (UX) influences user interface (UI) in many ways because it is a structural base for UI. Without a solid UX architecture, the UI won’t work well (even though it might look awesome).
Here is a screenshot of a basic website, in which you can see the basic UI elements that were influenced by UX.
So we start with the search bar of the browser that you are using (in this case Google Chrome). Almost all the browsers out there have the go back or forward buttons in the top left of its UI. Why? Because it is where people from western countries see first. Then you have the search bar, where you write the web address or a query.
Websites followed the same principle. People from western countries, because they read from left to right, top to bottom, have a pattern similar to the one shown below when it comes to the visual interaction with a website:
The mobile UX and UI are a lot different because the mouse is ruled out and you interact by touching a screen. This has changed a lot the way websites should look. The touch interaction means tapping, swiping, using gestures and lately skipping all that and using voice commands. In the same time people got so used to phones, that they don’t interact with their phones with both of their hands (like they used to do in the early days of smartphones).
Most people navigate their phones using only one hand, which means that the UI has to adapt to the UX. Most people are right-handed, which means that the average reach of a person who holds his/her phone in on hand is like in the picture below:
This has a lot of implications when it comes to UI. Knowing this, the header of your website shouldn’t stay at the top of the page in the mobile version. Even though you can still have a header (for visual consistency), you should not place the dropdown menu or the search bar on the top of the page. A better alternative is to place the header at the bottom of the page like in the image below.
Even though this a very accessible option for users a UX problem appears. If the header is fixed (Sticky) a few mishaps might appear when the user scrolls down or up and this can be really annoying. In order to solve this issue, you need to create a CSS animation to your header that will slide the header down when you scroll down, and that will bring it up when you scroll up. You can see an example in the animation below or on the website www.obtineclienti.ro
Mobile is also different because you have gestures nowadays. We will not talk about all the gestures possible out there, we will only talk about two types of gestures: that is swiping left or right. These two gestures are not common in desktop but very used on mobile. Ideally, if you swipe left you should go back one page and if you swipe right you should go forward. This last feature won’t be used as much as the first one, but it will be extremely handy to have.
When it comes to UX you also need to know that in order to give your users a good experience they should find what they want in maximum three taps. This might include a better site architecture, introducing a search bar or using a tool like Hotjar to see what are the most common features people look for and bring them at the top of the page.
The mobile lifestyle means also that you need to split columns properly; that you have to make sure your content is visible (and your text big enough – but not too big) or that your buttons are big enough so they can be tapped without a struggle. Usually the minimum recommended size for buttons is 48 pixels in height.
Install AMP (Accelerated Mobile Pages)
Accelerated Mobile Pages is an online publishing format that uses special HTML code to make websites load extremely fast. It was developed by Google as a response to Facebook’s Instant Article feature, which allows Facebook users to access articles from websites almost instantaneously.
If you want to increase Search Results and get a better experience to your users, use AMP. From our experience, it not only increased the average loading speed of the website but it increased our search rankings significantly when we installed AMP. If you have a website, you should have an AMP version of it for mobile.
You can find more about AMP here.
Conclusions
Optimizing websites for mobile is mandatory in 2020. Not doing it, is not only costing you a lot of visitors but also more sales!
PS. Don’t forget about the speed of your website on mobile! It is more important than in the desktop sites!
If you find this article helpful consider appreciating us! Wish you our best!
In case you need an agency to handle SEO, Mobile Architecture and optimization, consider messaging us on Facebook for fast reply!
