Tag: usability

Firefox 4 Design Challenge: People's Choice Award

Das kürzlich gestartete Voting für den Home-Tab des kommenden Firefox 4 hat entschieden: Yatrik Solanki und sein Konzept überzeugt mit seinem Entwurf für die neue Firefox-Startseite. Der Designer beschreibt seine Idee so: "Identities, a website launcher, browsing sessions, and a task-oriented ultrasmart search box define my concept. And it’s cool!". In einem Video demonstriert er eindrucksvoll die Funktionalitäten seines Entwurfs.

So stehen die persönlichen Benutzereinstellungen im Vordergrund — mit Hilfe eines Suchfeldes können diverse Suchmaschinen durchstöbert werden. Die Lesezeichen werden großzügig präsentiert, so dass der Benutzer alle Seiten als Vorschaubilder im Blick hat. Der grafische Verlauf ("Visual History") stellt die besuchten Seiten in einem Ablaufdiagramm dar, was das Nachvollziehen von Sessions noch einfacher macht.
Schließlich sind auch die anderen Einsendungen der Design Challenge interessant und sehr innovativ. Man darf gespannt sein, mit welchen Features Version 4 des Mozilla-Browsers ausgestattet sein wird.

Firefox 4 Design Challenge: Voting für Home-Tab

Vor ein paar Monaten startete die Mozilla Labs Design Challenge für den Home-Tab des kommenden Firefox 4. Mittlerweile sind etliche Einsendungen eingegangen und eine erste Top 10-Auswahl wurde zusammengestellt. Mozilla ruft in seinem Blog nun dazu auf, in der zweiten Runde für ein Konzept abzustimmen. Beim "People's Choice Award" können Benutzer bestimmen, welche Idee gewinnt. Jede Einsendung wird in einem eigenen Video erklärt und präsentiert.

Bei den 10 nominierten Konzepten sind sehr interessante Vorschläge für eine mögliche Startseite dabei, die mit dem Home-Tab aufgerufen werden kann. Die neue Startseite wird eine mögliche Option in Firefox 4 werden, durch die Benutzer eine persönliche Seite als Einstiegsseite einstellen können. Darauf könnten Lesezeichen, Notizen oder andere Funktionen platziert sein.
Alle Einsendungen für die Home-Tab-Challenge können hier eingesehen werden. In der ersten Voting-Runde wurden insgesamt 5.390 Bewertungen abgegeben.

Ketchup: Moderne Formular-Validierung mit jQuery

Zur Überprüfung von Benutzereingaben in HTML-Formularen eignet sich JavaScript bestens. Für jQuery gibt es diverse Plugins, mit denen Formulare in Echtzeit verifiziert werden können. Ein aktuelles Skript dieser Art stellt Ketchup dar — mit dieser jQuery-Erweiterung werden bei fehlenden Eingaben über den entsprechenden Feldern (input) Hinweise eingeblendet, die den Benutzer auf das Pflichtfeld aufmerksam machen.

Das Skript erwartet spezielle Klassen (class) und wird im JavaScript-Code auf das Formular-Element (form) angewendet:

• HTML:
• <form id="element" action="index.php" method="post">
• <input type="text" class="validate(required, username)" />
• </form>
•  
• jQuery:
• $("#element").ketchup();

Neben einfachen Pflichtfeldern können damit auch weitere Funktionalitäten realisiert werden. So kann etwa überprüft werden, ob es sich bei der Benutzereingabe um eine valide Datumsangabe oder E-Mail-Adresse handelt. Das Aussehen der Hinweise lässt sich per CSS anpassen und konfigurieren. Die Nachrichten sind in einer separaten Datei ("jquery.ketchup.messages.js") gespeichert. Beim Download des Skriptes sind bereits diverse Beispiele und Möglichkeiten enthalten.
Interessant bei der Klassen-Schreibweise im HTML-Teil ist übrigens die W3C-Validierung.

Wireframing: Sammlung mit Werkzeugen und Tipps

Bei der Konzeption von Webprojekten spielt die Erstellung von groben Layouts (Mock-Ups oder Wireframes) eine wichtige Rolle. So lässt sich unter Anderem mit dem Kunden sehr früh abstimmen, wie Elemente platziert werden sollen. Die detaillierte Ausgestaltung des grafischen Entwurfs erfolgt im zweiten Schritt, so dass in der Wireframing-Phase Entscheidungen über den Aufbau und das Inhaltskonzept getroffen werden können.
Bei W3Avenue wurde kürzlich ein ausführlicher Artikel über Techniken und Werkzeuge für den Wireframing-Prozess veröffentlicht.

