Was sind Personas?
Persona = fiktive, nicht-reale Person, die stellvertretend für eine Benutzergruppe steht. Personas sind ein Hilfsmittel u.a. im Bereich Interaction Design, um ein Produkt herzustellen, welches voll und ganz auf die Bedürfnisse der Endnutzer zugeschnitten ist (User-Centered Design).

Warum Personas?
Personas dienen dazu, Motivation & Ziele verschiedener Benutzergruppe zu definieren: Wer besucht die Webseite warum und mit welchem Ziel?

Personas werden nicht in jedem Projekt benötigt – kleine Webseiten ohne grössere Nutzerinteraktionen kommen auch gut ohne diese Methode aus. Personas verlangen eine gewisse Recherche der Nutzergruppen und benötigen daher Zeit.
Trotzdem denken viele - auch bei großen und komplexen Projekten – das dies kein Mensch braucht und so werden eigene Sterotypen und Klischeenutzer mal eben schnell von jedem Teammitglied im Kopf erstellt. Aber ohne zu wissen und zu kommunizieren, wer die wirklichen Nutzer sind, kann man diese “formbaren Sterotypen” schlecht im Team oder beim Kunden präsentieren und Entscheidungen gemeinsam treffen. Daher braucht man “stabile Nutzertypen” auf die man bei Problemlösungen und Designentscheidungen gemeinsam zurückgreifen kann.

Natürlich möchten Kunden ihre Kosten so gering wie möglich halten - wenn es jedoch darum geht, das eine Seite erfolgreich sein soll, und der Erfolg von den Nutzern abhängt, was bringt dann diese Einsparung im Vorfeld? Ohne jegliche User-Research kann man ohnehin machen was man möchte. Sinnvoll ist das nicht - denn man will ja eine Anwendung/Software/Webseite FÜR die Bedürfnisse und Ziele der End-Nutzer bauen und nicht für seine eigenen.

Wie erstellt man Personas?
Man kann sehr detaillierte Personas erstellen, mit Bild, Name, Beruf, E-Mail Adresse, Hobbys - also eine richtige Story /einen Hintergrund um diese fiktive Person erstellen, fast schon ähnlich einer Characterbeschreibung in den Bereichen Film & Storytelling.
Der große Vorteil bei detaillierten Personas: Man erzeugt ein Bild, fast einen “echten” Menschen, den man sich vorstellen kann.

Beispiel:
Nehmen wir z.B ein Hotelbewertungsportal als Basis. (hier jetzt mal der Einfachheit halber im “Quick & Dirty” Durchlauf)
Ziele der Seite: Nutzer sollen sich über ihr Hotel vorab informieren können, und sollen möglichst auch selbst Bewertungen schreiben(die Seite lebt ja von User generated Content).
Zielgruppe laut Marketingabteilung: Der “typisch deutsche Sommerurlauber”, der vornehmlich zur Erholung verreist.

So fast man zuerst die groben Nutzergruppen zusammen - diese erfordern Recherche ( z.B im Call Center/Marketing o.ä. nachfragen oder ggf. auslagern)

• 1. Der informationssuchende Nutzer, der schon gebucht hat, will sich vorab über das Hotel informieren
• 2. Der informationssuchende Nutzer, der noch nicht gebucht hat, braucht eine Entscheidungshilfe
• 3. Der Rückkehrer, der sich die Bewertungen nach seinem Urlaub anschauen möchte und einen “geheimen/stillen” Vergleich zieht
• 4. Der Rückkehrer, der seine Erfahrungen auf jeden Fall teilen möchte & somit aktiver Teil der Bewertungscommunity ist

Aus diesen Nutzergruppen/Profilen kann man nun eine oder mehrere Personas erstellen, die die jeweilige Benutzergruppe repräsentieren.

