UX-Design

Eine hochwertige Gestaltung unterstützt die Wirkung Ihres Produkts auf vielen Ebenen. Das Design bestimmt nicht nur das “Look and Feel” eines Produkts. Ein gutes User Interface ist essentiell, um mit dem Produkt effizient arbeiten zu können.

Dabei tragen unsere Designer selbstverständlich Ihren Markenattributen und Ihrem Corporate Design Rechnung. Die Methodenauswahl ist dabei vielfältig. Je nach Projekt wählen wir die richtigen Werkzeuge für Ihre Ziele.


INTERFACE DESIGN

Das Interface Design definiert, wie ein System visuell gestaltet ist. Es ist das Erscheinungsbild (Look) einer Software, mobilen App oder Website. Gutes Interface Design orientiert sich nicht ausschließlich an Trends sondern vielmehr an wahrnehmungspsychologischen Aspekten.

Eine Ansicht der Fahrzeugsteuerung AMADRIVE für die Landmaschine Pantera von Amazone.

Interface Design beinhaltet Überlegungen zum gesamten Aufbau (Layout) als auch zu geeigneten Schriften, Icons und Farben. Konsistente Gestaltung und die Nutzung von Design Pattern ist Voraussetzung für eine hohe Nutzerfreundlichkeit.

You´ve got the look

  • Gutes Interface Design erhöht die Nutzerfreundlichkeit und kommuniziert gleichzeitig Markenwerte
  • Mittels High-Fidelity-Prototypen kann der finale Look einer Anwendung schon vor dem Launch evaluiert werden


INTERACTION DESIGN

Das Interaction Design definiert, wie ein System auf Aktionen des Benutzers reagiert. Es ist das Verhalten (Feel) einer Software, mobilen App oder Website. Zusammen mit dem Interface Design (Look) entsteht das Look & Feel eines Produktes.

Erst durch Reaktion wird ein Interface lebendig. Es gibt dem Nutzer Hinweise, wie Elemente zu bedienen sind (MouseOver-Zustände signalisieren interaktive Elemente). Sie sind unabdingbar, um ein System schnell zu erlernen und zu beherrschen.

Ein lebendiges Interface verwendet Animation und Bewegung, um den Nutzer auf den aktuellen Systemstatus aufmerksam zu machen (Ergebnisse werden geladen, Import wird geprüft usw.). Dies ist wichtig, um permanentes Feedback zu geben, Antwortzeiten zu überbrücken und Unsicherheit beim Anwender zu vermeiden.

Bei reinen Touch-Applikationen haben Animationen noch eine andere wichtige Aufgabe. Sie ersetzen den fehlenden MouseOver-Zustand. Bei mobilen Interfaces zeigen Animationen dem Benutzer versteckte Interaktionen (z. B. „nach unten wischen” zum Aktualisieren). Denn in einer mobilen App ist der Platz stark eingeschränkt. Nicht jede Aktion kann über ein Icon abgebildet werden.

Engaging Interfaces

  • Der Nutzer erlernt ein Interface Schritt für Schritt
  • Gezielt eingesetzte Mikro-Animationen bereiten dem Nutzer Freude und verleihen einer Applikation Persönlichkeit
  • Trial & Error Verhalten entfällt, der Nutzer weiß was ihn erwartet
  • Durch spielerische Interaktionen lassen sich auch komplexe Inhalte leicht vermitteln
  • Mittels High-Fidelity-Prototypen lassen sich animierte Interfaces vor der Umsetzung testen

EMOTIONAL DESIGN

Sich als Unternehmen von der Konkurrenz abheben, ist nicht einfach. Man möchte, dass das eigene Produkt hohe Verkaufszahlen erreicht, gut in Erinnerung bleibt und weiterempfohlen wird. Gerade als Anbieter eines Web-Produktes fällt es schwer aus der Masse heraus zu stechen. Durch zahllose vorhandene Templates und günstige Stockfotografien schießen neue Web-Services wie Pilze aus der Erde. Wie kann man aber ein Produkt schaffen, was Freude bereitet und die Nutzer nachhaltig bindet?

