FadeIn und FadeOut werden zum neuen Aufmerksamkeits-Lenker. 5 Beispiele.
Google macht es, Twitter macht es, ein Shop und ein Blog machen es. Quasi alle coolen Jungs vom Block. OK, und Windows 7 auch.
Es geht um das Einblenden und Ausblenden von Teilen des Interface, um die Aufmerksamkeit der Nutzer noch gezielter zu lenken.
Am einfachsten erkennt man das Potential dieser Technik am Beispiel:
Beispiel 1: Twitter und seine Suchbox
Weiterlesen und kommentieren (4 Kommentare)
Bitte nicht stören – es sei denn, es ist wichtig!
Microsoft hat beim 2010er Release von Office offenbar den Umstand gewürdigt, dass immer mehr Nutzer über das Netzwerk auf Dokumente zugreifen – und dass eine Netzwerkverbindung auch im Jahr 2010 nicht immer zur Verfügung steht. Das ist grundsätzlich wirklich begrüßenswert.
Bei der Vorversion hatte ich oft Probleme damit, wenn ich ein Office-Dokument von einem Sharepoint-Server geöffnet habe, dann die Netzwerkverbindung gekappt habe (um z.B. den Laptop mit in eine Besprechung zu nehmen) und das Dokument dann schließlich wieder speichern wollte. Hier hing das alte Office nicht selten in einem undefinierbaren Zustand fest. Das soll nun mit dem Upload-Manager der Vergangenheit angehören.
Nun das »Aber«
Neue Tools haben allerdings auch das Potential, neue Probleme zu erschaffen. Leider ist der Upload-Manager nicht sonderlich gesprächig. Wenn das Speichern eines Dokuments auf dem Server (z.B. mit Strg+S bzw. über Datei > Speichern) fehlschlägt, bekommt der Nutzer nicht wie früher große, böse, modale Dialogfenster in den Weg gestellt. Die Arbeit wird gar überhaupt nicht behindert.
Die einzige Art und Weise, wie das nicht erfolgreiche Speichern quittiert wird, ist die Anzeige »Upload ausstehend« in der Statuszeile:
Für alle, denen der Warn-Charakter dieser Darstellung nicht direkt ins Auge springt, hier die Vergrößerung:
Wohl dem, der nicht nach dem Speichern das Programm schließt. Denn derjenige hätte allerhöchstens noch im Windows System Tray die Möglichkeit, auf diese Warnung zu stoßen:
Ist das nur meine empfindliche Sicht, oder hat Microsoft da tatsächlich etwas untertrieben? Nun haben wir Windows-Nutzer lange Zeit ertragen müssen, dass wir vom System mit Warnmeldungen wie »Es befinden sich ungenutzte Dateien auf dem Desktop« vor dem sonst sicheren Verderben bewahrt werden. Ich bin einverstanden, falls man sich bei Microsoft besonnen hat und mit Meldungen grundsätzlich behutsamer umgehen will. Aber die Tatsache, dass sich eine Datei nach dem Speichern – im Gegensatz zu meiner Absicht – nicht auf dem Server befindet, ist schon ein kleines bisschen mehr Aufmerksamkeit wert.
Kommentieren (5 Kommentare)
But most search engines are pursuing what they think users want. So if you're trying to build a site that puts user experience first and foremost (and you succeed in creating a fantastic user experience), most of the time search engines are working toward returning sites like yours.
Ein großartiges Statement von Matt Cutts, Principal Engineer bei Google Search Quality Team.
UX-Details: 7 Links über Custom Keyboard Design für iPhone und iPad
Jesse James Garrett schrieb vor ein paar Tagen im Adaptive Path Blog über das Potential von individuellen Tastaturlayouts von iPad- und iPhone-Applikationen und deren Einfluss auf die User Experience. Er zeigt dabei, wie die Tastatur für die jeweilige Aufgabe (URLs, Zahlen, E-Mails etc.) optimiert werden kann. Das ist in der Tat ein Thema, über das wir mehr nachdenken sollten. Hier also noch ein paar weiterführende Links.
Screenshots
Jesse hat in seinem Post selbst einige Screenshots von iPad-Keyboard-Layouts beschrieben. Eine weitere schöne Screenshotsammlung gibt es in Arnab Nandis Blog, der auch etwas interessantes über den Fragezeichen-Button herausgefunden hat.
Praxisbeispiele
Ich kannte selbst keine iPhone-App, die sich die Arbeit gemacht hat, ein eigenes Keyboard-Layout zu erstellen. Auch nicht unter den vielen Twitter-Clients, obwohl gerade hier ein eigenes Layout mit prominentem @ und # Zeichen wirklich viele Taps sparen würde und ein UX-Alleinstellungsmerkmal wäre. Nach etwas Suchen habe ich aber doch eine App gefunden: Feathers.
Das Video auf der Startseite von Feathers zeigt: Hier werden eigene Keyboard-Layouts exzessiv verwendet.
Technik
Bei Jesse klang es so, als sei es kein Problem, eigene Keyboard-Layouts zu erstellen. Trotzem muss man lange suchen, um dazu Quellen zu finden. Im Apple-Forum lernt man nur, dass es schwer ist. Hilfreicher sind da der Post von Aral Balkan (Entwickler von Feather) und der Post von Bryan S. Gruver. Kurz gesagt, kann man die Standard-Tastatur »überschreiben« und ein eigenes Interface-Feld erstellen, auf dem man dann ganz eigene Button platziert. So ist auch die Zusammenfassung auf Stackoverflow. Der Kreativität sind also kaum Grenzen gesetzt.
Fazit
Was bedeutet das für unsere iPhone- und iPad-Konzepte? – Da die technische Hürde noch recht groß zu sein scheint, können Apps sich in der nächsten Zeit mit eigenen Tastaturlayouts noch sichtbar vom Wettbewerb absetzen und ihre Liebe zum Detail greifbar machen.
Ich vermute aber, dass es schon bald Codelibraries und Tutorials geben wird, die den Aufwand eigener Layouts minimieren. Dann verlieren einige Apps zwar ihren Wettbewerbsvorteil, die allgemeine User Experience dürfte aber davon profitieren.
Kennt ihr weitere iPhone- oder iPad-Apps, die eigene Tastaturlayouts verwenden?
Kommentieren (12 Kommentare)
Update, update, update – Warum iOS-Apps ohne Updates nicht dasselbe wären
Der Update-Prozess ist entscheidend für die Ökonomie und Experience von iPhone- und iPad-Apps. Er formt die Arten von Apps, die erstellt werden, ermöglicht Kreativität, Nutzereinbeziehung (OpenInnovation) und schafft die Basis um auf einer neuen Plattform mit neuen Interaktionsparadigmen innovativ und nutzbar zu sein.
Eine so große Bedeutung hätte ich diesem Feature, das es Entwicklern und Nutzern erlaubt, kontinuierlich Updates ihrer iPhone- und iPad-Apps zu installieren, nicht direkt zugewiesen. Aber Paula Wellings hat recht in ihrem neusten Adaptive Path-Blogbeitrag:
- Gerade am iPad gibt es noch viele unausgereifte Apps (laut Paula und Nielsen/Norman). Das wäre normalerweise ein vernichtendes Urteil. Aber Entwickler und Nutzer lernen dazu und durch ständige Updates werden sich bald neue Pattern herausgebildet haben für dieses neuartige Gerät.
- Klein anfangen, ausprobieren und dann weiterentwickeln, wenn es erfolgreich ist. Dieses Grundmuster für iOS Apps ist ebenfalls von der Möglichkeit abhängig, ständig kostenlose Updates einspielen zu können.
- Mit den Nutzern weiter entwickeln. Viele kleine Updates und einfache Feedback-Kanäle wie Kommentare und Bewertungen treiben Entwickler gerade zu einem offenen Innovationsprozess der die Nutzer einbezieht. Für mich ein wichtiger Faktor von iOS Apps, auch wenn jeder OpenInnovation-Prozess eine Gratwanderung ist.
- Kontinuierliche Verbesserung. All dies schafft eine Erwartungshaltung bei uns Nutzern: Apps müssen sich kontinuierlich weiterentwickeln. Erfolgreiche Apps dürfen also nicht in zeitlich begrenzten Einzelprojekten gedacht werden.
- Offene und ehrliche Kommunikation. Wer mit wenig anfängt und auf das Wohlwollen seiner Nutzer angewiesen ist, versucht ein gutes und vertrauensvolles Verhältnis aufzubauen. Das beginnt mit ehrlichen Funktionsbeschreibungen.
Jetzt würde mich interessieren: Lest ihr die Update-Texte für die Apps auf eurem iPhone? – Ich sammele schon lange Screenshots von guten und schlechten Release-Texten am iPhone für einen potentiellen Artikel aber frage mich, welche Relevanz diese Texte wirklich haben.
Kommentieren (4 Kommentare)
Webpagetest.org mit deutschem Client-Standort
Vor ein paar Monaten haben wir hier den kostenlosen Dienst Webpagetest.org vorgestellt, mit dem sich das Ladeverhalten einer Website genau analysieren lässt.
Zum damaligen Zeitpunkt war der einzige europäische Standort, von dem aus man seine Seite abrufen lassen konnte, in England. Inzwischen sind weitere Standorte dazu gekommen, die das Testen auch für Websites mit deutschem Zielpublikum noch sinnvoller machen: Es gibt nun einen Standort in Frankfurt/Main. Wer diesen Standort nutzt, kann aktuell nur Internet Explorer 8 als Browser auswählen. Wer den älteren siebener IE testen möchte, muss z.B. auf Amsterdam umsteigen.
Auch sehr sinnvoll: Es ist nun auch möglich, den Ladevorgang bei beliebigen Bandbreiten zu simulieren. Das ist sehr zu empfehlen, wenn man wissen will, was Nutzer hinter GPRS- oder Modem-Verbindungen durchmachen.
Auch eine Art der Motivation
Warum den Nutzer immer nur mit Lob motivieren? Man kann ja auch mal Fehlverhalten bemängeln und zur Besserung aufforden.
Schön, wenn es dann auch noch in den Gesamtkontext passt, wie hier nachzuempfinden:
www.sowaswillichauch.de
Kommentare-Widget als Balkendiagramm
Ryan Carson auf Twitter:
I really love the design of the ›Most Commented‹ widget on Engadget:
Checkboxen und Radio-Buttons bequem klickbar machen – auch mobil
Ein Klassiker bei Formularen im Web ist es, dass Nutzer gezwungen werden, zur Auswahl einer Checkbox oder eines Radio-Buttons exakt auf die kleine Fläche des Kontrollelements (in der Abbildung rot markiert) zu klicken.
Dabei ist es von vielen Plattformen bekannt, dass bei dieser Anordnung auch die Beschriftung der Checkbox oder des Radio-Buttons anklickbar ist.
Auch HTML gibt uns die Möglichkeit, das entsprechend umzusetzen. Alle modernen Browser interpretieren das <label>-Tag so, dass der Inhalt dieses Tags als Klickfläche dient. Dadurch reicht es meist schon, eine Checkbox bzw. einen Radiobutton einfach in ein Label-Tag zu »verpacken«.
Der Vorteil durch die vergrößerte Klickfläche vergrößert sich, je länger die Beschriftung wird. Das gilt insbesondere dann, wenn Beschriftungen mehrzeilig sind und sich dadurch nicht nur die Breite, sondern auch die Höhe des Klickziels vergrößert.
Wer es noch nicht kennt und gerne auf die wissenschaftliche Ebene wechseln möchte: Hier geht es um Fitt’s Law.
Auf mobilen Geräten mit Touchscreen ist die Größe des Klickziels besonders wichtig, denn dort zeigt der Nutzer nicht mit einem kleinen, spitzen Mauszeiger auf das Kontrollelement, sondern mit dem Finger. Und der ist in der Regel größer als die eigentliche Checkbox bzw. der Radio-Button (»fat finger problem«).
iPhone und Android sehen daher standardmäßig in vor, dass in Formularen genau ein Formularelement pro Zeile steht. Der Nutzer kann die gesamte Zeile antippen und damit ein Element auswählen bzw. aktivieren/deaktivieren. Die nachstehende Abbildung zeigt einen Screenshot von Android 2.1. Links ist der am Gerät angezeigte Zustand zu sehen. Rechts ist die gesamte klickbare Fläsche des Checkbox-Elements hervorgehoben.
Diese Anordnung ist beim iPhone und bei Android – anders als in den Weiten des Web – ziemlich konsequent umgesetzt worden, so dass Ausnahmen hier besonders unerwartet sind.
Eine solche Ausnahme ist die Einstellungen-Seite von Foursquare, die ausgerechnet direkt über den Einstellungen-Dialog aus der Android-Applikation verlinkt wird (foursquare.com/settings).
Wer hier eine Option aktivieren oder deaktivieren möchte, muss – je nach aktuellem Zoom im Browser – ziemlich geschickt sein oder viel Glück haben. Denn die Beschriftungen sind leider nicht als <label> anklickbar. Und um die Schwierigkeit noch etwas zu erhöhen hat man noch zusätzliche Hyperlinks direkt unter die Checkboxen gesetzt (Hype-Thema »Game-Design« in der Formulargestaltung?).
Also: <label> nicht vergessen!
Ich benutze auch GMX für E-Mails und über die Jahre haben sie viel an ihrem Webinterface verbessert und es gibt immer wieder kleine Iterationen des Interfaces. Aber hin und wieder schiessen sie über das Ziel hinaus, wie in diesem Beispiel.
Manchmal logge ich mich ein und fortan schlummert die offene Seite in einem Tab. Bis vor kurzem war es noch so, dass man bei seiner Rückkehr irgendetwas klicken konnte, und dann der freundliche Hinweis kam, dass man sich bitte wieder einloggen möchte. Inklusive Hinweis sich doch bitte immer ordentlich auszuloggen, schon um der eigenen Sicherheit willen.
Dieses Verhalten hat GMX nun geändert. Wie bisher wird man nach einer Weile automatisch ausgeloggt – Doch nun wird dabei auch gleich eine neue Seite geladen.
Und damit zum Suchbild: Wo ist der Hinweis auf das was (in Abwesenheit des Nutzers) passiert ist? Wer länger als eine Sekunde braucht, hat verloren! Klick auf das Vorschaubild, um die Suche zu starten.
Mir fallen eigentlich wenige gute Gründe ein, warum GMX dem Nutzer das direkte Feedback weggenommen hat und stattdessen nun in Abwesenheit des Nutzers einfach neue Seiten lädt. Früher war alles besser. Ausnahmsweise stimmt das hier.
Kommentieren (2 Kommentare)