Lehre
Fachhochschule Nordwestschweiz
Modul UUID Usability und User Interface Design

Icon Masterclass white Designsensor AG

Module UUID Usability und User Interface Design

Das Modul Usability und Interface Design befasst sich mit der nutzerzentrierten Entwicklung, d.h. mit den wesentlichen Aspekten der Planung, Gestaltung, Entwicklung und Evaluation nutzerzentrierter User Interfaces.

Das Modul Usability und Interface Design umfasst drei Wochenlektionen. Der Unterricht findet in Form von Design-Workshops statt.

Inhaltliche, methodische und technische Inputs bieten die Basis für die Entwicklung selbständiger Lösungsansätze. Diese werden an gemeinsam erarbeiteten Qualitätskriterien getestet und beurteilt.

Semesteraufgabe
Attraktive Lernplattform für Studierende an einer Hochschule

Die Lernplattform ist eine zentrale Schnittstelle (Interface) zwischen Bildungsanbieter und der lernenden Person. Lernplattformen (Learning Management System, kurz: LMS) sind komplexe interaktive Systeme, die Lerninhalte bereitstellen und helfen Lernvorgänge zu organisieren. Dabei ist die Kommunikation zwischen Lernenden und Lehrenden ein wichtige Aufgaben. Die Aufgabe einer Lernplattform ist es, den Lernbetrieb zu unterstützen, indem sie das Lernen vereinfacht, den Informationsfluss regelt und verschiedene Verwaltungsaufgaben übernimmt.

Im Modul «Usability und Interface Design» erarbeiten wir die Grundlagen für die Gestaltung einer neuen Lernplattform für Studierende. Der menschenzentrierte Designprozess führt uns von der persönlichen Auseinandersetzung mit dem Thema «Lernen», über die Definition von Personas und Szenarien bis hin zur Konzeption und Gestaltung von Prototypen. In Einzel- und Gruppenarbeiten erarbeiten Sie Teilaufgaben, aus denen am Schluss ein Prototyp entsteht. Im Zentrum der Unterrichtsstunden steht die kritische und konstruktive Auseinandersetzung mit ihren Arbeiten.

Haben Sie Fragen oder Anregungen zum Modul? Zögern Sie nicht, uns zu kontaktieren.

Kontakt Martin Baumann

Kontakt Michael Schärlig

KW 8
Human Centered Design

Glossar Human Centered Design

Dieses Glossar listet ein Auswahl der Terminologie zu Human Centered Design auf. Die soll den richtigen Gebrauch dieser Fachausdrücke und deren eindeutiges Verständnis sichern. Quellenangabe: Die meisten Ausdrücke haben wie dem Glossar «CPUX-F Curriculum und Glossar» entnommen, oft gekürzt und manchmal ergänzt. Das Dokument kann bei uxqb (International Usability and UX Qualification Board) kostenlos heruntergeladen werden.

Glossar: Human-Centered-Design

Human Centered Design

Human Centered Design ist eine Gestaltungs-Haltung und ein Design-Ansatz zur Entwicklung gebrauchstauglicher und zweckdienlicher (umgangssprachlich: «benutzerfreundlicher») digitaler Produkte und interaktiver Systeme. Dabei werden die Produkte auf die Benutzer und deren Bedürfnisse und Anforderungen abgestimmt.

Human Centered Design für Digitale Produkte und interaktive Systeme

User Experience Design

Menschen erleben positive Emotionen, wenn Erwartungen übertroffen werden. Positive Erlebnisse bilden die Basis für erfolgreiche Produkte.

Was ist User Experience Design?

Mind-Map

Mind-Map ist eine Technik zum Erschliessen und Visualisieren eines Themengebietes. Das Prinzip der Assoziation hilft, Gedanken frei zu entfalten und nutzt die Fähigkeit des Gehirns zur Bildung von Kategorien. Mind-Maps sind beschriftete Baumdiagramme. Zusätzliche Anmerkungen erläutern Inhalte und Prozesse. Zusammenhänge werden durch gegenseitige Verknüpfungen dargestellt.

Designmethode: Mindmap

AEIOU

Die AEIOU-Methode ist ein Werkzeug, die uns hilft, alle Ereignisse im Umfeld eines Nutzers zu erfassen. Der Aufbau der AEIOU-Methode hilft, etwas Struktur in die ersten Beobachtungen zu bringen. Abhängig der Situation macht es Sinn, die Fragen anzupassen.

Designmethode: AEIOU

Übung Nutzungskontext

Der Nutzungskontext beschreibt Benutzer, Aufgaben, Ressourcen sowie die physische und soziale Umgebung, in der das interaktive System genutzt wird.
Damit die Anforderungen an eine gebrauchstaugliche und ansprechende Gestaltungslösung definiert werden können, gilt es zu klären, welche Benutzerinnen das interaktive System unter welchen Umgebungsbedingungen verwenden.

Übung: Nutzungskontext

Gemeinsam formulierte Lernziele

  • Ich kenne die Themen, die unter dem Begriff Human Centered Design subsumiert sind
  • Ich kenne die Unterschiede zwischen User Experience und Usability
  • Ich kann den Nutzungskontext mittels Methoden strukturiert erfassen
  • Ich kann den Human Centered Design Prozess in einen iterativen Entwicklungsprozess integrieren
  • Ich kenne die Erfolgsfaktoren für eine positive User Experience