z.B. könnte eine Persona aus Nutzergruppe 2 so aussehen:
Lena Reinhardt, 36 Jahre alt, aus Süddeutschland, in erster Ehe verheiratet, 2 Kinder ( Lars, 9 Jahre und Katrin, 11 Jahre) , Hausfrau und seit kurzem wieder Teilzeit-Angestellt als Anwältin, 1 Hund (Labrador) , gesundheitsbewusst, sehr auf ihre Familie achtend, weiss was sie will, selbstbewusst, immer beschäftigt, möchte im Sommer 2010 zwei Wochen mit ihre Familie nach Sylt verreisen.
Sohn Lars ist Asthmatiker. Ihr Mann ist beruflich erfolgreich und häufig ausser Haus - er überlasst ihr familiäre Entscheidungen. Lena verbringt ihre Freizeit viel draussen, ihre Hobbys sind die Gartenpflege, Aquajoggen, mit dem Hund rausgehen und lesen.
Lena kocht gerne gesund, Ernährung ist ihr sehr wichtig. Mit dem Internet hat Lena weniger zu tun, sie geht ca. einmal pro Woche privat online, vornehmlich um sich zu verschiedenen Themen zu informieren - Online Bestellungen oder Buchungen per Internet macht sie nicht, will Informationen schnell, klar und übersichtlich dargestellt haben. Motto: “Geht nicht , gibt’s nicht!”

Lena repräsentiert eigentlich nicht eine einzige Person, sondern steht vielmehr stellvertretend für eine Gruppe:
-Informationssuchend, vergleichend, gebildet, anspruchsvoll, kein Power-User. Aber die Person Lena hilft dabei, genau dieser Nutzergruppe ein Gesicht zu verleihen.
Was erwartet Lena wohl von ihrem Hotel? Und viel wichtiger: Welche Information erhofft sich Lena von der Bewertungswebseite? Wird sie viell. sogar selbst einmal eine Bewertung schreiben, bzw. wie könnte man sie dazu animieren?..( um es mal weiterzuspinnen)

Welchen Vorteil hat nun so ein detailliertes Persönlichkeitsprofil ?

• -Wir haben eine “richtige” Person vor Augen, Bild/Person bleibt in Erinnerung
• -Es übersetzt die “Designersprache” bildlich in die “Businesssprache” des Kunden (falls nötig)
• -Wir können uns besser in die Situation von Lena und ihre Ziele hineinversetzen, so entsteht bei der Entwicklung/Planung innerhalb des Teams keine “wie gehe ICH das Problem an” -Situation, sondern man fragt sich eher, wie Lena es wohl tun würde, was sie benötigt und braucht, um bequem an ihr gewünschtes Ziel zu kommen.
• -erleichtert somit Design Entscheidungen

Auf Basis von Lenas Persönlichkeit z.B kann man dann anfangen, ein Nutzerszenario für diese Person zu erstellen, welches hilft, Informationsstrukturen zu bündeln und den Endnutzern eine bestmögliche “Nutzungerfahrung” auf der Webseite zu ermöglichen, die dann gerne wiederkommen bzw. Empfehlungen aussprechen, weil sie die Informationen die sie suchten, auch leicht gefunden haben.

Ich denke, diese detaillierten Personas werden jedoch in unserem Alltag trotzdem immer noch viel zu wenig/selten und zu spekulativ eingesetzt.
Weiterhin sind u. U. auch gute Marktforschungskenntnisse von Nöten, wenn man richtige und verwendbare Personas entwickeln möchte.
Was habt ihr da für Erfahrungen?
Erstellt ihr Personas? Wenn ja, in welchem Umfang? Entwickelt ihr mehr oder weniger spekulativ/ auf Basis von Nutzergruppen, die ihr mitgeteilt bekommt, so etwa wie im obigen Beispiel?

Weiterführende Links Infos zum Thema Personas
Three Important Benefits of Personas
Why Is it so Hard to Make Products that People Love?
Ten Steps to Personas (Dr. Lene Nielsen) –> mit super Infografik
Alan Cooper - The Origin of Personas
http://en.wikipedia.org/wiki/Personas
http://www.boxesandarrows.com/view/bringing_your_personas_to_life_in_real_life

oldskool Lesestoff
http://www.amazon.de/About-Face-Essentials-Interaction-Design/dp/0470084111

Wireframes und Prototyping im Interfacedesign - Webstandards Mag 03/09

