Tag: usability

201025Aug

Webdesign: Muster für interaktive Bedienelemente

Umfangreiche und anschauliche Bücher stellen neben Ressourcen aus dem Internet die beste Methode dar, um sich mit einem Thema vertraut zu machen. Ein schönes Werk zum Thema Web-Benutzeroberflächen stellt beispielsweise ein Buch vom O’Reilly-Verlag dar, in dem Prinzipien und Entwurfsmuster für interaktive Web-Auftritte behandelt werden. Passend zum Buch gibt es eine Website, auf der sich die Inhalte des Buches in einer kurzen Übersicht betrachten lassen. Weiterhin finden sich auf der Seite aber auch interessante Blog-Artikel: In diesem Beitrag werden 12 Beispiele zu bekannten Bedienelementen vorgestellt und beschrieben.

Designing Web Interfaces - 12 Standard Screen Patterns

Dabei geht es also hauptsächlich um die Gestaltung und Darstellung von Spalten, Tabellen, Suchergebnissen, Formularen, Paletten oder sonstigen Anwendungsbereichen. In dem Beitrag finden sich zu jedem Entwurfsmuster verschiedene Screenshots von vorbildlichen Beispielen.
Weiterhin gibt es in dem Blog schöne Beiträge über Web-Komponenten oder interaktive Steuerelemente von Websites. Einen guten Artikel über die zukünftige Welt des User Interface Designs gab es übrigens im Februar bei WebDesignerWall.

201027Jul

User Interface Design: Richtlinien und Sammlungen

Um die Benutzerfreundlichkeit einer Website zu verbessern, bieten sich verschiedene Möglichkeiten und Lösungswege an. Inzwischen gibt es sehr gute Quellen im Netz wie etwa die Seite "Usable Efficiency", auf der sich gute Videos zum Thema finden. Eine weitere Seite rund um die Aspekte von User Interface Design stellt Konigi dar. Neben aktuellen Projekten aus der UX-Szene und einer Website-Galerie finden sich auf der Seite mittlerweile viele wertvolle Ressourcen.

Konigi - User Interface Style Guides

Dazu zählen zum einen die User Interface Style Guides, die verschiedene Bereiche abdecken, um das Erscheinungsbild eines Produkts durchgängig zu gestalten. Weiterhin gibt es die User Interface Guidelines, bei denen sich etliche Dokumente zur Herstellung von intuitiven Bedienkonzepten finden (darunter auch Apple, Microsoft oder Nokia). Schließlich gibt es im Konigi-Wiki noch die Seite der Design Pattern Repositories, auf der eine Liste mit diversen Sammlungen enthalten ist. Dazu zählen User Interface-Elemente und Beschreibungen zu deren Gebrauch. Aktuelle Seiten dieser Kategorie sind beispielsweise UI-Patterns.com oder Pattern App.

201005Jul

UX Myths: Mythen über Benutzerfreundlichkeit

Es gibt viele Fakten und Überzeugungen im Bereich des Webdesigns, die sich mehr oder weniger durchgesetzt haben. Allerdings beruhen nicht alle Behauptungen auf wahren Gegebenheiten oder stellen sich als hilfreich heraus. Um ein paar solcher Mythen zu klären, hat man die Website UX Myths ins Leben gerufen — hier finden sich diverse Aussagen, die mit entsprechenden Nachforschungen widerlegt werden.

UX Myths

Auf der Seite gibt es derzeit 21 solcher Webdesign-Mythen, welche die unterschiedlichsten Bereiche abdecken. So wird etwa geklärt, dass beispielhafter Inhalt ("Lorem ipsum") nicht die beste Wahl für neue Web-Projekte darstellt, da die Arbeit mit Blindtexten unter Umständen zu falschen Design-Optimierungen und anderen Fehlern führen kann. Weiterhin gibt es Gedanken zu Icons bei Webdesign, Flash-Seiten und anderen Mythen.
Natürlich sollen die auf der Seite aufgeführten Erkenntnisse lediglich als Richtlinien und Hilfestellungen gelten. Durchaus finden sich dort aber viele Hinweise, die man bei dem nächsten Design-Prozess einfließen lassen kann.

201004Jul

Anologue: Anonyme Chaträume per Knopfdruck

E-Mail-Nachrichten stellen längst nicht mehr das einzige Kommunikationsmittel dar, über das sich im Internet Informationen austauschen lassen. Neben beliebten Instant Messengern gibt es etliche Dienste oder etwa "Google Wave", wodurch sich Benutzer Nachrichten übermitteln können. Wer einen einfachen und direkten Weg sucht, mit anderen Leuten unkompliziert eine Online-Konversation zu führen, könnte sich Anologue ansehen — hierbei kann per Knopfdruck ein permanenter Link generiert werden, der einen anonymen Chatroom eröffnet und somit an die gewünschten Teilnehmer verschickt werden kann.

Anologue

Der Entwickler von Anologue suchte eine bessere Möglichkeit, um sich mit anderen Leuten direkt austauschen zu können. Sein kleines Projekt bietet alle benötigten Optionen, die für einen einfachen Chatraum erforderlich sind. So können optional ein Benutzername und eine E-Mail-Adresse eingegeben werden, um anschließend an der Konversation teilzunehmen. Anologue wurde mit dem Lithium-Framework und CouchDB umgesetzt und funktioniert auch in Internet Explorer sehr gut. Das Projekt steht zudem als Open Source-Projekt zur Verfügung und gewährt dadurch auch einen Blick hinter die Kulissen.

