In den Anfängen der Entwicklung von Websites für mobile Geräte haben die meisten Entwickler ihr Produktangebot gegabelt. Sie veröffentlichten eine voll funktionsfähige Desktop-Version und dann eine "Mobile-Optimized" -Version, die das Branding und die Bildqualität weitgehend abschreckte, um den begrenzten Fähigkeiten und der Netzwerkgeschwindigkeit von Candy-Bar-Telefonen und 3G-Wireless-Netzwerken Rechnung zu tragen.
Moderne Smartphones können Webseiten jedoch genauso effizient wie Desktop-PCs darstellen, über Netzwerke so gut oder besser als die DSL-Leitungen von gestern.
Das Design konvergiert dann zu einer Einzelbenutzeroberfläche. Das Risiko für Designer besteht jedoch nicht darin, dass ein Smartphone oder Tablet eine moderne responsive Website nicht darstellen kann. Es ist vielmehr so, dass die Methode der Benutzereingabe auf einem Touchscreen-Gerät bedeutende Änderungen am zugrunde liegenden Site-Design erfordert. Die Tage des Aufbaus einer Website gehen davon aus, dass die Besucher eine Tastatur und eine Maus haben.
Grundlegende Touchscreen-Designregeln
Die Gestaltung eines Touchscreen-fähigen Web-Interfaces erfordert eine Weiterentwicklung des traditionellen Monitor-Maus-Tastatur-Ansatzes der Vergangenheit. Insbesondere müssen Sie Interaktionen wie Gesten, Antippen und Multitouch-Eingabe berücksichtigen.
- Klopfen ist nicht genau.Wenn der Kunde nicht die Finger eines Kleinkindes hat, kann es trotz der sehr genauen Softwaresteuerung schwierig sein, präzise zu greifen.
- Gesten unterscheiden sich von Taps.Um auf einem Touchscreen eine lange Seite zu scrollen, streicht der Benutzer mit einem Finger oben das Browserfenster. Dies scheint nicht von Bedeutung zu sein, bis Sie feststellen, dass Sie beim Navigieren mit der Maus die Maus bewegen Nieder .
- Zwei (und mehr) Fingertipps.Ein Benutzer kann mehrere Finger gleichzeitig auf das Gerät drücken, um es zu steuern. Diese zusätzlichen Abgriffe können je nach Betriebssystem des Benutzergeräts etwas bestimmtes bedeuten.
- Geräte mit hoher BlendungDie Bildschirme der meisten Touchscreen-Tablets bestehen aus einem stabilen Glas. Dieses Material ist unter hellen Lichtverhältnissen sehr schwer lesbar. Bei all den Berührungen erhalten sie außerdem Fingerabdrücke und Flecken auf dem Bildschirm, die das Aussehen Ihrer Seiten beeinflussen können.
- Bildschirmtastatur.Während einige Benutzer über eine drahtlose Tastatur verfügen, die sie mit ihren Tablets verbinden, verwenden die meisten Tablet-Benutzer die Bildschirmtastatur zur Dateneingabe. Die Eingabe von OSK kann zu einigen witzigen Tippfehlern führen und ist für die Verwendung über längere Zeit unbequem.
Aufgrund dieser Gerätefunktionen sollten Webdesigner einige grundlegende Entwurfsregeln für Touchscreen-Benutzer hervorheben:
- Platzieren Sie anklickbare Elemente nicht zu nahe beieinander.Es gibt keine feste Regel, die festlegt, wie nahe sie zu nah ist, aber Linklisten, insbesondere in kleiner Schriftgröße, können durch das Klicken (Tippen) mit einem dicken Finger schwer zu navigieren sein. Es kann ärgerlich sein, wenn Sie die Ansicht vergrößern müssen, um zu versuchen, auf einen Link zu klicken. Dieses Prinzip gilt sowohl für Buttons als auch für Links.
- Hierarchien lassen sich nur schwer offenhalten.Eine beliebte Form eines dynamischen Menüs verwendet JavaScript, um ein Untermenü zu öffnen, wenn der Benutzer auf das Untermenü klickt und die Maus darüber bewegt. Diese Status können auf Touchscreens nur sehr schwer oder gar nicht verwendet werden, da sie entweder nicht geöffnet bleiben oder sich nicht schließen lassen.
- Verschieben Sie Links und anklickbare Bereiche vom rechten Rand des Fensters.Die meisten Leute sind Rechtshänder und neigen dazu, auf dieser Seite des Bildschirms zu blättern. Da das Scrollen mit einer Geste ausgeführt wird, ist es manchmal möglich, das Wischen eines Links aus Versehen zu starten. Benutzer können sich ärgern, wenn sie auf der Seite blättern möchten und stattdessen versehentlich auf einen Link tippen. Indem Sie Ihre Links von der rechten Seite weg bewegen, können Sie ihnen helfen, diese Unannehmlichkeiten zu vermeiden.
- Es gibt keine Maus.Und das bedeutet, dass es keine Maus gibt Zeiger . Sie sollten sich nicht darauf verlassen, dass sich der Mauszeiger ändert, um anzuzeigen, dass etwas anklickbar ist.
- Hover-Staaten gibt es nicht.Da es keine Maus gibt, gibt es nichts, womit man schweben kann. Auf einem Touchscreen-Gerät wird entweder auf einen Link geklickt (getippt) oder nicht, sodass Benutzer keine nützlichen Informationen aus solchen Hover-Zuständen wie Farbänderungen, QuickInfos oder Änderungen in der Statusleiste ableiten können.
- Schwarze Hintergründe verstärken die Blendung.Eine Site mit schwarzem Hintergrund kann auf einem Touchscreen-Gerät aufgrund der Blendung sehr schwer lesbar sein. Durch Schwarz werden die Fingerabdrücke auf den Geräten deutlicher und der Bildschirm wird unscharf. Und das Schwarze kann den Bildschirm in einen Spiegel verwandeln, der das Gesicht des Benutzers oftmals mehr reflektiert als der Text auf dem Bildschirm.
- Lange Textblöcke in Formularen sind schwer zu schreiben.Es ist zwar möglich, ganze Romane auf einem iPad oder einem Android- oder Windows-Tablet zu schreiben, doch die meisten Benutzer mögen die Bildschirmtastatur nicht für lange Textstellen. Je mehr Ihr Design die Dateneingabe so kurz und einfach wie möglich macht, desto besser.
Der wichtigste Aspekt bei der Gestaltung mit Touchscreens ist zu beachten Testen Sie Ihre Seiten auf einem Touchscreen-Gerät. Es gibt zwar viele iPad- und Android-Emulatoren sowie viele Windows-Tablets, die jedoch nicht wie ein Touchscreen wirken. Sie können nicht erkennen, dass Links zu eng sind oder dass die Schaltflächen zu klein sind oder dass die Blendung die Lesbarkeit der Seite zu schwer macht, es sei denn, Sie holen ein Tablet aus und probieren es aus Vor Sie veröffentlichen Ihr neues Website-Design.
