Stats
taken from Google (Android users)
People
check their phones 100 billion times each day - the mobile web
usability growth has nearly double during the last year.
Why
a different approach for mobile web?
- Any operations done with the mobile serve a different need - one differentiating aspect is urgency.
- Any issues with the completion of task here is a loss of opportunity.
For
example booking of a movie ticket or payment of premiums or selecting
a location for a quick trip. In all these examples, if the person is
not able to do the required task for reasons of unavailability of the
needed page in mobile or having to do too much to navigate will lead
to a loss of opportunity.
Design
Principles
The
following design principles help in achieving a more effective mobile
design. These principles derived based on traditional usability
testing, can be focussed around the below areas.
- Homepage and Navigation
Homepage
and navigation is an essential aspect when it comes to
discoverability of essentials elements in the
mobile site. The following elements are essential during the design
of home page and navigation flow -
- Reduce navigation flow, keep primary areas of business as one click elements on the home page itself.
- Keep menus short and sweet.
- Home page navigation should be easy - Many users complete the task and want to switch back to home page. Home page navigation should be easy.
- Keep site responsive.
- Search
Search
has been a primary aspect of any site construction and as the site
grows the structure of search becomes the key to quickness of
required outcome from the search.
- Make search visible - this is very important as some sites place search as a small icon or under a given menu button and requires a two click navigation.
- Search should be smart - provide auto complete, suggestions, correcting misspellings, providing related matches in results.
- Search results should be relevant - this is important because it keeps the attention span of the user on the site for e.g.: a plastic container store should not bring up results which show trends for people buying clothes along with containers but should show the type of containers available.
- Search results should be populated as per mobile dimensions and should be customisable.
- Provide attributes which filters search criteria before actual search can begin.
- Commerce and conversions
- The mobile device forms a key element when doing quick commerce on the web, specifically in environments wherein user does not have access to a standard web browser based platform on a laptop or desktop. Any design principle formulated for this should be focussed on enabling the customer to complete the transactions.
- Upfront customer registrations results in decrease in business. Users prefer to explore before they commit.
- Provide options for users to check-out as guest - users might not be in a position or timeframe to provide information for registration and might want to have an option to still carry out the transaction and receive alert messages.
- Sites should be focussed on rationalising the customer behaviour towards a secure username and password based login for long term and this can be provided to the customer with added benefits for e.g.: tracking orders.
- The navigation should should not restart for every visit - Considering the limited timeframe and opportunity window available to the user on the mobile it’s beneficial to provide users with the opportunity to pick up from where they left off. This scenario might also be useful when the users want to explore an option on a bigger screen and come back to buying on mobile.
- Form entry optimisation
Form
entry optimisation is of importance from the perspective of time
frame and effort required to fill in the form.
- Form entries should be minimal per page and designed as per mobile screen requirements.
- Pre-filled in forms are always preferred.
- Link billing/shipping information with the third party checkout account to prevent re-filling.
- Any forms requiring changes to right type of contextual key board selected at time of form filling would be an added comfort factor for the user (for e.g. replacing the standard key board with a number key board for pin number entry for US).
- Provide visual calendars, provide tools which might prevent distract the user to go on to another application on the mobile to carry out the task or transaction at hand.
- Provide real time error validation for all the forms.
- Form security - Payments
Form
security is an important aspect for any commerce or payment down the
mobile stream. There are standards around card compliance and
captures for payments in web world but there are still few standards
on the card usability on the mobile web.
- Any payment engines should provide sufficient means of identifying the customer making the transaction.
- The standard should be inline with the PCI Security Standards Council Release Guidance for Merchants on Mobile Payment Acceptance Security(PCI Mobile Payment Acceptance Security Guidelines for Merchants as End-Users).
- Focus should be on minimal to no account data entering the device, residing on the device and leaving the device.
- Key information around guidelines for security of payment transaction, securing the device on which transaction is made and securing the payment acceptance solution should be available.
- Site-wide design considerations
There
are some general design principles that come into existence when
applying menu styling to mobile applications
- Don’t make users pinch & zoom - keep the right visible size of image/text available for first glance.
- Provide an option to zoom on the image - especially for commerce site selling goods.
- Demand for user location should be justified with the right purpose - if the user location serves as a distracter to effective business, it should not be inculcated.
- A clear call to action should be present and visible if the location is needed(for e.g.: find near me).
- Keep users in a single browser window.
- Promotions should not be positioned on an essential content piece or overlaid on the top of the complete site page. This decreases the customer interaction for site purpose.
- Prevent mixing of mobile optimised pages with desktop pages on the mobile device during site migration to mobile version.Some sample example sites - macy's, home depot, amazon & ftd.
References : Google I/O 2014 session by Jeeny Gove, PCI Standards Council - pcisecuritystandards.org.
