Axure Prototyping – Verwendung von Notizen

Dokumentieren von Intentionen und Ideen.

Axure bietet von Haus aus die Möglichkeit Notizen zu einer Seite zu hinterlegen und zusätzliche Notizfelder anzulegen. Axure Notizen werden oft vergessen, da sie für die funktion des Klickdummies unwichtig sind und in der Programmoberfläche auch nicht sofort angezeigt werden. Jedoch entfalten sie wenn sie richtig und konsequent gepflegt werden ihre volle Wirkung und sind im Gegenteil zu manch anderem Feature von Axure auch in Projekten sinnvoll, in denen nur ein Einzelner an einem Projekt arbeitet – wer erinnert sich schließlich nach 3 Monaten noch was er sich bei der Gestaltung einer Seite im Detail gedacht hat?

Projektnotizen sind also eine Form der „Vor-Ort“ (In-Place) Dokumentation, ähnlich wie Kommentare im Quellcode für einen Entwickler.

Damit man die Notizfunktion optimal nutzen kann, bietet es sich an mit fogenden Feldern zu arbeiten:

  • Seitenintention / erwünschtes Nutzerverhalten
  • Konversionsgründe / -anreize
  • Konversionshemnisse/-hindernisse
  • Verbesserungspotenzial

Zusätzlich nutze ich noch gerne folgende Felder – welche ich jedoch nicht als zwingend erforderlich sehe:

  • Zielversion / Umsetzung in
  • Mobiles Verhalten

Wie aus dem Screenshot zu ersehen ist, leiten die Notizfelder den Fokus auf die richtigen Fragen, die man sich bei der Seitengestaltung fragen stellen sollte, und greift somit Kerngedanken der Usability (was soll passieren, wie soll es passieren, was kann schiefgehen) auf und führt sie den Planer in Form von Eingabefeldern wieder vor Augen. Somit bleibt der Fokus immer auf den essenziellen Informationen hinter dem jeweiligen Oberflächendesign.

Ziel der Notizfelder ist es also zum einen dazu geeignet die Metainformationen und Kriterien, welche zur Erstellung einer Seite beigetragen haben zu bündeln und abzufragen, als auch die Informationsfülle zu unterteilen. Die Unterteilung in einzelne themenbezogenen Notizen, hilft zudem die Schreibbarriere zu brechen und klarer zu vermitteln, was gefordert ist. Ein einzelnes Notizfeld schreckt entweder ab, oder lädt dazu ein alles mögliche dort „abzuladen“.

Notizen an den Elementen – wofür?

Zusätzlich zu Seitennotizen bietet Axure die Möglichkeit direkt an Elementen Notizfelder zu verwenden. Dies ist besonders sinnvoll, um elementspezifische Eigenschaften festzuhalten. Beispiele hierfür wären:

  • CMS-Angaben
  • Angaben zu alternativen Designs (bspw.: Kachel ohne Icon)
  • Informationen zu möglichen Verbesserungen (Bsp.: Button Primärfarbe, bekommt Mouse-Over-Effekt in invertierter Farbgebung)

Um die Übersicht am Element zu gewährleisten und beim Export besser steuern zu können, welche Informationen verwendet werden, können die Notizen noch gruppiert werden in sogenannten „Sets“.

Ich benutze dabei gerne ein Set namens Planung, welches aus den Feldern Alternativen und Verbesserungen besteht.

Tipp:

Notizen können während des Exportvorgangs von Axure (HTML, Word) auch ausgeschlossen werden. Somit werden kritische Informationen ausgeblendet und bleiben zum Beispiel bei einer Kundenpräsentation oder bei Bereitstellung von Wireframes auf einem internen Webserver, dem fachfremden Betrachter, verborgen.

Axure Widget Library – Checkliste für neue Widgets

Im nachfolgenden wird der Begriff Widget und Komponente synonym verwendet.

Die folgende Checkliste dient zur Qualitätssicherung von zentralen Widgets in einer Axure Widget Library. Insbesondere wenn diese Library von mehreren Personen gepflegt wird, entstehen oft unterschiedliche Ausbaustände in der Endversion. Meist erfüllen alle Widgets ihren Zweck und Verhalten sich wie gewünscht, jedoch gibt es einige Kniffe, die wenn beachtet den Kollegen einige Zeit und Frust bei der Verwendung der Widgets ersparen.

Mit diesem Hintergrund ist folgende Checkliste entstanden.

