Tag: usability

201207Feb

Tinycon: Animierte Favicons für Benachrichtigungen

Viele Web-Applikation, die durch Ajax gestützt werden, geben Hinweise oder Meldungen aus, sobald ein bestimmtes Ereignis eingetroffen ist. Das betrifft beispielsweise das Empfangen einer Nachricht oder das generelle Aktualisieren von Inhalten. Da die meisten Benutzer häufig auf mehreren Seiten gleichzeitig unterwegs sind und geöffnete Webanwendungen gerne in einem separaten Tab abgelegt werden, bieten sich spezielle Methoden für das Anzeigen von Benachrichtigungen an. Neben dem dynamischen Ändern des Seitentitels wäre auch ein Hinweis durch ein aktualisiertes Favorite Icon (Favicon, 16×16 Pixel) denkbar.
Das Skript Tinycon ist genau darauf ausgelegt und ermöglicht es, eine Zahl auf dem aktuellen Favicon einer Seite anzuzeigen.

Tinycon - Favicon Alerts

Die Zahl kann also für die Anzahl neuer Nachrichten stehen und signalisiert dem Benutzer, das der Inhalt des Tabs aktualisiert wurde. Das Tinycon-Skript erlaubt es, die Darstellung des Bubbles anzupassen: Schriftart, Größe und Hintergrundfarbe können per Optionen festgelegt werden. Das Favicon wird dynamisch per Canvas erzeugt und über "toDataURL()" als Base64-Grafik eingebunden. Sollte HTML5/Canvas nicht vom Browser unterstützt werden, kann ein Fallback aktiviert werden, das dann nur den Seitentitel aktualisiert. Auf GitHub findet sich wieder der Quellcode des Projekts.

201112Sep

The Heads-Up Grid: Responsives Raster einblenden

Mit Hashgrid steht bereits ein nützliches jQuery-Plugin zur Verfügung, mit dem sich dynamisch ein Raster auf der gewünschten Website einblenden lässt. Ähnlich arbeitet auch das Heads-Up Grid, das noch etwas besser angepasst werden kann und zudem für responsive Layouts eingesetzt werden kann.

The Heads-Up Grid

In den Optionen des Skripts können diverse Einstellungen vorgenommen werden, darunter die Breite des kompletten Rastersystems, die Anzahl der Spalten, die Breite der Spalten oder die Breite der Zwischenräume. Eine Beispiel-Konfiguration kann so aussehen:

  • pageUnits = "px";
  • colUnits = "px";
  • pagewidth = 960;
  • columns = 6;
  • columnwidth = 140;
  • gutterwidth = 24;
  • pagetopmargin = 35;
  • rowheight = 20;
  • makehugrid();

Ein responsives Raster wird mithilfe von "$(window).width()" erzeugt und je nach Breite des Browserfensters werden andere Einstellungen geladen. Das Plugin lässt sich über eine Schaltfläche ganz bequem ein- und ausschalten und blendet zudem ein Grundlinienraster ein, das bei der Layout-Gestaltung sehr hilfreich sein kann.

201127Jul

Snaporama: Tabs in Firefox als Snapshot speichern

Das heutige Surfen im Web ist auf dem Großteil der Bildschirme nicht mehr durch einzelne Browserfenster, sondern durch Tabs geprägt. Mehrere Seiten können bequem parallel geöffnet und angesehen werden. Da sich die Verwendung von Tabs schon mehr oder weniger eingebürgert hat, dürfte die Anzahl gleichzeitig geöffneter Seiten je nach Arbeitsplatz oder Einsatzgebiet relativ hoch sein. Zudem werden oft viele Tabs zu einer Thematik geöffnet, um entsprechende Querverweise lesen zu können.
Mozilla forscht auf diesem Gebiet intensiv und so wurde kürzlich eine experimentelle Extension namens "Snaporama" veröffentlicht, die es erlaubt, Snapshots (also Momentaufnahmen) von Tab-Sitzungen zu speichern und zu öffnen.

Snaporama extends the life of your tabs

