Web Design-Vortrag bei der IHK Hannover: – Prinzipien der Benutzbarkeit: wann, wohin, weshalb Nutzer klicken – Crossmedia-Gestaltung für Websites – Benutzerorientierte Darstellung von Inhalten und Services

1. begin – Seminarreihe
„Website-Check: 4x Basiswissen für Web-Verantwortliche“
Teil II: Mit professionellem Design
Kunden ansprechen
Søren Götte | VisionConnect GmbH
Hannover, 17. November 2011
begin – Teil II: Mit professionellem Design Kunden ansprechen

2. begin – Seminarreihe
„Website-Check: 4x Basiswissen für Web-Verantwortliche“
Teil I: Website erfolgreich planen und konzipieren
3. November 2011
Teil II: Mit professionellem Design
Kunden ansprechen
17. November 2011
Teil III: Per CMS Websites problemlos pflegen
24. November 2011
Teil IV: Mit Online-Marketing Kunden gewinnen und binden
1. Dezember 2011
begin – Teil II: Mit professionellem Design Kunden ansprechen

3. Agenda
1. Einführung
2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken
3. Crossmedia-Gestaltung für Websites
4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen

4. Agenda
1. Einführung
2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken
3. Crossmedia-Gestaltung für Websites
4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen

5. Einführung
Konzeption einer Website – ein ganz kurzer Exkurs
begin – Teil II: Mit professionellem Design Kunden ansprechen

6. Einführung
Planung - Definition der Ziele
• 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

7. Einführung
Planung - Definition der Zielgruppen
• An wen richtet sich die Website?
begin – Teil II: Mit professionellem Design Kunden ansprechen

8. Einführung
Planung - Definition der Zielgruppen
• 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

9. Einführung
Planung
• Website-Konventionen
begin – Teil II: Mit professionellem Design Kunden ansprechen

10. Einführung
Website-Konventionen
• Alle hassen Pop-Ups!
Quelle:
tektype.wordpress.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

11. Einführung
Website-Konventionen
• Alle hassen Pop-Ups!
begin – Teil II: Mit professionellem Design Kunden ansprechen

12. Einführung
Website-Konventionen
• Alle hassen Pop-Ups!
Quelle:
paulswansen.com/?p=1647
begin – Teil II: Mit professionellem Design Kunden ansprechen

13. Einführung
Website-Konventionen
• 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.
Mtv
www.mtv.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

14. Einführung
Website-Konventionen
• 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

15. Einführung
Website-Konventionen
• 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

16. Einführung
Website-Konventionen
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

17. Einführung
Website-Konventionen
A comic from xkcd
bkaprt.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

18. Einführung
Website-Konventionen
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

19. Einführung
Website-Konventionen
amedes Group
www.amedes-
group.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

20. Einführung
Entwicklung Layoutprozess: Beispiel Mock-Up Tool
Balsamiq
www.balsamiq.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

21. Einführung
Website-Konventionen
Wie kann ich wichtige Inhalte kommunizieren?
• Facebook
• Twitter
• Blog
begin – Teil II: Mit professionellem Design Kunden ansprechen

22. Einführung
Website-Konventionen
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

23. Einführung
Website-Konventionen
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

24. Einführung
Website-Konventionen
• 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

25. Einführung
Website-Konventionen
• 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

26. Einführung
Website-Konventionen
• 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

27. Einführung
Website-Konventionen
• „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

28. Einführung
Website-Konventionen
• Überschrift
• Einleitung (Abstract, Teaser)
Kurze Einleitung in das Thema und strukturierte
Zusammenfassung des Hauptgedankens
• Hauptteil
Argumente werden nach ihrer Wichtigkeit aufgeführt (das
Wichtigste zuerst)
• Schluss
Zusammenfassung ist möglich, Leser sollte überzeugt werden,
ggf. kann man einen Ausblick geben. Bei Presseinformationen
kann man Hintergrundinformationen anbieten.
• Verfasser/Kontaktdaten/Datum
begin – Teil II: Mit professionellem Design Kunden ansprechen

