Gestaltung · Geräte und deren Bedienung

Mobile Geräte

Bereits 1972 (Studie bereits 1968) beschrieb Alan Kay eine Vision, wie tragbare Geräte für Kinder einfach zugänglich aussehen könnten. In seinem Entwurf für Xerox PARC Zeigte er ein mobiles Gerät, was aus damaliger Sicht mehr an ein Buch, denn an ein Computer erinnerte. Die Studie war jedoch aus technischer Sicht noch nicht realisierbar, führte aber zu weiteren Entwicklungen für mobile Rechner.
Tragbare Computer wurden seit Mitte der 1970er Jahre produziert. Die Verkaufszahlen waren jedoch im Vergleich zu den Desktop Computern lange Zeit verschwindend klein und die Dimensionen nicht geeignet für den Gebrauch unterwegs. Mobil oder tragbar meinte damals eher die Möglichkeit ein Gerät mit zu nehmen und weniger es unterwegs zu gebrauchen.

In den Anfängen der 2000er Jahre wurden so genannte «Featurephones» und erste «Smartphones» – oft noch mit Hardware-Tastatur und ohne Touchscreen – produziert.

Smartphone und Touch-Devices

Seit den frühen 2000er Jahren gab es diverse mobile Telefone, die vermehrt mit grösseren Displays ausgestattet waren und deren Software und Hardware genügend leistungsfähig wurde um ernsthafte Aufgaben zu bewältigen. Die Betrachtung und die Bedienung einer Website durch einem Mobile-Gerät war mühsam bis unmöglich.

Quellen: Statista

iPhone als Game-Changer

Im Jahr 2007 präsentierte Apple mit dem iPhone ein Telefon, welches nicht nur das tätigen von Anrufen im Fokus hatte, sondern auch einen leistungsfähigen Browser eingebaut hatte und später auch durch weitere Apps erweitert werden konnte. Auch wenn es davor schon andere Hersteller gab, die ähnliche Konzepte versuchten, so ist mit der Einführung des iPhones das Bedienkonzept von heutigen mobilen Geräten zementiert worden; Die Geräte verfügen über grosse (im Vergleich zur Gerätedimension) Bildschirme und die Bedienung erfolgt mittels Fingergesten.

Mobiles Internet

Durch die Verfügbarkeit von Internet auf mobilen Geräten und der zunehmenden Fähigkeiten der Geräte, steigt der prozentuale Anteil an mobilen Geräten und Daten am gesamten Internet-Verkehr. Somit werden die mobilen Geräte stetig wichtiger im Alltag und das Design der besuchten Seiten sollte entsprechend angepasst sein.

Quellen: StatCounter

Geschwindigkeit

Durch die drastische Zunahme an Bandbreite zur Datenübertragung, können speicherintensive Inhalte (wie zum Beispiel Videos) auch auf mobilen Geräten problemlos konsumiert werden.

Quellen: telecomtalk

Grösse vom Touch-Interface

Die breite eines Fingers ist von Person zu Person verschieden. Auch spielt es eine Rolle, wie stark aufgedrückt wir und wie die Sensoren des Gerätes diesen Erfassen. Hoch aufgelöste Geräte haben meist einen Device pixel ratio (dppx) der grösser als 1 dppx ist. Somit wird eine Definition von 1 px im CSS auf dem Gerät mit mehreren Pixeln wiedergegeben. Bei der minimalen Grössenangabe einer Schaltfläche kann somit keine absolute Aussage gemacht werden. Apple empfielt 22 px × dppx (iPhone Human Interface Guidelines), Microsoft 9 mm (Windows Phone UI Design and Interaction Guide) und Nokia 10 mm (Nokia’s developer resources).

Touch vs. Click

Je nach Gerät sind andere Eingabekonzepte geeignet. Beim genauen Betrachten der Bedinung ergeben sich auch Ableitungen für das Design. Für die Bedienung mit dem Finger ist vor allem wichtig, dass kein Cursur sichtbar ist und es somit auch kein Hover-Status (rollover) gibt.

Präzision

Mit einer Maus kann wesentlich genauer gearbeitet werden, als mit dem Finger. Somit müssen die minimalen Schaltflächen (Links) angepasst werden. Sollte keine angrenzenden Schaltflächen existieren, kann auch der zu klickende Bereich vergrössert werden, ohne jedoch die visuelle Grösse zu verändern.

Touch-Points und Gesten

Die meisten modernen Touch-Geräte können mehrere Finger auf dem Touchscreen erkennen. Somit kann durch die Kombination der Finger oder durch die Bewegung der Finger eine so genannte Geste gemacht werden, welche dann von der Website oder vom Gerät abgefangen werden kann und entsprechend reagiert wird.

Texteingabe

