Linke Hemisphäre - Evangelische Kirche in Deutschland

ekd.de

Linke Hemisphäre - Evangelische Kirche in Deutschland

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design


Where ist the beef?

Wie man mit Kreativität und Usability heute im Netz

Kunden begeistert und das Internet nutzbarer macht.

Warum Bedienungsfreundlichkeit und aufregendes Design

sich nicht ausschließen und wie man aus Fehlern und

Feedback der User lernen kann.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 2


Web-Gestaltung zwischen Usability und Kreativität

eCommerce, eBay und eGOTT 2005

18.November 2005

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 3


Agenda:

-Einführung

-Klartext

- Wissenschaft

- Uselab

- Kirche

- und weltliche Beispiele

Diskussion

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 4


Kreative Knöllchen zum Warming-up.

Zur Anzeige wird der QuickTime

Dekompressor „Sorenson Video 3“

benötigt.

Wenn Polizisten alles

dafür tun, einer

behinderten Dame ein

Knöllchen zu verpassen.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 5


Was Usability ist, wissen Sie alle.

Was aber heißt denn Kreativität im Internet?

> Fühlen

> Tasten

> Sehen

> Hören

> Erleben

> Handeln

> Also: Nur Emotionen bringen die User zum Handeln!

> Kreativität ist Trumpf.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 6


Am Anfang war das Wort:

Menschen im Netz wünschen sich Klartext

> Schon seit Jahren wird bei Waschmaschinen auf

Symbole und Kurzbeschriftungen auf dem

Bedien-Panel verzichtet

> Stattdessen werden dort Klartext-Begriffe wie

"Pflegeleicht 40°" verwendet

> Der Grund:

Langjährige Anwendertests haben gezeigt,

dass die Nutzer Klartext bevorzugen und

grundsätzliche einer klaren Struktur den

Vorzug geben

Aber: träumt nicht jeder gerne von einer

Waschmaschine, die ebenso einfach zu

bedienen wie sexy ist?

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 7


Leichter gesagt als getan - vorab:

warum Websites häufig scheitern?

> Der User, der Besucher einer Website ist:

- dumm

- arrogant

- eilig

> Die Maschinen, also die Technik ist:

- dumm

- distanziert

- Langsam

> Genau das ist das Problem:

Mensch und Maschine passen auf den ersten Blick nicht zusammen!

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 8


Ein Wunderbaum an Kreativität?

Oder schlechtes Beispiel an Usability: www.nec.com

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 9


Orientierung

Orientierung ist die halbe Miete:

> Navigation bedeutet Orientierung - Orientierung bei der Bewegung im Raum.

> Linke und rechte Gehirnhälfte helfen uns dabei.

> Wir orientieren uns,

- indem wir Bekanntes im Kopf aufrufen und Neues mit Bekanntem vergleichen.

- indem wir das innere Modell unserer Vorstellung mit dem äusseren Modell

unserer Umwelt abgleichen.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 10


Linke (Ratio) und rechte (Emotio) Gehirnhälfte

iáåâÉë=_äáÅâÑÉäÇ oÉÅÜíÉë=_äáÅâÑÉäÇ

iáåâÉ=eÉãáëéÜ®êÉ

Der Felsen-tempel

von Abu Simbel

besitzt vier

kolossale Statuen

des Pharaos

Ramses II.

aÉê=cÉäëÉåJ

íÉãéÉä îçå=^Äì=

páãÄÉä ÄÉëáíòí=

îáÉê=âçäçëë~äÉ=

pí~íìÉå=ÇÉë=

mÜ~ê~çë=o~ãëÉë=

ffK

oÉÅÜíÉ=eÉãáëéÜ®êÉ

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 11


Wer schnell und klug ist, überlebt.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 12


Sehen, wahrnehmen und verarbeiten sind die Basis

visueller Rhetorik - das beeinflusst uns!

> sehen (emotional) ist physikalisch

