Lektion 2 und 4

User Centered Design, abgekürzt UCD) ist durch ein iteratives und kooperatives Vorgehen gekennzeichnet. Iteration bezeichnet hierbei das Wiederholen von einzelnen Schritten, bis das gewünschte Ergebnis erreicht wurde. Die internationale Norm DIN EN ISO 9241:210 beschreibt dabei vier zentrale Aktivitäten, die nach der Planung des menschzentrierten Gestaltungsprozesses iterativ anzuwenden sind, bis die entwickelten Gestaltungslösungen den Nutzerbedürfnissen entsprechen.

Verstehen und Festlegen des Nutzungskontextes

Festlegen der Nutzungsanforderungen

Erarbeiten von Gestaltungslösungen zur Erfüllung der Nutzungsanforderungen

Evaluation

Erarbeiten von Gestaltungslösungen zur Erfüllung der Nutzungsanforderungen

• Funktionsumfang: Welche Funktionen des späteren Produktes sollen im Prototyp dargestellt werden? Ausschnitte oder ein Überblick über den gesamten Umfang?

• Funktionstiefe: Wie detailliert sollen die im späteren Produkt vorgesehenen funktionalen Elemente durch den Prototyp abgebildet werden?

• Darstellungstreue: Wie ähnlich soll der Prototyp dem späteren Produkt hinsichtlich Look-and-Feel des User Interface sein?

• Interaktivität: Wie interaktiv soll der Prototyp sein?

• Datengehalt: Sollen reale Daten zum Einsatz kommen oder genügen Platzhalter für dargestellte Informationen und Bezeichnungen?

• Technische Reife: Können einfache Zeichenwerkzeuge verwendet oder sollen Aspekte der vorgesehenen UI-Technologie eingesetzt werden?

Je nach Einsatzzweck des Prototyps eignen sich unterschiedliche Dimensionen. So ist beispielsweise zur Entwicklung von Produktideen auf eine geringe Darstellungstreue (engl. Fidelity) zu achten, während für die späteren Schritte der Konzeption des UIs eine mittlere und für die Optimierung des UIs eine hohe Darstellungstreue vorteilhaft ist.

Es unterteilt den Designprozess in den ersten Teil des Identifizierens des richtigen Problems, um sich im Anschluss der Findung der richtigen Designlösung zu widmen. Jede dieser zwei Phasen beinhaltet zunächst eine Divergenzphase: Hier wird der mögliche Problem- bzw. Lösungsraum aufgemacht. Anschließend folgt eine Konvergenzphase, in der die möglichen Problem- und Lösungsalternativen wieder reduziert werden. Folglich verändert sich die Zahl möglicher Alternativen über die Zeit in Form von zwei hintereinanderliegenden Diamanten, welche dem Vorgehensmodell den Namen gibt.

1: finden des Problems mittels aufspannen des Problem Raums (divertenz)

2: identifizieren des richtigen Problems (konvergenz)

3: finden von Lösungen mittels aufspannen des lösungsraums (divergenz)

4: finden der richtigen Lösung (konvergenz)

• Der Nutzer kann sich durch die Interaktion mit dem Navigationssystem durch die gesamte Website bewegen. Navigationselemente haben eine Linkfunktionalität. Dies bedeutet, dass sie durch Hyperlinks mit der jeweiligen Zielseite verknüpft sind. Folglich geleiten sie den Nutzer zur Zielseite oder zum gewünschten Webseiten-Bereich.

• Zudem bietet die Navigation den Nutzern Orientierung auf der Website. Ein gelungenes Navigationssystem bietet Nutzern die Möglichkeit, sich fortwährend zu orientieren und sich durch die Website zu bewegen, ohne sich dabei „zu verlaufen“.

in eine primäre bzw. globale Navigation, in eine sekundäre bzw. lokale Navigation sowie eine tertiäre bzw. Content-Navigation.

Üblicherweise kann die globale Navigation bei Desktop Layouts horizontal angeordnet sein. Die lokale Navigation kann sich vertikal am linken Seitenrand befinden, während die Content-Navigation, wie der Name es verrät, eingebettet ist in den Webseiten-Content.

So ist das Ziel des globalen Navigationssystems, dem Nutzer eine Antwort auf die Frage „Wo bin ich?“ zu geben. Das lokale Navigationssystem beantwortet die Frage „Was befindet sich in der Nähe?“, während das in den Content eingebettete Navigationssystem dem Nutzer Hinweise gibt, was in Verbindung zum auf dieser Seite gezeigten Inhalt steht.

Sparsamer und funktionaler Einsatz von Microinteractions, ausdrucksstarke Bilder, eine leserfreundliche Typografie sowie eine gezielte Farbwahl. Zudem sollte die Usability durch Stärken des Material Designs wie eine schlanke und cleane Gestaltung ohne Schnörkel und Spielereien unterstützt werden.

