21 UI-Designgeheimnisse, die Sie kennen müssen
Über die Sitzungszeiten und Absprungraten hinaus besteht der Hauptzweck des Benutzeroberflächendesigns darin, die Dinge für den Benutzer so mühelos und angenehm wie möglich zu gestalten. Und wie in den meisten Bereichen des Designs kann es hilfreich sein, die richtigen Werkzeuge zu haben (siehe unsere Liste von Webdesign-Tools und oben Website-Ersteller ).
Plus, das Recht zu haben Web-Hosting Service kann den Unterschied zwischen Erfolg und Misserfolg ausmachen. Wählen Sie also mit Bedacht aus. Im Moment finden Sie hier 21 Tipps und Tricks zum UI-Design, die auf 10 Jahren Erfahrung auf diesem Gebiet basieren.
01. Wissen, für wen Sie entwerfen
Aufgaben wie Benutzerrecherche, Wireframing, Testen und Design von Informationsarchitekturen werden oft als Aufgabe eines UX-Designers angesehen, aber es zeichnet sich eine wachsende Mischung aus der Rolle des UX / UI-Designers ab.
Laut Invision „66% der Stellenausschreibungen von UX-Designern erfordern UI-Kenntnisse“. Wenn es für UX-Designer wichtig geworden ist, visuelles Design, Branding und Typografie zu verstehen, ist es nur richtig, dass sich UI-Designer engagieren oder zumindest ein grundlegendes Verständnis dafür haben die oben genannten UX-Fähigkeiten.
Ein UI-Designer, der an der Erstellung der im UX-Workstream entwickelten Personas, Wireframes und Informationsarchitekturen beteiligt ist oder diese zumindest beachtet, trifft Interaktions-, Farb- und Typentscheidungen, die von den Personen beeinflusst werden, die das Produkt oder das Produkt verwenden Service, anstatt ihre eigenen stilistischen Vorlieben. Indem Sie sich die Zeit nehmen, um die Benutzer zu verstehen, für die sie entwerfen, erstellen UI-Designer Schnittstellen, die den Anforderungen der Benutzer sowohl visuell als auch funktional besser entsprechen.
Wenn Sie die neuesten kreativen und praktischen Fähigkeiten erlernen möchten, um Ihre Kundenarbeit, Karriere oder Agentur auf die nächste Stufe zu heben, treten Sie uns bei bei CSS generieren , unsere Konferenz für Webdesigner und Entwickler. Verwenden Sie einen speziellen Angebotscode WEBDESIGNER2 für einen Rabatt von 10% auf Tickets.
02. Wahllähmung überwinden
Mark Zuckerberg hat eine ziemlich einfache Garderobe; Es sind alles graue T-Shirts. In seinen eigenen Worten: „Ich möchte wirklich mein Leben klären, um es so zu gestalten, dass ich so wenig Entscheidungen wie möglich treffen muss“. Dieses Prinzip überträgt sich auf das Schnittstellendesign, da die Bereitstellung zu vieler Optionen die Benutzer überfordert, zu einer Überanalyse führt und letztendlich die Wahrscheinlichkeit verringert, dass sie eine Aktion oder einen Prozess abschließen. Wenn möglich, sollten wir die verfügbaren Optionen einschränken oder alternativ die Optionen ausblenden, die zu diesem Zeitpunkt der Reise weniger relevant sind.
02. Hilfe direkt mit Standardzuständen
Unsere Standardzustände können mehr als nur die Benutzer auffordern, 'Bitte auswählen'. Websites wie Skyscanner Suchen Sie den dem Benutzer am nächsten gelegenen Abflughafen, schlagen Sie Daten vor, die mit den bevorstehenden Feiertagen korrelieren, und wählen Sie die Anzahl der fliegenden Passagiere vor. Das Entwerfen von Standardzuständen basierend auf den üblicherweise gewählten Optionen reduziert den Aufwand für Benutzer und ermöglicht es ihnen, vorausgewählte Optionen anzupassen.
03. Sofortige Aktion mit leeren Zuständen
Ungefüllte Körbe, unbewohnte Wiedergabelisten und Standardsuchoberflächen können den Benutzern häufig ein Gefühl der Leere hinterlassen. Pass auf Gezeiten , die Benutzer, die 'keine Alben haben', auf ihre Top-Empfehlungen hinweisen. Anstatt Sackgassen innerhalb unserer Schnittstellen zu schaffen, sollten wir leere Zustände als Gelegenheit nutzen, neue Features und Funktionen zu entdecken, die für unsere Benutzer von Vorteil sind.
04. Schmeicheln Sie schmeichelhaft mit Fehlerzuständen
Im Bereich Digital geht manchmal etwas schief, und wenn Sie nicht dafür entwerfen, kann sich der Benutzer verärgert fühlen. Erstellen Sie als UI-Designer Fehlerzustände, die positive Aktionen und Gefühle fördern, anstatt unverständliche Nachrichten zu hinterlassen. Das Küchengeschichten App geht hervorragend damit um, entschuldigt sich, wenn sie ein leeres Ergebnis für ein Küchenrezept zurückgeben, und ruft zum Handeln auf, mit dem Benutzer neue Anfragen einreichen können. Sehen Sie unseren Favoriten 404 Seiten für weitere Beispiele.
05. Entscheidungen aufschlüsseln
Wir können Auswahlen nicht nur einschränken und gruppieren, sondern auch weniger komplex gestalten, indem wir sie in Prozesse aufteilen. Man kann sich vorstellen, dass Apples Back-End-Bestand an iPhone XRs eine große Matrixliste mit Hunderten von Produkten mit einer Vielzahl von Farben, Größen und Netzwerken ist. Aber für den Benutzer, der eine neue auswählt Apple iPhone XR Über die Website können sie über eine einfache Schritt-für-Schritt-Oberfläche ihre Optionen nacheinander eingrenzen. Wenn wir viele Konfigurationsoptionen präsentieren, sollte die Benutzeroberfläche das schwere Heben und nicht den Benutzer übernehmen.
06. Widerstand reduzieren
Die von uns entworfenen Schnittstellen sollten es den Benutzern so einfach wie möglich machen, die darin enthaltenen Aufgaben zu erledigen. Wenn Sie sich bei ihrer mobilen App anmelden, Locker stützt sich auf einen 'magischen' Bestätigungslink, der an die E-Mail-Adresse des Benutzers gesendet wird, um die abscheuliche Aufgabe des Speicherns und Eingebens seines komplizierten Passworts auf wundervolle Weise zu überspringen.
Wenn Sie die Benutzeroberfläche und nicht den Benutzer belasten, sind sie weitaus weniger widerstandsfähig, um das Ende eines Prozesses auf Ihrer Website oder in Ihrer Anwendung zu erreichen. Wenn wir über die Technologie verfügen, um die Interaktionen innerhalb unserer Schnittstellen zu beschleunigen, sollten wir dies berücksichtigen.
07. Nimm nur was du brauchst
Um einen Weg des geringsten Widerstands zu schaffen, sollten wir den Benutzer zu einem bestimmten Zeitpunkt innerhalb unserer Schnittstellen um so wenig Informationen wie möglich bitten. Je weniger Daten ein Benutzer eingeben muss, desto wahrscheinlicher ist es, dass er eine Übung abschließt.
Websites wie LinkedIn fragen bei der Anmeldung auf ihrer Plattform nach den Mindestdaten (Vorname, Nachname, E-Mail-Adresse und Passwort) und spielen dann bei der Profilerstellung eine Rolle, indem sie jeweils eine persönliche Information eingeben an Bord. Es gibt keine Möglichkeit, sich bei LinkedIn anzumelden, wenn er seine gesamte berufliche Laufbahn eingeben müsste, um durch die Tür zu kommen.
08. Geben Sie ein Gefühl des Fortschritts
In einigen Fällen sind langwierige Formen und Prozesse erforderlich. Beispielsweise erfordern viele Finanzanwendungen umfangreiche Dateneingaben und Zeit zum Ausfüllen. Bei der Anmeldung zum Pinterest App gibt es einen Indikator in der Benutzeroberfläche, der anzeigt, in welchem Schritt (von 4) sich der Benutzer auf der Reise befindet, um sicherzustellen, dass er Fortschritte in Richtung seines Endziels macht. Dieses Gefühl der Dynamik führt dazu, dass Benutzer weniger frustriert sind, wenn sie nicht wissen, wann ein Prozess endet, und ihn daher weniger wahrscheinlich ganz aufgeben.
09. Konventionen beachten
Als UI-Designer möchten wir natürlich unsere kreativen Säfte an ihre Grenzen bringen und neue und aufregende Möglichkeiten für Benutzer entwickeln, mit unseren digitalen Produkten zu interagieren und sie zu erleben. Wir müssen jedoch ein Gleichgewicht zwischen Originalität und Vertrautheit herstellen, um sicherzustellen, dass unsere Benutzer nicht zu viel Zeit damit verbringen müssen, den Umgang mit unseren Schnittstellen zu erlernen. Apps wie Snapchat - die eine bekommen haben neues Logo in letzter Zeit - haben viele ältere Benutzer mit radikalen Navigationsoptionen so sehr entfremdet, dass die New York Times schrieb eine Anleitung zu Snapchat für Personen, die kein Snapchat erhalten .
Angesichts dessen, dass „Sie in alle Richtungen wischen und sogar ein- und ausklemmen können, um auf verschiedene Bildschirme zuzugreifen“ ( Weitere Informationen finden Sie auf Medium ) muss eine gewisse Zeit investiert werden, um die Interaktionen zu lernen, bevor Sie die Anwendung effektiv nutzen können.
Jüngere Benutzer haben die Auffindbarkeit von Snapchat begrüßt, aber Erwachsene, die die Konventionen des Tippens und Klickens als Navigationsmittel verstehen, haben die App in weniger Zahlen übernommen. Mit dem Wachstum des Webs haben sich eine Reihe von Konventionen für die Elementpositionierung (wie Körbe oben rechts und Hamburgermenüs oben links) herausgebildet, die berücksichtigt werden sollten. Unsere Schnittstellen sollten Benutzer begeistern und begeistern, aber auch vorhersehbar genug sein, um verwendet zu werden, wenn wir die Conversions aufrechterhalten und die Absprungraten begrenzen möchten.
10. Geben Sie visuelles Feedback
Feedback ist ein Geschenk und sollte in unseren Schnittstellendesigns als solches behandelt werden. Google Snack-Bars sind eine intelligente kleine Mikrointeraktion, die in ihrem Material Design-System lebt. Snackbars werden vorübergehend auf dem Bildschirm einer App oder einer Website-Oberfläche angezeigt, um kurze kontextbezogene Anweisungen, Fehler oder Bestätigungen bereitzustellen, die den Benutzer über die Konsequenzen der von ihm ergriffenen Maßnahmen auf dem Laufenden halten, sei es das Speichern eines Fotos, das Senden einer E-Mail oder das Auffordern eines erneuten Versuchs 'wenn die App einen Fehler hat.
Als UI-Designer sollten wir visuelles Feedback für jede der wichtigsten Interaktionen innerhalb unserer Schnittstellen geben. Wenn ein Artikel zum Warenkorb des Benutzers hinzugefügt wurde, teilen Sie ihm dies mit. Wenn ihre Zahlung erfolgreich abgeschlossen wurde, informieren Sie sie mit einer Dankesnachricht und weisen Sie sie an, wohin sie gehen sollen, wenn sie Fragen zu Lieferung oder Rückgabe haben. Mithilfe von visuellen Hinweisen und Animationen können Benutzer den Abschluss großer und kleiner Aufgaben innerhalb Ihrer Website oder Anwendung bestätigen, ein Erfolgserlebnis vermitteln und die Angst verringern, indem sie bestätigen, dass eine Maßnahme ergriffen wurde.
11. Verwenden Sie benutzergenerierte Inhalte
Die Leute kaufen basierend auf dem, was andere Leute sagen, nicht nur auf dem skurrilen Copywriting von Marken. Dies ist der Grund, warum so viele E-Commerce-Websites einen großen Anteil an Kundenbewertungen haben. Sonnenbrillenmarke Meller erhöhte seine Conversion-Rate um 13% indem sie Bilder der Freude an ihren Produkten auf ihren Produktseiten zusammen mit der traditionelleren E-Commerce-Fotogalerie zeigen.
Wenn für die Marke oder das Unternehmen, für die Sie das Design erstellen, benutzergenerierte Inhalte (User Generated Content, UGC) verfügbar sind, kann das Einbinden in die Seiten unserer Website oder der Benutzeroberfläche der Anwendung dazu beitragen, die Conversions zu steigern, insbesondere wenn das Publikum aus Millennials besteht.
12. Behandeln Sie Benutzer als Anwälte
Benutzer mit Produkten und Dienstleistungen zu begeistern, ist eine Sache, aber sie können auch unsere Befürworter sein oder sogar Teil unseres Marketingteams sein. GoPro's Hauptheldenvideo auf seine Homepage bietet Filmmaterial, das ausschließlich von Kunden aufgenommen wurde, die die HERO7-Kamera verwendet haben (siehe das Beste) GoPro Angebote um deine eigene GoPro zu bekommen).
Die Verwendung von Filmen, die von Benutzern des Produkts aufgenommen wurden, demonstriert potenziellen Käufern die Fähigkeiten der Kamera in einem zuordenbaren Kontext und belohnt die 25.000 Personen, die ihre Videos eingereicht haben, mit einem gewissen Kontakt zur GoPro-Community. Wenn wir ein loyales Publikum haben, gibt es unzählige Möglichkeiten, wie wir ihre Stimmen und Inhalte nutzen können. Dies sollte daher bei der Gestaltung unserer nächsten Benutzeroberfläche berücksichtigt werden.
13. Verwenden Sie Bilder, um Benutzer zu führen
Schöne Bilder können eine Benutzeroberfläche optisch verbessern, können aber auch verwendet werden, um die Aufmerksamkeit auf bestimmte Stellen auf einer Seite oder einem Bildschirm zu lenken (denken Sie daran, Ihre atemberaubenden Bilder mit zu sichern Cloud-Speicher ). Wenn ein Bild eine Person enthält, folgen Benutzer unbewusst der Sichtlinie dieser Person und bieten UI-Designern die Möglichkeit, sie subtil auf Handlungsaufforderungen oder nützliche Informationen hinzuweisen.
Die Sunglasses Hut Website Verwendet dieses Konzept in der Fußzeile der Website, wobei die Augenlinie von zwei Personen Benutzer auf ihre E-Mail-Anmeldung hinweist. Wenn Sie das Bild horizontal drehen, sind es nur Modelle, die in die Ferne starren.
14. Verwenden Sie den negativen Raum auf clevere Weise
Es ist ein häufiger Fehler für UI-Designer, so viele Informationen wie möglich in jede Oberfläche zu packen. Dies kann jedoch zu einer visuellen Überlastung führen und letztendlich Benutzer überwältigen, deren Aufmerksamkeit auf zu viele verschiedene Bereiche auf einer Seite oder einem Bildschirm gelenkt wird .
Die Dropbox Business-Landingpage nutzt den negativen Raum mit großer Wirkung, gibt jedem Element genügend Raum zum Atmen und bietet gleichzeitig einen kurzen Überblick über die Vorteile des Produkts. Durch die strategische Maximierung des Raums um wichtige Informationen und Handlungsaufforderungen werden Benutzer auf sie aufmerksam, ohne dass andere Elemente um ihre Aufmerksamkeit kämpfen.
15. Beginnen Sie mit dem Handy
Angesichts dessen, dass im Jahr 2018 52,2 Prozent des gesamten Website-Verkehrs weltweit Es wurde immer wichtiger, digitale Schnittstellen zu erstellen, die für Benutzer des mobilen Webs optimiert sind. Die Desktop-Ansicht war oft die erste Wahl für UI-Designer. Sie begann mit videogesteuerten Bannern und Interaktionen wie Rollovers und Hovers und musste diese entfernen oder Problemumgehungen entwickeln, wenn wir diese auf Mobilgeräte verkleinern.
Als Alternative zwingt uns das Entwerfen der mobilen Ansicht zunächst dazu, alle unnötigen Störungen zu beseitigen und uns auf die Elemente zu konzentrieren, die für Benutzer für die Ausführung der Aufgaben innerhalb der Benutzeroberfläche von entscheidender Bedeutung sind. Durch die Skalierung können wir der Desktop-Ansicht Verbesserungen hinzufügen und Funktionen hinzufügen, die für diese Erfahrung besser geeignet sind, sobald die Schlüsselkomponenten vorhanden sind.
16. Holen Sie sich die richtige Typlizenz
Es gibt nichts Schlimmeres, als eine schöne Benutzeroberfläche zu entfernen, die Assets für das Entwicklungsteam vorzubereiten und dann zu erkennen, dass unsere Auswahl an Schriftarten mit einer unglaublichen Lizenzgebühr verbunden ist - oder noch schlimmer, sie sind nicht für das Web optimiert. Es gibt verschiedene Arten von Schriftlizenzen, von denen einige pro Benutzer, einige pro verwendeter Zeit und andere eine einmalige Gebühr erheben. Markenagentur Blaues Ei Geben Sie eine gute Aufschlüsselung davon.
Bei der Auswahl der Schriftarten ist es wichtig, dass wir die finanziellen Auswirkungen berücksichtigen, die sich daraus ergeben, sowie die Fähigkeit der Schrift, im Web zu rendern. Wenn die Budgets knapp sind, mögen Open Source-Lösungen Google Fonts bieten Hunderte von Schriftarten an, die kostenlos verwendet werden können. Siehe auch die beste kostenlose Schriftarten für Designer.
17. Schreiben Sie Ihre Schnittstellen
Wenn wir eine Benutzeroberfläche bis auf die Knochen zurückziehen, die Farben, Schriftarten, Bilder und Animationen entfernen, bleibt uns letztendlich eines übrig. Kopieren. Es ist verlockend, direkt zum visuellen Aspekt des Interface-Designs zu springen und Lorem Ipsum und Platzhaltertext einzufügen. Wenn wir uns jedoch die Zeit nehmen, zuerst unsere Interfaces zu schreiben, können wir den Gesamtton besser entwickeln und über die Botschaften und Geschichten nachdenken, die wir sind mündliche Kommunikation mit unserem Publikum.
Wir können den Fluss unserer Seiten wirklich verstehen, wenn wir die Kopie isoliert lesen, und haben so die Möglichkeit, unsere Worte mit visuellen Elementen zu begleiten, die den Kern dessen, was wir sagen wollen, wirklich unterstützen und durchsetzen.
18. Gegebenenfalls an Bord
Onboarding ist laut „der Prozess, der die Wahrscheinlichkeit erhöht, dass neue Benutzer bei der Einführung Ihres Produkts erfolgreich werden“ UserOnboard Als UI-Designer spielen wir eine Schlüsselrolle bei der Entscheidung, wie wir unseren Benutzern unsere digitalen Produkte und Dienstleistungen am besten vorstellen können.
Sprachlern-App Duolingo Verwendet einen Onboarding-Ablauf, mit dem Benutzer direkt in die aufgabenbasierte Benutzeroberfläche gelangen und sich mit den Funktionen des Produkts vertraut machen und die Funktionsweise testen können, bevor sie zur Anmeldung aufgefordert werden. Der Benutzer hat die Möglichkeit, das Produkt zu testen, bevor er sich zur Erstellung eines Kontos verpflichtet.
Wenn unsere Benutzeroberflächen unvermeidbare, komplizierte oder unbekannte Interaktionen enthalten, müssen wir den Benutzern den Umgang mit ihnen beibringen, unabhängig davon, ob dies durch Diashows, erklärende Videos oder Tutorial-Overlays erfolgt. Wenn Sie den Benutzern im Rahmen des Onboarding oder der Einführung ein Beispiel dafür geben, wie es funktioniert, wird dies zu weniger Verwirrung führen, sobald sie vollständig in die Erfahrung eingetaucht sind, und die Akzeptanz bei denjenigen fördern, die Wert im Angebot im Voraus sehen.
19. Beziehen Sie Ihre Entwickler ein
Als die Leute, die am Ende unsere Entwürfe erstellen werden, lohnt es sich, unsere Entwickler so früh wie möglich in ein Projekt einzubeziehen. Designer erstellen die Dinge, die Benutzer sehen, aber Entwickler verbessern das Erlebnis der Benutzeroberfläche, indem sie die Leistung maximieren, die Ladezeiten von Seiten beschleunigen und optimieren, was unter der Haube geschieht.
Durch die kontinuierliche Einbeziehung von Entwicklern während des gesamten Entwurfsprozesses können sie Eingaben in das Verhalten der Benutzeroberfläche über den visuellen Aspekt hinaus vornehmen und so mehr Informationen darüber liefern, wie technisch die Benutzeroberfläche ist Slack Magic Link kann verwendet werden, um unsere Schnittstellen so mühelos wie möglich zu bedienen.
20. Verwendet ein Design-System
Die Gewährleistung der Konsistenz über unsere Website oder Anwendungsoberflächen hinweg kann eine Aufgabe sein, wenn mehrere Designer beteiligt sind, und es kann häufig zu unzähligen Variationen derselben UI-Komponenten kommen, was bedeutet, dass die Arbeit im gesamten Projekt repliziert wird. Gemäß InVision Ein Konstruktionssystem ist „eine Sammlung wiederverwendbarer Komponenten, die sich an klaren Standards orientieren und zu einer beliebigen Anzahl von Anwendungen zusammengesetzt werden können“.
IBMs Carbon Design System Bietet beispielsweise ein umfassendes Repository mit Assets, Codefragmenten und Dokumentationen, auf das Designer und Entwickler bei der Arbeit an UI-Projekten zugreifen können, um sicherzustellen, dass das Designteam schneller und intelligenter miteinander arbeiten kann. Eine Art Entwurfssystem oder zumindest eine Musterbibliothek mit allen UI-Komponenten innerhalb eines bestimmten Projekts sollte verwendet werden, um unsere Schnittstellen konsistent, die Wiederverwendbarkeit von Assets und die Wartung zu vereinfachen.
21. Bereinigen Sie die Designdateien
Ich liebe es oder hasse es, einige Designer arbeiten einfach chaotisch, und während dies während des kreativen Prozesses sinnvoll ist, kann es frustrierend sein, zum ersten Mal eine Designdatei in die Hand zu nehmen und festzustellen, dass wir viel Zeit in die Ausarbeitung investieren müssen Auf welcher Ebene lebt jedes Element?
Monzo hat festgestellt, dass „wir von der ersten .sketch-Datei, die wir bei Monzo erstellt haben, darauf geachtet haben, unsere Designdateien sehr übersichtlich zu organisieren. Und da wir von einem einzelnen Designer zu einem 13-köpfigen Team herangewachsen sind, hat sich die Aufrechterhaltung einer vernünftigen Designumgebung wirklich ausgezahlt. ' Wenn Sie sich die Zeit nehmen, um unsere Designdateien zu bereinigen, indem Sie unsere Ebenen, Zeichenflächen und Ordner benennen, wird es für jeden Designer (einschließlich unseres zukünftigen Selbst) viel einfacher, sie aufzunehmen und zu bearbeiten. Ihre Entwickler werden es Ihnen auch danken!
Dieser Artikel wurde ursprünglich in Ausgabe 288 von veröffentlicht Webdesigner . Ausgabe 288 kaufen oder Abonnieren Sie hier .
Weiterlesen:
