Refreshing Research

iPhone - A Diagram of Taxonomy

 

Being a firm that specializes in producing marketing strategies by gathering and analyzing data, the presentation of complex information in a clear and easy to understand format is always at the front of our minds.

We LOVE to use pictures, charts and diagrams to communicate to our clients - a simple graphic is so much easier to digest than paragraphs of text.  

Which brings me to this gem we found.  The iPhone is a complex beast if you think about it.  So many components and manufacturers are involved, not to mention internal and external stakeholders, distribution and promotion methods.  

What would all that information look like if it were to be diagrammed?   Well, it would look huge actually.

Taking inspiration from the work of Henry Beck (he is the father of the modern London Underground map - check out our post from earlier this year) Ben Millen has produced a way of showing "the analysis of the device, the corporation, the vast network of shareholders, technology and the distribution infrastructure" in two mind-blowing charts.

Millen describes these diagrams to be more like maps, and has produced two different versions.  The first focuses on the physical iPhone device whereas the second is more of a cultural breakdown and impact of the Apple product.

Of course, the sheer volume of information contained within these maps is hard to comprehend - but that's half the point of this project.  Have a look at the maps, and let us know your thoughts.

 Click to Englarge

Click to Englarge 

Usability Debate: Should You Keep All of Your Important Content Above the Fold?

 Above the fold - all content is visible without needing to scroll.

There is an ongoing debate between usability experts over where content should be placed on web pages. Some, such as Jakob Nielsen, argue that all important content should be placed above the fold; meaning the area of the page that the user sees before scrolling. Others argue that this heuristic is no longer important because users have become accustomed to scrolling and will find the content regardless. So who is right in this debate?

Jakob Nielsen sites a recent study he conducted which showed users spending 80% of their time above the fold. He argues that it's not a matter of scrolling; rather, users lose interest or find something else to click on the longer they are on a page. Another usability professional, Joe Leach, sites numerous studies he has conducted in which users only had a problem with the fold on rare occasions.

 Below the fold:  user needs to scroll to read all content.

In our usability tests we have found that while users are comfortable with scrolling and will usually find the content they are looking for, keeping the important content above the fold increases the overall usability of the site. Most users read web content in an F pattern, meaning that they will read the first line or two of text and then quickly scan the rest of the page instead of reading every word. Graphics and hyperlinks tend to catch the most attention, since they serve as visual cues that quickly explain the content and tell the user where to go next. We have found that users will often click on the first link that could possibly take them to where they want to go or will only pay close attention to the top of the page and leave if it's not immediately clear that they're in the right place.

 Geico - the most important info is above the fold (the form to get a free insurance quote)

 In my opinion, the debate over where content should be placed ultimately depends on the amount of content that needs to be displayed. You certainly want your layout to appear professional and uncluttered, so if you have a lot of content then it is certainly acceptable to place some of it below the fold. However, you should make sure that there are visual cues to show the user that there is additional content on the page. Have some text or a graphic that begins above the fold and goes on below the fold and avoid the use of white space and horizontal lines in this area. A word of caution though; if you decide to place a lot of your content below the fold, be sure to provide a clear and concise summary of the page at the top so users know whether or not they are in the right place.

The bottom line is that users don't want to waste time searching for their desired content. Keeping the most important information above the fold helps users find that content quickly. The further down the page it is, the less likely it will be seen. Remember also that your website is an extension of your brand, so it would be unwise to cram as much content as possible above the fold for the sake of a heuristic.

Stew's verdict: The most important content should be placed above the fold whenever possible, but not at the expense of a clean layout.

Evolving the Interface: What's the Future of the Mouse?

 

Color Me Badd.  They used a mouse, just like you.

Many of us use a mouse as our main interface with a computer and software. 

We've been using this same input mechanism for the last 20 to 25 years.   Given the rate that technology is advancing, you perhaps would expect to see huge leaps in interface design, but this hasn't really been the case.

Sure, many of us use touchpads on our laptops, but in a lot of cases the touchpad simply replaces the functions of a mouse.  While the medium looks different, the functionality remains the same.

 