Folgende Punkte sollten erfüllt sein, bevor eine Komponente in einer Axure Widget Library freigegeben ist.

  • Eine Komponente hat einen eindeutigen und sprechenden Namen
  • Eine Komponente ist einer beschreibenden Gruppe zugeordnet (Beispiele: Basiselemente, funktionale Elemente, zusammengesetzte Komponenten)
  • Alle Elemente der Komponente sind zusammen gruppiert, die Gruppe ist gleichnamig zum Widget. Diese Maßnahme erleichtert es im späteren Projekt das Widget/die Komponente wiederzufinden bzw. zu suchen. Gleichzeitig bleiben die zusammengehörigen Elemente gruppiert und es entsteht kein „Salat“ aus Bausteinen, welche auf der Projekt-Prototypenseite zusammengewürfelt sind. Besteht das Widget aus einem dynamischen Panel, so ist das dynamische Panel trotzdem zu gruppieren.
Beispiel für eine Gruppierung
Axure Elemente sind gruppiert und die Gruppierung ist gleichnamig zur Komponente.
  • Die Komponente ist in sich funktional –  bei einer Auswahlliste (Dropdown) klappt zum Beispiel die Liste aus wenn auf das Icon für „Erweitern“ gedrückt wird und verschwindet wieder wenn das Icon für „Zusammenklappen“ gedrückt wird.
  • Alle Elemente des Widgets sind sauber benannt.
  • Das Widget verwendet nach Möglichkeit nur die eigenen Styles (bspw.: „IF_Icon Farbe Füllung„) oder eigens für das Widget definierte Styles (bspw.: „Dropdown Iconfarbe„). Dies ermöglicht es später in Projekten Farbänderungen einfacher umzusetzen und genau abzugrenzen.
  • Das Widget hat alle adaptiven Ansichten definiert, sofern dieses Feature verwendet wird. Widgets, die in einer bestimmten Ansicht keinen Sinn machen, werden aus der entsprechenden Ansicht gelöscht. Das Fehlen der mobilen Variante wird in der Seitennotiz „Mobiles Verhalten“ begründet und vermerkt, ebenso wie andere Verhaltensänderungen.
Die mobile Ansicht ist durch eine Notiz erklärt.
  • Das Widget verwendet keine globalen Variablen.
  • Es ist ein Icon hinterlegt für beide Icon-Felder (28 x 28 px & 56 x 56 px)
  • Die Check In-Notiz enthält eine explizite Auflistung aller erstellten Komponenten (eigene Sektion innerhalb der Nachricht).
Erstellt:
#Drowdown 1/1
#Dropdown 1/3
im Rahmen von TICKET-123.
----
Verändert:
..
....
----
Gelöscht:
....

Eine ähnliche Form dieser Checkliste verwenden wir um im Rahmen des Prototypings von Oberflächen, um zu gewährleisten, dass alle Widgets grundlegende Standards einhalten, was das Arbeiten deutlich vereinfacht. Da die Komponenten einer zentralen Komponentenbibliothek jedoch in vielen Projekten zum Einsatz kommen, ist es wichtig diese Standards zu forcieren, um das Arbeiten mit diesen Widgets erheblich zu vereinfachen und nacharbeiten zu verringern.
Jeder Planer kann sich somit sicher sein, dass wenn er beispielsweise die zum Widget hinterlegten Styles bearbeitet, er auch wirklich nur für diese Widgets Farb-/Stilanpassungen vornimmt. Würde das Widget beispielsweise Axure Default-Styles (Box1, Linie, …) verwenden, so könnte eine Farbänderung in allen möglichen Komponenten seines Projektes „durchschlagen“, was unnötige Nacharbeiten nach sich ziehen könnte.

Durch die Bereitstellung und Abarbeitung dieser Checkliste wird geholfen, diesen Mindeststandard zu dokumentieren und nachzuhalten.

Flag idea for the Viségrad States

So recently there has been a lot of comment about Europe´s new alliance of the four Viségrad States, which are Poland, Czech Republic, Hungary and Slovakia.

So I had some spare time on my hand and I came up with a flag design, representing this alliance of member states within the european union.

blue flag with white circle and four stars representing the four visegrad states
Blue flag with white inner circle displaying four stars in red, dark blue, blue and green.

The blue line represents river Danube, while each star is colored in the distincitve color of each country. The stars are placed where each capital city would roughly be located. The white circle is uniting and surrounding all 4 stars. White is also the color that is present in each national flag of the four countries. The circle is sourrounded by the blue color of the European Union and 12 golden circles. The blue background and golden circles represent the European Union.

