Creating a Better Web and Mobile Design Experience

You may realize that the level of internet browsing done via mobile phones has become increasingly high thanks to all the technological advancements and inventions which cause the internet to be accessible almost anywhere. Global mobile traffic makes up a total of more than fifteen percent of all Internet traffic all around the world. Browsing online via mobile phones has really complemented shopping processes since more than half of mobile shoppers actually still refer to their smartphones while making purchases in a physical store and another half also browse through the collections on their way to the store.

With that in mind, businesses need to really make use of a mobile website in order to increase their sales and reach out to the mobile customers. For that reason, here are some things that can be done in designing mobile websites for better user experience:

4.png

Keeping It Simple

The difference between designing a website for mobile viewing compared to designing a website for desktop websites lies in the heart of keeping everything simple but maintaining clarity in such a limited amount of space. Mobile websites should be presented in a more basic and bare bone manner with a simplified design compared to its desktop counterpart.

One way of keeping a mobile website simple would be to present its menu bar the right way. A menu bar is usually displayed at the very top of the page in a desktop website. However, this cannot be done in a mobile one due to space constraints. For that reason, one of the methods to keep a mobile web simple to ensure better user experiences would be to create a menu that is only represented by a small icon on the top right or left of the screen. Upon clicking the menu icon, visitors can only then access the complete menu in a drop-down style presentation which they can easily close whenever they want to focus on the page. Menus should also be really simple and accessible, and as a result, you should avoid creating a multi-level menu with sub-menus that will show upon clicking. Even though someone may not mind clicking three times in a desktop website to get the link to the pages they want to see, they will very likely quit at the very second they see a sub-menu system in a mobile website.

In addition to this, too many graphics and videos put into a mobile website will actually prevent it from loading at a reasonable time, and as a result, your visitors will be upset about the time it takes to access your website since it will be very slow. You should avoid incorporating images for achieving effects like creating gradients and shadows because you can do it with CSS designing instead of achieving those by using a lot of images. Putting too many graphics and videos can also cause confusion and loss of focus, so it will be much better to keep the mobile website simple and clean with fewer images and words. If possible, delete the words that take a lot of space and put them into representative symbols which can be tapped for further interactions. For example, instead of writing down the words “telephone number”, you can simply use the telephone symbol for your contact info.

Determining Content Focus

Most people who access a website through their mobile phone do not have that much spare time in their hands. Therefore, it is really important to determine the focus of your mobile website’s content and display it prominently so that visitors can easily find what they want to see in your site. There are several ways to highlight this focus. For example, you can set every page to only contain one central focus in the center of the page. If you provide access to other contents through extra gestures like a swipe or a vertical scroll, make sure that you let the visitors know by putting a small sign such as a small arrow to make it convenient for them to browse through the content in order to find what they need to find.

Grabbing people’s focus and attention also requires efficiency in summing up words. Bear in mind that your phone’s screen is significantly smaller than your desktop computer’s screen so reading a whole bunch of text may not be convenient for your site visitors. Mobile site visitors have the tendency to scroll really quickly so you need to present only the essential things to keep their attention.

5.png
Providing Easy-to-Access Contact

Providing easy to access contact info is especially important if your business requires people to come directly to your place. One of the most obvious reasons why people are checking up your mobile site would be that they want to do business with you. And for that reason, they may want to know where you can be found, including an access to your telephone number or contact person as well as office hours. If they can find this easily without having to rummage through the whole site, they will be pleased and chances are they will be more inclined to do business with you.

Another way to let people contact you more easily would be to put forms that they can fill with regards to their inquiries or concerns. However, you must make sure that the forms that you put in your mobile site are really designed for mobile usage. Mobile phones have tiny touch screen keyboards so they do not add up to a convenient typing experience. In other words, provide a brief and simple form in your mobile site and skip all the unnecessary details such as a ZIP code or a full address especially when you can obtain those at a later time. Since the primary method of interaction in a mobile phone would be through touching, it is important to make a form that is large enough and easily selectable. One way to determine this would be to take into account the size of a thumb, because at the end of the day, accessing a mobile site will primarily be a thumb’s business. The average width of an adult’s thumb is around 2.5 centimeters, and it translates to 72 pixels. As a result, it is important to create tap elements or buttons that are at least 70 pixels big to allow easy clicking and preventing accidental overlapped taps which will worsen the visitor’s experience.

In addition, you can also opt for a visual calendar rather than requiring your visitors to type in the date. Use auto-fill for fields that are commonly used, and ensure that the labels are clear and unmistakable so that your visitors will not have a hard time figuring out how to fill in your forms.

Enabling Mobile-Specific Features

One of the mobile phone capabilities that does not exist in a desktop computer would be geo-location. By being aware of this fact, you can always integrate the geo-location feature of a mobile phone to enhance your site’s experience to be better. You can always use geo-location to give directions to your business place with the help of Google Maps or Waze, or you can always give rewards for visitors who update their status by tagging your place in their image. In addition, if you have expanded your business internationally, you can always use the geo-location feature to match the visitors with their own local currency or to point them to the nearest stores located in their city.

Furthermore, you should also enable the social media sharing feature which works really well in a mobile phone rather than in a desktop computer. In a mobile phone, you will have simultaneous access to various social media platforms such as Instagram, Snapchat, Path and Facebook amongst others and by providing a sharing button in your mobile web pages, visitors will be able to share the content easily without having to copy paste it before sending it to other people.

Untitled.png

Trying It Out!

Last but not least, it is really important to try out your mobile sites using different types of gadgets with different platforms and operating systems. This usability test is very vital to improve user’s overall mobile site experience because you will actually witness how the content will be displayed in different settings. Different mobile devices have different dimensions, so it is important that you created a layout that is fluid that will work well for every pixel width. Moreover, resolutions and aspect rations in each and every one of mobile devices can be very different. Thus, ensuring that your layout is fluid would be important to confirm that your mobile site does not look weird in certain gadgets or platforms.

You can also make use of the emerging mobile testing tools which include UXRecorder and Solidifyapp amongst others. Also take into account your target market’s internet speed when designing your mobile site because loading a site using a 3G network will be much slower compared to loading it in a 4G network.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s