As many companies take a deeper look at their need to go beyond having a website that is simply available to one that is optimized, it becomes exceedingly important to consider how visitors are seeing and navigating content in a mobile web environment. According to StatCounter figures from November 2012, 13% of all global Internet traffic comes from mobile devices versus desktops.
That is a pretty significant amount of traffic coming to your site using non-desktop devices which could greatly affect the user experience and site appearance of your carefully designed website. We thought that it might be helpful to highlight the top 10 design challenges to tackle when designing for the mobile Web. Many of these challenges should also be taken into consideration when designing mobile apps as well.
1. Lack of a hover state. The absence of a hover state (the ability to hover your mouse over an image, icon or text to see reference information or options) poses a special challenge for sites that have large amounts of content or many custom features. The screen interface can easily become overwhelmed with links and buttons quickly that would normally only be seen when hovering over the link or navigation item.
On mobile platforms and devices, features can generally be accessed in two ways: visibly or through convention. Visible content is accessible visually from navigation elements that are built into the design or application. Convention features utilize mobile design conventions or gestures such as swiping, shaking or pull-to-refresh/reload. However, while convention can significantly help simplify the interface, it is possible for users to miss these features.
2. Slow and error-prone typing. Typing on a touch keyboard is often a slow and error-prone experience no matter what size your fingers are! Helping your users with features like auto-complete functionality, inline and address validation and allowing users to review pages before submission can help with this.
3. Reduced context. Smaller screens limit the amount of information that can help keep a user on track—especially those that must be zoomed in on in order to view content in a readable state. It can also obscure previously entered data, form fields or prevent users from spotting errors already entered. One option to consider is a fixed header on forms.
4. Decreased accuracy of clicking links and buttons (a.k.a. fat finger syndrome.) It looks like there won’t be a medical cure for this anytime soon so this means that you have to consider the size and proximity of all clickable, or touchable, elements. Control and navigation bars are especially important when you consider the lack of a hover state challenge. Two options at your disposal are to require an action confirmation or the much less intrusive option of an undo button.
5. No right-click. While custom right click menus are not often used on traditional websites, an increasing number of web apps and native software is. As the right-click menu acts as a context-based shortcut for common features, mobile doesn't have this option. Try using a 'tab-and-hold' gesture instead.
Are you interested in increasing and optimizing your digital touch points or taking your site mobile? IdentityMine can help you create only opportunities for your business through our extensive experience in user interface and experience design. View our portfolio to see what we’ve done for others and contact us to see what we can do for you!