it-swarm.com.de

UX Style Guide-Techniken

Ich habe kürzlich ein umfangreiches Redesign für ein großes webbasiertes Finanzinstrument gestartet. Um die zukünftige Entwicklung zu unterstützen, plane ich, einen UX-Styleguide zu erstellen, der Best Practices für Dinge wie Formulare, Seitenlayouts, Animationen usw. beschreibt.

Die vorhandene Anwendung ist ein großes Durcheinander von Formularen mit wenig Gruppierung oder Organisation. Ich kann einige Hauptkategorien sehen (Objekt-CRUD-Formulare, statische Daten, Steuerelemente für die Verwaltung von Benutzersitzungen usw.), aber es gibt viele sehr benutzerdefinierte Funktionen, die nicht in die Form passen.

Das Unternehmen, mit dem ich zusammenarbeite, entwickelt in Übersee. Diese Dokumentation soll die zukünftige Entwicklung unterstützen. Ich möchte nicht die erstaunlichste UX aller Zeiten entwerfen, ich möchte nur, dass die Dinge funktionsfähig sind . Was ist der beste Weg, um Designs an entfernte Teams zu kommunizieren?

Hier ist meine Frage:

Was ist der beste Weg, um sich einem großen chaotischen Projekt wie diesem zu nähern? (Hauptgruppen zuerst, dann auf jede benutzerdefinierte Funktion fokussieren? Nehmen Sie die benutzerdefinierten Funktionen überhaupt in die Dokumentation auf?)

18
Sauce McBoss

Beispiel-Style-Guides

Beispielsweise können Sie für Anwendungen, die für Anwendungen gelten, die üblichen Plattform-Stilrichtlinien (z. B. Windows , Apple , Gnome ) für die verwenden Organisation, Probleme und Themen, die Sie möglicherweise haben möchten. Viele Themen in diesen Handbüchern sind für formularorientierte Benutzeroberflächen nicht relevant, aber die meisten Richtlinien für Steuerelemente, Nachrichten und Dialogfelder enthalten Komplimente für Formulare. Es gibt auch Richtlinien für Websites (z. B. sability.gov ), die jedoch für Anwendungen im Allgemeinen weniger nützlich sind.

Was einzuschließen ist

Den grundlegenden Ansatz finden Sie unter Antworten auf Wie haben Sie Entwurfsrichtlinien für Ihre Organisation erstellt? Um Ihre spezifische Frage zu beantworten, unterscheide ich zwischen „Elementen“ oder Teilen einer Benutzeroberfläche (Datensätze, Felder, Layout, Formulare, Befehle und Feedback) und „Funktionen“ (was manche als „Muster“ bezeichnen), die mehrere Elemente zu einer Standardbenutzeroberfläche zusammenfügen, um einen gemeinsamen Schritt in den Aufgaben des Benutzers zu erledigen (z. B. Anmelden, Abfragen, Berichte, Rückgängig machen) , sortieren, zoomen, helfen). Ich beschreibe beide in einem Styleguide.

Mit einem Styleguide soll vermieden werden, dass Sie alles selbst entwerfen müssen. Wenn eine benutzerdefinierte Funktion nur in einer Form vorhanden ist, nehmen Sie sie nicht in den Styleguide auf. Möglicherweise möchten Sie jedoch Komponenten oder Abstraktionen der Funktion einschließen, die im gesamten Tool oder in der Suite häufig verwendet werden.

Die Ergebnisse

Im Idealfall sollte die ultimative Form des Styleguides für Ihre Benutzer am besten geeignet sein - nicht für die Benutzer des Tools/der Suite, sondern für die Entwickler und Designer, die den gestalteten Guide für die Erstellung des Tools verwenden. Ein Styleguide sollte ihre Arbeit erleichtern und nicht erschweren. Wenn es Ihren Benutzern zu schwer fällt, die richtigen Richtlinien für einen bestimmten Fall zu finden, sie zu lernen und zu verstehen oder umzusetzen, werden sie dies nicht tun. Sie können Ihre UX-Kenntnisse anwenden, um die Richtlinien zu liefern, indem Sie Ihre Designer und Entwickler befragen und beobachten, um herauszufinden, was für sie funktionieren wird (in Ihrem Fall können Sie sich auf Telefoninterviews mit Ihren Entwicklern beschränken; besser als nichts).