> wahrnehmen (analytisch) ist physiologisch

> verarbeiten (rational) ist psychologisch

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 13


Orientierung

Die Strategie der Orientierung:

> 1. WO bin ich? (Orientierung > klare Aussage vermitteln)

> 2. WOHIN will ich? (Ausrichtung > gute Auswahl anbieten)

> 3. WIE komme ich dahin? ( Führung > intuitive Navigation offen)

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 14


Sprache als

Navigationsinstrument

Daten > Information > Wissen > Intelligenz

> Informationen sind Daten, die über unsere Wahrnehmungskanäle erfasst

gefiltert ins Gehirn gelangen. Nur Daten, die unser Gehirn erreichen, werden

von uns individuell zu Informationen erfasst.

> Daten werden erst im Kontext mit dem Menschen zur Information.

> Informations-Design beschäftigt sich mit der Gestaltung von Daten zur

effizienten Aufnahme durch den Menschen.

> Der Autor wertet das Verhalten der Daten-Typen aus und gestaltet diese so,

dass sie von Menschen möglichst leicht wahrgenommen werden können.

> Organisation und Struktur von Daten (Informationen) in Datenräumen.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 15


Mentale Modelle

Mentale Modelle

> Mentale Modelle sind bildhafte Vorstellungen unserer Umwelt sowie von den

Prozessen wie die Dinge funktionieren.

Bezogen auf das Internet:

> Matching von implementierten Verhaltensmustern mit bekannten

Verhaltensweisen von Nutzern. Denken aus Sicht des Nutzers heraus.

> Das Beispiel ADAC.de, Stern.de, MyWorld.de

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 16


Navigationsinstrumente

Kleine Übung für zwischendurch:

> Welche Navigationsinstrumente kennen Sie?

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 17


König, Dame, Ritter, Was?

Playmobil.de - eine kurze Fingerübung

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 18


Eine Art worst case:

Playmobil.de - tolle Marke, „unterhaltsame“ Site.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 19


Codierung

Codierung

> Sprache verschlüsselt oder decodiert Informationen.

> Die exakte Beschreibung von Navigationspunkten/Icons helfen dem User bei

der Orientierung.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 20


Inhalte einer Website sind oft ähnlich schwer

zugänglich wie Fischdosen

Würden Sie sich trauen, bekleidet

mit einem weißen Hemd, noch

schnell eine dieser Dosen zu

öffnen, wenn der erste Besuch

gerade klingelt?

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 21


Form follows function

> Die Welt der Konzeptioner, Designer und Informations-Architekten ist bunt und

vielfältig.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 22


Lernen Sie von den „Usability Experten“

Links sind blau und unterstrichen

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 23


Usability „Experten“

zum Thema Lesbarkeit

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 24


Usability „Experten“

zum Thema Arroganz

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 25


Im Prinzip ein richtiger Ansatz - aber denken Sie mal

nach, ob ein wenig Kreativität nicht schaden könnte...

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 26


Ein Ansatz: Reduce to the Max - das Prinzip Google

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 27


Klare Frage - klares Antwort

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 28


Woran erkennt man ein gutes Online-Produkt?

> Klares Angebot der Startseite (worum geht´s!)

> Eindeutige Benutzerführung

> Wysiwyg

> Intuitive Benutzerführung

> Motivierende Gestaltung

> Lesefreundliche Typographie

> Emotionale Bilder

> Klare Interaktionsmöglichkeiten

> Und: Barrierefreies Angebot für institutionelle Websites

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 29


Die evangelische Onlinelandschaft in Deutschland.

Startseiten und Statements - ein kritischer Schnelldurchlauf.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 30


www.ekd.de

Erster Eindruck:

> Aufgeräumt

> Stimmungsvoll durch Bild

Positiv:

> Gute Seiteneinteilung

> Klare Navigation

> Stimmungsbilder