Dabei nutzt die auf Jetpack basierende Erweiterung ein bestehendes Feature von Firefox 4 und so können Lesezeichen-Ordner als Snapshots eingesetzt werden. Über zwei Symbole in der Add-on-Leiste am unteren Rand können Snapshots gespeichert oder geladen werden. Natürlich können auch einfach bestehende Lesezeichen-Ordner als Snapshot geladen werden: Dann werden alle im Ordner enthaltenen Tabs im aktuellen Browserfenster geöffnet.
Die Erweiterung gibt es hier zum Download und erfordert keinen Neustart des Browsers, da sie auf Jetpack basiert. Der Code ist auch bei GitHub zu finden und Mozilla freut sich wie gewohnt über Feedback der Benutzer.

201124Jul

Screenfly: Website auf verschiedenen Auflösungen

Um eine Website virtuell auf verschiedenen Auflösungen zu betrachten, eignen sich Online-Tools wie resizeMyBrowser oder auch Google Browser Size. Um auch die Auflösungen von aktuellen Smartphones und Tablets testen zu können, bietet sich Screenfly an. Durch den Einsatz eines Proxy-Servers können verschiedene Geräte simuliert werden, so dass Websites mit vorhandenen Anpassungen (Stylesheets, Media Queries, etc.) entsprechend dargestellt werden.

Screenfly by QuirkTools - Test Your Website at Different Screen Resolutions

Bei den virtuellen Geräten stehen neben Desktop-Monitoren auch etliche mobile Geräte zur Auswahl, die auf iOS oder Android basieren. Die Verwendung von Screenfly ist einfach und funktioniert soweit gut. Allerdings sollte man sich nicht komplett auf derartige Dienste verlassen, denn die Hardware der Geräte kann eben nicht simuliert werden. So ist die Darstellung in mobilen Auflösungen von Screenfly mit Vorsicht zu genießen: Die meisten Smartphones nutzen oft eine eigene Skalierung zur optimalen Darstellung einer Seite und so bleibt für eine verbindliche Ansicht immer noch der Griff zum echten Gerät.

201126Jun

Little Big Details: Besonderheiten in User Interfaces

Manchmal sind es die kleinen Dinge, die etwas Besonderes ausmachen. Gerade im Bereich der User Interfaces kommt es oft auf Kleinigkeiten und Details an, die eine Anwendung erst interessant oder gut bedienbar machen. Solche Details sollten nicht unentdeckt bleiben und so wurde die Seite "Little Big Details" ins Leben gerufen: Hier werden derartige Fundstücke gesammelt und in kleinen Screenshots veranschaulicht. Dabei handelt es sich um Desktop- und Mobile-Anwendungen, die unterschiedliche Besonderheiten aufweisen.

Little Big Details

Die entdeckten Details sind auf der Website in Kategorien eingeteilt und so lassen sich die Einträge zusätzlich filtern. Zu jedem Projekt ist (wenn möglich) ein Link hinterlegt, da es sich oft um Webseiten handelt. Ob es sich um den abtrennbaren Footer von Kickstarter oder das Kontextmenü des Logos von Akismet handelt — die meisten Fundstücke stellen gute Inspirationen dar, was die Seite zu einer hilfreichen Quelle macht.

201029Dez

Usability Body of Knowledge: Umfangreiche Referenz

Benutzerfreundlichkeit, Bedienbarkeit, Brauchbarkeit — mit diesen Worten könnte man den Ausdruck "Usability" übersetzen. Die Thematik wird oft unterschätzt oder vernachlässigt, obwohl sie einen wesentlichen Teil in der Entwicklung von Online- und Offline-Anwendungen ausmacht. Obwohl es darum geht, einen Vorgang zu vereinfachen, stellt die Vereinfachung nicht gleichzeitig einen einfachen Prozess dar. Auch wenn bestimmte Regeln gelten, stellt der Bereich der Benutzerführung eine wandelnde Disziplin dar, die ständig erweitert wird.
Gute Quellen und Informationen rund um Usability finden sich bereits an verschiedenen Stellen im Netz:

