Hover-Effekt und die Usability auf Tablets

Hover-Effekt und die Usability auf Tablets

Zahlreiche Webanwendungen sind mit Mousover Effekten mittels :hover versehen. Die Einführung von Touchscreens führt bei ausbleibender Optimierung zu Usability-Problemen. Karsten Rieger, Professional Frontend Developer bei Neofonie, erklärt anhand eines Beispiels, warum auf Tablet-Optimierungen nicht verzichtet werden sollte und welche Auswirkungen der Hover-Effekt hat.

Vorführeffekt

Neulich bei der internen Projektpräsentation ist es passiert – eine Website wurde zusammen mit einer unabhängig von ihr entstandenen iPad-App auch gleich auf demselben Gerät präsentiert. Bei der Konzeption wurde zwar explizit die Tablet-Optimierung aus Zeit- und Budgetgründen ausgeschlossen, aber was soll nun schon passieren?
Nichts!
Die Seite lud ordentlich und sah, sowohl im Hoch- als auch im Querformat, gut aus. Doch bei der Berührung eines interaktiven Elements passierte nichts – kein öffnendes Overlay, keine Fehlermeldung – einfach nichts.

Aber wie kann das sein?

HISTORISCHER RÜCKBLICK ZU EINGABEMEDIEN

Mit iPhone und iPad kamen nicht nur zwei Geräte auf den Markt, die der Sparte mobiler Kommunikation neuen Aufschwung gaben, sondern durch ihr neues Bedienkonzept vor allem in den Bereichen Anwendungskonzeption und Design völlig neue Herausforderungen mit sich brachten. Bis in die frühen 80er Jahre bestand der Schwerpunkt der Mensch-Computer-Interaktion in der Bedienung einer Tastatur.
Dann etablierten sich allmählich die grafischen Benutzeroberflächen, welche eine weitere Eingabemöglichkeit voraussetzten: die Computer-Mouse. Sie eröffnete ein neues Interaktionskonzept, die sog. direkte Manipulation. Man musste nun nicht mehr ein Vokabular mehr oder weniger sprechender Begriffe (Kommandozeilen-Befehle) und ihre Parameter kennen um Aktionen auszuführen, sondern konnte direkt am Bildschirm Daten anfassen und verschieben.

Bis zur Einführung des iPhones (2007) hat sich daran wenig geändert. Doch iOS setzte in den Bereichen der direkten Manipulation durch die Einführung der Mehrfingergestenerkennung bei Mobilgeräten („Pinch“ -> Zoom, „Tap“ -> Klick, zwei Finger zum Drehen, etc.) neue Maßstäbe. Nun konnte man direkt mit seinen Fingern am Bildschirm diese, zuvor über das Hilfsmittel „Mouse“ durchgeführten, Aktionen tätigen.

Die Mouse als Eingabemedium, welche durch ihre vom Bildschirm entfernte Position eine Repräsentation ihrer Position in Form eines Mouse-Cursors am Bildschirm benötigt, wurde durch die Finger abgelöst.

DER MOUSE-CURSOR VERSCHWINDET, IST ABER NICHT TOT

Da man nun jedoch die Finger direkt an Ort und Stelle des zu manipulierenden Objektes platziert, ist auch kein Cursor mehr notwendig. Und genau da besteht eines der Probleme.

Während man vor einem Klick mit der Mouse den Cursor über (:hover) ein Objekt bewegen muss, tippt man direkt mit seinen Fingern auf der Bildschirmoberfläche. Die Phase des darüber Bewegens existiert bei den meisten aktuellen Displays nicht, da sie nicht erkannt werden. Das „Point“ der „Point and Click“ Interaktion verschwindet.

Es existieren zwar vereinzelte Versuche der Gerätehersteller dem entgegen zu wirken, (Apple Patent für Touch and Hover PanelsSony Floating Touch) – durchgesetzt hat sich davon bislang aber noch nichts. Im Design und der Implementierung einer Website muss demnach davon ausgegangen werden, dass in nächster Zeit keine einheitliche Lösung gefunden wird, welche die Mehrheit der Nutzer mit ihren Geräten vorhalten werden.

Erschwerend kommt hinzu, dass es vermehrt Geräte gibt, die sowohl ein Touch-Display, als auch die klassische Mouse-Bedienung unterstützen, wie Microsofts Surface Tablets oder diverse Chromebooks mit Touchscreen.

WAS VERSTEHT MAN UNTER EINEM HOVER-EFFEKT?

Unter einem Hover-Effekt, „hover“ ist hier mit „schweben“ zu übersetzen, versteht man eine Interaktion auf einer Website, wenn man sich mit dem Cursor einer Mouse über ein Bedienelement befindet und sich darauf hin ein visueller Effekt folgt. Dieser Effekt ist auch unter dem Begriff Mouseover-Effekt geläufig.