> Christliche Suchmaschine

> Kirche für Einsteiger

> Sprachauswahl

Suboptimal:

> zu schwache Farben

> Ein wenig blaß und wo ist

Interaktion?

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 31


www.crossbot.de

Erster Eindruck:

> Klar strukturiert

Positiv:

> Lehnt sich an die großen

etablierten Kataloge an. Der

User kennt sich aus.

Negativ:

> Absender ist nur schwer zu

erkennen

> Auch der Name „crossbot“

ist für den Nutzer nicht

selbsterklärend

> Irgendwie wie Google -

aber!

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 32


www.diakonie.de

Erster Eindruck:

> Das Bild des behinderten

Kindes erschreckt und zieht

erstmal alle

Aufmerksamkeit auf sich.

Positiv:

> Gesamtkonzept Design

durch Farbschema

> Sehr gutes Logo und starker

Claim

Negativ:

> „Negatives“ Bild auf

Startseite. Es gibt auch

strahlende Menschen mit

Behinderung

> Navigation etwas

„versteckt“

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 33


www.ekbo.de

Erster Eindruck:

> Unsympathisch, eckig und

kantig

> Kein Platz zum Wohlfühlen

Positiv:

> Klare, verständliche

Navigation

Negativ:

> Farbe lila erschlägt den

Nutzer förmlich

> Überladen durch teilweise

extrem lange Texte

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 34


www.ekvw.de

Erster Eindruck:

> Wieder zieht hier das Bild

alle Aufmerksamkeit auf

sich. Repräsentiert es den

evangelischen Glauben?

Guter Einstieg?

Positiv:

> Große Schrift, auch für

ältere Menschen gut lesbar

Negativ:

> Sehr zurückhaltend

> Suboptimale Bildwahl

> Etwas unstrukturiert

> Nutzerführung indifferent

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 35


www.bayern-evangelisch.de

Erster Eindruck:

> Sympathischer Einstieg

> Herzliche Begrüßung

> Wohlfühlen!

> Warme Atmosphäre

Positiv:

> Onlineseelsorge

> Gemeindensuche

> Interessante Navigation

(glauben, leben etc.)

> Claim: „Evangelisch eben.“

> Schriftanpassung super

Negativ:

> Design verspielt aber

oldfashioned

> Verwirrende Animationen

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 36


www.jesus.de

Erster Eindruck:

> „trashig-poppige“ Anmutung

und Unübersichtlichkeit

Positiv:

> Breites Themenspektrum

u.a. Regionales, Radio,

Seelsorge etc.

Negativ:

> Sehr viel Werbung

> Durch die vielen Animationen

sehr unübersichtlich

> Anmutung passt nicht zum

Domainnamen „Jesus“

> Logo verschwindet im Bild

und ist schwer zu erkennen

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 37


www.jesus-online.de

Erster Eindruck:

> Sehr kühles, aber auch

cooles Design

Positiv:

> Die vielen

Nutzungsmöglichkeiten z.B.

Community mit Chat und

Foren, Newsletter etc.

> Übersichtliche Navigation

Negativ:

> Durch die vielen

Animationen und Bilder sehr

unübersichtlich und vom

Content ablenkend

> Hierarchie unklar

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 38


www.gott.net

Erster Eindruck:

> Duster und unsympathisch,

> Kein Platz zum Wohlfühlen

> Sterbehilfe meets Comic?!

Positiv:

> Klare Navigation

> Claim: „Wir müssen

miteinander reden - Gott“

ist sehr eindringlich

Negativ:

> Sehr statischer Aufbau der

Seite

> Farben und Bildwelten,

harmonieren nicht

miteinander

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 39


www.prochrist.de

Erster Eindruck:

> Hier ist eine Idee!

> Ansprechendes Design

> Warme und miteinander

Harmonisierende Farben

> Logo und Idee gleich

sichtbar

> Man fühlt sich auf Anhieb

