There are rapid changes in mobile design industry and professionals continue to adapt to the changing requirements. In order to fulfill unique demands of mobile users, designers often face various constraints and they should continue to ask what do consumers expect and want. They are also asked to create rich and meaningful mobile experience, despite the use of smaller displays on mobile devices. Creating effective mobile experience and understanding users require careful planning and thought. It is not enough just by expecting a mobile websites to work by applying principles typically used on desktop versions.
Mobile websites have many things to do with interactive experience and visual presentation, including layout, branding and graphic design.
• Mobile designs should rehash those used by desktops. Designers should aim to mobilize desktop websites instead of miniaturizing them. They need to rethink the design, instead of shrinking it.
• Mobile website design should support quick scanning. This influences how easily and quickly a mobile website conveys core information.
• The design should guide users from a visually prominent element to help them accomplish a task. A good visual flow involves elements that bring together functionality to convey core messages.
• Establish visual consistency through the use of predictable typography and color.
• Mobile design should support both landscape and portrait orientations. Typical smart devices support multiple orientations and mobile websites should match them. Users’ activity on the page must be maintained when orientation changes.
Mobile websites should include features and tools that allows users to achieve their goals and complete tasks
• Add key capabilities across all webpages. Visiting users should be aware of their personalized settings, regardless of what mobile devices they use. If certain features are not applicable for mobile environment, users should be directed to webpages for desktop.
• Make sure content and fundamental features are fully optimized for mobile users. As an example, it is possible to use the built-in GPS capability of smartphones to enable the locator algorithm displays a list of stores sorted by distance.
• Make sure to offer only relevant mobile functionality such as image recognition, QR code scanning and barcode scanning. A good way to delight and engage users is by enhancing website functionality with available capabilities on mobile platforms. Some stores offer downloads of games and freebies filled with marketing messages when users scan QR codes on brochures.
Like on desktop, content on mobile devices also include text, images and videos.
• Deliver balanced and appropriate mix of content to all users.
• Offer total control over multimedia content, for example by not allowing the audio or video to start automatically when loaded. Users should be able to stop or skip multimedia content and designers must be mindful of bandwidth consumed.
• Multimedia content should support main website goals, add values to other content and enhance user experience. Often, multimedia content is offered when users are looking for instructions or distractions.
• Modify content to better adapt mobile environment. Copy may need to be written to accommodate mobile users that have short attention spans. Images must be modified for HD displays, especially those with 1080p resolution.
Mobile websites should be arranged into a fully comprehensible structure that helps users complete tasks and find information.
• Ensure the availability of links to main content on available landing pages. Many mobile websites have primary and secondary navigation structures.
• Allow users to navigate to primary functionality and content that are accessible with the least amount of key presses and taps. Navigation structure optimized for small display should be shallow and broad, instead of deep. There should be fewer than four taps needed to reach specific content and users should be aware that each taps brings them closer to the completion of the task. More taps mean more webpages to load and more data processed.
• Add navigational cues to allow people know their current location and how to get back to specific pages. Designers can apply mobile breadcrumbs by using label or graphics showing users the category or section that they came from. Home icon is the standard convention used by many mobile websites to link back to the main webpage.
• Navigational objects should be optimized for touch operations. The tap size for a navigation item must be no smaller than 30px tall or wide. Users of non-touch feature phones should be able to select navigation items quickly with D-pad or number pad.
Users typically input plenty of data using desktops, but this must be reduced during mobile use and it shouldn’t require two-hand operations.
• Use only minimum number of fields and use short alternatives whenever possible. For example, ask only ZIP code, instead of complete address.
• Support alternate input methods whenever possible. Microphone, GPS, accelerator, camera and gyroscope are alternative input technologies available on mobile devices. Many mobile websites automatically gather geolocation data to provide relevant information.
• Automatically enter default values on fields whenever appropriate. They are typically the most frequently selected items, such as the date.
• Use prediction, spell-check suggestion and auto-complete technology to reduce errors and simplify user experience. CAPTCHA can be disabled whenever appropriate.
• Consider users with less sophisticated devices. Remember that it is longer and more tedious to input data on features phones that have numeric keypad.
• Keep users logged in for non-sensitive tasks.
Mobile websites should measure well in terms of interface design to help visitors accomplish their intended aims much more easily
• Make it very clear to users of touchscreen devices, what they can swipe, tap and choose. Usability studies on various mobile websites showed that users often don’t know things that can be manipulated. There’s also possible issue of ambiguity, for example, a swipe gesture may have different effects on different part of the webpage. Use consistent typography and color to indicate buttons, icons and links that can be tapped.
• Website interface should follow patterns and conventions to make learning curve less steeper for users. There are comprehensive UI and UX guidelines that web designers should consult.
• Touch target should be well spaced and appropriately sized to reduce selection mistakes.
• Avoid relying too much on interface-related technology that is not universally supported by mobile devices. These include Flash, frames, cookies and pop ups.
• Ensure interface usability in different conditions such as extreme viewing angles or outdoor uses with daylight glares.
Security and Privacy
Guaranteed security level ensures comfort and trust felt by users. On various studies, security and privacy are often considered as top concerns among mobile users.
• Avoid collecting and using personal data, including contact list and location, without explicit user permission. In recent years, we have seen numerous cases of mobile websites gathering personal data through various means, including free apps and registration information.
• Offer users better control on how to manage their personal data. Make a list of data being shared to others and allow users to decide which one shouldn’t be shared.
• Avoid breaking workflow when showing legalese. Users should be taken back to their original location before the interruption began and don’t make them start all over.
• Notifications must be informative and brief. It’s a good thing if they can be acted on or dismissed easily.
• Keep alerts clear and brief. Explain the reason behind the alert and tell users what they should do.
• Avoid using too many alerts and use them only to offer very important information.
• Provide confirmation and feedback without causing disruption on workflow.
Visitors should get assistance when using the website
• Offer easy access to support options and help section. They typically look for the link to help section in the footer area or in the toolbar.
• Provide multiple paths to the support areas, such as FAQ and real-time chats.
• Use contextual tips and helps when a new functionality is added
Effective marketing efforts can help users find relevant mobile websites and encourage repeated visits.
• Keep URL short to optimize online marketing effort and use “m.yourwebsite.com” naming convention for mobile websites.
• Use QR (quick response) codes that are directed to the mobile website, instead of the standard desktop-focused website. QR codes can be printed on flyers, brochures, catalogs, business cards, newspaper ads, price tags and others.
• Start email campaigns that include links to the mobile websites.
• Prompt customers to review and rate your products. This should help to generate word of mouth and provide insight to potential users.
Mobile websites should be able to establish a strong sense of social participation among users. Users typically want to interact with each others through solid and established social network.
• Maintain steady presence on popular search networks, such as Twitter and Facebook. Many websites also benefit from local online services using Yahoo Local, Bing Business Portal and Google Places. Any information within these social pages may appear on search engine result. Additionally, it is important to mention business name, website URL, phone number, hours of operation and physical address in these pages.
• Incorporate latest updates in mobile website into social network pages to offer easy way for people to like or follow them.
• Use appropriate APIs to add social tagging, sharing, liking, commenting and bookmarking capabilities.
• Invite people in social networks to generate content relevant to your product, service and brand, in exchange for some incentive, such as special discount for specific products.