VORTEILE EINES HOVER-EFFEKTS?

  • Durch einen Hover-Effekt signalisiert man dem User, dass man mit dem entsprechenden Element interagieren kann. So führt man den User gezielt durch die Website und gibt ihm damit Hilfestellungen bei der Bedienbarkeit.
  • Hover-Effekte erhöhen die Aufmerksamkeit der User. Meistens sind Websites recht star. Durch kleine Micro-Animations wie einem Hover-Effekt entsteht eine Dynamik und verlängert die Aufmerksamkeitsspanne der User, sodass diese weiter angehalten werden sich mit der Seite auseinanderzusetzen.

DER HOVER-EFFEKT AUF DEM TABLET

Doch zurück zum Problem: Warum geschah bei der Berührung eines interaktiven Elements scheinbar nichts?

Hover-Effekt mit der Mouse

Wie sich bei näherer Betrachtung herausstellte, lag auf dem Element eine CSS Deklaration, welche bei :hover ein weiteres, zuvor verstecktes Element (die Funktion „Mahlzeit auslassen“), einblendet. Ein Effekt also, der einem Ausklappmenü oder Dropdown ähnelt. Trotz einiger Usability-Probleme, die das Anzeigen von Informationen beim Darüberfahren mit sich bringt, ist dieses Vorgehen jedoch weit verbreitet.

Apple hat vor Einführung des iPhones das Problem erkannt und zur Erhaltung der Bedienbarkeit entsprechender Webseiten den Lösungsansatz umgesetzt, dass Hover-Effekte mit einem zusätzlichen Klick zu behandeln sind. Wo bisher mit dem Cursor drüber gefahren werden musste, muss nun eine Berührung mit dem Finger stattfinden.

Für Ausklappmenüs funktioniert das auch recht gut. Was aber, wenn auf dem selben oder einem umgebenden Element auch noch ein Klick-Event abgefangen werden soll?

Die Folge ist, dass zwei sequentielle Berührungen notwendig sind: die Erste löst den hover-Effekt aus, die Zweite startet dann das Klick-Event.

DOM-Ansicht des Hover-Effects

Aber Achtung Android verhält sich in diesem Fall anders. Dort wird nicht ein separates Klick-Event abgefragt, sondern die :hover Deklaration wird mit focus gleichgesetzt, wodurch sich in dem beschriebenen Fall direkt das Overlay öffnet (Klick-Event) und der Punkt „Mahlzeit auslassen“ eingeblendet wird (Hover-Effekt).

EINFLUSS DER :HOVER DEKLARATION AUF KLICK EVENTS

Dies war aber nicht das einzige Problem auf das wir gestoßen sind. Im sich darauf öffnenden Dialog befand sich eine Lebensmittelliste, deren Einträge einen Drill-Down aus Oberkategorien und dazugehörenden Lebensmitteln darstellten. Ein Klick auf eine Oberkategorie lädt die betreffende Liste zugeordneter Lebensmittel nach und schaltet dann die Maske für die Mengeneingabe in der dritten Spalte frei.

Doch auch hier passierte bei Berührung einer Kategorie zunächst nichts – auch nicht nach mehrmaligem Tippen.

War wieder eine unbedachte :hover Deklaration die Ursache? Nein – zwar besitzen die Listeneinträge einen Eintrag für die farbliche Hinterlegung, sobald man den Mouse-Cursor darüber bewegt, es werden jedoch keine versteckten Elemente angezeigt.

Schlimmer noch: der Click-Handler wurde gar nicht erst angesprungen!

DOM Click-Handler

Schaut man sich zunächst das Event-Binding an

