Sign Up Forms Must Die! – Luke Wroblewski

Auf der Warm Gun Design Conference in San Francisco hat Luke Wroblewski, Autor von Web Form Design, über die Alternativen von Sign Up Forms gesprochen. Er stellt dabei drei Alternativen genauer vor: web services, communication tools, and gradual engagement.

Sign-up forms must die. Because, frankly we can do better than asking people to fill in a bunch of input fields when they want to use our products. In fact, we can get people engaged with digital services in a way that tells them how such services work and why they should care enough to use them. We can do this without explicitly making them fill out a sign-up form as a first step.

Ab Minute 24:15 beginnt sein Vortrag und er dauert ca. 18 Minuten. Leider ist die Qualität nicht ganz so gut, sie reicht aber, um alles zu verstehen.

Seine Folien gibt es außerdem als PDF zum Download.

via

Wochenend-Lektüre #8

wochenend-lektuere

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

hover ist tot, lang lebe acitve

hover active pseudoklasse css

Ursprünglich als Visualisierung einer Link-“Berühung” gedacht, werden mittlerweile auch andere Elemente mit der Pseudoklasse :hover modifiziert und erweitert. Laut der W3C-Spezifikation ist es zugelassen, die Eigenschaft für alle HTML-Elemente zu verwenden, also z.B. auch für input, table oder div-Container. Ob diese Anwendungen immer sinnvoll und aus Usability-Sicht von Vorteil sind, ist eine andere Frage. Richtig eingesetzt kann der Einsatz der Pseudoklasse aber große Usability-Verbesserungen mit sich bringen, z.B. in großen unübersichtlichen Tabellen, bei denen man zur besseren Übersicht Zeilen und Spalten markiert.

Dennoch ist mit der Entwicklung des mobilen Webs und der Steuerung über Touchscreens ein Umdenken erforderlich. Ganz so dramatisch wie im provokativen Titel behauptet, ist es natürlich nicht. Die Pseudoklasse :hover ist mit seinen vielen Möglichkeiten für Designer im heutigen Webdesign kaum wegzudenken und wird bei klassischen Websites auch weiterhin ihre Daseinsberechtigung haben. Bei der Arbeit mit modernen Touchscreen-Interfaces wird man allerdings auf die Hilfe der Klasse verzichten müssen, denn dieser Status ist beim neuen Bedienkonzept nicht mehr abbildbar. Eine Herausforderung für jeden Designer, denn für eine gute Usability galt bisher immer, dass ein Link mit einem Hover-Status versehen werden muss. Der Status dient als zusätzliches Merkmal, einen Link oder Button kenntlich zu machen. Viele Nutzer „erkunden“ Websites mit dem Mauszeiger und werden so durch Hover-Effekte auf Links aufmerksam. Für das Design neuerer Interfaces gilt: Klickbare Flächen und Elemente müssen auf ersten Blick und ohne “Ausprobieren” und langes Erkunden als solche erkennbar sein, Buttons müssen ganz klar gekennzeichnet werden, denn: Der permanente “Cursor” wird durch den temporären Finger ersetzt wird.

Richtig problematisch wird es bei Anwendungen, bei denen Funktionen über :hover aktiviert und deaktiviert werden und die dann über Touchscreens schnell nicht mehr navigierbar sind.

Aber was hat :hover mit :active zu tun?

Im Prinzip erstmal nichts, außer, dass es sich bei :active ebenfalls um eine Pseudoklassen handelt, die den nachfolgenden Status von :hover beschreibt. :active wird in dem Moment aktiv, in dem ein Nutzer einen Klick ausführt. Oft wird hinter der Klasse die Funktion vermutet, ausgewählte Links zu markieren, aber es handelt sich wirklich nur um den kurzen Moment des Ausführens.
Bisher lag die Klasse eher im Schatten von :hover und wird immer noch oft vernachlässigt. Jetzt könnte sie aber helfen, die Lücke, die das Wegfallen von :hover hinterlässt, zu schließen. Da der Nutzer nicht mehr sieht ob er gerade einen Link oder klickbarers Element berührt, wird es umso wichtiger dem Nutzer ein Signal zurückzugeben, sobald eine Funktion “ausgeführt” wird.

Was meint ihr? Ist die Herausforderung für den Designer, eine gute Usability zu erreichen, durch den Wegfall größer geworden? Oder gibt es noch andere Alternativen?

