Entwicklung & Design

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Seite 2 / 2

1. Relative Größeneinheiten einsetzen

Bedingt durch die Form und Größe des menschlichen Fingers müssen Interaktionsflächen für die Touchbedienung größer sein als für eine Mausbedienung: Der Nutzer muss das Interaktionselement sicher mit dem Finger treffen können. Dabei ist auch der Abstand zwischen Elementen zu beachten, da der Nutzer bei zu geringen Abständen aus Versehen mehrere Elemente bedienen oder markieren könnte. Zudem muss der Abstand zwischen Interaktionselementen und nicht-interaktiven Elementen ausreichend sein, da letztere auf einem Smartphone ebenfalls eine Aktion auslösen können. Zum Beispiel wird auf einem Smartphone ein Fließtext bei Tap markiert und es erscheinen Kopier-Möglichkeiten. Diese Option ist zwar auch auf Geräten mit Maus-Eingabe vorhanden, kann dort allerdings präziser durch ein bewusstes Klicken und Halten der Maustaste genutzt oder eben vermieden werden.

Webdesigner sollten vermehrt auf relative Größeneinheiten setzen. (Grafik: Shutterstock)

Webdesigner sollten vermehrt auf relative Größeneinheiten setzen. (Grafik: Shutterstock)

Weit verbreitet ist die Ansicht, dass Interaktionselemente eine Mindestgröße von 44 Pixeln haben sollten. Basis für diese Ansicht sind die Apple-iOS-Human-Interface-Guidelines. Guidelines anderer Hersteller weichen allerdings in unterschiedlichem Maß von diesen Angaben ab, die ohnehin nicht der tatsächlichen Größe des menschlichen Fingers entsprechen.

Bei Responsive Design ist die Auflösung des Betrachtungsgeräts entscheidend. Um auf jedem Gerät die optimale Größe von Elementen zu erhalten, wird die Nutzung von relativen Größeneinheiten empfohlen: EM sind die neuen Pixel. Die Nutzung der Einheit em oder rem (root em) erzeugt Layouts mit relativen Größen. Abhängig von der Auflösung des Betrachtungsgeräts verändern die Elemente ihre absolute Größe – während der 4 mal 6 em große Button auf dem Smartphone (ausgehend von 1 em = 12 px) gerade einmal 48 mal 72 Pixel groß angezeigt wird, kann derselbe Button auf dem Smart-TV (ausgehen von 1 em = 25 px) riesige 100 mal 150 Pixel annehmen und ist so auch vom Sofa aus zu erkennen.

2. Mouse-Over durch Tap ersetzen

Heute ist es möglich, auf Geräten mit Touchbedienung allerlei Gesten zu implementieren. Der Nutzer weiß allerdings oft nicht, dass er sein Gerät schütteln soll, um eine Aktion auszulösen, oder hat nie gelernt, dass er mit der Zeichnung eines bestimmten Musters zur Startseite gelangt. Deshalb sollten sich Designer und Entwickler bei Touchbedienung auf die bekannten Basis-Gesten beschränken, die die meisten Nutzer ohne große Erklärung verwenden. Dazu gehört auch, dass man auf die Bedienung mit der Maus zugeschnittenen Interaktionen wie beispielsweise das Mouse-Over durch übliche Gesten wie Tap ersetzt.

Problematischer wird das Fehlen des Mouse-Over allerdings bei der Navigation. Bei Websites mit vielen Ebenen gibt es dort oft eine Doppelfunktion: Bei Mouse-Over werden die Unterebenen angezeigt, bei Klick gelangt der Nutzer auf die Übersichtsseite. Die zweifache Belegung eines einzelnen Navigationselements muss für Geräte mit Touchbedienung aufgelöst werden.

3. Texteingabe minimieren

Obwohl virtuelle Tastaturen in den vergangenen Jahren weiterentwickelt wurden und zusätzliche Features wie taktiles Feedback bekommen haben, ist die Eingabe längst noch nicht so komfortabel und schnell wie auf einer realen Tastatur. Dies könnte sich in den kommenden Jahren ändern, da Features wie Swipe-Eingabe und Wortvorhersagen optimiert und zunehmend eingesetzt werden. In Zukunft könnte die Eingabe durch virtuelle Tastaturen sogar die angenehmere und bevorzugte Methode werden. Bis es jedoch soweit ist, sollte dem Nutzer grundsätzlich die Eingabe langer Texte erspart bleiben.

Die lange Texteingabe auf Smartphones ist nicht gerade komfortabel. (Foto: Shutterstock)

Die lange Texteingabe auf Smartphones ist nicht gerade komfortabel. (Foto: Shutterstock)