$(document.body).on(‚click‘, ‚#foodByCategory-groupList li‘, HANDLERS.FOOD_GROUP_CLICK);

fällt einem vielleicht der Selektor ‚#foodByCategory-groupList li‘ auf. Hier wird ein Klick auf den Elementen li der Liste mit der ID „foodByCategory-groupList“ gebunden. Ein Blick in das HTML bestätigte den Verdacht: es gibt in der Liste mit den Einträgen kein Anker-Element (<a>).

Sollte das irgendetwas damit zu tun haben?

Nach eingehender Recherche sollte sich der Verdacht bestätigen – bei iOS können für gewöhnlich nur klassisch klickbare Elemente an das Klick-Event gebunden werden.

Interessant ist dabei der Workaround, der iPad und iPhone dazu bringt, doch auf Klick bzw. Touch-Events bei anderen Elementen zu lauschen: Man definiert per CSS für den :hover Zustand einfach ein

cursor: pointer

(was den Wechsel des Standard-Mauszeigers zu einer Hand mit gestrecktem Zeigefinger bewirkt) oder schreibt an das entsprechende Element im HTML das Attribut onclick=„“.

Der Grund für einen Workaround wirkt zunächst seltsam, der Hintergrund dürfte aber banal sein: Ressourcen sparen. Je weniger Elemente im DOM vom Browser auf Interaktion überwacht werden müssen, desto weniger Referenzen müssen im Speicher gehalten werden und desto weniger CPU Zyklen sind für die Überprüfung notwendig, was wiederum eine längere Akku-Laufzeit zur Folge hat. Dies ist zumindest meine ganz naive Vorstellung davon. Vielleicht ist es aber auch ganz anders und es musste damals auch einfach nur schnell gehen, weil Apple die Konkurrenz auf dem Tablet-Markt schon bedrohlich nah kam – wer weiss das schon.

FAZIT

Tablets haben heute einen höheren Stellenwert als noch vor zwei oder drei Jahren. Die Seiten sollten, auch wenn vielleicht nicht explizit dafür optimiert, zumindest funktional sein. Eine Seite wird nicht automatisch auf allen Geräten optimal dargestellt. Besonders schwer wiegen die Probleme, wenn es um Responsive Design geht. Umso wichtiger sind entsprechende Tests und im Vorfeld eine Konzeption, die die Bedienung auf Tablets nicht gänzlich ignoriert.

Aus Entwicklersicht sollte genauer hingeschaut werden, wenn :hover-Effekte zum Einsatz kommen und Klick-Handler auf Elemente gelegt werden.

Veröffentlicht am 3. Februar 2015, aktualisiert am 01. Oktober 2020

Teilen auf
Karsten Rieger

Karsten Rieger

Karsten Rieger ist ehemaliger Professional Frontend Developer bei Neofonie. Seit 2006 hat er diverse technische Abteilungen wie ASP, Forschung und Entwicklung sowie Projects bzw. Software Factories durchlaufen. Sein Interesse gilt dabei verstärkt der Frontend-Entwicklung. Als Teil des Client Teams entdeckt er bei der Umsetzung diverser Kundenprojekte, dass hinter Frontend-Entwicklung mehr als „nur ein bisschen HTML und CSS“ steckt.

Modellkomimierung_News

KI-Modelle komprimieren und Ressourcen sparen

Viele KI-Modelle haben hohe Trainings- und Betriebskosten und damit sowohl wirtschaftliche als auch ökologische Folgen. Qi Wu von ontolux stellt einige Methoden der Modellkomprimierung vor, die helfen, den CO₂-Fußabdruck, der durch die Verwendung neuronaler Netze entsteht, zu verringern. 

BSI_Grafik_kl

Analyse von Lageinformationen für das BSI

ontolux entwickelt für das Bundesamt für Sicherheit in der Informationstechnik (BSI) eine NLP-Anwendung zur Analyse von Lageinformationen und der Erkennung von Gefahrenmeldungen.

Header_KI_Forschung_ontolux

KI & Forschung 12-2021

Das Jahr 2021 war geprägt von Language Models, aber generell war eine gewisse Stagnation im Bereich KI und NLP zu erkennen. In der aktuellen Dezember-Ausgabe von „KI und Forschung“ stellt Dr. Till Plumbaum erneut die wichtigsten Ereignisse im KI-Umfeld vor.

Kuchenbuch_Michaela

Mobiles Arbeiten bei Neofonie

Seit 2020 arbeitet die Mehrheit der Neofonie Mitarbeiter remote aufgrund der aktuellen Situation – Pandemie. Wie hat sich das Miteinander und das gemeinsame Arbeiten verändert? Wir haben Michaela Kuchenbuch, HR Recruiting, gefragt, was die neue Arbeitskultur bei Neofonie ausmacht und wie sie sich umsetzen lässt.

Künstliche neuronale Netze und Ihre Rechenleistung

Künstliche neuronale Netze (ANN) haben in der Regel eine enorme Größe mit unzähligen Parametern, um komplexe Probleme zu lösen. Dies erzeugt jedoch hohe Rechenleistungen. Unsere KI-Agentur ontolux stellt einige der bekanntesten neuronalen Netze für NLP hinsichtlich ihrer Leistung, Größe und Energieeffizienz vor.

KI & Forschung 11-2021

In der aktuellen November-Ausgabe von „KI und Forschung“ geht es um die Fortschritte in der Informatik, Mathematik und Computertechnik, den freien Zugang zu GPT-3 und um die Ethik von Künstlicher Intelligenz.

Whitepaper zu Text Mining und NLP-Frameworks im Vergleich

ontolux – KI-Agentur der Neofonie gibt im aktualisierten Whitepaper “Die wichtigsten deutschsprachigen NLP-Whitepaper unter der Lupe” einen detaillierten Überblick über Anforderungen, Anbieter-Tests sowie Ergebnisse.

Reibungslose CMS Einführung bei R+V

Auf der Suche nach einer sicheren und einheitlichen technologische Content Plattform für die gesamte R+V, hat sich die R+V Versicherung für Einführung des neuen Content Management Systems Magnolia entschieden. Die Implementierung erfolgte durch Neofonie.

scalye_News_Logo

Neofonie ist Partner für die ABOUT YOU SCAYLE Commerce Engine

Neofonie gehört zu den ersten 14 ausgewählten deutschlandweiten Partnern für das Enterprise Shop Software SCAYLE. Als Partner unterstützt Neofonie vor allem in der Beratung, UX, im Frontend und der Implementierung.

In der aktuellen Oktober-Ausgabe von "KI und Forschung" geht auf das neu erschienene Language Model – MT-NLG von Microsoft und NVIDIA ein, beschäftigt sich mit der neuesten Version der Machine Learning Library PyTorch und der Zukunft der Suche.

KI & Forschung 10-2021

In der aktuellen Oktober-Ausgabe von „KI und Forschung“ geht es um das neu erschienene Language Model – MT-NLG von Microsoft und NVIDIA sowie um die neueste Version der Machine Learning Library PyTorch und die Zukunft der Suche.

Gratis Usability Check mit Grant McGillivray

Ein digitales Produkt, sei es eine Website, ein Onlineshop oder eine digitale Anwendung, soll Usern ein positives Nutzererlebnis verschaffen. Wie kann dieses wichtige Ziel erreicht werden? Wie gut ist das Nutzererlebnis der eigenen Website? ION ONE gibt darauf Antworten mit einem kostenfreien Usability Check.

Digitalisierung der öffentlichen Verwaltung

Im Rahmen der Onlinezugangsgesetzes (OZG) sind Einrichtungen der öffentlichen Hand verpflichtet, ihre Serviceleistungen digital zugänglich zu machen. Hierfür ist die automatisierte Verarbeitung von Texten unumgänglich, um „weniger Papierkram“ zu verursachen.

axel-ionone_news

UX-Sprechstunde mit Axel Hillebrand

Digitale Produkte nutzerzentriert zu gestalten, wirft viele Fragen auf. Mit der UX-Sprechstunde von ION ONE steht Ihnen Axel Hillebrand als UX-Experte für jegliche Fragen zur Verfügung – kostenfrei und ganz individuell.

Noelani_Mac

noelani.de: Der neue Onlineshop für trendbewusste Frauen

Der femininen Schmuck von NOELANI erhält erstmalig eine eigene Onlinepräsenz. Von der Konzeption, über das Design bis zur Entwicklung auf Shopware 6 hat Neofonie den neuen Onlineshop umgesetzt.

KI & Forschung 09-2021

In der September-Ausgabe von „KI und Forschung“ werden die Themen Künstliche Intelligenz als Forschungsgebiet, Arbeiten in der Zukunft und Neuigkeiten von Google aus dem Search On Event vorgestellt.

ION ONE beim Digital Marketing Summit 2021

Der Digital Marketing Summit ist das Event des Jahres 2021 für Themen des digitalen Marketings und UX/UI. Axel Hillebrand von der UX-Agentur ION ONE ist mit einem Vortrag vertreten und zeigt, wie B2B-Websites in Lead-Maschinen verwandelt werden.

Whitepaper: Goldstandard für kundenspezifische Suchlösungen

Eine kontinuierliche Optimierung einer Suche ist unerlässlich. In dem Whitepaper „Goldstandard für kundenspezifische Suchlösungen“ stellt Cornelia Werk, Lead Consultant Search bei ontolux, Konzepte einer goldstandardbasierten Evaluation vor.

Index eines Buches

Neofonie startet Forschungsprojekt mit der HU Berlin

Zusammen mit dem Lehrstuhl der HU Berlin von Professor Alan Akbik, startet Neofonie das ZIM Projekt Semantische Begriffsanalyse für Information Retrieval Aufgaben (SEBIRA).

Header_Crossplan_PM

Crossplan Deutschland und Neofonie Mobile GmbH entwickeln Wrapper SDK für Audio-Apps

Mit dem neuen Wrapper SDK von Crossplan Deutschland stehen Audio-Publishern einfach und effizient alle benötigten SDKs für ein datengetriebenes App Advertising und Audio-Marketing zur Integration in die eigene App-Landschaft zur Verfügung.

Green_IT

Neofonie mit klimaneutraler Website

Neofonie setzt auf Green IT und ist bemüht, Emissionen so weit wie möglich zu reduzieren und Ressourcen umweltschonend einzusetzen. Jeder Klick auf neofonie.de ist klimaneutral. Neofonie unterstützt hierfür zertifizierte Klimaprojekte.

Unser Newsletter „Neo Report“ vermittelt konkretes Praxiswissen, Trends und Know-how für Ihr digitales Business – quartalsweise und kompakt. Jetzt anmelden.