Browsing a web with desktop browser, mobile browser and mobile apps has a big different. Hence web site design principles are well known these days. Best practices for example, in a process funnel a progress status can be readily visible across its pages. The basic principles and guidelines that are applicable in the design of web sites can also be applied when designing mobile platforms.
Users’ success rates when using mobile devices to access mobile sites averaged only 64%, which is quite low in comparison to the 80% average success rate for users who access Web sites on a computer. The form factor difference seems to have a dramatic impact on the success rates of users’ interactions, and therefore, should impact how we design mobile sites as well as (Jakob Nielsen, 2009) points out.
New principles will inevitably arise as mobile site design continues to evolve. Below are the 10 most common ways that mobile sites are different from the desktop web sites.
1. Content Prioritization
Desktop web site usually contain a wide range of content cause it has a larger content area while mobile site contains only the most crucial function and features. The biggest challenge from designing a mobile sit is that we need to fit in content from a 1024 x 768 screen resolution to a 320 x 480 screen resolution without sacrificing any of the user experience.
2. Vertical Instead of Horizontal Navigation
The structuring and presenting content of a web site are different from a desktop view and a mobile site view. For a mobile site, horizontal navigation are normally replaced with vertical navigation while desktop web site uses a horizontal navigation. A desktop screen resolution is placed in a landscape view while the mobile site are usually viewed in a portrait mode.
3. Bars, Tabs, and Hypertext
Hypertext is a signature component if the web. However, hypertext is less seen in mobile sites, instead hypertext are appear in the form of bars, tabs and buttons. The reason for this is to optimise the mobile design for users’ operation of mobile devices with their fingers touch. Hypertext is ideal for users using a mouse operation on a computer, because tapping links using our fingers on a touchscreen mobile device is not that easy with small text in compared to bars and buttons. Users can easily tap on a link they did not intend to tap and accidentally browse on an undesired page.
According to Fitt’s law,the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. (Paul Fitts, 1954)
Bigger targets such as bars, tabs or buttons allow users to tap with more precision. It is essential to make the actionable objects on mobile sites bigger so that it is more easily noticeable.
4. Text and Graphics
Text and graphics are usually use for purposes like promoting, marketing or navigating through the web site. However, these are remove from the mobile site. The reason for this many to few graphics transition is that mobile devices has smaller screen size and mobile devices does not support the software we usually used on desktop. Other than that, it is also because of the slow download speeds on mobile devices.
5. Contextual and Global Navigation
Desktop web site uses various forms of navigation, some of them are global and remain consistent throughout the site, while others are contextual which will change depending on where users are in that site. The global navigation is common on mobile sites but contextual navigation is not. The reason for the reduction of global navigation in mobile site is because the limited screen real estate on mobile devices. In another hand, the lack of global and contextual navigation causes users to lost in the site. Therefore, it is essential to reduce hierarchy when organising the content on mobile sites, so that users won’t get lost before accomplishing their task.
6. Footers
Web site footers are not obvious but they are one of the most important part of a web site. There are two types of footers used in desktop web sites. One type of the footer provides link to content, for example careers or sitemap, while the second type of footer provides quick links to content users typically need to view most often. These quick links are usually grouped into lists in a footer so that user can have easy access to them across the site. Mobile web site employ footers that provide only access to content that users often look for, hence keeping the links to a minimum.
7. Breadcrumbs
Breadcrumbs are an effective way to assure users they are on the right page and allows them to backtrack on their navigation path. They make sense for large and hierarchical web site with multiple levels in hierarchy. However, breadcrumbs rarely appear in mobile sites and there is no necessity for them because of the limited space of the mobile screen size.
8. Progress Indicator
A progress indicator appears at the top of the page to guide users through the process whenever a process of purchasing or filling out a long registration form is occurred. Progress indicator does not appears on mobile sites because of the limited space. Mobile sites uses alternative ways to make users aware of their progress such as implicit actions such as using buttons with labeled proceed to checkout or specify shipping & payment. Users can still receive information about their process and what to expect in the next step.
9. Integration with Phone Functions
10. Localized & Personalized Search
The unique technology of mobile site to use geolocation services or supports has been available for some time but only the last five years it has gained popularity among the users. Now, it is very common for mobile applicable and web site to take advantage to this function by integrating it into value and adding services such as mobile search. Smartphones nowadays can automatically detect where is the exact location of the users and give them a local search results. This capability allows powerful opportunities for business to promote their products based on a user proximity to their place of business and immediate intent.
For my opinion, there is no desktop web site is better or mobile web site is better. Both of them hold their own’s pros and cons. Although a desktop web site can show more design and content, but the mobile web site is a more straight forward and convenient way to browse a web site when you have no computer around you. Both desktop and mobile web site uses a very careful planning on the design and content, so that the users can have a better hierarchy while browsing.
References
Shanshan, M. (2011) ’10 Ways Mobile Sites Are Different from Desktop Web Sites’ UXmatters.com [online] Available at: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php [accessed 1 January 2016]
annabelle sy tan 