Aufgabe «Clustering und Muster erkennen»

A) Machen Sie sich Gedanken zu Ihrem persönlichen Lernverhalten und der Arbeitsorganisation.

Diese Fragen dienen als Anregung dazu:

  • Wie sammle ich meine persönlichen Notizen, Unterlagen, Scripts aus den verschiedenen Modulen?
  • Wie behalte ich den Überblick über alle (Abgabe-)Termine während des Semesters?
  • Wie organisiere ich den Austausch in Gruppen?
  • Wie kommuniziere ich mit meinen Kommilitoninnen?
  • Wie kommuniziere ich mit Dozentinnen?
  • Wie lerne ich für Prüfungen?
  • Wie bereite ich (Gruppen-)Präsentationen vor?
  • Wie plane ich ein Semester-Projekt?
  • Wie orientiere ich mich über meine Modulanlässe (Zeiten, Räume, Dozenten, Kommilitoninnen, …)
  • Wie …?

B) Visualisieren Sie auf einem Plakat (mindestens Grösse A3) das Thema «Lernen» aus Ihrer persönlichen Perspektive.

Verwende Sie zur Visualisierung die Methode «Mind-Map» und/oder «AEIOU».

KW 9
Nutzungskontext 1: Umfeld, Nutzer, Stakeholder

Stakeholder Map

Die Stakeholder-Analyse hilft noch vor dem ersten Workshop alle am Projekt beteiligten Personen und ihren Interessen einzuschätzen.

Designmethode: Stakeholder Map

Product Vision Prototype Canvas

Die Product Vision Prototype Canvas ist ein Werkzeug, um das erste Vorwissen, beste Ideen, Funktionalitäten, interessante Erkenntnisse und mögliche Lösungen festzuhalten und zu kombinieren.

Designmethode: Product Vision Prototype Canvas

Gemeinsam formulierte Lernziele

  • Ich kenne die Idee hinter dem Werkzeug Product Vision Prototyp Canvas und kann dies gezielt im Projekt einsetzen, um Ideen, Funktionen und mögliche Lösungen fortlaufend strukturiert festzuhalten.
  • Ich kann das Vorgehen im Product Vision Prototyping einsetzen, um breitgefächert Ideen zu generieren und nicht gleich in Lösung zu denken.
  • Ich kenne Methoden, um gemeinsam mit Nutzern Ideen zu generieren, ohne diese gleich zu bewerten.
  • Ich kenne Methoden, um Ideen und Lösungen aus anderen Branchen auf das zu konzipierende Produkt zu adaptieren.
  • Ich kenne Methoden und Fragestellungen, um gewagte Ideen zu generieren und diese für das zu konzipierende Produkt nutzbar zu machen.
  • Ich habe Mut zur Lücke, d.h. ich arbeite lieber mit zwei späteren Nutzern zusammen als mit gar keinen.
  • Ich kenne das Werkzeug «Stakeholder Map», um Beziehungen von Projektbeteiligten mit ihrer Rolle und Funktion zu visualisieren.

Aufgabe «Product Vision Prototype Canvas und Stakeholder Map»

A) Fassen Sie die Ideen und Funktionalitäten der Gruppenarbeit in Form einer Product Vision Prototype Canvas zusammen. Wählen Sie dazu ein Format, das sich fortlaufend ergänzen und bei Bedarf auch beamen/drucken lässt.

B) Visualisieren Sie auf einem Plakat (mindestens Grösse A3) die Stakeholder Map. Wir werden diese in einem nächsten Schritt gemeinsam ergänzen und «reinzeichnen».

KW 10
Nutzungskontext 2: Szenarien, Personas

Nutzungskontext verstehen und daraus Nutzungsanforderungen ableiten

Personas, Szenarien und Jobstory sind Design-Methoden und Instrumente, um die unterschiedlichen Bedürfnisse der Benutzer und den Nutzungskontext zu modellieren. Die Ergebnisse sind einerseits die Grundlage für ein gemeinsames Verständnis innerhalb des Projektteams und andererseits sind sie Voraussetzung für die Definition von Anforderungen an das zu gestaltende digitale Produkt.

Vom Nutzungskontext zu den Nutzungsanforderungen

Persona-Methode

Unter einer Persona versteht man ein imaginäres Modell einer Person mit konkreten (Charakter-) Eigenschaften und spezifischem Nutzungsverhalten. Eine Persona ist keine reale Person, auch kein Stereotyp, keine Rolle oder Berufsbezeichnung. Eine Persona ist eine erdachte Person. Personas basieren auf den Verhaltensmustern, mentalen Modellen und Zielen der realen Anwender.
Personas erleichtern die nutzerzentrierte Entwicklung und eignen sich besonders in der frühen Konzeptions- und Designphase.

Designmethode: Persona-Methode

