I recently re-read the recent post by Jacob Nielsen Mobile Sites vs. Full Sites, which elicited a lot of pretty strong opinion online. Much of the resistance to Nielsen’s original post seemed to stem from the perception that Nielsen’s suggested approach would marginalise mobile users by providing a cut down version of the full interface to mobile users. While I think that the original post was a little black and white in stating that features and content need to be cut on the mobile interface I think that the main point of this article is a good one (if a little obvious), that an interface designed with a type of device in mind will be more usable than one that was designed for a device that very different.

To me the issue of how the interface is presented is simple. The use of mobile devices to access your content needs to be catered to and doing this in a usable way will mean that the interface will look somewhat different when viewed on a mobile device. Whether this is achieved by implementing different websites for different devices or through responsive design is irrelevant to the user as long as they can find what they are looking for and do so without dealing with a difficult interface.

When thinking about what a mobile interface should do in terms of features and content, I think that it important that decisions are not be made based on what the wider internet population is doing. There are few website that can claim anyone who uses the internet as their target audience and so I feel that by finding out more about your target audience and what they are doing will make a lot of decisions for you, including what level of content and functionality is appropriate for your users.

Following on from a recent post about mega menus, we have been observing some interesting behaviour.  During some recent testing, we observed an issue regarding the design of drop-down menus, and their associated top-level landing pages. The site we were testing included some specific sub-category drop-down options as part of their navigation, and we repeatedly noticed that the top level page (i.e. the option users had to hover over to activate the menu) was ignored by users as an available option within the menu. This in turn meant that any content placed on that top level page, was effectively hidden from users. The image below demonstrates how when the cursor is placed over ‘About Us, causing the drop-down menu below to load, the sub-listed items take precedence in capturing a user’s attention. It is likely that users may disregard the top item (About Us) as an option, making them more likely to select one of the sub-items below, and effectively missing the content contained on the ‘About Us’ page.

Drop-down menu with linked top-level landing page

We believe this issue is attributable to at least two aspects:

1. When new items are added to the menu, they immediately draw a user’s attention away from the original item, to focus on the new items added. This means visibility of that original, top-level item is greatly reduced, as users tend to follow the list of items down the page and do not tend to return their gaze back up to the top.
2. When a user realizes that a link or item has functionality attached, they may then disregard that item as a link, and begin to see it only as a pure function, e.g. a gateway to activate the drop-down menu below.

This problem was quite concerning for us to observe during testing as important content was often placed on these top-level pages, however our participants seemed mostly  unaware that these pages were available. This not only affected their ability to understand the full scope of content on the page and locate information that was critical to the task at hand, but also their understanding of the website structure itself.

To resolve this issue, we believe there is a simple solution to this issue. The link functionality should be completely removed from the top level options, and a link to the original top-level page be placed within the secondary menu items. This page should be given a unique, identifying name to differentiate it from the top level option. The example below illustrates how an additional category has been added to ‘About Us’ that would contain the content initially within the top-level option.

Drop-down menu with top level option added to secondary items

In doing this, the link should now be within a user’s gaze and no longer be disregarded. This simple change in structure and placement should immediately improve visibility to this page, and ensure it is no longer lost within the functionality of the menu.

Saying that users don’t normally like to read long form content on a website is hardly an earth shattering  insight, and thankfully good web managers take that to heart and spend time editing their content carefully and ensuring they’re using good writing for the web techniques.  Why is it, then, that so little of that same attention is paid to the form and display of terms and conditions?

When we’re testing, we tell our participants to attempt tasks “as they would at home”.  Participants take that quite literally (as we intend them to), and we have often found ourselves sitting next to someone reading through screen after screen of terms and conditions, written in long form “legalise”, before being happy to continue on with a process (such as purchasing a product, or signing up for a new service).  To be fair, it isn’t all participants who do this, most are quite happy to agree to anything in the sessions (and when we query them, they say they do the same at home).

