Archiv für die Kategorie ‘Erfahrungsberichte’

6 Schritte, wie man beim Design von Websites vorgehen sollte

Toller Artikel darüber, wie man prinzipiell an Design herangehen sollte, um nicht vom Weg ab zu kommen. Im Prinzip ähnelt dieses Vorgehen dem Business-centered Design Modell.

6 Schritte, die man beim Design durchlaufen sollte:

  1. Decide on a key business objective.
  2. Identify the UX factors that will help achieve the objective.
  3. Propose design research to improve the UX factors.
  4. Measure the benchmark state of each UX factor.
  5. Track changes in each UX factor until target values are achieved.
  6. Test if the business objective is being met.

Den ganzen, lohnenswerten Artikel findet man bei UserFocus:

The Beginners’ Guide to Benchmarking User Experience.

  • Share/Save/Bookmark

Design von Hyperlinks

Interessanter Artikel was es bei der Gestaltung von Links (eigentlich dem essentiellsten Interface Element) zu beachten gilt.

Damit die Zeit von “hier”,”mehr erfahren” und “jetzt hier klicken” aufhört ;-)

Designing Hyperlinks: Tips and Best Practices.

  • Share/Save/Bookmark

Studie von Usabilia: Wie schafft man Vertrauen in Websites binnen 30 Sekunden

29. September 2010 Christian Becker Keine Kommentare

1. Press boosts credibility more than a testimonial

Press versus Users Users seem to value the opinion of the media about Mint more than testimonials by their peers. Take a closer look at the results

2. You can earn trust for free

Free We all like to try before we buy. An option to try a product or service for free seems to influence credibility as well. See where people clicked

3. Quote, quote, and quote

Free Mint is using quotes from different sources to boost their credibility. See which sources worked best

4. It’s all in the details

Pie-chart Even the smallest visual details got the attention of participants in the test. Zoom in on the details

  • Share/Save/Bookmark

Neue Studie zum Geschlechterunterschied bei der Web-Nutzung

  1. Women have surpassed men as online buyers and they spend more and their influencing is growing rapidly, in addition to the use of group buying or ‘flash sale’ sites eg. Social retail is an emerging area for women, due to their tendency to share and discuss with other others.
  2. Women spend more time online 8% globally than men and 30% more time on social networking sites than men.
  3. Women are motivated differently in their use of social networking sites like Twitter. Twitter adoption is equal or higher than men. Twitter is used by women more for conversation, to follow celebrities or to find deals and promotions. Men are more likely to post their own tweets.
  4. Social networking is emerging as a driver for women in the mobile sphere.
  5. Women are using online entertainment e.g. puzzle, board and card games and functional sites money management as much as men change in past behavior where health, apparel, baby goods.
  6. Cultural differences in emerging markets Asia, Latin America will always influence online behavior by gender- an important localization issue.
  7. Older women moreover men, are rapidly adopting social networking sites– and at the same intensity of younger women.
  8. Women are still attracted to health content, community and lifestyle sites. However women are outpacing men in some areas of finance and are actively engaging in male-dominated areas: adult content and gambling.
  9. Compared to men, women Bing users spend more time on Bing for search, than Google- and YouTube for video. Facebook, while visited more than men is unable to compete with regional social networking sites such as CyWorld in South Korea, in Russia, in Japan or StudiVZ in Germany, especially among older women.
  10. Women spend more time on Social Networking, Instant Messaging IM and Email than men globally.
  11. The embrace of social networking and its importance to women has significant implications for content and user experience.
  12. Women spend more time on photo sites and adopt photo sharing faster. Email usage is higher in the 45+ age group. Latin American women do more IM’ing than other women globally, with their use of email topping North American females.

viaDemystifying Usability : New Study- Gender differences in Web Usability.

  • Share/Save/Bookmark

Innenarchitektur VS Webdesign

Ein interessanter Artikel im Smashing Magazine, welcher die Disziplin “Innenarchitektur” mit “Webdesign” vergleicht und erstaunliche Parallelen offenlegt.
Kein Wunder, dass man Konzeptarbeit auch als “Informationsarchitektur” betiteln kann.

