To blog or not to blog, that is the question


There are a few things that I like to say








Naming Conventions for Assets


Hauptbereiche

0 = alle Screens einer Applikation, die mit Initialisierung zu tun haben. Dies sind alles Screens, die möglicherweise wirklich nur beim Hochstarten, beim Initialisieren oder Setup zu sehen sind.

1 = alle Standard Screens einer Applikation. Der Großteil der Screens hat diesen Prefix

A = alle Elemente einer Applikation, die allgemein vorhanden und sichtbar sind, insbesondere die Application Shell. Die Application Shell enthält zB die Navigation etc. Allgemeine Elemente können aber auch Paletten sein oder Notifications. Grundsätzlich also Funktionen, die übergreifend genutzt werden können.

Beispielszenarios:

Eine Hilfe Funktion kann über ein Fragezeichen Symbol aufgerufen werden. Dies erscheint als Palette und ist von jeder Seite her aufrufbar, daher erhält es den Prefix A.

Beispiel:

0-xx-xx
1-xx-xx
A-xx-xx


Bereiche & Screens

Jeder Bereich einer Software wird mit den folgenden zwei Zahlen gekennzeichnet: x-00-xx. Ein Bereich ist immer ein in sich abgeschlossener Bereich. Beispielsweise “Login”. Bei einem Login, hat man einen Screen für Username und Passwort. Es gibt aber noch einen Link, der für Passwort vergessen oder Nutzername vergessen zu einem separaten Screen führt:

  • 1-01-01 User Login

  • 1-01-02 Passwort vergessen

  • 1-01-03 Nutzername vergessen

  • 1-01-04 Nutzer zurücksetzen

Innerhalb eines Bereichs werden dann immer die einzelnen Screens durchnummeriert, wie hier oben illustriert.


Zustand

Jeder Screen kann unterschiedliche Zustände haben. Beispielsweise, wenn sich ein Dialog öffnet, dann ist das ein Zustand (State) der Seite. Ein Zustand wird immer über einen Punkt (.) gekennzeichnet. Beispielsweise:

  • 1-01-02.1 Passwort vergessen - Dlg

Dies zeigt an, dass auf dem Screen 02 ein Dialog geöffnet wurde.


Variationen

Manchmal ist es notwendig, von einer Seite mehrere Varianten zu machen, gerade wenn man experimentiert und unterschiedliche Lösungsvorschläge unterbreitet.

Variationen werden mit einem Großbuchstaben gekennzeichnet:

  • 1-01-02.1_A Passwort vergessen - Dlg

  • 1-01-02.1_B Passwort vergessen - Dlg

Hierüber ist es klar, dass dies beide der gleiche Login Dialog sind, aber in unterschiedlichen Variationen. Wichtig: wenn eine der Variation die finale Version wird, dann verschwindet das Kürzel wieder.

Beispiel:

  • 1-01-02.1_A Passwort vergessen - Dlg

  • 1-01-02.1 Passwort vergessen - Dlg

Dies zeigt an, dass Variation B zur gültigen Version wurde. Die andere wird archiviert für zukünftige Referenz. Also NICHT löschen, außer explizit gewünscht. Normalerweise will man zu einem späteren Zeitpunkt sehen, gegen welche Variante man sich entschieden hat.


Versionen

Versionen sind die Entwicklungsschritte. Hier will man unter Umständen zu einem späteren Stand zurück gehen.

Es gibt zwei mögliche Konventionen für Versionen. In der Software Entwicklung wird gerne die Semantic Versioning Regel angewendet zB. 2.1.5. Als UX & UI Designer muss man dies unter Umständen ebenfalls dokumentieren, weil man ja unter Umständen an einem Update arbeitet. Daher wird das Format des semantic Versionings nur verwendet als Referenz auf die Software Version!

Beispiel:

  • 1-01-02.1_2.1.5 Passwort vergessen - Dlg

  • 1-01-02.1_2.2.0 Passwort vergessen - Dlg

Dies zeigt an, dass es der Dialog ist vom Login für die Software Version 2.1.5 und einmal für die Version 2.2.0 … Diese können sich gestalterisch sehr unterscheiden. Wenn dies nicht der Fall ist, dann ist die Software Version aber auch nicht relevant und wird nicht im Dateinamen oder Beschriftung erwähnt.

