Google has recently made some pretty comprehensive changes to their Gmail interface. One change that I found interesting is what Google are calling ‘Display Density’, which automatically adjusts the layout of the page based on the size of the browser window. Google have also provided three settings that can be used to adjust the density of information on the page and afford users a level of control over how the page looks. While I don’t think the implementation is quite right, it is an interesting way to solve the problem of designing interfaces that will be used on devices with screens of all shapes and sizes.

Gmail Display Density Settings (https://mail.google.com/mail/help/newlook_sizes.html)

The issue of what resolution to assume for a user group is one that we come up against regularly and will become more of an issue as the use of multiple devices to access the same interface by the same user becomes more common. Imagine accessing Gmail from a 21 inch widescreen in work, a 13 inch notebook in the home office and on an iPad on the train.

I feel that this type of functionality is a really positive step and will help to preserve the integrity of the overall experience across devices while optimizing it for the screen size being used at any one time and I hope to see more of this type of functionality.

Over the last few weeks I have been on the road doing a bunch of user interviews. This has been a great opportunity to catch up with some of my favorite podcasts (as an aside – I can highly recommend Radiolab, a science podcast to fuel your inner geek). In general, I am a big fan of podcasts as a medium for consuming information which has led me to sample many podcasts over the years but very few have engaged me sufficiently  to keep me listening. With this in mind I thought I would bring together some tips on creating engaging podcasts.

1. Keep the context of use in mind

2. Chunk content into chapters

3. Focus content on the topic of the podcast

4. Ensure the start of the podcast is engaging

5. Entertain the listener

6. Keep advertising separate from content, either at the end or beginning

Watch out for more detail in our newsletter this month.

Accessibility is often one of those things  placed in the ‘too hard’ basket, or worse deemed unimportant as it thought to be only relevant to a small portion of the population.  The fact of the matter however, is that accessibility benefits all internet users.  Accessible websites and the information they contain are generally easier to comprehend, more user friendly and often more compatible across a range of web browsers, including mobile browsers.

Image from http://www.korten.in/Accessibility.aspx

While undertaking a full accessibility review can be a daunting process that may require the input from a professional, there are a few simple things everyone can do, to ensure that their websites are more accessible.

1. Do not make your website dependent on colours.
   Colour alone should never be relied upon to convey meaning to users. Links should always be underlined, and important information and forms should always be labelled correctly.It is easy, when designing a website, to think your website is immune from colour blindness problems because it doesn’t use red or green. In reality, there are many different types of colour blindness and the only way to ensure that your design is truly accessible is to check your foreground and background colour combinations to determine if they provide good visibility. 

   The W3C official statement on colour visibility is: “two colours are considered to provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range.” The range suggested by the W3C is > 125 for colour brightness and > 500 for colour difference.”.

   An easy way to check the contrast levels of your website’s colour scheme is to download the Vision Australia Colour Contrast Analyser for webpages: (http://www.visionaustralia.org.au/info.aspx?page=628). This tool analyses all colour schemes according to the W3C guidelines for contrast and provides a pass or fail mark. It can be changed to particularly target different types of colour blindness so all types of visually impaired users can be tested.

2. Place alt text on all images and media.
   Text equivalents should always be provided for all images on your website, as screen readers cannot ‘read’ images, they read the information provided in the alt tags. If the image used contains text, all text should also be included. Having alt text in the image tag ensures users relying on screen readers can hear the description of all images, rather than just hearing the file name. It can also be useful when pictures cannot be downloaded from the server, which often occurs when users are on slow connections. Alt text is particularly essential when an image is used as a main navigational link.Alt tags can be easily placed within the <img> tag of your website’s HTML body code. For those who are unsure, look for the tags that look like this: <img src=”/images/styles/usabilityone.gif” alt=”UsabilityOne”/> The alt text for this image exists after the ‘alt=’ tag, and reads as “UsabilityOne” 

   If you’re not sure about whether to provide alt text for your graphic; the safest solution is to always include it.
   It is also good accessibility practise to ensure your page is not dependent on images for navigation, or that the whole page is an image (e.g. one huge JPG created in Photoshop).

3. Use meaningful and distinctive page titles.
   Another easy way to improve the accessibility of your website is to ensure each of your website’s pages has a different and meaningful title. The title is the text placed between the <title> tags in your website’s source code, and is displayed in the tab of each browser, so you can see the description of each page you’re on (see image below). 

   It is also the first thing a screen reader will come across after a web page fully loads, so it is vital that it gives your visually impaired users a meaningful description of what page they are on, and to differentiate between other web pages.

   Have a look at the titles on each of your web pages that come up in the tab of your browser. Is it succinct and descriptive enough to give a reader an understanding of the page they are on? If someone was just relying on this, could they tell it apart from the other pages within your site? If it doesn’t do these two things, it’s worthwhile manually changing the text in-between the <title> tags in your source code, or asking your web developer to change it to something more appropriate.

   A good habit when creating a window title is to ensure it always follows the format “Page Title | Company/Organisation Name”. This format lists the page identifying information first.

One of the interesting takeouts from our recent eCommerce research is that online ‘window shopping’ is increasingly becoming part of our lives.

So, what does this mean for eCommerce retailers? This information points to the importance of the browsing experience. It also presents a significant opportunity. Providing a site that is intuitive and user friendly, which allows users to quickly and easily browse products has benefits for retailers. It encourages users to spend more time on the site, which provides more opportunity to convert those browsers into purchasers.

How do you increase the usability of an online store in terms of browsing? Beyond the standard usability best practice for websites, our research identified another key aspect: flexibility. Retailers need to create an environment which provides the flexibility for users to browse the site how they wish. This involves allowing users to refine and sort products by a number of different factors such as category, brand, price and size.

A solid understanding of the different ways users may wish to browse products on a particular website is essential for retailers. This will differ depending on the product offerings. For example, a user who is browsing LED TVs will likely wish to sort products by screen size. However, a user browsing a used car website may wish to sort products based on any number of factors (year, manufacturer, kilometers traveled or number of doors to name just a few). The used car website highlights the importance of browsing flexibility for online stores.

Another important aspect of browsing flexibility is the ability for users to control the number of items displayed on a page. Users have expressed that pressing ‘next’ can get very annoying when a website displays a set number of products per page, with no option to increase or decrease this number. Allowing users to decide how many products they wish to view further provides the flexibility users seek from online stores.

Providing relevant, logical sorting options (and the functionality to clear these options at any time) enables users to browse a site according to their needs, facilitating a more enjoyable experience. For retailers, this provides the added benefit of potentially increasing online sales.

For further information related to eCommerce best practice, please view our report: ‘The State of Online Retail – Part 1’ (PDF – 6.4MB).

An increasing number of the websites that we test, particularly redesigned websites, contain some level of social media integration. Social media integration can be very powerful and if implemented in the right way, on the right website can provide an excellent means for a business to communicate with their customers.

Examples of social media bookmark buttons

One aspect of social media integration on websites that interests me is the almost ubiquitous inclusion of social media bookmarking buttons. The most common of these is the Facebook ‘like’ button; however, many websites provide access to a very broad range of similar functions for other social media websites.

In our experience, users tend not to attend to these links during general use of websites. It must be conceded that users may not be in the mindset to spontaneously share information about their usage of social media in the context of a usability session that is not explicitly testing this functionality. Based on our observations so far, it is somewhat  unclear whether the  lack of spontaneous use is due to a lack of prominence, a lack of interest or the test environment, however, when we explicitly test social media bookmarking, we see that a proportion of participants like and use it.

Social media bookmarking has the potential to be a powerful tool in reaching your audience through recommendations, however, when deciding whether to include this functionality it is important to ask the following questions:

1. Does the website audience use social media?
2. Does the audience use social media simply as a means to communicate with friends or also as a means to broadcast information about themselves?
3. Is my content something that users would want to share using social media?
4. How can I use the connections that are made to my audience using social media once they are established?

Eye-tracking can be an invaluable tool and I thought I would share our top 5 tips for using one as part of a usability project.

1 – Over-recruit for your desired sample size – Some participants will not provide sufficient eye tracking data for analysis. This means that you will need to recruit about a quarter more participants than is required for statistically sound analysis of heat maps or gaze plots. It is imperative that this is set as an expectation with stakeholders or clients at the beginning of the project.
2 – Allow plenty of time – In comparison with moderated user testing, more time is generally required for the set-up of the project, the running of sessions and subsequent analysis.
3 – Pilot your study -This will ensure that prior to seeing actual users you are confident the eye-tracker is set-up correctly and working to ensure data is being logged and measuring your stimulus. Without this important step all of the data collected may be useless.
4 – Use a dedicated eye-tracking set-up – This should include a chair on legs (opposed to an office swivel chair) and allowing the moderator to control the eye-tracking equipment (depedning on the eye-tracking hardware this could include the use of a second computer with data logging capabilities). Also, ensure the moderator sits well behind the participant and out of their line of sight.
5 – Is eye-tracking the right tool? – Lastly question whether eye tracking is going to add value to the project. Will it add more than just moderated think out loud user testing alone?

Example eye-tracking heatmap from UsabilityOne

Is there anything you would add to the list for getting the most out of eye-tracking?

For more on eye tracking see Ciaran’s article from the newsletter last year.

We love when our clients give us exciting and innovative designs to test and often we agree that an interface that is not immediately intuitive is learnable and so can be considered to be usable for the target audience. Several factors affect whether an interface that requires learning time is usable.

1. Does the effort outweigh the benefits? The effort required to learn the interface sometimes outweighs the benefits of presenting that content in a complex interface. We feel that innovation is essential, however, sometimes the user is required to do a little too much to access content and they quickly lose interest in the content and the interface as a whole.
2. Will the initial effort required to come to grips with an interface put the user off? It is essential that the interface provides very simple and intuitive core functionality to ensure that users are not discouraged during initial use. This will allow users to use core functionality and learn more advanced nuances of the interface over time.
3. Does the interface hide the purpose of the website? When the interface is too complex or excessively visually based the purpose of the content it provides can get lost.
4. How often will the user visit the interface? Some interfaces will be heavily used and re-visited regularly. In this instance the user has the opportunity to learn the interface and become familiar with its features and nuances, however, where a user visits the interface irregularly or perhaps only once, the opportunity to learn a complex interface does not exist.
5. Who will use the interface? Different user groups are more willing to learn and explore than others. While it is true that younger and more technically savvy users will get used to an interface more quickly, these are often the ones that give up fastest. In comparison to older users who are often more cautious and systematic in their approach, more proficient users assume knowledge and are typically less forgiving of an interface that requires learning.

As web technologies advance we hope that this will enable designers to create increasingly interesting and innovative interfaces, however, we hope that the users don’t get lost in the process.

Forty years ago not many people would have been able to accurately predict the advancements made in technology at the turn of the century and beyond. However, one prediction that has held true (relatively) is Moore’s Law conjured up in 1965.

Moore’s Law states that technology and computing will develop at an exponential rate. That is, every 18 months or so performance of technology is double that of what it was two years ago. In essence, technological growth is continuously accelerating.

But accelerating towards what? Exponential laws have no finishing point, they merely continue to grow at an enormous rate. So is this trend really to continue at the same rate or will there one day be a plateau? You would think there would be what with a limited number of resources in the world, but then again, I continue to be amazed by the latest products to come out.

Figure 1 The exponential growth of the number of transistors in computer processors (Taken from www.intel.com)

So without an end in sight, what does all this new technology mean? Well, put simply, those of us working in the computer and technology industry will have jobs for many years to come.  There is always something to push us forward, whether it be a competitor’s latest release, or a new idea that has only just taken off (3D television comes to mind). For us at UsabilityOne it means we will always have something else to look forward to testing, and for those of you who are thinking of updating websites, softwares or other technologies, it means you have a range of options that are always changing and always improving. So which one do you choose?

Although it can sometimes be overwhelming to try to take in the seemingly limitless amount of technology around us, we should not despair but should embrace. The most important thing we should take away from Moore’s Law is that we should always be on our toes, because as the nature of the law suggests, now more than ever before there will be new gadgets and gizmos coming at us.

Now, you may be sitting there thinking “I have all these proposals on my desk for website improvements and new designs but how do I know what is going to work best”. Of course there is no one simple answer – it depends on your business, your goals, your budget, etc. One tip we can give though is to work from the top down: What does your company do? What are your goals? It is crucial to have a clear sense of what you are aiming to achieve by implementing a new design technology. A couple of examples are listed below:

• A company wants to increase its sales so it implements an eCommerce feature on its site
• A university wants to improve its student interaction with its online learning facilities so they aim to implement a more interactive website using javascript and videos

To make the most of the myriad of available technologies, first decide what you want and/or need, then conjure a plan to best implement what is available. Identify the goals and objectives of the business, any boundaries which impact on your decision, and assess your timelines to choose a suitable direction in which to proceed. You may not need the best technology, you just need the best technology for you.

Youtube, who’s heard of it? Everybody according to a report released last month  [http://www.theaustralian.com.au/business/media/online-videos-approach-a-billion/story-e6frg996-1225916568105] which states more and more people in Australia and across the world tuned in online to watch the latest clips and videos. And, although it saddens me to see that Justin Beiber’s song, “Baby” ft. Ludacris has taken the crown for most watched video of all time, the first video ever to reach over 300 million views, we can turn this tragedy around and use evil for good.

So while you may not be a prepubescent teen lamenting on puppy love, you can incorporate video into your site to increase its popularity, regardless of whether you want to earn money, share knowledge or increase page views. To assist, we have come up with the following pointers on how to incorporate videos into websites:

• Make it snappy. Smaller chunks of videos attract a viewer’s attention and will hold it compared to longer single clips.
• Pop up windows don’t work. Instead, place the video in the page – this helps the user read the text in conjunction with the clip.
• Stick with interface conventions. Although you may have the urge to break the mould, don’t. Turning a play button icon into a hexagon may confuse and/or alienate your viewer.
• Ideally, avoid including advertising however if this is not possible choose your advertising videos wisely. Make sure your adverts relate to the website content.
• Finally, and most importantly, quality. Sound volume going up and down is never a turn on. When creating your video pay attention to the quality of your video and audio content

With 84% of brand and agency marketers currently using some form of online video in their marketing efforts, now is definitely the time to jump on the bandwagon and make your site noticed. But what do you think? Have we missed anything out? We’d love to hear your thoughts.

Recently, I have been working with a calculator that deals with finances. I’ll be the first to admit I’m not a financial genius and at times during this testing I found myself double-checking over the meanings of various aspects and outputs throughout the calculator. I wasn’t the only one; throughout the testing a number of participants could not properly articulate what the output actually meant.

Initially to combat this, I had the genius thought of adding ‘?’ symbols where there were issues for the participants, but the range of areas where these could be added were huge. By the end of the testing there could have been ‘?’ symbols all over the place, which in itself creates clutter and hence the usability of the application deteriorates.

So I pose the question: “How much help is too much help?” At what point do we draw the line on how much information we can give to users and just say “if you don’t get it by now, you’re probably not ever going to get it”? In this case it is important to assess who you want to use your interface. Should it really be a case of teaching whilst users are interacting, or should the ‘?’ icons merely be there for guidance?