Share
Designer vs. Entwickler - es ist ein so altes Argument wie Computer. Die Wahrheit ist jedoch, dass keiner ohne den anderen leben kann. Ein brillantes UI-Design ist ohne Funktionalität ebenso wertlos wie das beste Stück Code mit einem hässlichen, unbrauchbaren Frontend. In diesem ersten Beitrag zu UI-Grundlagen für Entwickler werde ich versuchen, einige einfache Grundregeln zu formulieren, an die sich Entwickler halten können, um sicherzustellen, dass ihre Apps, Vorlagen und Prototypen genauso schön sind wie der Code selbst - und zum Booten geeignet ist.
Denken Sie: Der erste Eindruck ist der letzte Eindruck.
Ausrichtung bezieht sich auf die Position oder Orientierung eines Elements in Bezug auf ein anderes Element oder auf sich selbst. Wenn wir uns auf zwei Elemente beziehen, die aufeinander ausgerichtet sind, bezieht sich die Ausrichtung normalerweise darauf, welche Seite beider Elemente in einer Linie liegt. Im Kontext von Text bezieht sich Ausrichtung auf die Seite, auf der Text in einer geraden Linie verankert ist.
In der Abbildung oben zeigt das zweite Beispiel eines einfachen Formularentwurfs Beschriftungen, die mit Eingabefeldern, die nach links ausgerichtet sind, aufeinander ausgerichtet sind. Dadurch wird sichergestellt, dass die Zuordnung zwischen jedem Label und seinem Eingabefeld klar ist und der Benutzer nicht verwirrt wird, wenn einige Labels zu klein sind, während andere lang sind.
Denken Sie daran: Stellen Sie sicher, dass die Eingabefelder nicht zu weit vom längsten Label entfernt sind. Wenn die Abweichung in der Breite gering ist, versuchen Sie, die Beschriftungen und die Eingabefelder nach links auszurichten.
Für Text ist es ideal, beim Ausrichten für den Bildschirm die linke Ausrichtung zu verwenden. Da die meisten Rendering-Methoden für Bildschirmtypen beim Ausrichten von Text auf beiden Seiten nicht in der Lage sind, den Speicherplatz entsprechend zu verteilen, bleibt die linke Ausrichtung für Text lesbar und gut organisiert. Sie können natürlich die Ausrichtung nach rechts und links verwenden, wenn dies vom Design verlangt wird. Diese sind jedoch normalerweise für Sonderfälle und kleinere Textblöcke reserviert.
Der Hauptzweck einer Benutzeroberfläche besteht darin, die Benutzeroberfläche mit der Anwendung zuzulassen. Ob Sie es glauben oder nicht, ist nicht möglich, wenn Sie dem Benutzer nicht sagen, was er tun muss und in welcher Reihenfolge. Da Sie nicht hinter jedem Benutzer stehen, um ihm dabei zu helfen, muss die Benutzeroberfläche alle Hinweise bereitstellen. Hier sind einige Fragen, die bei der Bewertung zu prüfen sind, ob der beabsichtigte Workflow geeignet ist:
Nehmen wir als Beispiel eine Suchkategorienauswahl auf iStockPhoto. In diesem Fall kann ich entweder alles durchsuchen oder eine bestimmte Kategorie auswählen, um meine Suche auf diese Art von Informationen zu beschränken. Da es in erster Linie darum geht, einen Suchbegriff einzugeben und auf Suchen zu klicken, sollten diese ziemlich offensichtlich sein. Ein möglicher Schritt dazwischen ist die Auswahl einer Kategorie, bei der es sich um eine Dropdown-Liste zwischen dem Suchfeld und der Schaltfläche Suchen handeln kann.
Ein anderes Beispiel ist der Einnahmen / Aufwand-Eingabedialog in der Cashbase-App. Die Felder sind nach dem typischen Arbeitsablauf angeordnet, in dem diese Informationen protokolliert werden: Geben Sie den Betrag (das wichtigste Element) ein, wählen Sie eine Kategorie aus, fügen Sie ggf. eine Notiz hinzu, und klicken Sie auf Hinzufügen. Sekundärinformationen, die viel seltener verwendet werden - wie das Datum, das heute standardmäßig eingestellt ist, und die Option zum Wiederholen oder Abbrechen - sind verfügbar, jedoch viel subtiler.
Verwandte Elemente in einer Benutzeroberfläche sollten zusammen gruppiert werden. Das klingt nach gesundem Menschenverstand, wenn ich es erwähne, aber es wird nicht immer gut verstanden. Der Grund dafür, dass alle Seitennavigationslinks auf den meisten Websites in einer einzigen horizontalen Leiste angeordnet sind, besteht darin, dass der Benutzer die Beziehung auf einen Blick erkennen und auswählen kann, ob er mit ihnen ohne Verwirrung interagieren möchte.
Schauen wir uns dieses Beispiel von Google Mail an - eine App, die regelmäßig verwendet wird. Dies ist die Symbolleiste, die oben angezeigt wird, wenn Sie eine Mail öffnen. Obwohl alle diese Schaltflächen eine Aktion für die geöffnete Nachricht ausführen, werden sie weiter nach ihrem Verhalten gruppiert - Aktionen, die verwendet werden würden, um die Nachricht zu löschen (Archivieren, Spam, Löschen), um die Wichtigkeit der Nachricht zu ändern (wann) mit Prioritätseingang), kennsatzbezogene Aktionen und schließlich ein Dropdown-Menü mit sekundären Optionen.
Ein weiteres Beispiel für eine gute Nutzung der Nähe ist die Optionsleiste in Zootool. Die Symbolleiste am unteren Rand ist in drei Gruppen unterteilt, die jeweils den drei Bereichen der App entsprechen: Die Listenpakete auf der linken Seite, das Mail-Fenster in der Mitte, in dem sich alle Lesezeichen befinden, und der Detailbereich auf der rechten Seite.
Nicht alles in einer Benutzeroberfläche oder irgendein Layout für diese Angelegenheit hat die gleiche Bedeutung wie alles andere. Hierarchie ist die Anordnung von Elementen in einer Weise, die angibt, was in der Reihenfolge höher ist, was als nächstes kommt und so weiter.
Sehen wir uns dieses Beispiel hier an und versuchen Sie herauszufinden, wie die Rangfolge ist. Da alles - Titel, Beschriftungen und Absatztext - gleich aussieht, muss man alles durchlesen, um Sinn zu machen. Wenn die gleiche Benutzeroberfläche nur ein wenig wie unten angepasst wurde, ist der allgemeine Einfluss auf die Lesbarkeit und damit die Benutzerfreundlichkeit der Benutzeroberfläche enorm.
In der Regel sollte die Seitenüberschrift auf dem Bildschirm am größten und am sichtbarsten sein. Es folgen Abschnittstitel, Untertitel und kleinere Beschriftungen. Der Absatztext kann je nach Zweck mehr oder weniger deutlich sein. Es ist auch nicht auf Text beschränkt. Primäre Aktionsschaltflächen können von sekundären Aktionen unterschieden werden, indem sie heller, größer oder ausgefallener gestaltet werden. Eingabefelder für obligatorische Eingaben können offensichtlicher gemacht werden als die anderen. Ich könnte weitermachen, aber ich denke, du verstehst die Idee.
Ein weiterer sehr wichtiger Aspekt bei der Gestaltung von Schnittstellen ist die klare Unterscheidung zwischen Elementen. Natürlich möchten Sie, dass der Text auf dem Hintergrund lesbar ist, der Kontrast geht jedoch über die Verwendung von hellem Text auf einem dunklen Hintergrund oder umgekehrt hinaus. Überschriften und Absatztext sollten klar unterscheidbar sein. Bedienfelder und Navigationsleisten müssen voneinander getrennt werden, damit der Benutzer weiß, was ist. Die Liste geht weiter.
Der Kontrast kann mit einer oder mehreren der folgenden Eigenschaften festgelegt werden:
Dies sollte offensichtlich sein, aber es ist erstaunlich, wie oft die Leute in diesen Punkt geraten. Wenn Ihr Hintergrund hell ist, möchten Sie natürlich, dass der Text dunkel ist, um die Lesbarkeit zu gewährleisten. Obwohl komplementäre Farben theoretisch gut zusammenarbeiten sollten, ist dies nicht immer so einfach. Platzieren Sie hellgrünen Text auf einem roten Hintergrund, und Sie werden wissen, was ich sage.
Die Möglichkeiten hier sind unbegrenzt, daher ist meine erste Empfehlung an alle, die Farben auswählen möchten, eine beliebte Farbpalette von Websites wie Adobe Kuler oder ColourLovers. Sie werden von leidenschaftlichen Benutzern beigesteuert, bewertet und bewertet, die sich normalerweise mit Farbe auskennen. In der Regel werden alle Grundlagen der Farbanpassung und des Kontrasts berücksichtigt. Es ist also nur eine Frage der Entscheidung, welches Farbschema im Kontext Ihrer App funktioniert.
Ein Hinweis zur Vorsicht - seien Sie vorsichtig, wenn Sie mit Farbe über Bord gehen. Sie möchten nicht, dass sie die Nützlichkeit und Benutzerfreundlichkeit Ihrer App überschatten.
Eine andere gute Möglichkeit, Elemente - basierend auf Hierarchie, Kategorisierung oder visuellem Fluss - zu unterscheiden, ist die Verwendung unterschiedlicher Größen. Dies gilt für Text genauso wie für Bilder, Hintergründe und statische oder interaktive Elemente. Sie können beispielsweise die primäre Aktionstaste stärker betonen und die sekundären Tasten vergleichsweise weniger zugänglich machen. Optionale Eingabeaufforderungen können auch kleiner und leichter als die primären Beschriftungen in einem Formular sein.
Die TeuxDeux-App leistet brillante Arbeit, indem sie Farbe verwendet, um zwischen vergangenen, gegenwärtigen und zukünftigen Tagen zu unterscheiden. Da das Layout auf eine Arbeitswoche ausgerichtet ist, werden unterschiedliche Textgrößen verwendet, um sicherzustellen, dass die Namen von Tagen leicht zu identifizieren sind, während die Daten vergleichsweise subtiler sind.
Da der Hauptzweck einer Benutzeroberfläche darin besteht, Benutzern die Interaktion mit der App zu ermöglichen, ist es unbedingt erforderlich, dass die Lernenden intuitiv wissen, was zu tun ist. Als Ersteller der Benutzeroberfläche können Sie leicht vergessen, dass Sie nicht für jeden Benutzer anwesend sind, um ihm mitzuteilen, was er tun soll. Die Benutzer haben auch keine Geduld mehr, um Handbücher und Schnellstartanleitungen zu lesen, bevor sie sich mit einer App beschäftigen. Die Benutzeroberfläche ist erforderlich, um deutlich zu machen, welche Teile davon anklickbar, anfassbar und ziehbar sind - kurz gesagt, interaktiv.
Jeder weiß, wie man einen elektrischen Schalter betätigt, richtig? Die Sache, die jedem klar macht, dass ein Schalter an einem bestimmten Punkt gedrückt werden muss, um den Status zu ändern, wird aufgerufen Erschwinglichkeit. Auf der ebenen Oberfläche eines Bildschirms - Desktop, mobil oder anders - können verschiedene Techniken verwendet werden, damit Benutzer intuitiv auf eine Schaltfläche oder einen Typ in ein Eingabefeld klicken können. Beim Erstellen von Text-Hyperlinks ist das Hinzufügen einer Unterstreichung für den Link der am häufigsten verwendete Standard, obwohl es viele andere kreative Möglichkeiten gibt, dies zu tun.
Hier sind einige Beispiele:
Wenn Sie mit dem Schalterbeispiel gehen, woher wissen Sie, ob ein Umschalten mit dem Schalter das tat, was er tun sollte? Das Licht geht ein oder aus, oder in einigen Fällen hilft ein Licht im Schalter, um zu erkennen, ob der Schalter ein- oder ausgeschaltet ist.
In einer Anwendung kann ein solches Feedback sehr offensichtlich sein, wenn eine Schaltfläche zu einer anderen Seite navigiert oder ein Popup-Fenster öffnet. In Situationen, in denen lediglich Daten im Hintergrund verarbeitet werden, werden Änderungen an den Benutzereinstellungen vorgenommen. Eine Art Feedback-Mechanismus ist wichtig, um den Benutzern mitzuteilen, dass ihre Aktion erfolgreich war. Dies kann so einfach sein wie die Meldung "Ihre Einstellungen wurden gespeichert", eine kurze Benachrichtigung oben auf der Seite oder eine kurze Markierung im Bereich, der aktualisiert wurde.
Wenn Sie in Remember the Milk eine neue Aufgabe hinzufügen, kann diese entweder in der Liste auf derselben Seite angezeigt werden oder einfach im Hintergrund zu einer anderen Liste hinzugefügt werden (wenn die Aufgabe beispielsweise einer anderen Kategorie zugewiesen wurde). Die Rückmeldung für die Aktion erfolgt daher auf zwei Ebenen:
Der Text in Ihrer App - alles vom Logo bis hin zu Titeln, Etiketten und Kopien - ist Ihre primäre Kommunikationsmethode mit den Benutzern. Da Ihre Benutzer auf Informationen über die App oder über diese zugreifen, kann die Art des Typs den Unterschied zwischen Erfolg und Misserfolg ausmachen. Natürlich müssen Titel größer als Text sein, und das Kleingedruckte muss gut sein. Viele andere Entscheidungen beeinflussen jedoch auch, wie Benutzer Informationen konsumieren.
Schritt 1: Definieren Sie Ihre Schriftarten. Es überrascht mich, wie viele Entwickler sich einfach die Mühe machen, die Schriftart zu ändern, in der der Text generiert wird. Die Standardschriftarten ändern sich von Betriebssystem zu Betriebssystem und von Browser zu Browser. Wenn Sie also nicht explizit angeben, welche Schriftart Sie verwenden möchten, wird Ihr Text verwendet sieht in jeder Kombination von Betriebssystem und Browser anders aus. Außerdem ist Times New Roman - das von vielen Browsern noch als Standardschriftart verwendet wird - einfach keine gute Schrift für das Lesen auf dem Bildschirm. Meine erste Empfehlung ist oft, eine serifenlose Schrift zu verwenden, obwohl Georgia oder die neue Cambria-Schrift in Windows 7 auch gut aussehen.
Wenn Sie sich dafür entscheiden, andere als die sicheren, universell verfügbaren Schriftarten wie Arial / Helvetica, Georgia, Tahoma usw. zu verwenden, sollten Sie sicherstellen, dass sie auf allen Plattformen auf ähnliche Weise gerendert werden können. Wenn Flash Ihre bevorzugte Entwicklungsumgebung ist, binden Sie sie gegebenenfalls ein. Verwenden Sie für HTML / JS-basierte Apps @ font-face in CSS oder einen der Web-Font-Services wie Typekit oder Google WebFonts. Denken Sie jedoch daran, dass für diese Techniken die eingebetteten Schriftarten mit zusätzlichen Dateigrößen einhergehen. Wenn Geschwindigkeit und Reaktionsfähigkeit für Sie von größter Bedeutung sind, sollten Sie sich an die Basisschriftarten halten.
Haftungsausschluss: Ja, ich weiß, dass Arial und Helvetica nicht genau gleich sind, aber sie sind für die meisten Benutzer ähnlich genug, um den Unterschied nicht zu bemerken.
Der Abstand zwischen zwei Textzeilen ist der führende. Sie möchten, dass der führende Text Ihres Absatzes (Zeilenhöhe in CSS) mindestens 140% der Schriftgröße beträgt, um sicherzustellen, dass er leicht lesbar ist. Je weniger und Ihr Text wird viel schwieriger zu lesen und - wichtiger noch - durchzuscannen.
Wenn Sie vorhaben, Ihre App in andere Sprachen zu übersetzen - und Sie sollten dies wirklich tun -, sollten Sie die Schnittstelle am besten mit verschiedenen Skripts testen. Zumindest kann der für eine bestimmte Nachricht benötigte Speicherplatz in den verschiedenen Skripts stark variieren. Die ostasiatischen Schriften verwenden im Durchschnitt weniger Wörter, benötigen jedoch eine größere Schriftgröße. Indische (indische) Schriften müssen auch etwas größer sein, um lesbar zu sein, und die Schriftzeichen des Nahen Ostens (wie Arabisch) gehen von rechts nach links anstelle der üblichen linken -nach rechts.
Das war es erstmal. Ich hoffe, dass diese Tipps genügend Grundlagen für Sie enthalten, damit Sie sie sofort in Ihren Projekten anwenden können. Wie bei den meisten designbezogenen Disziplinen gibt es keine festen Regeln, und jeder hat seinen eigenen Standpunkt, wie die Dinge funktionieren sollen. Wenn Sie also mit meinen oben genannten Vorschlägen nicht einverstanden sind - oder auch wenn Sie damit einverstanden sind, aber eine andere Perspektive haben - lassen Sie uns dies in den Kommentaren erfahren.
Als Nächstes nehmen wir all diese Weisheit und versuchen, sie auf eine tatsächliche Schnittstelle anzuwenden. Bleib dran!
Accentsconagua