Neben dem mangelnden Komfort bei der Eingabe haben virtuelle Tastaturen den Nachteil, dass sie wertvollen Platz im Display einnehmen. Das kann gerade bei kleinen Geräten dazu führen, dass der Nutzer während des Tippens nur wenig von seinem geschriebenen Text sehen kann. Die größte Frustration ruft die virtuelle Tastatur auf einem TV-Gerät hervor: Das Auswählen der einzelnen Buchstaben über Pfeil- und Bestätigungstasten ist eine echte Qual und nimmt sehr viel Zeit in Anspruch. Auf einer Smartwatch hingegen ist die direkte Texteingabe meist nicht möglich. Hier wird ein an die Uhr gekoppeltes Smartphone benötigt, was einen Medienbruch in der Bedienung bedeutet.

Mobile Bandbreiten bedenken

Eine intuitiv zu bedienende Navigation auf allen Geräten sowie die möglichst komfortable Eingabe von Text und Buchstaben sind die Basis, damit Responsive Webdesign sich auch durch eine hervorragende Usability auszeichnet. Doch auch die Ladegeschwindigkeit spielt eine große Rolle.

Viele Geräte werden heute mobil genutzt. Hat der Nutzer keine gute Internetverbindung, werden Inhalte wesentlich langsamer geladen. Lange Ladenzeiten sorgen jedoch nicht nur für Ungeduld und Frust, sondern können auch die Usability von Websites einschränken. Durch zu große Datenmengen bei schwacher Internetverbindung kann es passieren, dass der Nutzer kein oder ein zu langsames Feedback auf eine Aktion erhält. Wenn sich beispielsweise ein Akkordeon nicht sofort bei Tap öffnet, könnte der Nutzer denken, er hat das Interaktionselement nicht richtig mit seinem Finger getroffen. Bei dem Versuch, das Akkordeon erneut zu tappen, schließt er es unbewusst wieder. In den Augen des Nutzers erscheint Element kaputt – und das nur, weil das Interaktionselement zu langsam auf die Eingabe reagiert hat. Ein schlanker und semantisch klug strukturierter Quellcode sowie Optimierung der serverseitigen Auslieferung kann solche Probleme verhindern.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Guter Text
Guter Text

Gute Ergänzung zu den anderen Responsive-Artikeln.
Solche Texte schreibt man vermutlich an der Universität bzw. unter Fachleuten.
Man sollte die Sprache des Gegenüber sprechen und ggf leicht anpassen oder Beispiele ergänzen oder ändern.

Aber endlich schreibe nicht mehr nur ich das man nachts im Dunkeln bei Eis und Schnee mit kalten nassen dicken Wurstfingern bei ständig wechselndem Licht (1) Apps ERFOLGREICH bedienen will.
(1) https://t3n.de/news/dear-mark-zuckerberg-664030/ (zweiter Absatz)

Rezeption/Lesen ist auch anders als Bedienen. Wenn man also 20% größer schreibt sollte man die Buttons aber vielleicht 50% größer machen was etwa nur etwa 22% mehr Radius aus macht aber 50% mehr treffbare Pixel auf dem Screen bedeutet und auch noch nicht fett aussieht. Davon abgesehen die Buttons so weit wie möglich entfernt voneinander. Das Web-Interface einfach wie am Kopierer prozentual einheitlich zu vergrößern wo man pixelgenau mit der Maus zielen kann ist oft wohl nur halbgar.
Wie man an Fernsehern, Settopboxen und natürlich Apps sieht, benutzen die Top-Boni-Manager ihre Apps meist gar nicht selber… M$ wird (früher zumindest) mit Emails kontrolliert. Daher ist Outlook und outlook Express so gut. Gleiches gilt wohl für Google und Google-Mail welches die Boni-Manager täglich selber nutzen und jedes Hindernis entfernen lassen.

Ich würde z.b. bei Skype/Hangouts usw. den Anruf-Beenden-Button WEIT WEIT WEG von allen anderen Schaltflächen wohl unten platzieren damit man wie am Handy blind den Anruf beenden kann. Das macht Skype natürlich nicht wodurch die Verweilzeit unnötig und vermeidbar länger wird…
Mit Maus kann man pixelgenau zielen. Die frühen Touchscreens hatten auch schon mal cm-weite Abweichungen von Fingerposition zu aktivierter Schaltfläche. Geht zum Spaß an Fahrkartenautomaten und lernt wie man User-Interfaces vielleicht macht oder auch nicht. Die sind immer unterschiedlich je nach Verkehrs-Netz.