Apple has evolved touchpad, and more recently mouse, functionality by allowing fingertip gestures to carry out additional functions such as scrolling, zooming and moving/opening new windows.  But still, the core functionality piggy-backs technology that's a quarter of a century old.

The folk at 10/GUI are rethinking how humans currently interact with computers and software with a goal of evolving the process.  10/GUI do note that a radical change in input mechanic will mean that software will have to be designed to take advantage of this.  Their proposal isn't simply a replacement mouse, it is a whole new way of interacting.  

Have a look at this 8 minute video and be sure to read the comments below - there are a ton of great points for and against the technology. Let us know what you think!

 

10/GUI from C. Miller on Vimeo.

Is your website usable in a mobile environment?

Each year more and more cell phones come equipped with Internet access. Whether it's a smartphone or a regular old cell phone, it's becoming harder to find one that is not capable of accessing the mobile web. With this increase in accessibility, more consumers are turning to their phones when they need to access something online and are not near a computer.

However, even though most cell phones provide Internet access, using websites on a cell phone can be a chore. Usability guru Jakob Nielsen conducted a series of tests on mobile sites last year and found that users only have a 59% success rate when using the mobile web, compared to 80% when using a desktop or laptop computer. Some issues such as the small screen, lack of a traditional mouse and smaller (and often non-QWERTY) keyboard are unavoidable. But even with these limitations, companies can improve their mobile usability by providing a mobile version of their website that is optimized for cell phone use.

Mobile websites should limit their functionality to the most common user tasks and keep graphics to a minimum. The use of Flash should be avoided since many phones (even the iPhone) cannot read Flash content. Restaurants tend to be a big offender of this, and on more than one occasion I have changed dinner plans because I could not view the menu or find the hours of operation when accessing a restaurant's website on my iPhone.

When accessing the site, users should be auto-routed to the correct version (full or mobile) based on the device being used. It is also wise to provide a link to the mobile site on the full website, and vice versa, just in case the user is not routed properly or needs to access functionality not available on the mobile site.

While having a mobile website will not solve all of the usability issues for mobile users, it certainly helps. Jakob Nielsen reports that users had a 64% success rate when using a mobile site verses a 53% success rate when using full websites. The type of phone also makes a difference; with the fancier, more hi-tech phones achieving greater usability. However, when designing for usability you should always design for the novice users and most basic devices.

London Usability: Tube Tied

 The London Underground, or The Tube (pronounced Teuwbe to the English), has been around in some form for 150 years.  

Since the mid 1800's, the landscape of London has changed dramatically. As the City expands, so does The Tube.  

A big part of being able to get around England's capital city firmly rests upon the usability of The London Underground map.  What used to be a collection of seven stations in 1863 , is now a network of over 270.

It's really interesting to see how the maps of the London Underground have changed over the years - the rapid increase of passenger stations left the maps clustered and confusing.  Obviously, for the sake of usability, the maps changed from accurate geographic depictions to stylistic yet functional reference materials.

Behold...

Here's The Tube in 1889.  The route is geographically accurate.   

 

In 1908 more stations and lines were added.  Colors and bold lines are used to make the map easier to read. 

In 1921 the map started to represent a spaghetti dinner as stations after station were added to the London Underground network. 

1926 saw a stylistic change in The Tube map.  For the first time, the background was removed leaving only the lines of the Underground.  Things still look cluttered though - the station names look remarkably close together making the map hard to read.

 Now, 1933 is pretty much when things were turned on their head.  Harry Beck comes up with the genius idea of removing geographic scale from the map in favor of readability and usability.  BOOM!

There haven't been any radical departures from the above design in the last 80 years.  Every now and again the map was redesigned, but due to issues of usability they reverted back to a design more in line with Becks.   

The map below lost it's color.  That makes tube routes difficult to distinguish.  But it was 1940 and there was a war going on.  Rationing and cutbacks were everywhere - even print and paper quality took a hit.  We'll let the London Underground off on that one.

The redesigned tube map in 1959 is interesting. The tube lines follow horizontal and vertical paths only...unlike the 1933 design which included diagonal lines.  Notice how the bold lines and bold text give the map a claustrophobic appearance?  

