Auffüllen mit Daten

Wir alle kennen sie: diese Balken, die den Fortschritt eines Vorgangs anzeigen. Meistens handelt es sich um Ladevorgänge, wie bspw. beim Start eines Computers, Aufladen eines Akkus oder der Anzeige eines Download-Vorgangs. Es haben sich seit vielen Jahren vor allem horizontal-orientierte Balken in so gut wie allen Betriebssystemen und Web-Frameworks etabliert.

Die folgende Übersicht aus den Material Design Richtlinien zeigt verschiedene Ausprägungen dieser Ladebalken:

 

Aufladen einer Batterie

Im iPhone wird das Laden des Akkus über einen horizontalen Balken visualisiert:

Die meisten Android-Smartphones folgen hingegen bei der Visualisierung des Ladevorgangs den vertikal-orientierten Säulen:
android-battery

Welches dieser beiden Ansätze ergibt nun mehr Sinn und ist somit passender?

Diese Frage verweist auf das Thema, welches mentale Modell zu diesem Vorgang besser passt.

Dazu folgende Gedanken:

  • Nehmen wir den Begriff „Aufladen“ wörtlich wird ein Gegenstand auf eine Ladefläche gepackt. Wird weiter aufgeladen, so denke ich eher an eine Stapelung als daran, dass etwas daneben gestellt wird. Insofern passt die Visualisierung über vertikale Säulen besser als über horizontale Balken.
  • Wenn ich mir die inneren Vorgänge einer Batterie konkret vorstelle, so stelle ich mir den Ladestand ähnlich wie den Füllstand eine „Gefäßes“ mit einer Flüssigkeit vor. Auch aus dieser Sicht passt eine Säulendarstellung.

Download vs. Upload

Bei Download-Vorgängen stelle ich mir vor, wie die Festplatte als Speicher mit Daten gefüllt wird. Dies würde auch für die Säulendarstellung sprechen.

Im Nintendo eShop wird dies sehr skeuomorph visualisiert, in dem mehrere Beutel mit einer Flüssigkeit an einer Leine hereinfahren und nacheinander in einen Container fallen, darin zerplatzen und ihn so nach und nach mit Flüssigkeit auffüllen:

Beim Upload hingegen stelle ich mir vor, wie die Daten verschickt werden. Und „Verschicken“ hat damit zu tun, dass sich ein Gegenstand von mir weg bewegt, was nach meiner Auffassung eine horizontale Bewegung ist. Hier passt also die horizontale Balkendarstellung.

Abstrahiere ich diese Gedanken, so sind Bewegungen von einem Ort zu einem entfernten Ort horizontale Bewegungen, während Aufladevorgänge vertikale sind.

Ein kleines Design Pattern

Ich möchte mit diesen Gedanken Entwickler von digitalen Benutzeroberflächen dazu anregen, bewusst den passenden Kontext für Vorgangsdarstellungen zu wählen, um dem Nutzer ein Gefühl der Nachvollziehbarkeit des Vorgangs zu vermitteln.

Ich habe zu diesem Thema ein kleines Design Pattern entwickelt, welches einen Download-Vorgang simuliert:

See the Pen Progress fill by Tamio Honma (@IOIO72) on CodePen.light

Der Code ist in Vanilla ES6 geschrieben. Wer den Code für eine reale Anwendung nutzen möchte, kann einfach eine Controller-Funktion dazu schreiben und darin den prozentualen Fortschritt über view.setPercent(percent) anzeigen.

TinyCLI auf Bulletin-Board.de

In letzter Zeit habe ich an einer kleinen Web-Applikation gearbeitet, die ein CLI (bzw. eine Shell, ein Terminal) im Browser darstellt.

Es handelt sich noch um einen Entwicklungsstand, ist jedoch jetzt einigermaßen präsentabel geworden. Das CLI funktioniert auf aktuellen Browsern und insbesondere Chrome am besten. Safari wird noch am schlechtesten unterstützt und kann momentan nur über das US-Amerikanische-Tastaturschema bedient werden.

Eine Unterstützung für Touchscreen-Geräte existiert noch nicht. Das Thema wäre die nächste Entwicklungsstufe, die ich bald angehen werde.

Bulletin-Board.de

Wer mitentwickeln möchte ist auf GitHub dazu herzlich eingeladen:
TinyCLI

Zifferblätter für Smartwatches

Da fast jeder ein Smartphone oder zumindest ein Handy stets zur Hand hat, welche natürlich auch die Zeit anzeigen, erfüllt eine Armbanduhr heutzutage keinen besonderen Mehrwert, außer, dass die Uhrzeit schneller parat ist.

Uhrenvergleich
Foto von JM Tosses auf Flickr

Seit je her ist eine Armbanduhr zugleich ein modisches Accessoire und das Aussehen und Image der Uhr spielt für viele eine wichtige Rolle. Dies gilt auch für Smartwatches.

Wem dieser Aspekt besonders wichtig ist, besitzt zudem mehrere Armbanduhren oder zumindest Armbänder zum Auswechseln, um zu jeder Gelegenheit das passende Accessoire präsentieren zu können.

girl-972636_1280