Gemeinsam formulierte Lernziele

  • Ich kenne die Mehrwerte und Nutzen einer Stakeholder-Analyse und kann diese gezielt in mein Projektvorhaben integrieren.
  • Ich kenne Methoden, um Personas zu entwickeln und weiss, wie ich diese in mein Projekt gezielt integrieren kann.
  • Ich kenne die Begriffe Persona, Nutzungskontext, Szenarien und Jobstory und kann diese jemandem im Projektteam erklären.

Aufgabe «Persona und Vorbereitung für Design Challenge»

A) Halten Sie die Informationen zu den Persona im Lerntagebuch fest. Als Basis dient Ihnen die Zusammenfassung aus Smaply.

B) Ergänzen Sie die Product Vision Canvas mit den Erkenntnissen von heute.

KW 11
Nutzungsanforderungen: Scope und Storyboard

Design Scope und Design Challenge

Scope wird mit Spielraum und Umfang übersetzt. Beim Definieren des Design Scope geht es um die Sicherstellung, dass im Projekt die relevanten Aufgaben erledigt werden, die zu einem erfolgreichen Produkt führen. Der Scope steckt die Rahmenbedingungen zu Inhalt und Umfang des Projekts ab.

Designmethode: Design Scope und Design Challenge

Digital Product Design Vision

Ohne Vision passiert es rasch, dass man ohne echtes Bedürfnis entwickelt, aneinander vorbei arbeitet und schlussendlich keinen Wert für den Nutzer schafft. Deshalb braucht jede digitale Produktentwicklung eine gute Vision.

Designmethode: Digital Product Design Vision

Storyboard

Geschichten (Stories) sind ein wichtiges Mittel im Experience Design, um relevante Information zu sammeln und mit anderen Stakeholder zu teilen. Im Storyboard wir das geschriebene Wort in Bildern umgesetzt. Die gestalteten Bilder machen die Geschichten verständlicher und konkreter.

Designmethode: Storyboard

Gemeinsam formulierte Lernziele

  • Ich kann Jobstories als Basis nutzen, um kreative Ideen zu entwickeln.
  • Ich kann Jobstories nach der Formel «wenn ich […], will ich […], damit ich […]» entwickeln.
  • Ich kenne die verschiedenen Kategorien von Nutzenelemente – funktionale, emotionale, lebensverändernde – und kann diese dazu nutzen, um meine Ideen weiterzuentwickeln.
  • Ich kenne visuelle Hilfsmittel, um einfach einheitliche Figuren für Storyboards zu entwickeln.
  • Ich kennen den «Produkt-Tweet» als einfache Methode, sich (wieder) auf das Wesentliche zu konzentrieren resp. das Wesentliche einer Idee oder Lösung auf den Punkt zu bringen oder zu kommunizieren.

Aufgaben «Scope und Storyboard»

A) Jobstories formulieren
Wählen Sie eine Persona aus und formulieren sie mindesten 5 weiter Jobstories.

Download aller Persona als PDF (ZIP)

B) Storyboard visualisieren
Wählen Sie eine Jobstory aus und visualisieren Sie die Geschichte als Storyboard.

Vorlagen Mockups Devices für Visualisierungen von Ideen

C) Produkt-Tweet schreiben
Schreiben Sie mindestens 3 unterschiedliche Produkt-Tweets. Wählen Sie den Besten aus. Begründen Sie Ihre Wahl.

KW 12
Prototyping I: Ideen entwickeln

User Journey Map

Die User Story Map erzählt die Geschichte, die ein bestimmter Nutzer (Persona) bei der Interaktion mit einem digitale Produkt über eine bestimmte Zeit hinweg erlebt. Beschrieben werden die Aktionen des Nutzers, seine Gefühle und Wahrnehmungen sowie positiven und negativen Einstellungen die er oder sie mitbringt. Durch die Dokumentation der Ereignisse und Interaktionen wird der Fokus in den Kontext der realen Nutzung verschoben. Dies gibt dem ganzen Team eine gemeinsame Vorstellung davon, wie das vorhandene Nutzerverhalten im Kontext der Nutzung effektiv verbessert werden kann.

Designmethode: User Journey Map

Die 10 Gesetze der Einfachheit.

Einfach ist schwer – sehr schwer sogar. Die 10 Gesetze der Einfachheit richten sich an Designer und Nicht-Designer. Sie unterstützen diese bei der Entwicklung von technischen Lösungen und Produkte. Die Gesetze dienen dazu, Produkte und Lösungen so zu gestalten, dass diese für den Nutzer einfacher zu verstehen und zu benutzen sind und mehr Freude bereiten.

User Experience Design: John Maedas 10 Gesetze der Einfachheit

Gemeinsam formulierte Lernziele

  • Es gibt unterschiedlichste Regeln und Methoden, die man in der ersten Phase der Produktentwicklung anwenden kann, um die Basis für erfolgreiche Produkte zu schaffen.
  • Die Gesetze der Einfachheit helfen einem in jeder Phase des Projekts, die unterschiedlichen Ideen zu prüfen, zu bewerten und zu optimieren.

Aufgabe «User Journey Map»

Ziel: Alle Vorarbeiten zusammenbringen und in der User Journey Map zusammenfassen und verdichten

A) Überprüfen Sie die ausgewählte Jobstory, prüfen Sie die Formulierungen und achten Sie auf eine verständliche Visualisierung des Storyboards.

