Search results for navigation

Warum der Kunde König ist – Benutzerfreundlichkeit und Kundenfokus im Internet

by on 14. Aug, 2011 in Usability, User Experience

Artikel für den BAKOM Newsletter

Websites werden immer komplexer, Benutzerinnen und Benutzer zusehends erfahrener und anspruchsvoller. Benutzerfreundlichkeit (Usability) und Markenbildung (Branding) sind zu entscheidenden Erfolgskriterien einer Website geworden. Doch was macht eine Website mit hoher Usability und starkem Brand aus?

Vera Brannen, Geschäftsführerin Brannen Usable Brands

 

Die erfahrenen Benutzerinnen und Benutzer

Kundinnen und Kunden lassen sich heute nicht mehr durch schönes Design und Werbeversprechungen überzeugen. Ihr Urteil über eine Marke wird immer stärker auch von der Bedienbarkeit der Website und dem Online-Kundenservice beeinflusst. Wird er durch lange Ladezeiten, komplexe Navigationsstrukturen oder unverständliche Bestellvorgänge verärgert, wird leicht das gesamte Produkt oder gar die Marke abgelehnt: Der vermeidbare Frust der Kundschaft kann mit keinem noch so grossen Marketingbudget wettgemacht werden. Aber wie kommt es, dass nach wie vor so viele Sites mangelhaft sind?

Betriebsblindheit versus Kundensicht

Häufig reflektieren Websites die interne Sicht des Anbieters. Zum Beispiel werden interne Unternehmensstrukturen nach aussen gespiegelt, Texte sind im Fachjargon formuliert oder hochkomplexe Strukturen werden abgebildet. Dabei müssten in allen Bereichen der Brand, die unternehmerischen Ziele sowie die Kundenbedürfnisse in den Fokus aller Aktivitäten gestellt werden. Doch wie gestaltet man eine effiziente und effektive Website, mit der die Kundinnen und Kunden zufrieden sind?

Fokus auf die Kundinnen und Kunden

Funktionalität und Struktur der Website müssen sich an den Bedürfnissen des Kunden ausrichten. Je besser sie ihre Kundschaft kennen, desto gezielter kann die Website konzipiert werden. Wer sind die Kundinnen und Kunden genau? Was sind ihre Bedürfnisse und welche Fragen müssen für sie auf der Website beantwortet werden? Wichtig ist auch, die Anforderungen der Kundschaft im gesamten Produktlebenszyklus zu kennen. Hierzu ein Beispiel einer Versicherungswebsite:
  1. Ein Neu-Interessent sucht Informationen zu einer Versicherung, will Vorteile klar erkennen, Konkurrenzvergleiche durchführen können und Vertragsbedingungen einsehen;
  2. Der informierte Benutzer möchte rasch und sicher online seine Transaktion abschliessen oder Kontakt zum geeigneten Berater aufnehmen können;
  3. Der Versicherte möchte im Schadensfall schnell seine Meldung einreichen, unterstützt und beraten werden.

Dieselbe Person, dieselbe Website und verschiedene Bedürfnisse, denen die Website allen gerecht werden muss.

Der Brand

Doch auch wenn Funktionalität und Usability gut gelöst sind, reicht dies heute nicht mehr aus – notwendig ist zudem auch eine passende Marke. Denn der Auftritt im Internet muss nahtlos zum Firmen- und Produktimage passen und Erwartungen und Bedürfnisse der Zielgruppe an die Marke erfüllen und verstärken. Online Branding hat eine zweifache Integrationsaufgabe: Erstens muss der Internetauftritt auf dem Produkt- und Geschäftsprofil sowie der Corporate Identity aufbauen. Und zweitens muss berücksichtigt werden, dass auch Dienstleistungen, wie die Informationsbereitstellung, Bestellungsabwicklung und Kundenbetreuung einen Teil der Corporate Identity darstellen und die Wahrnehmung einer Marke stark beeinflussen.
Ob Kundinnen und Kunden also z.B. spielerisch in einem Irrgarten Punkte sammeln können, und dann mit Überraschungseffekten zum Produkt geführt werden, oder ob den Benutzerinnen und Benutzern plakativ und nach Art eines Beipackzettels “Information pur” präsentiert wird, hängt nicht nur davon ab, welcher Kundschaft ein bestimmtes Produkt präsentiert wird, sondern auch mit welchem Brand-Inhalt, welcher “Corporate Identity”, die Gesamtleistung präsentiert wird.