Foto von Gary Dale
Foto von Gary Dale

Dieser Aspekt wird bei Smartwatches um die Möglichkeit erweitert, das Zifferblatt je nach Lust und Laune unkompliziert zu wechseln.

 

Diese Möglichkeit wird bei den verschiedenen Smartwatches unterschiedlich gut unterstützt. Einige Modelle zeigen nur zum Zeitpunkt des Uhrzeitablesens überhaupt ein Bild an, einige wechseln zwischen einer stromsparenden Minimalansicht der Uhrzeit zu einer vollumfänglichen Darstellung beim aktiven Ablesen und wenige zeigen durchgängig das vollständige Zifferblatt an.

AndroidWear_Watch_FacesDer Hauptgrund dieser unterschiedlichen Handhabung der Zifferblattdarstellung liegt in den unterschiedlichen Methoden zum Stromsparen, da dies – ähnlich wie bei Smartphones – eines der Hauptherausforderungen für die Hersteller darstellt. Eine kompromisslose Lösung gibt es derzeit noch nicht.

Einschätzung der Display-Typen von Smartwatches
Display-Typ Always-On-Modus Vorteile Nachteile Anmerkung
LCD nein gute Darstellung wg. potentiell zu hohem Stromverbrauch kein Always-On-Modus wird eher in älteren Modellen genutzt
LCD + Transreflektiv-Modus Schwarz/Weiß stromsparend Always-On nur in Schwarz/Weiß wird in Sonys Smartwatch 3 genutzt
OLED meistens: ja sehr gute Darstellung erhöhter Stromverbrauch im Always-On-Modus Always-On-Modus wird von der Apple Watch derzeit nicht unterstützt
LCD e-paper ja sehr geringe Auflösung & in Farbversion wenige Farben. äußerst geringer Stromverbrauch im Always-On-Modus wird bei Pebble je nach Modell monochrom und farbig eingesetzt.

Die Betriebssysteme der Smartwatches sind der weitere Faktor der beeinflusst, wie gut sich die eigene Smartwatch an den eigenen Stil anpassen lassen.

Betriebssystem Möglichkeiten
WatchOS (Apple Watch)

Zifferblätter: nur eingebaute

Die Zifferblätter lassen sich sehr einfach auswählen und anpassen. Die stilistische Individualisierung schränkt sich auf die Wahl der Art der Uhr, der Farbe weniger Elemente und dem Hintergrundbild (auch animiert). Noch ist es Dritten nicht möglich, Zifferblätter anzubieten.

Einschätzung: eingeschränkt

Tizen (Samsung Gear S2)

Zifferblätter: offen

Samsung hat erkannt, wie wichtig Zifferblätter sind und wie groß das Bedürfnis von Gestaltern ist, Uhren anzubieten. Aus diesem Grund bietet Samsung ein komplettes Designer-Tool an mit Anbindung an den App-Store von Samsung.

Einschätzung: gutes potential

Pebble

Zifferblätter: offen

Pebble bietet eine umfangreiche Kategorie für Watch Faces an, so dass hier für jeden etwas zu finden ist. Systembedingt (wenig Farben, monochrom, niedrige Auflösung) wirken die Zifferblätter oftmals so als kämen sie aus den 90ern.

Einschätzung: breites Angebot / wirken „geeky“

Android Wear

Zifferblätter: offen

Sowohl im Play Store als auch mittels Gestaltungs-Apps gibt es das vielfältigste und umfangreichste Angebot von Zifferblättern.

Einschätzung: vielfältiges Angebot

Betrachtet man die aktuelle Display-Technologie und die Betriebssysteme, so bieten aktuell die OLED-basierten und mit Android Wear ausgestatteten Smartwatches meiner Meinung nach den besten Kompromiss aus Darstellungsqualität, Vielfältigkeit und Stromsparen. Android Wear bietet im Vergleich zu den meisten anderen Systemen ein breitgefächertes Angebot von Zifferblättern für jeden Anlass und Geschmack und sehr viel Möglichkeiten Zifferblätter selbst zu gestalten.

Einige dieser Apps beinhalten eine komplette Sammlung von Zifferblättern, welche in einigen Fällen von Zeit zu Zeit erweitert werden.

WatchMaster - Watch Face
Entwickler: WatchMaster
Preis: Kostenlos+
ustwo Watch Faces
Entwickler: ustwo
Preis: Kostenlos
Wear Face Collection HD
Entwickler: vuxia
Preis: Kostenlos+

Darüber hinaus existieren einige Apps zur komplett individuellen Gestaltung von Zifferblättern mit der Möglichkeit diverse Komplikationen zu integrieren.

WatchMaker Premium Watch Face
Entwickler: androidslide
Preis: 3,89 €
Pujie Black Watch Face
Entwickler: Pujie
Preis: 0,99 €
Facer Watch Faces
Entwickler: Little Labs, Inc.
Preis: Kostenlos+
Watch Faces for Android Wear
Entwickler: Intellicom AS
Preis: Kostenlos+
Masque Simplicity - Watch Face
Entwickler: Alex Pasquarella
Preis: Kostenlos+