wohl

Positiv:

> Ansprechende und klare

Navigation

> Gutes Text/Bild Verhältnis

> Übersichtlicher Aufbau

> Irgendwie dynamisch

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 40


www.loveuall.de

Erster Eindruck:

> Sehr junge und farbenfrohe

Seite mit ansprechenden

Bildern und auffallendem

Design

Positiv:

> Die Interaktivität mit z.B.

Weblogs,

Lebenserfahrungs-

Berichten, E-Cards und

Radio etc.

> Ansprechendes Design und

Bildwelten für eine jüngere

Zielgruppe

Negativ:

> Dynamische Navigation

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 41


www.gott.info

Erster Eindruck:

> Sehr sympathisch und

übersichtlich

Positiv:

> Klare Struktur und farbliche

Unterstreichung der

Navigation

Negativ:

> Farbcodierung zu unklar

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 42


www.beichte.de

Erster Eindruck:

> Duster und

animateurhaft

Positiv:

> Lustige Idee

Negativ:

> Bedrohliches „Ruhe-

Sanft-Farbklima“

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 43


www.sorgenchat.de

Erster Eindruck:

> Sehr zurückhaltend und

altmodisch

Positiv:

> Ansprechender Text

> Gute Ideen

Negativ:

> Wirkt etwas zu bieder für

junge Leute

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 44


Websites können Geschichten erzählen und bunt sein -

Und trotzdem klickt keiner weg und meist sogar richtig

Ein paar Beispiele weltlicher Branchen

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 45


Best Practices: Design

www.meyerhoffer.com

> Ein Designer, der

seine Dienste nicht nur

für Apple und andere

namhafte Unternehmen

einsetzt, sondern sie

auch auf der eigenen

Homepage umzusetzen

versteht!

> Ästhetisch, pur,

einfach bedienbar

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 46


Best Practices: Design

www.meyerhoffer.com

> Inhalte können gezielt über Navigation

oder linear über vorwärts/rückwärts

angesteuert werden.

> Elegant gelöste News-Komponente auf

der Homepage.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 47


Best Practices: Fotograf

www.rui-camilo.de/main.html

> Fotografen-Website, die

durch reduziertes Design

und hohe Funktionalität

überzeugt.

> Schön gelöste,

komfortable Navigationsmöglichkeiten.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 48


Best Practices: Fotograf

www.rui-camilo.de/main.html

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 49


Best Practices: Architektur

www.museumsinsel-berlin.de

> Ein virtueller Rundgang

durch die Museumsinsel

in Berlin.

> Neben dem historischen

Ablauf der Bebauung der

Insel werden die Hauptattraktionen

der Museen

kurz vorgestellt.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 50


Best Practices: Architektur

www.museumsinsel-berlin.de

> Sehr ansprechend

aufbereitet, bietet aber

nur oberflächliche

Informationen zu den

einzelnen Gebäuden und

Sammlungen.

> Die Webseite wurde mit

dem Deutschen

Multimedia Award 2003

ausgezeichnet.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 51


Best Practices Sports and Fashion:

www.nikefootball.com

> Sehr künstlerisch

aufgemachte Webseite

um für ein

Straßenfußballturnier in

Amsterdam zu werben.

> Verspielte, innovative

Navigation bei der die

Orientierung zugunsten

der Optik erschwert wird.

> Kids kommen sofort klar.

Je älter vom so schwerer

tut sich der Interessent

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 52


Best Practices Sports and Fashion:

www.nikefootball.com

> Macht Lust auf Nike

und Fußball.

> Technisch aufwändig

werden in kleinen

Filmen und Animationen

fußballerische Kunststücke

präsentiert.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 53


Ebenso kreativ, aber intuitiv leicht zu bedienen:

(www.theaxeaffect.com)

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 54


Get the Girls of your Dreams

(www.theaxeaffect.com)

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 55


www.theaxeaffect.com

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 56


