Touchscreen Takeover

Look around you, no matter where you are or where you look you will always see heads down looking at their mobile device. While browsing on your phone, tablet, hybrid (touchscreen laptop), or “phablet” (picture an iPhone 6 Plus- bigger than a typical phone but smaller than a tablet), many mobile users don’t think about the design process that goes behind responsive websites or web applications which allow content and functionality to display properly across all mobile devices.  AVIBE always acknowledges best practices with every responsive interface we design to ensure a great user experience.

Hand Grips and Touch Target Placement

I bet you never thought about the way you grip your phone while browsing the web or playing a game is important – well it is! User grips can vary by what type of application you are using, and can differ based on what you are doing in the “real world” - walking versus sitting. You may be right handed by nature but when the busy world around you intervenes you may notice ambidextrous tendencies with the grip you have on your phone. 

A study by Steven Hooper shows that, “the thumb drives 75% of all phone interactions”. Our designers and developers already have to take into account that the website or web application they are creating has to look and function properly on all mobile devices; they also need to create a design or layout that works well with the different hand grips commonly used for each mobile device. 

Three Basic Phone Grips

1. One handed grip – Accounting for 49% of all users and the most popular grip
2. Cradled phone in one hand and use the opposite hand’s finger or thumb to navigate – In a close second, this grip accounts for 36% of all users
3. Two handing typing using both thumbs – Last but not least, this grip comes in third place with 15% of users

Image Source: Clark, Josh., 2015. http://alistapart.com/article/how-we-hold-our-gadgets

Fingers Are Not a Stylus

Styluses are sleek and slim, unlike any human’s finger. Styluses are able to click on the smallest touch targets that our fingers cannot possibly click with ease. Although styluses have been helpful in the past when navigating mobile friendly sites, they are not helpful in the fact that they are easy to misplace. 

The layout and navigation of AVIBE’s designs are intuitive for all mobile users, this ensures a pleasant experience while navigating the websites and applications that we develop. Now that many websites are becoming responsive, standards have been established that cater to “the human stylus” – fingers!

The way different users hold their mobile devices is so important when we are designing for touchscreen devices. If our designers didn’t acknowledge the most common grips, each web experience would become a user’s nightmare; your hands would be blocking important content which leads to user frustration and possible hand strain. The image below emphasizes the importance of touch target placement; it is pertinent that there are no touch targets in the upper left portion of the screen seeing that can take up to 1,527 milliseconds to reach and tap that area of the screen.

This image displays the number of milliseconds it takes from tile highlight to user tap event.

Image Source: Schmidt, Mikkel Bo., 2014. https://medium.com/@mibosc/mobile-ui-ergonomics-how-hard-is-it-really-to-tap-different-areas-of-your-phone-interface-bb043d409af8#.4e19cslrf

Typing On Mobile Devices

Typing takes time, especially when typing on mobile devices and user error is very common and frustrating. How many times have you opted to sign in into a website or application using your social media account because it was easier than typing in your username and password? When designing and developing responsive applications, for usability purposes, it is best to make the user type as little as possible on mobile devices.

Utilizing shortcuts, and prefilling fields where applicable is the best option when designing for mobile devices. Large, detailed online forms are fine to fill out on a desktop but a longer form displayed on a mobile phone is daunting for any user. 

There are many other shortcuts available to help input data without the user having to type it in. Phones are “smart” these days, they are capturing data without us even knowing. Geolocation data can be utilized to pin point the closest grocery store chain to a user based on their GPS coordinates. Cameras are used to scan QR codes or barcodes to eliminate the need to type the specifics of an item that users want to search for; more recently cameras are being used to enter credit card information.  Using Voice Activation features, like Siri are often used to get information quickly without having to go through the trouble of opening up Google and manually searching for answers. AVIBE caters all projects to the user’s experience and performs extensive usability testing to ensure that every web experience is enjoyable for all users and that experience translates across all screen sizes.

Tip: Enhance mobile experiences by utilizing familiar mobile patterns like rotate, flick, pinch, and spread.

Design Standards for Touchscreen Devices

AVIBE adheres to the recommendations listed below for designing for mobile devices:

• To avoid touch errors, make clickable items bigger with lots of padding.  The minimum touch target size should be 7mm.  For designers and developers, pick your poison: 7mm=44px=75em, although it is recommended that you use EM’s or REM’s when coding responsive websites or applications.
• The standard font size should be 16px with the default line height of 1.2em.  Seeing that mobile devices are held closer to the user’s eyes, the font can be a bit smaller than 1em.
• When applicable, it is best practice to prefill forms whenever possible to improve usability.
• There is no need for a full menu on mobile websites, a simple dropdown icon for navigation is all the user needs.
• Conduct proper usability testing prior to launching a website or web application to ensure that the chosen layout responds properly and is easy for users to navigate.

To optimize performance, it is necessary to develop for spotty networks to ensure a quick loading time to not waste user’s data.  For other tips on optimizing performance, check out “Designing for Performance”.