B) Ergänzen Sie die User Journey um die vorgelagerten Schritte «Anmelden» und «Übersicht erhalten». Sehen Sie dazu das Beispiel.

C) Dokumentieren Sie die User Journey mit der Designmethode «User Journey Map». Dazu können Sie das Online-Tool Smaply, die vorbereitete Excel-Datei oder ein anderes geeignetes Tool verwenden.

Zwischen-Beurteilung Ihrer Leistungen:
Senden Sie zur Zwischen-Beurteilung Ihrer Leistung die «User Journey Map» bis am Freitag, 24. März um 18.00 Uhr an michael.schaerlig@fhnw.ch.

Ergänzend legen Sie bitte die folgenden Dokument als pdf bei:

  • Mindmap
  • Product Vision Prototype Canvas
  • 3 Produkt Tweets

Anmerkung: Die Beurteilung muss im Minimum «genügend» sein, damit Sie die weiteren Schritte erfolgreich in Angriff nehmen können.
Wir freuen uns auf Ihre Arbeiten.

KW 13
Usability 1: Gestaltgesetze

Gestaltgesetze

Die Gestaltgesetze spielen im Zusammenhang mit der Gestaltung digitaler Produkte eine wichtige Rolle. Ohne Beachtung dieser Regeln, kann es leicht passieren, dass beispielsweise zusammengehöriger Inhalt nicht als solcher erkannt wird, und sich die Benutzer nicht orientieren können.

Gestaltgesetze

  • Gesetz der Ähnlichkeit
  • Gesetz der Nähe
  • Gesetz der Prägnanz (Guten Gestalt)
  • Gesetz der Geschlossenheit
  • Gesetz der Kontinuität
  • Gesetz des gemeinsamen Schicksals
  • Gesetz der gemeinsamen Region
  • Gesetz der Verbundenheit

Wireframing

Digitale Produkte benötigen einen Bauplan. Diesen Bauplan lässt sich am schnellsten und einfachsten mit Wireframes entwickeln.
Wireframes sind schematische Darstellungen eines digitales Produkts. Es sind Layouts ohne konkrete visuelle Gestaltung, reine Drahtgittermodelle, die die Platzierung von Elementen wie Navigation, Orientierungshilfen, Content des späteren Produktes zeigen.

Wireframing

Gemeinsam formulierte Lernziele

  • Die farbliche Differenzierung der Wireframes hilft bei der groben Kategorisierung der User Interfaces.
  • Mittels Wireframing kann ich früh die Erwartungen und Vorstellungen der späteren Nutzer abholen.
  • Ich kenne die wichtigsten Gestaltgesetze und bin mir bewusst, dass der Mensch Formen intuitiv erweitert und ergänzt.

Übungen und Aufgabe «Gestaltgesetze»

A) Wo erwarten sie bestimmte User Interface Elemente?

B) Welche Gestaltgesetze wurden angewendet?

C) Skizzieren Sie Ihre User Journey als Papierprototyp. Wenden Sie dabei die gelernten Gestaltgesetze an.

KW 14
Interface Design 1: Informationsarchitektur (IA)

Die Informationsarchitektur ist das Rückgrat des digitalen Produktes. Sie bezeichnet den Prozess der Gestaltung der Struktur eines Informationsangebots. Die Informationsarchitektur befasst sich mit den Themen und Inhalten, die nötig sind, um den Nutzern Informationen zu vermitteln.

Card Sorting

Mit Hilfe der Designmethode Card Sorting werden Inhalte und Funktionen sortiert und gegliedert. Die direkte Einbeziehung der Nutzergruppen ist möglich. Das Ergebnis dieser Methode sind «intuitive» Strukturen und Informationsarchitekturen.

Designmethode: Card Sorting

Informationsarchitektur – das Rückgrat des digitalen Produktes.

Informationsarchitektur bezeichnet den Prozess der Gestaltung der Struktur eines Informationsangebots. Die Informationsarchitektur befasst sich mit den Themen und Inhalten, die nötig sind, um den Nutzern Informationen zu vermitteln.

Informationsarchitektur

Sitemap und Flowchart – die Landkarten Ihres digitalen Produkts

Die Site Map visualisiert die komplette Architektur des digitalen Produkts. Sie bildet die Hierarchie der Inhalte ab und zeigt die Navigations- und Menüpunkte der zukünftigen Anwendung. Mit einem Flowchart wird der «Fluss» eines Prozesses visualisiert.

Site Map und Flowchart

Der Design Review hat zum Ziel, innezuhalten und zu prüfen, ob man noch auf dem richtigen Weg ist.

Beim Design Review geht es um die kritische und konstruktive Auseinandersetzung mit Designlösungen. Strukturiert durchgeführt ist ein Design Review ein grosser Gewinn für alle Beteiligten und das neu zu entwickelnde digitale Produkt.

Designmethode: Design Review