Spannend, was die Zukunft wohl noch so bringen wird: Der japan. Werberiese Dentsu hat mit seiner bislang kostenlosen iPhone App “iButterfly” eine äusserst kreative und spielerische Umsetzung von Augmented Reality in Verbindung mit GPS geschafft. Der Benutzer bekommt Gutscheine/Coupons oder spezielle Informationen in seiner Nähe freigeschaltet bzw. kann diese auch sammeln und via Bluetooth mit seinen Freunden teilen, wenn er einen Schmetterling einfängt, der virtuell direkt in seine Umgebung integriert wird.
Psychologisch sehr geschickt : Stichwort Spielen, Jagen & Sammeln ;).
Spiel, Spass, Spannung = hervorragende UX = viele Nutzer = Word to Mouth!
Well done! :)

Weitere Infos:
http://www.mobileart.jp/ibutterfly_en.html
http://asiajin.com/blog/2010/01/22/dentsu-ibutterfly-experiments-ar-and-location-based-coupon-service/

via uxbooth
Flickr, Explain IA Pool

How to HotGloo Ad from HotGloo on Vimeo.

HotGloo ist ein wirklich kleines feines Online-Tool zum Erstellen von Wireframes und klickbaren Prototypen.
Man kann Sitemaps anlegen, Master Templates erstellen, klickbare Links erstellen, eigene Widgets hinzufügen, zusammen daran arbeiten und auch einen PDF Export gibt es.
Zur Zeit ist HotGloo noch in der Beta & daher frei. :)

HotGloo-Blog
HotGloo Tutorials& How-to’s auf Vimeo

Immerhin gestalten wir Produkte & Anwendungen mit denen jemand zurechtkommen muss, die also funktional sein müssen und die bedient werden wollen (und zwar auch gerne bedient werden wollen, nicht nur so “ach ja, das muss halt”) die sich sich auch auf immer wiederkehrende Patterns (Gebrauchsmuster) beziehen und die aber dennoch auch auf Innovation angewiesen sind - denn ohne Innovation kein Fortschritt.

Hier mal die Definitionen von Wikipedia zu beiden Begriffen:
“Grafikdesign ist die Gestaltung von visuellen Inhalten in verschiedenen Medien, die durch ihre Darstellung anderen Menschen etwas mitteilen”
Wir teilen nicht nur etwas mit, wir wollen etwas benutzbar machen und dabei soll es noch ansprechend aussehen.
Und aus dem Produktdesign :
“Ein (Design)-Produkt lässt sich nach seinen Funktionen unterscheiden und analysieren:
Praktische Funktionen (Funktionalität, Ergonomie, Sicherheit, Gebrauchstauglichkeit (usability), Benutzerfreundlichkeit, Wartung/Pflege)”

Wenn ich z.B ein Teaserbild für einen Shop gestalte, ist das für mich Grafikdesign, es soll Emotionen vermitteln und einen Kaufanreiz auslösen - aber wenn ich eine Webapplikation/komplexe Seite gestalte ist das für mich wiederum eher Produktdesign.
Ich denke, man sollte als Webworker/ UI Designer stets ein Auge auf diese übergreifende Disziplin werfen, denn wir können bestimmt sehr viel von ihr lernen.

Alter Hase, aber in diesem Zusammenhang immer wieder zu empfehlen: “The Design of everyday Things”

Möglichkeiten der Formular-User-Kommunikation:
1. Man hüllt sich in Schweigen, teilt gar nichts mit, lässt dem Nutzer die freie Wahl was er eingibt und macht ihn hinterher zur Sau. (Geht gar nicht! Grund: s.o.)
2. Man setzt ein kleines “Hilfe-Icon” neben das jeweiligen Eingabefeld und erzeugt beim Mouse Over passende Hinweise (…nunja besser als gar nichts - trotzdem etwas umständlich, ich muss erst mit der Maus das Hilfe Icon finden & anwählen und dann den Hinweis abwarten, das dauert…)
3. Man schreibt die Hinweise über die jeweiligen Eingabefelder (schon besser, sieht aber schnell überladen aus, too much Information - wird ausserdem gern überlesen)
4. Man teilt dem Nutzer direkt während oder nach der Eingabe in das jeweilige Feld mit, ob er erfolgreich war oder nicht (erspart Frustration und nerviges Gesuche- ist also die beste Alternative)