Dies bedeutet, dass das Produkt möglicherweise mehrere Medien verwendet. Es besteht die Möglichkeit, dass das „Hauptprodukt“ eine Art Hyperlink-Dokument ist, das offensichtliche Vorteile für Referenzmaterial bietet. Es kann jedoch auch eine zusammenfassende Kurzanleitung oder Checklisten, druckbare Poster zur Bewerbung der Richtlinien und Hervorhebung der wichtigsten Funktionen, eine Bibliothek mit Styleguide-kompatiblen Vorlagen/Mustern/CSSs sowie Seminare und Workshops (möglicherweise remote durchgeführt) für Sie geben die Richtlinien persönlich vorzustellen und ihre Vorteile für die Designer und Entwickler aufzuzeigen. Ehrlich gesagt ist die Erstellung der Richtlinien nur der Anfang. Der größte Teil der Arbeit besteht in der Förderung und Durchsetzung der Richtlinien. Versuchen Sie, Zeit, Budget und organisatorische Unterstützung dafür zu erhalten.

17

Ich weiß, dass es eine akzeptierte Antwort gibt, und ich stimme Michael normalerweise ziemlich zu, aber das nervt mich immer noch zwei Tage lang.

Als Entwickler hasste ich das Apple HIG

Es hat mir einfach nicht gesagt, was ich tun soll, wie ich Dinge tun soll in der Praxis .

Die Windows-Richtlinie wurde als "leer" empfunden, aber es könnte sein, dass dies der Fall war, weil unter Windows anscheinend niemand ihnen folgt.

Denken Sie daran, dass ich tatsächlich eine wirklich enge Beziehung zur Windows-GUI haben musste: Wir mussten in der Lage sein, kurze Windows-Programme sogar on) zu schreiben Papier .

Ich kannte jedes einzelne Widget, wie es funktioniert, wozu es dient und wie es aufgerufen werden kann. Auswendig, buchstäblich.

Es war wie eine Zwangsheirat.

Trotzdem wusste ich nicht, wie man atemberaubende Sachen kreiert, und weder die HIG sagte mir, wie man das macht.

Wenn es nicht das HIG ist, was hat OS X-Anwendungen so einheitlich gut gemacht?

Natürlich wurden die Apple -Produkte selbst wunderbar gestaltet, und jeder versuchte nur, kopiere sie . Wenn eine Kopie erfolgreich war, kopierten sie das Gute Teile von dort auch. Aber Entwickler verstanden die Muster , weil sie die Apps selbst verwendeten . Immer wenn ein Windows-Benutzerentwickler Mac-Apps erstellen musste, war das Ergebnis einer vollständigen Katastrophe nahe .

(Wenn die Entwickler das System nicht verwenden - wie Sie bereits an anderer Stelle erwähnt haben, handelt es sich um eine Bankensoftware -, bereiten Sie sich auf einige schlechte Dinge vor.)

Vielleicht haben auch die guten Metaphern geholfen: gut gestaltete Widgets waren wie Legosteine ​​miteinander verbunden.

Aber auch: Sie hatten Vorlagen : Man könnte sagen: Es ist eine dokumentbasierte Web-App. Es ist eine Kerndaten-Web-App. Ich bin mir ziemlich sicher, dass das Web irgendwo wie in den Jahren 2006-2007 voll von CoreData + WebView-Tutorials ist. Wir haben gerade buchstäblich eine Vielzahl solcher Apps gesehen.

Entwurfsmuster im ursprünglichen Sinne der 70er Jahre sind Rezepte : "Wenn Sie dieses Problem haben, tun Sie dies": Sobald Sie festgelegt haben, wie Ansatz das Problem, Sie sind auf einem erfolgreichen Weg.

Eine visuelle Sprache ist immer noch eine Sprache

Und die Widgets sind sein Wortschatz.

Für mich sieht bootstrap so aus:

enter image description here

Der Entwickler wird gebeten, einen vollständigen Brief in dieser Sprache zu schreiben.

Schlimmer noch: Der Entwickler interessiert sich nicht für diese Sprache.

Er lernt das nicht zum Spaß, er soll es benutzen. Eine gewisse Rationalisierung würde helfen, aber im Falle der Sprache einer Webseite, Outsourcing, mit einer separaten Domain, ohne Benutzerkontakt, ist es Entwicklern einfach egal.