Gemeinsam formulierte Lernziele

  • Bekannte Arbeits- und Vorgehensweisen aus dem Alltag lassen sich auf die Sitearchitektur ableiten.
  • Zugänge zu Informationen können unterschiedlich gestaltet werden.
  • Die Designmethode Cardsorting kann Hinweise zur idealen Struktur geben.
  • Abstrakte Themen können mittels einer gut visualisierten Sitearchitektur konkretisiert werden.
  • Mindmaps reflektieren die Denkweise von Nutzern und können Ideen zur Sitearchitektur geben.
  • Cardsorting auf der Basis von mehreren Nutzern hilft dabei, die optimale Sitearchitektur zu entwickeln.
  • Cardsorting ist die Brücke zwischen Mindmaps und der finalen Sitearchitektur.

Übungen und Aufgabe

A) Gruppenarbeit Card Sorting

Material: Ihr Mindmap, Papierkarten und Schreibstifte

  • Bilden Sie Gruppen von vier bis sechs Personen.
  • Schreiben Sie jeden Begriffe vom Mindmap einzeln auf eine Karte.
  • Führen Sie mit den Karten ein offenes Card Sorting durch.
  • Halten Sie das Ergebnis fotografisch fest

B) Gruppenarbeit Product Vision

Material: Ihr Product Tweets

  • Tauschen Sie ihre formulierten Product Tweets in der Gruppe aus.
  • Entwickeln Sie aus den besten Ideen eine passende Product Vision.
  • Schreiben Sie die Product Vision auf.

C) Einzelarbeit Sitemap

  • Gestalten Sie basierend auf Ihrem Card Sorting Ergebnis die Sitemap für die neue Lernplattform.
  • Verwenden Sie für die Gestaltung der Sitemap ein geeignetes Tool (z.B. Powerpoint, Keynote, Excel, Illustrator, InDesign, …)
  • Ergänzen Sie die Sitemap mit der gemeinsam formulierten Product Vision.
  • Dokumentieren Sie diese Arbeiten in Ihrem Lerntagebuch.

KW 15
Interaction Design 2: Navigationsdesign

Interaction Design wird oft mit Interfacedesign oder dem User-Experience-Design in Verbindung gebracht. Interaction Design beschäftigt sich jedoch verstärkt mit der Entwicklung des Dialoges zwischen Mensch und Maschine über einen Zeitraum hinweg. Die beiden Disziplinen sind schwer voneinander zu trennen, denn ein Interaktions Designer entwickelt meist auch ein Interface. Das Interface ist dabei ein Artefakt, das nicht zwingend visuell sein muss, sondern die dem Benutzer lediglich die Möglichkeit zur Interaktion bietet.

Interaktivität ist dabei nicht nur an Technologien gebunden, sondern kann auch als Entwicklung von Lösungen für Dienstleistungen und Abläufe gesehen werden. Produktdesigner wie Dieter Rams, Ex-Chefdesigner von Braun, gestaltete bereits in den 50er Jahren Interaktionen bei Produkten wie Taschenradio, Fernseher und Plattenspieler, ohne diese Tätigkeit dabei als Interaction Design zu bezeichnen. Aufgrund der steigenden Anforderungen an immer komplexer werdende (digitale) Produkte wurde die spezialisierte Designdisziplin notwendig.

Interaction Design gestaltet das Verhalten von digitalen Produkten.

Während bei gedruckten Medien mittels Form und Inhalt eine Botschaft übermittelt wird, kommt bei digitalen Produkten die Interaktion zwischen Mensch und Maschine hinzu. Damit diese Interaktion gelingt und das digitale Produkt das Denken und Handeln der Nutzer optimal unterstützt, braucht es Interaction Design.

Interaction Design

Die Navigation führt die Nutzenden durch die verschiedenen Teile des digitalen Produktes.

Die Navigation eines digitalen Produktes besteht aus einer Sammlung von UI-Komponenten. Die Aufgabe einer guten Navigation ist es, den Nutzern das Auffinden von Informationen und Funktionen zu erleichtern und sie aufzufordern, die gewünschten Aktionen durchzuführen.

Navigationsdesign

UX Prototypen visualisieren Ideen für digitale Produkte und machen diese testbar.

Damit aus Ideen funktionierende und attraktive Produkte entstehen, werden diese im Entwicklungsprozess immer wieder visualisiert, getestet und weiterentwickelt. Sie zeigen den Fluss eines Prozesses auf. Die visualisierten Prozesse basieren auf sogenannten User Stories. Das sind Benutzeraufgaben, die beschreiben, was die Benutzer auf der Site erreichen oder erledigen können. Anhand dieser Stories wird der fertige Prototyp dann auch durchgespielt und getestet.

UX Prototyping

Übungen und Aufgaben

A) Gruppearbeit Design Review

B) Einzelarbeiten Prototyping

  • Ergänzen Sie ihren Prototypen mit den Erkenntnissen aus dem Design Review.
  • Machen Sie den Prototypen erlebbar. Nutzen Sie ein UX Prototyping Tool.
Zwischen-Beurteilung Ihrer Leistungen:
Senden Sie zur Zwischen-Beurteilung Ihrer Leistung den «UX Prototyp» bis am Samstag, 22. April um 18.00 Uhr an michael.schaerlig@fhnw.ch.