201024Jun

Bounce: Feedback zu Websites erstellen und teilen

Wenn ein Webprojekt von mehreren Stellen aus bearbeitet und entwickelt wird, sind Feedback und Abstimmung unter den Beteiligten wichtige Punkte, die für die Fertigstellung eines Projekts benötigt werden. Eine schöne Lösung für die Abstimmung per Browser steht mit Bounce bereit — mit dem Online-Service können per Knopfdruck Screenshots von Websites erstellt werden, die anschließend mit Kommentaren und Notizen versehen werden können. Der markierte Screenshot kann dann über einen permanenten Link an Kollegen weitergegeben werden, so dass die offenen Punkte bearbeitet werden können.

Bounce

Bounce unterstützt die Verteilung des Feedback-Screenshots auch per Facebook oder Twitter. Bestehende Notizen können von anderen Benutzern nicht verändert werden. Dafür können neue Kommentare hinzugefügt und ein neuer permanenter Link generiert werden.
Hinter diesem Projekt steht die Agentur ZURB, die mit Bounce auf ihre App Notable aufmerksam machen möchte. Eine iPhone-App für das Erstellen von Feedback-Seiten gibt es ebenfalls. Kürzlich wurde mit Launchlist ein ähnliches Projekt gestartet, durch das Websites vor dem Launch von mehreren Personen anhand einer Liste überprüft werden können.

201022Jun

Mensch: Monospace-Schriftart für Entwickler

Das Frage nach einem ästhetischen Code-Alltag dürfte sich bei vielen Entwicklern hauptsächlich durch die Wahl der passenden Schriftart klären lassen. Eine schöne Auflistung zu dieser Thematik gab es vor einiger Zeit bei Hivelogic, in der die beliebtesten Monospace-Fonts dargestellt werden. Die Quelltext-Welten sind längst nicht mehr geprägt von "Courier New" oder Monaco — mit "Inconsolata" oder "Deja Vu Sans Mono" stehen moderne Monospace-Schriftarten zur Auswahl, die durch gut lesbare Zeichen überzeugen.
Die neueste Kreation für anspruchsvolle Programmierer heißt Mensch und stammt von Robey Pointer.

Mensch - A coding font

Die Schriftart funktioniert in verschiedenen Größen und weist ein individuelles Schriftbild aus. Wer die Monospace-Font ausprobieren möchte, kann sich die TTF-Datei auf der Website des Autors herunterladen. Lediglich das "+"-Zeichen könnte eine Überarbeitung vertragen. Mehr Individualismus im Code ist durch den "Color Theme Generator" möglich.

201015Jun

User-Centered Design: Infografik als Poster

Zum Thema "User-Centered Design" hat sich der Grafikdesign-Student Pascal Raabe viele Gedanken gemacht und diese in einer großen Infografik übersichtlich zusammengefasst. Bei dieser Thematik geht es darum, die etlichen Aspekte eines guten Designs zu klären, die sich über verschiedene Bereiche erstrecken: So muss zum einen erörtert werden, wie Benutzer eine grafische Oberfläche bedienen und welche möglichen Barrieren dabei entstehen können. Weiterhin sollten die bisherigen Design-Erfahrungen und der Wissensstand der Zielgruppe bekannt sein, um ein Design auf diese Anforderungen auslegen zu können.

User Centred Design - Infographic Poster by Pascal Raabe

Pascal Raabe hat die verschiedenen Stadien des Designprozesses sehr schön veranschaulicht und mit kleinen Texten erklärt. So finden sich Informationen und Illustrationen zu den Themen Analyse, Planung, Konzept, Design, Implementierung und Auswertung. Die einzelnen Schritte des gesamten Prozesses sollten für ein optimales Design mehrfach durchgeführt werden, bis die Anforderungen des Designs schließlich den minimalen Voraussetzungen der Zielgruppe entsprechen.
Die Infografik steht als JPG- und PDF-Datei zum Download bereit und kann zudem für umgerechnet 18 EUR als gedrucktes Poster bestellt werden.

201004Jun

Usable Efficiency: Videos über Benutzerfreundlichkeit

Moderne Websites sollten heute einen gewissen Standard an Bedienbarkeit und Zugänglichkeit erfüllen, damit sie leicht verstanden werden und einfach zu bedienen sind. Viele Tipps zur Verbesserung der Benutzerfreundlichkeit finden sich beispielsweise bei UserPlus. Nun wurde eine Seite ins Leben gerufen, auf der sich diverse Videos finden, die verschiedene Aspekte von Website-Usability beleuchten: Bei "Usable Efficiency" gibt es mittlerweile 3 Episoden, die auch noch im Vollbild eine gute Qualität aufweisen.

Usable Efficiency

Bei den bisherigen Themen geht es um die Nutzung von Weißräumen (White Space), PNG-Optimierung und häufige Fehler, die bei der Gestaltung von Web-Projekten gemacht werden. Die Videos sind verständlich und zu jeder Episode gibt es noch einmal die wichtigsten Punkte im HTML-Format. Die Seite wird sicherlich noch einige Themen behandeln und Episode 4 befindet sich bereits in der Produktion.