The 1963 version of the map added back diagonal lines, but eliminated curves.  This design is much harsher and as a result it is harder to read.  Needless to say, this version didn't last long.

Let's fast forward to today.  As you can see there are a lot more stations on the map.  Icons have been added to the map to show stations with wheelchair access.  Also, the map contains banded shaded areas.  These represent tube zones to allow passengers to more accurately estimate the cost of their journey.

 There have been a lot more designs over the last 100 years or so.  Here is a fully comprehensive list of tube maps.

The successes and failures of various versions of the London Underground map were based on visual appeal and clarity.  The same logic can be applied to products and websites.  Clear labeling, distinguishable colors and simple interfaces always promote usability whereas an overabundance of options, cramped UI and colors of low contrast do not.

Now take a look at those maps again.  Which one do you think is easiest to read?

Everyone is different

Last week we spent a couple of days conducting website usability labs in Norman. We’ve done labs before, but never before was it so apparent that everyone uses websites differently. We determined that there are three distinct ways in which people look for information on websites.

• Navigators – These folk look at menu options and hyperlinks first and read content second.
• Readers – These guys look at everything. They read a web page like a book and tend to be process-oriented people. Pictures and graphics do not catch their attentions.
• Searchers – Menus, hyperlinks and text mean nothing to searchers. They prefer search boxes to find their information.

The people in the labs last week were equally split between navigators and searchers; the readers were few and far between. This comes to no surprise to us…who has time to read big blocks of text these days?

Of course, we as research nerds found this intriguing. We always build our usability reports to appeal to different types of people, because we know our clients will use pieces of our reports differently. Each of us at Evolve navigate through information differently, so we each took a look at our reporting layout to make sure we’re appealing to as many people as possible.

When designing your website, pay attention to how you can make it easier for everyone to find information. Remember to clearly label menus and hyperlinks and provide a search option if your website contains a lot of pages and information that make it hard to navigate.

Usability for the Visually Disabled

Over the weekend I installed Snow Leopard, Apple’s new operating system, onto my trusty MacBook. During the install I was reading about the new features and one of them reminded me of an important, often overlooked, usability principal: websites should be usable for people with visual disabilities.

Apple achieved this with Universal Access. It includes support for over 40 Braille displays and advanced screen reading technology that not only reads the text on the screen, but tells the user what items they touch with the mouse and how the items are arranged on the screen.

Apple has done its part, but if individual websites aren’t usable for the visually disabled, Universal Access can’t help much. Many websites are graphics or flash-heavy and contain non-descriptive links that can be confusing to users relying on screen readers, magnifiers or Braille displays. Images lacking descriptive ALT text or links that simply say “click here” may make sense to the average user, but if a user is relying on a screen reader all they will hear is “click here” and won’t know where the link will take them or what image is displayed on the screen. According to a study conducted by Jakob Neilsen and Kara Pernice, the web is three times more usable for users without visual disabilities than it is for users who are visually disabled.

So what does this mean for you and your website? The good news is that it is not very hard to improve the usability of your website for the visually disabled. Adding descriptive ALT text to your images, using descriptive text for your links and condensing content to avoid long blocks of text will go a long way in making your website more user-friendly. And the even better news is that users with visual disabilities will be more likely to stay on your site and conduct business with you.

Kudos to Apple for adding this technology to their new OS, and kudos to developers who design websites and software with visually disabled users in mind.

Further reading: Beyond ALT Text: Making the Web Easy to Use for Users with Disabilities

Of course my website is usable…

So, you’ve got a shiny new website and everyone in the company is exclaiming how “cool” it looks and how it will help you win business. Countless hours were spent deciding if the toolbar should be on the top or left side of each page, what color the text should be and how many, if any, pictures of the office should be posted. All that is over and now everyone in the company loves the new look.

But what kind of efforts went into making sure your new website worked for the user?

Many companies spend big money and time on website design that makes management happy, but overlook the most important piece of the pie – the user experience. Evolve uses proven methods to test the usability of your website and makes sure it supports the brand you’ve worked so hard to build.

When conducting a usability study, Evolve works with you to understand all the possible scenarios your end user could experience. We typically use two methods for usability studies – Usability Audits and Usability Labs.