Gemeinsam formulierte Lernziele

  • Digitale Produkte sollten sich wie hilfsbereite Menschen verhalten.
  • Konstruktive Feedbacks anhand erster Skizzen, geben wertvolle Hinweise für die weitere Gestaltung.
  • Es ist hilfreich Produktideen frühzeitig zu testen, damit man versteht, was für die Nutzenden bereits gut gelöst ist und was noch verbessert werden muss.
  • Es ist wichtig, dass (Design-)Entscheide nicht nach den persönlichen Präferenzen gefällt werden, sondern auf Basis der Nutzenden und ihren Erwartungen.

KW 17
Usability 2: Dialoggestaltung

Usability und Accessibility – Dialoggestaltung ISO 9241-110

Usability wird mit dem sperrigen Begriff «Gebrauchstauglichkeit» übersetzt und ist eng verwandt mit dem umgangssprachlich geläufigeren Begriff der Benutzerfreundlichkeit sowie dem breiter gefassten Konzept der User Experience (UX).

Usability

 

ISO 9241-110 beschäftigt sich mit der Dialoggestaltung bei der Interaktion zwischen Mensch und Maschine. Die ISO-Norm definiert sieben Grundsätze für die ergonomische Gestaltung der Benutzungsschnittstellen von digitalen Produkten.

Grundsätze der Dialoggestaltung

 

Die 10 generellen Interaction Design-Prinzipen von Jakob Nielsen heissen «Heuristik», weil es sich um Daumenregeln und nicht um spezifische Usability-Richtlinien handelt. Dabei decken Usability-Experten anhand einer Liste von Heuristiken möglichst viele vorstellbare Usability-Probleme auf, die spätere Nutzer des digitalen Produktes haben könnten.

Designmethode Heuristische Evaluation

 

Bei «Accessibility» geht es nicht um Kompromisse bei der Gestaltung, damit Menschen mit Behinderungen das digitale Produkt auch nutzen können. Vielmehr geht es darum, dass Accessibility-Richtlinien bei der Gestaltung und Realisierung helfen, digitale Produkte zu entwickeln, die von allen Menschen leichter verstanden und einfacher bedient werden können.

Accessibility

Design System – Design-Komponente und Design-Pattern

Ein konsistentes, ansprechendes und funktionales Design System basiert auf unzähligen Vorarbeiten und Teilen wie Produktvision, Nutzergruppen, Branding, UX-Writing, Designsprache, Interaction Design, Screen Architektur – um nur ein paar zu nennen. Ein Design System ist mehr als ein Framework, UI Toolkit oder eine Komponenten Library – es ist ein Regelwerk, um ein Digitales Produkt gezielt entwickeln zu können.

Bevor wir mit der effektiven Gestaltung des Digitalen Produktes starten können, sollten mindestens die folgenden 10 Punkte definiert sein. Sobald diese definiert sind, können diese Einzelteile in eine zusammenhängende Sprache umgesetzt werden.

Design System Teil 1

Design System Teil 2

Übungen und Aufgaben

A) Überprüfen Sie die Usability Ihres Prototypen

  • Machen sie in kleinen Gruppen (3 bis 4 Personen) einen Design Review von Ihrem interaktiven Prototypen.
  • Nutzen Sie dazu als Leitfaden die 7 Prinzipien der Dialoggestaltung.
  • Würdigen Sie einerseits gute Ansätze und decken Sie andererseits Verbesserungspotenzial auf.
  • Halten Sie mindestens 3 Punkte fest, die Sie in der nächsten Iteration verbessern wollen.

B) Machen Sie sich vertraut mit möglichen Design-Tools

  • Für die visuelle Gestaltung Ihres Prototypen brauchen Sie ein geeignetes Design Tool. Wir verwenden in unserem Designalltag die Tools der Adobe Creative Suite (Illustrator, Photoshop, InDesign), Sketchapp (zur Zeit nur Mac) oder Axure. Natürlich gibt es auch webbasierte Tools, die teilweise gratis genutzt werden können.
  • Jedes Tool hat seine Vor- und Nachteile. Wählen Sie ein Tool aus, das Ihre Arbeitsweise unterstützt.

Hier eine Auswahl:

Gemeinsam formulierte Lernziele

  • Es ist wichtig, dass alle Menschen (auch solche mit Einschränkungen) ein digitales Produkt bedienen können. Hilfsmittel können sein: Sprachsteuerung, Tastaturbedienbarkeit, Screenreader.
  • Mit einem Produkt sollen alle Menschen erreicht werden (z.B. Bankomat mit Kopfhöreranschluss).
  • Definition Usability: Die Usability eines Produktes ist das Ausmass, in dem es von einem bestimmten Benutzer verwendet werden kann, um bestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellend zu erreichen.
  • Die 10 Heuristik von Nielsen helfen beim Beurteilen der Usability eines digitalen Produktes.
  • Barrierefreies Design muss nicht «behindert» aussehen.
  • Mit einfachen gestalterieschen Mitteln kann viel für eine gute Accessibility gemacht werden. Dies macht das Produkt nicht teurer.
  • Eine UI-Sprache kann mit Hilfe einiger Grundregeln erarbeitet werden.

KW 20
Design Guidelines

Design Guidelines – Verbindung zwischen Design und Entwicklung

