brayn.io

User Experience und User Interface

Beratung

Konzeption

UX/UI Design

MVP & Produkt

Scale & Expand

User Experience/User Interface: ein Überblick

UI und UX sind eng miteinander verbunden und beeinflussen sich direkt. Nichtsdestotrotz lassen sie sich voneinander abgrenzen. Die User Experience (UX) kümmert sich um die Zufriedenheit der nutzenden Personen, sie adressiert die Gefühle und Erfahrungen des Nutzenden bei der Verwendung eines Produktes. Das User Interface (UI) dreht sich rund um die visuellen Aspekte eines Produktes und gibt der UX ein ästhetisches und ansprechendes Aussehen.

Wir bei brayn.io geben der Usability und der Bedienbarkeit Deines Produktes einen hohen Stellenwert. Im Folgenden erläutern wir den Unterschied zwischen UX- und UI-Design sowie ihre Abhängigkeit von einander.

UI

FARBEN UND FORMEN TYPOGRAFIE & MOODBOARD CD & CI VISUELLE LAYOUTS LAYOUTS

USER RESEARCH & USERFLOW PERSONAS & USER INTERVIEW INFORMATIONSARCHITEKTUR INTERAKTIONS-DESIGN WIREFRAMES & PROTOTYPING USABILITY TEST

UX

Design Produkte

UX/UI Abbildung, die den Prozess im Workshop darstellen soll.

Design-Workshop

Der Design-Workshop bietet die Möglichkeit, eine Software/App-Idee klar und strukturiert zu beschreiben und Anforderungen an das UX/UI-Design und die Entwicklung herauszuarbeiten.

Verschiedene Tools werden verwendet, wie z. B. das Persona-Tool zur Definition der Zielgruppe, das Moodboard zur Bestimmung der visuellen Richtung, die Story-Map zur Verdeutlichung der Funktionalitäten, eine User-Journey zur Nachverfolgung der Schritte des oder der Nutzenden und Wireframes zur Planung des UI-Designs. Der Einsatz dieser Tools ermöglicht es, gemeinsam mit dem Team, Projekt-Ideen zu erarbeiten, zu optimieren und eine erfolgreiche Anwendung zu konzipieren.

UX/UI Abbildung, die den Prozess im Entwurf darstellen soll.

Design-Entwurf

Nachdem im Design-Workshop alle wichtigen Informationen gesammelt und strukturiert wurden, beginnen die Umsetzung des UX/UI-Designs für deine Projektidee. Die Ergebnisse des Workshops werden als Grundlage genommen und in ein ansprechendes Design überführt.

Wir erstellen für dich zwei unterschiedliche Entwürfe, die jeweils drei Seiten umfassen und als Klickdummy präsentiert werden. Diese Entwürfe berücksichtigen die Bedürfnisse und Wünsche deiner Zielgruppe sowie die Grundfunktionalitäten deiner App.

Du erhältst somit eine realitätsnahe Vorstellung davon, wie deine Anwendung später aussehen und funktionieren wird. Durch den Klickdummy kannst du auch schon die ersten die Interaktionen und den Ablauf deiner Anwendung testen, bevor wir mit der eigentlichen Entwicklung beginnen.

UX/UI Abbildung, die den Prozess im Prototyping darstellen soll.

Design-Prototyp

Unser erweitertes Design-Paket bietet zusätzlich zum Design-Workshop umfangreichere Analysemethoden, um ein umfassendes Design-Konzept zu erstellen. Dazu gehören folgende Techniken: Eine USP-Analyse, um herauszufinden, welche einzigartigen Eigenschaften dein Projekt hat und wie wir diese am besten hervorheben können. User-Interviews für ein tiefes Verständnis für die Bedürfnisse und Wünsche deiner Zielgruppe, sowie eine Konkurrenzanalyse, welche uns dabei hilft, die Stärken und Schwächen der Konkurrenz zu ermitteln und daraus Rückschlüsse für dein eigenes Design zu ziehen.

Auf Basis dieser Informationen können wir ein umfassendes Design-Konzept, für eine ansprechende und nutzungsfreundliche Anwendung und eine höhere Anzahl von Ansichten erstellen, um möglichst alle Funktionen und Interaktionen der Anwendung darzustellen.

UX/UI Design bei brayn

UX-
User Experience

User Research, in deutsch die Forschung über Nutzende, hilft Dir dabei Unsicherheiten über die Bedürfnisse und Umstände Deiner Zielgruppe/n zu verringern. Damit kann sichergestellt werden, dass Dein Produkt letztendlich von den Nutzenden gut angenommen wird.

Eine Zielgruppenanalyse ist dafür da, dass detaillierten Daten innerhalb einer bereits feststehenden Zielgruppe erhoben werden.
Damit erhält man ein tieferes Verständnis für die Zielgruppe und hilft dabei, aktuelle Trends und Veränderungen früh zu erkennen. 