Die Methoden des “Emotional Designs” zielen darauf ab, über Usability (Benutzerfreundlichkeit) hinaus eine hohe User Experience (Nutzungserlebnis) zu erzeugen. Ein Produkt mit einer hohen Usability ist funktional, verlässlich und gut benutzbar. Ein Produkt mit einer hohen User Experience erzeugt über diese Grundanforderungen hinaus noch viel mehr beim Nutzer: Es überrascht, es ist außergewöhnlich und auch unerwartet. Es erzeugt Vergnügen und Freude (Joy of Use). Nur ein Produkt, was Freude bereitet, wird weiterempfohlen.

Emotional Design means to create designs that inspire a positive emotional response in your users.

Jared Spool

Wie erreiche ich emotionales Design?

  • Man kennt sein Publikum und dessen Bedürfnisse (User Needs) genau
  • Es werden Personas generiert, aus denen sich Design-Ziele ableiten lassen
  • Die Persönlichkeit des eigenen Produkts wird definiert, um es menschlicher zu machen und gezielt Emotionen zu schaffen - Ist es humorvoll? Ist es vertrauenswürdig? Wie reagiert es?
  • Konkurrenzprodukte werden genau auf deren Persönlichkeit analysiert, um einen USP heraus zu filtern

Der Turbo Boost für Ihr Business

  • Erhöhte Produktivität
  • Mehr Registrierungen durch Weiterempfehlungen
  • Mehr Verkäufe / Abschlüsse als der Wettbewerb
  • Mehr wiederkehrende Nutzer mit längerer Besuchsdauer und mehr Umsatz pro Kauf

RESPONSIVE DESIGN

Der Begriff Responsive Design beschreibt die dynamische Anpassung von Inhalten an die Eigenschaften des Ausgabegerätes. Egal ob Laptop oder Smartphone – Responsive Design ermöglicht es Inhalte für jedes Ausgabemedium optimiert anzubieten.

Ansicht des TYPO3 Webportals zum Reformationsjubiläum Luther 2017.

Dynamische Anapssung erhöht Flexibilität der Nutzer

Zu den Vorteilen des Responsive Designs zählt eindeutig die erhöhte Flexibilität der Nutzer, da Inhalte über mehrere Devices hinweg in gleicher Qualität genutzt werden können.

Weitere Vorteile:

  • Inhalte und Informationen und nicht die Abmessungen der Endgeräte stehen im Vordergrund
  • optimales Ausnutzen des zur Verfügung stehenden Platzes durch flexibles Gestaltungsraster
  • Berücksichtigung aller Displaygrößen

MOCK-UPS

Mock-Ups bilden die visuelle Erscheinung eines Produktes vollständig ab. Sie werden z.B. auf Basis von Wireframes erstellt. Jedes Element in einem Mock-Up ist vollständig ausgestaltet, um einen realistischen Eindruck vom späteren Produkt zu erhalten. Es handelt sich um statische Bilder, die noch nicht interaktiv sind. Dies hat den Vorteil, dass Sie im Projektteam sehr schnell einen Eindruck vom neuen Look Ihrer Applikation erhalten.

Vorteile

  • Exakte Abbildung des Endproduktes
  • Eingebunden in den Nutzungskontext wird Produkt erlebbar
  • Änderungen an der Gestaltung können einfach vorgenommen werden
  • Die Wirkung der Gestaltung kann mit Nutzern getestet werden

Step by step, uh baby

Sie werden sie besonders dann eingesetzt, wenn man:

  • Bereits bestehende Wireframes oder Prototypen vorliegen hat (diese definieren bereits Funktionalitäten und Verhalten) 
  • Nur ein kurzen Zeitraum bis zum Roll-Out zur Verfügung hat
  • In schnellen Schritten zu einer konkreten Designvorgabe kommen will
  • Mehrere Designvarianten erstellen will
  • Mittels A/B Tests diese Designvarianten prüfen will, um die Erfolgreichste auszuwählen

