UX Design für Apps und Web-Applikationen

Wir wollen komplexe Interaktionen vereinfachen. Ziel ist ein positives Benutzererlebnis (UX – User Experience) für Ihre Kunden.

Wireframes aus unserer Webagentur Wireframes aus unserer Webagentur
Wireframes aus unserer Webagentur Wireframes aus unserer Webagentur

Wireframes

Wir liefern die Wireframes aufgrund Ihrer Anforderungen

Die Entwicklung der Wireframes erfolgt in mehreren Iterationen. An regelmässigen Treffen mit Auftraggeber und Entwickler werden die bereits erstellten Wireframes besprochen und die nächsten Schritte geplant. Am Ende soll eine komplette Abbildung der Applikation entstehen, inklusive sämtlicher Dialoge und Fehlermeldungen. Die fertigen Wireframes zeigen oft in überraschenderweise die Komplexität einer App auf.

Wann braucht es Wireframes

Bei der Entwicklung komplexerer Applikationen sind Wireframes sehr hilfreich! Besonders, wenn es sich um eine Neuentwicklung oder gewünschte Verbesserung eines UX Design handelt. Soll lediglich das UI Design aufgefrischt werden, sind Wireframes nicht notwendig.

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-Ablaufdiagramm ist zudem sehr hilfreich beim Einholen von Offerten oder für die technische Umsetzung.

Trennung von wichtigen und unwichtigen Elementen

Wir verwenden beim Wireframing eine auffallende „Highlight“-Farbe, um wichtige Elemente hervorzuheben. Diese häufig genutzten Elemente, oder bestimmte Elemente, die gewollt genutzt werden sollen, müssen gut erreichbar platziert und hervorstechend gestaltet werden. Weniger wichtigere Elemente hingegen sollen schlicht bleiben oder können oft sogar ganz verschwinden bzw. nur bei Bedarf aktivierbar gemacht werden.

Design ist nicht wie es aussieht. Design ist wie es funktioniert.

Steve Jobs

UX Prototyp

Wir liefern Prototypen

Vor der Umsetzung wird gemeinsam bestimmt, von welchem Bereich der Applikation ein Prototyp erstellt werden soll. Oft handelt es sich nur um einzelne zentrale Teile. Manchmal macht aber auch eine komplette Umsetzung Sinn.

Für die Optimierung des „User Experience“ sind Prototypen und deren Testing durch die Benutzer im realen Kontext sehr hilfreich. Wir erstellen UX Prototypen für mobile Apps und Web-Applikationen mit Origami Studio oder auf HTML Basis. Sowohl abstrahiert (Lo-Fi) oder/und im finalen fertigen UI Design (Hi-Fi) inkl. animierter Übergänge und Effekte, welche von der fertigen Applikation nicht zu unterscheiden sind. Diese UX Prototypen können auf dem zuvor bestimmten Endgerät abgespielt und im realen Kontext getestet werden. Zudem können die Vorgänge aufgezeichnet und als GIF Animationen oder Videos verwendet werden.

Nachfolgend ein Beispiel eines unserer Lo-Fi Prototypen:

Prototype LoFi

Die Vorteile von UX Prototypen

Problemstellungen werden frühzeitig erkannt und können einfach behoben werden. Der Prototyp kann für die technische Umsetzung hilfreich sein bzw. ein Hi-Fi Prototyp kann als verbindliche Vorgabe für den Entwickler genutzt werden. Video Aufzeichnungen des Prototyps können für Werbezwecke oder Schulungen verwendet werden.

Was ist Hi-Fi und Lo-Fi?

Ein UI Design oder ein Prototyp, welcher bewusst nicht im finalen Design gestaltet wurde, bezeichnet man als Lo-Fi (Low Fidelity). Lo-Fi wird meist in der frühen Phase der Entwicklung angewendet. Dabei kann die Usability ohne Design getestet werden. Ein Hi-Fi (High Fidelity) UI Design oder Prototyp hingegen entspricht exakt dem finalen Look.

Ein User Interface ist wie ein Witz, wenn du ihn erklären musst ist er nicht so gut.

Martin LeBlanc, Founder of iconfinder

UI Design

Wir liefern User Interface Design

Ein zentraler Bestandteil von UX Design ist das UI Design bzw. User Interface Design (Benutzer Schnittstellendesign). Wir erstellen User Interfaces 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. Sowohl die Ästhetik des User-Interface wie auch eine gute Usability tragen zu einem positiven User Experience bei.

Nachfolgend ein Beispiel eines Login Screens für unseren Kunden:

Prototype LoFi

Mobile first!

Bei vielen UI Designs wird der Fokus immer noch auf Desktops gelegt. Jedoch gilt auch hier der Grundsatz: Mobile first! Und dafür gibt es gute Gründe. So haben sich in den letzten Jahren die Nutzer auf mobilen Geräten im Verhältnis zu den Nutzern auf Desktops verdoppelt.

Interaction Design

Wir bieten Interaction Design an

Was passiert, wenn ich das Passwort falsch eingebe, was passiert, wenn ich scrolle? Wir gestalten das Interaction Design für unsere Kunden. Unsere Agentur erstellt Animationen und Abläufe, welche zu einem positiven UX notwendig sind. Während der Entwicklung stehen die Wünsche, Anforderungen und Ziele des Nutzers im Vordergrund.

Nur dank Bewegung wird zum Beispiel ein Slider möglich, welcher mit Swipe auf Touch-Screens benutzt werden kann. Dabei gilt es, die richtige Geschwindigkeit für ein positives UX zu finden. Soll die Bewegung einrasten oder langsam auslaufen? Die Bewegung soll subtil, flüssig und natürlich die Interaktion unterstützen. Jede Bewegung und jeder Screen wechsel stellt eine kleine Geschichte dar und hilft den Aufbau einer App zu verstehen.

Unverbindlicher Besuch

Gerne kommen wir bei Ihnen auf einen Besuch vorbei oder setzen ein Online-Meeting auf, um Ihr geplantes Projekt zu besprechen. Wir hören zu, machen Vorschläge und zeigen Ihnen mögliche Lösungswege.

Anfrageformular
dark mode dark mode arrow upward arrow upward navigate next navigate next east east next call call