die Kontaktfunktion, eine Navigationsfunktion, eine Service-/Legal-Funktion sowie eine Main-Asset-Funktion.

Im Bereich der Servicefunktionen können Informationen zum Versand, zu den Bezahlmöglichkeiten oder eine Länderwahl im Footer präsentiert werden. Unter der Legal-Funktion wird die Verlinkung zu obligatorischen rechtlichen Informationen wie Impressum und Datenschutzrichtlinie verstanden. Main-Asset-Funktionen beschreiben den Zugriff zu unternehmensspezifischen Abkürzungen oder die prägnante Darstellung der zentralen Kompetenzen des Unternehmens. Hier kann auf wichtige Zusatzangebote verwiesen werden, die nicht zwangsläufig zu den zentralen Website-Angeboten gehören. Der Footer sollte inhaltlich und optisch nicht den Inhaltsbereich überstrahlen.

Animationen sollten unterstützend und nicht auffallend eingesetzt werden, um ein positives Nutzungserlebnis auf Websites zu erzeugen. Um die Usability zu erhöhen, können Animationen als visuelles Hilfsmittel eingesetzt werden. Animationen, die die Interaktion mit dem User Interface fördern, werden auch als „Microinteraction“ bezeichnet. Gut gestaltet fördern sie die Interaktion, bleiben in Erinnerung und führen zu einer guten User Experience. Aus Sicht der Benutzerfreundlichkeit auf Websites können Microinteractions beispielsweise für folgende Aspekte eingesetzt werden (Erlhofer/Brenner 2018, S. 388f.):

• Bewegung, wie z. B. Sliden,

• Einblenden eines Off-Canvas-Menüs,

• Licht- und Schatteneffekte, z. B. bei Aktivierung eines Buttons, sowie

• Änderung von Farben, wie z. B. Abdunklung oder Entsättigung, um einen Overlay-Effekt zu erzeugen.

Bilder geben dem Betrachter schnell einen Eindruck, sie vermitteln ein bestimmtes Image und erzeugen bestimmte Emotionen. Im Marketing werden diese Bildmittel mit dem Begriff „Key Visuals“ bezeichnet. Sie sind visuelle Kernelemente und prägen den ersten Eindruck einer Website auf den Nutzer entscheidend. Key Visuals visualisieren und repräsentieren dabei den Charakter des Webangebots bzw. des dahinterstehenden Unternehmens oder der Marke

Großformatige Bilder liegen im Webdesign im Trend. Ein emotionales Bild und ein informativer Text ergänzen einander im Idealfall und sind für den Nutzer einprägsam. Bilder haben eine schnelle, emotionale Wirkung und sind deutlich einprägsamer als ein langer Text. Diese großformatigen Bilder werden im Webdesign auch als Hero Images bezeichnet und waren zunächst vorwiegend im Header-Bereich vertreten. Inzwischen sind sie jedoch zunehmend auch im Inhaltsbereich aufzufinden. Anstelle statischer Hero-Bilder werden aufgrund zunehmender Bandbreite auch vermehrt kurze Videosequenzen im Hintergrund abgespielt. Diese können eine höhere Lebendigkeit vermitteln als statische Bilder. Bei Videosequenzen ist jedoch auf eine kurze Dauer von maximal etwa 90 Sekunden zu achten.

Im Kontext der Gestaltung von Web User Interfaces limitieren Barrieren den ungehinderten Zugang zu Inhalten auf Websites für Menschen mit Einschränkungen. Diese Einschränkungen können sehr verschieden sein.

• Blinde Menschen benötigen einen Screenreader, der den Inhalt der Webseite in Blindenschrift, sogenannte Brailleschrift, übersetzt. Alternativ können auch Tools den Inhalt vorlesen.

• Menschen mit Sehbehinderung benötigen dagegen Lesehilfen, um beispielsweise den dargestellten Text vergrößert darstellen zu lassen.

• Menschen mit Farbenfehlsichtigkeit oder sogar Farbenblindheit benötigen kontrastreiche, farbfreie Texte.

• Menschen mit motorischen Einschränkungen benötigen angepasste Interaktionselemente oder gar eine andere Interaktionsmodalität, wenn beispielsweise die Bedienung über eine Maus nicht möglich ist.

• Bei eingeschränkten geistigen Fähigkeiten oder Konzentrationsschwächen helfen beispielsweise Texte in sehr einfacher Sprache.

• Für Bilder, Sounds und Videos müssen passende Alternativen angeboten werden, z. B. Alternativtexte für Grafiken oder Untertitel bei Sound und Video.

• Texte, Bilder und Grafiken müssen für Farbfehlsichtige deutlich, d. h. auch ohne Farben erkennbar sein.

• Inhalt und Gestaltung sollten strikt getrennt sein. Hierfür sind HTML5 und CSS3 gemäß ihrer Spezifikation zu verwenden: HTML5 dient der formalen Beschreibung der Inhalte, während CSS3 zur Gestaltung der Seiten dient.