Note: Design, Symbolism and Iconography is just a hobby of mine. I get my ideas from current events but this is not intended to be a political statement of any kind.

Digital second amendment – Icon idea

So recently I came across an interessting comment making the point, that in order to save individuals rights in an interconnected society and with a more and more digital state there has to be something like a „digital second amendment“ (source: Splinternews – The fight for data encryption is the second amendment battle for the digital age). Meaning that the people should have unrestricted access to encryption software to protect their private data.

As I was thinking about what I had read, I came up with a logo.

Tilted stilized memory chip labeled +2A
Logo digital second amendment

Note: Design, Symbolism and Iconography is just a hobby of mine. I get my ideas from current events but this is not intended to be a political statement of any kind.

Interviewfragen für Prototypeninterviews

In letzter Zeit habe ich für ein Projekt für das IDIS mehrere Usability-Tests mit unterschiedlichsten Probanden durchgeführt. Ziel der Tests war es das Verhalten auf der Webseite und deren Bedienbarkeit zu erforschen. Dabei haben wir neben Daten zur Funktion auch Informationen zur Person, zur Motivation, zu Emotionen und Relevanz der Webseite erhoben.

Gute oder bewährte Fragen habe ich für meine Teammitglieder und für spätere Tests in einem Dokument festgehalten.

Diese Fragen finden Sie hier: Sammlung von Interviewfragen.

Verschlüsselte Partition – VeraCrypt, Dropbox und OneDrive per Batch-Script starten


Hinweis: Bevor Sie mit der Umsetzung einer solchen Lösung beginnen, sichern Sie immer Ihre Daten. Sollte aus irgendeinem Grund ein Fehler auftreten kann es sein dass Ihre Daten nicht wiederhergestellt werden können, sofern Sie keine Sicherung erstellt haben.


Um meinen Laptop abzusichern, habe ich eine „versteckte“ Partition eingerichtet. Im Grunde handelt es sich dabei lediglich um eine Partition, die keinen Laufwerksbuchstaben erhalten hat. Dies lässt sich über die Datenträgerverwaltung von Windows einrichten.

Mittels der Verschlüsselungssoftware VeraCrypt habe ich die komplette Partition verschlüsselt. Zum Entschlüsseln ist eine Keyfile und ein Passwort notwendig. Das Passwort habe ich im Kopf, die Keyfile auf einem USB-Stick, den ich am Schlüsselring immer dabei habe.

Das Problem

Starte ich den PC, so stecke ich den USB-Stick an und entschlüssele anschließend mittels VeraCrypt die Partition. Dies funktioniert auch ziemlich gut, wenn nicht gewisse Cloud-Dienste wären. So starten Dropbox und OneDrive im Normalfall mit dem Systemstart. Ist zu dem Zeitpunkt an dem Dropbox gestartet wird jedoch der Dropbox-Ordner nicht vorhanden, weil noch verschlüsselt, so wird man aufgefordert Dropbox neu einzurichten. Ähnlich verhält sich OneDrive. Dafür gibt es zwei Lösungen:

  • A: Man verschlüsselt die Dropbox und OneDrive Dateien nicht und richtet die Ordner auf der Normalen „Systempartition“ ein. Logischerweise sind diese Daten dann nicht durch die Verschlüsselungssoftware vor fremdem Zugriff geschützt.
  • B: Man entfernt oder deaktiviert die Autostart Einträge der Programme. Dadurch noch nicht verschlüsselten Partition nicht darüber meckern, dass ihre Ordner nicht vorhanden sind. Der Nachteil dieser Lösung ist ganz klar, dass es (zumindest in meinem Fall) wahrscheinlich ist, das man vergisst die Programme nach der Entschlüsselung zu starten. Dies kann dramatische Folgen haben.

Eine Zeit lang hatte ich die erste Lösung verwendet. Ich verschlüsselte also nur einen Teil meiner Daten auf einer separaten Partition und lies den Rest unverschlüsselt auf meiner Systempartition liegen. Da jedoch in meinem Fall die meisten meiner Daten in der Dropbox abgelegt werden, war mit der Zeit klar, dass ich entweder komplett auf die Verschlüsselung verzichten kann, oder aber mit Variante B mich anfreunden müsste, wenn ich alle wichtigen Daten schützen wollte.

Das bedeutete für mich, dass sich erst die Partition entschlüsselte, anschließend Dropbox und OneDrive manuell startete. Bis ich auf den Gedanken kam, dass alles durch eine Batchdatei, also eine Ablaufroutine für mein Betriebssystem ausführen zu lassen.

