Beim Betreten einer Welt des Produktdesigns wird man unweigerlich mit den Wörtern UI und UX konfrontiert, die sehr häufig herumgeworfen werden. UI und UX werden von den meisten Menschen synonym verwendet, aber die Begriffe haben unterschiedliche Bedeutungen. Sowohl UI als auch UX sind für ein Produkt oder ein digitales Produktdesign notwendig. Es hilft dabei, die Produkte für den Menschen attraktiv zu machen.
Betrachten Sie den Schnitt zwischen diesen Konzepten in der folgenden Tabelle.
|
Vergleichsparameter |
UI |
UX |
|
Zweck |
Die Benutzeroberfläche oder UI ist erforderlich, um die visuellen Aspekte eines Produkts zu bedienen, die dem Benutzer eine reibungslose Interaktion ermöglichen. |
User Experience oder UX erzählt die Geschichte der Erfahrung eines Benutzers mit einem Produkt und dem Unternehmen als Ganzes. |
|
Bedeutung |
UI legt mehr Wert auf eine ästhetische Produkttypografie mit attraktiven Farben. Außerdem konzentriert es sich auf die Bereitstellung visueller und interaktiver Elemente. |
UX ist nicht auf die visuellen und interaktiven Elemente beschränkt. Es umfasst die gesamte Benutzererfahrung und Benutzerfreundlichkeit des Produkts und des Unternehmens. |
|
Types |
UI-Designer zielen darauf ab, ein visuell ansprechendes digitales Produkt zu erstellen. Websites und digitale Werbung sind einige der Produkte von Ui-Designern. |
UX-Design beschränkt sich nicht nur auf digitale Bildschirme und Produkte. Die Benutzererfahrung gilt auch für physische Produktdesigns. |
Regeln für gutes UI-Design
Vorbei sind die Tage der Geocities-Websites mit ihrem fest codierten, sich nie ändernden HTML. Websites und Apps sind heute dynamisch und interaktiv. Unsere Aufgabe als Designer ist es, dafür zu sorgen, dass die Schnittstelle, über die sie mit unserem Web-UI-Design interagieren, so ideal wie möglich ist. Glücklicherweise gibt es einige fast universelle Regeln, die helfen können. Wir haben die unserer Meinung nach besten Designprinzipien zusammengestellt, damit Sie alle Ihre zukünftigen Webdesign-Projekte verbessern können.
Machen Sie alles, was der Benutzer benötigt, leicht zugänglich
Ob es sich um eine Reihe von Design-Tools für Webdesign-Apps, das Inventar für eine Figur in einem Videospiel, eine Tabellenkalkulation oder irgendetwas anderes handelt, wenn der Benutzer nicht findet, was er will, prallt er von Ihrer Software ab. Registerkarten machen Dinge zugänglich. Auch Shortcuts und Hover-Tooltips.
Wir haben uns zum Beispiel für die Verwendung von Tabs entschieden, um Divi zu organisieren. Alle Tools, die Sie benötigen, befinden sich direkt im Builder, getrennt nach Kategorien. Symbolleisten sind ähnlich zugänglich. Wenn Sie WordPress verwenden, bietet Ihnen die Admin-Symbolleiste die Möglichkeit, schnell zum Post-Editor, zum Design-Anpasser, zu Plugin-Einstellungen usw. zu gelangen. Die Optionen sind klar gekennzeichnet, und Sie müssen sie nicht suchen.
Ein weiteres Beispiel sind die Optionen Hilfe/Support/Kontakt. Beim Entwerfen einer Benutzeroberfläche, sei es für eine mobile App, Web-Apps, WordPress-Websites oder irgendetwas anderes, müssen Ihre Benutzer immer die Schaltfläche „Hilfe“ (oder die Schaltfläche „Support kontaktieren“) finden. Sie müssen sich unbedingt irgendwann mit Ihnen in Verbindung setzen. Deshalb müssen Sie immer darauf achten, die Hilfe-Schaltflächen vorne und in der Mitte zu platzieren.
Darüber hinaus erscheint das Hilfefenster mit einem Video-Tutorial zu jeder Funktion, mit der Sie arbeiten. Durch die Einbeziehung dieses In-Moduls wird Divi weitaus zugänglicher und weniger frustrierend. Als Teil der Benutzeroberfläche ist der Ort für die Hilfe außerdem im gesamten Produkt konsistent.
Seien Sie konsequent
Wie wir gerade gesagt haben, ist es wichtig, dass die Feature-Platzierung innerhalb Ihrer Benutzeroberfläche konsistent ist. Aber Sie sollten sich auch Sorgen machen, dass Ihre Benutzeroberfläche auch im gesamten Produkt funktioniert und konsistent aussieht. Haben Sie das Menü nicht oben auf einer Seite und unten auf einer anderen. Ordnen Sie die Menüpunkte nicht jedes Mal neu an, wenn sie geladen werden. Stellen Sie sicher, dass Ihre Benutzer wissen, wo sich Dinge auf Ihrer Website befinden. Wenn Sie ein Kontaktformular unter Ihren Blog-Beiträgen haben, entscheiden Sie sich nicht, es wegzulassen. Benutzer werden es bemerken und verblüfft sein.
Konsistenz umfasst auch Ihre Schriftarten und das Design sollte von Seite zu Seite funktionieren. Tauschen Sie Header-/Body-Fonts nicht von Seite zu Seite aus.
Befolgen Sie Designstandards
Das alte Sprichwort, wenn es nicht kaputt ist, repariere es nicht, gilt hier. Es besteht wirklich keine Notwendigkeit, etwas zu revitalisieren, wenn der Standard funktioniert. Das reicht von der Verwendung von Symbolen bis hin zur Standardplatzierung von Elementen. Sie möchten nicht gegen die Erwartungen Ihrer Benutzer verstoßen. Die Leute wissen, dass Fragezeichen (?) Hilfe anzeigen. Verwenden Sie also kein Ausrufezeichen (!). Wenn Sie möchten, dass Benutzer Ihr mobiles Menü finden, verwenden Sie das Hamburger-Symbol (die drei gestapelten Linien) und kein Raster.
Denken Sie an Suchleisten. Sie befinden sich auf den meisten Websites an ähnlichen Stellen: oben in der Seitenleiste oder am Ende des Kopfzeilenmenüs. Wenn nicht vorhanden, in der Mitte des oberen Abschnitts der Seite. Wenn Sie sich dafür entscheiden, das einzige Suchfeld am unteren Rand Ihrer Seitenleiste, in den Seitenfußzeilen oder unter dem Text Ihrer Blog-Posts einzufügen, wissen die Leute nicht, wo sie suchen sollen. Auch wenn Sie es mit dem Standard-Lupensymbol identifizieren.
Es ist nichts falsch daran, über den Tellerrand hinaus zu denken und sich für ein neues und innovatives Design zu entscheiden, aber das sollte nicht bedeuten, dass das Design schwer zu verwenden ist.
Elementarhierarchie-Angelegenheiten
Nein, wir meinen nicht, dass entweder Erde, Wind, Wasser oder Feuer der Boss der anderen ist. Wir meinen, dass die Elemente auf Ihrer Seite eine klare Hierarchie haben müssen, sowohl für den Nutzen als auch für die Art und Weise, wie der Benutzer die Seite sieht. Grundsätzlich möchten Sie sicherstellen, dass sich die wichtigsten Funktionen ganz oben auf den jeweiligen Seiten befinden. Darüber hinaus kann diese Art von Hierarchie den Benutzer organisch auf der Seite nach unten führen und den Benutzer durch Ihren Dienst führen.
Große Elemente, die im Laufe des Prozesses kleiner werden, weisen auf Wichtigkeit und Reihenfolge hin. Ebenso Farbe und Kontrast. Die Verwendung von Leerzeichen ist ebenfalls wichtig, da Unordnung den Fortschritt des Benutzers aufhalten und den Blick vom Zweck der Seite ablenken kann. Klare Linien, viel Platz und gut definierte Elemente können Ihren Benutzern visuell anzeigen, wie sie sich ohne Dokumentation oder Anmerkung durch Ihre Benutzeroberfläche bewegen können.
Eine anständige Faustregel ist, dass die Dinge von links nach rechts und von oben nach unten fließen sollen.