Pascal – anwendbar.ch

Einfacher Kreativitäsworkshop für kleine Gruppen

Pascal — Wed, 09 Nov 2016 19:04:09 +0000

Für die Aufgabe, mit einer Gruppe von Leuten rasch Ideen zu einem Thema zu generieren, hat sich folgendes Vorgehen eines Kreativitäsworkshops als effizient erwiesen. Als Resultat erhält man Ideen als Skizzen welche bereits eine erste Überarbeitung und Bewertung erfahren haben.

Hinweis: Der Ablauf setzt keinerlei Erfahrungen der Teilnehmenden im Umgang mit Kreativitätstechniken vor aus. Getestet habe ich den Ablauf mit 5 bis 10 Leuten.

Im folgenden Beispiel soll die Startseite einer SmarthPone-App neu gestaltet werden.

Sanfter Einstieg mit dem Methode “Blitzlicht”

Bei dieser Methode erhält jede Person genau eine Minute Zeit, um seine Erfahrungen bzw. Gedanken zur App auszudrücken.Der Fragefokus muss hierbei nicht ausschliesslich auf das zu bearbeitende Objekt – also die Startseite – gelegt werden. Vielmehr geht es darum eine allgemeine Meinung/Betrachtung abzufragen und um denjenigen etwas die Angst zu nehmen die von sich sagen, sie seien nicht kreativ.

Folgenden Regeln gelten für diese Methode:

Jede Person hat genau eine Minute Zeit – diese Minute sollte wenn immer möglich genutzt werden. Die Moderation stoppt die Zeit und bricht (allenfalls) ab.
Die Sprechenden werden nicht unterbrochen, weder durch Fragen noch durch Widersprechungen.
Was andere Personen schon gesagt haben kann wiederholt werden. Die Aussage “es wurde alles schon gesagt” ist hingegen nicht zugelassen.
Die Moderation notiert sich die wichtigsten Aussagen, speziell was wiederholt gesagt wird.

Im Anschluss fasst die Moderation kurz (ca. zwei Minuten) zusammen, und legt dabei den Fokus auf Dinge, welche mehrfach gesagt wurden. Auch hier erfolgt keine Bewertung und keine Diskussion.

Nun gehts ans Zeichnen im “Designstudio”

Bei dieser Methode arbeiten alle gleichzeitig, aber jeder selbstständig für sich. Es geht darum, in vier Minuten verschiedene Skizzen zum Thema “App Startseite” zu zeichnen. Dies kann auf einem weissen Papier gemacht werden, oder in diesem Beispiel in einer vorgedruckten Vorlage mit einem Smartphone-Umriss als Orientierungshilfe.

Nach der ersten Runde stellt jede Person ihre Skizzen innerhalb von zwei Minuten vor. Im Anschluss geben die anderen Personen ein Feedback zur präsentierten Skizze. Auch die Zeit für das Feedback sollte begrenzt werden auf, je nach Gruppengrösse, zwei bis vier Minuten.

Nun startet die zweite Runde, in welcher die Ideen weiter detailliert werden. Dabei ist es möglich an der eigenen Idee weiterarbeiten, andere Ideen zu verfeinern oder diese Ideen mit den eigenen Vorstellungen zu kombinieren. Gezeichnet wird auf leeren Blättern, die Skizzen aus der ersten Runde bleiben unangetastet. Für diese Runde sollten zwischen 5 und 10 Minuten eingeplant werden – wobei die Zeitdauer an der Komplexität des zu skizzierenden Produktes auszurichten ist.

Nun erfolgt die nächste Präsentationsrunde, die identisch abläuft wie die Erste. Je nach dem, wie konkret die Ideen ausgearbeitet werden sollen, können die Schritte “Skizzieren, Präsentieren, Feedback geben” beliebig oft wiederholt werden. Nach zwei Durchläufen liegen aber oft schon sehr gute Skizzen vor. Nach der letzten Feedbackrunde, geht es in den Abschluss.

Alle Skizzen werden nun gut sichtbar ausgelegt. Mit allen Teilnehmenden wird nun versucht, die Skizzen in Gruppen zusammenzufassen. Sind sich einige Skizzen sehr ähnlich, wird in der Gruppe entschieden welche davon aussortiert werden. Es geht in diesem Schritt um die Konsolidierung der Ideen.