Be that as it may, we feel that you owe it to your customers to make your terms and conditions a bit easier to digest.  You know that there are certain clauses that are more important to users (such as cancellation procedures, or support guidelines), and certain that are probably less so (such as copyrights).  Why not make the ones you know to be of particular interest easier to find, via a simple list of bullet point links which allow the user to easily navigate through to those sections of your T&Cs?

We can hear the howls of protest from your legal people now, but as user experience practitioners we need to remember that our role is to help facilitate the interaction between the user and the company.  How much more value would a user get if they were to more easily peruse the T&Cs, via a clickable table of contents at the start?  And wouldn’t that make our lawyers a bit happier – if we just made the T&Cs easier to digest, maybe they would actually serve the purpose that they intend, which is to clearly set out the clear conditions of use that all parties are agreeing to?

In Part One of this blog post we spoke about how to incorporate additional assistance for users – explanations at the beginning of applications, help boxes within forms, and site translations.  This post includes our favourite tips to increase form completion rate through ease of navigation in and around your form.

Tip 1: Make it simple for people to navigate through your form.  

Put your users in the driver’s seat and allow them to control their experience – let them move back and forth as needed.   Also, as users work their way through the form, give them “you are here” cues.  For multiple page forms, give users a complete road map – a tool that clearly displays the number of steps or pages involved in the process.  Providing users with some type of graphical feedback on their progress encourages users to complete longer forms.

For example…

The Australian Government’s Department of Immigration and Citizenship’s eVisitor application displays a bar at the top of the page, as well as “previous” and “next” buttons at the bottom:

Tip 2: Give individuals the opportunity to start and stop filling out the form at any point in the process.

As you may remember from Part One of this blog post, if users don’t have information on hand that is necessary to complete the form in one go, they may get frustrated, and companies may in turn see a decrease in the completion rate.  This being said, if users are given the opportunity to “pause” the process – whether it be to gather more information, or to more thoroughly review an application prior to submission – even though it will take longer to actually complete the form in the short term, it will increase the completion rate in the long run.  Other advantages of allowing people to save the information they’ve already put into a lengthy form are the prevention of data loss, and the elimination of re-entering the same text.

For example…

The Australian Government’s Department of Immigration and Citizenship’s eVisitor application has “save” and “print preview” buttons at the bottom of the page:

Tip 3: Let the user know they have completed the form, and that appropriate action will be taken in response to the information they have submitted. 

When the users have navigated across the finish line, reassure your users via a confirmation page – let them know that their compliment, complaint, inquiry, application, etc. has been received.  On the confirmation page, give them a timeframe as to when your company or business will respond to their inquiry.  Show your users that they are important to your organisation.

For example…