• Sprachliche Besonderheiten wie Abkürzungen müssen kenntlich gemacht werden.

• Tabellen dürfen nicht zum Layouten der Seiten, sondern nur zur Darstellung tabellarischer Daten verwendet werden.

• Internetangebote müssen weitgehend browserunabhängig nutzbar sein.

• „Zeitgesteuerte“ Inhalte wie Videos müssen durch den Nutzer kontrollierbar sein.

• Der Zugriff auf Benutzerschnittstellen, z. B zur Datenbankanbindung, muss behindertengerecht möglich sein.

• Der gesamte Funktionsumfang der Website muss unabhängig vom Ein- oder Ausgabegerät genutzt werden können. So sollte eine Navigation per Tastatur anstelle einer Maus möglich sein.

• Die Website sollte auch für Nutzer mit älterer Browsersoftware nutzbar sein.

• Alle zur Erstellung der Website verwendeten Technologien müssen vollständig dokumentiert sein.

• Dem Nutzer müssen Orientierungshilfen zur Verfügung gestellt werden.

• Die Navigation muss übersichtlich und für die Nutzer nachvollziehbar sein, z. B. durch Angeben der Hyperlink-Ziele, Sitemaps und Suchfunktionen.

• Für das erleichterte Verständnis der Inhalte müssen geeignete Maßnahmen wie eine einfache, klare Sprache umgesetzt werden.

die Einhaltung von vier Designprinzipien, die technikunabhängig zu beachten sind. Diese betreffen die Wahrnehmbarkeit, die Bedienbarkeit, die Verständlichkeit sowie die Robustheit. Unter der Robustheit wird primär die Kompatibilität zu älteren Softwareversionen verstanden. Die ersten drei widmen sich hingegen den menschlichen Fähigkeiten und Einschränkungen.

Sketch (dt. Skizze)

Durch Sketching werden auf Papier schnelle und günstige Skizzen erzeugt. Ein häufiger Begriff für Sketch ist auch Scribble. Sie dienen der Ideengenerierung und weisen eine geringe Darstellungstreue auf. Vorteil von Sketches ist, dass sie kostengünstig, schnell zu erzeugen und wegwerfbar sind. Nach Preece/Rogers/Sharp (2002, S. 111f.) sollen Sketches ein Minimum an Detail aufweisen, nicht präzise sein, sondern Offenheit vermitteln und zu Explorationen einladen. Sie eignen sich in der divergierenden Phase des Double-Diamond-Design-Modells. Um Skizzen von User Interfaces nicht isoliert zu betrachten,werden sie auch häufig in Storyboards eingebettet, um weitere Aspekte der Nutzer sowie des Nutzungskontexts zu vermitteln.

Wireframe (dt. Drahtmodell)

Wireframes gehören zur Gruppe der Low-Fidelity-Prototypen, da sie eine geringe Darstellungstreue aufweisen. Wireframes sollten bewusst das Look-and-Feel des späteren Produktes nicht vermitteln, sondern auf Funktionalität und das konzeptionelle Design fokussieren. Sie können einen unterschiedlichen Grad an Interaktivität aufweisen. Zur Erzeugung von Wireframes können verschiedene Softwaretools eingesetzt werden, die bereits vorgefertigte UI-Elemente enthalten und auch bei der Erzeugung von Interaktivität unterstützen. Wireframes sind kostengünstig sowie schnell zu erzeugen und können neben der Stakeholder-Kommunikation, der UI-Konzeption und -Optimierung auch für Nutzerevaluationen eingesetzt werden.

Mockup

Ein Mockup ist eine Abwandlung von Wireframes, die jedoch meist statisch von sehr geringer Interaktionstiefe gekennzeichnet sind. Mockups vermitteln meist einen gesamten Überblick über den Funktionsumfang des User Interface, weisen aber eine sehr geringe Funktionstiefe auf. Sie können beispielsweise für Nutzerevaluationen eingesetzt werden, die das hinterlegte Konzept der Informationsarchitektur abtesten wollen.

High-Fidelity-Prototyp

Diese Art von Prototypen wird erst gegen Ende des Designprozesses eingesetzt.Sie sind meist kostenintensiv in der Erzeugung. High-Fidelity-Prototypen ähneln dem späteren Look-and-Feel, weisen eine hohe Darstellungstreue und Interaktivität auf. Der abgebildete Funktionsumfang sowie die Funktionstiefe können variieren. Sie dienen der Optimierung des User-Interface-Konzeptes sowie für das Design der visuellen Ästhetik. High-Fidelity-Prototypen werden für Nutzerstudien zur finalen Evaluation eingesetzt.

Aufmerksamkeitswirkung verschiedener Farben

-

Farbe vor Graustufen

reine Farben vor Mischfarben

intensive Farben vor weniger gesättigten

warme Farben vor kalten Farben

Kontrastfarben vor harmonischen Farben

Buntheit vor einzelnen Farben