Kurzum: Die visuelle und emotionale Markenkommunikation kann von der Bedienbarkeit der Website und den angebotenen Dienstleistungen nicht getrennt werden. Erst gute Usability und zielgruppenkonformes Branding schaffen oder verstärken das Markenbild bei der Kundschaft. Sind die Kundinnen und Kunden zufrieden, gewinnen sie Vertrauen. Und Vertrauen ist eines der stärksten Kundenbindungstools, um Image und Umsatz zu fördern.

Checkliste zum Online-Auftritt von KMU
Wie muss ein Online-Auftritt gestaltet sein, damit er sicher und vertrauenswürdig ist und dies von den Kunden auch so wahrgenommen wird? Diese Frage wird in der Checkliste “Online-Auftritt von KMU” beantwortet, die Brannen Usable Brands im Auftrag des Staatssekretariates für Wirtschaft (Seco) und dem BAKOM erstellt hat. Die Checkliste bietet Hilfestellung für Konzeption, Design und technische Implementierung eines Online-Auftritts.

 

Warum der Kunde König ist – Benutzerfreundlichkeit und Kundenfokus im InternetBild-Quelle: Roland Stahel, Brannen Usable Brands
Read full story • Comments { 0 }

Navigation Part 4: Navigation and the customer life cycle

by on 19. Aug, 2008 in Information Architecture, Usability

One thing to consider when defining the navigational structure is the different target groups.
The other important thing is the stages of the customer life cycle.

What do I mean by this? Let’s go on the customer journey:

1) The first time visitor
The customer visits your site. He wants information about your products, prices, service and so on. He needs all this at his finger tips. Try to imagine all the potential questions a customer might have and make sure to answer them – and that those answers are easily accessible.

2) You are lucky
Your potential client has done all his online research and you are the lucky winner – that is why he is back. This usually happens not within the same day. So make sure that the returning customer is able to find the product again fast. In some instances it makes sense to offer a wish list or basket functionality.

3) The unlucky one
The product unfortunately did not get delivered properly. Or in the case of an insurance company – your client had an accident. So this is still the same website user but he again has totally different needs. He is rather likely upset right now and needs help and support fast. Make sure he can access it directly. And yes – in case the answer is a phone call – offering a real voice, without long waiting lines can increase the customer satisfaction and therefore the perception of your brand in many ways.

A good exampe offers Norwich Union. It is very easy to receive a free quote. In addition they offer the button “Existing Customers” on the upper right hand side where clients can “Make a claim”, “Manage their policy online” and much more.

Usability Navigation

Read the entire series:

Part 1: How to structure content
Part 2: How many navigation points
Part 3: Dynamic or static navigation
Part 4: Navigation and the customer life cycle
Part 5: Global Navigation

Read full story • Comments { 0 }

Navigation Part 3: Dynamic or static navigation

by on 24. Jul, 2008 in Information Architecture, Usability

For all of you who are not sure what the difference is, let me explain briefly:

A static navigation is always visible and when you click on the first level navigation the items of the second level navigation appear and stay visible.

A dynamic navigation only appears when you hover over it with the mouse and then disappears again.

There are also combinations of the two on the market.

Static navigation:
The advantage is that after the user has clicked on the first level entry all the second level entries stay visible and the user has always the overview of all the other navigation points in that category. So if you assume that your users wish to browse within that category it is advisable that you give the user the overview.

Usability static navigation

Dynamic navigation:
The dynamic navigation has the benefit that you have not to give up any screen real estate for placing the navigation so you can full the entire website with content. As long as only one drop down opens it is usually easy to navigate. The user can also “preview” the content of all subnavigation items without clicking on them which can be very convenient. However, as soon as you have several sublevel menus it becomes more difficult to control the navigation with the mouse.

Usability dynamic navigation