Den Artikel findet man hier:
Applying Interior Design Principles To The Web – Smashing Magazine.

  • Share/Save/Bookmark

Gute Online Umfragen (in 6 Schritten)

Designing effective web surveys is really about following a process with 6 steps:

  1. Formulate your research question.
  2. Identify your population and sample.
  3. Design the questionniare.
  4. Pilot test the questionniare.
  5. Collect the data.
  6. Analyse the data.

Problems occur with surveys when people skip one of these steps.

Formulate your research question

Surveys provide information to solve problems. So before you begin your survey you need to be able to confidently articulate the specific problem that you’re trying to solve.

A typical problem I’ll hear from people is, “I want to know what people think about our new product.” Although laudable, this is too vague a problem to design a survey around. What specific problem are you trying to solve and what new information do you need to solve it?

Further questioning might reveal that the product is suffering from an unduly high rate of returns. So the problem might be better articulated as, “Why do people return our product shortly after buying it?” This helps us realise that we need to create questions that identify people’s initial expectations about the product and how the product falls short of these expectations — questions we might have missed if we had stayed with the vaguely articulated problem.

A clearly stated problem statement also helps us distinguish between information we must gather and information that is ‘nice to have’ — which means we can also use it to keep our survey short.

Identify your population and sample

All surveys are susceptible to error. Most people are aware of ‘sampling error’, the ‘plus or minus’ figure quoted with opinion polls. When we take a sample, we use a selection of people and hope that their views are representative of the whole population that we are interested in. We can use statistics to quantify the amount of sampling error in a survey but these statistics are valid only if the sample you have taken is truly random.

This is rarely the case, for two reasons. First, the research method you have chosen may exclude certain people (so-called instrument error). For example, using a web survey will exclude people who don’t have access to the web.

The second reason is that non-respondents are often different from respondents in a way that matters to the outcome of the study (so called nonresponse error). For example, imagine we devised a survey to measure people’s experience with the Internet. Imagine further that we send out the survey invitation by e-mail. It might be the case that novice users of the Internet are much more reluctant to click on a link in an e-mail message, thinking that messages with links are fraudulent.

Non-response error is a serious source of error with web surveys. This is because researchers tend to send their survey to everyone as it’s easy to do so.

For example, you may send the survey to 10,000 people on your mailing list and find that 1,000 respond. Although the sampling error will be small, the large non-response error is a serious source of bias. This is because those people who responded may not be representative of the total population — they may like your company more and so be more disposed to take the survey. In this example, the survey respondents are different from nonrespondents in a way that will affect the survey results.

In this example, it would be better to randomly sample 500 people from the 10,000 and aim for a 75% response rate (375). This is because a 75% response rate from a randomly selected sample is better than a 10% response rate from everyone. Remember that the key is to select from your population randomly. Whenever your response rate is less than 60%, you should be on the look out for non-response error.

Design the questionnaire

The survey itself may also be a source of bias. For more on crafting good survey questions, try 20 tips for writing web surveys.

Here are some common errors I’ve seen in survey questions:

  • Using unbalanced response scales.
  • Using response categories that overlap.
  • Asking vague questions.
  • Asking leading questions.
  • Asking nosy questions.
  • Using jargon or abbreviations.
  • Assuming people know enough to answer.
  • Asking people questions that require too much thought.
  • Asking double-barrelled questions.

Pilot test the questionnaire

A pilot test provides a way of finding problems with the survey before you invest in the cost of collecting data. You should never send out a survey without pilot testing it first.

Pilot testing is best done in two phases: in the first phase, you talk with the people who will use the survey results — the stakeholders. Because they have practical knowledge about the kind of data that are being collected, they can spot technical problems that you might miss.

You conduct the second phase of the pilot test with a sample of respondents. It is important to watch people fill out questionnaires in person rather than simply emailing them a link. That way, you can watch for signs that people are puzzled, check their understanding of certain questions, and see if they misinterpret instructions.

Collect the data

Once you’ve got this far in the process, all you should need to do is write an engaging invitation to get people to respond.

Assuming that you send out an email invitation, make sure that you include a relevant subject line and a recognisable email sender name so your invitation doesn’t end up in people’s junk mail folder. You’ll also increase the response rate if you describe the incentive, personalise the invitation and make it urgent (‘survey closes in 7 days’).

