Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

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

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

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste Design ist nicht automatisch nutzerfreundlich. Damit eine responsive Seite auch bei der Usability punktet, muss die Navigation konsistent sein und die unterschiedlichen Eingabemethoden müssen berücksichtigt werden. Worauf Designer und Entwickler achten müssen, erklärt Simon Loebel, COO der UDG United Digital Group.

Navigation konsistent gestalten

Das Responsive Webdesign sollte konsistent sein, damit sich der User auf Desktop oder Mobilgerät zurechtfindet. (Grafik: Shutterstock)
Das Responsive Webdesign sollte konsistent sein, damit sich der User auf Desktop oder Mobilgerät zurechtfindet. (Grafik: Shutterstock)

Entscheidende Faktoren für gelungenes Responsive Webdesign sind die Wiedererkennbarkeit und die Konsistenz des Designs. Aufgrund der unterschiedlichen Bildschirmgrößen werden Layout und die Anordnung des Contents von Auflösung zu Auflösung anders dargestellt. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten dennoch einheitlich bleiben. Idealerweise findet sich der User in allen Viewports zurecht, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

1. Navigation

Eine in der Bedienung konsistente Navigation ist aufgrund der unterschiedlichen Platzverhältnisse schwer für alle Bildschirme und Viewports umzusetzen. Deshalb sollte in erster Linie darauf geachtet werden, dass die inhaltliche Taxonomie und Benennung der Navigation auf allen Geräten hinweg konsistent bleibt, während sich der funktionale Aspekt der Navigation unterscheiden kann.

2. User-Interface-Elemente

Neben Logo und Farbwelt sollte auch das Design der User-Interface-Elemente möglichst einheitlich sein. So wird gewährleistet, dass der Nutzer einen Button oder einen Link als solchen erkennt, egal welchen Viewport er betrachtet. Auch die Funktion der Elemente sollte einer möglichst großen Konsistenz unterliegen, wobei hier Anpassungen an die Anforderungen der Viewports und Eingabemethoden sinnvoll sind. Beispielsweise müssen alle Funktionen und Informationen auf einem Gerät mit Touchbedienung auch ohne Mouse-Over erreichbar sein.

3. Content und Funktion

Smartphone-Nutzer möchten mit ihrem Gerät Zugriff auf alle Funktionen und Inhalte haben, die eine Webseite auf dem Desktop bietet. Auch wenn Funktionen und Inhalte auf verschiedenen Endgeräten unterschiedlich angeordnet sind und präsentiert werden, sollten diese den Nutzern auf allen Viewports verfügbar sein.

4. Struktur

Auf kleineren Viewports ist es schwierig, komplexe Strukturen darzustellen. Deshalb kann es je nach Fall sinnvoll sein, Verschachtelungen auf einer Seite aufzulösen und gegebenenfalls auf mehrere Seiten zu verteilen. Alternativ sollten vor allem für die kleinen Viewports passende Symbole gewählt werden, die eine Verschachtelung auf einer Seite verdeutlichen. Gute Möglichkeiten sind Akkordeons oder Reiter. Deutliche visuelle Hierarchieebenen in Headlines sowie Trennlinien zwischen Inhaltsblöcken heben die Struktur weiter hervor.

Eingabemethoden berücksichtigen

Gern vergessen aber trotzdem wichtig: In Zeiten von Smart-TVs werden Websites auch oft per Fernbedienung bedient. (Grafik: Shutterstock)
Gern vergessen aber trotzdem wichtig: In Zeiten von Smart-TVs werden Websites auch oft per Fernbedienung bedient. (Grafik: Shutterstock)

Die Bandbreite der Geräte zur Betrachtung von Websites nimmt weiter zu. Zu den bereits weit verbreiteten Desktop-PCs, Tablets und Smartphones kommen heutzutage Smartwatches und Smart-TVs. Das bedeutet, dass – zusätzlich zu den Anforderungen an Darstellungsgröße und Layout der Inhalte – die jeweilige Eingabemethode des Device berücksichtigt werden muss.

In Bezug auf die gängigen Geräte zur Betrachtung von Websites kann zwischen drei grundsätzlich unterschiedlichen Eingabemethoden unterschieden werden:

  • Maus- und Tastatur-Eingabe: Diese Methoden der Eingabe sind üblicherweise auf Desktop-PCs und Laptops verfügbar.
  • Finger-Eingabe und virtuelle Touch-Tastatur: Vor allem auf mobilen Geräten wie Smartphones und Tablets erfolgt die Eingabe direkt durch den Finger des Nutzers.
  • Fernbedienung und virtuelle Non-Touch-Tastatur: Für Smart-TVs müssen neue Eingabemethoden in Betracht gezogen werden. Da sich der Markt an ausgefeilten Fernbedienungen mit Laser, Touch-Rad oder Joystick erst noch entwickelt, sollte bei der Bedienung des Interface am TV-Gerät von eingeschränkten Eingabemethoden, nämlich einer klassischen Fernbedienung nur vier Pfeiltasten und einer Bestätigungstaste, ausgegangen werden.

Die Größe des Betrachtungsgeräts sowie der übliche Abstand des Nutzers zum Gerät haben Einfluss auf die Auflösung und sollten auch bei der Gestaltung und Programmierung von Websites bedacht werden.

Finde einen Job, den du liebst zum Thema TYPO3, JavaScript

1 Reaktionen
Guter Text
Guter Text
17.12.2015, 14:14 Uhr

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) http://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.

Abbrechen