Usability Audits involve dissecting your site as if we were the users. We use an extensive checklist and heuristics to evaluate every aspect of your site and its usability. Our report includes all the areas that could cause your users problems, prioritized by level of severity, and our recommendations on how to improve your site.

During Usability Labs – not to be confused with focus groups – we interact with actual users and potential users one-on-one.

• Participants are asked to complete several real-life tasks, such as finding information about a specific product or service, determining why your company is better than your competition and locating the best way to ask you questions about your products and services.
• The usability lab moderator observes each task and interviews the user about his or her overall impression of the site and any suggestions to make the experience more usable.
• Evolve uses some pretty cool technology to record each computer session and the user’s face as he or she completes each task. (You have to admit, being able to review individual mouse movements, clicks and facial expressions is pretty awesome and goes a long way in analyzing a website’s usability.)  A live feed of this can be sent to a client in a separate room!

We’ve come across some firms who recommend traditional focus groups to assess website usability. While focus groups have a place in research, we warn against relying on them for usability studies because it’s difficult to measure individual user behavior this way. Users cannot be observed in-depth as the tasks are being carried thus diluting the findings.

David Hamill, an independent usability specialist in the UK, makes a great argument for not using focus groups for usability studies. Read more about his views here.

As a side note, we firmly believe that the client should be as involved as possible with website usability.  A great example of how Evolve recently worked with developers and designers can be found on our usability blog.

Good sitting-in-the-airport-with-nothing-to-read reads:
The Use and Misuse of Focus Groups; Jakob Nielsen
Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics; Tullis & Albert
Don’t Make Me Think: A Common Sense Approach to Web Usability; Steve Krug

Flash animations – more harm than good?

I recently watched an American Marketing Association webcast about website usability.  An interesting point was made:

It’s a great point – and one with which a usability purist might agree.  However, I’m all about integrating good, professional looking design with usability so my viewpoint is a little different.

Careful use of Flash can result in vibrant and slick looking websites – it can make an organization stand out from the crowd.  If the Flash piece does not interfere with the user completing their desired action, then shouldn’t the question really be:

Of course, this isn’t a black and white matter.  Here, we are assuming that conversion=good usability, which isn’t necessarily correct.  I’ve bought products online from nasty websites (i.e. very unusable) before – I’m still counted as a conversion despite the my poor usability experience (I haven’t returned to half of those websites, though).  

To add more gray/grey to the issue – when designing for usabilty, there must be goals for the website (e.g get people to sign up for service).  Each part of the website needs to be assessed as to how it contributes to the goals.  

The purpose of Flash needs to defined.  

• Does Flash execute core functionality of the website – if so, how does this affect users who may not have the latest version of Flash or who are viewing on mobile devices?
• Is the purpose of Flash to compliment the design – is Flash nothing more than a tool to make the site look good?
• Is the purpose of Flash to grab attention – is it being used to divert the user to an important feature of the website?

There is more to defining the role of Flash than that, and the “correct” answer varies by industry, audience and website goal.  Of course, the only true way to answer the Flash/No Flash debate is to conduct user testing.  Asking typical users of your website about their experience should ultimately help you settle the argument.  If they don’t like it, cut it. 

What do you think?

The evolution of websites

I want my MTV…lookin’ good!

It’s always fun to look back at websites to see how they have changed (or not) over the years.

Designers and developers now have more tools and techniques at their disposal then they did back in the “early days.”

Utilization of CSS has made it a lot easier for designers to keep web pages consistent in terms of look, feel and formatting (and therefore enhance usability) and more advanced authoring tools have allowed websites to tap in to rich media-driven techniques.

However, one could argue that the new design technologies could actually make websites harder to use than before. It certainly is food for thought.

Anyway, here is a great article featured on freelancing design website, WakeUpLater.com. The articles shows how some websites have changed over the years including; Amazon, Nike and Starbucks.

If you really want to start looking for old versions of websites, be sure to check out The Way Back Machine – a great repository of archived websites. You’ll be hard-pressed not to find what you’re looking for!

[digg=http://digg.com/design/The_evolution_of_websites]