Combination of dynamic and static navigation:
An excellent example for a combination of the two is the website of John Lewis. The drop down navigation is even grouped in categories and after the user has chosen an item a static left hand navigation menu appears with further details.

Usability dynamic and static navigation
Read the entire series:
Part 1: How to structure content?
Part 2: How many navigation points?
Part 3: Dynamic or static navigation
Part 4: Navigation and the customer life cycle
Part 5: Global navigation

Read full story • Comments { 0 }

Navigation Part 2: How many navigation points?

by on 08. Jul, 2008 in Branding

It is very pleasing to hear in many concept workshops – “A maximum of 7 navigation items, correct?”
This truly shows that core elements of usability have made the round and that people are familiar with them.

However, real life is not always that easy. Let’s look at some issues:

The seven point rule:
It is true and has been psychologically proven that the human brain best can recall 7 items and that the brain capacity after that becomes lower. This is certainly true for example shopping lists. However, from this also the rule: No more than 7 navigation items has been deducted.

Is it applicable? Yes and no.

It certainly makes sense to try to reduce navigational points and keep the navigational structure precise and clear.

However, what are some exceptions?

# Familiarity with a different structure in the “real world”:

For example news sites: Users are familiar with the categories of their daily newspaper such as news, entertainment, sports, weather etc. There it is advisable to retain the structure readers are familiar with.

usability_navigation_1.jpg

# Simply too much content

Sometimes it also can help to add an additional top level item to avoid that the site will have too many navigational hierarchies.

# Linking to sub-sites

For example yahoo links to many sub-sites from its main portal and offers a link to view all other categories. This is another way to structure a huge amount many companies are following: Showing the main entries to everybody and adding an additional link to view all navigation items.

usability_navigation_2.jpg

 

usability_navigation_3.jpg

 

Read the entire series:
Part 1: How to structure content?
Part 3: Dynamic or static navigation
Part 4: Navigation and the customer life cycle
Part 5: Global navigation

 

 

 

 

Read full story • Comments { 0 }

Navigation Part 1: How to structure content?

by on 23. Jun, 2008 in Information Architecture, Usability

In this series I will talk about different topics regarding navigation I have been asked over the last years.

Part 1: How to structure content
Part 2: How many navigation points
Part 3: Dynamic or static navigation
Part 4: Navigation and the customer life cycle
Part 5: Global navigation

First of all you need to define all the content:

  1. your target group wants to know
  2. is important for your business to be communicated

Then the crucial question is what will your target group be looking for? What are their expectations? Are there structures they are familiar with because all of the competitors are following a similar pattern?

There are several ways to structure content – By:

  1. topic, genre, product groups
  2. target group
  3. activity
  4. search patterns

1) Topic, genre, product group navigation
As the title implies – this makes mainly sense when you are selling products or services which can be grouped logically.

navigation_topic_1.jpg

navigation_topic_3.jpg

2) Target group navigation
This one is very helpful when you offer information that is of interest to particular target groups and the all need to find information fast and directly. You often see this on websites of major banks with navigation points such as:
Private Banking | Business Banking | Press | Investors | Jobs
Sometimes it is very helpful to offer this kind of entry on the homepage in case your main navigation is structured by topic. You see this rather often on university sites. See the two examples below:

navigation_target_group_1.jpg

navigation_target_group_2.jpg

3) Activity based navigation
This one is more prominent in software where often activities are more prominent than categories since users want to fulfil certain tasks.

navigation_activity.jpg

4) Navigation based on search patterns
In case people might look in different ways for a product this navigational structure is suitable. It basically means that for example products in a gift store are searchable by price, by category and by gender.

navigation_search_pattern.jpg

Sometimes combinations of the above are the best approach. However, always make sure to label the categories precisely with a short verb and noun and avoid jargon and long labels.

Read full story • Comments { 0 }

Usability and e-commerce Part 5: Check out process

by on 30. Apr, 2008 in Usability