Hier eine kurze Zusammenfassung meiner Anforderungen

  • Ich möchte nur noch ein Passwort eingeben. Die Keyfile soll automatisch hinzugefügt werden. Da diese immer auf demselben Ort auf dem USB-Stick zu finden ist, sollte dies kein Problem sein.
  • Der USB Stick muss immer unter demselben Laufwerksbuchstaben vorhanden sein, um darauf zugreifen zu können.
  • Anschließend sollte die Entschlüsselung der Partition ausgeführt werden.
  • Erst wenn die Partition entschlüsselt ist, sollten automatisch die Programme von Dropbox und OneDrive gestartet werden, welche dann ihrerseits die Daten synchronisieren.

Zur Umsetzung

Mithilfe der Online-Ressource zur VeraCrypt-Kommandozeilenschnittstelle, war es relativ einfach möglich schnell den benötigten Befehl zusammenzubauen mit dem VeraCrypt gestartet wurde.

„C:\Program Files\VeraCrypt\VeraCrypt.exe“ /q /v „\Device\Harddisk0\Partition4“ /letter W /keyfile „U:\MyKeyFile“ /password „…“ /beep

Der Pfad zur versteckten Partition kann 1:1 aus der Selektionsmaske von VeraCrypt übernommen werden, wie in unten stehender Abbildung zu sehen ist.

 

Daten der versteckten Partition ermitteln.
Pfad zur versteckten Partition ermitteln.

Im Normalfall werden eingaben in der Kommandozeile nicht verdeckt. Eingegebene Passwörter werden also als Klartext in der Befehlszeile angezeigt und können dadurch von jedem der auf den Bildschirm blicken kann mitgelesen werden. Um die Passworteingabe zu maskieren, kann man mittels Windows PowerShell die Eingabe in eine temporäre Textdatei umleiten und diese maskieren. Dies geschieht mittels folgenden Codes.

Skript um mit Veracrypt Partition zu entschlüsseln.
Skript um mit Veracrypt Partition zu entschlüsseln.

Es sei zu erwähnen, dass dies nur die Eingabe vor neugierigen Blicken schützt und verhindert das das Passwort als Klartext in der Konsole erscheint. Wie das Passwort intern verarbeitet ist, habe ich noch nicht endgültig herausbekommen. Es kann also sein, dass das Passwort innerhalb des Programms trotzdem als Klartext vorliegt und nicht verschlüsselt verarbeitet wird. Den Code hierzu habe ich aus folgendem Thread: Quelle Stackoverflow.

Um die jeweiligen Cloud-Programme zu starten, wurden zwei weitere Batch-Skripte angelegt und im Hintergrund aufgerufen.

Verzeichnis der Batch-Routinen
Verzeichnis in dem die Batch-Routinen abgelegt sind.

Mit dem Batch-Skript vc.bat wird die Partition entschlüsselt.

Batch Skript zur Entschlüsselung
Skript um Veracrypt-Partition zu entschlüsseln.

Im selben Ordner befinden sich außerdem die Skripte:

StartDropbox.bat

Skript Start Dropbox
Skript um Dropbox zu starten.

Und StartOneDrive.bat

Skript Start OneDrive
Skript um OneDrive zu starten.

Diese Dateien starten die Programme der jeweiligen Cloudspeicheranbieter.

Alles in allem konnte ich durch den Einsatz des Skriptes meine Daten verschlüsseln und muss trotzdem nicht auf die Synchronisierung per Cloud verzichten.

Abschließend sei darauf hingiewesen, dass die Dateien innerhalb der Cloud logischerweise einsehbar sind. Wer seine Daten auch in der Cloud verschlüsseln will, sollte sich Angebote wie Boxcryptor ansehen.

Windows Tool um MD5 Prüfsummen für Dateien mit fciv.exe zu erstellen.

Icon FileChecksum Utility

Seit Längerem nutze ich bereits das Tool FCIV (fciv.exe) von Microsoft. Mit dem Tool ist es möglich Prüfsummen für Dateien zu berechnen. Wie man das Tool herunterladen und installieren kann ist hier beschreiben: Download und Installation FCIV.

Leider funktioniert das Tool von Microsoft nur in der Kommandozeile. Deswegen habe ich flink eine grafische Oberfläche dazu programmiert. Das fertige Programm könnt ihr hier abrufen: FileChecksumUtility.

Voraussetzung für das Programm ist das NET-Framework 4.5.