Guidelines for Mobile - Planning
Pre-Planning – Mobile & Mobile User Statistics & Research
- Mobile offers three benefits over other channels
- Simplicity. The mobile channel is particularly suited for tasks that people do frequently that require few steps to achieve goals.
- Immediacy. Since most people have their mobile phones with them all the time and leave them on 24x7, they are well suited for delivering content that matters to people instantly. For example, checking class schedules and grades.
- Context. Most people carry their mobile phones with them wherever they go, and technologies like built-in GPS chips can locate a person’s current location.
- Users in a mobile context are often looking for specific pieces of information or are trying to complete a specific task, rather than browsing. Consider the likely context of use of information and, while providing the option to access all information, offer appropriate information first. (w3.org)
- Comprehension suffers on small screens.
- People read about 25% slower on “regular” screens, so mobile is even slower.
- More reliance on memory, because can’t see entire screen.
- iPad vs. Paper
- 90% recall article details on paper; 70% on iPad
- More articles are read on iPad vs. paper, but less time is spent per article
- Mobile users are distracted. View things people do while using mobile devices.
Many of the guidelines in UC's Mobile Style Guide are referenced from the W3C website and the Neilsen-Norman Group's report (download link below).
- Build mobile sites and apps according to business goals/tasks. Ask yourself, “What am I trying to achieve through this mobile website or app?”
- Who is my mobile audience?
- Casual Visitors - Have time to kill; may not need anything specific
- Repeat Visitors - Come back for regularly updated info
- Urgent Visitors - Need information now. Spontaneous, may be in transit, in a hurry
- What type of devices are my visitors using?
- What type of tasks are they doing on my site?
- Provide valuable, timely and relevant content. Eliminate everything else.
- Six ways to provide value:
- Location-Specific Information. (shuttle service, eateries, maps, directions, buildings, hours, weather)
- Timely Knowledge. (people, events, news, sports scores)
- Make Life Easier. (schedules, grades, fees, majors)
- Financial Incentive. (coupons, special offers, discounts)
- Entertainment. (Media and entertainment experiences—including social media platforms like Facebook, Twitter, and others—are the clear leaders in mobile user activities across age, gender, and device type.)
- Connection. (social media, ringtones, wallpapers, photos, video, audio)
Layout & Organization
- Show when content was last updated (esp. with news articles or anything time-sensitive).
- Large images at the top of the page displace content. Be sure image is critical to the content and sized appropriately.
- Keep related information on same page (unless nonessential).
- Don’t break up articles across multiple pages. Give short synopsis, then entire article. Easier/better to scroll than click to continue (again and again).
- Hide extra details by default (click to open) (e.g. Bestbuy.com)
- Be cognizant of font size – not TOO BIG and not too small.
- Be clear with pagination (e.g., “1 of 4” not “Next Page”)
- an article spans several pages, use pagination at the bottom. Have a link to each individual page, rather than just to the previous and the next ones. (NN#78)
- Use “responsive design” – content adapts to size of screen.
- Don’t use multiple columns – too hard to keep your place in mobile format.
- Tables do not work well on limited size screens and generally result in the user having to scroll horizontally to read them. Avoid.
- The page should lay out so that simple repeated scrolling in the same direction (axis) allows the user to experience all its content. However some content (such as maps and other images) cannot be displayed without secondary scrolling.
- If some element on the page requires secondary scrolling it must not cause the remainder of the page to require this. For example, if an object causes subsequent text to lay out with a significant margin to its left or right, then this text may not be visible once a user has scrolled past the object.
- it is not possible to avoid presenting images that are larger than the screen size, then consider providing these images on a separate page with a link back to the main content.