Normalerweise passiert hier also, dass der Entwickler das Vokabular öffnet, Dinge zusammenfügt und Code einreicht.

Sie benötigen einen vollständigen Sprachführer anstelle eines einfachen Wortschatzes.

Auch hier sind Briefe zu schreiben. Auf Chinesisch.

Sie müssen sagen, wenn eine Phrase verwendet werden soll. Sie müssen Beispiele anzeigen, höchstwahrscheinlich aus vorhandenen Anwendungen, die in derselben Sprache für dieselbe Problemdomäne geschrieben wurden .

Jeder visuellen Sprache liegt eine Mustersprache zugrunde, auch wenn diese implizit ist

Alexanders Klassiker ist eine gute Lektüre. Er war derjenige, der Muster in das Engineering-Denken einführte, und durch Software Engineering landete es auch in UX. Ein bisschen abseits des Themas, aber es lohnt sich, seinen IEEE-Vortrag zu lesen.

Was Sie mit einem UX-Styleguide erreichen möchten, ähnelt dem, was Alexander mit seinen Mustersprachen erreichen wollte: Er versuchte, die Generika zu definieren und die Entscheidungen in die Hände der Benutzer zu legen.

(Hinweis: in die Hände der Benutzer, nicht in die Hände der Entwickler)

Aber ich denke immer noch Rezepte sind wichtig : Ein Designmusterkatalog ist immer noch ein Katalog von Phrasen. Es könnte sein, dass es eher dem Oxford Dictionary ähnelt (das Definitionen, Verwendungszwecke und Beispiele enthält) als einem einfachen Vokabular.

Das fehlte den HIGs völlig. Sie standen da, es gab allgemeine Richtlinien und Sie sagten: "OK, wie fange ich an?"

Ein OS HIG ist nicht Ihr Leitfaden, gerade weil ein OS HIG auf den allgemeinen Fall zugeschnitten ist: Vom Zeichnen von Apps bis zu MP3-Playern, von Mail-Readern bis zu Krankenhauskatalogsystemen könnte theoretisch alles auf einem Betriebssystem ausgeführt werden.

Gleiches gilt für Twitter Bootstrap: Es ist eine generische Designsprache.

Sie müssen Ihre Details finden : Wo können Sie den Inhalt anpassen?

Bearbeiten :

Worüber spreche ich, wenn ich Einzelheiten sage?

Zunächst werden Sie sicher die Muster der Anwendungen identifizieren.

Es gibt im Allgemeinen zwei Arten von Mustern:

  • Architekturmuster, dh welche Art von Anwendungen gibt es meistens (Sie haben erwähnt, dass die meisten davon CRUD sind)
  • Widget-Muster, das heißt, Sie finden tatsächlich einige spezifische UX-Entwurfsmuster, die entweder als Widgets oder als Zusammenspiel von Widgets definiert werden können, und Sie definieren ein entsprechend der Widget-Bibliothek für sie .

Sie müssen auch eine dritte Kategorie angeben, die normalerweise stark mit der ersten verbunden ist:

  • Layouts

Das Entwerfen von Webinterfaces hat hervorragende Arbeit geleistet, um die typischen Layouts für Webanwendungen zu sammeln. Ich würde das Buch trotzdem empfehlen.

Sie müssen dies auf Ihre eigenen Fälle destillieren. Insbesondere müssen Sie Anwendungsmodule finden, die tatsächlich von diesen Layouts profitieren, und sie vollständig entwerfen .

Treffen Sie dann die Wahl für Entwickler: Welche Art von Anwendung erstellen Sie? Ein Dashboard? Ein Formularsystem? Dies ist das Layout eines Formularsystems, dies sind die erforderlichen Elemente, dies sind die optionalen Elemente (+ wann verwendet werden soll), so sollten sie zusammenarbeiten.

Es wäre eine gute Idee, Entwicklern beizubringen, tatsächlich in Benutzerabläufen zu denken, aber ich bezweifle, dass es ein einfacher Fall wäre, einen vollständigen UX-orientierten Prozess zu entwickeln, insb. wenn Sie auslagern.

