anwendbar.ch

Usability vs. User Experience

Renato — Tue, 22 Jan 2019 11:28:36 +0000

Usability oder User Experience – was jetzt?

In der Praxis werden die beiden Begriffe “inflationär” angewendet bzw. bei verschiedensten Themen eingebracht. Dieser Blogartikel versucht sie beiden Begriffe wissenschaftlich korrekt zu definieren bzw. voneinander zu dividieren.

Begriffsdefinition Usability

Ob ein technisches bzw. interaktives System genutzt werden kann oder nicht, war in der Vergangenheit häufig davon abhängig, wie viele Funktionen es hatte und wie diese umgesetzt waren. Erst mit zunehmender Komplexität der Systeme kam die Dimension der «Benutzerfreundlichkeit» dazu. Dieses Begriffskonstrukt wurde im Verlauf durch den englischen Begriff «Usability» ersetzt, welcher neuzeitlich mit der deutschen Bezeichnung der «Gebrauchstauglichkeit» gleichgesetzt wird (Sarodnick & Brau, 2016, S. 19).

Jakob Nielsen hat den Begriff der Usability um die Jahrtausendwende massgebend mitgeprägt. Grundsätzlich vertritt Nielsen (2001, S. 9) die Meinung, dass jedes interaktive System ein Ziel bzw. einen konkreten Zweck anstrebt. Gute Usability zeigt sich folglich darin, ob ein interaktives System die Anwender bei der Erledigung von definierten Aufgaben zweckmässig und zielorientiert unterstützt. Mit schlechter Usability ist der Anwender konfrontiert, wenn er das Bedienkonzept nicht intuitiv erfassen kann. Als Folge schlechter Usability können die oben erwähnten Ziele des interaktiven Systems nicht erreicht werden bzw. der Anwender widmet sich einem anderen System (beispielsweise Website eines Konkurrenten) zu. Nielsen definiert Usability weiter als Qualitätsattribut, welches beschreibt, wie einfach eine Mensch-Maschinen-Benutzerschnittstelle zu bedienen ist. Nielsen weist Usability fünf massgebende Qualitätskomponenten zu, mit welchen eine Schnittstellen-Beurteilung möglich wird. Die „Learnability“ befasst sich mit dem Grad der Einfachheit, mit welcher ein Anwender grundlegende Aufgaben bei einem Erstkontakt mit einem System abwickelt. Die „Efficiency“ beinhaltet die Geschwindigkeit, mit welcher ein Anwender eine Aufgabe mit einem ihm vertrauten System ausführt. Mit „Memorability“ wird festgehalten, wie einfach es für einen Anwender ist, mit einem System zu interagieren, welches er bereits kennt aber über eine gewisse Zeitspanne nicht mehr verwendet hat. Als weitere Komponente hat Nielsen «Error» festgelegt. Error befasst sich mit der Anzahl Fehlern bzw. deren Schweregrad, wie sie im Umgang mit einem interaktiven System geschehen können. Als letzte Komponente nennt Nielsen die „Satisfaction“, welche umschreibt, wie zufrieden ein Anwender im Umgang mit einer Benutzerschnittstelle ist (Nielsen, 2003, S. 1-2).

Ähnlich wie Nielsen ordnen Dumas und Redish den Begriff Usability ein:

„Usability means that the people who use the product can do so quickly and easily to accomplish their own tasks“ (Dumas & Redish, 1999, S. 4)

Gegenüber Nielsen, gilt diese Definition aber nicht ausschließlich für Software-Produkte, sondern kann in einem breiteren Kontext eingesetzt werden. Analog zu Nielsen stehen auch bei Dumas und Redish die Anwender im Mittelpunkt, wenn es um die Beurteilung der Usability geht. Sie gehen davon aus, dass die Anwender ein Produkt einsetzen, um Aufgaben zu erledigen. Dabei möchten die Anwender möglichst produktiv sein, wobei diese Produktivität eben nicht nur die eigentliche Zielerreichung im Fokus hat, sondern auch die damit verbundenen Arbeitsschritte und die eingesetzte Zeit. In den Ausführungen von Dumas und Redish kommt explizit zum Ausdruck, dass die Anwender eines Produktes über den Grad der Gebrauchstauglichkeit entscheiden und nicht die Menschen, die bei der Produktentwicklung involviert waren (Dumas & Redish, 1999, S. 4ff).

Die einleitend erwähnten Sarodnick und Brau liefern eine Begriffsdefinition aus dem deutschsprachigen Sprachraum. Diese stützt sich auf die seit 1997 verfügbare Norm DIN EN ISO 9241, welche „[…] Usability als das Ausmass definiert, in dem ein technisches System durch bestimmte Benutzer in einem bestimmten Nutzungskontext verwendet werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ (Sarodnick & Brau, 2016, S. 20). Die Beiden heben das Dreieck des einzusetzenden Systems, der zu erledigenden Aufgabe und der realen Anwender explizit hervor, die als Qualität der Zielerreichung die Usability aus Anwendersicht definiert. Dies begründen sie damit, als dass technische Systeme in eingebetteter Form (innerhalb von Prozessen) der Zielerreichung dienen sollen. Die Funktionalität eines Systems soll sich folglich an den Anforderungen des jeweiligen Prozesses ausrichten – und nicht umgekehrt (Sarodnick & Brau, 2016, S. 19-20).

Zusammengefasst kann festgehalten werden, dass der Begriff der Usability kein genormter Begriff ist und es dementsprechend keine allgemein gültige Definition gibt. Einigkeit herrscht in der Literatur darin, dass Usability nicht direkt eine Produkteigenschaft ist, sondern ein Benutzungsattribut einer Anwenderinteraktion mit einem Produkt (z. B. interaktives System) darstellt. Usability muss folglich immer im Kontext seiner Verwendung beurteilt werden. Dabei stehen die Anwender immer im Zentrum. Diese Tatsache unterstreicht die Nähe von Usability zum User-Centered Design-Ansatz, bei welchem alle Handlungen zur Realisation von interaktiven Systemen von den Anwendern ausgehen. Die Verbindung ist insofern unabdingbar, als dass der Qualitätsgrad von Usability in den realen Anwendern entsteht.

Einstimmigkeit herrscht größtenteils darin, dass gute Usability kein „nice-to-have“ ist. Im Gegenteil: Usability gilt als Voraussetzung für erfolgreiche interaktive Systeme. Finden beispielsweise Anwender die Produkte in einem Shop nicht, so können sie diese auch nicht kaufen und suchen das gewünschte Produkt bei einem anderen Anbieter.

Begriffsdefinition User Experience

Der Begriff der User Experience (= UX) lässt sich am besten mit Nutzungserlebnis bzw. Nutzungserfahrung ins Deutsche übersetzen. „UX“ entsteht immer dann, wenn sich ein Anwender auf eine Produktinteraktion einlässt – dies können digitale oder physische Anwendungen sein (Richter & Flückiger, 2016, S. 12-13).

Garret umschreibt „UX“ als die Erfahrung, welche ein Anwender durch das Benutzen eines Systems sammelt. Folglich geht es bei „UX“ nicht um irgendwelche raffinierten technischen Funktionen, sondern wie das System nach aussen in der Gesamtbetrachtung auf den Anwender hin wirkt und welchen Eindruck es hinterlässt.

Bei der Gestaltung von Systemen mit guter „UX“ muss nach Garrett darauf geachtet werden, dass die ästhetischen und funktionalen Aspekte an die jeweilige Anwendung bzw. den Nutzungskontext angepasst werden. Umso komplexer ein System wird, umso schwieriger wird es festzuhalten ist es festzuhalten, welche Faktoren ausschlaggebend für eine gute „UX“ sind. Wird bei einem bestehenden System versucht, die „UX“ zu optimieren, so ist dies immer mit einer Effizienzverbesserung in Verbindung zu bringen. Effizienz meint in diesem Zusammenhang ein einfacheres, fehlerfreieres und dadurch schnelleres Arbeiten. Daraus resultiert eine höhere Produktivität, weniger Frust und als Folge davon mehr Spass bei der Arbeit.

Garrett geht gar so weit, als dass er der „UX“ mehr Gewichtung in der für die Geschäftsbeziehung wichtigen Kundenbindung schenkt als irgendwelchen Leistungsmerkmalen bzw. Funktionen (Garrett, 2012, S. 3-17).

Albert & Tullis weisen explizit darauf hin, dass „UX“ grundsätzlich in allen Lebenslagen anzutreffen und dadurch als Begriff nur schwer zu definieren ist. Nach ihnen entsteht „UX“ im Zusammenhang mit einem interaktiven System, wenn ein Anwender mit einem Produkt, einem System oder mit irgendeiner Mensch-Maschinen-Schnittstelle interagiert. Mit der Interaktion entwickelt der Anwender Erfahrungen, welche von Interesse, beobachtbar oder messbar sein müssen – wobei dies vor allem im Zusammenhang mit der Messbarkeit von „UX“ zu stellen ist (Albert & Tullis, 2013, S. 43-44).

Häufig werden die Begriffe der „UX“ und der Usability in der Praxis durcheinandergebracht. Sarodnik und Brau betrachten die Usability vereinfacht formuliert als Teilmenge der umfassenden „UX“. Bewertbare Usability wird immer während der Benutzung eines interaktiven Systems sichtbar und ist meist eher rational-funktionsbezogen. „UX“ hingegen umfasst zusätzlich vorweggenommene Aspekte (im Vorfeld der Interaktion), basierend auf Annahmen und Vorstellungen des Anwenders, sowie die gesammelten Erfahrungen nach der Benutzung des Systems. Folglich umfasst „UX“ das gesamte Anwendererlebnis und kann als deutliche Erweiterung von Usability betrachtet werden (Sarodnick & Brau, 2016, S. 22).

Hassenzahl et al. gehen noch einen Schritt weiter: «Langsam aber sicher wird der Begriff Usability durch „UX“ […] ersetzt.» (Hassenzahl & Burmester et al., 2008, S. 78). Weiter werden drei Charakteristiken genannt, die „UX“ auszeichnen bzw. über welche sich die Usability besser abgrenzen lässt:

Ganzheitlich: „UX“ ist eine ganzheitliche Sichtweise und betrachtet rationale wie auch emotional nicht-instrumentale Qualitäten, wogegen Usability hauptsächlich auf die Aufgaben des Anwenders fokussiert ist.
Subjektiv: „UX“ befasst sich mit der subjektiv wahrgenommenen Qualität eines Systems, da diese beeinflussend auf die weitere Verwendung bzw. auf die mit dem System verbundene Kommunikation wirkt. Usability-Methoden, wie beispielsweise Eye-Tracking, sind auf Objektivität bzw. Beobachtung ausgerichtet. Sie liefern immer indirekte Resultate.
Positiv: „UX“ ist gefühlsbetont und umfasst teils hoch emotionale Aspekte wie Freude, Schönheit, Attraktivität etc. Usability hingegen befasst sich mehrheitlich mit Stressverminderung und Mängelbehebung – versucht sich also in der Verminderung von negativen Momenten.

Hassenzahl et al. zeigen auf, dass mit Usability alleine keine ganzheitliche Zufriedenheit erreicht werden kann. Es fehlen die emotional nicht-instrumentalen Elemente, wie sie vom „UX“-Konzept geboten werden (Hassenzahl & Burmester et al., 2008, S. 78-79).

Bemerkenswert ist, dass „UX“ seit 2010 in einer ISO-Norm definiert ist. ISO 9241-210 beschreibt „UX“ als: „Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder der erwarteten Benutzung eines Produkts, eines Systems oder einer Dienstleistung resultieren“. Dabei umfasst „UX“ […] „sämtliche Emotionen, Vorstellungen, Vorlieben, Wahrnehmungen, physiologischen und psychologischen Reaktionen, Verhaltensweisen und Leistungen, die sich vor, während und nach der Nutzung ergeben.“

Der „UX“-Begriff wird übermässig viel und in verschiedenen Kontexten in Literatur und auf Websites verwendet. So muss festgehalten werden, dass „UX“ insbesondere im populär-wissenschaftlichen Bereich, den Status eines «Buzzwords» längst erreicht hat. Eine Prüfung des Begriffs mit Google Trends bestätigt diesen Eindruck und zeigt das weiterhin steigende Interesse am Terminus. In diesem Zusammenhang ist zu erwähnen, dass der „UX“-Begriff eigentlich erst ca. 20 Jahre alt ist, dafür aber in Bereichen angewendet wird, die enormen Innovationszyklen unterworfen sind – denken wir nur an die ersten kommerziellen Webangebote um die Jahrtausendwende über die Smartphone-Entwicklung bis hin zum heutigen Trend vom Internet der Dinge. Die rasende Entwicklung scheint den Begriff insofern strapaziert zu haben, als dass dieser sich hinsichtlich seiner Bedeutung über die Jahre stets gewandelt hat bzw. erweitert wurde. Weg von den eher technischen Aspekten hin zu Dimensionen wie Emotionen, Ästhetik und Spass im Umgang mit interaktiven Systemen – also Aspekte, die es in der technisch geprägten Systementwicklung früher nicht gab. Es reicht folglich nicht mehr, lediglich funktionierende Systeme zu bauen, die von den Anwendern verstanden bzw. bedient werden können. Vielmehr geht es im Sinne einer guten „UX“ darum, Systeme zu entwickeln, die einen positiven anhaltenden Gesamteindruck hinterlassen.

Literaturverzeichnis

Albert, W., & Tullis, T. (2013). Measuring the user experience: collecting, analyzing, and presenting usability metrics. Waltham: Elsevier.

Dumas, J. S., & Redish, J. (1999). A practical guide to usability testing. Exeter: Intellect Books.

Garrett, J. J. (2012). Die Elemente der User Experience: Anwender-zentriertes (Web-) Design. München: Pearson Education Deutschland.

Goodwin, K. (2011). Designing for the digital age: How to create human-centered products and services. Indianapolis: Wiley Publishing Inc.

Hassenzahl, M., Burmester, M., & Koller, F. (2008). Der User Experience (UX) auf der Spur: Zum Einsatz von www. attrakdiff. de. Usability Professionals, Hrsg.; Brau, H.; Diefenbach, S.; Hassenzahl, M.; Koller, F.; Peissner, M. Rose.

Nielsen, J. (2012). Usability 101: Introduction to usability. Nielsen Norman Group. Abgerufen von http://www.nngroup.com/articles/usability-101-introduction-to-usability/ [2016-10-12]

Nielsen, J. (2001). Designing Web Usability. Burgthann: Markt + Technik Verlag.

Richter, M., & Flückiger, M. D. (2016). Usability und UX. In Usability und UX kompakt. Berlin, Heidelberg: Springer-Verlag.

Sarodnick, F. & Brau, H. (2016). Methoden der Usability Evaluation. Wissenschaftliche Grundlagen und praktische Anwendungen. Bern: Verlag Hans Huber.

The post Usability vs. User Experience appeared first on anwendbar.ch.

Alternativen zum Homepage-Slider

Renato — Fri, 19 Jan 2018 16:01:54 +0000

Im Beitrag “Slider – Bühne frei oder Abgang?” wurde auf die Vor- und Nachteile von Slidern/Karussellen/Bühnen (folgend Slider) eingegangen. Unbeantwortet blieb, welche Alternativen es zu diesen Interaktionselementen eigentlich gibt. Dieser Artikel geht genau dieser Fragestellung nach.

Um sich dem Thema anzunähern wurden in einem ersten Schritt bekannte und (vermutlich) stark frequentierte Schweizer Websites auf deren Lösungsansatz hinsichtlich des Slider-Einsatzes (oder eben nicht) analysiert. Hinweis: Alle Screenshots wurden im Oktober 2017 gemacht.

Screenshot	Beschreibung
Screenshot www.zurich.ch - Homepage Sliderbereich	Zürich Versicherungs-Gesellschaft AG Verzichten auf einen animierten Slider. Anstelle dessen wird ein grosses Headerbild, mit dazugehörender Headline und zwei integrierten Handlungsaufforderungen eingesetzt. Interessant sind zudem die drei darunterfolgenden, vom Bild abgesetzten Links, welche die Benutzenden direkt bei ihren Bedürfnissen abholen sollen.
Screenshot www.20min.ch - Homepage Sliderbereich	20 Minuten Kein Slider im Einsatz - stattdessen werden einzelne durch Bildgrösse gewichtete Thementeaser eingesetzt. Dabei werden unterhalb der Teaser immer Links zu ähnlich gelagerten Artikel geführt.
Screenshot www.zalando.ch - Homepage Sliderbereich	Zalando Schweiz Ebenfalls: Slider gleich Fehlanzeige. An seiner Stelle wurde ein grosses Bild zu den Herbstaktionen eingefügt. Mit Klick auf das Bild gelangt man direkt zu eben diesen Aktionsangeboten. Direkt unterhalb des Bildes folgt eine Handlungsaufforderung "Jetzt shoppen".
Screenshot www.roche.ch - Homepage Sliderbereich	Hoffmann-La Roche Ltd Auch Roche verzichtet auf einen animierten Slider. Auf der Startseite ist eine grossflächige Aufnahme von Basel und dem Rhein zu sehen, welche die Zugehörigkeit zu Schweiz unterstützt. Als erster Contentblock direkt unterhalb des Bildes, wird festgehalten, was die Kerngeschäfte des des Unternehmens sind. Weiter rechts werden diese Einträge ergänzt durch Links zu den jeweiligen Angeboten aus Diagnostik und Pharma.
Screenshot www.swisscom.ch - Homepage Sliderbereich	Swisscom (Privatkunden) Auch Swisscom setzt keinen Slider mehr ein. Stattdessen ist ein aktuelles Handyangebot geführt, welches direkt über Klick auf die Fläche oder eine Handlungsaufforderung die innerhalb des Bilder angebracht ist, angeklickt werden kann. Direkt unter dem Element wird man in der Swisscom-Welt willkommen geheissen und entsprechende Verlinkungen zu weiterführenden Informationen angeboten.
Screenshot www.srf.ch - Homepage Sliderbereich	Schweizer Fernsehen Die Website des Schweizer Fernsehen kommt ebenfalls ohne Slider aus. Die Startseite ist hauptsächlich mit Teaserboxen (Überschrift, Bild, Anriss) besetzt. Interessantes Detail: Bei teil Artikeln ist ein Icon überlagernd im Bildbereich eingesetzt. Das Icon signalisiert, dass die Benutzenden an Media-Assets (bsp. Video, Galerie etc. auf der Artikelseite erwarten.
Screenshot www.sonova.ch - Homepage Sliderbereich	Sonova Endlich wieder einmal ein Slider. Sonova setzt das Element direkt unter der Hauptnavigation ein. Der Slider zeigt immer einzelne Themen mit Überschrift, Kurztext und Bild. Als Navigationselemente stehen die "obligaten" Punkte, sowie Pfeile am linken und rechten Brwoserrand zur Verfügung. Die Pfeile erscheinen jedoch nur dann, wenn die Benutzenden mit dem Mauscursor in Sliderbereich "fahren".
Screenshot www.che.sika.com - Homepage Sliderbereich	SIKA Ein klassischer Slider. Die Sujets ändern sich periodisch oder können mit den Navigationselementen unten links angesteuert werden. Fahren die Benutzenden mit dem Mauscursor über das Element, so erscheinen unterhalb des Teasertextes oben links zusätzlicher Inhalt. Das Objekt kann, wenn es auch eine explizite Handlungsaufforderung aufweist, an einem beliebigen Ort geklickt werden, um auf die Detailseite zu gelangen.
Screenshot www.nzz.ch - Homepage Sliderbereich	NZZ Auf der NZZ-Startseite wird kein Karussell eingesetzt. Die Online-Version der Tageszeitung zeigt ein grosses Bild mit Überschrift und einleitendem Kurztext.
Screenshot www.nestle.ch/de - Homepage Sliderbereich	Nestlé Auf der Startseite von Nestlé wird ein Slider eingesetzt der mit verschiedenen Themen bespielt ist. Auch hier wechseln sich die Sujets automatisch nach einem vorgegeben Zeitintervall ab, oder die Benutzenden interagieren über die Pfeile ganzen in den Bildecken rechts und links oder der Punktnavigation.
	Nespresso Auf der Startseite wird ein Slider eingesetzt, welcher "nett" in das Gesamtdesign eingebunden ist. Die einzelnen Slides wechseln automatisch und beinhalten immer eine Handlungsaufforderung. Interessant ist die Thumbnail-Ansicht (mit Texthinweis), wenn die Benutzenden mit dem Cursor über die Punktnavigation fahren.
Screenshot www.leshop.ch - Homepage Sliderbereich	LeShop.ch Auf der Startseite wird kein Slider angezeigt. Die Migros-Shoplösung präsentiert direkt Produkte die eingekauft werden können.
Screenshot www.digitec.ch - Homepage Sliderbereich	digitec.ch digitec hat sich ebenfalls vom Slider verabschiedet. Stattdessen wird ein grösser Bildbereich angezeigt, in welchem ein Produkt angezeigt wird.
Screenshot www.credit-suisse.com/ch/de.html - Homepage Sliderbereich	Credit Suisse Die Grossbank setzt auf der Startseite auf das Slider-Objekt. Das Karussell unterscheidet sich aber insofern von anderen Lösungen, als dass es zwar mehrer Slides aufnimmt, diese jedoch nicht automatisch wechseln. Ein Slidewechsel ist ausschliesslich über eine Benutzendeninteraktion möglich. Die Links auf die Inhaltsseite ist auf dem Titel und dem "Zum Artikel >" hinterlegt - was die Navigation nicht vereinfacht.
Screenshot http://new.abb.com/ch - Homepage Sliderbereich	Credit Suisse Auf der ABB-Website wird (ebenfalls) kein Slider eingesetzt. Das Unternehmen arbeitet lediglich mit einem grossen Bild bzw. einem dazugehörenden aktuellen Thema.

Fazit der Analyse

Es ist offensichtlich: Das Sliderobjekt wird nur noch zurückhaltend eingesetzt. Es hat nicht mehr die Verbreitung wie vor drei bis vier Jahren, als quasi keine Website vom Stapel ging ohne Slider. Im Rahmen der Überprüfung konnte nicht festgestellt werden, ob es gewisse Branchen/Bereich gibt, welche noch auf das Objekt setzen oder eben nicht. Vielmehr scheint es so, als dass sich die Website-Betreiber zunehmend den Nachteilen des Elemente (siehe dazu “Slider – Bühne frei oder Abgang?“, Absatz Nachteile von Slidern) bewusst werden bzw. der “fancy Bildwechseleffekt” langsam aber sicher ausgedient hat.

Alternativen zum (Homepage-)Slider

Welche Darstellungsoptionen gibt es aber eigentlich zum Slider? Im Folgenden werden einige Anwendungsbeispiele gezeigt, die Orientierung bieten und gleichsam Aussagekräftig sind.

Option 1: Nur Text (typografische Lösung)

Beispiel: www.team23.de (Stand 01.02.2018)

Es muss nicht immer ein Bilder oder ein Video sein. Manchmal reicht nur ein aussagekräftiger Text um eine Nachricht zu kommunizieren. Sicherlich unterstützt im oben aufgeführten Beispiel das grosszügige Hintergrundbild den Text.

Option 2: Bild mit Headline und Teasertext

Beispiel: http://www.faz.net/aktuell/ (Stand 01.02.2018)

Ein grosses Bild, ergänzend mit einführenden Textinformationen – ohne Bildwechsel. Dieser Lösungsansatz ist häufig auf Seiten von Medienhäuser zu sehen.

Option 3: Bild mit Handlungsaufforderung

Beispiel: www.wwf.ch (Stand: 01.02.2018)

Ein grosses, “starkes” Bild ergänzt mit einer Headline, einem Teaser und eine Handlungsaufforderung.

Option 4: Bild/Video mit Eingabeaufforderung

Beispiel: www.ryte.com (Stand: 01.02.2018)

Den Benutzenden direkt die Möglichkeiten geben eine Interaktion zu tätigen. Auf der Website ryte.com erfolgt das mit einem Formularfeld, in welchem man sicher für einen Testaccount für das SEO-Tool einschrieben kann.

Eine weitere Anwendung könnte zudem sein, die Benutzenden über eine Frage, oder eine Art Konfigurator bei ihren Bedürfnissen abzuholen. Ein im Ansatz gut umgesetztes Beispiel ist auf der Startseite der FFHS zu sehen:

Beispiel: www.ffhs.ch (Stand: 01.02.2018)

Mit der Abfrage nach dem passenden Studium werden die Besuchenden, welche sich nach einem Studiengang umsehen, direkt abgeholt und gelangen rasch zu den gewünschten Informationen.

Option 5: Auswahlmöglichkeit über Bildraster

Beispiel: https://www.georgiacenter.uga.edu/ (Stand: 01.02.2018)

Anstelle von einem grossen Bild können mehre Bilder eingesetzt werden. Im obigen Beispiel werden die Bildelemente nebeneinander angeordnet und bieten Schnelleinstieg zu (vermutlich) wichtigen Inhalten.

Natürlich geht es auch heftiger. Bei folgenden Beispiel wird ein ganzer Bildteppich als Einstieg eingesetzt.

Beispiel: www.viktoriaklein.de (Stand: 01.02.2018)

Option 6: Bewegtbild (Video)

Manchmal kann ein Bild eine Botschaft nicht alleine transportieren. In diesem Fall ist die Integration eines Videos oder einer Animation ein gute Möglichkeit, um die Aufmerksamkeit der Benutzenden zu gewinnen. Nur der “coolness” wegen sollten aber keine Videos eingesetzt werden. Die Bewegtbilder sollten etwas vermitteln, was über ein Einzelbild oder eine Diashow nicht möglich ist. Weiter sollte darauf geachtet werden, dass die Benutzenden auf über Alternativen (zum Beispiel Videotranskriptionen) an die Inhalte kommen.

Beispiel: https://www.american.edu/ (Stand: 01.02.2018)

Bitte auch daran denken: Gute gemachte Videos sind in der Regel aufwändig zu produzieren, beanspruchen Ladezeit und wenn sie von den Benutzenden einmal gesehen worden sind …

Welche Alternativlösung ist die Beste?

Wer hätte es gedacht: Ich kann/möchte an dieser Stelle keine Empfehlung abgeben. Keinesfalls würde ich auch kommunizieren, dass Sliderlösungen im allgemeinen zu verbannen sind. Im Zentrum der Überlegungen sollte immer die Anwendung bzw. die damit verbundenen Ziele /Absichten der Website stehen – natürlich ohne die Benutzenden-Perspektive zu vergessen.

Wichtig erscheint es mir, dass der Inhalt im Objekt “lebt”. Was nützt das “coolste” Video auf der Startseite, wenn es mehrere Monate auf der Website ist. Dieser Faktor muss zwingend in die Überlegungen mit einbezogen werden. Geht man beispielsweise davon aus, dass man das Element nicht häufig verändern kann/will, so sollte der entsprechende Bereich auch nicht allzu gross gewählt werden bzw. ehe auf “statische Lösungen” zurückgegriffen werden.

The post Alternativen zum Homepage-Slider appeared first on anwendbar.ch.

Slider – Bühne frei oder Abgang?

Renato — Thu, 12 Oct 2017 15:35:01 +0000

Sie sind auf vielen Desktop-Websites auf der Homepage anzutreffen: “Slider”, “Karusselle” (engl. “Carousel”), “Bildbühnen”, “Slideshows”, “Image Slider”, “Image Rotator” oder wie sie auch bezeichnet werden.

Auch wenn der Slider heute nicht mehr so häufig wie vor wenigen Jahren anzutreffen noch ist, so wird er noch immer sehr intensiv eingesetzt. Dies mag nicht erstaunen, da durch den Slider verhältnismässig viele Informationen auf kleinem Raum abgebildet werden können. Diese primär visuellen getriebenen Möglichkeiten überdeckten lange die Usability-Probleme, welche ein Slider-Einsatz mit sich bringt. Dieser Artikel soll die Vor- und Nachteile von Slider auf Websites aufzeigen und Hinweise geben, auf was zu achten ist bei der Verwendung eines Sliders.

Definition(-sversuch) Slider

In der Literatur konnte keine eindeutige Definition des Begriffs im Sinne der Anwendung bei interaktiven Systemen gefunden werden. Grundsätzlich kann festgehalten werden, dass Slider an einer festen Position (in der Regel am Seitenanfang oben) verschiedene Inhalte (Bild, Video, Kurztexte) aufnehmen. Ein Slider besteht dabei häufig aus einzelnen Slides die bildlich gesprochen übereinander liegen – wobei immer nur ein Slide zu sehen ist. Die Elemente (Slides) wechseln sich automatisch oder ausgelöst durch eine User-Interaktion (MouseOver oder Klick) ab.

Beispielanwendungen Slider

Folgend werden verschiedene Desktop-Slider gezeigt bzw. deren Interaktionskonzept beschrieben.

Beispiel www.ethz.ch

Bildschirmausschnitt Slider der Homepage der ETH Zürich (www.ethz.ch, 06.10.2017)

Am Seitenanfang direkt unter der Hauptnavigation platziert – nicht über gesamte Seitenbreite. Die Beiträge wechseln sich in einer bestimmten Zeit ab. Alternativ lassen sie sich die Slides über die “Beitragpunkte” (grün) durch die Benutzenden steuern. Ist der Mauscursor auf einem Beitrag so wechselt dieser nicht automatisch weiter. Zusätzlich gibt es einen Play/Pause-Button. Die vor- und zurück Pfeile (Bild links und rechts) erscheinen nur wenn der Mauscursor auf dem Bild steht.

Der Slider ist intuitiv zu “bedienen” und überlässt den Benutzenden die Kontrolle.

Beispiel www.blick.ch

Bildschirmausschnitt Slider der Homepage von Blick (www.blick.ch, 06.10.2017)

Der vermutlich bekannteste Slider der Schweiz: Schlagzeilen auf blick.ch. Immer mit grossen Bilder und grossen Schriften. Zieht sehr viel Aufmerksamkeit auf sich. Die Beiträge wechseln sich ebenfalls nach einer bestimmten Zeit ab. Dabei spielt es keine Rolle ob die Benutzenden mit dem Cursor auf oder neben dem Slider sind. Steuern lässt sich der Slider über die unten angezeigten “Thumbs” oder die Pfeile links und rechts. Beim MouseOver über die Thumbs (Beispiel ganz links) wird angezeigt, wie viele Elemente (4/10) enthalten sind.

Der Slider ist nicht benutzerfreundlich realisiert. Er lässt sich nur schwer steuern mit den Pfeilen links und recht. Möchte man sich eine Schlagzeile genauer anschauen, so muss der Cursor unten auf dem Thumb sein. Hinzu kommt, dass max. 5 Beiträge im sichtbaren Bereich sind. Im obigen Beispiel sind fünf weitere nicht zu sehen bzw. müssen “annavigiert” werden.

Beispiel www.sp-ps.ch

Bildschirmausschnitt Slider der Homepage der SP Schweiz (www.sp-ps.ch, 06.10.2017)

Auch auf Politik-Websites sind Slider zu finden – im Beispiel jener der SP Schweiz. Die Textelemente rechts sind die eigentliche Slidernavigation. Mit dem Mauscursor haben die Benutzenden die Möglichkeit, sich die unterschiedlichen Beiträge anzuschauen. Die Bilder links passen sich mit leichter Verzögerung (um “Flackern” zu verhindern) den Mausbewegungen an.

Einfach gehaltener Slider, der sich intuitiv bedienen lässt und gleichzeitig nicht inhaltlich überladen ist.

Beispiel www.coop.ch

Bildschirmausschnitt Slider der Homepage COOP (www.coop.ch, 06.10.2017)

Der am Seitenanfang stehende Slider lockt mit grossen Bildern. Die Navigation funktioniert ähnlich, wie bei jenem der ETH Zürich. Einzig wechselt der Slider die Beiträge auch, wenn der Mauscursor auf dem Bild ist. Ansonsten helfen die Pfeile die nach links und rechts zeigen, sowie die “Punkt-Navigation” unten. Auffallend an diesem Beispiel ist die hinzugesetzte Handlungsaufforderung (“Call2Action”).

Der Slider verhält sich so, wie es sich die Benutzenden gewöhnt sind. Er überlässt den Benutzenden weitestgehend die Kontrolle.

Beispiel www.adidas.ch

Bildschirmausschnitt Slider der Homepage von Adidas (http://www.adidas.ch, 06.10.2017)

Ist das ein Slider oder “integriertes Screendesign”? Entgegen anderen Beispielen hat Adidas den Slider originell in das Design integriert, so dass er nicht als isoliertes Objekt wahrgenommen wird. Die Interaktion funktioniert (wie gehabt) über die Pfeil- und “Punktnavigation”. Die Beiträge wechseln sich nicht, wenn der Mauscursor auf dem Objekt ist. Die beiden Bilder unten gehören nicht mehr zum Slider. Auffallend sind auch die beiden blau gehaltenen Handlungsaufforderungen.

Der Slider wird nicht als solcher wahrgenommen. Die sich wechselnden Bilder sind sehr dominant, vermitteln gleichzeitig eine kräftige Portion “Adidas”. Die Bedienelemente werden wohl bewusst zurückhaltend eingesetzt.

Beispiel: www.syndicom.ch

Bildschirmausschnitt Slider der Homepage der Gewerrkschaft syndicom (http://www.syndicom.ch, 06.10.2017)

Der grossflächige Slider ist unterteilt in einen Bildbereich, einen Bereich der sich inhaltlich auf das Bild bezieht und einem erweiterten Inhaltsbereich unten, der gleichzeitig als Navigation dient. Die Beiträge wechseln sich nach einer gewissen Zeit ab. Gleichzeitig können die Benutzenden über die Navigation unten die gewünschten Beiträge ansteuern – wobei ein Klick notwendig ist. Bei MouseOver wird zwar ein entsprechender Status angezeigt, aber die Beiträge ändern sich nicht.

Der Slider ist einfach durch die Benutzenden zu “handeln”. Etwas gewöhnungsbedürftig ist die Navigation im unteren Bereich, da die Elemente nicht aufeinander abgestimmt erscheinen.

Beispiel: www.porsche.ch

Bildschirmausschnitt Slider der Homepage von Porsche Schweiz (http://www.porsche.ch, 06.10.2017)

Auf der Schweizer Porsche-Website wird ganz zu Anfang ein Slider eingesetzt um die Sprachwahl zu treffen. RIchtig gelesen. D.h. der Slider besteht aus drei Elementen: Deutsch, Französisch, Italienisch – die aufeinander folgen. Die Optionen werden also nicht direkt angeboten, sondern müssen “Stück-für-Stück” angewählt werden. Haben sich die Benutzenden für eine Sprache entschieden, erscheint abermals ein Slider der dann “wirkliche Inhalte” aufnimmt.

Ein Slider als “Sprachweiche” einzusetzen ist mit Sicherheit nicht die richtige Wahl. Es stellt sich zudem die Frage, wie sinnvoll es ist, mehrere Slider nacheinander anzubieten. Da nützen auch schnelle Autos nichts …

Vorteile von Slidern

Slider können (sofern sie gut gemacht sind) attraktive Website-Elemente sein, die als “Catcher” für Schlagzeilen, Sonderangebote etc. auf einer Homepage einen wichtigen Platz einnehmen können. Sie haben die Fähigkeit “viele” Inhalte auf begrenztem Platz aufzunehmen – so können beliebige Dienstleistungen oder Produkte eines Unternehmens “durchrotiert” werden.

Nachteile von Slidern

Slider werden nicht betrachtet

2012 veröffentliche die Nielsen Norman Group einen Beitrag (https://www.nngroup.com/articles/auto-forwarding/) in welchem aufgezeigt wurde, dass Slider (wie auch Inhalte in der rechten Spalte und Werbe-Banner) kaum beachtet werden. Der Beitrag basiert auf einem Test der Siemens-Website, auf welcher in einem Slider ein 100£-Gutschein beim Waschmaschinen-Kauf angeboten wurde.

Testaufgabe: “Does Siemens have any special deals on washing machines?” (Quelle: https://www.nngroup.com/articles/auto-forwarding/)

Das “Angebot” funktionierte nur unzureichend (kaum betrachtet und geklickt), wobei die Untersuchung folgende Hauptgründe ausmachen konnte:

Der Slider wirkt wie ein “mühsamer” Werbebanner und wurde nicht als Angebot des Website-Betreibers wahrgenommen.
Auch der enthaltene Text wirkte auf die Benutzenden aufdringlich, wie jener eines konventionellen Werbebanners.
Ein weiteres, technisches Problem, war die Rotationsgeschwindigkeit des Banner. Die Beiträge wechselten sich so rasch, als dass den Benutzenden die Zeit fehlte, sich die Anzeige genauer zu betrachten.

Kritische Betrachtung: Es wäre nicht korrekt Rückschluss auf alle Slider zu nehmen aufgrund der Erkenntnisse dieses Versuchs. Schliesslich ist es eine individuelle Slider-Anwendung des Website-Betreibers. Wie hätte der Versuch geendet, wenn der Slider-Beitrag nicht derart plakativ gewesen wäre?

Slider werden nicht geklickt

Repräsentativer war eine Untersuchung im Jahr 2013 der University of Notre Dame (https://www.nd.edu). Die Untersuchungsgrundlage bildete ein Slider der auf mehreren Website mit unterschiedlichen Ausrichtungen und Anspruchsgruppen platziert wurde, um die Betrachtungs- bzw. Interaktionsfähigkeit zu beurteilen. Die unter https://erikrunyon.com/2013/01/carousel-stats publizierten Ergebnisse zeigen auf, dass lediglich 1 bis 2% der Besuchenden auf den Slider klicken – wobei 84% nur den ersten Slide berücksichtigen! Die Ergebnisse waren zwar von Website zu Website etwas unterschiedlich, aber es konnte eindeutig festgestellt werden: Benutzende interagieren kaum mit Slidern.

Schlechte Klickraten bei Slidern – lediglich der erste Slide wird anangeschaut (Quelle: https://erikrunyon.com/2013/01/carousel-stats/)

Slider brauchen sehr viel Platz

Slider-Elemente sind in der Regel grosszügig gehalten, so dass sie meist grosse Teile des sichtbaren Bereichs einer Website beanspruchen. Es stellt sich in diesem Zusammenhang die Frage, ob die grosse, verschwendete Fläche nicht besser für konkrete Inhalte genutzt werden sollte, um den Benutzenden passende Inhalte anstatt irgendwelche unwichtigen Schlagzeilen zu zeigen.

Slider sind nicht auf “benutzerfreundliche Bedienung” ausgelegt

Häufig bieten Slider den Benutzenden schlechte Kontrolle – sie sind dem Slider ausgesetzt. D.h. Benutzende können nicht selber darüber entscheiden, was sie wie lange anschauen möchten. Dies ist insofern problematisch, als dass sich Aufnahmefähigkeit bzw. das Konsumverhalten von Inhalten stark unterscheidet. Bei mach Benutzenden kann es kaum schnell genug gehen, wogegen andere sich Zeit für Bild und Text nehmen möchten.

Slider sind nicht (oder nur bedingt) für mobile Webangebote geeignet

Eine Pauschalaussage ist in diesem Zusammenhang natürlich nicht zulässig. Aber ein Grossteil der eingesetzten Slider eignen sich nicht für die Anwendung auf Smartphone. Die Bedienung der Slider ist auf mobilen Endgeräten häufig “kniffelig” und beinhaltet in der Regel ein grosses Frustpotenzial. Ganz ärgerlich wird es, wenn man den Slider nicht nach rechts oder links (Swipe) verschieben kann – sofern dieses Interaktionsmuster überhaupt erkannt wird.

Slider machen die Website langsam

Ein Slider der mehrere grosse Bilder laden muss, verlangsamt die Ladezeiten von Websites offensichtlich. Da viele der Sliderbilder beim initialen Seitenaufruf nicht sichtbar sind, “verschlimmert” sich dieses Problem wesentlich.

Slider bieten wenig Orientierung

Durch die dauernd wechselnden “Slidebeiträge”, mit den wechselnden Motiven, Inhalten und damit verbundenen Aussagen sind Benutzende leicht zu verwirren. In diesem Zusammenhang müssen auch die kurzen Anzeigezeiten der Slider erwähnt werden – sie lassen kaum Zeit das Gesehene zu erfassen bzw. zu verarbeiten.

Slider sprechen passive Benutzende an

Um in den “Genuss” der Silderbeiträge zu kommen, müssten Benutzende wie im Kino eine Website “anschauen”. Dies geschieht aber bekanntlich nicht. Benutzende sind “bedürfnisorientiert ungeduldig” und nur selten bereit explorativ eine Website zu “erforschen”. Wird nicht das gefunden, wonach die Benutzenden auf der Suche sind, wechseln sie das Webangebot. Der Slider braucht schlichtweg zu viel Zeit um das zu zeigen, was er inhaltlich aufgenommen hat.

Slider sind nicht “accessible”

Die Bewegung/Animation des Slider ist für Benutzende, welche die Maus nicht gut (oder gar nicht) benutzen können ein Problem – sie sind dem Slider quasi ausgesetzt.

Fazit

Es kann nicht wegdiskutiert werden: Die Nachteile überwiegen die positiven Aspekte von Slidern.

Trotzdem: Es gibt (womöglich) immer wieder gute Gründe einen Slider einzusetzen. Die folgenden Tipps sollen dabei helfen einen passenden, auf die Benutzenden zugeschnittenen Slider zu realisieren:

Den Benutzenden gehört die Kontrolle! Der Slider soll so angelegt sein, als dass er problemlos navigiert werden kann. Der Benutzende soll bestimmen können, wie lange er welchen Slide anschaut. Es reicht nicht, lediglich die Anzahl Slides durch eine “Punktnavigation” anzuzeigen. Besser werden Teaser oder Thumbs verwendet, welche aufzeigen, was die Benutzenden erwartet.
Der Slider sollte maximal fünf “Slides” aufnehmen. Bei produktgetriebenen Websites dürfen es mehr sein. Es sollte immer gezeigt werden wie viele einzelne Slides beinhaltet sind bzw. auf welchem sich die Benutzenden befinden. Die häufig verwendeten Punkte sind in der Regel viel zu klein, zu fummelig und zu unauffällig. Etabliert haben sich die etwas grosszügigeren Pfeile oder Slider-Beschriftungen, welche direkt als Navigationselement dienen. Auf Mobilgeräten sollte unbedingt “swipen” integriert werden.
Je nach Seite/Branche/Ausrichtung der Website sollte der Slider den Benutzenden direkt zeigen worum es auf der Seite geht.
Ein einzelner Slide soll immer als Ganzes einen Link darstellen. Es sollte darauf verzichtet lediglich einzelne Bereiche als Link auszuzeichnen, d.h. unterschiedliche Links pro Slide einzusetzen. Um die Handlungsaufforderung zu verstärken können zusätzlich Buttons und Co. eingesetzt werden.
Gutes Bildmaterial ist wichtig. Es ist daran zu denken, dass die Fotos keinen zu “werberischen Eindruck” hinterlassen. Sie sollen authentisch sein und die Aussage des jeweiligen Slides unterstützen. Gleichzeitig gilt es daran zu denken, dass das Bild auch auf kleinen Bildschirmen funktionieren muss.
Auf Smartphone funktionieren Slider praktisch nicht. Deshalb sollte wenn immer möglich der Desktop-Slider gänzlich weggelassen werden auf mobilen Endgeräten. Es empfiehlt sich die einzelnen Slides als einzelne “Teaserelemente” aufzuführen, welche untereinander erscheinen.
Die einzelnen Slide-Elemente dürfen sich nicht zu schnell abwechseln. Den Benutzenden soll genügend Zeit gelassen werden ein Objekt nach deren Erfassung zu klicken. Wechseln die Slides zu rasch, müssen sich die Benutzenden mit dem ganzen Interaktionskonzept des Slides vertraut machen, da sie nicht warten möchten, bis genau der Slider wieder einmal erscheint. Weniger als fünf Sekunden sollten es nicht sein. Bei mehr als 12-15 Sekunden gehen wohl die meisten Benutzenden davon aus, dass etwas nicht stimmt bzw. haben die Seite längst verlassen.
Wenn immer möglich wird der Slider nicht als Ganzes geladen, sonder zuerst nur diejenigen “Anzeigen” welches es für die korrekte Initialdarstellung benötigt.
Ein Slider sollte immer eine Beschriftung aufweisen. Helfen Sie den Benutzenden mit einfachen, klar formulierten Kurztexten zu erkennen, wohin der nächste Klick führt. Bei Bedarf können noch längere Texte integriert werden.
Achten Sie auf guten Textkontrast zwischen Text und Bild
Davon ausgehend, dass die viele Benutzende den Slider überhaupt nicht betrachten, sollten alternative Zugänge zu den relevanten Informationen angeboten werden.

The post Slider – Bühne frei oder Abgang? appeared first on anwendbar.ch.

Einfacher Kreativitäsworkshop für kleine Gruppen

Pascal — Wed, 09 Nov 2016 19:04:09 +0000

Für die Aufgabe, mit einer Gruppe von Leuten rasch Ideen zu einem Thema zu generieren, hat sich folgendes Vorgehen eines Kreativitäsworkshops als effizient erwiesen. Als Resultat erhält man Ideen als Skizzen welche bereits eine erste Überarbeitung und Bewertung erfahren haben.

Hinweis: Der Ablauf setzt keinerlei Erfahrungen der Teilnehmenden im Umgang mit Kreativitätstechniken vor aus. Getestet habe ich den Ablauf mit 5 bis 10 Leuten.

Im folgenden Beispiel soll die Startseite einer SmarthPone-App neu gestaltet werden.

Sanfter Einstieg mit dem Methode “Blitzlicht”

Bei dieser Methode erhält jede Person genau eine Minute Zeit, um seine Erfahrungen bzw. Gedanken zur App auszudrücken.Der Fragefokus muss hierbei nicht ausschliesslich auf das zu bearbeitende Objekt – also die Startseite – gelegt werden. Vielmehr geht es darum eine allgemeine Meinung/Betrachtung abzufragen und um denjenigen etwas die Angst zu nehmen die von sich sagen, sie seien nicht kreativ.

Folgenden Regeln gelten für diese Methode:

Jede Person hat genau eine Minute Zeit – diese Minute sollte wenn immer möglich genutzt werden. Die Moderation stoppt die Zeit und bricht (allenfalls) ab.
Die Sprechenden werden nicht unterbrochen, weder durch Fragen noch durch Widersprechungen.
Was andere Personen schon gesagt haben kann wiederholt werden. Die Aussage “es wurde alles schon gesagt” ist hingegen nicht zugelassen.
Die Moderation notiert sich die wichtigsten Aussagen, speziell was wiederholt gesagt wird.

Im Anschluss fasst die Moderation kurz (ca. zwei Minuten) zusammen, und legt dabei den Fokus auf Dinge, welche mehrfach gesagt wurden. Auch hier erfolgt keine Bewertung und keine Diskussion.

Nun gehts ans Zeichnen im “Designstudio”

Bei dieser Methode arbeiten alle gleichzeitig, aber jeder selbstständig für sich. Es geht darum, in vier Minuten verschiedene Skizzen zum Thema “App Startseite” zu zeichnen. Dies kann auf einem weissen Papier gemacht werden, oder in diesem Beispiel in einer vorgedruckten Vorlage mit einem Smartphone-Umriss als Orientierungshilfe.

Nach der ersten Runde stellt jede Person ihre Skizzen innerhalb von zwei Minuten vor. Im Anschluss geben die anderen Personen ein Feedback zur präsentierten Skizze. Auch die Zeit für das Feedback sollte begrenzt werden auf, je nach Gruppengrösse, zwei bis vier Minuten.

Nun startet die zweite Runde, in welcher die Ideen weiter detailliert werden. Dabei ist es möglich an der eigenen Idee weiterarbeiten, andere Ideen zu verfeinern oder diese Ideen mit den eigenen Vorstellungen zu kombinieren. Gezeichnet wird auf leeren Blättern, die Skizzen aus der ersten Runde bleiben unangetastet. Für diese Runde sollten zwischen 5 und 10 Minuten eingeplant werden – wobei die Zeitdauer an der Komplexität des zu skizzierenden Produktes auszurichten ist.

Nun erfolgt die nächste Präsentationsrunde, die identisch abläuft wie die Erste. Je nach dem, wie konkret die Ideen ausgearbeitet werden sollen, können die Schritte “Skizzieren, Präsentieren, Feedback geben” beliebig oft wiederholt werden. Nach zwei Durchläufen liegen aber oft schon sehr gute Skizzen vor. Nach der letzten Feedbackrunde, geht es in den Abschluss.

Alle Skizzen werden nun gut sichtbar ausgelegt. Mit allen Teilnehmenden wird nun versucht, die Skizzen in Gruppen zusammenzufassen. Sind sich einige Skizzen sehr ähnlich, wird in der Gruppe entschieden welche davon aussortiert werden. Es geht in diesem Schritt um die Konsolidierung der Ideen.

Die abschliessende Bewertung mittels “Plädoyer”

Die konsolidierten Skizzen liegen nun vor und müssen noch bewertet werden. Damit dies möglichst einfach gelingt, sollten die Skizzen nummeriert werden..

Jede Person überlegt sich nun für sich, welcher Variante sie einen, zwei oder drei Punkte vergibt. Die Punkte können nur einmal vergeben werden.

Nun hält jede Person für ihren Favoriten ein Plädoyer. Hiebei geht es darum die Vorzüge dieser Skizze hervorzuheben und zu erklären, weshalb auch die anderen Teilnehmenden für diese Skizze ihre Punkte geben sollten. Erst wenn alle Plädoyers abgeschlossen sind, erfolgt die finale Punktevergabe. Dabei darf man sich durchaus auch gegenüber der ersten, stillen Bewertung umentscheiden.

Wie weiter

Das Vorgehen resultiert nicht in einer bis ins Details ausgearbeiten Idee. Sie liefert aber schnell viele und gute Ideen, welche im Anschluss z.B. nach deren Umsetzbarkeit bewertet und ausgearbeitet werden müssen. Dabei kann es durchaus sein, dass nicht die am höchsten bewertete Idee umgesetzt wird/werden kann.

The post Einfacher Kreativitäsworkshop für kleine Gruppen appeared first on anwendbar.ch.

Wie wir beim Startup eggheads Design und Usability angegangen sind

Renato — Tue, 12 Jul 2016 20:14:00 +0000

PraxisAls Startup-Gründer stehst du da mit einem bunten Strauss an Aufgaben in der Hand, um aus einer Idee etwas Greifbares zu machen. Die meisten Aufgaben packst du als Laie an – in unserem Fall unter anderem Design und Usability. Wie sind wir bei eggheads, dem Tripadvisor für die Weiterbildung, vorgegangen, um das Nutzererlebnis zu gestalten? Und was haben wir dabei gelernt? Diese Fragen greife ich in diesem Gastbeitrag auf.

Unser Ziel als Gründer war es, mit einer funktionierenden Beta-Version so früh wie möglich live zu gehen und so mit echtem Feedback zu lernen und unsere Hypothesen zu testen. Dazu gehörte neben dem Fokus aufs Wesentliche auch Mut zur Lücke – und das gilt auch noch heute. Wir sind „far from perfect“ – aber genau Perfektionismus können wir uns momentan (manchmal leider) nicht leisten. Auf ein Wort herunter gebrochen, wie wir Design und Usability angegangen sind: pragmatisch.

Was ist eggheads?

Die Idee zu eggheads.ch kam, als ich auf der Suche nach einer Weiterbildung war. Das Angebot war kaum zu überblicken, interessant klangen alle Kursausschreibungen aber wirklich nützlich waren erst die Gespräche mit Absolventen, die zu Stande kamen, weil Kursleiter Telefonnummern weiter gaben. Nach etwas Recherche zeigte sich: persönliche Empfehlungen beeinflussen am stärksten, für welche Weiterbildung sich jemand entscheidet. Da war klar, dass wir die Fährte aufnehmen. Seit Ende 2014 ist eggheads.ch nun als Beta live.

Für das CI/CD griffen wir bei eggheads auf professionelle Unterstützung zu: Fabienne Daugaard unterstützte uns. Mehr: www.fabiennedaugaard.ch/

Folgende Fragen stellen wir uns ständig:

Wo soll das Ganze hinführen?

Mit der Marke eggheads versprechen wir unseren Nutzern, dass sie mit dem Rat schlauer Köpfe (den eggheads), die richtige Weiterbildung finden. An diesem Markenversprechen orientieren wir uns auch bei der Architektur unserer Plattform. So soll die User Journey möglichst rasch zu einem einzelnen Kurs führen. Über die Suche oder beliebte Fachbereiche haben Nutzer zwei Wege, um eine für sie relevante Auswahl an Kursen zu überblicken und eine engere Auswahl zu treffen. Auf Ebene eines Kurses findet die Interaktion statt: sprich, dort können Nutzer miteinander und mit Kursleitern in Dialog treten, Bewertungen schreiben oder – in Zukunft – eine Beratung anfordern bzw. einen Kurs buchen.

An welche Prinzipien halten wir uns?

Bevor wir an die Umsetzung gingen, haben wir Gründer uns über ein paar Designprinzipien geeinigt. Patric und ich haben diskutiert, was uns bei der täglichen Internetnutzung als clever und ansprechend in Erinnerung geblieben ist. Für uns war somit klar, dass wir für eggheads ein reduziertes und fokussiertes Design wollen. Als Ideal setzten wir uns, dass auf jeder Seite der nächste Schritt klar sein sollte, so dass sich User nicht in einem Buttondschungel verklicken. Wir wollen, dass eggheads mobil – auf kleinen Screens für flüchtige Nutzer – ebenso klar und intuitiv ist. Wenn wir mit eggheads für Orientierung im Weiterbildungsdschungel bieten wollen, müssen wir unseren Useren eine klare Orientierung bieten.

Wie haben’s andere gelöst?

Was wir zum Loslegen benötigten, war keine Rocket Science. Darum suchten wir Vorbilder, die vergleichbare Aufgaben bereits gelöst hatten. Da wir eggheads als Tripadvisor für die Weiterbildung positionieren, haben wir Tripadvisor und anderen Plattformen im Reisesektor genauer unter die Lupe genommen und für unsere Zwecke übersetzt. Zudem haben wir bei den grossen Playern vorbei geschaut und gewisse Konstanten gefunden, z.B. bei den Proportionen der mobilen Startseite. Dies führte zu wertvollen Diskussionen und ermöglichte es uns, unsere Variante herauszuschälen. Der Experte mag hier einwenden, dass dieser Ansatz zu konventionellen Lösungen führt. Stimmt, aber als Startup taucht man als Nobody im Netz auf und da halten wir es für hilfreich, wenn sich User wenigstens mit der Nutzung vertraut fühlen.

Was sagen die User?

Wir haben Dutzenden von Freunden und Familienangehörigen aber auch emotional nicht Involvierten über die Schulter geschaut, wie sie die von uns gestellte Aufgabe auf unserer Plattform lösen. Es zeigte sich: der fokussierte Aufbau kam an, das Design gefiel, dafür stiessen andere Punkte auf Unverständnis, die wir für besonders smart hielten. Zum Beispiel hatten wir auf Kursebene einen Button mit „Bewertung anfordern“ beschriftet. Die Idee war, dass Nutzer damit via E-Mail oder soziale Netzwerke ihre Freunde fragen konnten, ob jemand eine bestimmte Weiterbildung besucht hatte und eine Bewertung abgeben könnte. Das war zu verdichtet, entsprechend verzichteten wir auf den Button. Noch heute haben wir Feedback, das berechtigt und wertvoll ist, aber das wir leider noch nicht umsetzen konnten. Diese Mängel gilt es auszuhalten und einen nach dem anderen zu beheben.

Wie verhalten sich die User?

Das eine ist, was Nutzer sagen, das andere, was sie tatsächlich auf der Plattform tun. Somit sind wir beim Stichwort Analytics. Die Fülle an Daten ist erdrückend und das Risiko gross, vor lauter Bäumen den Wald nicht mehr zu sehen. Darum war es auch bei der Analyse unser Ziel, uns nicht in einer Expertendiskussion zu verlieren sondern die groben Muster zu erkennen. So zeigte sich zum Beispiel, dass viele User das Navigationselement „Kurs finden“ drückten. Das schien uns unverständlich, gingen wir doch davon aus, dass die Suche selbsterklärend sei. Darum haben wir dann den Suchbutton mit „Kurs finden“ beschrieben. Den empirischen Beleg, ob die Suche dadurch häufiger gewählt wurde, muss ich schuldig bleiben. Andere Aufgaben schrien nach Aufmerksamkeit.

Unser Fundus an Ideen und Wünschen, wie wir eggheads weiter gestalten möchten, ist gross. Wir wissen, dass uns einiges gelungen ist, anderes aber noch im Argen liegt. Gewiss, es liegt noch viel vor uns liegt. Aber genau das gehört zum Reiz, von Null auf etwas aufzubauen mit sehr beschränkten Ressourcen: was muss ich tun, damit eggheads gelingt? Somit liegt der Ball bei dir, liebe Leserin, lieber Leser. Was müssen wir unbedingt noch tun bei eggheads?

The post Wie wir beim Startup eggheads Design und Usability angegangen sind appeared first on anwendbar.ch.

Grundlagen zum Erstellen von Personas

Renato — Fri, 08 Jul 2016 08:52:11 +0000

Personas stellen eine wichtige Methode in der Realisierung von interaktiven Systemen dar. Sie unterstützen das Projektteam die Zielgruppe besser zu verstehen und gleichzeitig helfen sie, den Perspektivenwechsel vom Kunden/Projektteam zum eigentlichen Benutzenden zu vollziehen.

Definition

Eine Persona ist ein exemplarischer Benutzer eines interaktiven Systems. Sie repräsentiert eine Benutzergruppe und deren Interaktion mit einem interaktiven System.

Wobei helfen Personas?

Perspektivenwechsel: Personas helfen den Projektbeteiligten die Sichtweise im Rahmen des Entwicklungsprozesses auf die Bedürfnisse der Benutzenden hin auszurichten.
Unterscheidung von Wünschen und Anforderungen: Häufig werden von Stakeholdern Anforderungen formuliert, die aus Personasicht keinen Nutzen bzw. Mehrwert bringen. Personas helfen auf die effektiven Anforderungen zu fokussieren.
Priorisierung von Anforderungen: Personas helfen die eruierten Anforderungen zu priorisieren. So finden in der Regel diejenigen Anforderungen zuerst Berücksichtigung, die sich auf die Persona beziehen.
Personas sind leicht verständlich formulierte Beschreibungen der Anspruchsgruppen. Sie werden vom Management, der Projektleitung, den Designern, der Entwickler etc. verstanden. Dadurch können sich die Projektbeteiligten auch problemlos in die Persona hineinversetzen und deren Bedürfnisse nachvollziehen.
Konkretisierend und Sinn gebend: Insbesondere für alle in den Entwicklungsprozess beteiligten Personen sind Personas “wahrnehmbare Bezugspersonen”. Dadurch findet eine intensivere Identifikation mit dem Projekt bzw. den Zielgruppen statt.

Wie wird eine Persona erstellt?

Eine Persona darf keine Erfindung sein, das heisst sie ist faktenbasiert zu erstellen – aus realen Informationen über die Zielgruppe. Für die Datenerhebung eignen sich insbesondere Interviews und Umfragen. Die Ergebnisse sollen die Identifikation der wichtigsten Zielgruppen und deren repräsentativen Eigenschaften zulassen, welche wiederum verdichtet in eine Personabeschreibung transformiert werden.

Der Aufwand zur Erstellung von Personas sollte keinesfalls unterschätzt werden. Um empirische Informationen zu erhalten sollten ca. acht bis zwölf Interviews zu einer Stunde einberechnet werden – gefolgt von Dokumentation und Auswertung. Bei umfangreicheren System muss die Interviewgruppe nach oben hin skaliert werden.

Abgekürztes Verfahren

In der Praxis wird aufgrund des vorher beschriebenen Aufwandes häufig ein “spekulatives” Verfahren eingesetzt. Dabei werden Personas anhand von eigenen Erfahrungen bzw. Informationen des Auftraggebers erstellt. Es versteht sich, dass diese Form der Personas nur begrenzte Aussagekraft bzw. Gültigkeit haben können. Wenn immer möglich ist diese Form der Personabeschreibung zu validieren.

Auf was achten bei der Erstellung von Personas?

Personas sollten so früh als möglich im Projektverlauf realisiert werden und den ganzen Prozess begleiten. Beginnend bei der Anforderungsanalyse bis hin zur Implementierung bzw. Evaluation.
Es sollten nicht zu viele Personas definiert werden – max. vier bis fünf. Bei zu viel gewählten Personas besteht die Gefahr der Verwässerung der Zielgruppe.
Personas sind nach primären und sekundären Personas zu unterscheiden. Die primären Personas repräsentatieren die wichtigste Zielgruppe, nach denen sich das zu erstellende interaktive System richtet. Es sollte nur eine primäre Persona definiert werden. Die sekundären Personas liefern Anforderungen die nicht zwingend umzusetzen sind.
Personas sind zu validieren. D.h. nachdem eine Persona erstellt wurde, ist diese “teamextern” auf ihre Korrektheit hin zu überprüfen.
Personas sind laufend zu überprüfen bzw. zu bewirtschaften.

Aus welchen Informationen besteht eine Persona?

Realistischer Name
Bei der Anwendung von mehreren Personas hilft es gewisse Eigenschaften in den Namen zu “verbauen”. Dies hilft, die Personas eindeutig zuzuordnen. WICHTIG: Die Namen sollten keinesfalls ins Lächerliche (es sind keine Comicfiguren) gezogen werden – ihre Glaubwürdigkeit ist wichtig.
Foto der Person
Die Persona muss fassbar werden. Darum ist das Foto ein wichtiges Instrument. Dieses ist nicht willkürlich zu wählen, sondern auf die Daten bzw. die Beschreibungen abzustützen.
Demografische Informationen
Alter, Familienstand, Bildungsniveau etc.
Berufsleben
Berufstitel, Beruflicher Werdegang, Stellung innerhalb Firma, Einkommen, Kompetenzen, Berufsziele, Interessen etc.
Persönliches
Vorlieben, Ängste, Abneigungen, Hobbys, Computerkenntnisse, Einsatz von welchen Endgeräten etc.
Erwartungen an das interaktive System
Ziele, Wünsche, und Bedürfnisse an das interaktive System
Zitat
Personas werden häufig mit einem beschreibenden Zitat unterstützt.

Die Personas werden idealerweise in einer Kombination von Auflistungen und Prosatext niedergeschrieben. Beim Prosa ist eine erzählende Form (Geschichten) anzuwenden, da sich diese besser einprägen lässt. Häufig trifft man aber in der Praxis auch komplett listenartige Beschreibungen an – die sich gut für Übersichten eignen.

Beispiele von Persons

Klassische Darstellung

Ausschnitt einer Personabeschreibung. Das Wichtigste in Kürze in Stichworten, danach Prosa für die Rahmenbeschreibung.

Download: Persona “Matthias Kramer”

Listenartige Auflistung (Kurzfassung)

Personadarstellung in Kurzform (Quelle: https://blog.seibert-media.net/blog/2008/09/12/personas-geben-zielgruppen-gesichter/)

Weitere Informationen zu dieser Form unter: Quelle: https://blog.seibert-media.net/blog/2008/09/12/personas-geben-zielgruppen-gesichter

Weiterführende Informationen

Goodwin, Kim (2001): “Perfecting your personas”
Goodwin, Kim (2002): “Getting from Research to Personas: Harnessing the Power of Data”
Hinton, Andrew (2008): “Personas and the Role of Design”

The post Grundlagen zum Erstellen von Personas appeared first on anwendbar.ch.

Filestage – einfache Möglichkeit zum Projektfeedback

Renato — Thu, 30 Jun 2016 13:32:59 +0000

Das Problem ist bekannt: Dokumente wie zum Beispiel Screendesigns, Videos, PDFs werden durch das Projektteam geprüft mit der Bitte um Feedback. Zurück kommt häufig eine geballte, unstrukturierte E-Mail-Lawine, die man verinnerlichen bzw. dokumentieren muss. Häufig gibt es noch Rückfragen, welche sich auf die Präzisierung der Feedbacks beziehen … und dann geht die E-Mail-Schlacht erst richtig los.

Abhilfe soll hier die deutsche Cloud-Lösung Filestage leisten. Mit Filestage können verschiedenste Dokumenttypen kommentiert (“gereviewt”) werden.

Simples, aber gutes Benutzerinterface: Ansicht der Dateien innerhalb eines Projektes.

Die wichtigsten Funktionen sind:

Einfaches, intuitives Kommentieren von Dateien:
- Auf Bilder können per Klick Marker gesetzt werden, die direkt mit Kommentaren versehen werden können.
- Videos können ganz normal abgespielt werden. Wird ins Video geklickt, stoppt dieses und der Kommentar kann eingetragen werden.
- Audiofiles werden abgespielt und an der Stelle wo man etwas kommentieren will, kann ein entsprechender Kommentarbutton ausgelöst werden.
- PDFs können aktuell (Juni 2016) noch nicht kommentiert werden. Gemäss Filestage wird diese Funktion aber per Juli 2016 integriert sein.
Auf einzelne Kommentare kann geantwortet bzw. diese können als “Erledigt” ausgecheckt werden
Bearbeitungsstatus (Approval-Workflow) zu einzelnen Dokumenten kann definiert werden
Es können verschiedene Versionen eines Dokumentes kommentiert werden
Automatische Benachrichtungen (Notifications) bei neuen Kommentaren bzw. Statusänderungen
Einfaches Einladungsmanagement für Teammitglieder oder Reviewer
- Teammitglieder: Benötigen eigenes Login – haben ein individuelles Dashboard, können Projekte erstellen, Dateien hochladen, Leute für Reviews einladen.
- Reviewer: Werden ausschliesslich zum Einholen eines Feedbacks eingeladen. Dazu muss sich der Reviewer nicht registrieren. Es wird ein Review-Link generiert.
Service ist lauffähig auf Desktops, Tablets und Smartphones
Als Agentur kann Filestage individuell gebrandet werden

Weitere Eigenschaften:

Deutscher Dienst der Daten mit AES 256Bit verschlüsselt überträgt
Browserbasierte Applikation – keine zusätzlichen Installationen notwendig

Ausblick – Die Weiterentwicklung von Filestage

Zur Zeit arbeitet Filestage an einer API/Schnittstelle über die sich Filestage dann mit anderen Tools, wie Google Drive, Dropbox, Slack, Zapier und Trello verbinden lassen wird. Der Release ist für September geplant.
Weiter steckt in der “Entwicklungspipeline” die Idee zum Website-Review. Mit dieser Funktion würde sich jede beliebige Website “reviewen” lassen.

Fazit

Filestage ist ein einfacher aber absolut zweckmässiger Dienst, der einem viel Arbeit abnehmen kann und vor allem die Kommunikation innerhalb des Projektteams, aber auch mit externen Stakeholdern wesentlich vereinfacht. Eigentlich bietet der Cloud-Service keinerlei aussergewöhnlichen Wow-Funktionen. Dies ist aber keineswegs negativ auszulegen – im Gegenteil, Filestage konzentriert sich auf seine Kernaufgabe: Das Reviewen von Dateien.

Mit Filestage können einfach Kommentare zu Dateien hinzugefügt werden.

Das dezentrale Arbeiten hat soweit bestens geklappt. Die dabei angebotenen, dateibasierten Kommunikationsmöglichkeiten sind sehr hilfreich. Sicherlich interessant sind die Versionierungsfunktionen und die Möglichkeit Feedbacks je Datei zu exportieren – wobei an dieser Stelle nicht nachvollziehbar ist, wieso nur die Kommentare, aber keine Screens mit den Markierungen exportiert werden.

Wirklich vorbildlich gelöst ist die Benutzeroberfläche bzw. das Interaktionsdesign. Mit Filestage kann direkt produktiv gearbeitet werden. Bei Fragen bzw. Problemstellungen können die umfassenden FAQ’s eingesehen werden. Hilfreich sind auch die immer wieder angebotenen Kurzvideos.

Natürlich ist nichts gratis im Leben. Filestage finanziert sich über monatliche Gebühren, die je nach Laufzeit variieren (Non-Profit-Organisationen erhalten Rabatt). Die Abos sind insofern flexibel, als dass sie nach Ablauf der jeweiligen Periode gekündigt werden können. Unentschlossene, oder solche die den Dienst testen wollen können Filestage einen Monat lang kostenlos testen – oder vom “Free Plan” (begrenzt auf 200MB Speicherplatz und 2 parallele Dateiabnahmen) profitieren.

Für mich ist klar: Bei nächster Gelegenheit, werde ich Filestage produktiv einsetzen!

Weitere Infos zu Filestage:

Video Sneek Peak: https://app.filestage.io/#!/share/7074680b2874445fae4a0c514864441b
Video Walkthrough: https://app.filestage.io/#!/share/2d279a4395ca49309208fa1d97c04b5f

The post Filestage – einfache Möglichkeit zum Projektfeedback appeared first on anwendbar.ch.

“Test my site” – Website-Schnellcheck von Google

Renato — Thu, 23 Jun 2016 21:15:01 +0000

Anfangs Juni 2016 hat Google einen neuen Service lanciert “Test my Site“. Dabei ist der Name Programm: Der Benutzende kann eine beliebige URL eintragen und eine Analyse in Bezug auf die Seitengeschwindigkeit auslösen – dabei werden Mobile und Desktop betrachtet. Zusätzlich wird geprüft, wie benutzerfreundlich die Website als Ganzes ist.

Schick aufgemachter Startscreen von Googles “Test my Site”

Während dem (Kurz-)Test werden dem Benutzenden Fakten zum Nutzungsverhalten im Web angezeigt. Da der Test aber verhältnismässig rasch abgeschlossen ist, besteht sowieso keine Gefahr zur Langeweile.

Mit Abschluss des Tests werden drei Kennzahlen angezeigt:

Benutzerfreundlichkeit für mobile Endgeräte
Geschwindigkeit der Website für mobile Endgeräte
Geschwindigkeit der Website für die Anwendung am Desktop

Mit Abschluss des Tests werden dem Benutzenden die Ergebnisse mittels einer einfachen Skala angezeigt.

Die Ampelfarben signalisieren dann direkt auch den Handlungsbedarf: Grün wenn alles in Ordnung ist, orange weist darauf hin, dass etwas unternommen werden könnte und bei rot sollte zwingend optimiert werden. Das wirklich Interessante ist, dass die drei Teilbereich im Detail betrachtet werden können:

Die Auflistung der Problemstellungen hilft erfahrenen Webmastern die Website zu optimieren.

Ergänzend zu der Ergebnisanzeige am Bildschirm kann man sich die Ergebnisse auch per E-Mail zustellen lassen. Dabei kann gewählt werden zwischen einem Übersichtsbericht oder dem Detailbericht, welche hilfreiche Tipps beinhaltet. Wieso die Zustellung dieses Berichts bis zu 24 Stunden Zeit in Anspruch nimmt, kann an dieser Stelle nicht beantwortet werden.

Fazit

Googles “Test my Site” ist eine attraktiv gestaltete Seite, die intuitiv zu bedienen ist. Auch wenn die Ergebnisse nicht allzu detailliert sind, so geben sie aber sicherlich Hinweise wo optimiert werden könnte/sollte. Schlussendlich erinnert das Ganze doch sehr stark an Google PageSpeed Insights – die Testresultate sind jedenfalls identisch – vermutlich also ein Speedtest für Ästheten

Hinweis der Redaktion:Manchmal muss man die Hosen runter lassen und negativ auffallen. Wir haben uns auf die Fahne geschrieben praxisnah zu sein und so haben wir unsere Website getestet. Der Handlungsbedarf ist offensichtlich … sicherlich wird es uns gelingen die Werte zu optimieren.

The post “Test my site” – Website-Schnellcheck von Google appeared first on anwendbar.ch.

Tools zur Websiteoptimierung

Pascal — Mon, 23 May 2016 07:06:58 +0000

Die User Experience einer Webseite hängt von einigen technischen Faktoren wie der Ladezeit, (HTML)-Fehlern usw. ab. Um diese Aspekte der Websiteoptimierung zu testen, gibt es verschiedene kostenlose Tools die hier kurz vorgestellt werden.

Geschwindigkeit

Das Onlinetool Google Page Speed Insight misst und bewertet nicht nur die Geschwindigkeit einer Webseite sondern gibt auch gleich Tipps wie die Ladezeit verringert werden kann.

Früher gab es auch eine Version als Browser-Plugin, diese wird aber nicht mehr weiterentwickelt.

Fehler, Google-Index, Mobile und HTML-Optimierung

Ohne dies Webmaster-Tools von Google sollte keine Webseite betrieben werden. Nach einer erstmaligen Identifizierung pro Webseite erhält man wertvolle Einblicke in die eigene Webseite und wie diese von der Google Suche gesehen wird.

Suchanalyse: Zu welchen Suchbetriffe wurde die Website auf welche Position angezeigt und wie oft wurde geklickt
HTML-Fehler wie doppelte Inhalte, doppelte Title Tags usw.
Serverfehler: Hilft falsche Links innerhalb der Website aber auch von anderen Websites auf die eigene zu erkennen.
Hinterlegen von Sitemaps, senden von Seiten an den Index usw.

Accessibility

Die Wave Toolbar steht für Chrome zur Verfügung. Die Version für Firefox wird leider nicht mehr weiterentwickelt. Die wichtigsten Funktionen sind:

Ansicht der Titelstruktur
Ansicht der Seite ohne Styles (CSS)
Hinweise auf Accessibility Probleme wie fehlende alt-Attribute bei Bildern, Fehler in der Titelstruktur usw.

Für eine Webseite mit einer guten Usability und guter User Experience braucht es deutlich mehr als den Einsatz dieser Tools und die Behebung allfällig gefundener Fehler. Auf technischer Ebene bieten sie aber eine Umfangreiche Sammlung von Tests und Tipps zur Verbesserung von Websites.

The post Tools zur Websiteoptimierung appeared first on anwendbar.ch.

Grundsätze der benutzerzentrierten Gestaltung

Renato — Mon, 02 May 2016 14:12:04 +0000

Was bedeutet es eigentlich, interaktive Lösungen auf die Benutzenden zu zuschneiden? Wie muss ich vorgehen, damit mein Produkt wirklich der benutzerzentrierten Gestaltung entspricht?

Es kann festgehalten werden, dass es nicht DAS Vorgehen gibt. Im Rahmen einer Projektabwicklung sind es vielmehr einzelne Massnahmen bzw. Methoden die gezielt eingesetzt werden können, um ein Produkt “menschenzentriert” zu gestalten. Folgend möchte ich auf einige Grundsätze eingehen, die meiner Meinung nach erfüllt sein sollten, um mit gutem Gewissen von einer benutzerzentrierten Entwicklung zu sprechen:

1. Umfassendes Verständnis von Benutzenden, Aufgaben, Umfeld und System

Für die Entwicklung eines digitalen Produktes ist es wichtig, sich eben nicht nur auf mediumspezifische Aspekte (beispielsweise: Corporate Design konforme Umsetzung einer Lösung) einzulassen. Vielmehr ist es wichtig ein Grundverständnis für den Gesamtkontext aufzubauen. In diesem Zusammenhang hilft es, das einfach verständliche Model von Shackel B. (1991) beizuziehen:

Abbildung: Kontextverständnis nach Shackel, 1991

Die Kernaussage: Ein Benutzender erledigt mit einem Werkzeug, eine Aufgabe in einem bestimmten Umfeld.

Ein konkretes Beispiel: Ein älterer Herr (Benutzer) sucht in einer Bahnhofhalle (Umfeld), mit dem Smartphone (Werkzeug) nach Informationen zu verspäteten Fernverkehrszügen (Aufgabe). Betrachten wir die einzelnen Aspekte, mit allfälligen Einflussgrössen, etwas genauer an:

Benutzer: Der ältere Herr könnte wo möglich eine Sehschwäche haben. Vielleicht ist er auch nicht so geübt im Umgang mit einem Smartphone. Möglicherweise kommt man auch zum Schluss, dass es zuwenige Rentner mit Smartphone gibt, als man extra eine interaktive Lösung baut. Für wen wird das System schlussendlich optimiert?
Aufgabe: Finden von Informationen zu verspäteten Zügen. Hier gilt es natürlich sorgfältig abzuklären wie einer Suche aussehen könnte bzw. welche Kriterien für das schnelle Auffinden eben relevant sind.
Werkzeug: Für welche Geräte soll die Lösung optimiert werden. Gibt es Rahmenbedingungen bzw. Einschränkungen?
Umfeld: In einer Bahnhofshalle ist immer sehr viel los – insbesondere zu Stosszeiten. Viele Menschen, viel Hektik, Gedränge, Durchsagen, möglicherweise auch spezielle Lichtverhältnisse.

2. Die Benutzenden sind in den Entwicklungsprozess miteinbezogen

Wenn immer möglich sollten die Benutzenden in den Entwicklungsprozess aktiv miteinbezogen werden. Dieser Grundsatz liest sich als einfach umsetzbar, ist aber in der Praxis nicht immer einfach zu realisieren, da meist sehr zeitaufwendig. Beispielsweise können bei den folgenden Methoden die Benutzenden problemlos miteinbezogen werden:

Contextual Inquiry
Personas
Fragenbogen bei den Zielgruppen
Tagebuch-Methode
Card-Sorting im Rahmen von Workshops
Interviews
Evaluation von Wireframes und Prototypen

3. Tests als Grundlage für fortlaufende Optimierung

Etwas überzeichnet formuliert: Teste so oft wie möglich! Dabei soll die Lösung wenn immer möglich natürlich von denjenigen getestet werden, die schlussendlich auch mit dem System interagieren – also denjenigen Benutzenden wie man sie in der Analysephase als exemplarische Benutzende (Personas) festgelegt hat. Natürlich ist das in der Praxis nicht immer möglich, da womöglich Zeit, das Geld oder aber die Testpersonen fehlen. Hierzu muss geschrieben werden:

dass Tests nicht zwingend in einem Labor stattfinden müssen. Es reicht schon beispielsweise ein Laptop mit Screencapture in einem Sitzungszimmer aufzubauen und die Testsession zu begleiten. Diese Vorgehen kann relativ “spontan” und kostengünstig umgesetzt werden.
Um eine passende Testperson zu finden, kann man sich im bisherigen Kundenkreis umschauen – häufig finden sich motivierte Leute die gerne an einem solchen Test partizipieren. Zu empfehlen, jedoch mit einem Kostenaufwand verbunden, sind Recruitingservices wie www.testing-time.ch. Diese Services suchen einem anhand eines Profils die entsprechenden Personen. Und wenn gar nichts mehr geht, würde ich auf Personen auf dem Bekanntenkreis zurückgreifen. Besser so testen, als gar nicht testen!

4. Iterativer Prozess

Ergebnisse im Sinne des benutzerzentrierten Vorgehens entstehen nicht per Zufall. Sie sind validiert! Idealerweise nähert man sich dem Ziel in Schritten – also beispielsweise von den Wireframes, über die Prototypen oder Teilen des Systems, hin zu angestrebten Lösung. Hierzu eignet sich ein iteratives Vorgehensmodell sehr gut.

Gemäss DIN EN ISO 9241, Teil 210 gestaltet sich ein solcher Prozess wie folgt:

Abbildung: DIN EN ISO 9241-210: Wechselseitige Abhängigkeit menschzentrierter Gestaltungsaktivitäten. Quelle: https://denkwerkzeuge.wordpress.com/tag/iso-norm-9241-210/

Analyse des Nutzungskontextes

Es werden Informationen über die künftigen Benutzenden zusammengetragen. Gleichzeitig werden die Aufgaben und Ziele der Benutzenden, die Arbeitsabläufe, die Arbeitsumgebung und die technischen Rahmenbedingungen systematisch erfasst.

Definition der Anforderungen

Aufgrund der Kontextanalyse werden die Anforderungen definiert, welche während des Entwurfsprozesses einzuhalten sind.

Konzeption und Lösungsentwurf

Die Konzepte für das zukünftige Produkte bzw. die umzusetzende Lösung werden aufgestellt. Diese Konzepte beinhalten zu einem möglichst frühen Zeitpunkt Skizzen, Designdokumente, Mockups, Papier-Prototypen etc.

Evaluation

Die realisierten Lösungen werden mit den Benutzenden besprochen bzw. getestet. Die Wireframes bzw. Prototypen sollten immer mehr konkretisiert bzw. verfeinert werden – von Low-Fidelity zu High-Fidelity. Mit diesem Vorgehen wird sichergestellt, dass die definierten Anforderungen auch wirklich eingehalten werden.

Iterationen – Prozessschritte Wiederholen

Und ja klar: Iteration kommt aus dem Lateinischen “itare” und bedeutet wiederholen. D.h. der allgemein beschriebene Prozess ist mehrfach zu wiederholen – mit gleicher oder ähnlichen Handlungen, im Sinne der oben beschriebenen Annäherung.

5. Berücksichtigung der gesamten User Experience

Auch wenn der Fokus der benutzerzentrierten Gestaltung auf der eigentlichen Lösung liegt, sollte das gesamte Anwendererlebnis (User Experience) immer im Auge behalten werden. Der Begriff User Experience umfasst alle Aspekte der Interaktion ein Benutzers mit einer Firma, ihren Dienstleistungen oder ihren Produkten. Er beschreibt Erwartungen, Wahrnehmungen und Reaktionen, die vor, während und nach der eigentlichen Nutzung auftreten [1].

6. Interdisziplinäres Team

In der Praxis zeigt sich, dass sich die besten Ergebnisse durch ein interdisziplinäres Team realisieren lassen. Natürlich kann dabei ein und dieselbe Person mehrere Funktionen wahrnehmen. Idealerweise gibt es folgende Funktionen innerhalb einer Projektumsetzung:

Usability Engineer
Requirements Engineer
Usability Tester
Information Architect
Interaction Designer
User Interface Designer

Quellen:

[1] [Procontext Blog, „Usability und User Experience unterscheiden“

The post Grundsätze der benutzerzentrierten Gestaltung appeared first on anwendbar.ch.