Touchable Design - Studio von Hand · PDF file von mindestens 44 x 44px. Achtung: Die rot...

Click here to load reader

  • date post

    06-Aug-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Touchable Design - Studio von Hand · PDF file von mindestens 44 x 44px. Achtung: Die rot...

  • Touchable Design

    Einleitung 2

    Die neue digitale Haptik 2

    Tipps für touchable Design 5

    Hilfreiche Tools 9

    Schlusswort 11

    Denkanstöße, Auszüge und Tipps.

    von Jan Dienstknecht

  • 2

    Einleitung

    Einleitung Das neue “Look and Feel”

    Heute sind wir nicht mehr nur auf Maus und Tastatur angewiesen um digitale Medien zu er- leben. Darum ist es an der Zeit Konventionen hinter sich zu lassen und sich auf einen neuen spannenden Weg zu begeben. Durch Touchscreens besteht nun die Möglichkeit digitale Inhalte nahezu direkt zu berühren und zu manipulieren. User können Inhalte fühlen und erleben. Dies versetzt Interfacedesigner nun zusätzlich in die Rolle der Produktdesigner. Wir haben die Möglichkeit Interaktion völlig neu zu erfinden - eine digitale Ergonomie zu kreieren. Der User rückt stark in den Vordergrund, da wir im touchable Design für menschliche Hände konzipieren und entwerfen müssen. Es ist eine spannende Zeit in der noch viele Wege gefunden, genommen und entstehen werden, bis sich neue Normen durchsetzen. Wir haben jetzt die Möglichkeit darauf Einfluss zu nehmen.

    Die neue digitale Haptik Fitts‘ Gesetz

    Dieses Gesetz von Paul Fitts aus dem Jahr 1954 besagt, dass die benötigte Zeit eine Zielfläche zu erreichen eine Funktion aus der Distanz zu dieser Fläche und deren Größe ist. „Erreichen“ meint hier einen motorischen Akt, z.B. das Berühren eines Punktes mit der Hand oder dem Finger. Kurz gesagt: Je kürzer der Weg zu einem Button und je größer dieser Button ist, desto effektiver lässt sich dessen Aktion ausführen. Das Gesetz wird vor allem bei der Entwicklung von Mensch-Maschine-Schnittstellen benötigt und daher vor allem beim Produktdesign angewendet.

    Usability & die Daumenregel

    Smartphones können auf viele verschiedene Weisen gehalten werden. Die einhändige Be- dienung ist die gängigste, und erfolgt im hochformatigen Portrait-Mode. Hierbei findet in den meisten Fällen die Bedienung mit dem Daumen der Hand welche das Smartphone hält statt. Aus physischen Gründen ergibt sich also folgende Hot Zone für die Bedienung mit dem Dau- men:

    Die roten Flächen lassen sich mit dem Daumen besonders leicht erreichen. Das heißt, dass die wichtigsten Elemente zur Interaktion optimalerweise in dieser Gegend platziert werden sollten. Aus diesem Grund ist bei vielen Apps im unteren Bereich eine Funktionsleiste. Natürlich gibt es Ausnahmen, bei denen es sinnvoll ist Elemente außerhalb dieses Bereichs zu platzieren. Beispielsweise lassen sich außerhalb gut Buttons platzieren, welche Inhalte ändern oder etwas posten - Buttons die man nicht aus Versehen betätigen sollte.

    Touchable Design

  • 3

    Die neue digitale Haptik

    Tablets: Ähnliches lässt sich auf Tablets anwenden, jedoch mit dem Unterschied, dass diese selten einhändig, sondern häufig mit beiden Händen bedient werden. Daraus ergeben sich eben- falls konkrete Hot Zones für Tablets (siehe Grafik links).

    Hybriden: Die derzeit noch nicht sehr populären Hybridgeräte besitzen Tastatur und Touch-Display. Hier benutzen User entweder die Daumen ähnlich wie beim Tablet oder sie bedienen das Display mit dem Zeigefinger. Dadurch erge- ben sich zwei gegensätzliche Hot Zones.

    Inhalt oben - Steuerung unten

    Diese Methode stammt aus dem Produktdesign und lässt sich ebenfalls auf touchable Design anwenden. Nutzt man die Methode richtig, sind Elemente welche den Inhalt steuern unterhalb von diesem angeordnet. Das hat den Vorteil, dass während man den Inhalt steuert, man immer freie Sicht darauf hat, da der Daumen nicht im Weg ist. Beispiele für die Anwendung dieser Regel sind Taschenrechner oder Handys (Handys gab es vor der Smartphone Zeit, sagt man). Natürlich gibt es auch hier wieder Ausnahmen und sinnvolle Alternativen.

    Navigation oben oder unten? Laut der Daumenregel sollten wichtige Buttons und interaktive Elemente unten angeordnet werden. Dies funktioniert allerdings nur problemlos auf iPhones. Bei vielen Android-Smartpho- nes sind direkt am unteren Rand des Displays Funktionstasten für z.B. “zurück” oder “Home” platziert. Diese Buttons sind ebenfalls über Berührung bedienbar und würden im Konflikt mit einer Content-Steuerung am unteren Rand des Browsers stehen. Es bestünde ständig die Gefahr, dass man versehentlich entweder die Android-Funktionstasten oder das Web-Interface betätigt.

    Für App-Design kann man daher sagen: » bei iPhones sollte die Steuerung unten sein » bei Android Phones sollte die Steuerung oben sein

    Navigation auf Websites

    Beim Webdesign können wir keine Elemente herstellerabhängig platzieren. Daher ist es wichtig eine alternative Lösung zu finden. Zwei gute Lösungen für touchfähige Navigationen sind:

    1. Off-Canvas-Menü Hierbei findet sich im Webinterface an einer fixen Stelle des Viewports ein Menü-Button, welcher ein Menü aufklappt oder einschiebt, das zuvor außerhalb der Bühne versteckt war. Der Nachteil ist, dass die Animation bzw. Einblendung des Off-Canvas-Menüs Javascript oder ähnliches benötigt, also nicht in allen mobilen Browsern funktioniert. Dennoch findet sich dieser Ansatz inzwischen bei vielen Anwendungen und Websites und ist bereits nahezu zu einem gängigen Standard geworden. Derzeit setzt sich ein Icon mit drei horizontalen Linien als Symbol für diese Navigation durch.

    Android vs.

    iPhone

  • 4

    Die neue digitale Haptik

    2. Navigation im Footer Um browserunabhängig zu designen gibt es noch die Möglichkeit eine listenartige statische Navigation im Footer der Seite anzubieten. Sie kann dann immernoch problemlos über einen im Viewframe fix positionierten But- ton erreicht werden, indem dieser einfach über einen normalen html-Link zu einem anchor (#navi) zur Navigation im Footer verweist. Dies hat den Vorteil, dass der Inhalt im Vordergrund steht und kein Javascript oder ähnliches benötigt wird. Außerdem folgt diese Methode auch der “Inhalt oben - Steuerung unten” Regel. Hier kann beispielsweise ebenfalls das Symbol des Off-Canvas-Me- nüs genutzt werden.

    Benötigen wir noch Buttons?

    In der neuen Rolle des Produktdesigners stellt sich die Frage ob wir Metaphern für bedienbare Elemente aus Desktop-Zeiten (typische Buttons) noch benötigen. Ist es nicht logischer wenn wir direkt mit dem Inhalt interagieren? Aus dieser Frage haben sich bisher folgende Gesten entwickelt, welche ermöglichen nicht nur eine kleine Fläche zur Interaktion zu nutzen, sondern das komplette touchfähige Display:

    Tap / Swipe / Long Tap / Pinch & Spread / Double Tap

    Diese Gesten sind vor allem als Ergänzung zur gewohnten Bedienbarkeit über Buttons zu se- hen, da sie weitestgehend noch ungewohnt sind.

    Technische Machbarkeit Auch wenn es bei der Entwicklung neuer Ideen häufig hinderlich ist sich von technischen Machbarkeiten abhängig zu machen, kann es nicht schaden sie zu kennen. Bei nativen Apps gibt es eine nahezu unbegrenzte Vielzahl von möglichen Gesten zur digitalen Interaktion. Hier ist noch sehr viel Raum für neue Gesten und Interaktionsmöglichkeiten. Einige Gesten lassen sich bereits, beispielsweise durch den Einsatz von Javascript oder HTML5, ebenfalls auf Websites nutzen. Hammer.js ermöglicht es über Javascript diese Gesten auf Websites zu nutzen (goo.gl/zHvR2) und auch HTML5 bietet hierzu diverse Funktionen (goo.gl/pKw9F). Dies öffnet Webdesignern völlig neue Möglichkeiten dem User Interaktionsmöglichkeiten mit Hilfe des Designs anzubieten. Die Bedienung ist nun nicht mehr auf klicken und scrollen be- schränkt. Sogar mehrere Finger können gleichzeitig zur Steuerung genutzt werden.

    https://maps.google.de/ Google Maps ermöglicht es über Swi- pes den Ausschnitt zu verschieben und mithilfe von Pinch & Spread heraus und hinein zu zoomen.

    https://app.ft.com/ Die mobile Seite der Financial Times bietet die Möglichkeit über Swipes zwi- schen den einzelnen News-Überthemen hindurch zu blättern. Wie in einer realen Zeitung.

    http://goo.gl/zHvR2 http://goo.gl/pKw9F https://maps.google.de/ https://app.ft.com/

  • 5

    Tipps für touchable Design

    Tipps für touchable Design Mindestgrößen von Buttons

    Bei Buttons auf touchable Devices gilt: je größer eine interaktive Fläche, desto besser lässt sie sich mit einem Finger treffen. (Siehe Fitts‘ Gesetzt) Außerdem stellt sich die Frage wie der User sein Device nutzt: » Bedient er das Device mit der ganzen Fingerfläche oder mit der Fingerspitze? » Nutzt er Daumen oder Zeigefinger zur Bedienung? » Könnte der User aus Versehen einen falschen Button treffen, wenn zwei dicht nebeneinan-

    der platziert sind? » Woran erkennt der User, dass er einen Button getroffen hat?

    Damit Buttons effektiv bedienbar sind, sollten sie rechts und links (oder oben und unten) neben dem Finger immernoch sichtbar sein, während sie betätigt werden.

    Die Finger-Regel: Durch die durchschnittlichen Größen von Daumen und Zeigefinger von Erwachsenen (ermittelt in einer Studie des MIT Touch Lab) lassen sich Mindestbreiten für Buttons konkret festlegen:

    Zeigefinger Daumen

    Durchschnittliche Breite: 16 - 20mm Durchschnittliche Breite: 25mm

    Mindestbreite der Buttons: Standard Monitor (72ppi): 45 - 57px Retina (326ppi): 205 - 257px Samsung Galaxy S3 (306ppi): 193 - 241px

    Mindestbreite der Buttons: Standard Monitor (72ppi): 71px Retina (326ppi): 321px Samsung Galaxy S3 (306ppi): 301px

    Die iOS human interface guidelines empfehlen eine Buttongröße

    von mindestens 44