Design in 3 einfachen Teilen sehen, die es entwicklungsfreundlich machen

Der Zweck dieses Artikels ist nicht, Entwicklern Design beizubringen (kein Schaden, wenn Sie jedoch lernen möchten. Ich überlasse es Ihnen vollständig). Die Idee ist, die Entwürfe auf eine Weise zu sehen, die freundlicher für Sie ist als ein mysteriöses Objekt, mit dem Sie zu kämpfen haben. Wenn Sie das Muster verstehen, das das Designteam Ihnen präsentiert hat, sind Sie viel besser dafür gerüstet, damit zu arbeiten. In den meisten Fällen können Sie sich dem Design mit einer unvergleichlichen Klarheit nähern, wenn Sie nur das Design in seinen zerlegten, einfachen Komponenten sehen. Dadurch wird das Design für Sie viel aussagekräftiger. Sie werden es zu schätzen wissen, was in der Erstellung steckt, und mit dieser Einsicht können Sie es mit viel größerer Effektivität angehen. Vielleicht haben Sie keine Runden mehr mit der Qualitätssicherung. Mit Design- und QA-Teammitgliedern werden Sie wahrscheinlich die besten Freunde.

Liebe Entwickler, sehen Sie Design nicht als Monster, das Ihren Schlaf ruiniert und Ihr Leben zur Hölle macht. Ihr Ziel ist es, Ihrer bereits geleisteten Arbeit mehr Bedeutung, Struktur und Schönheit zu verleihen.

Da ich als Designer Ihre technischen Fähigkeiten benötige, um die Entwürfe in nützliche und aussagekräftige Produkte umzusetzen, möchte ich Ihnen den Zugriff auf Entwürfe so einfach wie möglich machen. Hier drei Dinge, die die Monstrosität des Designs für Sie in drei einfache, unvergessliche Komponenten aufteilen: Inhalt, Layout, Interaktion. Obwohl es für Designer noch viel mehr zu entwerfen gibt, um zu verstehen und zu kreieren - wie ein emotionaler Teil davon, die daraus zu ziehende Erfahrung, Produktivität und Effizienz, die durch Entwürfe erzielt werden, muss die Entwicklung nicht den Kopf darüber bewegen, wenn sie sich anziehen nicht wollen.

Wenn Sie den Zweck dieser Teile kennen und wissen, was damit schief gehen kann, können Sie sie möglicherweise gleich beim ersten Mal wieder in Ordnung bringen. * Wenn Sie bereits Profi sind, können Sie wahrscheinlich die Beschreibung und den Zweck überspringen und zu den Teilen "Was kann schief gehen?"

1. Inhalt

Alles, was Sie im Design lesen und verstehen können, kann als Inhalt gekennzeichnet werden. Die Wörter, die erklären, wie man durch die Anwendung navigiert, die Sätze, die die verschiedenen Aspekte des Geschäfts auf einer Website beschreiben. Die Daten, die sowohl eingegeben als auch ausgegeben werden, sind die Essenz der Anwendung, die dabei hilft, die Welt zu verstehen. Die Bilder (real und grafisch) und Symbole unterstützen die Wörter und Daten, um den gesamten Inhalt einfacher und interessanter zu gestalten.

> Zweck: Dieser Teil des Designs ist der König. Es bildet das Fundament des Produkts, das gebaut wird. Ohne das gibt es keine Bedeutung.

Sämtliche Inhalte müssen stets fehlerfrei dargestellt werden.

> Was kann hier schief gehen: Der Inhalt kann oft verzerrt und beschädigt werden, wenn Code darauf angewendet wird. Sätze können durch Tippfehler, falsche oder verpasste Satzzeichen, falsche Groß- und Kleinschreibung, unerwünschte Leerzeichen zwischen den Zeichen oder Brüche zwischen Wörtern und Zeilen beschädigt werden. Es kann manchmal auf dem Bildschirm ausgeblendet oder unzugänglich werden. Die Bilder können unerwünscht beschnitten, gequetscht, gesprengt oder verkleinert werden. Die Daten werden möglicherweise wiederholt. Möglicherweise geht es verloren oder wird nicht gespeichert. Es kann in einem anderen Teil der Anwendung falsch angezeigt werden. Unbeabsichtigte Daten werden möglicherweise angezeigt.

Das Größte, was hier schief gehen kann, ist, dass das Design kaputt geht, wenn andere Inhalte als das Design verwendet werden.

