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.

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: Download Briefing Webagentur (Offeterenanfrage)

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.

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.

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 beurteilen. Mehr dazu unter: UX-Review (Website-Check) zum Festpreis

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 einer Website, welches ihre Inhalte strukturiert. Diese Struktureinheiten werden für den Nutzer erst durch das Interaction- und Visual-Design sichtbar gemacht.

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

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 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.

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.

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 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 Lösungsvorschläge unter nutzerzentrischen Gesichtspunkten 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.

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 Vertrauen und das Interesse 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 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.