Design Guidelines beschreiben mit Beispielen und Hilfsmitteln ein gemeinsames Verständnis und ein sinnvolles Anwenden von Regeln. Gute Guidelines unterstützen die effiziente Überleitung vom Design zur Entwicklung und tragen somit dazu bei, dass digitale Produkte schneller und einfacher erstellt werden können. Um einen reibungslosen Workflow zu erhalten, sind Guidelines ein wichtiges Kommunikationsmittel im Prozess. Sie haben ausserdem organisatorischen Nutzen und unterstützen den nutzerorientierten Prozess in einem Unternehmen, indem Naming und Verhalten von UI-Elemente klar definiert sind.

Design Guidlines

Übungen und Aufgaben

A) Entwickeln Sie eine Visual Design Board für die Lernplattform

  • Halten Sie schriftlich fest, für welche Themen und Werte  das Digitale Produkt steht? Als hilfreich hat sich Sie die Arbeit mit einer Themen-/Werte-Matrix erwiesen. Diese hilft Ihnen strukturiert vorzugehen.
  • Überlegen Sie, wie sich diese Themen und Werte mittels Design umsetzen lassen: Welche Typografie eignet sich dafür? Wie soll das Farbklima sein? Wie werden Bilder und Grafiken eingesetzt? Studieren Sie dazu die Inputs aus den Beiträgen zu Design System 1 und Design System 2
  • Lassen Sie sich von guten Beispielen inspirieren. Sammeln Sie Ideen.

B) Fassen Sie die besten Ideen als Konzept im Visual Design Board zusammen. Kreieren Sie einen ersten typischen Screen. Dieser soll  für Ihr definiertes Endgerät massstabsgetreu aufgebaut sein. Achten Sie auf Proportionen, Grössen und Abstände.

C) Präsentieren Sie Ihre Ergebnisse. Achten Sie darauf, dass Sie die Ergebnisse und Entscheide gut begründen. Hier ein paar Fragen, die Ihnen helfen die Argumentation aufzubauen:

  • Warum haben Sie diese Schrift in diesen Grössen und Auszeichnungsarten gewählt?
  • Warum verwenden Sie diese Farben?
  • Wie setzen Sie die Farben ein (Orientierung, Navigation, Image, Inhalt)?
  • Wo platzieren Sie Aktions-Element?
  • Wie führen Sie die Nutzer durch die Job Storie?

Lernzielkontrolle

  • Schriftliche Prüfung, max. 45 Minuten
  • Im Klassenzimmer
  • Der Fokus der Lernzielkontrolle liegt auf den «Lessons learned»
  • Das Lerntagebuch darf verwendet werden

KW 21
Interface Design 2: Visual Design und Usability Testing

Icon Design

Ein Icon ist ein grafisches Symbol, das zur Verdeutlichung einer Information benutzt wird. Icons fungieren als Markenzeichen und schaffen einen Wiedererkennungswert. Der Hauptzweck eines Icons ist es, eine bestimmte Botschaft bildlich darzustellen und Orientierung zu schaffen.

Icon Design

Typografie am Screen

Der richtige Umgang mit Typografie will gelernt sein. Schriftauswahl, Lesbarkeit und die Berücksichtigung der typografischen Regeln gehören zu den wichtigsten Dingen, die man als Gestalter beherrschen sollte. Seit Webschriften und CSS3 wird jedoch der Umgang mit Typografie am Screen immer anspruchsvoller. Hier lesen Sie die wichtigsten Regeln und erhalten wertvolle Tipps.

Typografie am Screen

Usability Testing – Cognitive Walkthrough

Wenn man als Designer oder Entwickler über mehrere Wochen an einem Projekt arbeitet, hat man keinen unvoreingenommenen Blick mehr auf das Produkt das entsteht. Dinge, die einem als logisch erscheinen, sind für die Nutzenden vielleicht nicht sofort erschliessbar. Ob ein Produkt wirklich funktioniert und nutzbar ist, kann man nur herausfinden, wenn man es testet. Hier kommen Usability-Tests ins Spiel. Mit diesen Tests will man erfahren, wie die Nutzer ein Produkt wahrnehmen, wie sie damit interagieren und was ihnen danach in Erinnerung bleibt.

Usability Testing

Übungen und Aufgaben

A) Cognitive Walkthrough

  • Bereiten Sie einen Cognitive Walkthrough für Ihre Jobstory vor:  Benutzergruppe / Persona festlegen und typische Aufgabe (Jobstory) definieren.
  • Beschreiben Sie den Weg, den die Benutzenden idealerweise wählen, um die Aufgabe zu erledigen.
  • Ergänzen Sie Ihr Lerntagebuch mit dieser Übung.

B) Vom Design Board zum Visual Interface Design

  • Erweitern Sie Ihre Wireframes mit visueller Identität.
  • Gestalten Sie die Screens Ihrer Jobstory – setzen Sie die visuellen Basiselemente vom Design Board sorgfältig und bewusst ein

KW 22
Usability und Interface Design – Best Practices

Digital Product Design

Digital Product Design ist ein iterativer Prozess, um ein funktionales Problem mit einer formalen Lösung zu beheben.

