UI-Design Tipps für mobile Devices – Teil 1

UI-Design Tipps für mobile Devices – Teil 1

Back-to-Top Buttons

Fixer Bestandteil jeder modernen Website: der Back-To-Top Button. Mit tollen Effekten wie Smooth Scrolling ausgestattet, befindet sich dieser allerdings meist am Ende der Seite im Footer und erfüllt nur teilweise seinen Zweck. Bei langen Artikeln, Wikipedia-Einträgen o.ä. scrollt man nicht immer bis ans Seitenende und gelangt somit erst gar nicht zum Button – bei Seiten mit Infinite Scrolling erübrigt sich die Sinnhaftigkeit eines solchen Buttons nahezu gänzlich. Auch für iPhone und iPad User ist ein solcher Button nur bedingt praktisch, da man bei jedem iOS-Device durch Tippen auf die Symbolleiste an den Seitenanfang gelangt. Kommt er zum Einsatz, ist es am sinnvollsten durch einen sogenannten Floating Button, mit einer fixen Position auf der Seite und an jeder Stelle erreichbar.

Floating Back-to-Top-Buttons auf einer Website

Floating Back-to-Top-Buttons auf einer Website

QR-Codes

Auch wenn QR-Codes nicht direkt das UI-Design betreffen, möchte ich gerne auf die Verwendung und die oft dahinter gespeicherten Verlinkungen eingehen. Wird ein QR-Code auf einem Print-Produkt eingesetzt, ermöglicht er es dem User schnell, einfach und ohne Abtippen durch Scannen mit dem Smartphone eine bestimmte Aktion zu starten – in den allermeisten Fällen wird eine Website geöffnet. Da dies zu 100 % auf einem Smartphone oder einem anderen mobilen Gerät passiert, darf der QR-Code auf keinen Fall auf eine Seite mit Flash-Inhalten oder gar eine Flash-Website verlinken und sollte bestenfalls auch zu einer mobil-optimierten Website führen. Noch ein kleiner Zusatztipp am Rande für alle QR-Code-Ersteller: längere Links vorher mit einem URL-Shortener kürzen und den QR-Code mit dieser Short-URL erzeugen. So wird der QR-Code gröber und kann schneller erfasst werden.

Interaktive Google Maps

Oft und gerne wird eine Google Maps Integration auf Websites und in Apps verwendet, um den Standort in Form einer interaktiven Karte darzustellen. Die Vorteile einer solchen Interaktivität auf Desktop-Geräten können auf Touch-Devices jedoch schnell zu Nachteilen und somit unangenehm werden. Da Scrolling und das Bewegen der Karte auf Touch-Devices dieselben Aktionen verlangen – mit dem Finger wischen – macht eine interaktive Google Maps Integration das Weiterscrollen schnell zu einer nicht mindergroßen Herausforderung für den User. Man kann diesen Fehler einfach verhindern indem man die interaktive Karte z. B. durch Buttons ersetzt. Der Button führt direkt zur Adresse in der Google Maps App (wenn installiert) oder zur Website von Google Maps. Eine weitere Möglichkeit wäre auch noch eine Copy-Paste-Funktion der Adresse anzubieten, dies erleichtert es dem User die Adresse in jeder beliebigen Navi-App einzufügen und danach zu suchen.

Google Maps Integration auf Website (links: mobil, rechts: Desktop)

Google Maps Integration auf Website (links: mobil, rechts: Desktop)

Formulare

Ob als einfache Newsletter-Anmeldung, Registrierungsprozess oder Kontaktmöglichkeit – Formulare findet man in vielen Apps und auf beinahe jeder Website. Eine saubere Umsetzung erleichtert dem User das Ausfüllen und kann Abschlüsse/Anfragen durchaus erhöhen. Ein wesentlicher Bestandteil eines Formulars ist der Platzhaltertext. Verschwindet dieser beim Fokus einfach, wird ein Vorname-Feld schnell zu einem namenlosen Feld und erschwert dem User das korrekte Ausfüllen. Abhilfe schafft hier das Label eins Input-Feldes. Auf eine interessante Lösung bin ich hier gestoßen. Auch der Einsatz von falschen Feld-Typen kann das schnelle und einfache Ausfüllen eines Formulars behindern. Mobile Devices wie Smartphones oder Tablets passen die angezeigte Tastatur automatisch an den Typ des Input Feldes an – so wird bei einem definierten E-Mail-Feld (type=“email“) die Tastatur mit @-Taste angezeigt (weitere Beispiele: type=“number“ – nur Ziffern-Tastatur; type=“url“ – Tastatur mit /- und .com-Tasten). Wird das Formular vollständig ausgefüllt und abgesendet, ist es wichtig dem User anschließend Feedback über den erfolgreichen (oder nicht erfolgreichen) Versand des Inhalts zu geben.

Verschiedene Tastaturansichten am iPhone (v.l.n.r.: E-Mail, Nummer, URL)

Verschiedene Tastaturansichten am iPhone (v.l.n.r.: E-Mail, Nummer, URL)

Icons

Ein kleines aber feines Detail am Rande sind die Icons einer Website. Ob als Favicons im Tab oder in den Lesezeichen des Browsers, als Apple Touch Icons auf Homescreen von iPhone, iPad, iPod touch und in den Favoriten von Safari, als Icons auf Android oder als Tiles im Startmenü von Windows 8 und 10 erleichtern sie das Auffinden meist erheblich und heben sich von den anderen Einträgen zusätzlich ab. Eine übersichtliche Hilfestellung zur richtigen Einbindung und den passenden Bildformaten und -auflösungen findet man hier.

Favicon, Touch Icons für iOS und Android, Tiles für Windows

Favicon, Touch Icons für iOS und Android, Tiles für Windows

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.