Warum Wireframes im Designprozess wichtig sind
Veröffentlicht: 2017-01-29Wireframing ist eine schnelle und effektive Methode, um Usability-Probleme frühzeitig in Ihrem Designprozess zu erkennen.
Wenn Sie ein Webdesigner sind, bin ich sicher, dass Sie mit Wireframing vertraut sind, und wenn Sie wie ich ein User Experience (UX)-Designer sind, verbringen Sie wahrscheinlich einen großen Teil Ihrer Zeit damit, Wireframes entweder von Hand mit Papier und Bleistift oder mit Hilfe von zu erstellen ein digitales Tool wie Proto.io .
Dieser Artikel richtet sich an diejenigen unter Ihnen, die den Begriff schon einmal gehört haben und mehr darüber erfahren möchten, warum Wireframes eine wichtige Rolle in Ihrem Designprozess spielen sollten. Wir werden auch behandeln, wie sie am besten in Gesprächen mit relevanten Stakeholdern und Kunden eingesetzt werden können.
Beginnen wir mit der Beantwortung der Frage „Was ist ein Wireframe?“
Ich denke gerne an ein Drahtgitter wie ein Skelett der Seite. Dieses Skelett ist eine zweidimensionale Darstellung der Benutzeroberfläche einer Seite, die den Abstand der Elemente auf der Seite zeigt, wie Inhalte priorisiert werden, welche Funktionen verfügbar sind und wie Benutzer mit der Website interagieren werden. Sie spielen auch eine wichtige Rolle bei der Verbindung der Informationsarchitektur mit den visuellen Aspekten des Designs, indem sie Wege zwischen den verschiedenen Seiten zeigen. Wireframes sind absichtlich frei von Farbe, Grafiken und stilisierten Schriftarten.
Wenn wir kein starkes Grundgerüst haben, haben all die Dinge, die wir darauf setzen, wie die Funktionalitäten oder der Stil, wirklich keine Chance.
Denken Sie an den Prozess des Baus eines neuen Hauses. Wenn Sie Ihre ganze Energie auf das Innendesign konzentrieren, wie die Farben der Wände und den Stoff für die Sofas, und nicht auf die Blaupause der Struktur des Hauses, glauben Sie, dass es seinen Zweck erfüllen wird? Wahrscheinlich nicht. Es ist kontraintuitiv, mit der Innenarchitektur und nicht mit der Grundstruktur des Hauses zu beginnen.
Was sollte nicht in einem Wireframe enthalten sein?
Es ist wirklich wichtig , Ihre Wireframes einfach zu halten. Das liegt daran, dass Wireframing, wie oben erwähnt, zeigen soll, wie Elemente auf der Seite angeordnet sind und wie die Site-Navigation funktionieren soll. Zu viele Farben oder Bilder können den Leser davon ablenken, sich auf das Layout und die Navigationselemente zu konzentrieren. Achten Sie darauf, die Verwendung von Farben, Bildern, Grafiken und stilisierten Schriftarten zu eliminieren oder zu reduzieren, um Ihr Ziel zu erreichen, eine einfache visuelle Darstellung des Skeletts darzustellen.
Beachten Sie Folgendes:
Für dich empfohlen:
Wie Metaverse die indische Automobilindustrie verändern wird
Was bedeutet die Anti-Profiteering-Bestimmung für indische Startups?
Wie Edtech-Startups Indiens Arbeitskräften helfen, sich weiterzubilden und zukunftsfähig zu werden ...
New-Age-Tech-Aktien in dieser Woche: Zomatos Probleme gehen weiter, EaseMyTrip-Posts steigen...
Indische Startups nehmen Abkürzungen bei der Jagd nach Finanzierung
Digitale Marketingplattform Logicserve Bags INR 80 Cr-Finanzierung, Umbenennung in LS Dig...
- Behalten Sie Ihre Farben bei Grau, Weiß und Schwarz.
- Verwenden Sie eine generische Schriftart. Dadurch wird verhindert, dass der Benutzer vom Stil der Typografie abgelenkt wird. Die Anzeige der Informationshierarchie durch die Schriftart ist jedoch immer noch wichtig und kann durch einfaches Ändern der Schriftgröße und der Angabe, ob sie „normal“, „ kursiv “ oder „fett“ ist, angezeigt werden.
- Vermeiden Sie stark stilisierte Grafiken und Bilder. Stattdessen schlage ich vor, Rechtecke und Quadrate als Platzhalter zu verwenden und ein „x“ durch die Mitte der Box hinzuzufügen, um anzuzeigen, wo das Bild platziert wird. Sie können dasselbe auch tun, um anzuzeigen, wo Videos mit einem Dreieck als Wiedergabeschaltfläche in der Mitte des Felds positioniert werden.
Die 5 Hauptgründe für die Verwendung von Wireframes
Wireframes sind ein großartiges Werkzeug, um Ihre Kunden dazu zu bringen, sich früh im Designprozess auf das zu konzentrieren, worüber sie nachdenken sollen.
Wireframes sind eine großartige Möglichkeit, Kunden und Stakeholder durch die Struktur Ihrer Designs zu führen, ohne ihnen die Möglichkeit zu geben, sich von Farben und Bildern ablenken zu lassen. Wenn das Ziel Ihres Meetings darin besteht, Ihre Kunden dazu zu bringen, darüber nachzudenken, welche Elemente auf der Seite sein sollten und wie diese Elemente auf der Website funktionieren, ist es viel einfacher, einfach Farben, Bilder und stilisierte Seiten zu entfernen. Sie können dann ganz einfach Feedback von Ihren Kunden und Stakeholdern zur Navigation der Website und zur Zuordnung von Elementen auf den Seiten einholen. Anstatt sich darauf zu konzentrieren, dass die Farbe Rot als Call-to-Action-Button „einfach nicht für sie funktioniert“. Klingt komisch, passiert aber oft!
Mit Wireframes können Sie die Funktionalität der Seiten abbilden, Probleme frühzeitig erkennen und später Zeit für Überarbeitungen sparen.
Es ist viel weniger schmerzhaft, Änderungen an einem Wireframe vorzunehmen als an einem High-Fidelity-Mockup mit vielen Designelementen. Die Überarbeitung eines High-Fidelity-Modells nimmt viel mehr Zeit in Anspruch, um Änderungen vorzunehmen. Wenn Sie die Zeit investieren, um die Funktionalität der Seiten durch Wireframing früh in Ihrem Designprozess zu durchdenken, werden Sie so glücklich darüber sein, dass Sie das getan haben. Es ist definitiv gut investierte Zeit und sehr effizient.
Mit anderen Worten, eine frühzeitige Abbildung der Funktionalität reduziert das Hin und Her, das oft mit der Entwicklungsphase einhergeht. Es ist definitiv einfacher, die Funktion in einem Wireframe neu zu schreiben, im Vergleich zu einer Webanwendung.
Wireframing bietet Ihnen die Möglichkeit, Ihren Kunden besser kennenzulernen.
Sie werden beginnen, Muster in Verhaltensweisen und Motivationen zu erkennen, je mehr Zeit Sie mit Ihrem Kunden verbringen. Im Laufe der Zeit wird sich das Wissen, das Sie aus ihrem Feedback gewinnen, nur darauf auswirken, wie Sie in Zukunft am besten mit ihnen zusammenarbeiten und wie Sie Ihre Zeit mit ihnen am produktivsten gestalten können. Wireframing ist auch eine großartige Möglichkeit, Ihre Kunden dazu zu bringen, sich zu konzentrieren. Kunden springen gerne fünf Schritte voraus, weil es spannend ist, über das Endprodukt nachzudenken. Aber es wird sich für Sie als sehr lohnend erweisen, die Gelegenheiten für Kunden zu eliminieren, sich vom Nachdenken über Funktionalität und Struktur des Designs ablenken zu lassen.
Wireframing ist ein großartiges Werkzeug, um Feedback zu sammeln und Fehler frühzeitig zu erkennen.
Wenn Effizienz ein Ziel von Ihnen ist, was höchstwahrscheinlich der Fall ist, dann sollten Sie mit Wireframing beginnen. Es kann vorkommen, dass Sie sich aus Zeit- oder Geldgründen unter Druck gesetzt fühlen, sofort mit dem Entwerfen eines High-Fidelity-Modells zu beginnen. Denken Sie daran, dass Sie ohne frühzeitiges Einholen von Qualitätsfeedback später möglicherweise einen mühsameren und zeitaufwändigeren Überarbeitungsprozess erstellen, der alles viel weniger effizient macht.
Wireframes sind eine großartige Möglichkeit, Inhalte zu priorisieren, indem sie dabei helfen, Platzbeschränkungen aufzudecken und die Hierarchie der Elemente auf der Seite zu entwerfen.
Wenn Sie frühzeitig die Möglichkeit haben, die Hierarchie Ihrer Seiten zu visualisieren und die Platzbeschränkungen visuell darzustellen, sparen Sie später viel Zeit, wenn Sie beginnen, die Seiten zu gestalten und mit Inhalt zu füllen. Sie sollten Feedback zu Ihren Wireframes von Stakeholdern sammeln, Dinge auf Ihren Wireframes basierend auf dem erhaltenen Feedback schnell verschieben, erneut Feedback sammeln und iterieren, bis Sie Ihr beabsichtigtes Ziel erreicht haben.
Fazit
Wireframes rücken die Benutzerfreundlichkeit in den Vordergrund und ihre Verwendung ist eine gute Möglichkeit, das Layout von Seiten und die Funktionalität der Elemente auf der Seite zu veranschaulichen.
Die frühzeitige Verwendung von Wireframes im Designprozess zwingt Sie und Ihre Kunden dazu, objektiv auf Benutzerfreundlichkeit, Konvertierungspfade und Elementplatzierung zu achten, und hilft, Fehler frühzeitig aufzuzeigen. All dies führt zu intuitiven, funktionalen und ansprechenden Produkten.
[Dieser Beitrag erschien zuerst im Proto.io-Blog und wurde mit Genehmigung reproduziert.]