Für diese Apps gibt es sehr aktive Communities in denen täglich mehrere dutzend neue Zifferblätter hinzukommen und ein Austausch zwischen den Gestaltern und den Nutzern stattfindet.

Meine Kreationen erstelle ich mit WatchMaker und sie sind auf der folgenden Website zu finden:

IOIO Watch Faces

Belohnung per Animation unterstützen

Man braucht kein Psychologiestudium abgeschlossen zu haben, um zu wissen, dass Menschen sich über Belohnungen und Geschenke freuen.

Digitale Services stehen mit dem Nutzer im Dialog und funktionieren i.d.R. besser, wenn sie auf den jeweiligen Nutzer individuell eingehen. Hier stehen dann weniger technische Informationen im Vordergrund sondern vielmehr die Art der Kommunikation,  die Tonalität und Gestaltung im Allgemeinen.

Eine dieser Kommunikationssituationen ist die Belohnung des Nutzers über ein erreichtes Ziel. Im Wort Belohnung steckt schon eine positive Wertung und Beschreibung der System-Nutzer-Situation. Aus technischer Sicht könnte das System einfach eine nüchterne und unscheinbare Information angeben, wie „Registriert“, nachdem der Nutzer eine Formularstrecke erfolgreich abgeschlossen hat. Stattdessen könnte das System diese Information als Belohnung verpacken und dem Nutzer so ein kleines, motivationssteigerndes Erfolgserlebnis bereiten.

Die folgende Meldung könnte bildschirmfüllend am Ende einer Formularstrecke stehen:

See the Pen Reward view by Tamio Honma (@IOIO72) on CodePen.19231

Zu sehen ist der Zustand einer erfolgreichen Registrierung zu einem digitalen Service, welcher mit keinem Wort erwähnt, dass die Registrierung abgeschlossen ist. Dies ist aus folgenden Gründen so:

  1. Der Nutzer weiss i.d.R., dass er gerade eine Registrierung vollzogen hat.
  2. Würde das System die Meldung „registriert“ anzeigen, würde es sich selbst eingestehen, dass man ihm nicht trauen kann und es deshalb notwendig sei, dem Nutzer eine explizite Bestätigung zu geben.

Stattdessen wird der Kernvorteil der Registrierung als Belohnung verpackt kommuniziert. Der Nutzer hat eine neue Stufe erreicht. Anstelle des rückwärtsgewandten „Registered“ steht hier das zukunftsorientierte „Premium access granted!“.

Und der Testzeitraum von 30 Tagen wird nicht als „Test“ bezeichnet, sondern positiv als Geschenk verpackt. Ich habe hier also mit Absicht nicht „30 days trial“ geschrieben, sondern „30 days for free“.

Diese positive Botschaft wird durch eine bildschirmfüllende Gestaltung mit positiven Farben, Symbolen und freudvollen Animationen bestärkt.

Durch eine solche Präsentation wird die Gefühlsebene der Nutzer angesprochen und die Beziehung zwischen Nutzer und digitalem Service wird durch positive Erlebnisse gestärkt.

Dies ist heutzutage in einer Welt vieler konkurrierender Services ein sehr wichtiger Aspekt: Auf der einen Seite möchten sich Nutzer gerne an gute Services erinnern und sind gerne bereit, diese Services auch künftig weiter zu nutzen. Auf der anderen Seite müssen sich Service-Anbieter so gut wie möglich bei ihren Nutzern verankern, um einen nachhaltigen Kundenstamm aufzubauen.

Gerne können wir über dieses Projekt chatten:
IOIO Software Slack

Gerne können wir gemeinsam daran weiter entwickeln:
GitHub GitLab Bitbucket

ioioPen – a CodePen inspired local starter

(English: Please follow the GitHub link to read the english readme file.)

Wer meinen Blog verfolgt hat bestimmt bemerkt, dass ich in letzter Zeit einige Experimente zu Web-Technologien veröffentlicht habe, die ich zu einem großen Teil über CodePen präsentiert habe.

Das schöne an CodePen ist die Möglichkeit direkt mit einer spontanen Idee loslegen zu können ohne durch das lästige Aufsetzen eines Projekts aufgehalten zu werden.

Beschleunigt wird dies zudem noch durch die Voreinstellung von bevorzugten HTML- und CSS-Preprozessoren und Frameworks. In meinem Fall sind dies Jade, Sass und jQuery.

Da es ab und zu vorkommen kann, dass aus so einem Experiment mehr wird, habe ich auf Basis meiner CodePen-Voreinstellungen eine lokale Projektvorlage erstellt, die es mir erlaubt meine CodePen-Experimente ohne großen Aufwand in ein „echtes“ Projekt zu überführen.

Ich habe diese Vorlage in Anlehnung an den Namen CodePen und meinem Pseudo-Namen ioioPen getauft. Es handelt sich um ein Node.js-basiertes System mit Gulp als Aufgabenausführer, Bower als Paketverwalter und den oben erwähnten Preprozessoren und Frameworks.

Die folgenden Links führen zu den Git-Repositories von ioioPen
GitHub GitLab Bitbucket

Über Slack können wir sehr gerne über dieses Projekt chatten:
IOIO Software Slack