Das ABC des UI-Designs, um Ihre Nutzer zu begeistern
Was ist die UI? Um Ihre Kunden anzulocken, sie dazu zu bringen, Ihr Produkt anzunehmen und sie an sich zu binden, ist die User Experience oder UX der Schlüssel, auf den Sie Ihre Bemühungen konzentrieren müssen, um sich von der Konkurrenz abzuheben und Ihre Zielgruppe zufrieden zu stellen.
Aber haben wir gesagt, dass wir über User Interface sprechen werden? Nicht von User eXperience! Ups, Spoileralarm.
Denn egal, ob Ihr Webprodukt oder -projekt eine Website, eine mobile Anwendung oder eine Online-Software ist, wir können Ihnen nicht erklären, was UI ist, ohne über UX zu sprechen, da diese beiden Begriffe Teil ein und derselben digitalen Marketingstrategie sind.
Inwiefern trägt die UI zum nutzerzentrierten Design und damit zur UX bei? Was ist der Unterschied zwischen UI und UX?
Ladies and Gentlemen, um Ihr Webprodukt zu erstellen oder zu optimieren, im Einklang mit den Bedürfnissen Ihrer Zielgruppe, Ihren Markenwerten und Ihrer digitalen Strategie ...
... stellen wir Ihnen die UI vor, den emergenten Teil der UX :
Was ist UI?
UI steht für User Interface, oder Benutzerschnittstelle in der französischen Version, aber was ist das konkret?
Die Schnittstelle ist der für den Menschen sichtbare Teil der Maschine, das Gerät, das den Benutzer und das Produkt zusammenbringt und die Kommunikation zwischen ihnen ermöglicht.
Der Nutzer gibt also Befehle, auf die die Maschine reagiert, indem er auf Links, Menüs und Knöpfe klickt, ohne dass er dafür codieren muss.
Die UI ist also das Schaufenster, das die Komplexität der Technologie verbirgt und es dem Nutzer gleichzeitig ermöglicht, sie einfach zu bedienen.
Die Herausforderungen des UI-Designs
Wie Sie verstehen, geht es beim UI-Design nicht nur um Ästhetik, auch wenn diese sehr wichtig ist, sondern vielmehr um funktionales Design, um die Optimierung der Ästhetik zugunsten der Effizienz und der Benutzeremotionen.
Für eine optimale Webfunktion berührt die UI somit :
- die Platzierung des Inhalts,
- die Navigation,
- die Positionierung der Menüs,
- die Auswahl und den Stil von Bildern, Animationen oder Videos,
- die grafische Umgebung: die Wahl der Farben, der Typografie und der Schaltflächen.
Es handelt sich um eine Querschnittsproblematik, die das Webdesign berührt, um den Bedürfnissen des Marketings und der Markenkommunikation (Storytelling) gerecht zu werden.
Dieter Rams, ein anerkannter UI-Designer (bei Braun), definiert die Regeln, die für ein nutzerfreundliches, d. h. benutzerfreundliches und leicht zu bedienendes UI-Design einzuhalten sind. So muss das Design der Benutzeroberfläche :
- innovativ sein,
- nützlich sein,
- ästhetisch ansprechend sein,
- verständlich sein,
- unauffällig sein,
- ehrlich,
- nachhaltig,
- auf Details achtend,
- minimalistisch,
- environment friendly (indem sie smart ist, verbraucht sie wenig, insbesondere an Servern).
Beispiele für mobile UIs finden Sie auf uxplanet.org :
Unterschiede zwischen UI und UX
Der Begriff User Interface wird zusammen mit dem Begriff User eXperience definiert, da ersterer dem letzteren dient.
Ja, die Benutzeroberfläche trägt unter anderem zu einem guten Kundenerlebnis bei...
Denn der Inhalt, die Architektur der Website usw. dürfen nicht vernachlässigt werden, d. h. die UI ist die Form, der Inhalt der Inhalt und die UX ist die perfekte Gleichung zwischen Inhalt und Form.
UX ist das Ergebnis der Emotionen, die im Moment der Interaktion mit der Marke oder dem Produkt hervorgerufen werden.
Kurz gesagt, sie ist die Antwort auf eine Strategie, die auf Kundenservice und emotionaler Intelligenz basiert, um Kundenzufriedenheit zu erreichen und sie zu Markenbotschaftern zu machen.
Die UI trägt zum Teil dazu bei, diese Ziele zu erreichen.
Agentur LunaWeb
Die Rolle des UI-Designers
Der Beruf des UI-Designers, in kleineren Strukturen manchmal auch UX-UI-Designer, entstand mit der zunehmenden grafischen und interaktiven Komplexität von Webseiten: Responsivität (Anpassung der Seiten an die Größe des verwendeten Geräts), Animation, Augmented Reality etc.
Zusammenfassend lässt sich sagen, dass der UI-Designer :
- untersucht die Benutzerwege, die Ergonomie und die Informationsarchitektur ;
- berücksichtigt und beantwortet die Anforderungen des Kunden (oder Arbeitgebers) ;
- übersetzt sie für Webentwickler;
- entwirft einfache, robuste, ästhetische und sichere Schnittstellenmodelle;
- wählt die besten Werkzeuge und grafischen und interaktiven Komponenten aus.
Zu seinen notwendigen Qualitäten gehören Empathie, um sich in die Lage des Nutzers versetzen zu können, und grafische Kenntnisse (Illustration, Motion Design, 3D), um dem Kunden zu helfen, sich eine Vorstellung zu machen, und letztendlich dem Kunden, das Produkt anzunehmen.
Die UI-Trends im Jahr 2020
Um Ihr Produkt zu verkaufen, sollten Sie auf UCD, oder user-centered design, setzen.
Dabei handelt es sich um einen Webdesign-Ansatz, der sich auf die Bedürfnisse und Erwartungen der Endnutzer konzentriert.
Die Personalisierung
Wie sonst kann man user-centered sein?
© graphiste.com
Der Minimalismus
Weniger ist mehr ! Die Ladezeit der Seiten ist schneller, für einen immer eiligeren Benutzer.
Placepull
Die Animation
Mikrointeraktionen verbessern das Engagement der Nutzer.
Beispiel im E-Commerce © uxplanet.org
Die erweiterte Realität
Projektion ist Adoption!
ARKit von Ikea
Der Neumorphismus
Wenn das 2D-Flachdesign auf einen subtilen, minimalistischen Realismus trifft.
uxdesign.cc
Der Werkzeugkasten des UI-Designers
Bei der Entstehung des Projekts
Zuallererst sollten Sie mit :
- eine Marktstudie (Benchmarking), insbesondere um die Gewohnheiten, Bedürfnisse und Verhaltensweisen Ihrer Zielgruppe zu verstehen (durch Interviews) ;
- Websites wie Pinterest, Dribbble, Behance oder Awwwards werden in dieser Phase gerne genutzt, um über die Gestaltung der visuellen Identität nachzudenken;
- Lesen des Lastenhefts und der Specs (Spezifikationen, Kundenanforderungen), die vom Product Owner, der das Webprojekt betreut, übermittelt werden;
- eine Studie der Baumstruktur der Website oder der App ;
- ein ergonomisches Audit, wenn das Webprodukt bereits existiert. Der UI-Designer kann zum Beispiel eine Software wie hotjar verwenden, um eine Heatmap zu erstellen.
Hotjar
Ein Design Sprint, eine von agilen Methoden und Design Thinking inspirierte Kreativmethode, kann auch durchgeführt werden, um von einer Problemstellung auszugehen und ein Szenario zu entwerfen, das die Risiken und Unsicherheiten rund um eine Innovation reduziert.
Während der Gestaltung der Benutzeroberfläche
1) Der Product Owner oder der UX-Designer, der keine grafischen Fähigkeiten hat, liefert dem UI-Designer ein Zoning, d. h. ein sehr einfaches Vorlayout mit den Inhaltsblöcken, den erwarteten Bereichen der Anwendung, ohne ästhetische Überlegungen.
© E. Renaux
2) Der UI-Designer erstellt dann das Wireframe, ein funktionales Modell, das die Bereiche und Komponenten der Benutzeroberfläche genauer schematisiert.
Normalerweise verwendet er dazu Papier und Stifte oder eine Software wie Balsamiq.
Wireframe © twitpic.com
3) In der nächsten Phase wird ein fortgeschritteneres Modell, auch Mock-up genannt, erstellt, das von einem/einer Grafikdesigner/in zur Konkretisierung der grafischen Elemente oder vom UI-Designer selbst, wenn er/sie über Illustrationsfähigkeiten verfügt, angefertigt wird.
Je nach Feedback des Kunden oder des Arbeitgebers werden mehrere Iterationen (oder Versionen) erstellt.
Zu den Software-Referenzen gehören Figma, Sketch und Adobe XD, aber auch After Effects, Principle und Framer für Motion Design (animierte Gestaltung) und 3D.
4) Schließlich ist es an der Zeit, mit dem Prototyping zu beginnen. Die Benutzeroberfläche wird nun teilweise von Nutzern und/oder Investoren getestet, um letzte Rückmeldungen vor der Produktentwicklung zu sammeln.
Die Prototyping-Software InVision ermöglicht es hier, Navigationstests durchzuführen, indem die JPEGs des Modells miteinander verknüpft werden und so die konkrete Funktionsweise der Webseiten interaktiv simuliert wird.
Der Prototyp ermöglicht :
- die Ergonomie zu optimieren,
- die notwendige Software- und Anwendungsentwicklung zu erfassen,
- die a priori Funktionsweise der Webseite entsprechend den ursprünglichen Zielen zu simulieren,
- die grafischen Elemente zu validieren,
- die Zeit und die Kosten für die Entwicklung abzuschätzen.
Während des gesamten Projekts
Um schließlich den Fortschritt seines Projekts zwischen Konzeption, Verfolgung der Iterationen und Freigabe durch den Kunden zu visualisieren, verwendet der UI-Designer ein Projektmanagement-Tool, das mit einem Kanban-Board ausgestattet ist :
Trello
Um Ihre Nutzer zu begeistern, pflegen Sie Ihre UI.
Die Benutzeroberfläche ist das, was der Nutzer als Erstes sieht, und das Surfen im Internet ist eine Erfahrung für sich.
Sie haben eine emotionale Karte zu spielen, eine besondere Beziehung zu Ihren Interessenten aufzubauen, die immer anspruchsvoller und flüchtiger werden.
Wenn Ihr Inhalt und Ihr Angebot deren Erwartungen erfüllen sollen, muss dies natürlich über ein schönes, gut gestaltetes und intuitives Schaufenster geschehen.
Das Geheimnis: Versetzen Sie sich in die Lage Ihrer Zielgruppe und führen Sie Benutzertests durch.
Und wie wollen Sie den Unterschied machen?
Artikel übersetzt aus dem Französischen