Skype ist auch ein Anti-Beispiel woran man viel verdeutlichen kann wie man es besser nicht macht.

Bei vielen Betriebs-Systemen gibt es übliche Bedienkonzepte welche der User kennt.
Nett sind aber wie bei Tom-The-Cat(?) oder irgendeiner Google-App überall eine KONTEXTBEZOGENE „(?)“-Schaltfläche wo man erklärt kriegt was grade dort im Screen geht. Da kann man dann auch die krassen 10-Finger-Shaolin-Touch-Screen-Gesten GRAPHISCH und OFFLINE erklären… statt zu erwarten das Männer die nicht mal Anleitungen lesen sich stundenlange Youtube-Erklär-Videos die ein ganz anderes Handy zeigen mit ganz anderer Android-Version oder ganz anderem iOS (mit und ohne Druck-Stärken-Erkennung) angucken sollen. Offline irgendwo in den WiFi-Freien Outlands wo man die App vielleicht gerne nutzen würde wäre eingebaute Hilfe bei 50Megabyte großen Apps ja wohl nicht zu viel verlangt…
Der alte Opera hatte auch nette Mausgesten. Dummerweise habe ich nirgendwo eine nette Übersicht gesehen so das man die eher versehentlich gelernt und dann vergessen hat, wenn man mal den Finger nicht schnell genug von der Maustaste genommen hatte.

Das man Buchstaben optisch auf einen Globus packt und das auf der Smartwatch bzw. TV-Screen bequemer sind als die übliche Anordnung sollte auch klar sein. Auch die Zahlentasten werden von den meisten Settopboxen und TVs nicht genutzt obwohl praktisch jede Fernsteuerung sie hat… Damit kann man auch nette Tastaturen realisieren wie damals von Siemens für Tasten-Handies diese schnelle Text-Eingabe.
Die M$-Word-Textkorrektur ist sehr gut. Aber die von Openoffice ist viel trivialer weil sie Worte vorschlägt welche im Aktuellen Text stehen. Das ist bei Briefen an verschiedene Leute, bzgl. verschiedener Themen usw. sehr hilfreich. Die meisten Completions taugen leider viel zu wenig.

Ständig muss man mit bloßen Fingern seine Email-Adresse eingeben. DANKE Opera Mini, DANKE Chrome@Android, DANKE Safari, DANKE Firefox@Android…
Das ist besonders dankenswert weil man beim Einschalten als allererstes meist per Email registrieren und das Handy nutzbar machen muss. Das ist also das erste Wort was ein Handy vom Besitzer lernt und worauf es geprägt wird… Danke Handy-Browser…. Man merkt das die Boni-Manager alles von Praktikanten erledigen lassen und selber ihre Apps seit Jahren nicht benutzen…

Schön wäre ein mehrseitiges Cheat-Sheet mit dem Inhalt des Artikels und natürlich viel mehr was man auch Kunden zeigen kann die selber ja zumindest teilweise am TV oder iPad genervt sind von jämmerlichen Apps wo sie nicht mit klar kommen. Das würde man 2-4 mal pro Jahr überarbeiten und man muss nicht mehr bei Zeitschriften hoffen dort Artikel unterbringen zu können und hoffen das bessere Apps ein wenig mehr werden denn auch Großeltern nutzen Web und App.
Es gibt zwei App-Sorten: Die guten und die denen die User egal sind. Die guten lesen die Crash-Reports und wissen einfach nicht das es Smartwatches mit Drehring gibt wo man Buchstaben vielleicht schneller oder auch noch selektieren kann.
CWM oder wie dieses CyanoPreBoot-Environment heisst arbeitet nur mit Lautstärketasten und Home-Button.
Manche Buttons sind nur soft. Man muss also immer als Hard-Buttons also Home, Back und ‚=‘ (diese drei Striche) unterstützen aber natürlich auch wissen das es üblich ist, die ‚=‘ oben irgendwo reinzumalen und dann schiebt sich bei Android so ein Menü mit allen möglichen Optionen rein.
Sowas sind aber übliche Konzepte vom Gui die man teilweise natürlich auch auf andere Betriebs-Systeme rübernehmen kann wie z.b. den Back-Button der im Web nicht so eine relevante Rolle spielt.

Manchmal ist es vielleicht auch schlau Elemente anzuzeigen die sich dann selber dort hin schieben von wo man sie wieder aufrufen oder auf-falten kann. Eine Katze sieht ja auch wo die Maus verschwindet und lauert drauf das sie dort wieder heraus kommt.
Früher gabs bei Apps unter Windows95 schon beim Start Tipps was so geht. Ein leeres Word-Dokument bietet sich dafür ja an. Auch bei Browsern wäre es gegangen bevor die Quick-Start-Icons dort erschienen.