Two weeks is long enough to keep most surveys open as evidence shows that over half of survey responses arrive in the first day, with 7 out of 8 responses within the first week(opens in a  new window) (PDF).

Analyse the data

You’ll use two types of statistics in your analysis:

  • Descriptive statistics: Summarises what’s going on in your data
  • Inferential statistics: Helps you make judgements of the probability that an observed difference between groups is a dependable one or one that might have happened by chance.

Most of the online survey tools, like SurveyMonkey, make it straightforward to calculate descriptive statistics for your survey and will even create graphs for you. To carry out inferential statistics, you’ll need to export the raw data and do some number crunching in a program like SPSS.


  • Share/Save/Bookmark

Anzeigen als Aufmerksamkeitsbremser

heise online gilt als das bedeutendste IT-Portal in Deutschland. Eine Analyse mit m-pathy zeigte unter anderem, welche Auswirkungen die Platzierung von Anzeigen auf das Leseverhalten der Nutzer haben kann. Dabei wurde ein bekanntes Phänomen bestätigt: Scrolling wird dann zum Usabilityproblem, wenn ein grafisches Element einer Seite genau mit dem sichtbaren Bildschirmbereich abschließt. Viele Nutzer denken dann irrtümlich, sie haben das Ende der Seite erreicht.

Anzeigen als Aufmerksamkeitsbremser

Anzeigen als Aufmerksamkeitsbremser

Anschaulich wird dies bei einem Vergleich von drei unterschiedlich gestalteten Artikeln: Das Bild zeigt die Heatmaps von Mausbewegungen. Der orangefarbene Rahmen markiert den sichtbaren Bildschirmbereich. Die Analyse zeigt für den Artikel in der Mitte, dass die Mehrheit der Nutzer nur den ersten Absatz wahrgenommen hat.

Die Werbeanzeige ist hier so ungünstig platziert, dass sie als Stopper wirkt. Sie liegt genau auf  dem Ende des sichtbaren Bildschirmbereichs. Die meisten Besucher dachten vermutlich, dass der Artikel an dieser Stelle zu Ende ist und haben deshalb nicht weiter nach unten gescrollt. Bei dem Artikel links im Bild wird die Anzeige am Ende des Textes eingeblendet. Zwar sind auch bei dieser Variante die meisten Mausspuren im oberen Bereich des Artikels zu sehen. Doch sind sie insgesamt gleichmäßiger verteilt und erstrecken sich über den gesamten Text. Dies zeigt, dass die Nutzer hier bis ans Ende der Seite gescrollt und den Artikel vollständig gelesen haben. Der Artikel rechts zeigt eine weiter oben platzierte Anzeige. Hier ist der Abschnitt oberhalb der Anzeige kürzer. Für den Nutzer ist dadurch ohne zu scrollen auf den ersten Blick sichtbar, dass der Text unterhalb der Grafik weitergeht. Die im Text platzierte Anzeige wirkt deutlich weniger als Hürde. Die Nutzer scrollen bis nach unten und nehmen auch das Ende des Artikels wahr. Das zeigen die Mausspuren über dem letzten Abschnitt.

Fazit: Eine lange Seite, die über mehrere Bildschirmhöhen reicht und vom Nutzer verlangt zu scrollen, besitzt nicht per se eine schlechte Usability. Problematisch wird es aber, wenn grafische Inhaltselemente wie Bilder, Absätze oder Trennlinien genau mit dem Ende des sichtbaren Bildschirmbereichs zusammenfallen. Für viele Nutzer wirkt das so, als ob die Seite an dieser Stelle zu Ende wäre. Sie scrollen deshalb – sicher unbewusst – nicht weiter nach unten, obwohl sie prinzipiell natürlich wissen wie ein Scrollrad funktioniert.

via Anzeigen als Aufmerksamkeitsbremser – m-pathy.

  • Share/Save/Bookmark

Was man bei internationalen Webauftritten beachten sollte

Inhalt der Webseite