Die Entwickler werden diese verwenden, wenn es weniger Aufwand ist, sie zu verwenden und etwas selbst zu erfinden, als es vollständig durcheinander zu bringen . Das heißt, wenn Sie vollständige Boilerplate-Codes verwenden müssen, die sie einfach abrufen können, funktioniert dies einwandfrei.

Außerdem bietet ihnen eine Reihe von Daumenregeln : Anstatt zu sagen, dass "Zugänglichkeit für Menschen mit Sehbehinderungen und Kontrast sowie Farbenblindheit und Blahblah wichtig ist", ist dies viel einfacher folge dem: "Alle Seiten müssen weiß auf schwarz sein, kein rot gepaart mit blau ist erlaubt".

Sicher, weniger Fantasie, aber ich meine, bauen wir gut genug Lösungen oder versuchen wir, aus Entwicklern vollwertige UX-Designer zu machen?

Der Nachteil wird sein, dass Entwickler diese Faustregeln auch nach Jahren wiederholen und nicht davon hören, dass sie entlarvt wurden. Beispiele sind die 7 + -1-Regeln (sie sind immer noch lehren es an der Universität!) Und im Grunde genommen alles, was Sie unter UX Myths finden ) Nein, sie werden die Beschreibungen und Einschränkungen nicht lesen.

Aber ich denke, das wäre das Problem eines anderen ...

19
Aadaam

Die Entwicklung in Übersee ist oft ein Code für eine „schlechte“ Entwicklung. Ich habe festgestellt, dass keine Anzahl von Styleguides diese Probleme lösen kann. Aber das ist ein anderes Thema.

Was funktioniert, ist von Team zu Team und von Projekt zu Projekt sehr unterschiedlich. Während wir komplexere Webanwendungen mit komplexeren Interaktionen und dergleichen erstellen, finde ich, dass Muster-/Komponentenbibliotheken der bessere Weg sind.

Hierbei handelt es sich um lebende Dokumente, die als zentrales Repository für UX, Dev und Business konzipiert sind. Die Idee ist, einen zentralen Hub zu schaffen, von dem aus jeder ziehen kann.

Sie würden eine Komponente identifizieren, die dokumentiert werden muss. Sie erwähnen in Ihrem Beispiel Formulare, die dann eine große Anzahl einzelner Komponenten enthalten können. Nehmen wir zum Beispiel eine Option Select. Ihr Dokument kann dann Informationen enthalten, einschließlich:

  • Name des Musters
  • verwendet (wann man es benutzt, wann man es nicht benutzt)
  • Visuelle Stile (Farben, Schriftarten, Größen)
  • Interaktionsdokumentation (beschreibt das Verhalten der Komponente)
  • alternative Versionen
  • beispiel HTML/CSS/JS (für Entwicklerteam)
  • beispiel für Drahtgittermuster (für das UX-Team)
  • fehlerzustände
  • zugänglichkeitsanforderungen

Der Nachteil? Ich habe noch kein Produkt gefunden, das eine Musterbibliothek gut verwalten kann. Ich habe gesehen, wie es mit SharePoint, mit Axure, mit Word versucht wurde, aber alle haben Nachteile. Die beste Option in Bezug auf Online-Tools, die ich gesehen habe, ist patternry.com, das Potenzial zu haben scheint, aber auch in bestimmten Bereichen fehlt.

Abgesehen von all dem und der Tatsache, dass Sie die Entwicklung auslagern, ist der Code der Präsentationsschicht das beste Ergebnis, wenn Ihr Team und Ihre Organisation dies unterstützen können. Keine Menge Papierdokumentation führt zu einer perfekten Übersetzung, sobald Sie von der Entwicklung in Übersee zurückgekehrt sind. Je mehr Sie selbst tun können, desto mehr Kontrolle haben Sie auf lange Sicht über die UX.

3
DA01

Ich bin kürzlich auf die folgende gestoßen und habe sie um Erlaubnis gebeten, sie als Beispiel für eine zu verwenden, die ich selbst schreibe. Erlaubnis erteilt:)

http://www.labor.ny.gov/ux

1
user17508

Ich schlage vor, Sie verwenden ein Framework. Ich benutze Twitter Bootstrap . Es hat einen eigenen Styleguide und garantiert mit geringem Aufwand eine einheitliche Ebene.

1
Mohamad