www.theaxeaffect.com

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 57


www.theaxeaffect.com

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 58


Axe (www.theaxeeffect.com)

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 59


Nissan Pathfinder

www.nissan.de

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 60


Best Practices Cars:

Volvo XC90

> In einer technisch sehr

aufwändigen

Präsentation wird das

aktuelle Volvo-Modell

präsentiert.

> Die Webseite wurde bei

den Cyberlions 2003

ausgezeichnet.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 61


Best Practices Cars:

Volvo XC90

> Das Auto wird in einer

durchgehenden

Animation, unterstützt

von perfekt angepassten

Geräuschkulisse in

seiner „natürlichen

Umgebung“ präsentiert.

> Neben dieser athmosphärisch

dichten

Präsentation gibt es bei

Interesse auch kurze

Abschnitte zu

technischen Details

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 62


Volvo – Life on Board Project.

Wie schaut die Welt mit

einem Volvo aus? Genau

so. Eine Website –

unendlich viele

Geschichten aus dem

Leben in kleinen Filmchen

verpackt.

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 63


2 Mega-Trends kennzeichnen die Websites der

Zukunft:

Standardisierung

Verhaltenswissenschaft und

Usabilityforschung haben in den

letzten 5 Jahren gezeigt, dass

es speziell in Hinblick auf

Navigationsstruktur und

Informationsdesign Standards

geben muss

(z.B. „Amazonisierung des

Online-Buchhandels“).

Emotionalisierung

Weil viele Internetangebote

sich immer mehr ähneln, wird

die Emotionalisierung zu einem

immer wichtigeren

Differenzierungsfaktor

(z.B. Nike/Niketown).

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 64


Auch kreativ, aber anders: Audi Quattro Special!

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 65


© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 66


Vielleicht haben Sie jetzt etwas Geschmack am

Thema Usability und Kreativität gefunden;-)

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 67


Besten Dank;-)

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 68


Kontakt

DAS GOLDENE VLIES

Studio für Markenbeziehungen

und Design GmbH

Osterwaldstr. 10

80805 München

Hansjörg Zimmermann

Managing Partner & Creative Director

h.zimmermann@dasgoldenevlies.de

Telefon: + 49 (89) 55 26 47-55

Fax: + 49 (89) 55 26 47-19

Copyright: Diese Präsentation ist urheberrechtlich geschützt. Jede Verwertung,

Weitergabe oder Verwendung ohne Zustimmung der DAS GOLDENE VLIES GmbH ist

unzulässig. Die Inhalte dieser Präsentation sind vertraulich zu behandeln. Die

Weitergabe von Informationen und Inhalten an Dritte ist unzulässig.

München, November 2005

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 69


Linkliste Best Cases Kreativität

Design

www.meyerhoffer.com

Künstler

www.andreheller.com

Architektur

www.bauhaus-dessau.de

www.museumsinsel-berlin.de

Fotograf

www.rui-camilo.de/main.html

www.horstphorst.com

www.isabellaginanneschi.com/

www.lenprince.com/

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 70


Linkliste Best Cases Kreativität

Medienkunst:

www.diacenter.org/simmons/

www.potatoland.com/shredder

www.jodi.org (Achtung beim Öffnen!)

www.vuedesalpes.com

www.seltsam.com

www.diacenter.org

Museen:

www.wartburg-eisenach.de

Sonstiges:

http://nikefootball.nike.com/nikefootball/front/panna/panna_front.jsp?languageNum=2&languag

eTxt=deutsch

http://demo.fb.se/eng/volvo/volvoxc90/volvoxc90_eng/flash/flash.html

www.nec.com

www.theaxeeffect.com

www.playmobil.de

www.nissan.de

www.audi.de

© 2005 DAS GOLDENE VLIES Studio für Markenbeziehungen und Design 71

Weitere Magazine dieses Users
Ähnliche Magazine