Die abschliessende Bewertung mittels “Plädoyer”

Die konsolidierten Skizzen liegen nun vor und müssen noch bewertet werden. Damit dies möglichst einfach gelingt, sollten die Skizzen nummeriert werden..

Jede Person überlegt sich nun für sich, welcher Variante sie einen, zwei oder drei Punkte vergibt. Die Punkte können nur einmal vergeben werden.

Nun hält jede Person für ihren Favoriten ein Plädoyer. Hiebei geht es darum die Vorzüge dieser Skizze hervorzuheben und zu erklären, weshalb auch die anderen Teilnehmenden für diese Skizze ihre Punkte geben sollten. Erst wenn alle Plädoyers abgeschlossen sind, erfolgt die finale Punktevergabe. Dabei darf man sich durchaus auch gegenüber der ersten, stillen Bewertung umentscheiden.

Wie weiter

Das Vorgehen resultiert nicht in einer bis ins Details ausgearbeiten Idee. Sie liefert aber schnell viele und gute Ideen, welche im Anschluss z.B. nach deren Umsetzbarkeit bewertet und ausgearbeitet werden müssen. Dabei kann es durchaus sein, dass nicht die am höchsten bewertete Idee umgesetzt wird/werden kann.

The post Einfacher Kreativitäsworkshop für kleine Gruppen appeared first on anwendbar.ch.

Tools zur Websiteoptimierung

Pascal — Mon, 23 May 2016 07:06:58 +0000

Die User Experience einer Webseite hängt von einigen technischen Faktoren wie der Ladezeit, (HTML)-Fehlern usw. ab. Um diese Aspekte der Websiteoptimierung zu testen, gibt es verschiedene kostenlose Tools die hier kurz vorgestellt werden.

Geschwindigkeit

Das Onlinetool Google Page Speed Insight misst und bewertet nicht nur die Geschwindigkeit einer Webseite sondern gibt auch gleich Tipps wie die Ladezeit verringert werden kann.

Früher gab es auch eine Version als Browser-Plugin, diese wird aber nicht mehr weiterentwickelt.

Fehler, Google-Index, Mobile und HTML-Optimierung

Ohne dies Webmaster-Tools von Google sollte keine Webseite betrieben werden. Nach einer erstmaligen Identifizierung pro Webseite erhält man wertvolle Einblicke in die eigene Webseite und wie diese von der Google Suche gesehen wird.

Suchanalyse: Zu welchen Suchbetriffe wurde die Website auf welche Position angezeigt und wie oft wurde geklickt
HTML-Fehler wie doppelte Inhalte, doppelte Title Tags usw.
Serverfehler: Hilft falsche Links innerhalb der Website aber auch von anderen Websites auf die eigene zu erkennen.
Hinterlegen von Sitemaps, senden von Seiten an den Index usw.

Accessibility

Die Wave Toolbar steht für Chrome zur Verfügung. Die Version für Firefox wird leider nicht mehr weiterentwickelt. Die wichtigsten Funktionen sind:

Ansicht der Titelstruktur
Ansicht der Seite ohne Styles (CSS)
Hinweise auf Accessibility Probleme wie fehlende alt-Attribute bei Bildern, Fehler in der Titelstruktur usw.

Für eine Webseite mit einer guten Usability und guter User Experience braucht es deutlich mehr als den Einsatz dieser Tools und die Behebung allfällig gefundener Fehler. Auf technischer Ebene bieten sie aber eine Umfangreiche Sammlung von Tests und Tipps zur Verbesserung von Websites.

The post Tools zur Websiteoptimierung appeared first on anwendbar.ch.

Heatmaps mit Hotjar

Pascal — Fri, 15 May 2015 17:54:39 +0000

Hotjar wirbt mit “A New Easy Way to Truly Understand Your Visitors”. Das mussten wir natürlich testen und haben mit dem Start von anwendbar.ch Hotjar eingesetzt.

Funktionen von Hotjar