Wurden früher noch oft Hardware-Buttons oder Hardware-Keyboards verbaut, so wurden diese in den letzten Jahren fast vollständig durch On-Screen-Keyboards ersetzt. Diese haben den wesentlichen Nachteil, dass es keinen Hub gibt und somit haben diese ein weniger präzises haptisches Feedback – im Vergleich zu einer Taste – sind dafür wesentlich vielseitiger in der Anwendung. So kann für die Sprache oder die Art der Eingabe ein jeweils anderes Keyboard eingeblendet werden. Auch kann der eingesparte Platz bei nicht Verwendung des Keyboards durch Inhalt genutzt werden.

Sensoren

Moderne Geräte haben heute diverse eingebaute Sensoren. Diese können dafür gebraucht werden um eine bessere Interaktion mit dem Benutzer herzustellen oder aber die Umstände, in denen sich der Benutzer gerade befinded zu erruieren. Über die Jahre sind in die mobilen Geräte immer mehr Sensoren Verbaut worden.

Gyroskop

Das Gyroskop misst die Lage des Telefons in X-, Y- und Z-Achse. Dabei ist die Aussage der Position absolut zum Boden (Gravitation). Es kann also gesagt werden, in was für einer Lage sich das Telefon befindet, nicht aber wo sich das Telefon befindet.

Bewegunssensor

Der Bewegunssensor gibt an, was für Beschleunigung oder negative Beschleunigung (Verzögerung) auf das Gerät ausgeübt wird. Es kann also bestimmt werden, ob das Gerät gerade bewegt wird.

Magnetometer

Der Magnetometer misst die magnetische Flussdichte der Umgebung. Dies ist vor allem für eine Kompassfunktion anhand des Erdmagnetfelds nützlich. Es kann ein Winkelmass zu Norden errechnet werden.

Barometer

Der Barometer gibt den Luftdruck wieder. Dies kann sowohl zur Bestimmung von Wettereinflüsse genutzt werden, wie auch für Höhenveränderungen, da der Luftdruck mit zunehmendem Abstand von der Erdoberfläche abnimmt.

GPS

Mit Hilfe von GPS (Global Positioning System) kann bestimmt werden, wo auf der Erde sich ein Gerät gerade befindet. Diese Positionierung ist Absolut und benötigt den Empfang von Satelitensignalen.

Thermometer

Umgebungsthermometer werden eher selten in Telefone verbaut. Es gibt zwar Temperatur-Sensoren im innern des Gerätes, die den Betrieb des Telefons steuern und eine Überhitzung des Gerätes verhindern, jedoch werden diese Temperaturen meist nicht für den Benutzer zugänglich gemacht. Dies hat vor allem damit zu tun, dass durch die eigene Hitze des Geräts keine aussagekräftige Messung der Umgebungstemperatur möglich ist. Allgemein lässt sich sagen, dass Temperaturmessung für elektronische Consumer-Geräte relativ Schwierig ist und selten genauere Werte als ±0.5°C zu erwarten sind (Auflösung ≠ Genauigkeit).

TV und Web

Neue Fernseher haben oft eienen eingebauten Web-Browser. Dieser ist technisch meist gut bis sehr gut, jedoch ist die Bedienung durch das Fehlen einer intuitiven Eingabe oftmals eher schwerlich. Es gibt diverse Fernbedienungs-Konzepte und zum Teil auch die Möglichkeit, eine Tastatur oder eine Maus mit dem TV zu verbinden, doch ist dies wohl eher die Ausnahme. Es empfiehlt sich also eine Website, sofern diese für TV angepasst sein muss, mit der Tab-Reihenfolge so auf zu bereiten, dass diese über die Pfeiltasten einfach zu bedienen ist.

Wearables (Uhr)

Seit einigen Jahren werden Warables meist in From von Uhren mit dem Internet verbunden. Meist haben die Geräte jedoch so einen kleinen Screen und nur eine beschränkte Eingabefähigkeit, so dass keine Browser installiert sind. Die Apps sind zwar mit dem Internet verbunden, benutzen jedoch zur Anzeige keine typische Web-Technologie.

Die Apple-Watch kann mit dem Finger bedient werden und bietet ein haptisches Feedback durch ein «klopfen» an den Finger.

Weiterführende Informationen

Geräte im Internet

• Device-Agnostic
• Your Content, Now Mobile
• Mobilfunk-Abdeckung
• Asymco
• Verkauf Smartphones
• Ballmer Laughs at iPhone
• Mobile Is Eating the World (2014)

Bildschirm und Grössen

• iPhone Resolutions
• Finger-Friendly Design

Sensoren

• DeviceOrientation in HTML

Eingabe

• Eingabefelder in HTML5

Touch und Multitouch

• Multi-Touch Web Applications
• Touch Events
• iPad Multi-Touch
• Touch Gesture Reference Guide