Eine weitere unverzichtbare Referenz für diesen Sektor repräsentiert der "Usability Body of Knowledge" (kurz: Usability BoK), der von der Usability Professionals' Association (UPA) ins Leben gerufen wurde.

Usability Body of Knowledge

Bei dem Projekt handelt es sich um eine komplexe Sammlung mit verschiedenen Themengebieten und dazugehörigen Artikeln. So finden sich in der Referenz Methoden, Richtlinien und Quellen rund um die Aspekte der Benutzerfreundlichkeit. Die Artikel der Bereiche sind in der Regel in die Abschnitte "Basics", "How To" und "Special Considerations" aufgeteilt, sofern entsprechende Informationen vorliegen. Um die Idee des Projekts besser verstehen zu können, sollte man einfach in den Bereichen stöbern.
Bei dem Usability BoK handelt es sich um ein Preview, das stets erweitert wird — das Projekt lebt von freiwilligen Helfern, so dass jeder zu den Artikeln beitragen kann.

201008Okt

MarkUp.io: Anmerkungen auf Websites erstellen

Mit der Webanwendung Bounce wird es Benutzern ermöglicht, grafische Anmerkungen und Hinweise auf einer beliebigen Website zu erstellen und diese mit anderen Benutzern zu teilen. Dabei wird ein Screenshot der Seite erstellt, der anschließend mit Markierungen versehen und über einen permanenten Link versendet werden kann.
Mit MarkUp.io steht nun ein ähnlicher Dienst zur Verfügung, der das gleiche Ziel verfolgt. Allerdings handelt es sich bei MarkUp.io um ein Bookmarklet, welches in einer Symbolleiste des Webbrowsers platziert werden kann.

MarkUp.io

Per Klick wird eine Website dann editierbar und kann mit farblichen Markierungen gefüllt werden. Dazu zählen Linien, Kreise, Rechtecke, Pfeile und auch Text-Hinweise. Bei MarkUp.io wird zudem kein Screenshot erstellt — über die Website, die in einem iframe verschachtelt ist, wird eine unsichtbare Fläche gelegt. Die grafischen Elemente werden darauf mit Raphael gezeichnet.
Über einen Link kann das Website-Feedback an Kollegen gesendet und verarbeitet werden. MarkUp.io stellt also eine sehr schöne Möglichkeit dar, Websites mit mehreren Personen hinsichtlich ihrer Elemente und Bedienbarkeit zu analysieren.

201019Sep

LiveValidation: Erweiterte Validierung mit JavaScript

Kontakt- oder Bestellformulare im Internet werden in der Regel gefiltert, so dass bestimmte Felder Werte enthalten müssen. Diese Überprüfung (oder Validierung) kann durch eine serverseitige Skriptsprache wie PHP oder ASP, aber auch mit JavaScript gelöst werden. Beide Methoden haben Vor- und Nachteile. Wenn es jedoch darum geht, Eingaben in Echtzeit zu überprüfen, kommt in jedem Fall JavaScript (oder auch Ajax) zum Einsatz. Erweiterte Möglichkeiten für eine Echtzeit-Validierung bietet das Skript LiveValidation, das als Standalone-Version und Prototype-Plugin heruntergeladen werden kann.

LiveValidation

LiveValidation bietet verschiedene Optionen, durch welche die Überprüfung von Eingaben definiert werden kann. Ein einfaches Beispiel, wenn ein Feld ausgefüllt werden muss:

  • var f1 = new LiveValidation("f1");
  • f1.add(Validate.Presence);

Ebenso lassen sich mit dem Skript Whitelists erstellen — das bedeutet, ein Formular muss mit einem Wert aus einer bestimmten Liste ausgefüllt werden. Diese Option eignet sich beispielsweise als Spam-Schutz.

  • var f14 = new LiveValidation("f14");
  • f14.add(Validate.Inclusion, { within: [ "cow" , "pigeon", "giraffe" ] });

Für umfangreiche Formulare oder besondere Überprüfungen eignet sich das kleine Skript also sehr gut. Eine Dokumentation gibt Aufschluss über die verfügbaren Funktionen.