Wie sich die Touch Screen Revolution auf UX auswirkt
Mit der Einführung von Windows 8 wurde die Windows-Benutzeroberfläche im Einklang mit der Windows Phone-Benutzeroberfläche grundlegend überarbeitet, um Benutzer mit Touchscreens intuitiver zu machen. Apple hat subtil OSX im Laufe der Zeit angepasst und Funktionen optimiert, die zunehmend genutzt werden über ihre mobilen und Desktop-Betriebssysteme. Während wir noch einen Touchscreen-Mac sehen müssen, ist es offensichtlich, dass die Touchscreen-Revolution auf uns zukommen wird, da die Nutzer immer mehr Zeit auf ihren mobilen Geräten verbringen als zu Hause.
Vor diesem Hintergrund und einem immer größer werdenden Anteil des Surfens auf Smartphones und Tablets müssen Websites entscheiden, wie sie sich an Menschen anpassen, die ohne Maus und Tastatur auf ihre Inhalte zugreifen. Während die Standardantwort darauf oft war, "nur eine separate mobile Schnittstelle zu machen!", Eine Lösung, die in der Vergangenheit auf kleineren mobilen Geräten wie Telefonen funktioniert hat, gibt es sehr wenig Spielraum für die mittlere Gruppe von größeren Telefonen besetzt und Tablet-Displays.
In diesem Artikel werden einige Websites vorgestellt, die sowohl unkonventionelle als auch standardmäßige Website-Designs überarbeitet haben, um für mehr Berührungsfreundlichkeit zu sorgen.
Fokussierte Websites vs. reaktionsschnelle Websites
Viele Websites haben speziell für Touchscreen-Nutzer Zweigstellen oder Apps eingerichtet, die es ihnen ermöglichen, sich jeweils auf einen bestimmten Benutzertyp zu konzentrieren. Ein Problem besteht darin, dass die Websites, da sie voneinander getrennt sind, auf URL-Umleitung angewiesen sind, was häufig zu Problemen führen kann, z. B. dass der Benutzer von Links an die falsche Site gesendet wird, oder eine schlechte Umleitung als Folge der Umleitung zu formatierten Seiten für mobile Benutzer erfordert.
Das größte Problem mit separaten Websites für mobile Benutzer ist jedoch, dass der mobilen Version häufig Funktionen oder Informationen fehlen, die ein Desktopbenutzer erhält. Funktionen und Schnittstellen werden oft vereinfacht, Schaltflächen vergrößert und Optionen reduziert. Dies kann durch ein "reaktionsfähiges" Design gelöst werden. Eine Responsive-Website ist so gestaltet, dass sie auf beiden Plattformen ohne Qualitätsverlust leicht zu sehen ist. Dies hat auch den Vorteil, dass nur eine Website entworfen werden muss, anstatt zwei, dies führt jedoch oft zu Kompromissen für beide Plattformen.
Grundlegende Unterschiede beim Design
Es gibt offensichtliche Unterschiede zwischen einem Touchscreen und einem Desktop, über die Sie beim Erstellen Ihrer Website nachdenken müssen. Auf einem Touchscreen wischen Sie die Seite nach oben, um nach unten zu scrollen, jedoch bewegen Sie auf einem Desktop das Scrollrad nach unten. Apple hat versucht, dies zu korrigieren, indem es seine Berührungsschnittstellentechnologien in Trackpads sowohl auf ihren Laptop- als auch Desktop-Macs konsolidiert, jedoch sind PC-Benutzer oder sogar Mac-Benutzer, die herkömmliche Scrollräder oder Schieberegler zum Scrollen durch Webseiten verwenden, im Nachteil.
Schaltflächen müssen auf Mobilgeräten viel größer sein, da das Tippen nicht annähernd so genau ist wie das Klicken mit der Maus. Es gibt nichts ärgerlicheres als den Versuch, auf einen Link für die nächste Seite zu klicken und versehentlich eine Seite oder eine Anzeige zurückzuschicken. Das Fehlen eines Cursors bedeutet auch, dass Sie keine Hover-Zustände haben können, um zu erklären, wo ein Link hingeht, was ein Wort bedeutet oder sogar anklickbar ist.
Es gibt auch einen Unterschied zwischen der Genauigkeit bei mobilen Eingaben, da Touchscreens entweder resistive oder kapazitive Eingaben haben können, die unterschiedliche Empfindlichkeiten haben, und folglich kann die Genauigkeit auf resistiven Touchscreens verloren gehen. Darüber hinaus müssen Designs zwei sehr unterschiedliche Auflösungen für Mobilgeräte mit zwei Ausrichtungen aufweisen.
Bildschirmausrichtung und Seitenverhältnis
Mit mehreren Auflösungen jenseits der normalen Monitorgrößen können Sie nicht mehr nur an standardisierte Bildschirmauflösungen und vertikale Bewegungen denken. Die rasanten Veränderungen auf dem Technologiemarkt haben Bildschirmgrößen hervorgebracht, die sich von Modell und Hersteller unterscheiden, und mit all den Gerüchten über so genannte Smart Watches können wir Bildschirme sehen, die nicht mehr auf vier Grenzen beschränkt sind. Mobile Bildschirme fügen zusätzliche Komplexität hinzu, da sie durch Rotation sowohl im Hoch- als auch im Querformat angezeigt werden können.
Die Antwort sind flüssige Layouts, die sich für jede Auflösung selbst anpassen und sowohl für die Hoch- als auch für die Querformatansicht angepasst werden können. Einige Websites verwenden ein flüssiges Layout, das das Aussehen der Website drastisch verändert, um die Kontrolle zu optimieren und das volle Potenzial des Bildschirms basierend auf seiner Ausrichtung zu nutzen.
Während Mäuse speziell mit Scroll-Rädern für einfaches vertikales Scrollen entworfen wurden, migrieren viele Benutzer zu Touchpads und Touchscreens, und da Apple die innovativere Form des Berührungsscrollens angenommen hat, die dem Verschieben einer Seite ähnlich ist, ist die kreativere Idee von Horizontales Scrollen ist vielleicht nicht ausgeschlossen. Die meisten Apps verwenden horizontales Scrollen als Werkzeug und bei weitem der größte Erfolg beim horizontalen Scrollen ist das Kindle, also warum nicht in das Web-UI implementieren? Viele einzelne Seite Seiten haben eine ausschließlich horizontale Achse, aber sie müssen oft Schaltflächen verwenden, um das Scrollen zu initiieren, da Benutzer das Nicht-Standard-Format möglicherweise nicht verstehen.
Das horizontale Scrollen kann ähnlich dem vertikalen Scrollen in Design-Begriffen sein, jedoch kann die Verwendung von beiden die Möglichkeit des Scrollens mit zwei Achsen eröffnen, was möglicherweise nicht im Browser funktioniert. Viele Benutzer mögen es, an einer Achse verankert zu sein, offensichtlich ist dies normalerweise die x-Achse, die statisch ist. Wenn Benutzer auf der Seite verloren gehen, können sie einfach hochscrollen und wieder in der Hauptnavigation sein. Auf Zweiachsen-Websites ist dies möglicherweise nicht so einfach und die Navigation muss möglicherweise mithilfe eines HUD-Stils "sticky" sein.
Welche Benutzeroberfläche sollte Ihre Website verwenden?
Natürlich ist nicht jede Benutzeroberfläche für jede Art von Website geeignet. Stellen Sie sich daher einige grundlegende Fragen: Wer ist Ihre Zielgruppe? Was versuchst du zu "verkaufen"? Welchen Eindruck möchten Sie geben? Jüngere Personen verwenden eher Touchscreens als ältere demografische Benutzer, die wahrscheinlich einen Desktop verwenden, aber möglicherweise größere Tasten und eine klarere Benutzeroberfläche benötigen. Es macht keinen Sinn, die innovativste Benutzeroberfläche zu erstellen, die man sich vorstellen kann, wenn niemand versteht, wie man sie benutzt. Denken Sie also immer daran, eine Benutzeroberfläche zu erstellen, die ein Benutzer sehen und sofort verwenden kann.
Radiales Menü
Ein radiales Menü, das auch als Kreismenü bezeichnet wird, ist ein kreisförmiges Kontextmenü, das anstelle von Höhe oder Breite einen multidirektionalen Kontext als Auswahlwerkzeug verwendet.
Dies ist eine großartige Form des intuitiven Designs, die verhindert, dass Benutzer in Dutzenden von Untermenüs verloren gehen. Ein weiterer Vorteil ist, dass ein Touchscreen-Benutzer bessere Kontrolle über normale Dropdown-Listen hat, da die Richtungssteuerung genauer ist als das Tippen. Die Verwendung von radialen Menüs in Formularen und Websites kann die Benutzerfreundlichkeit eines Touchscreens auf der Website dramatisch verbessern und erstreckt sich auch auf Thumbsticks wie auf Spielekonsolen. Häufig werden radiale Menüs verwendet, da Spiele problemlos auf den PC portiert werden können. Da Desktop-Benutzer auch nicht verlieren, da radiale Menüs lange Listen in einfache Kategorien vereinfachen können, was die Benutzerfreundlichkeit oder Produktivität auf einer Website erhöht.
Radiale Menüs sind eine gute Möglichkeit, kontextsensitive Informationen anzuzeigen. Ein Beispiel hierfür ist das Klicken auf ein Bild eines Gerichts auf einer Nahrungsmittelliste und die Möglichkeit, es zu retweeten, den Rezeptlink, die Zutatenliste oder das Bild zu speichern. Sie müssen jedoch darauf achten, dass Ihr Menü zugänglich und einfach bleibt. Andernfalls können Sie den Benutzer leicht überwältigen, besonders wenn Sie Symbole und Wörter in demselben radialen Menü kombinieren. Radiale Menüs sind viel einfacher zu verwenden, wenn sie statisch statt dynamisch sind, da dies zu Schwierigkeiten bei der Objektauswahl führen kann, wie z Phong In diesem Fall macht es insbesondere bei Verwendung einer Maus als Cursor-Tracking besonders unintuitiv.
Skeuomorphismus
Skeuomorphic Design ahmt das Aussehen und die Funktionalität eines alltäglichen Gegenstandes nach, um eine intuitive Benutzeroberfläche zu schaffen, die kürzlich aus der Mode gekommen ist, besonders seit Scott Forstall von Apple zurückgetreten ist und Sir Jony Ives flaches Design iOS und wahrscheinlich OS X in der Zukunft. Skeuomorphismus war ein großer Teil von Apples Streben nach intuitiverem Design, vor kurzem mit Contacts auf Mac als ein echtes Adressbuch, oder Kiosk und iBooks auf iOS als eigentliche Bücherregale. Dieser Entwurf ist einer, der den Benutzern der Berührungsschnittstelle offensichtlich zugute kommt, da wir nicht mit einem Cursor auf die Welt um uns herum einwirken.
Vertrautheit trägt zur Intuition bei, wenn man eine beliebige Benutzerschnittstelle verwendet. Dies ist der Punkt des Skeuomorphismus, um eine zusätzliche Dimension der Vertrautheit zu schaffen, indem man Kräfte mit realen Objekten verbindet, so dass der Benutzer sofort weiß, wie er damit umgehen soll. Ein erfolgreiches skeuomorphes Design bedeutet, dass Sie nur durch einen Blick auf die Webseite wissen, um welches Thema es sich handelt und für welche die Seite verwendet wird. Mouseover-Tooltips und Link-Highlights werden überflüssig.
Wählen Sie die Benutzeroberfläche
Dies ist eine Kombination von beiden oben, wo die gesamte Benutzeroberfläche eine einfache Wahl bildet; Das Design ähnelt einem radialen Menü, aber statt in der Mitte zu schwenken, wählt man von dort aus das Zifferblatt zu einem einzigen Auswahlpunkt. Dies ist sehr effektiv in Fällen wie Musik, bei denen die Regler oft dazu verwendet werden, einen Track zu mischen und die Lautstärke zu regeln. Im Fall des Netzlabels SHSK'H Sie verwenden eine geänderte Art der Dial-Benutzeroberfläche, um auszuwählen, welche Spur abgespielt werden soll.
Die minimalistische Bewegung
Minimalismus ist, wo eine Website auf ihre wesentlichen Elemente reduziert wird. Dies ist ideal für mobile Benutzer, da Ladezeiten und Datennutzung verringert werden und der Benutzer in der Lage ist, auf alle erforderlichen Informationen in einer übersichtlichen Oberfläche zuzugreifen, die für kleinere Auflösungen einfacher zu verwenden ist. Der heutige Minimalismus hat sich von den Stripping-Sites auf das Wesentliche reduziert und einen neuen Stil geschaffen, der als flaches Design bekannt ist. Dies hängt von der Überzeugung ab, dass Intuition im Design nicht mehr notwendig ist, da Schnittstellen und deren Verwendung zu einem so wichtigen Teil des Lebens geworden sind, dass Design nicht mehr den Nutzern sagen kann, was zu tun ist. Ein UI kann schließlich ein Werkzeug sein, anstatt sich zu verdoppeln ein Mentor. Flaches Design wurde lange durch die Verwendung von kräftigen Blockfarben gekennzeichnet, aber mit der Einführung von iOS7 haben Farbverläufe ihren Platz in der Welt des grenzenlosen flachen Designs gefunden und ziehen Eleganz aus dem Grellen.
Schließlich werde ich diesen Artikel mit einer Website beenden, die Dinge ein wenig anders macht. Thibaud ist ein kreativer Entwickler, der einen Portfolio-Website-Builder namens Pikibox entwickelt hat. Die Website ist extrem berührungsfreundlich, aber ohne den Zugriff auf Desktop-Benutzer zu behindern. Auf kleineren Touchscreen-Geräten wird der Benutzer jedoch an eine fokussierte Weiterleitung mit einer mobilen Schnittstelle gesendet.
Das schlichte Design funktioniert wunderbar, indem er sein gesamtes Portfolio auf professionelle Art und Weise präsentiert und gleichzeitig ein lustiges, neues Aussehen beibehält, das äußerst intuitiv ist. Natürlich liegt ein großer Teil des Designs in den Händen des Benutzers, da er in der Lage ist, den Ort der Navigation zu verändern und seine Verwendung räumlich anzupassen, was einige nicht als eine Designwahl darstellen würde. Die Desktop-Version gibt es in vier Stilen, und ich lade Sie ein, mit ihnen herumzuspielen und eigene Schlüsse zu ziehen, ob dies einfach unentschlossen oder sehr kreativ ist.
Welche Kompromisse haben Sie aufgrund von Touchscreens gemacht? Ist der Hover-Zustand Vergangenheit? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Bild berühren über Shutterstock.