Best Practices

Wir analysieren Erfolgsmodelle und tauschen uns aus über Standards und Trends im Digitalen Product Design. Dabei steht der Einsatz und der Umgang mit Farbe im Interface Design im Fokus.

Umgang mit Farbe – inhaltliche Zusammenhänge farblich codieren

Die Verwendung von Farbcodes hilft uns, Dinge und Sachverhalte zu unterscheiden. Jede Informationseinheit kann in einer eigenen Farbe gestaltet werden. Alles, was in einem inhaltlichen Zusammenhang steht, wird in derselben Farbe dargestellt, so dass die Nutzer die verschiedenen Informationen gut strukturiert aufnehmen können.

Abgabe Lerntagebuch

Senden Sie zur Beurteilung Ihres Lerntagebuchs ein PDF bis am Montag, 29. Mai um 23.00 Uhr an michael.schaerlig@fhnw.ch.

Hier zur Erinnerung die Beurteilungskriterien:

  • Ist das Lerntagebuch gut strukturiert und verständlich aufgebaut?
  • Sind alle Übungen aus dem Unterricht dokumentiert und mit persönlichen Beispielen visualisiert?
  • Sind die Lessons learned und persönliche Erkenntnisse festgehalten?
  • Positives / Überraschendes / Spezielles

KW 24
Design Präsentation / Design Review

Themen folgen

Präsentation Design-Prototyp

Senden Sie zur Beurteilung Ihres Design-Prototyps ein pdf oder Link bis am Sonntag, 11. Juni um 18.00 Uhr an michael.schaerlig@fhnw.ch.

Rahmenbedingungen der Präsentation:

  • Sie präsentieren Ihren Design-Prototyp auf dem eigenen Gerät einer kleinen Gruppe von 5 bis 6 Studierenden.
  • Dafür haben sie max. 3 Minuten Zeit.

 

Hier zur Erinnerung die Beurteilungskriterien:

  • Ist die Präsentation gut strukturiert?
  • Wird der Prototyp leicht verständlich präsentiert?
  • Ist die Wahl der Medien angemessen und funktionieren diese problemlos?
  • Ist der Umfang des Prototyps für die von Ihnen definierte Jobstory angemessen?
  • Sind die einzelnen Schritte des festgelegten Lösungswegs der Jobstory logisch nachvollziehbar?
  • Erfüllt der Einsatz von Schrift die gelernten Usability Kriterien?
  • Unterstützt der Farbeinsatz im User Interface die Usability?

Welche Fragen und Wünsche bestehen an das Modul UUID aus Sicht Studierende?

  • Wie lässt sich das Thema Usability in Kundenprojekten anwenden?
  • Wie lässt sich komplexe Software auch Menschen mit Einschränkungen zugänglich machen?
  • Wie lässt sich Usability mittels Tests prüfen?
  • Welche Usability-Themen betreffen den Einsatz von Farben?
  • Welche Standards gibt es in Bezug auf Usability?
  • Wie lassen sich User Interfaces einfach gestalten?
  • Wie sieht der Prozess aus, der sicherstellt, dass ein User Interface einfach bedienbar wird?
  • Welche Aufgaben und Pflichten hat ein Usability Manager in einem Projekt?
  • Welche Do’s & Don’ts gibt es in Bezug auf Usability?
  • Wie kann Einfachheit im Design erreicht werden?
  • Welche Tools gibt es, um User Interface Design zu entwickeln?
  • Wie entwickelt man ein gutes Design System für User Interfaces?
  • Was bedeutet Systematik im Design?
  • Wie lässt sich Einfachheit und Effizienz von Benutzeroberfläche ermitteln?
  • Wie lässt sich der Endnutzer so einfach wie möglich in den Designprozess integrieren?
  • Wie lassen sich die Themen Usability und User Interface Design in die Praxis integrieren aus Sicht Software Developer?
  • Was ist gutes Design?
  • Was sind aktuelle Designtrends?
  • Was macht ansprechendes Design aus?
  • Aus welchen Grundbausteinen besteht ein gutes Interface?
  • Wie konzipiert man ein Interface, das sowohl Kinder und Senioren optimal bedient?
  • Wie sehen universelle User Interface Design Konzepte aus?
  • Wie gehe ich ein Designkonzept von der Idee bis hin zu Umsetzung strukturiert an?
  • Welche Design-Tools werden für die Entwicklung von User Interface Design eingesetzt?
  • Was ist State-of-the-Art in den Bereichen Vorgehen, Usability und Design?

Fragen zum Unterricht?
Nehmen Sie mit uns Kontakt auf!

Lehre
Weiterbildung
Workshops

Icon Masterclass white Designsensor AG

Gerne geben wir unsere jahrelange Erfahrung in den Bereichen Human Centered Design, Digital Product Design und Digital Information Design weiter. Wir unterrichten an Fachhochschulen und Fachschulen, konzipieren und organisieren Weiterbildungsangebote und führen massgeschneiderte Workshops durch. Nehmen Sie mit uns Kontakt auf, wenn Sie Ihre Idee mit uns besprechen möchten oder informieren Sie sich über unsere Lehrtätigkeit.

Kontakt