Entwerfen von für Touchscreens skalierten Webschnittstellen

Vorbei sind die Zeiten der verschachtelten Javascript-Notation und unzähligen Plugins in Ihrem Header. Das Layout-Design hat einen großen Schritt nach vorne gemacht, da Designer einige extravagante Konzepte entwickeln. Touchscreen-Geräte sind derzeit aus der Sicht eines Designers und Entwicklers am interessantesten.

Immer mehr Menschen verwenden Touchscreen-fähige Geräte als je zuvor. Dazu gehören 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 Remote-Standort aus.

Designer erhöhen ihre Glaubwürdigkeit zurück, um mit der hohen Nachfrage Schritt zu halten. Was ist jedoch wichtig, wenn Sie zwischen einem Standard-Webdesign und einer Touchscreen-App wechseln? Es gibt viele aufkommende Trends in der Design-Community, mit denen jede Idee in futuristische Touchscreen-Technologie skaliert werden kann.

Aktueller Anpassungszustand

Obwohl Apples iPhone und iOS häufig in 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 veröffentlicht.

Derzeit müssen Entwickler Touchscreen-Oberflächen als neue Geräte betrachten, außer der Standardtastatur und -maus. Dies wurde traditionell mit JavaScript-Aufrufen oder Medienabfragen abgeschlossen, die zu komplexen Rückgabedaten führen. Es muss einen besseren Weg geben, um diese neuen Trends zu übernehmen.

Als Beispiel können wir ein Apple iPad mit einem Netbook mit Google Chrome vergleichen, um Unterschiede sofort zu bemerken. Obwohl ihre Bildschirmgrößen ähnlich sind, arbeiten sie auf zwei völlig unterschiedlichen Ebenen. Sogar die Betriebssysteme selbst sind sehr unterschiedlich und unterstützen neue Rechenstandards.

Die Gewinne und Verluste

Mit Touchscreen-Oberflächen gewinnen wir viel Flexibilität. Designer können Schaltflächen und Bildlaufräder an einer beliebigen Stelle auf der Seite platzieren, da sie mit einem Tastendruck zugänglich sind.

Entwickler können auch die Funktionalität von Anwendungen vollständig steuern. Das Cocoa SDK für iOS bietet viele Klassen, die die Interaktionen mit dem Touchscreen widerspiegeln. Entwickler können zwischen den einzelnen Interaktionen nach mehreren Fingern und sogar nach Druck prüfen.

Wir verlieren jedoch auch viele wichtige Design-Informationen, die wir alle lieben. Bei einer vollständig auf Touchscreen basierenden Benutzeroberfläche sind beispielsweise keine Hover-Zustände erforderlich. Dies kann durch einen Aktionsstatus ersetzt werden, wenn ein Benutzer aktiv auf ein Element drückt, obwohl der Zweck sehr unterschiedlich ist.

Das Fehlen einer Maus ist auch ein Problem für die Eingabe. Das Blättern und Umblättern zwischen Seiten muss reibungsloser und einfacher sein als die meisten Apps, da die Funktionalität eingeschränkt ist. Tastaturen sind auch in das Tablet oder den Handheld-Bildschirm integriert, was dem Benutzer ein völlig neues Gefühl verleiht.

Gemeinsame Elemente zusammenfassen

Das Gruppieren von Elementen ist eine bewährte Methode beim Layoutdesign von Touchscreen-Apps. Mit Cluster meine ich nicht alle Tasten und Elemente auf einer Seite in der oberen rechten Ecke. Erstellen 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 auf Seiten des Benutzers. Bei der Suche nach Einstellungen zum Aktualisieren der Kontoinformationen ist es am einfachsten, alle diese Informationen in einem Bildschirmbereich zu finden. Dies ist häufig auch bei Web-Apps der Fall, obwohl die Benutzeroberfläche normalerweise für Mausinteraktionen eingerichtet ist.

