ACM Interactions

Take away: The four best practices for designing mobile sites and applications are to make the interfaces and interactions as simple, clear, obvious, and consistent as possible.

In 2013, I was part of a number of user experience research and design projects that involved creating and user testing mobile sites and applications. A number of themes emerged from these user tests, and I will share these insights with you here .

Navigation

Users want the navigation to be simple, understandable, clear, obvious, and consistent. Simple, clear, obvious, and consistent mean:

• Simple: The navigation should do what it is meant to do. Navigations should display to users the other pages on the site or application. Then, users can select which area they want to navigate to next and go there when they want.
• Clear: The navigation labels (and icons if present) should briefly describe the page content, purpose, and function in a way that the user understands.
• Obvious: Users should know where the navigation is and how to use it on every page.
• Consistent: Users want the navigation to appear in the same place and behave the same way on every page. Also, every element within the navigation should be positioned similarly and behave in the same way.

Interestingly, most users do not know what the menu icon means (i.e., the three stacked horizontal bars.) The average user may come to accept that this icon means that, if clicked, a navigation menu will appear. As of January 2014, this is not the case. A better option is to take the three bars out of the button and add the four letters, “M-E-N-U.”

Home page

There needs to be a homepage that gives users an overview of the site or application. Users want this, expect it, and if there is not a home page, users get confused and/or leave.

Logo and site title

Users want a logo and site title at the top of every page so that they know what site or application they are using.

Page title

Users want a page title on every page that simply and clearly explains the page purpose, function, and content. Users also want the page title to match the text, label, icon, logo, button, headline, and or link that brought them to the page.

Page content

Users want to get to the point. Accordions with simple, short, clear headings, as well as clearly displayed indicators for opening and closing sections of the accordion, work nicely to progressively display and then once again hide information. Within the accordion, the content should be simple, straightforward, and to the point. Users also respond well to bulleted lists.

Screen behaviors, touchscreen interactions, and gestures

Most users understand that if they touch something on a screen, something may or may not happen. They are hesitant to interact with a touchscreen because they do not want to look or feel stupid or create some kind of negative, unintended consequence within the site or application. That pretty much sums up the knowledge, skills, attitudes, and opinions of the average user interacting with a touchscreen. Designers should make interactions as simple, clear, obvious, and consistent as possible. Be certain that the user will know how, when, where, and why to interact with a touchscreen within the first few moments they come to your site or application. 

Font size

Font sizes should be readable. A good test to see, literally, which font size is optimal for reading on mobile phones is this: 

• Upload your design to a server. 
• Bring up your design on your phone. 
• Try to read the written content on your own phone while in different locations with different types of lighting as you are walking. If you can’t read your written content, make your font size bigger. 
• Now run the same test on a different phone with someone who has never seen your design before and is less comfortable with technology than you. If they can’t read your written content, make your font size bigger.

Button sizes and other clickable elements

Make buttons and other clickable areas at least 44 pixels x 44 pixels. Give ample space between clickable elements. Make sure you remember these guidelines when you insert text links.

Maps and locators

For the most part, users use the map and locator function on mobile phones to find a location closest to where they are at the moment of use. Have maps and locators default to showing the user locations nearest them at the moment.  

Passwords

Give users the option to show their password as they are entering it into a field.

Search

Most users do not use site search functions. If they have to search for something, usually they abandon your site and use Google instead. Most people do not trust site searches because most site searches do not help them find the information they need. In addition, if a user has to spend too much time searching for something important on your site, this indicates your design has deeper issues that need to be addressed. 

Text vs. email vs. chat vs. call

Users are readily willing to text for help (i.e., customer service) while on mobile sites or applications as long as they get a quick and relevant response. Most users would rather text for relevant, useful help than call for help. They are the least likely to email for help.

Back button

Users are familiar with and use the back button often, especially if the navigation is not simple, clear, obvious, or consistent. (The back button is!)

Home button

Users are familiar with and use the mobile phone’s home button because it is simple, clear, obvious, and consistent. If your site is not, they will rely on this tried and tested technique.

Personal property

Users are very proprietary about their mobile phones. They don’t like sharing their phone with others or even having other people look at the screen on their phones. It is also important to point out that many people in this world (and many people in the United States) do not have their own personal computer, but many people world and country-wide do have their own mobile phones. As we, as a society, become more dependent upon internet-accessible services, products, and computing technologies, the mobile phone will become the lifeline and primary means of accessing and conducting personal affairs via the internet for these people. Keep this in mind as you are designing products and services: For many people, the mobile phone is the computer, and the website is the mobile site.

Closing

I would like to thank the many participants I worked with over the year. Their insights have helped me become a better researcher and designer. I understand even more the importance of empathizing with the user, and my passions for good manners, taking the time to do things right the first time, and simplicity in all things have been validated.

Ashley Karr