7 Easy Usability Guidelines For Websites On Mobile Devices
Mobile internet is continuously growing. These important guidelines will compliment your effort of creating and improving your mobile experience.
Here we go…
▁ ▂ ▄ ▅ ▆ ▇ █ Cut Down On Content █ ▇ ▆ ▅ ▄ ▂ ▁
Not everything on a PC website would fit on a mobile website page where the space pixel matters. It’s important to cut down on the amount of content that’s displayed on the mobile optimized version of your website. Only incorporate the most crucial content and features. You can skip the low priority content and links.
Mobile websites should be focused on the subject. As a result of this, they become more readable and user-friendly. Also, they become quick in terms of loading and this really works well for the people who have slow internet speed.
▁ ▂ ▄ ▅ ▆ ▇ █ Single Column Layout Is A Smart Choice! █ ▇ ▆ ▅ ▄ ▂ ▁
It’s hard to view the wide web pages on the small mobile phone screens. Even in the case of smart phones like iPhone, even with their relatively big screens, the standard web pages are zoomed out so that they are visible on the screen. Most of the text is not readable until the users zoom in to the specific part of the screen that they want to see. This is not an ideal option because it adds an extra action – zooming in and out; and performing this task is not easy for all the phones.
Ideally you can create single column pages that occupy the complete width of the screen. In order to add additional information, the page must extend downwards instead of spreading across the screen. In this way, scrolling down will become easier and there will be no need of scrolling across; this is a practice that is generally preferred by most of the mobile users.
▁ ▂ ▄ ▅ ▆ ▇ █ Present The Navigation In A Unique Way █ ▇ ▆ ▅ ▄ ▂ ▁
It’s a hard task to fir the navigation across the top portion of the screen in terms of a mobile web page. A single column layout on a mobile phone screen with placing the navigation on the topmost area will result in pushing the content too far down.
Have a look at these important tips for adding a navigation system to a mobile website:
- Place the navigation bar and the site search in the home page at the top most area and keep the rest of the content for the other pages. This is ideal for websites on which the users wish to navigate or search some specific information rather than reading the whole content. For instance, when a user visits an eCommerce website, he / she usually has a specific product category in mind and would like to go straight away to it or search the website for that category.
- Place the navigation bar at the bottom of the page. Users will be able to access the navigation bar whenever required and it will also not come in the way of reading the page. An anchor link that is placed at the top of the page might provide with quicker access.
- Place the navigation in the dropdown link present at the top of the page and you can also place it at the bottom.
- You can also opt for providing with a ‘back’ button on all the pages apart from the home page. This helps in simplifying the page design and navigating to any other section of the mobile website also becomes easy.
▁ ▂ ▄ ▅ ▆ ▇ █ Reduce Text Entry █ ▇ ▆ ▅ ▄ ▂ ▁
Entering text into a mobile website is much more difficult in comparison to entering text in a usual desktop website with a keyboard. The ‘QWERT’ is one of the easiest mobile keyboards to use along with the latest touch screen ‘QWERT’ keyboards and then there are the traditional 12 button and 12 alphanumeric keypads keyboards.
It is a fact that users tend to make more errors and are comparatively slower while typing even with the best mobile keyboards. Therefore, it is important to reduce the text entry options for a mobile website.
Here are some tried and tested ways or reducing the amount of text entry required:
- Enable the users to use the already stored details in their account section for mobile checkout.
- Ask the users to enter a PIN instead of a password as only numbers will be utilized.
- Take complete advantage of the inbuilt functionalities (explained below)
▁ ▂ ▄ ▅ ▆ ▇ █ Decide If You Need More Than 1 Mobile Websites █ ▇ ▆ ▅ ▄ ▂ ▁
There are tremendous variations in the screen and processing powers of the mobile phones. Although many smart phones have the ability of loading the complete web pages, the less advance phones cannot cope up with this and this results in mobile crash.
If you are sure that your mobile website is only going to be viewed by the smart phone users with fast downloading speeds than having one mobile version will be sufficient. However, if you are looking at a broader reach, then it is advisable to create a paired down version. For instance, Facebook has 3 mobile versions – m.facebook.com is the main mobile website, touch.facebook.com is optimized for the touch screen mobile phones and 0.facebook.com is created for users present in countries having very slow download speeds.
▁ ▂ ▄ ▅ ▆ ▇ █ Touch Screen And Non-Touch Screen Users █ ▇ ▆ ▅ ▄ ▂ ▁
Smart phones majorly make the use of mobile internet in various countries, majorly in the UK and USA. Therefore, it is important that your mobile website should be optimized for the smart phones. These phones typically have large touch screens; however, they may have a traditional trackball, direction keys or joystick. As a result of this it is crucial that your mobile website design is easy to use for both the touch screen users and the non-touch screen users.
The most common obstacle with viewing the standard web pages on a smart phone device lies in selection (to be precise, tapping the right option with the fingers). In case there are two or more links placed together, then the users might end up accidently tapping the wrong one.
Generally, links should be avoided in case of any important call to action. Instead, focus on designing call to action buttons that are prominent and can be selected / tapped easily. Make the use of thick rows instead of spanning the width of the screen or you can also utilize the square boxes; both these options can be tapped easily.
▁ ▂ ▄ ▅ ▆ ▇ █ Take Advantage Of Inbuilt Functionality █ ▇ ▆ ▅ ▄ ▂ ▁
Many mobile phone handsets have an advantage over the PCs. They comprise of many inbuilt functionalities that most of the PCs don’t have. You can simplify the process by the users in terms of performing certain tasks by utilizing the mobile’s inbuilt processes in order to get rid of the manual steps.
All phones can definitely make calls by default while the PCs require additional software and most of the users don’t have it. The mobile options enable the users to automatically ring a number by tapping on a number. This is a useful attribute for ‘contact us’ or ‘store finder’ pages.
See An Address On The Map
In case of a mobile phone, you can give an option to the user to select an address and this will automatically open the mobile phone’s map application.
Locate The Nearest
Since many mobile phones have the functionality of inbuilt location detector (GPS), you can ask the user to get the current location. For example the high street retailers can make it easy for the customers to locate their nearest stores on a map. The social networking mobile websites can also simplify the task of locating people, places or events near to them.
▁ ▂ ▄ ▅ ▆ ▇ █ Enable Information Input In Creative Ways █ ▇ ▆ ▅ ▄ ▂ ▁
There are many creative ways to enable the users to enter the information that can be fun for the users. The QR codes is an example of this. The code can be scanned and the users can directly go the the app for downloading it.
▁ ▂ ▄ ▅ ▆ ▇ █ Conclusion █ ▇ ▆ ▅ ▄ ▂ ▁
The number of people accessing the websites on their mobile phone devices is increasing on a rapid pace. They can be provided with an improvised and simplified experience with the following guidelines:
- Reduce the amount of content
- Incorporate a single column layout
- Present the navigation in a different way
- Reduce the text entry
- Decide if more than 1 mobile website is required
- Design the website taking the touch screen and non-touch screen users into consideration
- Take complete advantage of the mobile inbuilt functionalities
After ensuring all this, you are good to go!