HIGH-FIDELITY-PROTOTYP

Der umfassendste Prototyp vor der Umsetzung eines digitalen Produktes ist ein High-Fidelity-Prototyp. Dieser bildet die Struktur, Gestaltung und Verhalten einer Bedienoberfläche mit allen Funktionen vollständig und realistisch ab (Interface Design und Interaction Design). Produktlogik, z.B. der Datenabruf aus einer Datenbank werden hier simuliert. So kann die Bedienoberfläche vollständig erstellt und getestet werden, bevor die Anbindung an das Produkt oder den Service erfolgen. Das spart Kosten und beschleunigt die Umsetzung.

Typen

  • Webflow-Prototyp (für Websites, nutzbarem CSS-Code)
  • Online-Prototyp z. B. mittels Axure, Invision oder Balsamiq (für Applikationen, iterativ erarbeitbar, kommentierbar)
  • Offline-Prototyp (zur Dokumentation)

Sparen Sie Entwicklungskosten

  • 1:1 Abbildung des Frontends
  • Vorgabe für die spätere Entwicklung ohne Spielraum für Interpretation (z. B. als perfekte Ergänzung zum Pflichtenheft)
  • Das Bedienkonzept kann sehr realitätsnah von Ihren Nutzern vor der eigentlichen Entwicklung getestet werden

STYLE GUIDES

Vor allem bei komplexen Anwendungen ist Konsistenz das A und O intuitiver Bedienung. Eine in den Abläufen konsistente Applikation führt zu effizienter Nutzung und einer schnellen Erlernbarkeit durch den Anwender. Gleich aussehende Icons lösen gleiche Aktionen aus, Tabellen verhalten sich nach dem gleichen Prinzip und konsistent eingesetzte Farben unterscheiden interaktive Bereiche von nicht interaktiven.

styleguide_beispiel.jpg

Um Konsistenz innerhalb einer Anwendung zu erreichen, ist ein Style Guide unabdingbar. In ihm sind alle Definitionen zu Interface Design (Aussehen) und Interaction Design (Verhalten) dokumentiert:

  • Zu Grunde liegendes Raster für ein oder mehrere Displaygrößen (statisch, fluide, responsive)
  • Funktionsbereiche, Dialoge, Seitentypen
  • Bemaßungen, Abstände
  • Interaktive Elemente
  • Interaktionszustände (initial, während und nach Interaktion, bei Fehler, usw.)
  • Animationen & Transitions
  • Icons
  • Schmuck- und Interaktionsfarben
  • Schriftarten, -größen, -schnitte

Find your Style Guide!

Je nach Art der Applikation und Team-Zusammensetzung sind unterschiedliche Typen von Style Guides sinnvoll:

  • Klassischer PDF Style Guide zur Dokumentation von Grundlagen
  • Online Style Guide zur kollaborativen, schrittweisen Entwicklung. Nützlich wenn mehrere Entwickler-Teams Zugriff haben sollen
  • Interaktiv nutzbarer Demo Style Guide (Pattern Library). Sinnvoll bei hochgradig interaktiven Elementen, für eigenentwickelte Komponenten und bei komplexen Animationen
  • CSS-Demo-Template bei webbasierten Applikationen

ICONS

Die Hauptaufgabe eines Icons besteht darin Informationen schnell und einfach verständlich zu machen. Komplexität kann minimiert und der Nutzer so entlastet werden. Mentale Modelle der Nutzer sind die Grundlage für die Gestaltung eines intuitiv nutzbaren Icons.

icons_beispiel.jpg

Komplexität reduzieren - Übersichtlichkeit schaffen

  • ermöglichen intuitive Nutzung durch einbeziehen mentaler Modelle 
  • reduzieren Komplexität 
  • schaffen Übersichtlichkeit