4 Powerful Ways to Improve Customer Experiences on Mobile

As the popularity of smartphone use increases, mobile traffic has risen significantly. In fact, according to search engine watch, mobile traffic has surpassed desktop traffic as of 2014. What is stopping small businesses from developing a mobile site? What does an eCommerce company have to keep in mind when creating a mobile site? Let’s see what must be considered when creating a mobile site and how it will benefit your business.

Designing for mobile allows businesses to reach more people at a faster rate than businesses that only have desktop websites. Mobile ecommerce growth is growing at a fast pace, therefore optimizing for mobile devices is crucial. Though it may initially seem daunting, designing for mobile is feasible once you understand key elements such as layout, typography, navigation, as well as mobile features. Understanding the difference is important because desktop websites do not automatically operate well on smartphones.

Smaller Screens

For one thing, most mobile screens are about 3-4” wide, which drastically limits how much content you can fit on the screen. Since mobile screens are significantly smaller than desktops, both the use of whitespace and levels of hierarchy on the page must be reconsidered. It’s been proven that the fewer elements are on a page, the easier it is for the user to process what they are seeing. This is twice as true on mobile. There should be a considerable amount of whitespace on a mobile page so that each visible element has room to breath and can easily be separated from one another. If you have too much on the page, the user will have too much to look at and might end up missing the most important thing on the page. Similarly, having too many levels of hierarchy will also make it challenging for the user to find what they’re looking for, mobile designs should typically stick to 2 levels of hierarchy per page.

With users often on the go, the end goal you’ve established for your user needs to be a lot more apparent on mobile. This can be achieved through a minimal approach that does not include a plethora of redirecting links or large image files. Studies show that many mobile users leave pages that take more than 6-10 seconds to load. It is important to realize that at any moment during the user’s experience the user could receive a notification from a different app and abandon your site before reaching the goal, so make your site as clear as possible.

Typography

Moving forward, a key element often overlooked is a website’s typography. Typography includes font choice, font size, line spacing, and characters per line. This must be carefully considered in mobile designs. Unlike desktops designs, which can contain between 60-75 characters per line, the ideal count of characters per line for mobile devices falls somewhere between 35-50. Mobile screens are much more narrow than any desktop, so fewer characters are needed per line to helps the reader establish a good rhythm while reading. If there are too many characters per line, the reader’s eye would grow weary before getting to the next line, or the font size would be so small that it would be illegible.

One might think that, since mobile screens are so much smaller than computer screens, you would have to make the font size smaller to compensate. That is not the case. To emphasize, text that is too small is not readable. At the same time, text that is too large will cause many unnecessary paragraph breaks. Readability is essential for holding the user’s attention. If the user cannot read what’s on the page, the design isn’t successful. In this case, the user will very likely exit the page because the information is not readily accessible to them.

It is also important to remember that the selecting tool on a mobile device is no longer a mouse, but a finger. When selecting with a cursor, you have the accuracy of a single pixel, as opposed to tapping on a mobile device, where the surface area of your fingertip covers a greater area of pixels. Mobile sites that have hard-to-select elements will cause frustration for the user, resulting in a poor user experience.

Navigation

Navigation options need to have more space between them than any other text on the page, in order to help the viewer differentiate and understand the options the site has to offer. This is why on mobile sites, a slide-out menu, often stylized as a “hamburger”, is used to save space on the screen. The options are also typically listed vertically on mobile, to better fit the list of options of the screen.

When browsing on mobile, it makes it easier for the user if the navigation links are on the same side as the “hamburger” icon. This way, their thumb is already by the links by the time the menu slides out. If the hamburger is on the top right of the page, and the nav links are on the left, the user will have to readjust how they are holding their phone just to choose a menu link.

User Feedback

Feedback features give the user an idea of what they are actually doing on the site. For example, hovering your cursor over a button will cause the button to change color or change from an outline to a solid color. The issue with integrating hover features into mobile designs is that hover simply does not exist on mobile. Mobile users can tap to select, swipe to see additional content, or press and hold for more options, but there is no way to hover on mobile. With this in mind, features such as hovering have to be reworked entirely. The result is that any element that you would want immediately accessible to the user has to be already visible.

Creating a quality mobile site is no longer optional for businesses, for mobile-friendly sites are ranked higher in searches (Search Engine Optimization) drawing more attention to your site. Strong mobile designs not only increase average time spent on your eCommerce store, but also improves user experiences, giving you an advantage over competitors which can lead to an increase in sales.