UX Design für Apps und Web-Applikationen

Ich helfe gezielt und punktuell bei der Konzeption und Gestaltung von User Interface Design. Hierbei werden komplexe Interaktionen für den Benutzer weitmöglichst vereinfacht. Ziel ist ein positives Benutzererlebnis (UX - User Experience) für Ihre Kunden.

UX Design Showcase
Icon Wireframes Dieses Icon zeigt eine Darstellung eines einzelnen Wireframes

Wireframes und Ablaufdiagramm

Wireframes (Drahtgestell) sind strichartig gezeichnete User Interface Ansichten. Jeder Screen enthält bereits sämtliche Bedienungselemente, nicht jedoche das fertige Design. Die interaktiven Elemente werden über Linien und Pfeile mit weiteren Screens verbunden. Dadurch entsteht ein komplettes Ablaufdiagramm. Sämtliche Screens und Dialoge sind darin enthalten.

Die Vorteile von Wireframes

Es hat sich gezeigt, dass die investierte Zeit in die Entwicklung von Wireframes beim späteren User Interface Design wieder eingespart wird. Da man sich dabei nur noch auf das Design konzentrieren muss. Das Wireframe-Ablaufdiagram ist zudem sehr Hilfreich beim einholen von Offerten oder als Hilfe für die technische Umsetzung.

Ich zeichne Wireframes mit Sketchapp und dafür eigens erstellten Elemente-Vorlagen. Sie erhalten von mir:

Icon UX Protoyp Dieses Icon zeigt Interaktionen an einem Computer Screen.

UX Prototyp

Für eine optimale Gestaltung des User Interface ist die Erstellung von Prototypen und deren Testing durch die Benutzer sehr hilfreich. Ich erstellen UX Prototypen für mobile Apps und Web Apps. Sowohl abstrahiert (ohne Design, auch Low-Fidelity bzw. Lo-Fi genannt) sowie im finalen fertigen User Interface Design (mit fertigem Design, auch High-Fidelity oder Hi-Fi genannt) inkl. animierter Übergänge und Effekte welche von der fertigen Applikation nicht zu unterscheiden sind.

Die Vorteile von UX Prototypen

Problemstellungen werden frühzeitig erkannt und können einfach behoben werden. Bei diesem UX Prototypen für mobilen Geräte sollte möglichst einfach eine Auswahl ohne Keyboard getroffen werden können. Zunächst war das "Plus" für zufügen auf der linken Seite. Erst durch den UX Prototypen wurde klar, dass wenn die Menge von eins erhöht werden muss ein Seitenwelchsel von links nach rechts notwendig wird. Somit wurde das "Plus" nach rechts verschoben. Es können nun Mengen von eins und mehr einzig über den rechten Daumen hinzugefügt werden.

Ich erstelle UX Prototypen mit Origami Studio oder in HTML5. Sie erhalten:

Icon UI Design Dieses Icon zeigt ein iMac Screen

UI Design

Ein zentraler Bestandteil von UX Design ist das UI Design bzw. User Interface Design. Ich erstelle User Interfaces (UI) für mobile Apps, responsive Websites, Online-Shops und andere Applikationen. Hierbei geht es darum, die zuvor in den Wireframes definierten Elemente und Abläufe im finalen Design für das gewählte Geräte darzustellen. Die wichtigen Interaktions-Elemente müssen von den weniger wichtigen unterschieden werden. Die wichtigen Elemente sollen auffallender gestaltet und besser erreichbar platziert werden. Während weniger wichtige Elemente reduziert bzw. oft sogar ganz verschwinden können.

Idealerweise wird das UI Design mit den echten Inhalten befüllt. Erst nachdem es von Ihnen abgesegnet wurde sollten sich die Entwickler an die Arbeit machen. Die Umsetzung muss überwacht und ausführlich getestet werden. Insbesondere die Performance hat einen starken Einfluss darauf, ob das "User Experience" positive wahrgenommen wird. Bei HTML5 Applikation empfehle ich die Einhaltung der AMP Restriktionen.

Neben Adobe Produkten arbeite ich hauptsächlich mit Sketchapp. Sie erhalten von mir

Icon Interaction Design Dieses Icon zeigt einen Dialog

Interaction Design

Was passiert wenn ich das Passwort falsch eingebe, was passiert wenn ich scrolle? Ich gestalte das Interaction Design für meine Kunden mittels Flow Charts und UX Prototypen. Ich erstelle Animationen und Abläufe welche zu einem positiven UX Design notwendig sind. Während der Entwicklung stehen die Wünsche, Anforderungen, Ziele und Eigenschaftgen des Nutzers im Vordergrund.

Auf die Details kommt es an

Oft geht vergessen, dass ein Button neben dem normalen Zustand und dem Rollover Zustand auch noch den "On Klick" Zustand kennt. Für ein positives UX Design sollte auch diesem Zustand einige Zeit gewidmet werden.

Sie erhalten von mir:

Icon Touch-Screen Dieses Icon zeigt Gestures an einem Touch-Screen

Design für Touch-Screens

Für Touch-Screens gelten besondere Bedingungen. Über 70% der Interaktionen auf Smartphones werden mit den Daumen getätigt. Das heisst wichtige Steuerelemente sollten mit den Daumen gut erreichbar sein. Im Gegensatz zum Desktop Design ist eine Navigation im oberen Bereich eher ungeeignet, da man mit der Hand beim Navigieren den Screen verdeckt. Zudem ist der obere Bereich mit den Daumen kaum erreichbar. Viele solcher Dinge sind zu beachten und sollten im realen Kontext ausführlich mittels UX Prototype getestet werden.

Touch Gestures

Gestures (swipe, pinch, spin usw.) sind eine intuitive Bedinungsform welche sich einfach ins Gedächnis prägt und meist wenig Platz auf dem Screen beansprucht. Um den vollen Umfang der Möglichkeiten nutzen zu können muss die App native umgesetzt werden, da gewisse Gestures sonst vom Browser oder Betriebssystem blockiert bzw. bereits verwendet werden.

Icon Kosten UX Design Dieses Icon zeigt Banknoten

Was kostet UX Design?

Die gute Nachricht - es kostet so viel wie Sie zu investieren bereit sind. Ich arbeiten nach Aufwand. Ein User Interface Design kann in einer Stunde oder mehreren Tagen erstellt werden. Das Resultat ist natürlich nicht gleich. Es gilt die Stunden nach gemeinsamer Absprache möglichst effizient und gezielt einzusetzen. An regelmässigen Meetings können die Arbeiten und Zeitbudgets gemeinsam besprochen und geplant werden.

Ich freue mich auf Ihr Projekt

Gerne bespreche ich mit Ihnen Ihr Projekt. Zusammen bestimmen wir wie viel Aufwand wo investiert werden soll.