Dafür gibt es netterweise diverse ajaxbasierte Lösungen wie z.B dieses jQuery Plugin: Einfach & ohne viele Worte leicht verständlich (rot/grün Signalwirkung)



Gesehen bei: http://www.unwrongest.com/projects/valid8/ ( via http://dzineblog.com)

Hier mal eine kleine Case Study am Beispiel verschiedener Registrierungsformulare

Brigitte.de

brigitte.de gibt Hinweise direkt bei Klick ins Feld. Nett gemacht, mir persönlich allerdings zu “vollgeklatscht”, kleine Schrift etc… geht bestimmt auch eleganter!;)

Twitter

Twitter löst das ganze super, direktes Feedback - auch bei der Verfügbarkeit des gewünschten Usernamens (wichtig, liebe Communities!)

Myspace

Myspace überrascht positiv neuerdings (?) mit direktem Feedback & Hinweisen, das war mal deutlich schlechter

Facebook

Facebook verliert mit Fehlermeldung (zwar ajaxbasiert) am Ende der Eingabe…, frustrierend.

Xing

Xing hat es leider auch nicht allzu gut gelöst, die Fehlermeldungen erscheinen erst, nachdem man auf “anmelden” geklickt hat - immerhin sind die Datensätze noch da.

Topshop

Topshop.com löst es meiner Meinung nach auch etwas umständlich mit einem Icon, immerhin muss man erst auf das Fragezeichen klicken….User sind doch faul und wollen nicht lange überlegen!

Intro.de

Intro.de ist noch ein wenig oldskool und schreibt die Infos unter die Eingabefelder. Ziemlich unübersichtlich, wie ich finde

StudiVZ

Studivz vergibt zwar fleissig Hinweise was man eingeben muss beim aktiven Feld, failt aber wegen Nicht-Meckern bei erkennbar falschem E-Mailformat und akzeptiert auch ein falsch eingegebenes zweites Passwort absolut meldungslos. Die Meldungen kommen erst, wenn man auf “immatrikulieren” klickt, Daten bleiben aber vorhanden.

Lastfm

lastfm vergibt direkt nach Falscheingabe eine Meldung, aber bei Erfolg bekomme ich kein Feedback, gut? schlecht?
Ich finds zielgruppenspzifisch nicht schlecht, man bekommt nur ne Meldung wenn was schiefläuft und sonst wird man in Ruhe gelassen. Kann nicht so internetaffine Nutzer aber trotzdem verwirren denke ich (da war ne Meldung, da kommt keine ..?)

Ich glaube einen Hoffnungsschimmer zu sehen und den Trend zum direkten Feedback zu erkennen. Auf das bald alle schlimmen Grusel-Formulare aussterben!
Was denkt ihr & wie löst ihr das?? Was ist für euch die beste Alternative? Habt ihr Grusel-Beispiele und gute Lösungen?
Ich freu mich über Kommentare! :)

Webkit unterstützt ja bislang als einziger Browser die CSS 3 Eigenschaft “Gradient” // Property: -webkit-gradient (Farbverläufe linear & radial)
So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln - wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4 - also bei der Anwendung der Eigenschaft bitte niemals vergessen einen Fallback mit einer Hintergrundfarbe für die Browser zu schreiben, die das nicht unterstützen.

Wer nun auf jeden Fall per CSS seine Farbverläufe gestalten möchte, dem sei der Gradient Generator von den Westciv Tools empfohlen. Einfach die gewünschten Farbwerte & Einstellungen wählen, und den CSS-Code generieren lassen.

Ich persönlich finde ja ein 1px breites Hintergrundbild, welches wenigstens browserübergreifend funktioniert, momentan immer noch die bessere Wahl - trotzdem ein nettes Tool, welches man sich ja mal vormerken kann und mit rumspielen kann ;)

http://webkit.org/blog/175/introducing-css-gradients/
http://westciv.com/tools/gradients/

Hier gibts übrigens auch die ausführliche Anleitung, wie man den von Grund auf gruseligen Googlereader auch in Fluid zum übersichtlichen Augenschmaus transformiert.

Danke an Josef Richter