UPDATE: Apple arbeitet einem kürzlich veröffentlichten Patent zufolge an der Umsetzung von hover-Gesten für Multi-touch-Geräte.

Wochenend-Lektüre #7

wochenend-lektuere

Wieder mal ein paar Artikel, die mir in dieser Woche auf gefallen sind:

  • What Is User Experience Design?
    Schöner und ausführlicher Artikel im Smashing Magazine mit Erklärungen, Ressourcen und Tools zum Thema User Experience Design.
  • Advice for design students
    Wer gerade in einem Design-Studium steckt, kurz davor steht oder es bereits abgeschlossen hat, findet bei David Airey ein paar nützliche Tipps.
  • The discipline to write daily
    Ich bewundere Blogger, die es schaffen, täglich neue Artikel zu schreiben. Chris Brogan schreibt über die Disziplin, genau das zu schaffen.
  • 35 Excellent Wireframing Resources
    Auf Noupe.com wurde eine große Liste mit Ressoucen zu Wireframes zusammen gestellt.

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Wireframe vs. MockUp

Was ist eigentlich der genaue Unterschied zwischen einem Wireframe und einem Mockup? Bei der Entwicklung von Websites stößt man in der Konzeptionsphase wahrscheinlich auf beide Begriffe. Oft werden sie allerdings verwechselt oder sollen das selbe meinen: grobe Skizzen, Entwürfe oder Vorformen einer Website zur Konzeption, Veranschaulichung und Abstimmung mit dem Kunden. Dennoch gibt es grundlegende Unterschiede zwischen beiden Instrumenten:

Wireframe – function & layout

definition-wireframe

Zum Thema Wireframes habe ich bei der Vorstellung einiger webbasierter Tools schon ein bisschen was geschrieben. Es gibt keine vorgeschrieben Richtlinien, was ein Wireframe beinhalten muss oder nicht darf, über die meisten Punkte herrscht allerdings weitgehend Einigkeit.
Ein Wireframe fällt in das Aufgabenfeld eines User Experience Designers und beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typography, Bilder oder Grafiken. Es handelt sich um eine skizzenähnliche Beschreibung und Darstellung (Gittermodell) von Funktionen und Layout und setzt den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts und der Usability.
Der Detailgrad kann sich dabei von Projekt zu Projekt stark unterscheiden. Es sollte nur das Nötigste dargestellt werden, um die oben genannten Punkte zu erfüllen.

Variation: Ab und zu findet man Wireframes auch in Verbindung mit so genannten Mood Boards. Ein Mood Board soll mit Farben und Fotos den Stil und das “Gefühl” des fertigen Endprodukts vermitteln. In Kombination mit einem Wireframe kann man so in einigen Fällen das Erstellen von Mockups überspringen. Wer mehr über Mood Boards lesen will, dem empfehle ich den Artikel von Jakub Linowski über Wireframe Mood Boards.

Tools zum Erstellen von Wireframes: Diagramm-Software, z.B. OmniGraffle oder verschiedene Online Tools

MockUp – form, design & visual

unterschied definition wireframe mockup

Ein Mockup ist in der Webentwicklung im Prinzip der nächste Schritt nach dem Wireframing und baut auf dessen Struktur auf. Hier ist nun der Designer an der Reihe und darf mit Farben, Typography, Bildern und Grafikelementen arbeiten und so ein vorläufiges Design mit einzelnen visualisierten Elementen entwickeln. Der Detailgrad ist um einiges höher als in Wireframes und das Mockup sollte im besten Fall schon look and feel der fertigen Website vermitteln, stellt aber noch nicht das finale Design dar.

Ein MockUp bietet sich daher meist besser für Kundenpräsentationen an, da ein Wireframe über look and feel (meistens sehr wichtig für den Kunden) so gut wie nichts aussagt. Trotzdem sollte man sich in Acht nehmen und gut kommunizieren in welcher Entwicklungsphase sich der Entwurf befindet, da ein Mockup vom Kunden leicht als fast fertiges Produkt interpretiert werden könnte und dann oft Diskussionen über kleinste Details und Formulierungen beginnen.

Tools zum Erstellen von Mockups: gängige Grafikprogramme, wie z.B. Photoshop oder Fireworks