Hotjar unterscheidet zwischen Anaylsis und Feedback. Unter Analysis fallen Funktionen wie die Heatmaps, Formularauswertungen, Aufzeichnungen von Userverhalten und sog. Funnels. Letzteres sind vorgegebene Klickpfade durch eine Webseite mit einer anschliessenden Auswertung wo wie viele Benutzende den Pfad verlassen.

Unter Feedback sind Funktionen wie Umfragen, Abstimmungen und “Recruiters”, mit welcher man User direkt ansprechen und für Usertest gewinnen kann.

Der Weg zur ersten Heatmap

In der kostenlosen Variante bietet Hotjar bis zu 3 Heatmaps mit je max. 1000 Sampels, auch die anderen Funktionen von Hotjar sind entsprechend begrenzt. Für einen ersten Test reicht der Funktionsumfang aber alle mal aus.

Nach der Registrierung bei hotjar.com kann man gleich los legen und mit wenigen Klicks eine erste Heatmap einrichten. Dazu muss man lediglich die URL der Seite, einen Namen für die Heatmap und eine Samplegrösse festlegen.

Damit die Daten gesammelt werden können muss noch ein kleines Codefragment, ähnlich dem von Google Analytics, in die Seite eingepflegt werden. Für WordPress gibt es dafür z.B. das Plugin Hotjar Connecticator, welches auch auf anwendbar.ch verwendet wird.

Nun muss man nur noch warten bis die ersten User die eben angegebene Webseite besuchen. Um die Heatmap zu sehen, müssen übrigens nicht alle 1000 Samples erfasst und ausgewertet sein. Hotjar erstellt bereits eine erste Version mit wenigen Zugriffen.

Heatmaps – Clicks und Moves

Mit der “In-Page Analytics” Funktion von Google Analytics ist man bereits nahe an einer Heatmap drann, wozu also ein neues Tool? Ganz einfach: Einerseits sehen die Heatmaps von Hotjar einfach deutlich besser aus (siehe das Beitragsbild) als die blanken Klick-Informationen in Google Analytics, und andererseits bietet Hotjar nebst der Heatmap basierend auf Klicks auch gleich noch eine Version, welche auf den Mausbewegungen basiert. Hotjar geht davon aus, dass die Maus im Normalfall den Augen folgt. Demzufolge kann man diese Heatmap auch als eine Art Eyetracking-Ergebnis betrachten. Ob dies so stimmt, sei mal dahin gestellt. Interessant sind diese Heatmaps aber alle mal. So erkennt man sehr schnell wo die Aufmerksamkeit der Nutzenden liegt und welche Elemente allenfalls komplett übersehen werden.

Verfeinert werden die Heatmaps durch die Aufteilung in verschiedene Bildschirmgrössen. Da die Navigation auf einem SmartPhone deutliche Differenzen zu jener auf einer Desktop-Ansicht haben kann, ist diese Unterscheidung natürlich wichtig.

Optionen zur Heatmap in Hotjar

Zu guter letzt erzeugt Hotjar auch noch eine Übersicht, welcher Bereich der Webseite von vielen Besuchern (in Prozent) gesehen wurde. Dies gibt auch einen Hinweis darauf, ob die Besucher überhaupt bemerken, dass sie durch scrollen zu weiteren Informationen gelangen würden.

Welcher Teil der Webseite wurde von wie vielen Besucher gesehen?

Fazit

Die Bedienung ist denkbar einfach und schon nach den ersten registrierten Klicks stellen sich erste Resultate ein. Die Heatmaps sind einfach zu lesen und schön anzusehen. Das macht Spass!

Bezüglich der Qualität der Resultate von Hotjar können wir noch keine abschliessende Aussage machen, da wir erst vor kurzem den Test angesetzt haben. Natürlich werden wir euch ab er auf dem Laufenden halten.

Die Begrenzungen der kostenlosen Version sind für die ersten Test kein Hindernis und für kleine Seiten wohl ausreichend. Für grosse Webseiten mit verschiedenen Landingpages sind die drei Heatmaps aber zu wenig – hier lohnt sich die Pro-Version welche pro Monat mit $29 zu buche schlägt.

