Grobkonzeption des User Interfaces mittels Wireframing

User
Interface
Design.

Icon User Interface Design white Designsensor AG

Wireframing

Ohne Struktur keine Architektur.

Digitale Produkte benötigen einen Bauplan. Diesen Bauplan lässt sich am schnellsten und einfachsten mit Wireframes entwickeln.
Wireframes sind schematische Darstellungen eines digitales Produkts. Es sind Layouts ohne konkrete visuelle Gestaltung, reine Drahtgittermodelle, die die Platzierung von Elementen wie Navigation, Orientierungshilfen, Content des späteren Produktes zeigen.

Teilen macht Freude

Grobkonzeption des User Interfaces mittels Wireframing

Interface Design Methode Wireframing

Bei der Gestaltung von Mensch-Maschine-Schnittstellen dient das Interface als Kommunikationsmittel zwischen Nutzer, Computer und Realität. Mit den Mitteln des Informationsdesigns gilt es, komplexe Informationen und Sachverhalte möglichst verständlich darzustellen, so dass diese vom Nutzer effektiv und effizient aufgenommen und verarbeitet werden können.

Folgende Schritte helfen beim Erarbeiten einer klaren groben Struktur der Raumaufteilung:

  1. Wahl des Arbeitsbereichs
  2. Festlegen des Viewports
  3. Raumaufteilung (zum Beispiel Spaltenaufteilung oder Module).
  4. Anordnen der Bilder, Infografiken, Charts …
  5. Anordnen der Textelemente (immer genügend Reserve einrechnen für Sprachadaptionen und Skalierbarkeit).
  6. Sicherstellen der Registerhaltigkeit resp. der (typografischen) Grundrasters.
  7. Anordnen zusätzlicher Elemente, die das Design der Anwendung verbessern (Trennlinien, Schmuckelemente etc.).
  8. Festlegen typografischer Details

Image-Elemente, Orientierungs-Elemente, Navigations-Elemente und Content-Elemente

Um ein wenig Struktur in die Wireframes rein zu bringen, empfiehlt es sich, bereits in dieser Phase die späteren Inhalte in folgende vier Gruppen zu unterteilen und diese farblich unterschiedlich zu kodieren:

Image-Elemente

Platzierung der Elemente, die dem Nutzer Auskunft über den Absender geben wie Logos, Produktlabels, Adressen etc.

Orientierungs-Elemente

Bei der Anordnung der Interface Elemente auf dem Screen muss berücksichtigt werden, dass der Mensch an unbekannten Orten nach Vertrautem Ausschau hält, um auf dieser Basis weitere Informationen wie derzeitigen Standort, Richtung und Entfernung seines Ziels ableiten zu können. Bereits in Wireframes kann man wichtige Orientierungspunkte dort platzieren, wo der Besucher hinsieht und sie erwartet. Primär geht es darum, die Orientierungselemente so zu gestalten, um den Aufbau einer «kognitiven» Landkarte zu unterstützen und so die Orientierung zu erleichtern.

Navigations-Elemente

Die Platzierung und Kodierung der Navigationselemente ist eine besonders wichtige Aufgabe bei der Entwicklung einer Anwendung, denn die Navigation macht das Produkt für den Benutzer erst nutzbar. Sie ist sozusagen der Türöffner zu den Inhalten und Funktionen. Deshalb ist es notwendig, dass die Navigation stets verfügbar ist und ein hohes Mass an Usability aufweist. Zudem sollte sie unmittelbar verständlich (selbstbeschreibungsfähig), den Erwartungen der Nutzer entsprechen (erwartungskonform und konsistent) und den unterschiedlichen Nutzer ermöglichen, ihre Ziel auf unterschiedlichen Wegen zu erreichen (Steuerbarkeit). Welche Navigationskonzepte sich eignen, ist bei jedem Projekt neu zu prüfen und hängt vor allem von den definierten Persona, der Struktur der Anwendung, dem Thema und der Navigationsebene ab.

Content-Elemente

Alle Medienobjekte wie Texte, Bilder, Audio(player), Videos, Animationen, Dokumente usw.
Berücksichtigen Sie dabei folgende Punkte bereits beim Wireframing:

  • Texte: genügend Breite Spalten,damit der spätere reale Text sinnvoll dargestellt werden kann
  • Bilder: Proportionen (1:1, 4:3, 3:4, 16:9 etc.)
  • Videos: Proportionen, Formate und Grössen

Erste low fidelity-Prototypen auf Basis der User Journey

Ein Wireframe / Drahtgittermodell ist eine low fidelity Darstellung eines (Screen) Designs.
Es zeigt auf abstrahierte Weise

  • Die wichtigsten Gruppen von Inhalten (was?)
  • Die Struktur der Informationen (wo?)
  • Eine Beschreibung und grundlegende Visualisierung der Schnittstelle Nutzer – Interaktionen ( wie?)

Wireframing ist eine spezielle Art zu zeichnen mit dem Ziel, komplexe Ideen mit minimalem Aufwand zur Bewertung der Interaktionskonzepte zu prüfen.

Wireframes sind nicht nur bedeutungslose Gruppen von grauen oder farbigen Kästen, obwohl sie genau so aussehen. Betrachten Sie sie als das Rückgrat des späteren Designs, die uns beim Gestalten daran erinnern, dass sie die Platzhalter aller wichtigen Elemente des Endproduktes darstellen .

Skizzieren auf Papier ist ein low-fidelity-Ansatz, der jeder machen kann, da keine speziellen Werkzeuge oder Erfahrung erforderlich sind. In den meisten Fällen wird dieses Vorgehen in den frühen Phasen eines Design-Prozesses verwendet. Skizzieren ist ein schneller Weg, um grobe Mock-ups von Design-Ansätzen und Konzepten zu erstellen und erste Feedbacks von Nutzern zu bekommen. Paper Prototyping ist bei der Ideenfindung und Konzeption ideal.

Die bestem Ideen starten mit einem Wireframe

UI-Stencil bietet Tools für alle, die es gerne etwas genauer lieben

www.uistencils.com

Gestaltgesetze
Nächster Beitrag