Archives for "User-centered Design"
Mobile Web Application Development Strategies
Mobile web has emerged as another area of interest for designers and developers. Mobile web has its own advantages and limitations, from both developers and end-users perspective. Mobile Web platform has empowered organizations as well as end-users to access information / applications on the move and achieve ‘mobile productivity’.
In this series of posts about “mobile web application development strategies’, we will discuss about ‘advantages of mobile web platform, strategizing for mobile web, initiating a mobile web project’ and much more will be added as and when possible.
To begin with, we will understand how mobile web is promising.
Advantages of Mobile Web platform:
Anywhere-Anytime information access:
Unlike conventional desktop-based computing, mobile web has surpassed the limitation of immobility. With mobile devices, users can access information anywhere, anytime when they are in the cell phone connectivity coverage area or using a WI-FI hotspot.
Wireless Internet Connectivity:
Users are now having access to internet on their mobile devices or accesses internet through their mobile devices.
Leveraging Application / Device capabilities:
Services / Applications now can take the advantage of in-built capabilities of mobile devices, like clicking on a phone number can help users to call the respective number with no hassles involved.
Geography-based Content Delivery:
Location-based technologies are enabling the end-users to receive the content based on the location. Such localized content delivery mechanism is helping users to get the desired content with minimal efforts, which leads to a better user experience and benefits to the respective service provider as well.
Strategizing for mobile web:
When an organization decides to design a website or an application targeted at mobile web users, they need to consider several factors like:
- Why should we make / create a mobile web application?
- Does the content delivered on mobile devices make sense for the TG? Is it really adding value to their usage?
- What kind of content can be made available online? Do we deliver useful content?
- We have a very powerful flash-based website. Should we create a similar application User Interface (UI) for mobile devices as well? Will it work across multiple device profiles?
Precisely, before we start working on a mobile web application, we must be aware of all aspects like advantages and limitations the mobile web platform has and also about how to leverage this platform for an organizations’ and end-users’ advantage. We must be clear about ‘whether creating a mobile web application can really add value’ to the respective website as well for the end-users / TG.
As this is a series of posts, we will continue with “Initiating a mobile web project” in the continuing post.
Navigation Design Guidelines – Best Practices
When a user visits a website, the very first thing he tries to find is a way to access a website or an application – that’s “navigation”. If the navigation is not designed properly, precisely a non-intuitive navigation, it is obviously going to make user’s life difficult. If we are making website users to think how to use the respective site, it clearly indicates that some core things are missing.
A great navigation is intuitive, easy-to-understand, and easy-to-use and ideally, should not need some plug-in to be downloaded to use navigation. For example, a site navigation is designed using Flash and no alternative way of navigation is not provided, can you imagine how miserable an experience a user can have who doesn’t have flash installed on this machine?
So, we must design sites to good navigation to make the website or an application successful in terms of end-users’ experience while using our website / application.
Below given are some of the points which can help us design a better navigation that helps users to use your site:
1. Navigation Placement:
Make sure that the navigation is placed at an easily visible location, so that the users don’t have to “guess” or “search” for it.
2. Place important things on high:
Keep the important things on the top area of the page, preferably in the first half of the page. Such significant information should get displayed first to the user.
3. Banner Blindness:
As Wikipedia describes it – “Banner blindness is a phenomenon in web usability where visitors on a website ignore banner-like information.
Make sure that you don’t put any content above the ad banners as users are tend to ignore all the content that’s displayed above ad banners. Make sure especially that navigation is not placed above such banners, as ‘navigation’ is very important & should not be ‘lost’. [Read more about "Banner Blindness"]
4. Avoid being unconventional:
Designing website navigation in an ‘unconventional’ way to make the site stand out from the crowd is NOT a good method of navigation design. It becomes difficult for the users who are now quite used to the general web design practices of designs, navigation & such other generic functionality.
5. Ideally, an easy way to come back to homepage, like a HOME link should be always there:
Homepage being core of any website, a back-link to the homepage should always be there. Also, it is very much possible that user might have landed up on your website through some search engine or have come directly to your sub-page / inner page, a “home” link always helps them to come back to the homepage of your website.
6. Keep the navigational elements consistent across the website:
Make sure that all the links & navigational elements are kept consistently on the same place as there have been anywhere else, in terms of links, styles, etc. User can find them easily anywhere in the site.
7. Design it to ‘load fast’:
Do all your design & development by considering a user having low-speed internet connections. Make sure that your all your site’s HTML, CSS, Flash components (if any) loads faster, so that users do not leave the site quickly even before it loads as they may not be ready to wait or may switch to your competitor’s site.
8. Quality as against to Quantity:
Internet users like minimum options & clicks to get the desired information. Create sub-sections & sub-categories to help the user to “navigate easily & locate the required content easily & quickly”.
9. Browser-Compatibility:
There is multi-browser application scenario. Do compatibility tests for your website before it goes live on major browsers like “MS Internet Explorer, Mozilla Firefox, Netscape Navigator, and Opera” & check if the look & feel as well functionality of JavaScript used in the site is working well.
10. ONLY essential stuff in the navigation:
Non-core Information like “Privacy Policy, Terms of use, even Contact Us (in most cases)” should not be in the main navigation & can be placed in the “bottom menus” zone.
Also read:
Navigation Design for Mobile Web – Best Practices
Do provide your suggestions / insights that can imprve the way we design navigation.
Drop Down Menus – Usability
Using drop down menus is cumbersome for users, as it needs scrolling efforts by end-users, leading to usability and accessibility issues. Now, there is a new trend in the web design – of using large drop down menus. New mega drop downs are far better than regular drop downs, which hides several options when they open and may be a long scroll is involved to see all of them and still they all can’t be seen at the same time – involving usability issues like motoring and short-term memory.
These new kind of drop down menus has features like:
- Everything visible at the same time, so users don’t have to scroll (in most cases).
- Split into two or more panels for an easy to understand navigation interface and grouped sensibly.
- Has features like usage of typography, icons (even may be thumbnails), assistive features like tool tips.
- Users don’t have to remember a lot, everything being visible upfront (as the short-term memory is involved while browsing such objects and several users may miss it as they rely on short term memory).
These kinds of menus are easy-to-use and have been rated good on usability as per tests done by the Jakob Nielsen’s (Alertbox, March 23, 2009).
Also, in desktop application interfaces (GUIs) like Microsoft© Office 2007 , this kind of drop down menus with illustrations has been used effectively.
Microsoft Office Word 2007 – Formatting
Microsoft Office PowerPoint 2007 – Publish Slides
Below given are some of the examples:
Microsoft US homepage
BP homepage
CompareIndia.com homepage
You can read more about the Mega Drop Down menus on Jakob Nielsen’s website: http://www.useit.com/alertbox/mega-dropdown-menus.html
Mobile Web – Navigation Design
With the increasing usage of web on mobile devices, the need to understand the end-users has emerged with prime importance. End-users’ experience of web on desktop and mobile devices is almost entirely different and even these users has a different kind of ‘mental model’. Interface or navigation designs that works great on desktop may not work in the same way on mobile web as it is.
A usable navigation design improves the end-users experience and makes sure that users don’t leave the website due to frustration as they are not able to use your website on their mobile device.
While designing websites specifically for mobile devices, there are several factors which you will have to consider. In this article, we will discuss particularly about “navigation design for mobile websites”. You can read more about Usability Factors for mobile web as well as Design Factors for mobile web.
Here, we will discuss some important aspects of navigation design for mobile websites:
1.Provide only minimal navigation at the top of the page:
Only basic navigation to help users enhance the experience by reducing clutter for these relatively small screens. Core links upfront also help users to navigate across the application easily without getting much frustrated. In case of footer links, provide very few (2-3) and only if it’s really essential and helps users.
Provide only minimal navigation.
2. Balanced Site Structure:
Unlike desktop-based browsers, mobile web browsers has too many limitations like screen size, hardware’s processing capabilities, memory, etc. Scrolling too much could be painful for the users on such devices. So, the information architecture will need to take care of this balance between that will help end-users to reach the desired content with minimal links.
Inessential links or steps added to get the desired content make users frustrated and they simple stop using the site.
3. Consistent Navigation Mechanism:
The way users navigation on mobile devices is not as easy as pointing devices like mouse on a desktop and they have to rely on joysticks / 4-way navigation or keypad. In such a case, using a consistent navigation method helps a lot.
A “drill-down” navigation mechanism in such interface can help end-users, as it is based on the major headings that take you inside it based on your preferences. For example, someone who wants to see what’s available in movies or music can be directed to the same using main heading link as “entertainment”. Also, we should make sure that links that takes him to main homepage or category homepage are available, e.g. home, entertainment, up, back to top.
Consistent Navigation Mechanism
Make sure you keep these links minimal required and steps to get the desired content also very minimal, as users may not be interested in going for more retrievals or clicks to get the content he / she is looking for. Also, some form of breadcrumbs can help them to track their trail as well as to go back easily.
4. Device-based Access Keys:
Unlike traditional desktop computing, mobile device is not capable of relatively easy-to-use point device (but is bit easier in smart-phones with some point device like stylus). In such a case, we should use the built-in capabilities of the keys built on the device, which are keyboard shortcuts for a mobile device. Users can press a number on the keyboard to go to a link associated with.
Also, make sure that same access key assigned a link is used across the application for the same link.
5. Description for the link:
Provide information related to a link. For example, if a link is directed to a file which may not be supported by the end-users device, it may be frustrating for him as he isn’t ware of the kind of file type is linked with that particular link. Handsets which don’t support videos etc. may show undesired response and may frustrate the end-user.
6. Do not Use Image Maps-based navigation:
Even though it’s an effective way to navigate by using client or server-side image maps, most of the mobile devices don’t support them. Also, usage of images as navigation should be avoided as end-users with information-seeking behavior tend to disable loading images and your navigation may go completely invisible for the end-user, as browsing websites on mobile devices do involve data usage charges to the end-users and they may be simply not interested in viewing those images as they have to pay for it.
There could be more ways to design a better navigation for mobile web. Please contribute them here if you can think of anything.
Made by Symmetric Web
Distributed by Smashing Magazine