Medibank Private’s Feedback and Complaints section provides a confirmation page upon receipt of the user’s inquiry, and gives a timeframe as to when the feedback or complaint will be addressed and resolved.  Medibank Private also offers to escalate the issue if the complaint has not been dealt with to the user’s satisfaction [http://www.medibank.com.au/About-Us/Contact-Us/feedback-and-complaints.aspx]:

Now go improve your online forms!

Looking for help redesigning your online forms?  We have good news – recently we reviewed the guidelines produced by Australia’s Department of Innovation, Industry, Science and Research, and they acted as a catalyst for us to show how various Australian businesses, organisations, and companies are working to provide a better online experience when dealing/designing with forms.

Part One of this blog post includes our favourite tips on how to incorporate additional assistance/help for users – explanations, hints, and tips – so they can complete your form as quickly as possible.

Tip 1: Explain what the form’s purpose is upfront, along with what the user needs to complete the form. 

If users are too frustrated and/or do not have the required information readily available, it is possible that they may completely abandon the application.  Just by providing a summary and prompting users as to what they’ll need before starting the process [their license plate number, for example], allows for full disclosure and avoids user frustration and annoyance.

For example…

The Queensland Government’s online application for a Recreational Wildlife Licence provides the applicant with a clear, succinct purpose, and material needed to fill out the form on the first screen [https://www.derm.qld.gov.au/rwl/faces/jsp/login.jsp]:

Tip 2: Help your users – provide hints, tips, and additional information on how to fill out the form. 

Sometimes a user may not understand the form questions or answers provided, and adding help text will allow the user to fill out the form quicker and better understand what information they need to provide.

For example…

The Australian Government’s Department of Foreign Affairs and Trade Smartraveller application integrates a further explanation of the question in the boxes to the right of each item [https://www.orao.dfat.gov.au/orao/weborao.nsf/fQuestion?OpenForm]:

Tip 3: Incorporate a link to a translation service. 

Does your business or organisation have customers whose native language may not be English?  Are you a company seeking a greater international audience?  If so, make it a point to include other language options – both on the individual forms you provide, as well as across your entire website.  By allowing for the use of translation service, you seek to provide equal access to people from other cultures, and increase the amount of people who will be able to complete the form in the future.

For example…

The Australian Government’s Department of Human Services Centrelink website includes translation services on the following page [http://www.centrelink.gov.au/internet/internet.nsf/languages/index.htm]:

Stay tuned for part two of this posting, which will cover tips related to improving the way people navigate through your form.

On a number of recent wireframing projects we have encountered queries from clients about the use of drop-down menus.

A drop-down menu is a list of menu items that appear when the user clicks or hovers over the main navigation menu.

Our discussions typically centred on the pros and cons of drop-down menus, and options regarding their implementation, which we will summarise below.

Implementation 1: Sane.com.au

The above example from Sane.com.au, this is the simplest execution of a drop-down menu. It is a list of menu options representing the 2^nd level navigation.

The following examples of drop-down menus are often called mega-menus, due to some of their characteristics as follows:

• A large amount of real-estate taken up on the page
• Can present more than one level of navigation
• Can support additional information
• Creative design such as imagery and icons
• Advertising

Implementation 2: HarveyNorman.com.au

In the above example taken from HarveyNorman.com.au, the drop-down provides a preview of 2^nd and 3^rd level navigation for the selected menu option. The links available in the TV & Audio drop-down menu are exactly the same as those presented on the left hand side of the TV and Audio section of the website.

The purpose of this implementation is to provide users with a quick ‘preview’ of the options available from any page of the website and effectively replicates the navigation options available within each section of the site.

Implementation 3. Carsales.com.au

In the above example taken from Carsales.com.au, rather than providing a preview of the 2^nd and 3^rd level navigation of the website, this implementation includes links to pages with customised search engines based on the users selection from the drop-down, e.g. body type, make or around lifestyle choices.

Implementation 4: Anz.com.au

In the above example taken from ANZ.com.au, the options presented in the drop-down menu are the only means of accessing 2^nd level navigation options. If the user wishes to move between sub-sections (e.g. in the example above from “Products & services” to “Tools, forms & guides”) they need to do so via the drop-down menu. In this example, the menu is not just an additional or assistive means of accessing site content, it provides the only access to certain pages of the website.

Which of the above implementations you choose will depend upon the objectives of your site. Irrespective of the method you choose, there are a number of pros and cons to keep in mind when considering the use of drop-down menus.

Pros:

• Quick and direct access to content that can be 3 levels deep within a site
• A quick preview of content available within a section
• Disambiguation of potentially confusing menu labels, interacting with the drop-down can provide additional information about what is in that section, clarifying the meaning of a menu option
• The ability to prioritise visibility of content, which can be motivated by business rules.
• The ability to sell advertising space

Cons:

• The motor-control required to operate drop-down menus. On any drop-down menu, if the user rolls the cursor off the menu, it will de-activate. This requires a certain level of motor-control and dexterity.
• When using a mouse, the user may glide the cursor over many main navigation menus before deciding to click. This is why latency is built in, as it allows the user to choose whether or not they want to reveal the drop-down menu. By resting the cursor over the main navigation menu for a few seconds, the drop down menu will appear. Again this functionality, even with the convenience of latency, also relies on a certain level of motor-control and dexterity, which is more demanding than a simple click of a button.

Sane.com.au, HarveyNorman.com.au, Carsales.com.au, and ANZ.com.au are examples of sites that use drop-down menus differently, due to the nature and purpose of their content. When designing a website it’s worth considering how drop-down menus will be of benefit to your website.

The March 2012 UsabilityOne Newsletter has been published. You can read to read the latest edition here, or visit the UX Resources page on our website for other useful publications, including our most recent Industry Report- a Mobile Compliance Audit on Group Buying websites.

Last Friday I attended the Agile UX 2012 conference in Sydney’s Darling Harbour. While the conference was more focused on design of the user experience than researching it, it was really interesting for us as research specialists to look at the agile process from the UX design point of view. The key questions to consider when thinking about researching the user experience in an agile process are:

• When is best to do research, how long will it take and how much time will it take away from doing other things?
• What materials do we use for testing and how much effort do we put into test materials?
• What insights do we get and what do we do with them?

These questions represent challenges to integrating independent research in the agile process, however, they are not insurmountable and we feel that they should not lead those working in an agile process to forgo research altogether. UsabilityOne have been working with clients that use the agile process for some time and we have been working hard to ensure that our work has little impact on the tight time frames that typify the agile process. It is impossible to use a one size fits all approach as every agile process is different; however, we feel that the key to providing value with minimum impact on the overall process is to provide a light research process that delivers prioritised, actionable insights quickly.

The keys to providing value in this process are:

• Use one meeting to understand the product, research goals, participants and approach to the research
• Receive the test materials, finalise the moderation guide and setup for testing one day out

• Test with 5 participants in one day and have the client attend as many sessions as possible
• Analyse feedback and deliver prioritised insights within 24 hours of completing the sessions
• Deliverables are light, primarily a debrief meeting with a brief document outlining insights and actions that can be carried through iterations

Last week Google Analytics sent out an email regarding some new features which look fantastic. They include:

1. Google Analytics Real-Time
2. Multi-Channel Funnels
3. Mobile Reporting
4. Flow Visualization

From a UX perspective we are really excited about the information we will be able to glean from our users with these new features and can’t wait to use them.

In particular Multi-Channel Funnels looks particularly valuable by providing amazing insights into the various touch points which occur prior to converting or purchasing. This will help to avoid the risk of looking at website in isolation.

For more information see http://bit.ly/su90wr.

We sometimes have clients come to us who want a rich, descriptive understanding of their users’ behaviour and motivations, whilst at the same time expecting statistics and hard figures to go with this. If time and budget had no limits this could most definitely be achieved. However, we often find ourselves giving clients a mini rundown of the limitations and benefits of each approach so they are in the best position to understand our proposed solution.

The Pros:

The Cons:

Understanding the why’s and the process of something is essentially what qualitative research can unveil, however if it is numbers and statistics that you are after then quantitative is the best approach to take. It would not make sense to run a series of in-depth interviews with a focus on user needs and then use this information to say 66% of users want X and 25% of users don’t need Y. It simply does not make sense. What you can do is provide a summary of the users’ mental model, the process they take when approaching a task and the information they need to support this. Or map out the customer journey that highlights user needs during each stage.

While it is generally agreed that each approach is distinct and has unique properties, they are often used to complement each other. For example, when a quantitative analysis identifies that the customer conversion rate has dropped 30% in a re-designed website, it often uses qualitative research (i.e. moderated user testing) to understand why. Similarly, when a quantitative survey is delivered, the questions it asks have most likely been informed from qualitative research preceding it (i.e. depth interviews).

While there is much debate around which is the better research technique and why, what isn’t attested is that the most accurate results occur when a triangulated approach is taken – that is, when they are used together.