Beispiel: Tippfehler, Zeilenumbruch, Datenwiederholung, fehlende Daten

2. Layout

Die Art und Weise, in der der Inhalt auf dem Bildschirm platziert und positioniert wird, ist das Layout des Produkts. Es ist der Abstand des Inhalts von den Bildschirmrändern und voneinander. Es ist die Ausrichtung, die Größe des Inhalts. Oft werden zusätzliche Elemente verwendet, um die Platzierung von Inhalten wie Linien, Formen, Schatten usw. zu verbessern.

> Zweck: Stellen Sie sich den gesamten Inhalt vor, der gerade auf dem Bildschirm angezeigt wird, ohne darüber nachzudenken, welcher Inhalt welchen Platz und welche Position auf dem Bildschirm einnimmt. Kannst du es verstehen?

> Was kann hier schief gehen: Es ist nicht schwer, sich ein Bild zu machen, wenn die Platzierung um ein Vielfaches verschoben ist. Aber die Dinge laufen meistens im kleinsten Sinne schief, wo das Layout fast in Ordnung aussieht, aber nicht das richtige Gefühl vermittelt, dass es sollte. Die Ausrichtung ist möglicherweise nur um ein paar Pixel versetzt, oder viele Elemente sind möglicherweise nicht an einer Seite ausgerichtet. Der Abstand zwischen verschiedenen Inhalten ist möglicherweise nicht auf dem gesamten Bildschirm gleich. Die Breite der Sätze oder die Größe der Bilder werden möglicherweise nicht korrekt angezeigt. Inhalte können sich überlappen oder ineinander laufen.

Beispiel 1: Ausrichten um einige PixelBeispiel 1 korrigiertBeispiel 2: Textbreite, Ausrichtung, Abstand zwischen Text und Bildgröße.

3. Interaktion

Dies ist am einfachsten zu erklären und führt zu den meisten Fehlern. Wenn ein Benutzer auf dem Bildschirm schwebt, klickt oder tippt, schüttelt, dreht oder über den Bildschirm streicht, um auf Inhalte zuzugreifen, kann er in den Interaktionskorb gelegt werden. Verknüpfungen, Schaltflächen, Eingabeformulare, Symbole und Anweisungen auf dem Bildschirm bilden die Triggerpunkte für Interaktionen.

> Zweck: Benutzern ermöglichen, voranzukommen und den Endpunkt zu erreichen, um etwas zu erreichen oder zu lernen.

> Was kann hier schief gehen: Wenn hier etwas schief geht, behindert dies den Benutzerfluss, um zum nächsten Inhalt zu gelangen. Die Links fehlen möglicherweise, wenn ein Benutzer klickt, aber es passiert nichts. Sie führen möglicherweise dazu, dass Benutzer zu einer nicht gefundenen Seite oder zu einem unerwarteten Inhalt irregeführt werden. Die Zugänglichkeit des anklickbaren Bereichs kann beispielsweise beeinträchtigt sein. Anstelle der vollständigen Schaltfläche kann nur der Text oder ein anderer Teil des Bildschirms angeklickt werden. Die Schwebezustände werden nicht konsistent implementiert. Der Übergang von einem Bildschirm zum anderen ist nicht reibungslos. Das Layout des Bildschirms ändert sich, wenn Sie auf klicken, um andere Inhalte anzuzeigen. Nach der Interaktion mit dem Bildschirm ist kein vollständiger Inhalt verfügbar. Die Antwortrate des Bildschirms kann verzögert sein, wenn Benutzer mit der Maus über etwas fahren oder darauf klicken.

Dennoch ist es für die Entwickler wichtig zu verstehen, was das Produkt den Anwendern hilft.

Entwickler müssen sich darüber im Klaren sein, welche Leistung ihr entwickeltes Produkt für die Benutzer erbringt.

Mit diesem Wissen werden Sie in der Lage sein, Ihre Ausführung in den oben aufgelisteten Bereichen gründlicher zu hinterfragen, und zwar in Anlehnung an mögliche Fehler. Im Gegenzug wird Ihre Ausgabe von Ihrem Team und Ihren Benutzern geliebt.

Dali Atomicus, Salvador Dali

Sie können auch einige weitere praktische Tipps (zur Benutzeroberfläche) lesen, um das Design für eine bessere Entwicklung zu nutzen. Dies zeigt einige Beispiele, bei denen die Implementierung des Designs speziell mit der Benutzeroberfläche schief gehen kann.