Entwerfen von für Touchscreens skalierten Webschnittstellen
Vorbei sind die Zeiten der verschlungenen Javascript-Notation und unzähliger Plugins, die in Ihrem Header enthalten sind. Das Layoutdesign hat einen großen Schritt nach vorne gemacht, da Designer einige extravagante Konzepte entwickeln. Touchscreen-Geräte sind derzeit aus Sicht von Designern und Entwicklern am interessantesten.
Mehr Menschen als je zuvor verwenden Touchscreen-fähige Geräte. Dies umfasst Tablet-PCs und die gesamte Liste der Betriebssysteme für Mobiltelefone. Diese Geräte sind alle mobil und ermöglichen den Zugriff von fast jedem entfernten Standort aus.
Designer reduzieren ihre Glaubwürdigkeit, um mit der hohen Nachfrage Schritt zu halten. Aber was ist wichtig, wenn Sie zwischen einem Standard-Webdesign und einer Touchscreen-App wechseln? In der Design-Community gibt es viele aufkommende Trends, mit denen jede Idee in eine futuristische Touchscreen-Technologie umgewandelt werden kann.
Aktueller Anpassungszustand
Obwohl Apples iPhone und iOS häufig unter den Mainstream-Medien und Tech-Gurus diskutiert werden, sind sie nicht das einzige Marktkapital für Touchscreen-Geräte. Viele tragbare Laptops und Tablet-PCs wurden von Drittherstellern wie Hewlett-Packard, Samsung und Microsoft herausgebracht.
Derzeit müssen Entwickler Touchscreen-Benutzeroberflächen neben der Standardtastatur und -maus als neue Geräte betrachten. Traditionell wurde dies mit JavaScript-Aufrufen oder Medienabfragen abgeschlossen, was zu komplexen Rückgabedaten führte. Es muss einen besseren Weg geben, um diese neuen Trends zu übernehmen.
Als Beispiel können wir ein Apple iPad mit jedem Netbook vergleichen, auf dem Google Chrome ausgeführt wird, um sofort Unterschiede festzustellen. Obwohl ihre Bildschirmgrößen ähnlich sein können, arbeiten sie auf zwei völlig unterschiedlichen Ebenen. Sogar die Betriebssysteme selbst sind sehr unterschiedlich und unterstützen neue Computerstandards.
Die Gewinne und Verluste
Mit Touchscreen-Oberflächen gewinnen wir viel Flexibilität. Designer können Schaltflächen und Scrollräder an einer beliebigen Stelle auf der Seite platzieren, da alles mit einem Tastendruck oder einer Bewegung zugänglich ist.
Entwickler können auch die Funktionalität von Anwendungen vollständig steuern. Das Cocoa SDK für iOS-Entwicklung bietet viele Klassen, die Touchscreen-Interaktionen widerspiegeln. Entwickler können zwischen jeder Interaktion nach mehreren Fingern und sogar nach Druckmessung suchen.
Wir verlieren jedoch auch viele wichtige Design-Referenzen, die wir alle lieben gelernt haben. Beispielsweise sind keine Schwebezustände erforderlich, wenn es sich um eine vollständig auf Touchscreens basierende Oberfläche handelt. Dies könnte durch einen Aktionsstatus ersetzt werden, wenn ein Benutzer aktiv auf ein Element drückt, obwohl der Zweck sehr unterschiedlich ist.
Das Fehlen einer Maus stellt auch ein Problem für die Eingabe dar. Das Scrollen und Umblättern zwischen Seiten muss flüssiger und einfacher sein als bei den meisten Apps, da die Funktionalität eingeschränkt ist. In das Tablet oder den Handheld-Bildschirm sind auch Tastaturen integriert, die der Benutzererfahrung ein radikal neues Gefühl verleihen.
Gemeinsame Elemente zusammenfassen
Das Clustering von Elementen ist eine gute Vorgehensweise beim Layoutdesign für Touchscreen-Apps. Mit Cluster meine ich nicht, alle Schaltflächen und Elemente auf einer Seite in die obere rechte Ecke zu stopfen. Entwerfen Sie in Wirklichkeit eine Karte für jede Ansicht und berechnen Sie, welche Informationen für welche Ansicht am besten geeignet sind.
Dies reduziert Frustration und Verwirrung beim Benutzer. Wenn Sie nach Einstellungen zum Aktualisieren von Kontoinformationen suchen, ist es am einfachsten, alle diese Einstellungen in einem Bildschirm zu finden. Dies ist häufig auch bei Web-Apps der Fall, obwohl die Benutzeroberfläche normalerweise für Mausinteraktionen eingerichtet ist.
Anstatt eine lange Sammlung von Daten zu erstellen, bieten mobile Betriebssysteme einzigartige Vorteile. Mit den meisten Touchscreen-Geräten können Sie in jeder App-Ansicht Registerkarten erstellen. Diese bieten Benutzern eine einfache Möglichkeit, ohne großen Aufwand zwischen Einstellungen und anderen Daten zu wechseln. Diese Registerkartenleiste kann mit einer Navigationsleiste voller Seitenlinks in einer klassischen Weboberfläche verglichen werden.
Plan für unzählige mobile Systeme
Es ist großartig zu bedenken, dass Ihre Website mit vollständigen HTML5- und CSS3-Spezifikationen funktioniert, aber dies löst nicht viele häufig auftretende Probleme bei Touchscreen-Oberflächen. Vorausgesetzt, der Browser, in dem Ihre Seite analysiert wird, entspricht den gängigsten DOM-Standards.
Obwohl Google Chrome für Desktop eine Parsing-Engine ausführt, die sich stark von der von BlackBerry oder Opera Mobile unterscheidet. Tatsächlich sehen wir für jeden der großen Mobilfunkanbieter viele neue Browser.
iOS wird standardmäßig mit Safari geliefert, aber viele weitere sind im App Store enthalten. Alle modernen Software-Browser für mobile Plattformen bieten die Möglichkeit, nach HTML5-Notizen und -Attributen zu suchen. Wenn möglich, sollten Sie in Betracht ziehen, jede Layoutversion Ihrer Website auf den wichtigsten Touchscreen-Fällen zu testen. Browser zwischen Android, Microsoft Mobile und BlackBerry unterscheiden sich alle und erfordern eine gründliche Planung.
Natürlich ist es unmöglich, immer alle zufrieden zu stellen, aber die Mehrheit ist sicherlich ein Ziel, das es wert ist, erreicht zu werden. Implementieren Sie eine Installation von Google Analytics oder einer anderen Statistik-App auf Ihrer Website, die jedes besuchende Gerät analysiert.
Google bietet unglaublich detaillierte Berichtsdaten, z. B. welche mobilen Browser am häufigsten auf Ihre Website zugreifen und wie viele Seiten jeder durchschnittlich besucht.
Lass keinen Stein unversehrt
Dies kann auch als allgemeines Designwissen gekoppelt werden, stellt jedoch sicher, dass jedes Element für jedes Touchscreen-Layout auf dem richtigen Weg ist. Wenn wir auf einen Prototyp oder eine mobile Benutzeroberfläche zurückblicken, versuchen wir als Designer oft, Dinge zu ändern und neu zu positionieren.
Es ist wichtig zu wissen, dass bei Touchscreen-Schnittstellen viel weniger Platz für freie Bewegung vorhanden ist. Daher ist es wichtig, ein Layout zu finden, das am besten funktioniert und dennoch die einfachste Benutzererfahrung bietet - und sich dann daran zu halten!
Es kann schwierig sein, aber vertrauen Sie Ihrem Bauchgefühl und Ihrem Designgefühl, wenn Sie wissen, wann Sie es einen Tag nennen sollen.
Testen Sie Ihr Design an einigen Ihrer Freunde oder Familienmitglieder. Eine schnelle Demo oder ein Durchlaufen der Anwendung und der Benutzeroberfläche von außen wird in der Regel hilfreiches Feedback einbringen und Kritik aus einem neuen Blickwinkel bieten.
Fazit
Während Touchscreen-Geräte ihre Invasion fortsetzen, werden wir einen Anstieg der App-Entwicklung bemerken. Dies ist ein riesiger Markt, der nicht nur Apples iOS-Geräte umfasst, sondern Google und Microsoft starten auch Kampagnen, um ihren Anteil am mobilen Web zu sammeln.
Der Vergleich zwischen jedem dieser Geräte ist unterschiedlich und unterscheidet sich von jedem Designer. Wenn Sie weitere Ideen zu diesem Thema lesen möchten, sollten Sie Ihre Gedanken auf Touchscreen-Websites erweitern, um zu sehen, was da draußen ist. Touchscreen-Weboberflächen entwickeln sich weiter und während sich die Design-Community mit ihnen weiterentwickelt, werden wir innovative UI-Inspirationen sehen wie nie zuvor!