The post Heatmaps mit Hotjar appeared first on anwendbar.ch.

Balsamiq Mockups 3 – die wichtigsten Neuerungen

Pascal — Tue, 12 May 2015 11:10:29 +0000

Mit Balsamiq Mockups lassen sich schnell Wireframes und Prototypen erstellen, welche dank einer einfachen Verlinkungsfunktion auch eine Art von Interaktionen zu lässt. Das Tool steht sowohl Online, als Applikation für Windows und Mac, wie auch als Plugin für Google Drive zur Verfügung. Die Desktop Version kostet $89 um amortisiert sich damit schon am ersten Einsatztag. Auch Leute die sich nicht gewohnt sind Mockups, oder überhaupt zu zeichnen, finden sich mit der Software schnell zu recht.

Balsamiq Mockups Version 3

Seit März steht nun Balsamiq Mockups in der Version 3 zur Verfügung, womit das bereits sehr gute Mockup-Tool noch einmal besser geworden ist. Für bestehende Kunden ist das Update kostenlos, für alle anderen gibt es eine ebenfalls kostenlose Testversion für 30 Tage.

Die bewährten Funktionen wurden beibehalten und die Änderungen sind teilweise klein. Alles in allem machen sie die Arbeit Balsamiq Mockups aber noch einmal einfacher und effizienter. Dies liegt vor allem an der nun sehr aufgeräumten Benutzeroberfläche.

Die wichtigsten Neuerungen im Überblick:

Unterstützung für Projekte: Mehrere Mockups können zu Projekten zusammen gefasst werden. Die Darstellung der zu einem Projekt gehörenden Mockups ist dabei sehr ähnlich wie Folien in PowerPoint.
Es gibt einen Papierkorb, welcher ganze Mockups nicht aber einzelne Elemente aufnimmt.
Die Objekt-Eigenschaften fliegen nicht mehr frei herum, sondern sind übersichtlich am rechten Rand platziert.
Die Zeichnungselemente sind etwas weniger verspielt und haben dadurch an Verständlichkeit gewonnen.
Kommentare können nun auf Knopfdruck ein- und ausgeblendet werden.
Zu jedem Mockup können nun Notizen hinterlegt werden. Dies macht die Kommentare teilweise überflüssig.

Video: Neuerungen von Balsamiq Mockups 3 (englisch)

Update, 19. Mai 2015

Ebenfalls sehr hilfreich sind die “Assets” (Icons und Bilder) und “Symbols” (Vorlagen) welche zu einen Projekt angelegt werden können. Da Balsamiq bereits über eine sehr grosse Auswahl an Icons verfügt, sind die Assets weniger spannend. Mit den “Symbols” lassen sich aber sehr schnell Vorlagen erstellen, welche in den Mockups verwendet werden könne. Sie erscheinen in der UI Library unter dem Reiter “Symbols” und sind auch über die Suche zugänglich.

Symbole in der UI Library

Mit “Symbols” lässt sich z.B. ein Gundlayout erstellen, welches dann bei jedem Mockup wieder verwendet werden kann – ähnlich den Masterfolien bei PowerPoint. Das ist aber längst nicht alles, denn die “Symbols” können auch kleine Elemente oder Sammlung von Icons sein wie in obigen Bild die Sammlung der Share-Icons. Ändert man ein Symbol, werden diese Änderungen auf alle Anwendungen durchgedrückt.

The post Balsamiq Mockups 3 – die wichtigsten Neuerungen appeared first on anwendbar.ch.

Formulargestaltung – Teil 1

Pascal — Sat, 14 Mar 2015 11:14:35 +0000

Der lange Weg zum guten Formular …

Das Ausfüllen von (Web-)Formularen bereitet kaum jemandem Freude. Für die Benutzenden ist die Dateneingabe häufig mühsam und mit verschiedensten Hürden versehen. Dabei ist eigentlich nie das Ausfüllen des Formulars das Ziel, sondern was daraus folgt.

Leider wird der Gestaltung von Formularen oft zu wenig Beachtung geschenkt. Für meinen Arbeitgeber habe ich deshalb einen Leitfaden erstellt, welche ich in leicht angepasster Version hier in zwei Teilen veröffentliche.