In der Liste finden sich neben Offline-Anwendungen auch viele Webdienste, die das Erstellen von Mock-Ups erlauben — MockFlow und iPlotz zählen sicherlich zu den bekanntesten Wireframing-Tools. Die altbekannte Firefox-Erweiterung Pencil wurde kürzlich aktualisiert und kann zudem auch als Standalone-Version heruntergeladen werden. Mit den Design Stencils von Yahoo! oder Konigi stehen fertige Schablonen zur Verfügung.
Schließlich sollte man im Hinterkopf behalten, dass Wireframes einfache Strichzeichnungen darstellen, die auch auf dem Papier erstellt werden können. Bei "A List Apart" findet sich zu diesem Thema ein schöner Beitrag.

Statistik: Das Internet 2009 als große Infografik

Vor ein paar Wochen gab es einen interessanten Artikel, in dem der Stand des Internets 2009 in Zahlen festgehalten wurde. Bei Focus Research gibt es eine schöne Infografik (The State of the Internet), die weitere Zahlen und Fakten des Webs 2009 übersichtlich darstellt. Dabei geht es vor allem um die Nutzergruppen und deren Persönlichkeit — dazu zählen beispielsweise Bildungsstand, Geschlecht oder Alter.

Die Statistiken sind so zu verstehen, dass man sich eine Personengruppe von 100 Menschen vorstellen muss, die befragt wurden. So nutzen beispielsweise jeweils 74 von 100 Männern und Frauen das Internet. Die Zahlen stammen von verschiedenen Quellen — die Statistiken über Blogger setzen sich zum Beispiel aus den Daten von Technorati zusammen, was jedoch nicht bedeutet, dass jeder Weblog bei Technorati zu finden ist. Genauso wie Browser-Statistiken sollte man solche Zahlen lediglich als Richtwert oder Trend ansehen, da sich die Gegebenheiten von Land zu Land zum Teil stark unterscheiden.

Dia: Einfache Diagramme und Mock-Ups erstellen

Für Graphen und einfache Zeichnungen sind moderne Grafikprogramme in der Regel überdimensioniert. Schematische Darstellungen, Fluss- und Ablaufdiagramme, Datenbankabfragen oder grobe Layouts (Mock-Ups) lassen sich am besten in Anwendungen erstellen, die dafür konzipiert wurden und ein anderes Ziel verfolgen: Hierbei spielen weniger die grafischen Effekte als der eigentliche Aufbau und die Platzierung von Elementen eine Rolle.
Als sehr schöne Software für diese Zwecke erweist sich so zum Beispiel Dia. Die Linux-Anwendung gibt es mittlerweile auch für Windows und bietet gute Funktionalitäten. Neben geometrischen Grundfiguren und Linien finden sich in dem Open Source-Programm etliche Objektbibliotheken, die auch Cliparts für Datenbanken, Netzwerke oder isometrische Karten enthalten. Die Raster-Funktion (Grid) ermöglicht das exakte Erstellen von Layouts und Übersichten. Linien und Pfeile können automatisch als Verbindungselemente eingestellt werden. Strichstärke und -typ sowie Farben oder Texte der Elemente können nach Belieben angepasst werden.

Interessant sind die Zeichenfähigkeiten der Anwendung: Geschwungene Linien und Bezierkurven lassen sich erstaunlich gut editieren und die erstellten Grafiken können sowohl in Pixelformaten (PNG, JPG, etc.) als auch in Vektorformaten wie EPS oder PDF abgespeichert werden.
Grafisch hochwertige Diagramme lassen sich wie gehabt mit yEd realisieren. Einen Online-Dienst für diesen Einsatzzweck gibt es mit Gliffy.

User Experience Quotes: Benutzer und das Design

Gutes Web- oder Screendesign zeichnet sich vor allem durch ein hohes Maß an Benutzerfreundlichkeit aus. Einfache Bedienbarkeit kommt nicht von ungefähr und neben der eigentlichen Gestaltung spielt der Aspekt der Benutzerführung eine wichtige Rolle bei der Mediengestaltung. User Interface Design baut auf bestehenden Verhaltensarten und Denkweisen auf, weshalb die Regeln für gute Bedienkonzepte bereits bestehen. Dennoch kann es gerade bei komplexeren Anwendungen und Projekten schwierig werden, eine durchgängige und intuitive Benutzeroberfläche zu schaffen.
Eine kleine Hilfestellung für die Überlegungen können Leitsätze oder Gedanken sein, die sich bewährt haben oder das Problem aus einer anderen Perspektive betrachten. Der Tumblr-Blog "User Experience Quotes" von Szymon Błaszczyk trägt populäre Zitate von diversen Designern, Schriftstellern oder Buchautoren zusammen, die zudem ansprechend präsentiert werden.

