Every now and then, we would hear pundits declaring that it is now the “Mobile Web year”, whether 2012 will become the real “Mobile Year” remains to be seen. However, it’s an indisputable fact that more people are accessing the Internet using mobile devices. User experience of mobile users are driven by advancement in mobile technology – from improved browsers on entry-level phones and feature phones to the advanced mobile technology implementation on smartphones and tablets.
“Mobile Web” is a term often used to define Internet access using mobile devices. The definition is broadly used to cover mobile implementation from older WAP-based devices to cutting-edge tablets that support most Web technologies used in desktops. The “I can use an app to do this task” mindset has caused a rage on the use of platform-specific apps. Some companies even start by advising users to install a mobile app for popular mobile platforms such as Android and iPhone, before they explain what the app is all about, how users can benefit from the app and how users should use the app.
Current mobile websites are easier to maintain, less expensive to develop and universally accessible. “Mobile Web” as a term is often criticized as it implies that there are different Webs, such as “Desktop Web” or “TV Web”. So, it may make more sense to define it as websites optimized for access on mobile devices.
When designing and developing a mobile web, you should take into account changes in user experience due to smaller screen and generally weaker hardware specification. Fortunately, the development process between websites for desktops and mobile devices are similar.
These are five steps for creating a highly successful mobile website using user-centered development process:
Determine whether do you really need a mobile website
Silly as it may sound, you should determine whether a mobile website is necessary. True, mobile Internet users in the US will soon surpass 100 million users, however not all of them are your target audience. Commerce sales through mobile devices in the US will reach $4 billion in the near future, however, if your site is not selling anything, does this opportunity matter to you? A more relevant action is to find out how many people are accessing your site using mobile devices. A good way to start is by examining the analytics data of your website and determines the percentage of mobile users. You can do that by estimating the percentage of mobile platforms that access your website, including iOS, Android, Symbian, BlackBerry OS, Bada, webOS and others. Because, many users also access websites using low-end and feature phones, you should also consider OS-less mobile devices. Try to understand why they are using mobile device, what functionality they’re using and what they’re trying to do in your website
You should make a list of things that are relevant for your mobile users. To get a competitive insight (and perhaps an inspiration), you should visit mobile sites of your direct competitors. Your desktop website might originally be intended as a support for your business, its goal may be as simple as creating awareness or more complex such as generating sales. You should consider how mobile website can complement your desktop website. Identify functionality and content that can be useful for your mobile users. Your mobile website may have extra goals that can’t be achieved by standard, desktop website.
If you find out that you only have a handful of mobile users and they only try to get basic information such as office address and phone number, then you may be better off improving the desktop website, such as performing changes on certain design elements to allow mobile browsers display the website better. If you’re using popular CMS such as WordPress, you can try using plugins that can quickly transform your website into a mobile version.
Not all companies need mobile website, companies that need to expand and extend their core services (such as banking and travel) certainly do, on the other hand, heavy Industries, such as aircraft manufacturers and oil companies might not need mobile website now, though things may change in 3-4 years. If you have strong reasons to build mobile website, then you should focus on the most important element of your website: users.
Understand your users
An effective mobile web should rely on user involvement in the design process, which hopefully can lead to a solution that users will want to use and find useful. To achieve it, you should understand your users clearly. You may assign your users into several groups with requirements that can be thought of individually. For example, pharmaceutical companies may group their users into healthcare professionals, caregivers and patients. Healthcare professionals and patients can be considered as primary user groups and caregivers being the secondary one as their requirements have plenty of similarities with patients. Identifying main user groups and assigning unique characteristics on each of them can help you to design a mobile website better.
Some web development teams involve the participation of representative users and use their feedback throughout the development process. You can get direct input from users using common research methods, such as giving surveys, performing contextual interviews and observing users. The information gathered should allow you to understand more about users, such as:
- What features are important for users when mobile?
- Why do people use your website on mobile devices?
- What functionality are they using?
- What mobile devices do people use when accessing your website?
- Are there possible sources of frustration?
As you’re building a more detailed picture of user profile and usage pattern, you should also consider research results from popular results such as eMarketer, Forrester, Nielsen and comScore and DeviceAtlas. Apart from understanding user behavior, you can also get related information such as what mobile devices are used
Make a list of priorities
When evaluating a mobile website, you should create a list of features you want to offer. Ideally, your business requirements should align closely with user requirements and you need to identify them during user research. If they don’t align, you should find ways to modify any controllable factor, including your business requirements and ask what values you can add to your users.
Often, website owners and Web developers end up with more features than they can handle during a launch, consequently, you need to prioritize only important features, while taking into consideration resources, effort and time you can allocate. Hard as it may be, you should resist any temptation of building everything from the start. You’re better off building a few completed products, than having many half-completed products.
Mobile design considerations
After you prepare the groundwork, you should immediately work with the fun part: the actual design! Principles of desktop web design and basic design steps also apply to mobile websites, although there are also a number of unique mobile design elements you should consider. Mobile devices usually have small display, have slower Internet connection and are always turned on.
Context is a big factor in mobile design, compared to computer user, mobile users have different characteristics. Desktop users often sit comfortably, listen to music, and use social networking intermittently while accessing your website. Mobile users, on the other hand, often use one hand and walk around. Imagine users accessing your site using a tiny mobile phone, with intermittent Internet access in a crowded and noisy subway train, this should give you an idea about context of use among mobile users. Simply put, context is related to conditions of usage and environment; including connectivity quality, hardware specifications, lighting condition, motion, multitasking, distractions and others. There are three common mindsets of mobile users:
- Boredom: They use mobile devices for entertainment or distraction.
- Local: They often try to find things around them
- Microtasking: Their phone usages pattern appears like short bursts of activities.
Another obvious difference between mobile devices and desktops are screen size. Developers have been increasing the minimum display resolution nearly every year, for example, early websites were optimized for 640 x 480. Although mobile phones are getting bigger, even a huge 4.3” smartphone, such as Samsung Galaxy SII has only 480 X 800 resolution, on the other hand, owners of large tablets such as Galaxy Tab 10.1, with 800 x 1280 resolution can view desktop websites better. Modern mobile devices can change orientation between landscape and portrait quickly, so your website should be able to resize accordingly. Although many mobile devices can display desktop websites well, they often break user experience by making users to zoom in and out.
These are steps to deal with the issue of designing for multiple screen sizes and resolutions
- Group devices based on the width of the display
- Use a default design reference that can adapt well to most, if not all screen sizes
- Define rules for design and content that can be displayed well
- Choose a flexible layout and the right Web standards
Some website owners choose to use a website that can cater to all devices, including mobile devices and desktops. A good practice is to start with the mobile design first and then progressively enhances it
- Choosing the right design isn’t a black and white option, you should consider which will work well for your situation. Irrespective of the design you choose, you need to consider important factors for mobile design such as, simplified navigation. Without a point and click device, such as mouse, users of mobile devices rely on keypad, trackball and touchscreen. Add in the smaller screen size and you’ll understand why an intuitive and clear navigation is essential:
- The homepage of a mobile website should have a list of features and contents, ordered by user priority. Because screen of mobile devices is often tall instead of wide (especially on low-end devices with no accelerometer), mobile websites are usually designed with vertical layout, instead of horizontal one.
- Mobile websites usually have simpler level of navigation and fewer categories than the desktop version. The categories should be ordered based on level of importance.
- Navigation labels are usually shorter, but still clear and consistent.
- To improve user experience, categories or features should be accessible with shortcuts, such as keypad numbers.
- When designing for touchscreen devices, make sure the tap size (height and width) for all navigations items is about 30 pixels.
- Make sure links are easy to see and provide clear visual feedbacks to any selected links.
- If possible, put all navigation links after the main content to avoid forcing visitors to tab through each of them to get to the content.
- After the main content, put a link to the desktop version of the site.
- You don’t need to use breadcrumbs on mobile websites as the levels of navigation are usually shallower.
You should be succinct, because smaller screen size requires more careful consideration to the contents displayed. Put on your editor’s hat and trim inessential contents, leave only useful ones. Contents should have more focus on mobile websites than on desktop ones, because complex mobile websites can confuse users easily. These are other accessibility considerations:
- Keep the URL as short as possible, because users of low-end and feature phones need to repeatedly press the keys. For example, key presses for .org are 1-666-777-4. A good URL for a mobile website is m.yourdomain.com.
- Allow the use of multiple input mechanisms, including voice and geolocation. You may also offer a list of obvious options, which can prevent most of your users from typing.
- Limit the use of fields, for example the registration form in a mobile website should contain only username, password and email. Completing a mobile form takes more effort and longer than a desktop one.
- Use dynamic values for example, your website should automatically use today’s date and remember inputs from last session.
- Since mobile devices are usually not shared and personal, you should give your users the option to stay signed-in.
Accommodating intermittent connectivity
Although device manufacturers and carriers are rolling out LTE technology that can reach data speed 42 Mbps or faster, in many places Internet connectivity remains somewhat intermittent. Some users may still use slow GPRS connection and don’t have unlimited data plans, so you need to
- Keep the mobile site small and useful, to reduce loading time and access cost.
- Remove optional tags and unnecessary code
- Reduce image resolution and size
- Minimize the number of images to speed up loading time and reduce HTTP requests
Cross-channel integration and consistency
When creating a mobile website, you enter a multi-channel territory and consequently you need to maintain an integrated and consistent user experience across channels. These are a few things to consider:
- Balance form and function. It is a good idea to take a no-frills, minimalistic approach by using logo for visual branding.
- Maintain functionality. Mobile website of Amazon allows users to manage the shopping cart, create wishlist and track orders, the mobile site is largely as useful as the desktop version.
- Extend user experience. If you have an online store, you should allow users to look up ratings of products and user reviews.
- Maintain a consistent user experience. Users going from the desktop website to the mobile website accessed from a smart mobile device should have similar user experience, although it may not be achievable on low-end phones.
- Automatically direct users of mobile browser to the mobile website, however always include a link that allows users to switch to the desktop website
- If you need to use scrolling, make sure it scrolls only on one direction. Some websites scroll both vertically and horizontally, which causes poor user experience.
- Allow for easy recall and bookmarking by using descriptive and short titles for each page
- Some experts advocate the creation of another mobile website for low-end and feature phones, however, opt only for one version of mobile website, as managing three versions of websites can be somewhat unwieldy. Even Facebook decided to unify its mobile website versions into a single interface.
Prototype review and Refine
If you seek to have an interactive, user-centered device, prototype is essential, as it allows developers to quickly visualize any part of the website. You should prototype early and often during the design process. Prototyping can start with paper sketches, continue with wireframes and finally you can create high fidelity design. It is important to continuously test with users and iterate based on their feedbacks. Always check your codes using the W3C checker, especially after an upgrade to uncover glitches and six potential issues. Many developers use simulators and emulators during the development process, but nothing beats a thorough testing using actual mobile devices.
Even if your mobile site is already launched and runs properly, you job isn’t done. You should monitor traffic and user feedbacks to determine necessary changes, such the need for new features and the removal of unnecessary elements. Periodically visit competitors’ websites to identify possible ways for improvement.
Mobile websites are unique entities and creating them can be daunting. Although, the design process between mobile and desktop website is mostly similar, creating a perfect mobile website is impossible even for the most accomplished expert, fortunately, user-centered development process can help to create an optimum experience for your users.