Nur wegen des Designs wird allerdings niemand Ihre Website besuchen. Der Ausspruch “auf den Inhalt kommt es an” gilt natürlich auch für Websites. Daher sollten Sie Ihren Besuchern im In- und Ausland interessante und nützliche Inhalte bieten.

Damit Ihre Inhalte den Anforderungen der internationalen Märkte gerecht werden, sind folgende zwei Schritte notwendig: Lokalisierung und Optimierung.

Der Aspekt der Lokalisierung erfordert einen qualifizierten muttersprachlichen Übersetzer für die einzelnen Zielmärkte. Wenn Sie mit Ihren internationalen Websites viel Geld verdienen möchten, sollten Sie auch landesspezifische Dialekte beachten.

Im Französischen haben zum Beispiel viele Wörter unterschiedliche Bedeutungen, je nachdem, ob es sich um das in Frankreich gesprochene Französisch oder um kanadisches, Schweizer oder belgisches Französisch handelt. In Frankreich bedeutet “Mittagessen” déjeuner. In der Schweiz und in Belgien hingegen wird der Begriff dîner verwendet. Und was bedeutet dann das Wort dîner in Frankreich? Überraschung: Abendessen. Ähnlich verhält es sich mit dem spanischen WortCoche. Während in Spanien damit das Auto bezeichnet wird, bedeutet es in den meisten südamerikanischen Ländern “Kinderwagen”.

Sie verstehen, was ich meine, nicht wahr? Wenn sie Ihre globalen Unternehmungen wirklich ernst nehmen, sollten Sie Ihre Zielmärkte als voneinander getrennte Einheiten behandeln.

Das Bearbeiten von Flash-Inhalten, insbesondere das Überschreiben, Kopieren und die Ermittlung der Wortanzahl, ist immer mit besonderen Schwierigkeiten verbunden, was auch den Übersetzungsprozess erschwert. Daher sollten diese Inhalte auf ein Minimum begrenzt werden. Ein weiterer Punkt, der gegen den Einsatz von Flash-Inhalten spricht, ist die Suchmaschinenoptimierung. Wörter, die in Flash-Dateien eingebettet sind, können von Suchmaschinen wie zum Beispiel Google, nicht erkannt werden, was dazu führt, dass Ihre Website über eine Suchmaschine schwieriger gefunden wird.

Im Hinblick auf die Optimierung Ihrer Website für internationale Märkte, sollten Sie Ihre Suchbegriffe nicht wortwörtlich übersetzen. Viele Nutzer im Zielland benutzen bei Suche nach Produkten oder Dienstleistungen Abkürzungen, Synonyme oder sogar umgangssprachliche Ausdrücke. Daher sollten Sie sich die Mühe machen herauszufinden, welche Begriffe die Verbraucher bei der Suche in Ihrem Zielmarkt benutzen.

Diese Begriffe und Ausdrücke sollten anschließend in Ihre professionell übersetzte Website integriert werden, vorzugsweise auf einer landespezifischen Domain (siehe unten).

Domain Auswahl