Vor der Gestaltung

Nachdem Ziel und Zweck des Formulars bestimmt sind, sollte jedes Feld hinterfragt werden. Braucht es dieses Feld wirklich um an die benötigten Informationen zu gelangen? Verlangt das Feld zwingend eine Eingabe? Werden die “Bezeichner” zu den jeweiligen Formularfeldern durch die Nutzenden verstanden? Brauchen wir spezifische Eingabeformate für die Weiterverwendung – beispielsweise Datum, Uhrzeit, Postleitzahlen? Müssen dazu “Regeln” für die Dateneingabe aufgestellt werden

Den richtigen Feldtyp wählen

Die Effizienz und die Fehlerquote beim Ausfüllen eines Formulars hängen auch von der richtigen Wahl der Feldtypen ab. Bei jedem Feld muss überlegt werden, was die möglichen sinnvollen Eingaben sind und danach der entsprechende Feldtyp gewählt werden.

Den richtigen Feldtyp wählen

Die Effizienz und auch die Fehlerquote beim Ausfüllen eines Formulars hängen auch von der richtigen Wahl der Feldtypen ab. Bei jedem Feld muss überlegt werden, was die möglichen sinnvollen Eingaben sind und danach der entsprechende Feldtyp gewählt werden.

Bei den meisten Eingaben ist die Frage nach dem richtigen Feldtyp schnell beantwortet, aber eben nicht immer. Im folgenden werden einige Stolpersteine beschrieben.

Radiobutton vs. Dropdown-Liste

Beide Feldtypen erlauben eine Einfachauswahl aus einer Liste. Für lange Listen sind Dropdown-Listen besser geeignet als Radiobuttons, da sie deutlich weniger Platz in Anspruch nehmen und übersichtlicher sind. Bei der Auswahl zwischen nur zwei Möglichkeiten können Radiobuttons aber effizienter sein (z.B. Auswahl der Anrede/des Geschlechts) da die gesamte Auswahl auf einen Blick ersichtlich ist.

Es ist zu beachten, dass die Reihenfolge der Einträge einer Dropdown-Liste einer logischen Sortierung folgt. Bei einer langen Liste z.B. von Ländern kann es aber durchaus sinnvoll sein die zwei bis drei häufigsten Einträge an den Anfang der Liste zu setzen.

Sehr lang sollte die Liste der Einträge aber nicht werden, da sie sonst nicht mehr angenehm zu bedienen ist. Abhilfe kann hier z.B. das jQuery Plug-In Chosen schaffen, in dem es der Dropdown-Liste ein Suchfeld hinzufügt.