29. Einführung
Grobgliederung eines Textes (Meldungen)
Zeitungsartikel www.zeit.de Pressemeldung www.wingas.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

30. Einführung
Produktbeschreibungen
www.manufaktum.de www.tchibo.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

31. Einführung
Planung - Interaktionsgrad
Mtv Brigitte.de VOX Television
www.mtv.de www.brigitte.de www.kochbar.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

32. Einführung
Fazit
• 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

33. Einführung
Fazit
„Man muss das Internet als
dynamisches Medium begreifen“
begin – Teil II: Mit professionellem Design Kunden ansprechen

34. Einführung
Kommunikation
„Man kann nicht nicht kommunizieren“
Kommunikationstheorie, 1969
von Paul Watzlawick (*1921)
begin – Teil II: Mit professionellem Design Kunden ansprechen

35. Agenda
1. Einführung
2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken
3. Crossmedia-Gestaltung für Websites
4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen

36. Prinzipien der Benutzbarkeit
Persuasive Design (”Überredungs“-Design)
• 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

37. Prinzipien der Benutzbarkeit
Persuasive Design (”Überredungs“-Design)
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

38. Prinzipien der Benutzbarkeit
Persuasive Design (”Überredungs“-Design)
Und wie verhilft man Menschen,
die richtige Wahl zu treffen?
begin – Teil II: Mit professionellem Design Kunden ansprechen

39. Prinzipien der Benutzbarkeit
Persuasive Design (”Überredungs“-Design)
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 Prof. Robert B. Cialdini
PhD, ”THE SCIENCE OF
wie unsere Bezugsgruppe. COMPLIANCE“, 2004
begin – Teil II: Mit professionellem Design Kunden ansprechen

40. Prinzipien der Benutzbarkeit
Persuasive Design (”Überredungs“-Design)
Pay with a Tweet
www.paywithatweet.com
www.youtube.com/watch?v=6fK3TNjR2JY
begin – Teil II: Mit professionellem Design Kunden ansprechen

41. Prinzipien der Benutzbarkeit
Call to action-Buttons
Amazon.com, Inc.
www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

42. Prinzipien der Benutzbarkeit
Call to action-Buttons
• 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.
Amazon.com, Inc.
www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

43. Prinzipien der Benutzbarkeit
Call to action-Buttons
• Wie wählt man beim Hinzufügen zum Einkaufswagen eine
Artikelanzahl aus?
Quelle:
www.grokdotcom.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

44. Prinzipien der Benutzbarkeit
Call to action-Buttons
1. Ein Formularfeld, in dem „1“ oder „0“ steht
2. Ein leeres Formularfeld, in das der Wert eingetragen wird
3. 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

45. Prinzipien der Benutzbarkeit
Call to action-Buttons
• Eindeutige Beschriftungen
• Vertraute Handlungen
• Regelmäßige Optimierung der
Website-Elemente
• Messen, weiterentwickeln, testen
• Neu: Einbindung von Social
Media-Buttons
Amazon.com, Inc.
www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

46. Prinzipien der Benutzbarkeit
Evolution des Shopping Cart-Buttons
Amazon.com, Inc.
www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

47. Prinzipien der Benutzbarkeit
Call to action-Buttons
Amazon.com, Inc.
www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

48. Prinzipien der Benutzbarkeit
Call to action-Buttons
Amazon.com, Inc.
www.amazon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

49. Prinzipien der Benutzbarkeit
Call to action-Buttons
Groupon, Inc.
www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

50. Prinzipien der Benutzbarkeit
Call to action-Buttons
• 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. Quelle:
Wikipedia
begin – Teil II: Mit professionellem Design Kunden ansprechen

51. Prinzipien der Benutzbarkeit
Call to action-Buttons
Groupon, Inc.
www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

52. Prinzipien der Benutzbarkeit
Call to action-Buttons
Groupon, Inc.
www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

53. Prinzipien der Benutzbarkeit
Design to Sell
• „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

54. Prinzipien der Benutzbarkeit
Design to Sell
Groupon, Inc.
www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

