Präsentation: Mit professionellem Design Kunden ansprechen

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


Agenda

1. Einführung2. Prinzipien der Benutzbarkeit:

wann, wohin, weshalb Nutzer klicken3. Crossmedia-Gestaltung für Websites4. Benutzerorientierte Darstellung von Inhalten und Services


Agenda




Konzeption einer Website – ein ganz kurzer ExkursEinführung


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

• ...


Planung - Definition der Zielgruppen Einführung

• An wen richtet sich die Website?


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)


PlanungEinführung

• Website-Konventionen


Website-KonventionenEinführung

• Alle hassen Pop-Ups!


Quelle:tektype.wordpress.com


• Alle hassen Pop-Ups!



• Alle hassen Pop-Ups!• Alle hassen Pop-Ups!


Quelle:paulswansen.com/?p=1647


• 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.


Mtvwww.mtv.com


• 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



• 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



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.



A comic from xkcdbkaprt.com



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


amedes Groupwww.amedes-group.com


Entwicklung Layoutprozess: Beispiel Mock-Up ToolEinführung

Balsamiqwww.balsamiq.com



Wie kann ich wichtige Inhalte kommunizieren?• Facebook• Twitter• Blog



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



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.



• 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?



• 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?



• 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“.



• „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, …



• Ü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



ProduktbeschreibungenEinführung

www.tchibo.dewww.manufaktum.de

Planung - Interaktionsgrad Einführung

Brigitte.dewww.brigitte.de

Mtvwww.mtv.de

VOX Televisionwww.kochbar.de


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


FazitEinführung

„Man muss das Internet als dynamisches Medium begreifen“


KommunikationEinführung

„Man kann nicht nicht kommunizieren“

Kommunikationstheorie, 1969von Paul Watzlawick (*1921)


Agenda




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?



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



Und wie verhilft man Menschen, die richtige Wahl zu treffen?



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



Pay with a Tweetwww.paywithatweet.comwww.youtube.com/watch?v=6fK3TNjR2JY


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.



Quelle:www.grokdotcom.com

• Wie wählt man beim Hinzufügen zum Einkaufswagen eine Artikelanzahl aus?



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




• Eindeutige Beschriftungen• Vertraute Handlungen• Regelmäßige Optimierung der

Website-Elemente• Messen, weiterentwickeln, testen• Neu: Einbindung von Social

Media-Buttons


Evolution des Shopping Cart-ButtonsPrinzipien der Benutzbarkeit










Groupon, Inc.www.groupon.de



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.









Design to SellPrinzipien der Benutzbarkeit

• „F“-Muster für den schnellen Seitenscan

• Sauber formuliertes Angebot• Kauf-Aufforderung• Preis-Rabattierung• Verknappung• Social Media-Integration









• 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


WeissraumPrinzipien der Benutzbarkeit

Web.dewww.web.de


ZEIT ONLINE:www.zeit.de


Web.dewww.web.de


ZEIT ONLINE:www.zeit.de


Information Architects, Inc.www.informationarchitects.jp/en



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


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


Agenda




Web-App für iPadCrossmedia-Gestaltung für Websites

Boston Globe:bostonglobe.com/


















Crossmedia-Gestaltung für WebsitesWeb-App für iPad


Mitwachsende WebsiteCrossmedia-Gestaltung für Websites

• Eine Website, die sich für alle Darstellungsgrößen optimiert



Device-OptimierungCrossmedia-Gestaltung für Websites

Financial Timeswww.ft.com



Desktop-WebsiteCrossmedia-Gestaltung für Websites

Financial Timeswww.ft.com


Android-WebsiteCrossmedia-Gestaltung für Websites

Financial TimesAndroid-Landing Pageapps.ft.com/android

Mobile WebsiteCrossmedia-Gestaltung für Websites

Financial TimesMobile Websitem.ft.com



iDevice-WebsiteCrossmedia-Gestaltung für Websites

Financial TimesiDevice-Landing Pageapp.ft.com

Financial Times:iPad-Web-App


Quelle: FTD Youtube-Channel, http://www.youtube.com/watch?v=JTywh4QJWMM


Financial Times:iPad-Web-App


• Keine native App, sondern eine Website speziell für das iPad

• Leichtgemachte Interaktion• Kein Medienbruch• Verknüpfte Inhalte (Artikel,

Galerien, Videos)• Schnelle Metanavigation


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


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


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


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/


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, …


Agenda





Shop-SitesBenutzerorientierte Darstellung

Zalandozalando.de


Shop-Sites: verschiedene BenutzertypenBenutzerorientierte Darstellung

Zalandozalando.de

Schnäppchenkäufer

Inspirationskäufer,Schnäppchenkäufer

ZielkäuferInspirationskäufer



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





Login


Brille24 3D Online-Anprobewww.brille24.de/3Danprobe

3D-Echtzeit-Online-Anprobe


Beck Freizeit+Reisen Hobbyshopwww.beck-hobbyshop.de




eXtremewareextremeware.de


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, …



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


• 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


• Facebook optimiert sich stetig• Facebook-Strategien und -

Aktionen müssen immer wieder zeitnah überprüft werden

• Social Media Monitoring Tools einsetzen


Social Media-StrategienBenutzerorientierte Darstellung

Social Media Tools:• Hashtag-Suche• Alexa.com• Yahoo! Backlink-

Check


Social Media-StrategienBenutzerorientierte Darstellung

Social Media Monitoring Tools zum Anfangen:• Socialmention.com• BrandWatch• UberVU


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


+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


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!


Kunden ansprechenMit professionellem Design


„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


Date post:	01-Nov-2014
Category:	Design
Upload:	soren-goette
View:	1,232 times
Download:	1 times