Anstatt nur eine lange Sammlung von Daten zu erstellen, bieten mobile Betriebssysteme einzigartige Vorteile. Bei den meisten Touchscreen-Geräten können Sie in jeder App-Ansicht Registerkarten erstellen. Diese bieten eine einfache Möglichkeit für Benutzer, ohne großen Aufwand zwischen Einstellungen und anderen Daten zu wechseln. Diese Registerkartenleiste kann mit einer Navigationsleiste mit Seitenlinks in einer klassischen Weboberfläche verglichen werden.

Planen Sie unzählige mobile Systeme

Es ist großartig, wenn Sie bedenken, dass Ihre Website mit den vollständigen HTML5- und CSS3-Spezifikationen arbeitet. Dies löst jedoch nicht viele häufige Probleme bei Touchscreen-Oberflächen. Vorausgesetzt, der Browser, auf dem Ihre Seite mit den gebräuchlichsten DOM-Standards ausgeführt wird, ist in Ordnung.

Obwohl Google Chrome für den Desktop eine Parsing-Engine ausführt, die sich stark von der des mobilen BlackBerry oder Opera Mobile unterscheidet. Tatsächlich gibt es für jeden der großen Mobilfunkanbieter viele neue Browser.

iOS ist standardmäßig mit Safari ausgestattet, viele weitere sind jedoch im App Store enthalten. Alle modernen Softwarebrowser für mobile Plattformen können HTML5-Notizen und -Attribute überprüfen. Wenn möglich, sollten Sie jede Layoutversion Ihrer Website auf den wichtigsten Touchscreen-Fällen testen. Browser zwischen Android, Microsoft Mobile und BlackBerry unterscheiden sich alle und erfordern eine gründliche Planung.

Natürlich ist es unmöglich, alle zufrieden zu stellen, aber die Mehrheit ist sicherlich ein Ziel, das es zu erreichen gilt. Implementieren Sie eine Installation von Google Analytics oder einer anderen Statistik-App auf Ihrer Website, die jedes Besuchsgerät analysiert.

Google bietet unglaublich detaillierte Berichtsdaten, z. B. welche mobilen Browser am häufigsten auf Ihre Website zugreifen und wie viele Seiten im Durchschnitt jede Seite besucht.

Hinterlasse keinen Stein

Dies kann auch als allgemeines Konstruktionswissen gekoppelt werden. Stellen Sie jedoch sicher, dass jedes Element für jedes Touchscreen-Layout auf dem richtigen Weg ist. Wenn wir auf einen Prototyp oder eine mobile Schnittstelle zurückblicken, versuchen wir als Designer oft, Dinge zu ändern und neu zu positionieren.

Es ist wichtig zu erkennen, dass mit Touchscreen-Oberflächen viel weniger Bewegungsfreiheit besteht. Daher ist es wichtig, ein Layout zu finden, das am besten funktioniert und dennoch die einfachste Benutzererfahrung bietet - und dann dabei bleiben!

Es kann schwierig sein, aber vertrauen Sie Ihrem Bauchgefühl und Ihrem Sinn für Design, wenn Sie wissen möchten, wann Sie es täglich anrufen.

Testen Sie Ihr Design bei einigen Ihrer Freunde oder Familienmitglieder.Eine schnelle Demo oder ein Durchlaufen der Anwendung und der Benutzeroberfläche aus einer Außenperspektive holt in der Regel hilfreiches Feedback und liefert Kritik aus neuen Augen.

Fazit

Wenn die Touchscreen-Geräte weiter eindringen, werden wir einen Anstieg der App-Entwicklung feststellen. Dies ist ein riesiger Markt, der nicht nur die iOS-Geräte von Apple umfasst, sondern auch Google und Microsoft starten Kampagnen, um ihren Anteil am mobilen Web zu gewinnen.

Der Vergleich zwischen diesen Geräten ist unterschiedlich und unterscheidet sich von jedem Designer. Wenn Sie weitere Ideen zu diesem Thema lesen möchten, sollten Sie Ihre Gedanken zu Touchscreen-Websites erweitern, um zu erfahren, was auf dem Markt ist. Die Touchscreen-Webschnittstellen werden ständig weiterentwickelt. Mit der Weiterentwicklung der Design-Community werden wir eine innovative UI-Inspiration wie nie zuvor erleben!