55. Prinzipien der Benutzbarkeit
Design to Sell
Groupon, Inc.
www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

56. Prinzipien der Benutzbarkeit
Design to Sell
• 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 Charakter
Groupon, Inc.
www.groupon.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

57. Prinzipien der Benutzbarkeit
Weissraum
Web.de
www.web.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

58. Prinzipien der Benutzbarkeit
Weissraum
Web.de ZEIT ONLINE:
www.web.de www.zeit.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

59. Prinzipien der Benutzbarkeit
Weissraum
Information Architects, Inc. ZEIT ONLINE:
www.informationarchitects.jp/en www.zeit.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

60. Prinzipien der Benutzbarkeit
Weissraum
• 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
Information Architects, Inc.
www.informationarchitects.jp/en
begin – Teil II: Mit professionellem Design Kunden ansprechen

61. Prinzipien der Benutzbarkeit
Fazit
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

62. Agenda
1. Einführung
2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken
3. Crossmedia-Gestaltung für Websites
4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen

63. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

64. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

65. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

66. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

67. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

68. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

69. Crossmedia-Gestaltung für Websites
Web-App für iPad
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

70. Crossmedia-Gestaltung für Websites
Mitwachsende Website
• Eine Website, die sich für alle
Darstellungsgrößen optimiert
Boston Globe:
bostonglobe.com/
begin – Teil II: Mit professionellem Design Kunden ansprechen

71. Crossmedia-Gestaltung für Websites
Device-Optimierung
Financial Times
www.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

72. Crossmedia-Gestaltung für Websites
Desktop-Website
Financial Times
www.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

73. Crossmedia-Gestaltung für Websites
Android-Website
Financial Times
Android-Landing Page
apps.ft.com/android
begin – Teil II: Mit professionellem Design Kunden ansprechen

74. Crossmedia-Gestaltung für Websites
Mobile Website
Financial Times
Mobile Website
m.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

75. Crossmedia-Gestaltung für Websites
iDevice-Website
Financial Times
iDevice-Landing Page
app.ft.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

76. Crossmedia-Gestaltung für Websites
Web-App für iPad
Quelle: FTD Youtube-Channel, http://www.youtube.com/watch?v=JTywh4QJWMM Financial Times:
iPad-Web-App
begin – Teil II: Mit professionellem Design Kunden ansprechen

77. Crossmedia-Gestaltung für Websites
Web-App für iPad
• Keine native App, sondern eine
Website speziell für das iPad
• Leichtgemachte Interaktion
• Kein Medienbruch
• Verknüpfte Inhalte (Artikel,
Galerien, Videos)
• Schnelle Metanavigation
Financial Times:
iPad-Web-App
begin – Teil II: Mit professionellem Design Kunden ansprechen

78. Crossmedia-Gestaltung für Websites
Ziele
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

79. Crossmedia-Gestaltung für Websites
Strategien
Zwei Strategien für
reaktionsfähige
Websites:
• „Degradation“
• „Enhancement“
• Flexible Portierungen
per CSS
• Lieber ein paar Dinge
weglassen
Bild: mobile-first responsive web design:
bradfrostweb.com/blog
RESPONSIVE WEB DESIGN:
www.abookapart.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

80. Crossmedia-Gestaltung für Websites
Strategien
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

81. Crossmedia-Gestaltung für Websites
Fazit
• 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

82. Crossmedia-Gestaltung für Websites
Benutzerzentriertes Design
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

83. Agenda
1. Einführung
2. Prinzipien der Benutzbarkeit:
wann, wohin, weshalb Nutzer klicken
3. Crossmedia-Gestaltung für Websites
4. Benutzerorientierte Darstellung von Inhalten und Services
begin – Teil II: Mit professionellem Design Kunden ansprechen

84. Benutzerorientierte Darstellung
Shop-Sites
Zalando
zalando.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

85. Benutzerorientierte Darstellung
Shop-Sites: verschiedene Benutzertypen
Zielkäufer
Inspirationskäufer
Schnäppchenkäufer
Inspirationskäufer,
Schnäppchenkäufer
Zalando
zalando.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