Die Leitsätze stammen unter Anderem von Jakob Nielsen, Thomas Mann, Steve Jobs oder Don Norman. In vielen Aussagen wird man sehr gute Tipps und Anregungen für den Umgang mit Design oder Benutzeroberflächen wiederfinden.
Im Netz finden sich noch weitere Anlaufstellen für derartige Zitate: UX Quotes oder inspireUX bieten ebenfalls sehr schöne Gedanken zum Thema Benutzerfreundlichkeit. Das deutsche Pendant, das mittlerweile allseits bekannt sein dürfte, stellt DesignPhrasen.de dar.

Spezify: Visuelle Suchmaschine ohne Textlinks

Alternative und experimentelle Suchmaschinen tauchen immer häufiger im Web auf. Neben Kngine oder Fefoo steht mit Spezify eine weitere Suchmaschine zur Verfügung, welche die Ergebnisse nicht als blanke Textlinks präsentiert. Bei Spezify setzt man auf visuelle Darstellung und Interaktivität — dabei werden Resultate aus verschiedenen Medientypen wie Bildern, Blogs, Videos oder Microblogs (Twitter) dargestellt.

Die Flash-Anwendung zeigt interessante Ergebnisse an, zu denen etwa auch Links zu Büchern oder Wikipedia-Artikeln gehören. Sicherlich ist Anhäufung vieler Vorschaubilder nicht für jeden Benutzer die beste Ansicht. Dennoch macht es Spaß, mit Spezify Bilder und Videos zu einem bestimmten Thema zu durchstöbern und womöglich wird eine ähnliche visuelle Darstellung von Suchergebnissen auch bald in Google oder Bing Einzug erhalten.

Text 2 Mind Map: Diagramme aus Texten erstellen

Bei vielen Projekten für das Web kann es notwendig oder hilfreich sein, bestimmte Abläufe oder Verhältnisse in einem Diagramm festzuhalten. Beispiele dafür könnten die Seitenstruktur einer Website (Sitemap) oder Abläufe von Benutzerinteraktionen sein. Ein derartiges Fluss- oder Sterndiagramm kann dabei helfen, eine Übersicht zu schaffen und eventuelle Barrieren ausfindig zu machen.
Schnell und unkompliziert lassen sich einfache Mind Maps (oder Flowcharts) mit der Webanwendung "Text 2 Mind Map" erstellen. Die Website konvertiert Text anhand von Tabulatoren in entsprechend gegliederte Diagramme.

Das experimentelle Werkzeug ist sehr einfach zu bedienen und bietet Benutzern die Möglichkeit, die generierte Mind Map als JPG-Grafik abzuspeichern (Pop-Ups müssen dafür zugelassen werden) — hierbei sollte in den Vollbild-Modus geschaltet werden. Mit der "Freeze map"-Funktion können die Knotenpunkte verschoben werden. Zudem lassen sich die Diagramme in ihrer Strichstärke, Farbe und Schriftgröße anpassen.
Die Arbeit an "Text 2 Mind Map" befindet sich noch in der Entwicklung. Das Tool ist dafür konzipiert, schnell Übersichten zu erstellen. Parallele Linien, Raster oder weitere Einstellungsmöglichkeiten bietet die Flash-Anwendung nicht an. Für aufwendige Graphen oder Diagramme kann beispielsweise die Software yEd eingesetzt werden. Für Entwickler, die solche Mind Maps auf einer Website integrieren möchten, ist stets das JavaScript InfoVis Toolkit zu empfehlen.

UserPlus: Tipps und Beispiele für mehr Usability

Ein Gespür für Benutzerfreundlichkeit und gute Bedienkonzepte ist wichtig für die Gestaltung von Websites und Bildschirmanwendungen. Tipps und Anleitungen für bewährte Bedienelemente gibt es zum Beispiel mit der Yahoo! Design Pattern Library — dort finden sich Webdesign-Elemente und Anwendungsbeispiele mit entsprechenden Hilfestellungen zur Problematik.
Ein ähnliches Projekt mit vielen Hinweisen findet sich bei UserPlus. Auf der Seite finden sich ausführliche Analysen über Bedienelemente und etliche Beispiele für Design Patterns.

Ein Beispiel enthält einen Screenshot des Bedienelements und zeigt Lösungsansätze und Hilfestellungen für die Verwendung von Entwurfsmustern auf. So lässt sich sehr schön nachlesen, auf welche Punkte und Hindernisse man bei der Konzeption von Screendesigns achten sollte.
Weiterhin gibt es bei UserPlus interessante Werkzeuge wie die User Experience Design Toolbox, die kurze Tipps zu den verschiedenen Aspekten der Benutzerfreundlichkeit liefert.
Visuelle Inspirationen und aktuelle Beispiele für Design Patterns finden sich beispielsweise bei Pattern Tap.