Einheitliche Bezeichnungen und Crowdbasierte Übersetzungen wären auch mal was nettes.
Ich hatte mal eine App bei Symbian wo gefragt wurde wie viel Millimeter der Screen groß wäre. Hier und da findet man kleine Perlen die sich aber nicht durchsetzen. Bei allen CMS gibts aber größer/kleiner-Fontsize-Buttons für Leute die ihre Brille nicht tragen.

Spracheingabe ist inzwischen sehr gut, aber in WiFi-Freien Diktaturen wo es kaum Internet gibt und man die Monopolisten-Boni-Manager (und sicher keinen Klein-Aktionär) reich machen soll oder halt auch in Supermärkten geht es oft nicht so gut weil die Spracherkennung unbedingt online sein muss :-((( Evtl ist Cortana besser. Googles Wachstum stagniert ja vermutlich auch wieso man zum ersten Mal überhaupt Wert auf schlanke Webseiten und geringen Datentraffic in GSM-Gebieten wie Afrika oder am Monatsende in Deutschland wenn das LTE/UMTS-Tape-Flat-Volumen verbraucht wurde legen muss um vielleicht überhaupt noch zu wachsen.

Wer ein Google-Cardboard oder die günstigen Plastik-Modelle aus China hat erkennt sofort wie erbärmlich noch ein paar Evolutions-Stufen tiefer dort die Apps aktuell bedient werden. Die Technik ist ok. Die Handies haben die Leistung. Einzig die Software-User-Interfaces sind oft unbrauchbar für Medien-Konsum :-((((( Einen Film 3 Stunden am Stück gucken geht. Aber browsed mal Photos o.ä. :-(((

Die vielen Eingabe-Methoden: Tastatur/Maus, TV (Fernbedienung, Tastatur,… natürlich nicht beleuchtet aber mit 10000 Tasten!), Touchscreen, Smart-Watch usw. halte ich schon seit einer Weile für ein (eigentlich schon aktuelles) Problem vieler Apps. Bisher ging es halt meist nur um die Rezeption also responsive Webseiten oder auch Apps.
Amazon macht es sich durch die Sprachsteuerung bei FireTV-Box natürlich einfach. Doch geht damit auch offline-Medienkonsum in der USA-Wald-Ski-Hütte ?
Uhren sind auch nicht schlau und machen den Rand touchfähig. Stattdessen sollen dicke Wurstfinger ständig auf dem Display alles verdecken obwohl der Rest der Uhr ein swipen und scrollen durch die Emails usw. ermöglichen könnte. Siehe dieses ur-alte ipod-Touch mit diesem Touch-Kreis als Idee für um das Display herum.

Reiter sieht man immer weniger. Siehe die Settings von Browsern mal als abschreckende Beispiele für Vorträge. Schön ist aber das Text-Suchfeld in den MacOS-System_Settings und bei Cyanomodgen in den Settings oder auch bei Emails also wo die Boni-Manager Optimierung durchsetzen weil sie selber es benutzen:
RAM, Speicher
CPU Prozessor AMD Intel
Mainboard, Hauptplatine, Motherboard

und natürlich englisch und deutsch zeigen auf das diese Suchen durch Thesauri ergänzt gehören. Das machen Online-Shops bis heute nicht und schauen wohl nicht mal in die eigenen Such-Anfragen… Fragt doch in der Redaktion eure KMU-Bekannten oder schaut was die Leute suchen und was sie kriegen. Helfen sollte man zuerst bei keinen oder kaum und natürlich auch bei krass vielen Suchergebnissen.
Bei Emails müsste man selektive Selektoren finden (Selektivität aus der Datenbank-Vorlesung) und vorschlagen womit man schneller kleine Teilgruppen oder die gesuchte Email finden kann. Daran scheitern Swype-Keyboard usw. bis heute obwohl jeder der mal was (Emails, Kontakte,…) gesucht hat es sofort als Idee haben sollte… D.h. DER, DIE, DAS vorzuschlagen ist weniger hilfreich als bei „Müller“ die Vornamen oder Position oder PLZ oder Firma als Selektor auf dem riesigen Touchscreen vorzuschlagen.Auch am TV kann man mit den Zahlentasten dann die 20 Müllers der Kontaktliste per 1..9 und 01..09 selektieren. Keiner ausser mir nutzt die 0-Taste als verdoppeller der Zifferntasten. Quasi die „Shift“-Taste der Ziffern welche den Großeltern die schnellere Versendung der Weihnachts-Grüße ermöglicht.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung