Atomic Design (atomares Designsystem)

2013 stellte der amerikanische Frontend-Designer Brad Frost den neuen Gestaltungsansatz «Atomic Design» vor. Dieser orientiert sich an einer naturwissenschaftlichen Betrachtungsweise von Design, welche besagt, dass funktionierendes, sprich gutes Design, in all seinen Einzelelementen konsistent sowie modular aus Bausteinen aufgebaut sein muss.

Die Verwendung eines atomaren Designsystems bei der Erstellung einer Website gewährleistet zum einen die innere Verwandtschaft (Kohärenz) und Widerspruchsfreiheit (Konsistenz) aller Elemente, zum anderen stellt es der technischen Umsetzung fertige Bausteine bereit, mit denen Entwickler und Integratoren nicht nur die eigentliche Website, sondern darüber hinaus auch Microsites, Landingpages oder mobile Apps erstellen können. Einmal konstruiert, kann ein Atomic Design System beliebig verwendet werden. Und das ist auch der grösste Vorteil dieses Systems. In der Praxis entstehen neue Templates im Handumdrehen.

Das sichert ein einheitliches Auftreten der gesamten digitalen Touchpoints über den eigentlichen Relaunch hinweg und verringert den Aufwand im Entwicklungsprozess erheblich. Auch macht es eine UI-Dokumentation weitestgehend überflüssig, da der daraus generierte Online-Styleguide alle Designelemente dokumentiert – und das sogar responsive und pixelgenau.

snowflake benutzt für die Erstellung von Atomic Designsystemen ein Tool namens «Atomic Kitchen», mit welchem man iterativ ein Atomic Designsystem erstellen und online veröffentlichen kann. Aus diesem können einzelne «Code-Pattern» für die technische Umsetzung entnommen und zu fertigen Websites zusammengesetzt werden.

 

Weitere Informationen

Atomic Kitchen (atomare Code-Pattern-Library)

Mit Hilfe des Tools «Atomic-Kitchen» erstellt und verwaltet snowflake nicht nur komplexe Designsysteme, sondern stellt der technischen Realisierung auch eine Code-Pattern-Library zur Verfügung. Das führt zu Aufwandsreduzierung.

Aus Erfahrung weiss snowflake, dass man innerhalb der technischen Umsetzung eines Frontends, bei den notwendigen Reviews, beim Design-Support der Entwickler und bei der Erweiterung des Designs in der Post-Golive-Phase mindestens die Hälfte der Zeit sparen kann, wenn ein Designsystem in Form einer Code-Library vorliegt.

Vorteile des Einsatzes von Atomic-Kitchen

  • Alle Design-Elemente liegen als HTML-/CSS-Code in übersichtlicher Form einer Online-Pattern-Library vollumfänglich «responsive» vor. Das System kann über ein benutzerfreundliches Panel jederzeit erweitert werden.
  • Es verhindert Missverständnisse zwischen Design und Realisierung, da das Design nicht erst «in Code übersetzt» werden muss und somit kein Interpretationsspielraum vorhanden ist. Das bedeutet ein enormes Zeitersparnis für die technische Umsetzung.
  • Durch die native CSS-Definitionen aller Stati (Hover, Sticky-Behavior, Micro-Animationen u.a.) in Atomic-Kitchen erhält man ein echtes Look & Feel der späteren Anwendung und es gibt keine unliebsamen «Missing Links» mehr.
  • Auch fällt durch die pixelgenaue, responsive Darstellung aller Inhaltselemente in HTML/CSS das Entwickler-Briefing wesentlich kürzer aus als bei einer herkömmlichen Vorgehensweise ohne HTML/CSS-Pattern-Library. Der Kommunikationsaufwand zwischen Designer und Entwickler reduziert sich auch hier enorm.

Barrierefreiheit (Accessibility)

Ein barrierefreies Design gestaltet eine Anwendung so, dass diese auch von Menschen mit Beeinträchtigungen (z.B. Sehschwächen, Farbenfehlsichtigkeiten o.a.) ohne zusätzliche Hilfen genutzt werden kann. Dabei gibt es eine Reihe von Stufen von Barrierefreiheit.

Durch langjährige Erfahrungen mit Anwendungslösungen im öffentlichen Bereich, verfügt snowflake in Bezug auf Accessibility-Umsetzungen über eine umfassende Expertise. Diese wird während der Design- und Umsetzungsphase in die Lösung eingebracht. Auch bietet snowflake ein «Accessibility Audit» an, sprich eine detaillierte Analyse der Barrierefreiheit Ihrer Website oder Ihrer Mobile-App. In dieser wird Ihre Anwendung auf Anforderungen wie z.B. die der DIN EN ISO 924, «Access for all» oder dem W3C-Standard WCAG 2.0 geprüft.

Briefing Webagentur» (Offertenanfrage)

Je nach Projektumfang kann eine Offertenanfrage bzw. ein Briefing sehr umfangreich oder auch kurz gefasst sein. Aus langjähriger Agenturerfahrung kann immer wieder festgestellt werden: ein gutes Briefing entsteht nicht so einfach nebenbei. Es ist aber von zentraler Bedeutung, da es Missverständnisse verhindert und Ihnen hilft, Zeit und Kosten zu sparen, sofern darin alle wichtigen Anforderungen festgehalten sind. snowflake steht Ihnen auch dazu beratend zur Verfügung.

Rufen Sie uns an oder nutzen Sie unser Kontaktformular. Auch haben wir für Sie eine Checkliste vorbereitet, die Sie gerne für Ihre Belange benutzen können.

Business Model Design

Im Business Model Design beschäftigt man sich mit dem genauen Aufbau und dem Ablauf eines Wertschöpfungssystemes. Ein Business Model Design definiert nicht das Wertangebot eines Unternehmens selbst, sondern beantwortet vielmehr die Frage, wie Werte für das Unternehmen geschaffen werden. Am Beispiel «airbnb» im Vergleich zu einem Hotel wird dieser Unterschied klar: beide Anbieter verfügen über das Wertangebot ‚Übernachtungen‘, allerdings mit vollkommen unterschiedlichen Business Model Designs.

Business Value

Business Value ein informeller Begriff, der alle Formen von Unternehmens-Werten umfasst, die langfristig die Zukunftsfähigkeit und das Wohlbefinden des Unternehmens bestimmen. Das Konzept des Business Values erweitert den Unternehmenswert über reine monetäre Aspekte hinaus auch auf immaterielle Vermögenswerte, wie Management- und Mitarbeiterqualität, Reputation und Markenbekanntheit und andere relevante, nicht-monetäre Werte eines Unternehmens.

Card-Mapping / Card-Sorting

Ein Card-Mapping oder Card-Sorting Verfahren wird eingesetzt, um die Sprache und das mentale Modell der Nutzer besser zu verstehen und eine taxonomische Inhaltsstrukturierung vorzunehmen. So wird sichergestellt, dass die Navigation einer Anwendung benutzerfreundlich ist und nur die Begriffe enthält, die von den Zielgruppen auch gut verstanden werden. Dabei beschriften und sortieren eine Reihe von Personen Karten und gruppieren diese auf eine Pinnwand oder einem Whiteboard. Die Ergebnisse dienen als Arbeits- und Entscheidungsgrundlage auf dem Weg zu einer benutzerfreundlichen Informationsarchitektur.

Click-Dummy

Click-Dummies sind sehr einfache Prototypen, die nicht den vollständigen Funktionsumfang der späteren Lösung aufweisen. Sie sind einfacher zu erstellen als ein nativer HTML/CSS-Prototype und stellen diesbezüglich eine kostengünstige Alternative dar. Wie andere Prototypen auch, helfen sie aufzudecken, wie Benutzer mit einer Anwendung interagieren, welchen Schwierigkeiten sie dabei begegnen und ob bestimmte Aufgaben erfolgreich ausgeführt werden können.

Cognitive Walkthrough

Cognitive Walkthrough bedeutet soviel wie ‚Durchdenken eines Problems‘. Es ist eine Usability-Inspektionsmethode und gehört im Gegensatz zu den empirischen (wie z.B: dem Usability-Test) zu den analytischen Verfahren. Beim Cognitive Walkthrough versetzt sich ein UX Experte in die Perspektive eines hypothetischen Benutzers und analysiert konkrete Nutzungsszenarien. Dabei geht er getreu dem Jobs-to-be-done-Framework davon aus, dass der Anwender den Weg des geringsten Aufwands gehen wird. Im Anschluss werden die Ergebnisse diskutiert und gemeinsam bewertet.

Content-Strategie

Dabei geht es nicht allein um das Erstellen oder Beschaffen von Texten und Bildern, sondern viel mehr darum, zu planen, wie sich welche Inhalte über welche Kanäle bestmöglich verbreiten und verwalten lassen.

Eine Content-Strategie umfasst daher die Bereiche Content-Planung, Content-Produktion und Content-Management. In einem Content-Audit wird der Status Quo der bereits veröffentlichten Inhalte eines Unternehmens analysiert. Ziel ist es, die Lücke zwischen bestehenden und noch benötigten Inhalten aufzudecken.

Eine Content-Strategie sollte mindestens nachfolgende Fragen beantworten:

  • Warum soll der Content veröffentlicht werden, wem nützt er?
  • Wer produziert den Content?
  • Was soll der Content sein?
  • Wann soll der Content veröffentlicht werden?
  • Wie und wo soll der Content veröffentlicht werden?

Corporate Design

Um ein kanalübergreifendes, konsistentes und wiedererkennbares Erscheinungsbild einer Marke oder eines Unternehmens sicherzustellen, werden neue Corporate Designs kreiert oder bestehende weiterentwickelt. Dabei werden nicht nur einzelne Medien, Kanäle oder Anwendungen betrachtet, sondern man determiniert über ein einheitliches Designsystem alle Touchpoints eines Unternehmens.

Die Entwicklung oder Überarbeitung eines Corporate Designs (inklusive Logo, Geschäftspapiere, analoge wie digitale Touchpoints) gehört zum UX-Leistungsportfolio von snowflake.

Designsysteme

Ab einer gewissen Projekt-Komplexität erzeugt die begleitende Erstellung eines Designsystemes in der Kreationsphase sehr viele Mehrwerte.

Ein solches Designsystem gewährleistet unter anderem ein widerspruchsfreies und leicht erweiterbares Webdesign. Es stellt der technischen Realisierung fertige Segmente in einem Baukastensystem bereit, mit denen Entwickler und Integratoren komplexe Seiten-Templates bzw. ganze Websites erstellen können, ohne dass jedes Mal ein Designer mitwirken muss.

Das liegt daran, das ein Designsystem ein Design schematisiert und modularisiert. Das heisst alle Komponenten werden nach einem Baustein-Prinzip entwickelt. Einmal konstruiert, kann ein Designsystem beliebig oft für verschiedenste digitale Touchpoints verwendet werden.

 

Mehr Infos zu Designsystemen

Design-Thinking

Design Thinking ist ein Ansatz, der zum Lösen von Problemen und zur Entwicklung neuer Ideen führen soll. Im Design Thinking Prozess entstehen neue Lösungen aus den Bedürfnissen der Kunden/Nutzer (Desireability), der technischen Machbarkeit (Feasibility) sowie der ökonomischen Verwertung (Viability). Primäres Ziel dabei ist, Lösungen zu finden, die aus Nutzersicht überzeugend sind.

Zahlreiche internationale Unternehmen und Organisationen jeglicher Grösse nutzen Design Thinking als Projekt-, Innovations- und Entwicklungsmethode. So wurde beispielsweise die erste Computer-Maus von Apple auf diese Weise gestaltet. snowflake nutzt viele der darin etablierten Methoden, um Intuition und Kreativität mit analytischen Methoden zu verknüpfen.

Empathie Maps

Eine Empathie-Map ist eine Visualisierung, die verwendet wird, um zu veranschaulichen, was man über einen bestimmten Nutzertyp weiss. Ähnlich wie Personas, aber mit weniger Arbeitsaufwand, präsentieren sie das vorhandene Wissen über Benutzer, um ein gemeinsames Verständnis der bekannten Benutzerbedürfnisse zu schaffen. Sie dient den Projektbeteiligten als eine nutzerzentrierte Entscheidungshilfe im Konzeptionsprozess.

In der klassischen Empathy Map wird aufgeführt, was die jeweilige Person sieht, hört, denkt und sagt. Jedoch macht es Sinn, diese mit weiteren Aspekten wie beispielsweise nachfolgenden Fragestellungen anzureichern:

  • Was tut die Person?
  • Was fühlt die Person?
  • Wer oder was beeinflusst die Person?
  • Welche Ziele hat die Person oder was motiviert sie (Gains)?
  • Welche Probleme und Hindernisse hat die Person (Pains)?

Expert Review (auch Site-Audit, UX Review oder Experten-Analyse)

Ein Expert- oder UX-Review macht es möglich, sowohl Schwächen in der Usability, als auch Lücken bei der User Experience zu identifizieren. Dabei untersuchen UX Experten eine Anwendung in Bezug auf Benutzerfreundlichkeit, Konsistenz und den allgemeinen Workflow. Auf diese Weise erhält man schnell einen Überblick über die Schwächen und Stärken der vorliegenden Anwendung.

Ein UX-Review ist grundlegender Bestandteil der Konzeptionsleistungen innerhalb der Analyse-Phase. Es kann von snowflake aber auch als separate Leistung bezogen werden, um so das Verbesserungspotential einer Website zu bestimmen. Mehr dazu unter: UX-Review (Website-Check) zum Festpreis

Heuristische Evaluation (oder Evaluierung)

Bei der heuristischen Evaluation (Heuristik – griech. heuriskein = ‚finden‘) handelt es sich um eine Methode, mit welcher die Gebrauchstauglichkeit eines Systems oder Anwendung beurteilt werden kann. In der von Jakob Nielsen entwickelten Methode versucht eine kleine Gruppe von Usability-Experten, anhand einer von ihm entwickelten Fragenliste möglichst viele potenzielle Usability-Probleme zu finden, die spätere reale Nutzer haben könnten. Diese Methode wird häufig im Rahmen eines UX-Reviews eingesetzt.

Interaction Design

Interaction Design wird oft als Synonym für UX- (User Experience), UI- (User Interface) oder Web-Design benutzt. Die Trennung dieser  Disziplinen fällt oft schwer, denn das Ergebnis aller genannten Diziplinen ist zumeist ein User Interface und das Ziel eine möglichst optimale User Experience.

Jedoch sind die Wege zum Ziel sehr unterschiedlich und snowflake gestaltet diesen grundsätzlich interdiziplinär und ganzheitlich, ohne sich in Begrifflichkeiten zu verlieren.

Informationsarchitektur

Eine Website besteht immer aus Inhalten, die kommuniziert werden sollen. Das können Texte, Videos, Fotos o.ä. sein. Die Informationsarchitektur bildet das Grundgerüst, welches diese Inhalte in eine leicht zugängliche, verständliche Form strukturiert. Das können beispielsweise Seiten, Dialogboxen oder andere Seitenelemente sein. Zum anderen macht sie diese über diverse Navigationselemente (z.B. über eine Suche, über Menüs und Verlinkungen) sicht- bzw. erreichbar.

Die Auffindung der relevanten Inhalte seitens des Benutzers soll so einfach und intuitiv wie möglich erfolgen. Der Fokus eines guten Informationsarchitekten liegt somit in erster Linie auf dem Nutzer, seiner Mind-Map, seinem Informationsbedürfnis sowie den spezifischen Rahmenbedingungen, in denen sich die Nutzung der Anwendung abspielt.

Die Informationsarchitektur einer digitalen Anwendung stellt einer der fundamentalen Ebene der User Experience dar (siehe nachfolgendes Diagramm) - sie arbeitet sozusagen im Hintergrund und wird in der Regel nur dann von Nutzern wahrgenommen, wenn sie fehlerhaft ist und nicht, wenn sie tadellos funktioniert.

Eine Informationsarchitektur bildet das Gerüst oder das Fundament einer Website, welches ihre Inhalte strukturiert. Diese Struktureinheiten werden für den Nutzer erst durch das Interaction- und Visual-Design sichtbar gemacht.

Jobs-to-be-done Prinzip

Das Jobs-to-be-done Prinzip geht auf den bekannten Harvard Professor Clayton Christensen und den User Experience Pionier Don Norman zurück, welcher die Frage beantwortete, was das JTBD-Prinzip denn sei: ‚Die Menschen wollen keine sechs Millimeter grossen Bohrer, sie wollen sechs Millimeter grosse Löcher in den Wänden!‘

Er hat damit einer der wichtigsten Grundlagen für das Konzept der User Experience geschaffen. Das JTBD-Prinzip besagt, dass sich Menschen gerne Werte in ihrem Leben aneignen möchten, materielle wie immaterielle. Deswegen engagieren sie Unternehmen, Produkte oder Dienstleistungen.

Menschen sind nicht wirklich an Produkten oder Dienstleistungen interessiert, sondern primär an der Bewältigung ihrer Aufgaben oder der Lösung ihrer Probleme. Man liebt das Produkt letztendlich nur so sehr, wie es seine spezifischen Aufgaben erledigt und dabei hilft, sich relevante Werte im Leben anzueignen. Um erfolgreiche Produkte zu entwickeln, muss man sich dieser Tatsache stellen und beantworten, warum Menschen Produkte nutzen und welche Ziele diese Menschen letztendlich dabei verfolgen.

Joy-of-Use

Eines der am häufigsten zitierten Konzepte im Bereich der User Experience ist das «Joy of Use». Kaum ein digitales Medium wird heute ohne das Ziel einer solchen emotionalen Ansprache entwickelt. Was hat es damit auf sich? Muss die Website einer Bank Spass machen? Nicht unbedingt.

Deswegen ist es sinnvoll, einerseits zwischen Spass (im Sinne von Unterhaltung) und Freude (im Sinne einer bereichernden Erfahrung) zu unterscheiden. Spass im Sinne von Unterhaltung kann ein Online-Game oder eine lustige App bieten. Freude hingegen entsteht beim Benutzer, wenn dessen Handlungsziele durch das Produkt oder System effektiv, effizient und zufriedenstellend erreicht werden und dies dazu auf innovative, originelle Weise geschieht, so dass die gewonnene Erfahrung eine bereichernde Qualität darstellt.

Keyword-Strategie

Um Inhalte in Suchmaschinen auffindbar zu machen bedarf es einer Keyword-Strategie. Eine zielführende Keyword-Strategie muss eng verzahnt mit einer Content-Strategie entwickelt werden. Der Weg zum Keyword wird nicht nur über die Inhalte definiert, sondern beispielsweise auch über Opportunitäten, Nutzerbedarf, komplementäre oder konkurrenzorientierte Suchwörter.

Kommunikations- und/oder Designkonzepte

Ein Design- oder Kommunikationskonzept definiert die strategische Grundausrichtung der Kommunikation oder des Designs. In ihm finden sich argumentative Herleitungen sowie auch Aussagen zu Erfolgsfaktoren, Kontrollinstrumenten und Konsequenzen.

Es dient im kreativen Entwicklungsprozess als Fundament und Entscheidungshilfe zugleich. In ihm sind alle relevanten Kommunikations- und/oder Gestaltungsparameter enthalten. Es bietet gegebenenfalls auch erste Lösungsansätze oder Handlungsempfehlungen.

In der Regel findet man in einem solchen Konzept Aussagen zu/zur:

  • Ist-Situation
  • Ziele
  • Zielgruppen
  • Positionierung
  • Tonality und andere Eigenschaften
  • Strategie Herleitung (z.B. zu den vorliegenden Daten und Recherchen)
  • Massnahmen
  • Roadmap
  • Erfolgskontrolle
  • Next Steps

Mobile First

Mobile First ist ein Designkonzept, bei dem die optimale Darstellung einer Website auf mobilen Endgeräten die höchste Priorität inne hat. Bei Mobile First beginnt der Designer mit der Gestaltung der mobilen Version und arbeitet sich schrittweise zu immer grösseren Viewports vor.

Auf diese Weise wird ein optimales Nutzungserlebnis der mobilen Version einer Anwendung sichergestellt. Das macht vor allem für Anwendungen Sinn, von denen man weiss, dass diese vorwiegend mobil genutzt werden. 

Mockups

Ein Mockup ist ein digital gestalteter Entwurf und beinhaltet alle relevanten Designelemente im Detail. Mockups dienen im Kreationsprozess zur Visualisierung von Ideen und Lösungsvorschlägen.

Die Begriffe Scribble, Wireframe, Mockup, Click-Dummy und Prototyp werden oft durcheinander gebracht - stellen alle doch Arten von Entwurfsdarstellungen im Rahmen des Konzeptions- und Kreationsprozess dar.

Ein Scribble (eine skizzenhafte Darstellung, häufig auf Papier) stellt die einfachste Form der Entwurfsdarstellung dar, eine Stufe detaillierter ist hingegen schon ein Wireframe, welches in der Regel digital erstellt wird, aber in Absetzung zum Mockup noch keine Farben, Bilder oder Grafiken beinhaltet.

Mockups können auf der Struktur eines vorhandenen Wireframes aufbauen und dieses weiterentwickeln. Durch die Integration von Farben und Bildern kommen sie dem endgültigen Visual Design sehr nahe bzw. bilden dieses bereits ab. Daher werden sie bevorzugt zu Präsentationszwecken eingesetzt. Mockups sind immer statisch. Sie können aber als Grundlage für Click-Dummies (einfache Prototypen) dienen, die dann miteinander verbunden werden, um so ein Prozess oder Ablauf zu simulieren.

Im Unterschied zu Mockups sind Prototypen immer interaktiv und beinhalten meist schon eine Reihe von Funktionen der geplanten Anwendung.

Moderierter Nutzer-Test (kontextuelles Interview)

In einem moderierten Benutzertext oder kontextuellen Interview agieren Benutzer mit einer Anwendung oder einem Produkt, während sie ihre Handlungen und Erwartungen verbalisieren. Der Moderator stellt vorbereitete und spontane Fragen, welche die User Experience beleuchten.

MVP (Minimum Viable Product)

Ein Minimum Viable Product (wörtlich übersetzt: Minimal überlebensfähiges Produkt), ist die erste Iteration eines Produkts mit den nötigsten Kernfunktionen, welches entwickelt wird, um mit minimalem Aufwand den Kunden-, Markt- oder Funktionsbedarf zu decken und mittels generiertem Feedback das Produkt über Later Stage Versionen Runde um Runde zu erweitern und zu verbessern. Die Herausforderung besteht darin, das „Minimum“ so zu definieren, dass das Produkt bereits brauchbar, also „überlebensfähig“ ist und einen ersten Nutzen für die Kunden liefert.

Personas

Personas sind archetypische Anwenderprofile, die Nutzergruppen und ihre unterschiedlichen Ziele, Eigenschaften, Verhaltensweisen und Motive in Bezug auf eine Anwendung beschreiben. Eine Persona steht stellvertretend für eine Nutzergruppe, die für ihre Anwendung relevant ist. Durch die Entwicklung von Personas werden allen Projektbeteiligten die Zielgruppen und ihre Anforderungen näher gebracht.

Product Vision

Die Product Vision beantwortet jedem im Entwicklungsprozess Beteiligten, um was es bei dem zu entwickelten Produkt geht, was es den potentiellen Nutzern (an Werten) bringen und wie es von ihnen erlebt werden soll. In ihr werden neben der Nutzerbedürfnisse, dem Nutzungskontext auch wichtige Produkteigenschaften festgelegt, wie z.B. das zentrale Nutzenversprechen (Value Proposition). 

Prototype, Prototyping

Um die erarbeiteten Lösungsvorschläge und vor allem ihre Funktionalität zu evaluieren, werden diese in Prototypen ausformuliert und mittels Nutzertests überprüft. Ein Prototyp kann alles sein, was mit dem ein Benutzer interagieren kann - sei es eine Wand aus Post-it-Notizen oder ein Click-Dummy aus Wireframes. Es hängt ganz von den damit verbundenen Fragestellungen ab, die man beantwortet wissen möchte. Prototypen helfen zu verstehen und zu kommunizieren. Sie sind in der sind in der Kommunikation mit allen Stakeholdern ein entscheidungsförderndes und zeitsparendes Instrument.

Responsives Webdesign

Responsives Webdesign sorgt dafür, dass sich Webseiten an den technischen Kontext (Grösse und Ausrichtung des Viewports, Touchscreen oder Mouse, ...) ihrer Nutzung optimal anpassen. So kann zum Beispiel der Mobile First Ansatz gewählt werden, um eine Anwendung für eine Nutzung auf mobilen Endgeräten zu optimieren.

Die Ausrichtung von Webanwendungen auf eine mobile Nutzung ist inzwischen kein Trend mehr, sondern eine grundsätzliche Voraussetzung für eine erfolgreiche Nutzung und Vermarktung einer Webanwendung, denn mehr als die Hälfte aller Webaufrufe stammen heutzutage von mobilen Endgeräten – Tendenz weiter steigend.

Eine einwandfreie mobile Nutzbarkeit einer Anwendung ist auch für die Suchmaschinenoptimierung (SEO) relevant, da Google Webseiten, die diese Eigenschaft nicht mit sich bringen, von den mobilen Trefferlisten ausschliesst.

Styleguides (UI-Dokumentation, Pattern Library)

In einem Styleguide oder einer User Interface (UI) Dokumentation wird das erarbeitete Designkonzept für die technische Realisierung und die Qualitätssicherung dokumentiert. So wird sichergestellt, dass das entwickelte Design konsistent auf die gesamte Lösung angewendet wird. Besonders bei komplexen Projekten oder verzweigten Teams ist eine solche Grundlage, die möglichst wenig Inter­pretations­spielraum zulässt, geradezu notwendig.

Eine «Pattern Library» ergänzt ein Styleguide mit vorgefertigten Bausteinen oder Modulen. Eine «Code Pattern Library» stellt für jeden dieser Bausteine auch den fertigen Entwicklungs-Code (HTML/CSS/Javascript) zur Verfügung.

Wann macht ein Styleguide oder eine Pattern Library besonders Sinn?

  • Wenn eine Anwendung zu einem späteren Punkt weiter ausgebaut werden soll oder regelmässig aktualisiert wird
  • Wenn in einem grossen oder verzweigtem Team gearbeitet wird
  • Wenn das Design über mehrer Touchpoints konsistent genutzt werden soll

Vor allem neue Mitarbeiter profitieren von ausgearbeiteten, funktionierenden Strukturen und haben dadurch geringere Einarbeitungszeiten.

Tonality (Tonalität)

Die Tonality beschreibt die Stimmung, den Stil oder die Anmutung einer Botschaft oder eines Nutzungserlebnisses. Sie wird zielgerichtet eingesetzt, um beim Empfänger oder Nutzer bestimmte Gefühle und Assoziationen hervorzurufen.

Usability (Benutzerfreundlichkeit)

Usability bezeichnet die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System. Eine besonders einfache, zum Nutzer und seinen Aufgaben oder Bedürfnissen passende Bedienung wird dabei als «benutzerfreundlich» angesehen. Die Benutzerfreundlichkeit ist eng verbunden mit der Ergonomie. Ziel der Ergonomie ist es, handhabbare und komfortabel zu nutzende Produkte herzustellen. Dazu gehören Aspekte wie:

  • Zweckmässigkeit / Effektivität
  • Bedien- / Steuerbarkeit
  • Erwartungskonformität
  • Zuverlässigkeit / Stabilität
  • Effizienz / Performance
  • Konsistenz (Fehlerfreiheit / Widerspruchsfreiheit)
  • Übersichtlichkeit / Verständlichkeit / Erlernbarkeit
  • Intuitivität / Selbstbeschreibungs- oder Selbsterklärungsfähigkeit
  • Zugänglichkeit / Fehler-Toleranz / Barrierefreiheit
  • Anpassbarkeit / Modifizierbarkeit (Individualisierbarkeit)
  • Stimulanz / Lernförderlichkeit

Use Cases

Use Cases beschreiben ähnlich wie User Journeys die Interaktionen eines Nutzers mit einem System oder einem Produkt. (Im Unterscheid zu Use Cases schliessen aber User Journeys auch Interaktionen und Aspekte vor oder nach der unmittelbaren Nutzung des Systems oder des Produktes ein und können somit viel länger andauern.)

Bei der Aufstellung von Use Cases konzentriert man sich auf die aktive Nutzung des Systems oder Produktes durch einen Anwender und hinterfragt die Gründe und die Ziele der Nutzung. Ein Use Case wird normalerweise so benannt, wie das Ziel aus Sicht des Nutzers heisst, zum Beispiel: Konto eröfffnen, Produktinformation XY finden, Produkt XY kaufen, ... und besteht dabei aus einer Folge von Aktionen, die in einer bestimmten Reihenfolge ablaufen. Use Cases helfen dabei einen Überblick über die notwendigen Funktionen, der zu erstellenden Lösung zu erhalten.

User Centered Design

User Centered Design (kurz: UCD) ist ein etabliertes Entwicklungsverfahren für Applikationen, Services und Produkte. Es kennzeichnet sich dadurch, dass die späteren Benutzer von Anfang an aktiv in den Entwicklungsprozess mit einbezogen werden.

Dadurch wird sichergestellt, dass der Aufbau, die Inhalte und das Design des Endprodukts massgeblich von den Bedürfnissen, Erwartungen und dem Verständnis der tatsächlichen Benutzer bestimmt werden.

Eine initiale Bestandsaufnahme der Nutzerbedürfnisse und des Nutzungskontextes (→ Nutzerforschung) soll dazu dienen, sämtliche nachfolgende Bestrebungen exakt eben auf diese auszurichten. Darüber hinaus gibt es entlang des gesamten Entwicklungsprozesses Stationen, an denen Nutzer-Tests wertvolle Einsichten über die bislang erarbeiteten Arbeitsergebnisse liefern.

So können bereits in einem frühen Stadium Usability-Tests mithilfe von Prototypen helfen, das Produkt zu verbessern, ohne das deren technische Umsetzung überhaupt begonnen hat. Dieses Vorgehen hilft unnötige und teure Entwicklungsschleifen zu vermeiden.

User Experience (auch: Customer Experience oder Nutzungserlebnis)

Mit dem Begriff «User Experience» bezeichnet man die Gesamtheit aller Wahrnehmungen, Emotionen, Erinnerungen und Erlebnisse, die sich aus einer Interaktion mit einem Produkt, einem System, einer Dienstleistung oder einem Unternehmen ergeben. Es geht um alles, was ein Benutzer oder Konsument vor (antizipatorisch), während und nach dieser Interaktion erlebt oder empfindet (z.B. eine Identifikation oder eine Distanzierung).

Warum ist ein gute User Experience so wichtig?

In einem hedonistischen Zeitalter wünschen sich Menschen bereichernde Erlebnisse, die ihr Leben erfüllen. Kunden belohnen Unternehmen, deren Produkte nicht nerven, sondern ihr Leben positiv beeinflussen, vor allem wenn diese ihre Erwartungen übertreffen. Sie bauen dann eine innige Beziehung zu ihnen auf und empfehlen diese Produkte anderen Menschen. Hier ist man dann am Punkt wo man die sogenannte beste Werbung, die einem Unternehmen passieren kann, hat. Auf diese Weise bleiben Unternehmen, die sich einer guten Customer Experience widmen, auf lange Zeit profitabel.

Grundsätzlich kann jede User Experience optimiert oder transformiert werden. Optimieren bedeutet, dass sich die Menschen vor, bei und nach der Nutzung gut fühlen. Es geht darum, dass das Produkt oder der Dienst natürlich und angenehm empfunden wird. Und wie gesagt, eine positive Erfahrung geht grundsätzlich über die Erwartungen des Benutzers hinaus. Die meisten Benutzer oder Konsumenten klassifizieren eine solche überraschend positive Erfahrung als einen „persönlichen Moment“.

User Experience Design (UX Design)

Im Allgemeinen versteht man unter «UX Design» den Prozess zur Optimierung der User Experience. Es ist ein Designansatz, der alle Aspekte der Interaktion einer Person mit einem Produkt oder einem Dienst berücksichtigt. Es basiert auf einem tiefen Verständnis des Nutzers, seines Verhaltens, seiner Bedürfnisse, Ziele und Motivationen sowie des Kontextes, in dem ein Produkt oder Dienst verwendet wird, mit dem Ziel, eine Lösung zu finden, die alle Bereiche der Benutzererfahrung auf optimale Weise befriedigt.

Im UX Design geht es darum, Produkte oder Dienste zu schaffen, die Menschen mit Leichtigkeit und Freude nutzen können. Ebenso wichtig ist es, die Unternehmens- oder Projektziele zu erreichen, das heisst letztendlich diese mit denen des Benutzers in Einklang zu bringen.

UX Design kann nicht jeder Situation gerecht werden und jedem Benutzer eine optimale Lösung liefern, denn als Individuum sind alle Menschen unterschiedlich. Was für eine Person funktioniert, kann für eine andere gegenteilig wirken. Beim UX Design geht es vielmehr darum, die beste und weitreichendste Lösung für die avisierten Nutzergruppen zu finden.

User Experience Strategie (UX Strategie)

Eine UX Strategie wird eingesetzt, um den Erfolg eines Unternehmens oder Projektes nachhaltig zu sichern und das Eigenbild, die Produktentwicklung sowie alle Unternehmensaktivitäten in der Value Chain auf eine kundenorientierte Sichtweise auszurichten, die sämt­liche Aspekte des Customers Lifecycles umfasst. Sie verfolgt den langfristigen Plan, jeden Touchpoint eines Unternehmens mit der bestmöglichen Benutzererfahrung zu versehen.

In ihr werden alle relevanten UX Parameter wie Use Cases, die Product Vision, Value Propositions, Epic Stories, Personas und User Journeys festgehalten. Eine UX Strategie berührt dabei auch verschiedene andere Gebiete wie beispielsweise die Business-Strategie, das Monetarisierungsmodell oder die Branding-Strategie.

User Journey

Eine User Jouney beschreibt eine Reise, die ein Benutzer (passiv) erlebt oder (aktiv) unternimmt, wenn er beispielsweise mit einem Unternehmen, einem Produkt oder einer Anwendung agiert. Eine User Journey besteht in der Regel aus einer Reihe von Einzelschritten und weist stets ein Ziel oder ein Bedürfnis auf. Sie kann im Unterschied zu einem Use Case über mehrere Touchpoints erfolgen.

So kann eine Customer bzw. User Journey auch durch Unterbrechungen, Pausen oder durch wiederholte Anwendungen gekennzeichnet sein. Eine einfache User Journey könnte demnach beispielweise so aussehen:

  1. Bei einem Kollegen sieht Thomas ein bestimmtes Produkt, welches er interessant findet.
  2. Thomas informiert sich auf der Hersteller-Website über dieses Produkt.
  3. Eine Woche später erhält Thomas in einem abonnierten Newsletter ein Sonderangebot zu diesem Produkt. Das Kaufinteresse steigt.
  4. Deswegen lädt sich Thomas das Datenblatt von der Website des Anbieters herunter.
  5. Thomas befragt seinen Kollegen über seine bisherigen Erfahrungen mit dem Produkt.
  6. Thomas geht auf die Website des Anbieters und kauft das Produkt.

User Journeys werden eingesetzt, um aufzuzeigen, wie Benutzer mit einem Service oder einer Anwendung agieren, aber auch wie diese Interaktionen im Best Case aussehen könnten. User Journeys vermitteln zum einen ein gutes Verständnis über das Nutzerverhalten und den Nutzungskontext, schaffen aber auch eine Grundlage für die Aufstellung des Functional Scopes einer Anwendung.

User Research (Nutzerforschung)

Im Zentrum der Arbeit der snowflake UX Designer stehen stets die Nutzer, deren Wünsche und Bedürfnisse sie durch Beobachtungen und Befragungen ermitteln.

In einem User Research werden sowohl bestehende Nutzer als auch potentielle Nutzer gezielt zu ihren Bedürfnissen und Anforderungen an eine gewisse Anwendung oder ein Produkt untersucht. Dazu können beispielsweise anonymisierte Nutzerbefragungen oder kontextuelle Interviews durchgeführt werden. Diese verbinden das klassische Interview mit einer Beobachtung der Anwender beim tatsächlichen Gebrauch des Produktes oder der Anwendung.

Wesentlich ist daher die Situation, in dem das Produkt oder System genutzt wird. Diese Bedingungen sind nicht unbedingt stabil, sie können zu gleicher Zeit für unterschiedliche Nutzer höchst unterschiedlich sein oder sich für einen und denselben Benutzer nach und nach verändern. Ohnehin ist die Erfahrung eines Benutzers mit einem Produkt von dynamischer Natur. Beispielsweise kann die Verwendung eines neuartigen Produktes für einen Benutzer zu Anfang ziemlich verwirrend sein und auch negative Gefühle erzeugen. Später, wenn ein Nutzer mit einem Produkt oder System vertraut ist, können seine Erfahrungen wieder positiv geartet sein.

Beim Designen einer guten User Experience geht es massgeblich darum, den Kontext zu verstehen, in dem ein Benutzer mit einem Produkt oder System agiert und herauszufinden, welche Rolle es in seinem Alltag spielt. Dazu werden in der Regel User Researchs (Analysen, Interviews, Beobachtungen) durchgeführt und anhand dieser Erkenntnisse Empathie Maps, Personas und User Journeys entwickelt. Diese begleiten dann jede Design- oder Funktionsentscheidung und helfen allen bei der Entwicklung beteiligten Personen die künftigen Nutzer stets im Blick zu halten.

User Testing (auch: Usability-Test oder Nutzer-Test)

Um die Lösungsvorschläge im User Centered Design Prozess evaluieren zu können, werden gezielt Nutzer-Tests eingesetzt. Die Tests können zum Beispiel Gestaltungsvorschläge, Navigationskonzepte oder die Benutzerfreundlichkeit einer Anwendung überprüfen. Dafür kommen Click-Dummies, Prototypen oder Minimal Viable Products zum Einsatz.

Die Erkenntnisse aus den Tests werden direkt in das laufende Projekt eingearbeitet und stellen sicher, dass der Aufbau, die Inhalte und das Design des Endprodukts tatsächlich von den Bedürfnissen und Erwartungen der Benutzer bestimmt werden.

UX- und Design-Consulting

Die digitale Transformation führt viele Unternehmen in ein Spannungsfeld zwischen den als notwendig erachteten Investitionen in neue Technologien und einem Perspektivenwechsel in der Produktentwicklung hin zu einer zeitgemässen nutzerzentrischen Vorgehensweise.

Es ist uns bewusst, dass dieser Weg für viele Unternehmen nicht immer einfach ist. Denn bei der Lösung der zentralen Herausforderungen geht es nicht nur um die Implementierung richtiger Technologien und Methoden. Die Fragen, die ein Unternehmen für sich und seine Kunden heutzutage beantworten muss, um wettbewerbsfähig zu bleiben, stehen allzu oft im Zusammenhang mit seiner strategischen Ausrichtung und beeinflussen zudem sein Selbstverständnis.

Um den Erfolg eines Unternehmens nachhaltig zu sichern, bedarf es deswegen einer ganzheitlichen Betrachtungsweise, die sämtliche Aspekte des «Customers Lifecycles» umfasst. Im Bereich UX- und Design-Consulting beraten wir sie zielgerichtet und helfen Ihnen dabei eine optimale UX-Strategie für Ihr Unternehmen zu finden.

UX-Support während der technischen Umsetzung

Auch innerhalb der technischen Realisierung können UX-spezifische Fragen oder der Bedarf nach weiteren Designelementen auftauchen. Daher hört die Arbeit der snowflake UX Designer nicht mit Beginn der technischen Umsetzungdphase auf. Eine begleitende Unterstützung des Entwicklungsteams in allen designrelevanten Fragen gehört dazu, um sowohl eine konzeptgetreue Umsetzung als auch eine optimale Kundenzufriedenheit zu gewährleisten.

Value-Proposition-Canvas

Das Value-Proposition-Canvas ist im Rahmen des Business-Model-Canvas entstanden, welches 2004 von Alexander Osterwalder entwickelt worden ist. Dieses hat seither einen regelrechten Siegeszug rund um die Welt angetreten. Es ist Methode und Darstellungsart zugleich und hilft allen Beteiligten im nutzerzentrierten Produktentwicklungsprozess (ähnlich wie Personas oder eine Product Vision) richtige Entscheidungen zu treffen. Es basiert auf dem Jobs-to-be-done Prinzip und beantwortet, welche zentralen Aufgaben ein Nutzer mit einem Produkt oder einer Anwendung bewältigen kann, wo seine Werte oder sein Nutzen, aber auch die Probleme liegen.

Visual Design

Auch das Visual Design zielt darauf ab, ein möglichst optimales Benutzererlebnis zu gestalten, indem es die Auswirkungen von Illustrationen, Fotografie, Schriftwahl, den Einfluss von Weissraum, Farben und die kompositorische Anordnung der Elemente auf die User Experience berücksichtigt.

Ein gutes visuelles Design wertet die Inhalte und Funktionen einer Anwendung auf, indem es Attraktivität und Aufmerksamkeit erzeugt und die Nutzer mit Hilfe einer zielgruppenadäquaten Tonality mit einbezieht. Es trägt wesentlich dazu bei, das Interesse und Vertrauen der Nutzer an einem Produkt bzw. einer Marke zu intensivieren

Dabei berücksichtigen Visual Designer eine Vielzahl von Gestaltungsprinzipien und Faktoren, wie beispielsweise unterschiedliche kulturelle Interpretationen von Farben, typografische Konventionen oder wahrnehmungspsychologische Gegebenheiten. Ausserdem wird es von Moden und Trends geprägt, die branchen- und zielgruppenabhängig sehr unterschiedlich ausfallen können. Ein guter Visual Designer ist daher stilistisch vielseitig und fühlt sich in vielen Genres zuhause.

Wireframes

Wireframes dienen wie Mockups oder Prototpyen im Kreationsprozess zur Darstellung von Ideen und Lösungsvorschlägen. Ein Wireframe, weist in Absetzung zu einem Mockup, noch keine Farben, Bilder oder lesbaren Texte auf. Es ist also in seinem Detailierungsgrad auf das Wesentlichste beschränkt.

Übersetzt bedeutet das Wort ja so viel wie „Drahtgerüst“ und daran erinnert die Visualität eines Wireframes, in welchem die Konturen der Elemente in der Regel monochrom (schwarzweiss) wiedergegeben werden.

Wireframes werden häufig eingesetzt, wenn es darum geht, zügig erste Lösungsvorschläge zu visualisieren und zu besprechen oder um im Prozess der Inhaltsstrukturierung geeignete Positionen für Seitenelemente zu finden.