Es ist wichtig, dass Du Deine Konkurrenz kennst und wichtige Daten und Fakten über sie sammelst. Denn nur so lassen sich strategische Entscheidungen treffen und Alleinstellungsmerkmale schaffen. Das Ziel ist eine klare Differenzierung zum Wettbewerb, welche die Kundschaft überzeugt.

Wireframe:
Eine einfache grafische Darstellung der allgemeinen Website-Struktur. Diese sollte möglichst einfach dargestellt werden, um dem oder der betrachtenden Person den Begriff schnell zu verdeutlichen.

Prototyp:
Ein ausgereifter Designvorschlag mit allen wichtigen Features.

Bei Usability-Tests werden Testpersonen gebeten, allgemeine Aufgaben mit Testobjekten zu lösen. Diese Aufgabe wird später in ähnlicher Weise mit Deinem Produkt durchgeführt. Dabei wird geprüft, an welchen Stellen Schwierigkeiten bei der Benutzung auftreten.

Responsive Design ist Webdesign, das sich an die Nutzung anpassen kann, insbesondere an verschiedene Geräte. Die Inhalts- und Navigationselemente sowie die strukturelle Gestaltung der Website passen sich der Bildschirmauflösung mobiler Endgeräte an. Anzeigegröße, -form und -platzierung sind kontextabhängig und mit den Auflösungen mobiler Geräte kompatibel. Alle UX-Aspekte werden auch in unterschiedlichen Darstellungen betrachtet.

UI-
User Interface

Corporate Design:
Es ist Teil Deiner Corporate Identity. CDs sorgen für ein einheitliches Erscheinungsbild und tragen zur Markenidentität bei. Corporate-Design-Arbeiten umfassen die einheitliche Gestaltung von Logos, Slogans und Werbemitteln.

Corporate Identity:
Sie beschreibt alle Merkmale und Eigenschaften, die ein Unternehmen oder eine Marke auszeichnen und von anderen Unternehmen oder Marken unterscheiden.

Ein Moodboard ist eine Collage aus Fotos, Illustrationen oder Bildern, die zur visuellen Beschreibung verwendet werden. Durch die direkte Visualisierung können Sie sehen, welche Elemente miteinander harmonieren und welche nicht. Moodboards sollen oft eine Atmosphäre oder Stimmung erzeugen oder vermitteln, die positiv auf die Kundschaft wirkt und zur Nutzung anregt.

Eine Design Review ist das Ergebnis von Fragen wie:
Was ist vollständige Identität? Sind Design, Farbpalette und Typografie materialübergreifend konsistent, was kommunizieren die Grafiken und erreichen sie sicher ihre Ziele, sind Design und Produktqualität auf dem Niveau, das sie haben sollten? Sind sie unverständlich oder verwirrend?

Logos, Bildbearbeitung, Grafiken, Vektordateien, Symbole, Farben und Formen, Layouts, Typografie, Grafikdesign und visuelle Layouts sind Elemente, die den Inhalt Deiner Lösung ausmachen.

Layout ist das Erscheinungsbild und die Platzierung von Text, Bildern, anderen grafischen Elementen und Typografie.

Web- & App
Design

Eine traditionelle statische Website, die hauptsächlich aus sogenannten “statischen” Inhalten besteht. Wir entwerfen und produzieren eine komplette Website, welche die Freundlichkeit für Nutzende berücksichtigt.

WordPress ist ein kostenloses Content-Management-System. Wenn Du eine dynamische Website mit einfach zu pflegenden Inhalten wünschst, wird Dir eine WordPress-Website empfohlen.

Ein Onepager ist eine Website mit nur einer Seite und keinen Unterseiten. Diese Seite ist im Allgemeinen so konzipiert, dass sie nach Bedarf erweiterbar ist.

Web-Apps funktionieren überall dort, wo sie über eine Internetverbindung und einen Browser verfügen.

App-Designer erstellen UX- und UI-Designs für Android-Apps, indem sie zuerst die Ziele der App verfolgen, dann die Erfahrungen der Nutzenden planen und dann die Android-App mit einem Grafikprogramm entwerfen.

Forschung &
Beratung

Gemeinsam finden wir heraus, was Deine Geschäftsziele sind und ob sie mit Deinen Anforderungen und denen der Endnutzenden übereinstimmen.

Wir sind benutzer- und benutzerinnenzentriert und verwenden Tools wie Personas, um die Bedürfnisse der Endnutzenden zu recherchieren und zu analysieren.

Informationsarchitektur beschreibt die Struktur einer Website oder eines Intranets. Wir helfen dabei, dass Die Nutzenden deine Softwareanwendung, die Informationen, nach denen sie suchen, schnell und einfach in Information Spaces finden.

