begin – Seminarreihe„Website-Check: 4x Basiswissen für Web-Verantwortliche“
Teil II: Mit professionellem Design Kunden ansprechen
Søren Götte | VisionConnect GmbHHannover, 17. November 2011
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Seminarreihe„Website-Check: 4x Basiswissen für Web-Verantwortliche“
Teil I: Website erfolgreich planen und konzipieren3. November 2011
Teil II: Mit professionellem Design Kunden ansprechen
17. November 2011Teil III: Per CMS Websites problemlos pflegen
24. November 2011Teil IV: Mit Online-Marketing Kunden gewinnen und binden
1. Dezember 2011
begin – Teil II: Mit professionellem Design Kunden ansprechen
Agenda
1. Einführung2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken3. Crossmedia-Gestaltung für Websites4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen
Agenda
begin – Teil II: Mit professionellem Design Kunden ansprechen
1. Einführung2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken3. Crossmedia-Gestaltung für Websites4. Benutzerorientierte Darstellung von Inhalten und Services
Konzeption einer Website – ein ganz kurzer ExkursEinführung
begin – Teil II: Mit professionellem Design Kunden ansprechen
Planung - Definition der ZieleEinführung
• Steigerung des Bekanntheitsgrades• Bindung der Bestandskunden• Neukundengewinnung• Umsatzsteigerung • Serviceoptimierung
• Telefonische Supportanfragen reduzieren/zielgerichtet kanalisieren• Abbildung von Geschäftsprozessen innerhalb der Website
• ...
begin – Teil II: Mit professionellem Design Kunden ansprechen
Planung - Definition der Zielgruppen Einführung
• An wen richtet sich die Website?
begin – Teil II: Mit professionellem Design Kunden ansprechen
Planung - Definition der Zielgruppen Einführung
• B2C: Verbraucher• B2B: Unternehmen• Presse• Mitarbeiter / Bewerber • Berücksichtigung soziodemografischer Faktoren
(Alter, Geschlecht, Bildungsstand, Einkommen,...)• Berücksichtigung geografischer Faktoren
(bundesweit, europaweit, global)
begin – Teil II: Mit professionellem Design Kunden ansprechen
PlanungEinführung
• Website-Konventionen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Alle hassen Pop-Ups!
begin – Teil II: Mit professionellem Design Kunden ansprechen
Quelle:tektype.wordpress.com
Website-KonventionenEinführung
• Alle hassen Pop-Ups!
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Alle hassen Pop-Ups!• Alle hassen Pop-Ups!
begin – Teil II: Mit professionellem Design Kunden ansprechen
Quelle:paulswansen.com/?p=1647
Website-KonventionenEinführung
• Alle hassen Pop-Ups!• Und Vorschaltseiten!
• Verzichten Sie auf Vorschaltseiten,• die bestimmte technische
Bedingungen abfragen, bevor man auf die Site gelangt.
• die eine Sprachversion abfragen, in der man die Site betrachten möchte.
begin – Teil II: Mit professionellem Design Kunden ansprechen
Mtvwww.mtv.com
Website-KonventionenEinführung
• Bevor man Texte erstellt und Bilder aussucht, muss die Inhaltsstruktur der Website festgelegt werden. Sie ist das A & O einer Website.
• Meist wird die Struktur starr linear hierarchisch aufgebaut.
• Die meisten Websites haben als Basis eine im wesentlichen linear hierarchische Struktur, diese wird aber mit Querverlinkungen angereichert.
• 5- bis 7-Elemente-Regel beachten
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Nur Informationen anbieten, die für den Kunden (wenigstens zeitweilig) von hoher Bedeutung sind.
• Formulieren Sie ein klares Angebot• Teilen Sie mit, dass Sie sich über eine
Kontaktaufnahme freuen• Ermöglichen Sie mehrere Arten der Kontaktaufnahme
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
Strukturierung von Inhalten:• Bestimmen Sie die Kernkriterien für die Inhalte;
daraus ergibt sich zwangsläufig die Struktur.• Welche Inhalte haben eine besondere, wichtige
Bedeutung? Stellen Sie diese in der Hierarchie nach oben.
• Bei umfangreichen Websites: bieten Sie mehrere Wege zu den Informationen an.
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
A comic from xkcdbkaprt.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
Wie kann ich wichtige Inhalte kommunizieren?• Bei der Planung der Website Bereich mit aktuellen Meldungen
berücksichtigen• Feste Bereiche auf der Startseite (oder auf allen Seiten) für
bestimmte Inhalte reservieren, z. B. in der „rechten Spalte“• Banner (Werbecharakter)• Newsletter: Elektronisches Rundschreiben meist zu speziellen
Themen• RSS: Newsfeed ist eine Technologie, die es dem Nutzer
ermöglicht, die Inhalte einer Webseite – oder Teile davon – zu abonnieren.
• Mailing-Aktionen (per Post oder Internet)begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
amedes Groupwww.amedes-group.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
Entwicklung Layoutprozess: Beispiel Mock-Up ToolEinführung
Balsamiqwww.balsamiq.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
Wie kann ich wichtige Inhalte kommunizieren?• Facebook• Twitter• Blog
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
Zielgerichtete Kommunikation• Inhalt nach Zielgruppen trennen (beispielsweise nach
Privatkunden/Geschäftskunden, Presse, Bewerber, etc.)• Berücksichtigung der Barrierefreiheit: z. B. kurze Teaser am
Anfang eines Artikels, bei Seiten mit Video-Content Beschreibungen des Videos mit anbieten (long-description), ALT-Tags für Bilder benutzen
• Medien und Techniken entsprechend den Zielgruppen/Inhalten einsetzen (z. B. Video)
• Werbebanner, Newsletter• Corporate Blogs• Corporate Podcast
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
Identität braucht eine klare Sprache. Darum müssen Texte
• eindeutig formuliert und • sinnvoll strukturiert sein, • damit sie gern gelesen werden.
Auf lange, verschachtelte, kompliziert konstruierte Sätze verzichtet man als Unternehmen oder Institution sowieso am besten, ob man es nun mit einem versierten Leser oder einem Neueinsteiger zu tun hat – allein, der Fokus sollte auf der schnellen Erfassbarkeit eines Textes liegen.
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Was will ich meinem Kunden, meinem Adressaten vermitteln?Was ist das Wesentliche, die Kernaussage meiner Botschaft?Was ist in meiner Aussage wichtig, was eher unwichtig?
• Wie kann ich meine Ziele und Absichten klar formulieren?Wie hebe ich mich mit meinem Text von Mitbewerbern ab?In welchem Rahmen soll die Botschaft präsentiert werden?Welche „Taktik“ wende ich an, um eine Botschaft zu vermitteln?
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Das Wichtigste zuerst: Überschrift und der Beginn eines Artikels sollen die wichtigsten Aussagen enthalten.
• Einen Abstract am Anfang des Artikels formulieren; dieser kann auch als Anreißer auf einer Verteilerseite eingesetzt werden.
• Eine gute Gliederung erleichtert das Lesen am Monitor sehr. Mehr Absätze verwenden als in Texten für Printmedien.
• Zwischenüberschriften bieten bei langen Texten eine gute Orientierungsmöglichkeit für den Leser.
• Alle 5 W-Fragen sollten beantwortet werden:Wer? Was? Wo? Wann? Wie? Warum?
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Schreiben Sie nur, was Sie verstanden haben.Geizen Sie mit Fremdwörtern, erklären Sie fachspezifische Begriffe und Abkürzungen, vermeiden Sie unverständliche Begriffe: Login / Authentifizierung, …
• Verben verwenden: anwenden statt „zur Anwendung bringen“, beweisen anstelle „etwas unter Beweis stellen“, …
• Vermeiden Sie Allgemeinplätze, Sprachklischees und unpassende Metaphern: „Stadt nimmt den Müll in die Hand“.
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• „Sie“, „Ihr“, „Ihnen“ sind Schlüsselwörter. Sie beziehen sich auf den Kunden bzw. auf den Empfänger. Diese „User-zentrierte“-Ansprache verstärkt die Aussage und bewirkt, dass sich der Adressat beim Lesen wohl fühlt: “Wir bieten Ihnen den neuen Service...”
• Zitate: nennen Sie Vor- und Nachnamen des Zitierten, korrekte Titel und Berufsbezeichnung. Dipl.-Ing. Hubertus Mustermann
• Formulieren Sie kurz und prägnant: vermeiden Sie verschachtelte Sätze mit vielen Nebensätzen.
• Streichen Sie Füllwörter und Wiederholungen: eklatant, geflissentlich, unmissverständlich, vorrangig, wohlweislich,…
• Wählen Sie korrekte Bezeichnungen für Firmennamen, technische Begriffe, …
begin – Teil II: Mit professionellem Design Kunden ansprechen
Website-KonventionenEinführung
• Überschrift• Einleitung (Abstract, Teaser)
Kurze Einleitung in das Thema und strukturierte Zusammenfassung des Hauptgedankens
• HauptteilArgumente werden nach ihrer Wichtigkeit aufgeführt (das Wichtigste zuerst)
• SchlussZusammenfassung ist möglich, Leser sollte überzeugt werden, ggf. kann man einen Ausblick geben. Bei Presseinformationen kann man Hintergrundinformationen anbieten.
• Verfasser/Kontaktdaten/Datumbegin – Teil II: Mit professionellem Design Kunden ansprechen
Grobgliederung eines Textes (Meldungen)Einführung
Zeitungsartikel Pressemeldung www.wingas.dewww.zeit.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
ProduktbeschreibungenEinführung
www.tchibo.dewww.manufaktum.de
Planung - Interaktionsgrad Einführung
Brigitte.dewww.brigitte.de
Mtvwww.mtv.de
VOX Televisionwww.kochbar.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
FazitEinführung
• Besucher landen nicht unbedingt auf der Startseite• Besucher lesen nicht (wenn sie nicht wollen)• Besucher haben wenig Geduld und eine geringe Frustrationstoleranz• Besucher suchen auf verschiedene Arten• Besucher wollen die Kontrolle behalten
begin – Teil II: Mit professionellem Design Kunden ansprechen
FazitEinführung
„Man muss das Internet als dynamisches Medium begreifen“
begin – Teil II: Mit professionellem Design Kunden ansprechen
KommunikationEinführung
„Man kann nicht nicht kommunizieren“
Kommunikationstheorie, 1969von Paul Watzlawick (*1921)
begin – Teil II: Mit professionellem Design Kunden ansprechen
Agenda
begin – Teil II: Mit professionellem Design Kunden ansprechen
1. Einführung2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken3. Crossmedia-Gestaltung für Websites4. Benutzerorientierte Darstellung von Inhalten und Services
Persuasive Design (”Überredungs“-Design)Prinzipien der Benutzbarkeit
• Was habe ich davon, wenn ich den Newsletter abonniere?• Warum soll ich diese Dienstleistung weiterempfehlen?• Brauche ich dieses Produkt überhaupt?
begin – Teil II: Mit professionellem Design Kunden ansprechen
Persuasive Design (”Überredungs“-Design)Prinzipien der Benutzbarkeit
Eine Handlung resultiert aus drei Faktoren:• der Motivation zu handeln• der Fähigkeit, die Handlung auszuführen• dem Auslöser
BJ Fogg, Leiter ”Persuasive Technology Lab”, Stanford University
begin – Teil II: Mit professionellem Design Kunden ansprechen
Persuasive Design (”Überredungs“-Design)Prinzipien der Benutzbarkeit
Und wie verhilft man Menschen, die richtige Wahl zu treffen?
begin – Teil II: Mit professionellem Design Kunden ansprechen
Persuasive Design (”Überredungs“-Design)Prinzipien der Benutzbarkeit
Sechs Prinzipien für soziale Beeinflussung:• Gegenleistung: Wir fühlen uns verpflichtet, uns für
einen Gefallen zu revanchieren. • Autorität: Wir suchen gern einen Experten.• Bekenntnis zur Nachhaltigkeit: Wir wollen
konsequenter nach unseren Werten handeln.• Verknappung: Je weniger eine Ressource zur
Verfügung steht, desto größer das Verlangen.• Geschmack: Je mehr wir Menschen mögen, desto
eher wollen wir ihnen das sagen.• Soziale Bestätigung: Wir machen gern das Gleiche
wie unsere Bezugsgruppe.Prof. Robert B. Cialdini PhD, ”THE SCIENCE OF COMPLIANCE“, 2004
begin – Teil II: Mit professionellem Design Kunden ansprechen
Persuasive Design (”Überredungs“-Design)Prinzipien der Benutzbarkeit
Pay with a Tweetwww.paywithatweet.comwww.youtube.com/watch?v=6fK3TNjR2JY
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Amazon.com, Inc.www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Amazon.com, Inc.www.amazon.de
• Amazon-Gesamtumsatz 2010: 34,20 Milliarden US-Dollar• Gewinn 2010: 1,15 Milliarden US-Dollar. • Im Vergleich zu den Gesamtzahlen des Jahres 2009 steigerte der
Onlinehändler damit den Umsatz um 40 Prozent und den Gewinn um 28 Prozent.
• Nach der Publikation der Quartalszahlen gab die Amazon-Aktie um neun Prozent nach: die Investoren des Unternehmens hatten auf einen höheren Gewinn gehofft.
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Quelle:www.grokdotcom.com
• Wie wählt man beim Hinzufügen zum Einkaufswagen eine Artikelanzahl aus?
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
1. Ein Formularfeld, in dem „1“ oder „0“ steht2. Ein leeres Formularfeld, in das der Wert eingetragen wird3. Eine Drop-down-Menüauswahl (von 1 bis 9)4. Ein „In den Einkaufswagen legen“-Button, mit dem
automatisch ein Exemplar in den Einkaufswagen gelegt wird (die Menge kann man später ändern)
Quelle:www.grokdotcom.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Amazon.com, Inc.www.amazon.de
• Eindeutige Beschriftungen• Vertraute Handlungen• Regelmäßige Optimierung der
Website-Elemente• Messen, weiterentwickeln, testen• Neu: Einbindung von Social
Media-Buttons
begin – Teil II: Mit professionellem Design Kunden ansprechen
Evolution des Shopping Cart-ButtonsPrinzipien der Benutzbarkeit
Amazon.com, Inc.www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Amazon.com, Inc.www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Amazon.com, Inc.www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Groupon, Inc.www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Quelle:Wikipedia
• Groupon („group+coupon“) bietet jeden Tag einen bestimmten Rabatt an, wenn sich genügend Interessenten zusammenfinden. Das Unternehmen erhält in diesem Fall eine Provision. Für dieses Geschäftsmodell hat sich mittlerweile der Begriff „Groupon“ eingebürgert.
• Start: November 2008 in Chicago• 2011: Groupon ist in 35 Ländern aktiv und hat mehr als siebzig
Millionen registrierte Nutzer• Das Unternehmen lehnte im Dezember 2010 ein Übernahmeangebot
von Google in Höhe von rund 6 Milliarden Dollar ab.
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Groupon, Inc.www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Call to action-ButtonsPrinzipien der Benutzbarkeit
Groupon, Inc.www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Design to SellPrinzipien der Benutzbarkeit
• „F“-Muster für den schnellen Seitenscan
• Sauber formuliertes Angebot• Kauf-Aufforderung• Preis-Rabattierung• Verknappung• Social Media-Integration
Groupon, Inc.www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Design to SellPrinzipien der Benutzbarkeit
Groupon, Inc.www.groupon.de
Design to SellPrinzipien der Benutzbarkeit
Groupon, Inc.www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Design to SellPrinzipien der Benutzbarkeit
• AIDA-Modell (Attention, Interest, Desire, Action)
• Betonung des persönlichen Vorteils des Besuchers
• Quantitative Vorteilsbestimmung: Verlustangst durch Nichtkauf
• Angebotsverknappung• Time Lock-Situation• Wirklich gutes Bildmaterial• „Call to action“-Button ohne
optionalen CharakterGroupon, Inc.www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
WeissraumPrinzipien der Benutzbarkeit
Web.dewww.web.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
ZEIT ONLINE:www.zeit.de
WeissraumPrinzipien der Benutzbarkeit
Web.dewww.web.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
ZEIT ONLINE:www.zeit.de
WeissraumPrinzipien der Benutzbarkeit
Information Architects, Inc.www.informationarchitects.jp/en
begin – Teil II: Mit professionellem Design Kunden ansprechen
WeissraumPrinzipien der Benutzbarkeit
Information Architects, Inc.www.informationarchitects.jp/en
• Weissraum ist guter Raum• Gibt den Inhalten Luft zum
Atmen• Gliedert Elementfolgen, ohne die
Komplexität zu erhöhen
• PS: Weissraum muss nicht zwingend weiss sein
begin – Teil II: Mit professionellem Design Kunden ansprechen
FazitPrinzipien der Benutzbarkeit
Durch das verhaltenspsychologisches Wissen, wie ein Nutzer tickt, wenn er sich durch eine Website klickt, kann man ihn lenken:• Die Grenze zwischen Anschub und Manipulation ist
nicht immer leicht zu erkennen.• „Don‘t be evil“• „Don‘t be Schlecker“
Hält Schlecker seine Kunden für „dumm“? Anatomie eines Shitstorms: www.reputation-management-blog.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Agenda
begin – Teil II: Mit professionellem Design Kunden ansprechen
1. Einführung2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken3. Crossmedia-Gestaltung für Websites4. Benutzerorientierte Darstellung von Inhalten und Services
Web-App für iPadCrossmedia-Gestaltung für Websites
Boston Globe:bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen
Web-App für iPadCrossmedia-Gestaltung für Websites
Boston Globe:bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen
Web-App für iPadCrossmedia-Gestaltung für Websites
Boston Globe:bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen
Web-App für iPadCrossmedia-Gestaltung für Websites
Boston Globe:bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen
Web-App für iPadCrossmedia-Gestaltung für Websites
Boston Globe:bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Web-App für iPadCrossmedia-Gestaltung für Websites
Boston Globe:bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen
Crossmedia-Gestaltung für WebsitesWeb-App für iPad
Boston Globe:bostonglobe.com/
Mitwachsende WebsiteCrossmedia-Gestaltung für Websites
• Eine Website, die sich für alle Darstellungsgrößen optimiert
begin – Teil II: Mit professionellem Design Kunden ansprechen
Boston Globe:bostonglobe.com/
Device-OptimierungCrossmedia-Gestaltung für Websites
Financial Timeswww.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Desktop-WebsiteCrossmedia-Gestaltung für Websites
Financial Timeswww.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
Android-WebsiteCrossmedia-Gestaltung für Websites
Financial TimesAndroid-Landing Pageapps.ft.com/android
Mobile WebsiteCrossmedia-Gestaltung für Websites
Financial TimesMobile Websitem.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
iDevice-WebsiteCrossmedia-Gestaltung für Websites
Financial TimesiDevice-Landing Pageapp.ft.com
Financial Times:iPad-Web-App
Web-App für iPadCrossmedia-Gestaltung für Websites
Quelle: FTD Youtube-Channel, http://www.youtube.com/watch?v=JTywh4QJWMM
begin – Teil II: Mit professionellem Design Kunden ansprechen
Financial Times:iPad-Web-App
Web-App für iPadCrossmedia-Gestaltung für Websites
• Keine native App, sondern eine Website speziell für das iPad
• Leichtgemachte Interaktion• Kein Medienbruch• Verknüpfte Inhalte (Artikel,
Galerien, Videos)• Schnelle Metanavigation
begin – Teil II: Mit professionellem Design Kunden ansprechen
ZieleCrossmedia-Gestaltung für Websites
Die Mediennutzung ändert sich – zwei Ziele für reaktionsfähige Websites:• Eine jederzeit
erreichbare Website• Eine aus jeder
Situation erreichbare Website
Bild: mobile-first responsive web design:bradfrostweb.com/blog
begin – Teil II: Mit professionellem Design Kunden ansprechen
StrategienCrossmedia-Gestaltung für Websites
Zwei Strategien für reaktionsfähige Websites:• „Degradation“• „Enhancement“• Flexible Portierungen
per CSS• Lieber ein paar Dinge
weglassen
RESPONSIVE WEB DESIGN:www.abookapart.com
Bild: mobile-first responsive web design:bradfrostweb.com/blog
begin – Teil II: Mit professionellem Design Kunden ansprechen
StrategienCrossmedia-Gestaltung für Websites
Thema: „Flash“
Steve Jobs, Thoughts on Flash, April, 2010:www.apple.com/hotnews/thoughts-on-flash/ SPIEGEL ONLINE, November 2011:www.spiegel.de/netzwelt
begin – Teil II: Mit professionellem Design Kunden ansprechen
Crossmedia-Gestaltung für WebsitesFazit
• Die ökonomische Lösung: eine Website, die auf verschiedene Nutzungsszenarien anwendbar ist
• Die teuere Lösung: eine eigene Version pro Nutzungsszenario vorhalten
• Kompromiss: supporten heisst nicht optimieren
LUKE WROBLEWSKI, Organizing Mobile:www.alistapart.com/articles/organizing-mobile/
begin – Teil II: Mit professionellem Design Kunden ansprechen
Benutzerzentriertes DesignCrossmedia-Gestaltung für Websites
Strategien:• Offene Standards: HTML5, CSS3, JavaScript• Auf Flash und Vorschaltseiten verzichten• Integration von Web Services nutzen und
verknüpfen: GoogleMaps, Blogs, Facebook, Twitter, Youtube, Flickr, …
begin – Teil II: Mit professionellem Design Kunden ansprechen
Agenda
begin – Teil II: Mit professionellem Design Kunden ansprechen
1. Einführung2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken3. Crossmedia-Gestaltung für Websites4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen
Shop-SitesBenutzerorientierte Darstellung
Zalandozalando.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Shop-Sites: verschiedene BenutzertypenBenutzerorientierte Darstellung
Zalandozalando.de
Schnäppchenkäufer
Inspirationskäufer,Schnäppchenkäufer
ZielkäuferInspirationskäufer
begin – Teil II: Mit professionellem Design Kunden ansprechen
Shop-SitesBenutzerorientierte Darstellung
Brille24www.Brille24.de
Siegel
Kontakt
Bewertungen
Ablauf
Social Media
Konversions-optimierungbei Brille24
Zur Erinnerung:Sechs Prinzipien für soziale Beeinflussung• Gegenleistung• Autorität• Bekenntnis zur
Nachhaltigkeit• Verknappung• Geschmack• Soziale Bestätigung
Incentive
Shop-SitesBenutzerorientierte Darstellung
Brille24www.Brille24.de
Shop-SitesBenutzerorientierte Darstellung
Brille24www.Brille24.de
Login
Shop-SitesBenutzerorientierte Darstellung
Brille24 3D Online-Anprobewww.brille24.de/3Danprobe
3D-Echtzeit-Online-Anprobe
Shop-SitesBenutzerorientierte Darstellung
Beck Freizeit+Reisen Hobbyshopwww.beck-hobbyshop.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Shop-SitesBenutzerorientierte Darstellung
eXtremewareextremeware.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Vernetzung von KanälenBenutzerorientierte Darstellung
Homepage:ritter-sport.de
Benutzerzentriertes DesignBenutzerorientierte Darstellung
Multikanal-Strategien:• Eindeutige Markendarstellung• Vielseitig verwendbares Gestaltungsraster• Prägnante Informationsvermittlung• Leichtgemachte Interaktion (und Konversion)• Verknüpfte Inhalte• Corporate Website, Blog, Facebook, Twitter,
Youtube, Flickr, …
begin – Teil II: Mit professionellem Design Kunden ansprechen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Facebook-StrategienBenutzerorientierte Darstellung
• Google: PageRank• Facebook: EdgeRank• Was weiß Facebook von
uns?• Public vs. Private• Nutzerinteraktion einbinden• Fanpage einrichten
• Werbung nur für Fans der Seite
• Werbung nur für Freunde von Fans der Seite
• Aktionen relevant bündeln!Quelle: Inside Facebook Gold, September 2011
Facebook-StrategienBenutzerorientierte Darstellung
• Fehler beim Kampagnenstart vermeiden
• Fanseiten und eigene Inhalte• Gestaltungsspielräume nutzen• Werbung auf Facebook• Datenschutz• Facebook-Elemente in die
eigene Website einbinden
begin – Teil II: Mit professionellem Design Kunden ansprechen
Mehr dazu: Nicole Simon, Facebook, ganz im Ernst (Weave, 3.11)www.weave.de
Facebook-StrategienBenutzerorientierte Darstellung
• Facebook optimiert sich stetig• Facebook-Strategien und -
Aktionen müssen immer wieder zeitnah überprüft werden
• Social Media Monitoring Tools einsetzen
begin – Teil II: Mit professionellem Design Kunden ansprechen
Social Media-StrategienBenutzerorientierte Darstellung
Social Media Tools:• Hashtag-Suche• Alexa.com• Yahoo! Backlink-
Check
begin – Teil II: Mit professionellem Design Kunden ansprechen
Social Media-StrategienBenutzerorientierte Darstellung
Social Media Monitoring Tools zum Anfangen:• Socialmention.com• BrandWatch• UberVU
begin – Teil II: Mit professionellem Design Kunden ansprechen
In welcher Listenanordnung wird mehr auf Produkte geklickt?
A/B-TestingBenutzerorientierte Darstellung
WestisEast:westiseast.co.uk/blogwww.minrivertea.com
• Ein Raster lässt sich zu schnell scannen
• Beschränkte Auswahl: wenig Inhalt in der Rasterdarstellung
• 3 vs. 9 Items: Paradox of Choice
begin – Teil II: Mit professionellem Design Kunden ansprechen
+15%
Tracking• Kampagnen bewerben mit einer
speziellen Telefonnummer/Landing Page
• A/B-Testing• Einsatz von Tools:
• GoogleAnalytics, • eTracker, • Piwik
Messbarkeit von KonversionenBenutzerorientierte Darstellung
www.google.de
www.etracker.de
begin – Teil II: Mit professionellem Design Kunden ansprechen
Benutzerorientierte DarstellungFazit
• Wichtigste Ansätze: Information, Relevanz, Prägnanz
• Es ist nie zu spät, um anzufangen.
• Experimentieren und ausprobieren lohnt sich.
• Früh testen, wieder testen!
begin – Teil II: Mit professionellem Design Kunden ansprechen
Kunden ansprechenMit professionellem Design
begin – Teil II: Mit professionellem Design Kunden ansprechen
„Man muss das Internet als dynamisches Medium begreifen“
Fragen?
Søren GötteArt Director
Konzept & Design
VisionConnect GmbHHohenzollernstr. 2630161 Hannover
Tel.: 0511 76071-256Fax: 0511 [email protected]øren Götte bei XING
begin – Teil II: Mit professionellem Design Kunden ansprechen