Dropdown-Liste mit Chosen (Quelle: http://harvesthq.github.io/chosen/)

Listen mit Mehrfachauswahl

Dieser Typ erlaubt sowohl eine Einfachauswahl wie auch eine Mehrfachauswahl und kann daher sowohl Radiobuttons wie auch Checkboxen ersetzen. Die Darstellung erscheint in einer scrollbaren Listenform und kann deshalb platzsparender sein als eben genannte Typen.

Da das Funktionsprinzip dieses Typs aber für viele Personen unklar ist, wird es nur selten eingesetzt. Zudem ist er in der Ausführung «Mehrfachauswahl» kompliziert zu bedienen. Nach Möglichkeit sollte auf den Einsatz dieses Typs verzichtet werden.

Felder gruppieren und sortieren

Die Eingabefelder sollen sortiert und gruppiert werden. Bei längeren Formularen werden die Gruppen optisch zusammengefasst werden. Dieses Zusammenfassen kann z.B. durch Zwischentitel geschehen oder auch durch das farbige Hinterlegen einer Gruppe. Dies führt zu einem noch stärkeren Gruppierungseffekt als mit Zwischentitel. Ein nicht zu unterschätzendes Problem bei dem Lösungsansatz mit den Zwischentiteln ist zudem die Suche nach einer passenden Bezeichnung.

Beispiel von Gruppenbildung durch farbiges Hinterlegen (Quelle: ricardo.ch)

Wie weiter

Im nächsten Teil zum Thema Formulargestaltung geht es um Feldbezeichner und Eingabehilfen.

Weiterführende Links

Blogbeitrag zur Formulargestaltung auf soultank.ch

Web Form Design von Luke Wroblewski

The post Formulargestaltung – Teil 1 appeared first on anwendbar.ch.

Webanwendungen testen mit Selenium

Pascal — Thu, 12 Jun 2014 17:53:05 +0000

Webanwendungen zu testen macht Spass – wenn man das richtige Tool verwendet wie z.B. Selenium.

Das Problem

Komplette Webanwendungen oder auch Webseiten zu testen ist aufwändig und Entwickler überlassen das deshalb gerne ihren Kunden. Wie die eigene Erfahrung zeigt, wird deshalb oftmals nur sehr oberflächlich getestet. Gerne werden, speziell bei Webseiten, kleine Änderungen am HTML oder CSS schnell eingepflegt. Fertig, erledigt, schön sieht es aus. Dass die eben rasch realisierten Anpassungen Einfluss auf andere Bereiche der Website haben könnten, wird meistens vergessen, oder aber das Testen “bewusst” bei Seite gelassen.

Eine (mögliche) Lösung: Testen mit Selenium

Selenium ist eine unter der Apache 2.0 License veröffentlichte Software welche es erlaubt, Abläufe in Browsern zu automatisieren. Damit eignet sich die Software hervorragend um Webanwendungen automatisiert zu testen und damit viel (meist) mühsame Arbeit, und damit verbunden, Zeit zu sparen.

HTML, CSS, XPath

Auch wenn die grafische Oberfläche von Selenium den Eindruck erweckt man könnte einen Test einfach zusammen klicken, so braucht es doch Kenntnisse von HTML, CSS und XPath. Keine Kenntnisse zu XPath vorhanden? Keine Angst es ist einfach an Hand der vielen Online-Tutorials (z.B. bei w3schools) zu lernen resp. nachzuschlagen.

Erste Schritte mit Selenium

Die Installation für Firefox geht danke der fertig gepackten Erweiterung (Selenium für Firefox) schnell und einfach von der Hand. Falls Sie Selenium auf deutsch installieren: Die Übersetzung ist sehr lückenhaft, weshalb weiterhin viele Begriffe auf englisch angezeigt werden.

Die Selenium IDE können Sie über das entsprechende Icon direkt aus Firefox starten. Als erstes muss eine sog. Test Suite erstellt resp. gespeichert werden. Eine Test Suite umfasst einen oder mehrere Test Cases. Beides sind einfache HTML-Dateien, welche einfach kopiert und weiter gegeben werden können. Die Tests sind also nicht an die lokale Firefoxinstallation gebunden in der sie erstellt wurden.

Damit nicht jede Aktion mühsam zusammen geklickt werden muss, erlaubt Selenium das Aufzeichnen von Aktionen. Damit kann man sich in Firefox durch eine Webanwendung oder Webseite klicken und Selenium zeichnet dabei alles auf. Auch die Eingabe von Formulardaten, inkl. Anmeldedaten, werden so erfasst.

Nun folgt der aufwändigste Teil, das Erstellen der Testfälle. Dafür muss erst klar sein, was überhaupt geprüft werden soll. Nebst dem einfachen Vorhandensein eines Elements, kann auch die Grösse, die Sichtbarkeit uns vieles mehr geprüft werden. Die Liste an möglichen Funktionen ist sehr lang. Das Element kann dabei über CSS- oder einen XPath-Ausdruck selektiert werden. Die einfachste Art ist allerdings die Funktion “Select” von Selenium einzusetzen und das Element einfach im Browser anzuklicken.

Nehmen wir an, wir müssten die Startseite von google.com testen. Als erstes definieren wir, welche Element wir prüfen wollen um die Seite als Funktionsfähig einzustufen. Für das Beispiel sind dies:

Das Suchfeld ist vorhanden
Der Button “Google-Suche” ist vorhanden

In Selenium geben wir nun die URL “www.google.com” als “Base URL” ein.

Links

Selenium Webseite

Tutorial zu XPath

The post Webanwendungen testen mit Selenium appeared first on anwendbar.ch.