Häufig wird bei kleineren Projekten nur eines dieser Instrumente genutzt. Auch bei 37signals hat man sich dazu entschieden, die Erstellung eines Mockups in Photoshop einfach zu überspringen und gleich einen HTML/CSS-Prototypen zu bauen.
Die Erstellung eines Prototypen (auch Click-Dummy genannt) wäre der nächste Schritt im Entwicklungsprozess. Er ermöglicht bereits Interaktion und macht die Entwürfe so navigierbar. Viele Tools bieten mittlerweile auch die automatische Generierung eines Prototypen aus den Wireframes oder Mockups an.

World Usability Day 2010: Kommunikation

World Usability Day 2010 Hamburg

Am 11. November 2010 ist wieder World Usability Day, diesmal mit dem Motto Kommunikation. Zum 6. mal finden in diesem Rahmen regionale Veranstaltungen in verschiedenen Städten statt. Auch in Hamburg stellt die HAW wieder ihre Räumlichkeiten für Workshops und Vorträge zur Verfügung.

Das geplante Programm für den Tag:

  • 11:00 – 14:00 Uhr: Workshops
  • 15:00 – 18:30 Uhr: WUDCamp-Sessions (Vorträge, Diskussionen etc.)
  • ab 19:30 Uhr Get-together

Das WUDCamp soll wie ein BarCamp aufgebaut sein, so dass jeder die Möglichkeit hat, Vorträge einzureichen oder Themen vorzuschlagen. Wer gerne teilnehmen möchte, findet auf der Regionalseite mehr Infos. Auf das Video-Archiv der letztjährigen Vorträge hatte ich ja bereits in der Wochenend-Lektüre #5 verwiesen, dort kann man sich schon mal einen Eindruck verschaffen.

Wer da dann schon mal vor Ort ist, kann gleich im Anschluss mit dem BarCamp HH weitermachen, das am 12. und 13. November stattfindet.

Deutsche Bahn erneuert User Interface der Fahrkartenautomaten

neues ui deutsche bahn

Am 1. Oktober hat die Deutsche Bahn angefangen ein neues User Interface, das schon auf der Innotrans vorgestellt wurde, auf alle Fahrkartenautomaten zu spielen. Mittlerweile müsste das Design bundesweit an allen Bahnhöfen zu sehen sein. Da es sich nicht nur um ein paar kleine Korrekturen und Anpassungen handelt, sondern um ein komplett neues Design, möchte ich hier ein paar erste Eindrücke schildern und ein paar Bilder zeigen. Bei den Bildern muss ich mich allerdings für die Qualität entschuldigen, da ich gestern leider nur mein iPhone zur Hand hatte. Die Änderungen sollten aber deutlich genug erkennbar sein.

Farben

Man hat sich vom dominierenden Dunkelblau im Hintergrund verabschiedet und setzt jetzt auf Grau und Weiß als Hauptfarben. Für Button-Variationen kommen zudem noch Rot (ausgewählter Status) und Grün (wichtige weiterführende Elemente) zum Einsatz.
Der Kontrast leidet durch die neue Farbwahl leider etwas. Gerade bei starkem Lichteinfall wird es wahrscheinlich Probleme mit der Lesbarkeit geben.

Stil

Der alten Benutzeroberfläche sah man ihr Alter durchaus an. Das neue Design kommt modern und schlicht daher. Für die dreidimensionale Erscheinung der Buttons sorgen nicht mehr abgeflachte Kanten sondern Schatten und Farbverläufe. Insgesamt wirkt das ganze Interface nicht mehr so klobig und kühl sondern viel weicher und freundlicher als zuvor. Dazu tragen auch die runden Ecken bei. Ab sofort stellen Lightboxen Informationen zu einzelnen Funktionen dar (über die i-Buttons erreichbar).

Funktionen und Struktur

Funktional und strukturell hat sich kaum etwas geändert. Wer schon öfter DB-Automaten bedient hat, muss sich auf keine großen Änderungen gefasst machen und wird sich auch weiterhin schnell zurechtfinden. Ich habe nicht alle Funktionen getestet, sondern nur den Verlauf eines Fahrkartenkaufs durchgespielte.

Fazit

Aus meiner Sicht war eine so drastische Veränderung des Design nicht unbedingt notwendig, auch wenn die alte Oberfläche optisch natürlich überholt schien. Das Redesign ist zwar durchaus gut gelungen, aber ohne die Usability spürbar zu verbessern. Was meint ihr, ist die Neugestaltung des User Interfaces gerechtfertigt oder vollkommen überflüssig?

Nun aber zu den Bildern:
Neues User Interface Deutsche Bahn Fahrkartenautomaten