Identifizieren, quantifizieren und priorisieren des Potenzials zur Verbesserung des digitalen Erlebnisses.

Wir beantworten alle Deine geschäftlichen Fragen zu Deiner geplanten Softwarelösung in Bezug auf First Screens und Impressions und helfen Dir gemeinsam, eine Lösung zu finden, die sowohl Deinen eigenen Anforderungen als auch denen der Endnutzenden entspricht.

Kontakt
Du hast eine Frage oder einen Hinweis für uns? Schreibe uns eine Nachricht – wir sind gerne für Dich da.

Warum ist UX-Design so wichtig?

Das ist so, weil zu allererst die Erfahrungen der Kundschaft über den kommerziellen Erfolg entscheidet. Gelungenes UX-Design ist einer der wichtigsten Erfolgsfaktoren für digitale Angebote, egal, ob es sich um eine Corporate Website, einen Online-Shop oder eine App handelt. Die konkrete Ausgestaltung der User Experience hängt von den adressierten Nutzenden ab. Auch deshalb sollte das UX-Design nicht nur einmalig implementiert, sondern immer wieder überprüft und im Hinblick auf sich ändernde User-Präferenzen, neue technische Möglichkeiten oder Aktivitäten des Wettbewerbs optimiert werden. Um für die Nutzung eine optimale User Experience zu bieten, empfiehlt es sich, bei der Optimierung auf das Know-how und die Erfahrung kompetenter UX-Experten oder Expertinnen zu setzen.

Geniale und erschreckende Statistiken zur User Experience

30%

des ersten Eindrucks lässt sich auf das Design zurückführen.

57%

der Internetnutzenden sagen, dass sie ein Unternehmen mit einem schlechten Webdesign auf dem Handy nicht weiterempfehlen würden.

Es dauert etwa 50 Millisekunden, bis sich die Gäste einer Webseite eine Meinung über eine Webseite gebildet hat.

54%

der Webseiten-Besuche werden abgebrochen, wenn das Laden der Seite länger als 3 Sekunden dauert.

Gäste betrachten im Durchschnitt 5,94 Sekunden lang das Hauptbild einer Website.

38%

der Gäste hören auf, auf einer Website zu verweilen, wenn der Inhalt oder das Layout unattraktiv sind.

88%

der Online-Konsumierenden besuchen nach einer schlechten Erfahrung wahrscheinlich nicht noch einmal dieselbe Website.

94%

des negativen Website-Feedbacks hängt mit dem Design zusammen.

Fast 8 von 10 der Nutzenden würden aufhören, sich mit Websites zu beschäftigen, die auf ihrem Gerät nicht gut angezeigt werden.

76%

der Nutzenden möchten auf einer Website leicht das finden, wonach sie suchen.

Quelle: zachermedia.de

Wir führen Deinen Use Case zum digitalen Produkt. Let’s build something big together!

Wer sind wir?

brayn.io wurde 2008 als secu-ring GmbH gegründet. Das erste Jahr verbrachten wir in einem kleinen Kreuzberger Büro. Nach ersten spannenden Projekten wurden unsere Leistungen immer gefragter, so dass in den zurückliegenden Jahren aus 2 Gründern ein tolles Team aus digitalen Fachleuten & Entwicklern und Entwicklerinnen und ein umfangreiches Netzwerk an Mitwirkenden geworden sind. Kundschaft und Geschäftsführung sind bei uns Teil des Teams!

Bild André Berthold

André Berthold hat für sein KI-Diplom mit Bayes kognitive Modelle erstellt. Im Gründungsteam von ARD.de baute er die ARD DACH-Domain wie auch Mediatheken und Audiotheken mehrerer Rundfunksender auf, bevor er IT-Produkte bei c.H.Beck verantwortete. Er ist zertifizierter SCRUM Product Owner und setzt privat und beruflich auf Nachhaltigkeit.

André Berthold in der Geschäftsführung

Teamfoto mit André, Larissa, Katja, Jeam-Michel, Maral, André, Milan, Maik und Marcel
Unser Team

brayn-Blog - das könnte Dich auch interessieren

Von Bugs zu Bestleistungen: Die essenzielle Rolle der Softwaretests

Softwaretests sind ein unverzichtbarer Bestandteil des Entwicklungsprozesses von Softwarelösungen. 

Web vs. Desktop-Anwendungen – Was ist die bessere Wahl?

Du bist auf der Suche nach einer individuellen Softwarelösung, die deine Arbeitsprozesse optimiert und dein Unternehmen voranbringt? …

Die Kunst der effektiven Ticket-Erstellung: Support-Ticket (2/2)

Die Kunst der effektiven Ticket-Erstellung: Ein Leitfaden für herausragenden Support für die Kundschaft …