The worst that can happen to you is to lose your customer during the check-out process.
How to avoid the most serious obstacles:

  1. Availability
    Inform the client before the check out process that an item is currently not available. There is nothing worse than filling in several forms and being informed in the last minute, that you currently can not purchase the product. Show the availability status on every product page.
  2. Payment methods
    Offer several payment methods such as PayPal, Visa and MasterCard. This increases your chance that the client will continue the check out process. Inform him that the data is transmitted secured. In case you have received a “Trusted Shop” certificate, display it prominently. It increases trust.
  3. Back Button
    You just quickly wanted to go back one step to check one entry field and then all your previously entered data was gone. Make sure that the customer always can go back and forth without loosing any entered data. It is tedious enough to type in your card number once.
  4. Credit Card rejection
    Imagine your credit card is rejected. That is always a very unpleasant moment. Tell the client with a friendly easy to understand error. Inform him of what might have gone wrong:
    - The address needs to be the same as on the credit card.
    - The name needs to be the same as on the credit card.
    - What is the CVC Code and where can he find it.
    - Could it be that there is a daily limit on the card? (in case you are selling expensive items)
    - How can he reach the hotline in case it still does not work.
  5. Forced registration
    Don`t force your customer to register in order to simply buy something. To remember his contact and financial data is an extra service you can offer and the return client can benefit from. However, many customers might not be return customers and some simply hate to have to recall login data or to have their data saved and accessible online.
  6. Cross selling
    Cross selling is great, we all agree. However, don’t be too pushy during the check out process. Customers might either get confused or really turned off. Do your cross selling when show casing your other products or after the check out.
  7. Hidden costs
    Honesty always pays off. Show your customer as early as possible fees for shipping, taxes, handling fees and so on. Nobody likes unpleasant surprises at the very last minute.

Check out the entire series:
Part 1) Navigation and homepage
Part 2) Product overview
Part 3) Product detail page
Part 4) Search
Part 5) Check out process

To come:
Part 6) The shopping basket

Read full story • Comments { 0 }

Usability and e-commerce Part 4: Search

by on 15. Apr, 2008 in Usability

Having a powerful search engine within your site might be the best investment of your money.

The most difficult task is to define the technical requirements your search engine needs to fulfil. Once you have decided on those, 3 major points for the design of your search interface are:

  1. Place the search clearly visible and offer the search entry field on every page.
  2. Make the general search interface as simple as possible. You might want to add an additional filter option such as availability, gender or product category.
  3. Don’t go overboard with defining the detailed search. Studies show, that not too many people ever use it.

And what are people looking for in the result page. 5 points

1) Inform the users of what they typed into the search field.
2) How many results were produced
3) The results should have a clear title and a short summary
4) Show where the result is placed within the site (URL)
5) Let the customer filter the results (i.e. from cheapest to most expensive)

e-bay for example lets you filter the search results, shows an image and a title and in addtion even offers the option to save the search criteria.

Usability and e-commerce: e-bay search results

Check out the entire series:
Part 1) Navigation and homepage
Part 2) Product overview
Part 3) Product detail page
Part 4) Search

To come:
Part 5) Check out process
Part 6) The shopping basket

 

Read full story • Comments { 0 }

Usability and e-commerce Part 3: Product detail page

by on 08. Apr, 2008 in Usability

Once your customer is on a product detail page he made it half way. Now it is important that the customer can get an understanding and feeling for the product, try to make it tangible. 5 points which are important for product detail pages:

  1. Good product visualisation is crucial. Show the products from different angles, the front and the back and allow the user to zoom in. Show different colour versions. Close ups are especially important where the texture or surface of the product is important such as clothing or jewellery – make the product as tangible as possible. Let the user “touch” it.
  2. The presentation on all the product detail pages should follow the same pattern throughout the site so that the user can learn your site and get accustomed to it.
  3. The most important product details need to be in the visible area without having the user to scroll down.
  4. This is also a great time for cross-selling: Show the customer what other users bought and make pro-active recommendations. It is better to make recommendations on behalf of the behaviour of other users than by yourself. Say: Customers who bought A also bought B instead of We recommend B for people who are interested in A.
  5. The user needs to be informed about the availability of the product. (in case this has not happened on the overview page yet).
  6. If your delivery times are much faster than business standards or much longer mention it.

One really good example is again Esprit.

Sizes, colours, product illustration including zoom and front and back images, addtional product information, availabilit, cross-seeling all is in place

Usability & e-Commerce: Product Detail Page EspritCheck out the entire series:
Part 1) Navigation and homepage
Part 2) Product overview
Part 3) Product detail page

To come:
Part 4) Search
Part 5) Check out process
Part 6) The shopping basket

Read full story • Comments { 0 }

Usability and e-commerce Part 2: Product overview page

by on 04. Apr, 2008 in Usability

After you have defined your product categories and how to structure them (see Usability and e-commerce Part 1) you are ready to define the product pages. Let’s start with the product overview page:

  1. It is recommended, that the product overview pages follow all a consistent structure. This gives the user the chance to learn your site and with continuing navigation he can orient himself faster.
  2. The amount of products presented should allow the user to gain a quick overview.
  3. The most relevant questions the user has at this stage should be answered. This allows faster scanning of the products and saves the user possible disappointment on the individual product page itself. This includes the listing of the price and availability.
  4. Especially with rather technical or complex products, an online product comparison option is essential to avoid lots of work for the call centre.
  5. In addition, sorting functionalities support the user to “customise” the results to his personal needs, such as price, distance, weight, colour etc.

Let’s have a look at two examples buying a Sony Laptop and a new Esprit Jacket:

On the Sony Laptop overview page, the user receives all the essential data he needs.
They even consider the two target groups returning and new customer. The returning one can add the product directly to the shopping cart the new one can add the product to a wish list.
There is the option for product comparison and a sort option.

Usability Sony Product Overview Page

And the product comparison site: The user can delete rows or columns, start over, get the product advisor and create a PDF for print out and later use.

Usability Sony Product Overview Page

On the Esprit page as well, the product overview page answers the main questions such as: material, prize, availability, colour selection and new arrivals.

Usability Esprit Product Overview Page

Check out the entire series:

Part 2) Product overview

Part 3) Product presentation

Part 4) Search

Part 5) Check out process

Part 6) The shopping basket

 

Read full story • Comments { 0 }

BBC’s Web site relaunch – topics regarding usability and branding on their new homepage

by on 02. Apr, 2008 in Branding, Usability

On March 31st the BBC launched its new Web site and since then they have received over 1600 comments in their blog. Many users are complaining about the relaunch.

Looking at their new homepage, I noticed three main points regarding usability and branding:

 

#1 Fast access to information on homepage

The main purpose of visiting a news Web site is usually to quickly learn about what is going on in the world or in the personal field of interest – for example sports. This means users want to be able to quickly scan the site and then pick an article.

BBC Homepage Usability

It is exactly this which is impossible on the new BBC home page. Counting the visible news (at a 1024 resolution) entries on the home pages of major news sites today:

  • BBC: 9 articles (not counting weather)
  • CNN: 19 headlines
  • NY Times: 18 headlines
  • Yahoo: 14 headlines

Most other news sites make it much easier to get a quick overview.

When the user personalizes the homepage he can get up to about 12 visible entries without scrolling. However, studies have shown that usually only a small percentage of users make use of personalising a site. And why can the user not move the big picture on top; the one that is actually taking up most of the space?

Studies have shown that a minimum font size of 12 px and a bigger line spacing leads to the best results in reading efficiency and information transfer. So this is solved nicely on the new homepage. However, especially on the homepage there is too much unused space. For example the weather and blog quote are huge compared to the information they transfer.

BBC Homepage Usability

#2 Accessing other topics via the homepage

In addition, the user has no chance to quickly access the topics provided by BBC. The user has to scroll to the end of the home page to find these:

BBC Homepage Usability

These links are provided as a general navigation on almost every other news Web site. They allow easy and convenient access to the user’s field of interest. BBC offers those links also on all its subpages. Why not on the homepage?

For example Yahoo has solved those points on their homepage in a good manner: The navigation to the left with easy access to the main topics and lots of information in the content area.

Yahoo homepage

#3 Visual consistency and branding

While the homepage looks like a clear attempt in trendy design with rounded corners, fading colours and light effects all the subpages have a totally different look and feel. They are flat 2 dimensional design, squared corners, no shading. What does BBC stand for?

BBC Subpages

Read full story • Comments { 0 }
Older Entries »