Es ist unter Umständen einfacher und billiger, nur eine einzige Domain für sämtliche Zielländer zu unterhalten. Vor dem Hintergrund der Suchmaschinenoptimierung (SEO) gibt es jedoch ein gewichtiges Argument, sich für jedes Zielland eine eigene Top-Level Domain (TLD) zuzulegen (z.B. “.de” für Deutschland oder “” für das Vereinigte Königreich). Da Suchmaschinen die Top-Level Domain nutzen, um den “Standort” einer Website zu ermitteln (Geotargeting), wirkt sich dies auf Ihre Position bei länderspezifischen Suchmaschinen aus (z.B. und

Ebenso wichtig ist es, für das Hosten Ihrer Website einen Server im Zielland einzusetzen, da auch diese Information bei der Ermittlung der Geoposition verwendet wird.

Daneben spielt auch die Website-Adresse Ihrer Domain eine wichtige Rolle, denn Google “liest” die Wörter in der URL. Wenn Sie zum Beispiel “Software” anbieten, sollte dieser Begriff auch in Ihrer URL enthalten sein. Für die andersprachigen Zielländer sollten diese Begriffe gegebenenfalls auch in der URL übersetzt werden.

Die Entwicklung von Websites, die mehrere Sprachen unterstützen, stellt eine herausfordernde Aufgabe dar. Wenn Sie sich dazu entschließen, eine Domain für verschiedene Sprachen zu unterhalten, sollten Sie für jede einzelne Sprache eine Sub-Domain einrichten. Beispiel: Wenn die TLD Ihres Unternehmens lautet, würde die Subdomain für die französische Sprache folgendermaßen aussehen: sein. Die landesspezifische Domain hingegen würde folgende Adresse haben:


Die Navigation ist ein überaus wichtiger Aspekt bei der Erstellung des Webdesigns. Konsistenz und Übersichtlichkeit erleichtern es den Besuchern Ihrer Website, sich zurechtzufinden. Die Navigation sollte intuitiv sein.

Wenn zum Beispiel auf Ihrer deutschsprachigen Website die Menüleiste links angeordnet ist, sollten Sie für Sprachen, die von rechts nach links gelesen werden, wie beispielsweise das Arabische, die Anordnung der Menüleiste auf der rechten Seite in Erwägung ziehen. Dies ist selbstverständlich nicht das Ein und Alles, denn die Menüleiste kann selbstverständlich auch auf der gegenüberliegenden Seite eingerichtet werden. Letztendlich kommt es darauf an, wie die Website beim Besucher ankommt. Als Alternative bietet sich die horizontale Anordnung, wodurch die Notwendigkeit entsprechender Änderungen entfällt.

Eine gute Idee ist zudem auch eine “Einstiegsseite” für Ihre Website, über die man die gewünschte Navigationssprache wählen kann. Oder man verwendet Englisch bzw. Deutsch als Standardsprache mit der deutlich markierten Option, andere Sprachen zu wählen.

Manche Unternehmen nutzen IP2Country-Dienste, die anhand der IP-Adresse des Besuchers ermitteln können, von welchem Land aus, dieser auf das Internet zugreift. Dazu braucht man nur einen einfachen dynamischen Code auf der Website einzurichten. Da diese Methode jedoch nicht zu 100% zuverlässig ist, mag es besser sein, die Sprachauswahl dem Nutzer selbst zu überlassen.

Und damit sind wir am Ende angelangt. Dies waren nur einige der grundlegenden Punkte, die man bei der Einrichtung einer mehrsprachigen Website beachtet sollte. Viel Erfolg bei Ihrer globalen Expansion!

Gefunden auf:
Usability und Webdesign Blog » Webdesign für globale Märkte | Blog um Usability und Website Design.

  • Share/Save/Bookmark

Landingpage Optimierung Best Practice: Know Your Customer

Hier ein Auschnitt aus einem interessanten Artikel bzgl. Landingpage Optimierung:

  • We asked paying members what they liked most about the SEOmoz service, what ultimately convinced them to sign up, and how they would describe the service to a friend among many other questions.
  • Next we asked non-paying free trial members many questions, including what would make them sign up for the service, which tools they liked the most and least, and what were their most time-consuming SEO tasks.
  • Then we talked with paying members who had canceled, asking them the obvious question: “Why did you cancel?” We also wanted to know what was the one thing that would bring them back.
  • We learned from face-to-face selling. Rand Fishkin, the founder of SEOmoz, could easily sell the service face-to-face at conferences, but commented that he wished his website could be as effective. We therefore asked Rand to pretend we were the prospect while we recorded his approach. We then compared what was on the current website with the details Rand used to sell SEOmoz face-to-face. That enabled us to identify what was missing from the website.
  • We became the customer, which is a great way to see first-hand the good and not-so-good aspects of the actual customer experience.
  • Next, we incorporated our findings into revised “wireframe” pages. A wireframe is a quick rendering of a proposed page, which allows you to prototype quickly without bogging down programmers or designers. We then recruited people from the SEOmoz Twitter feed to participate in usability tests of those wireframes. We wanted to know what they liked and didn’t like on a big-picture basis.

Hier die Techniken die bei der Optimierung angewandt wurden:

  1. We created a web page long enough to tell the story
  2. We infused the headline with curiosity rather than overt “buy me” language
  3. We explained precisely what customers would get at each level
  4. We showcased things customers cared about but SEOmoz had taken for granted
  5. We augmented the message with video
  6. We lowered the “risk bar”, to make it easier for customers to try the service
  7. We asked non-subscribers to tell us why they didn’t even want a $1 membership
  8. 8. We created a quick-start guide so customers could get quick wins

Den ganzen Artikel gibt es hier:
How we made $1 million for SEOmoz—with one landing page and a few emails | Conversion Rate Experts.

  • Share/Save/Bookmark

Beitrag zum Thema Prototyping in Boxes and Arrows

Fidelity Grid

Fidelity Grid

Hab gerade einen interessanter Beitrag bei Boxes and Arrows über das Thema Prototyping und Mythos der klaren Klassifizierung nach Low- und Highfidelity gefunden. Zudem wird dargelegt, wann man auf welche Arten von Prototypen zurückgreifen sollte.

Appropriate Fidelity

“Appropriate fidelity” refers to a level of prototype fidelity that allows you to achieve the goals you’ve set for doing a prototype in the first place. By varying the fidelity of your prototype along the dimensions of visual design and functionality, you make your prototype more effective at achieving some goals and less effective for others.

Low Visual and Low Functional Fidelity

Very low fidelity prototypes are extremely useful to UX designers. Why? They can be made swiftly, changed without repercussion, and still help visualize a concept. Low visual & functional fidelity prototypes are helpful at answering large structural questions. Here are some examples:

  • Does the system have all the features required to support the user’s goals?
  • Does the workflow make sense at a high level?
  • Which UX concept works best?
  • Coming to consensus on a UX concept with stakeholders, e.g.”Is this what you meant?”

Low Visual and High Functional Fidelity

In my own practice, this is the type of prototyping I do most often. What I make are interactive, HTML interactive wireframes. Everything is black, white, and gray, but the interactions are extremely close to what they’d be in the developed system. These types of prototypes are effective in many situations:

  • Evaluating the usability of proposed designs for new systems
  • Exploring isolated interactions as a proof-of-concept
  • Validating UX design direction with stakeholders
  • Validating the implementation of requirements with stakeholders
  • Supplementing printed documentation for development teams
  • Performing remote testing

Remote testing has become more and more important over the last several years. At Evantage, we do approximately 75% of our user testing remotely. It would be difficult for us to get good data about our designs for modern, highly interactive sites if we were limited to representing those designs using low-to-medium functional fidelity prototyping techniques such as clickable PDFs or interactive PowerPoint presentations.

I also want to expand on proof-of-concept testing. This technique supports creativity and innovation. By prototyping isolated interactions at a high functional fidelity and testing them with users, I can get really good data about whether that interaction works before I base an entire application around it. This allows me to explore my crazy ideas and find out if they are, in fact, crazy. But if it turns out that those ideas are actually pretty slick, I’ll know that and can release the design with confidence instead of with gritted teeth.

High Visual and Low Functional Fidelity

At first thought, these prototypes may not make much sense. Why bother making something look nice if it doesn’t work? Well, because how something looks can have a huge impact on how easy it is to use. A high visual and low functional fidelity prototype allows you to test that with users. You can print out screen images and do a paper prototype test with them, or you can image map some JPGs and do what I’ve heard termed a “slap and map” test from within a browser.

High Visual and High Functional Fidelity

High visual and functional fidelity prototypes are the Rolls-Royce of prototypes. They take more time and effort to build than a lower fidelity prototype and are correspondingly more complicated to manage. Most of the time, this extra cost isn’t worth it. But there are a few situations where it is:

  • Evaluating the usability of proposed UX designs for an existing system
  • Performing usability tests with non-savvy user groups
  • Supplementing printed documentation for offshore development teams

Prototype testing is all about data, right? In the first two situations above, the prototype’s high visual fidelity reduces the confounding factors a wireframey prototype can introduce into test results, thus maintaining the quality of your data. In the third situation, the high visual fidelity helps minimize the design communication and interpretation problems inherent in offshore development.

Der ganzen Artikel findet man hier:

Integrating Prototyping Into Your Design Process – Boxes and Arrows: The design behind the design.

  • Share/Save/Bookmark