86. Benutzerorientierte Darstellung
Shop-Sites
Kontakt
Konversions-
Siegel
optimierung
bei Brille24
Zur Erinnerung:
Sechs Prinzipien für
soziale Beeinflussung
Bewertungen • Gegenleistung
• Autorität
Social Media
• Bekenntnis zur
Nachhaltigkeit
• Verknappung
Incentive • Geschmack
• Soziale Bestätigung
Ablauf
Brille24
www.Brille24.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

87. Benutzerorientierte Darstellung
Shop-Sites
Brille24
www.Brille24.de

88. Benutzerorientierte Darstellung
Shop-Sites
Login
Brille24
www.Brille24.de

89. Benutzerorientierte Darstellung
Shop-Sites
3D-Echtzeit-Online-Anprobe
Brille24 3D Online-Anprobe
www.brille24.de/3Danprobe

90. Benutzerorientierte Darstellung
Shop-Sites
Beck Freizeit+Reisen
Hobbyshop
www.beck-hobbyshop.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

91. Benutzerorientierte Darstellung
Shop-Sites
eXtremeware
extremeware.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

92. Benutzerorientierte Darstellung
Vernetzung von Kanälen
Homepage:
ritter-sport.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

93. Benutzerorientierte Darstellung
Benutzerzentriertes Design
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

94. Benutzerorientierte Darstellung
Facebook-Strategien
• 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
Quelle: Inside Facebook Gold, September 2011 • Aktionen relevant bündeln!
begin – Teil II: Mit professionellem Design Kunden ansprechen

95. Benutzerorientierte Darstellung
Facebook-Strategien
• Fehler beim Kampagnenstart
vermeiden
• Fanseiten und eigene Inhalte
• Gestaltungsspielräume nutzen
• Werbung auf Facebook
• Datenschutz
• Facebook-Elemente in die
eigene Website einbinden Mehr dazu:
Nicole Simon,
Facebook, ganz im
Ernst (Weave, 3.11)
www.weave.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

96. Benutzerorientierte Darstellung
Facebook-Strategien
• 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

97. Benutzerorientierte Darstellung
Social Media-Strategien
Social Media Tools:
• Hashtag-Suche
• Alexa.com
• Yahoo! Backlink-
Check
begin – Teil II: Mit professionellem Design Kunden ansprechen

98. Benutzerorientierte Darstellung
Social Media-Strategien
Social Media Monitoring
Tools zum Anfangen:
• Socialmention.com
• BrandWatch
• UberVU
begin – Teil II: Mit professionellem Design Kunden ansprechen

99. Benutzerorientierte Darstellung
A/B-Testing
In welcher Listenanordnung wird
+15%
mehr auf Produkte geklickt?
• Ein Raster lässt sich zu
schnell scannen
• Beschränkte Auswahl: wenig
Inhalt in der Rasterdarstellung
• 3 vs. 9 Items: Paradox of
Choice
WestisEast:
westiseast.co.uk/blog
www.minrivertea.com
begin – Teil II: Mit professionellem Design Kunden ansprechen

100. Benutzerorientierte Darstellung
Messbarkeit von Konversionen
Tracking
• Kampagnen bewerben mit einer
speziellen Telefonnummer/
Landing Page
• A/B-Testing
• Einsatz von Tools:
• GoogleAnalytics,
• eTracker,
www.google.de
• Piwik
www.etracker.de
begin – Teil II: Mit professionellem Design Kunden ansprechen

101. Benutzerorientierte Darstellung
Fazit
• 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

102. Mit professionellem Design
Kunden ansprechen
„Man muss das Internet als
dynamisches Medium begreifen“
begin – Teil II: Mit professionellem Design Kunden ansprechen

103. Fragen?
Søren Götte
Art Director
Konzept & Design
VisionConnect GmbH
Hohenzollernstr. 26
30161 Hannover
Tel.: 0511 76071-256
Fax: 0511 76071-101
goette@visionconnect.de
Søren Götte bei XING
begin – Teil II: Mit professionellem Design Kunden ansprechen