Neues User Interface Deutsche Bahn Fahrkartenautomaten

Weitere Bilder des neuen Interface anschauen …

And the winner is…

Gestern Abend ist das erste Gewinnspiel hier auf meinem Blog zu ende gegangen. Vielen Dank für eure Teilnahme und die Verbreitung!

Aber jetzt kurz und schmerzlos zur wichtigsten Info: Der Gewinner ist housebreaker! Herzlichen Glückwunsch! Ich werde den Gewinner gleich per Email benachrichtigen und dann so schnell wie möglich das Buch versenden. (Wenn ich keine Antwort erhalte, wird das Buch neu verlost)

Für die zufällige Auslosung habe ich radom.org genutzt. Das ganze hat wirklich Spaß gemacht, also noch mal vielen Dank! Die Nicht-Gewinner müssen auch nicht traurig sein, denn es wird hier bestimmt nicht das letzte Gewinnspiel gewesen sein. Vielleicht geht es ja schon zur Adventszeit weiter :)

Wochenend-Lektüre #6

wochenend-lektuere

  • Going Freemium: One Year Later
    Ben von MailChimp zieht ausführlich Bilanz der ersten 12 Monate nach dem Wechsel auf das Freemium-Model. Zusätzlich gibt es noch Einblicke in die Geschichte von MailChimp.
  • Guiding the user with a call to action
    Immer wieder ein spannendes und komplexes Thema: Call to action und Web Design.
  • Match te tool to the problem
    Sketches, Wireframes, Mock-ups oder HTML Prototypen? Für jedes Projekt/Problem gibt unterschiedliche Anforderungen und dadurch auch angepasste Vorgehensweisen.
  • UX Myths
    Auf UXMyths.com werden User Experience Mythen (bisher 25) aufgedeckt und Erklärungen geliefert, warum sie nicht wahr sind.
  • UXpod – User Experience Podcast
    Hier findet ihr eine große Auswahl (über 50 Folgen) des UXpods mit Interviews und Kommentaren zum Thema User Experience Design.
  • Ten Things I Have Learned
    Zum Schluss noch ein Teil des AIGA Talk in London von 2001.

Viel Spaß und ein schönes Wochenende!

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Nächster bitte – Gedanken zu Usability und Pagination

Ich stoße in letzter Zeit beim Lesen verschiedener Blogs immer wieder auf das gleiche Problem oder besser gesagt auf die gleiche Frage. Thema ist die Pagination, die man in gefühlten 100 verschiedenen Ausführungen im Netz zu sehen bekommt. Nicht nur grafisch unterscheiden diese sich, sondern auch in ihrer Funktionalität. Grundsätzlich lassen sich erstmal 2 Varianten ausmachen:

Variante A zeigt die Seitenzahlen und aktuelle Position an (Oberes Beispiel google.de), Variante B gibt nur die Möglichkeit vor und zurück zu blättern (Unteres Beispiel techcrunch.com):

Pagination auf google.de

Pagination auf techcrunch.com

Problem bei Variante B: Es scheint keine einheitliche Lösung zu geben, in welcher Richtung ältere und neuere Beiträge erreichbar sind.

Wir sind es in unserem kulturellen Raum durch Bücher und Zeitstrahle (Mehrzahl?) gewohnt, uns von links nach rechts zu bewegen, bzw. zu lesen. Diese Tatsache ist so gelernt und intuitiv. Bei einem Blog oder einer Webseite handelt es sich meist ebenfalls um eine chronologische Auflistung von Einträgen. Wenn man die gelernten Mechanismen anwendet, sollte der Aufbau also so aussehen: links -> ältere Beiträge, rechts -> neuere Beiträge

Bei einer über beschreibende Text-Links, wie z.B. “ältere Beiträge” oder “neuere Beiträge”, gesteuerten Paginatin, ist eine “verdrehte” Anordnung noch als Schönheitsfehler zu verkraften. Zu einem echten Problem wird es aber, wenn die Pagination über Pfeile gesteuert wird und nicht erkenntlich ist, wo der User klicken muss, um die nächsten gewünschten Inhalte zu finden.

Ist euch das Problem ebenfalls aufgefallen? Ist eine Website ein Sonderfall und anders zu handhaben?

pagination-usability

Weitere Gedanken dazu gibt es außerdem bei Total Usability

Page 21 of 32« First...10...192021222324...30...Last »