Als UX&UI Designer muss man aber auch in der Lage sein, einen Screen eine Versionsnummer zu geben. Hierbei wird das Datum verwendet in umgekehrter Reihenfolge JJMMTT

Beispiel:

  • 1-01-02.1_220107 Passwort vergessen - Dlg

  • 1-01-02.1_220114 Passwort vergessen - Dlg

Dies würde anzeigen, dass es sich um denselben Dialog handelt, nur um unterschiedliche Versionen. Die aktuelle Version wird nicht mit dem Datum versehen, sondern der Workflow ist immer wie folgt:

  1. Aktuelle Datei kopieren

  2. Die Kopie der Datei mit dem aktuellen Datum versehen “1-01-02.1_220107 Passwort vergessen - Dlg”


Übergabe

Der Begriff Transfer oder Übergang ist aus dem Konzept der Entwicklung entliehen (Endlicher Automat ). Ein Übergang ist immer vorhanden, wenn ein Nutzer etwas eingibt und das System etwas zurückgibt. Man kann von Input Output oder Ein- und Ausgabe sprechen. Es wird etwas vom Nutzer transferiert zum System, was wiederum etwas zurück transferiert. Aus der Verkettung von mehreren Transfers ergibt sich eine User Journey.

Als UX&UI Designer muss man diese Transfers einer Seite anzeigen. Um beim Beispiel des Logins zu bleiben gibt es folgende Transfers:

  1. Nutzer gibt Nutzername und Passwort ein

    1. Erfolgreich → Startseite

    2. Nicht erfolgreich → Dlg mit der Meldung “Nutzername oder Passwort” stimmen nicht

    3. Nicht erfolgreich da Nutzer unbekannt → Dlg mit der Meldung “Nutzername ist nicht bekannt”

    4. Nicht erfolgreich da Passwort unbekannt → Dlg mit der Meldung “Passwort ist nicht korrekt”

  2. Nutzer hat noch kein Konto

    1. Nutzer klickt auf Link “neues Konto anlegen”

    2. Seite für “Neues Konto anlegen” wird geöffnet

Aus dem Beispiel oben ergeben sich mehrere Nutzer Journeys.

  • Journey A = Nutzer gibt Nutzername und Passwort ein und ist erfolgreich

  • Journey B = Nutzer gibt falschen Nutzernamen, aber richtiges Passwort ein

  • Journey C = Nutzer gibt falschen Nutzernamen und falsches Passwort ein

  • Journey D = Nutzer gibt richtigen Nutzernamen, aber falsches Passwort ein

Als UX&UI Designer muss man jetzt von einer Seite, mehrere Szenarien anlegen. Dies sind keine eigenen Seiten oder States, sondern repräsentieren Informationszustände eines Datensatzes bzw einer Nutzer Eingabe oder einer System Ausgabe.

Um einen Transfer-Zustand einer Seite zu kennzeichnen, wird ein Buchstabe verwendet (a-z oder A-Z). Eine Seite, zB die Login Eingabemaske mit Nutzername könnte dann in verschiedenen Zuständen existieren. Beispiel:

  • 1-01-01a Login (= Login Eingabefeld leer)

  • 1-01-01b Login (= Nutzername falsch; Passwort falsch)

  • 1-01-01c Login (= Nutzername richtig; Passwort falsch)

  • 1-01-01d Login (= Nutzername richtig; Passwort richtig)

  • 1-01-01.1a Login - Fehler Dlg (= Meldung “Nutzername XXX ist nicht bekannt”)

  • 1-01-01.1b Login - Fehler Dlg (= Meldung “Das Passwort ist nicht korrekt”)

  • 1-01-02 Startseite

Der UX & UI Designer vermerkt auf der Seite des Click Prototypen immer diese Information, damit später klar ist, welcher Transfer-Zustand gemeint ist. Jetzt können sich die User Journeys und die Transfer-Zustände zuordnen lassen.

Subscribe to my newsletter

Please enable the javascript to submit this form

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.