Touchable Design

Einleitung 2

Die neue digitale Haptik 2

Tipps fuumlr touchable Design 5

Hilfreiche Tools 9

Schlusswort 11

Denkanstoumlszlige Auszuumlge und Tipps

von Jan Dienstknecht

2

Einleitung

EinleitungDas neue ldquoLook and Feelrdquo

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 begebenDurch Touchscreens besteht nun die Moumlglichkeit digitale Inhalte nahezu direkt zu beruumlhren und zu manipulieren User koumlnnen Inhalte fuumlhlen und erleben Dies versetzt Interfacedesigner nun zusaumltzlich in die Rolle der Produktdesigner Wir haben die Moumlglichkeit Interaktion voumlllig neu zu erfinden - eine digitale Ergonomie zu kreieren Der User ruumlckt stark in den Vordergrund da wir im touchable Design fuumlr menschliche Haumlnde konzipieren und entwerfen muumlssen Es ist eine spannende Zeit in der noch viele Wege gefunden genommen und entstehen werden bis sich neue Normen durchsetzen Wir haben jetzt die Moumlglichkeit darauf Einfluss zu nehmen

Die neue digitale HaptikFittslsquo Gesetz

Dieses Gesetz von Paul Fitts aus dem Jahr 1954 besagt dass die benoumltigte Zeit eine Zielflaumlche zu erreichen eine Funktion aus der Distanz zu dieser Flaumlche und deren Groumlszlige ist bdquoErreichenldquo meint hier einen motorischen Akt zB das Beruumlhren eines Punktes mit der Hand oder dem Finger Kurz gesagt Je kuumlrzer der Weg zu einem Button und je groumlszliger dieser Button ist desto effektiver laumlsst sich dessen Aktion ausfuumlhrenDas Gesetz wird vor allem bei der Entwicklung von Mensch-Maschine-Schnittstellen benoumltigt und daher vor allem beim Produktdesign angewendet

Usability amp die Daumenregel

Smartphones koumlnnen auf viele verschiedene Weisen gehalten werden Die einhaumlndige Be-dienung ist die gaumlngigste und erfolgt im hochformatigen Portrait-Mode Hierbei findet in den meisten Faumlllen die Bedienung mit dem Daumen der Hand welche das Smartphone haumllt statt Aus physischen Gruumlnden ergibt sich also folgende Hot Zone fuumlr die Bedienung mit dem Dau-men

Die roten Flaumlchen lassen sich mit dem Daumen besonders leicht erreichen Das heiszligt 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 Natuumlrlich gibt es Ausnahmen bei denen es sinnvoll ist Elemente auszligerhalb dieses Bereichs zu platzieren Beispielsweise lassen sich auszligerhalb gut Buttons platzieren welche Inhalte aumlndern oder etwas posten - Buttons die man nicht aus Versehen betaumltigen sollte

Touchable Design

3

Die neue digitale Haptik

TabletsAumlhnliches laumlsst sich auf Tablets anwenden jedoch mit dem Unterschied dass diese selten einhaumlndig sondern haumlufig mit beiden Haumlnden bedient werden Daraus ergeben sich eben-falls konkrete Hot Zones fuumlr Tablets (siehe Grafik links)

HybridenDie derzeit noch nicht sehr populaumlren Hybridgeraumlte besitzen Tastatur und Touch-Display Hier benutzen User entweder die Daumen aumlhnlich wie beim Tablet oder sie bedienen das Display mit dem Zeigefinger Dadurch erge-ben sich zwei gegensaumltzliche Hot Zones

Inhalt oben - Steuerung unten

Diese Methode stammt aus dem Produktdesign und laumlsst 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 waumlhrend man den Inhalt steuert man immer freie Sicht darauf hat da der Daumen nicht im Weg ist Beispiele fuumlr die Anwendung dieser Regel sind Taschenrechner oder Handys (Handys gab es vor der Smartphone Zeit sagt man)Natuumlrlich gibt es auch hier wieder Ausnahmen und sinnvolle Alternativen

Navigation oben oder untenLaut 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 fuumlr zB ldquozuruumlckrdquo oder ldquoHomerdquo platziert Diese Buttons sind ebenfalls uumlber Beruumlhrung bedienbar und wuumlrden im Konflikt mit einer Content-Steuerung am unteren Rand des Browsers stehen Es bestuumlnde staumlndig die Gefahr dass man versehentlich entweder die Android-Funktionstasten oder das Web-Interface betaumltigt

Fuumlr App-Design kann man daher sagen raquo bei iPhones sollte die Steuerung unten sein raquo bei Android Phones sollte die Steuerung oben sein

Navigation auf Websites

Beim Webdesign koumlnnen wir keine Elemente herstellerabhaumlngig platzieren Daher ist es wichtig eine alternative Loumlsung zu finden Zwei gute Loumlsungen fuumlr touchfaumlhige Navigationen sind

1 Off-Canvas-MenuumlHierbei findet sich im Webinterface an einer fixen Stelle des Viewports ein Menuuml-Button welcher ein Menuuml aufklappt oder einschiebt das zuvor auszligerhalb der Buumlhne versteckt war Der Nachteil ist dass die Animation bzw Einblendung des Off-Canvas-Menuumls Javascript oder aumlhnliches benoumltigt also nicht in allen mobilen Browsern funktioniertDennoch findet sich dieser Ansatz inzwischen bei vielen Anwendungen und Websites und ist bereits nahezu zu einem gaumlngigen Standard gewordenDerzeit setzt sich ein Icon mit drei horizontalen Linien als Symbol fuumlr diese Navigation durch

Android vs

iPhone

4

Die neue digitale Haptik

2 Navigation im FooterUm browserunabhaumlngig zu designen gibt es noch die Moumlglichkeit eine listenartige statische Navigation im Footer der Seite anzubieten Sie kann dann immernoch problemlos uumlber einen im Viewframe fix positionierten But-ton erreicht werden indem dieser einfach uumlber 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 aumlhnliches benoumltigt wirdAuszligerdem folgt diese Methode auch der ldquoInhalt oben - Steuerung untenrdquo Regel Hier kann beispielsweise ebenfalls das Symbol des Off-Canvas-Me-nuumls genutzt werden

Benoumltigen wir noch Buttons

In der neuen Rolle des Produktdesigners stellt sich die Frage ob wir Metaphern fuumlr bedienbare Elemente aus Desktop-Zeiten (typische Buttons) noch benoumltigen Ist es nicht logischer wenn wir direkt mit dem Inhalt interagierenAus dieser Frage haben sich bisher folgende Gesten entwickelt welche ermoumlglichen nicht nur eine kleine Flaumlche zur Interaktion zu nutzen sondern das komplette touchfaumlhige Display

Tap Swipe Long Tap Pinch amp Spread Double Tap

Diese Gesten sind vor allem als Ergaumlnzung zur gewohnten Bedienbarkeit uumlber Buttons zu se-hen da sie weitestgehend noch ungewohnt sind

Technische MachbarkeitAuch wenn es bei der Entwicklung neuer Ideen haumlufig hinderlich ist sich von technischen Machbarkeiten abhaumlngig zu machen kann es nicht schaden sie zu kennenBei nativen Apps gibt es eine nahezu unbegrenzte Vielzahl von moumlglichen Gesten zur digitalen Interaktion Hier ist noch sehr viel Raum fuumlr neue Gesten und InteraktionsmoumlglichkeitenEinige Gesten lassen sich bereits beispielsweise durch den Einsatz von Javascript oder HTML5 ebenfalls auf Websites nutzenHammerjs ermoumlglicht es uumlber Javascript diese Gesten auf Websites zu nutzen (googlzHvR2) und auch HTML5 bietet hierzu diverse Funktionen (googlpKw9F)Dies oumlffnet Webdesignern voumlllig neue Moumlglichkeiten dem User Interaktionsmoumlglichkeiten mit Hilfe des Designs anzubieten Die Bedienung ist nun nicht mehr auf klicken und scrollen be-schraumlnkt Sogar mehrere Finger koumlnnen gleichzeitig zur Steuerung genutzt werden

httpsmapsgoogledeGoogle Maps ermoumlglicht es uumlber Swi-pes den Ausschnitt zu verschieben und mithilfe von Pinch amp Spread heraus und hinein zu zoomen

httpsappftcomDie mobile Seite der Financial Times bietet die Moumlglichkeit uumlber Swipes zwi-schen den einzelnen News-Uumlberthemen hindurch zu blaumlttern Wie in einer realen Zeitung

2

Einleitung

EinleitungDas neue ldquoLook and Feelrdquo

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 begebenDurch Touchscreens besteht nun die Moumlglichkeit digitale Inhalte nahezu direkt zu beruumlhren und zu manipulieren User koumlnnen Inhalte fuumlhlen und erleben Dies versetzt Interfacedesigner nun zusaumltzlich in die Rolle der Produktdesigner Wir haben die Moumlglichkeit Interaktion voumlllig neu zu erfinden - eine digitale Ergonomie zu kreieren Der User ruumlckt stark in den Vordergrund da wir im touchable Design fuumlr menschliche Haumlnde konzipieren und entwerfen muumlssen Es ist eine spannende Zeit in der noch viele Wege gefunden genommen und entstehen werden bis sich neue Normen durchsetzen Wir haben jetzt die Moumlglichkeit darauf Einfluss zu nehmen

Die neue digitale HaptikFittslsquo Gesetz

Dieses Gesetz von Paul Fitts aus dem Jahr 1954 besagt dass die benoumltigte Zeit eine Zielflaumlche zu erreichen eine Funktion aus der Distanz zu dieser Flaumlche und deren Groumlszlige ist bdquoErreichenldquo meint hier einen motorischen Akt zB das Beruumlhren eines Punktes mit der Hand oder dem Finger Kurz gesagt Je kuumlrzer der Weg zu einem Button und je groumlszliger dieser Button ist desto effektiver laumlsst sich dessen Aktion ausfuumlhrenDas Gesetz wird vor allem bei der Entwicklung von Mensch-Maschine-Schnittstellen benoumltigt und daher vor allem beim Produktdesign angewendet

Usability amp die Daumenregel

Smartphones koumlnnen auf viele verschiedene Weisen gehalten werden Die einhaumlndige Be-dienung ist die gaumlngigste und erfolgt im hochformatigen Portrait-Mode Hierbei findet in den meisten Faumlllen die Bedienung mit dem Daumen der Hand welche das Smartphone haumllt statt Aus physischen Gruumlnden ergibt sich also folgende Hot Zone fuumlr die Bedienung mit dem Dau-men

Die roten Flaumlchen lassen sich mit dem Daumen besonders leicht erreichen Das heiszligt 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 Natuumlrlich gibt es Ausnahmen bei denen es sinnvoll ist Elemente auszligerhalb dieses Bereichs zu platzieren Beispielsweise lassen sich auszligerhalb gut Buttons platzieren welche Inhalte aumlndern oder etwas posten - Buttons die man nicht aus Versehen betaumltigen sollte

Touchable Design

3

Die neue digitale Haptik

TabletsAumlhnliches laumlsst sich auf Tablets anwenden jedoch mit dem Unterschied dass diese selten einhaumlndig sondern haumlufig mit beiden Haumlnden bedient werden Daraus ergeben sich eben-falls konkrete Hot Zones fuumlr Tablets (siehe Grafik links)

HybridenDie derzeit noch nicht sehr populaumlren Hybridgeraumlte besitzen Tastatur und Touch-Display Hier benutzen User entweder die Daumen aumlhnlich wie beim Tablet oder sie bedienen das Display mit dem Zeigefinger Dadurch erge-ben sich zwei gegensaumltzliche Hot Zones

Inhalt oben - Steuerung unten

Diese Methode stammt aus dem Produktdesign und laumlsst 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 waumlhrend man den Inhalt steuert man immer freie Sicht darauf hat da der Daumen nicht im Weg ist Beispiele fuumlr die Anwendung dieser Regel sind Taschenrechner oder Handys (Handys gab es vor der Smartphone Zeit sagt man)Natuumlrlich gibt es auch hier wieder Ausnahmen und sinnvolle Alternativen

Navigation oben oder untenLaut 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 fuumlr zB ldquozuruumlckrdquo oder ldquoHomerdquo platziert Diese Buttons sind ebenfalls uumlber Beruumlhrung bedienbar und wuumlrden im Konflikt mit einer Content-Steuerung am unteren Rand des Browsers stehen Es bestuumlnde staumlndig die Gefahr dass man versehentlich entweder die Android-Funktionstasten oder das Web-Interface betaumltigt

Fuumlr App-Design kann man daher sagen raquo bei iPhones sollte die Steuerung unten sein raquo bei Android Phones sollte die Steuerung oben sein

Navigation auf Websites

Beim Webdesign koumlnnen wir keine Elemente herstellerabhaumlngig platzieren Daher ist es wichtig eine alternative Loumlsung zu finden Zwei gute Loumlsungen fuumlr touchfaumlhige Navigationen sind

1 Off-Canvas-MenuumlHierbei findet sich im Webinterface an einer fixen Stelle des Viewports ein Menuuml-Button welcher ein Menuuml aufklappt oder einschiebt das zuvor auszligerhalb der Buumlhne versteckt war Der Nachteil ist dass die Animation bzw Einblendung des Off-Canvas-Menuumls Javascript oder aumlhnliches benoumltigt also nicht in allen mobilen Browsern funktioniertDennoch findet sich dieser Ansatz inzwischen bei vielen Anwendungen und Websites und ist bereits nahezu zu einem gaumlngigen Standard gewordenDerzeit setzt sich ein Icon mit drei horizontalen Linien als Symbol fuumlr diese Navigation durch

Android vs

iPhone

4

Die neue digitale Haptik

2 Navigation im FooterUm browserunabhaumlngig zu designen gibt es noch die Moumlglichkeit eine listenartige statische Navigation im Footer der Seite anzubieten Sie kann dann immernoch problemlos uumlber einen im Viewframe fix positionierten But-ton erreicht werden indem dieser einfach uumlber 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 aumlhnliches benoumltigt wirdAuszligerdem folgt diese Methode auch der ldquoInhalt oben - Steuerung untenrdquo Regel Hier kann beispielsweise ebenfalls das Symbol des Off-Canvas-Me-nuumls genutzt werden

Benoumltigen wir noch Buttons

In der neuen Rolle des Produktdesigners stellt sich die Frage ob wir Metaphern fuumlr bedienbare Elemente aus Desktop-Zeiten (typische Buttons) noch benoumltigen Ist es nicht logischer wenn wir direkt mit dem Inhalt interagierenAus dieser Frage haben sich bisher folgende Gesten entwickelt welche ermoumlglichen nicht nur eine kleine Flaumlche zur Interaktion zu nutzen sondern das komplette touchfaumlhige Display

Tap Swipe Long Tap Pinch amp Spread Double Tap

Diese Gesten sind vor allem als Ergaumlnzung zur gewohnten Bedienbarkeit uumlber Buttons zu se-hen da sie weitestgehend noch ungewohnt sind

Technische MachbarkeitAuch wenn es bei der Entwicklung neuer Ideen haumlufig hinderlich ist sich von technischen Machbarkeiten abhaumlngig zu machen kann es nicht schaden sie zu kennenBei nativen Apps gibt es eine nahezu unbegrenzte Vielzahl von moumlglichen Gesten zur digitalen Interaktion Hier ist noch sehr viel Raum fuumlr neue Gesten und InteraktionsmoumlglichkeitenEinige Gesten lassen sich bereits beispielsweise durch den Einsatz von Javascript oder HTML5 ebenfalls auf Websites nutzenHammerjs ermoumlglicht es uumlber Javascript diese Gesten auf Websites zu nutzen (googlzHvR2) und auch HTML5 bietet hierzu diverse Funktionen (googlpKw9F)Dies oumlffnet Webdesignern voumlllig neue Moumlglichkeiten dem User Interaktionsmoumlglichkeiten mit Hilfe des Designs anzubieten Die Bedienung ist nun nicht mehr auf klicken und scrollen be-schraumlnkt Sogar mehrere Finger koumlnnen gleichzeitig zur Steuerung genutzt werden

httpsmapsgoogledeGoogle Maps ermoumlglicht es uumlber Swi-pes den Ausschnitt zu verschieben und mithilfe von Pinch amp Spread heraus und hinein zu zoomen

httpsappftcomDie mobile Seite der Financial Times bietet die Moumlglichkeit uumlber Swipes zwi-schen den einzelnen News-Uumlberthemen hindurch zu blaumlttern Wie in einer realen Zeitung

3

Die neue digitale Haptik

TabletsAumlhnliches laumlsst sich auf Tablets anwenden jedoch mit dem Unterschied dass diese selten einhaumlndig sondern haumlufig mit beiden Haumlnden bedient werden Daraus ergeben sich eben-falls konkrete Hot Zones fuumlr Tablets (siehe Grafik links)

HybridenDie derzeit noch nicht sehr populaumlren Hybridgeraumlte besitzen Tastatur und Touch-Display Hier benutzen User entweder die Daumen aumlhnlich wie beim Tablet oder sie bedienen das Display mit dem Zeigefinger Dadurch erge-ben sich zwei gegensaumltzliche Hot Zones

Inhalt oben - Steuerung unten

Diese Methode stammt aus dem Produktdesign und laumlsst 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 waumlhrend man den Inhalt steuert man immer freie Sicht darauf hat da der Daumen nicht im Weg ist Beispiele fuumlr die Anwendung dieser Regel sind Taschenrechner oder Handys (Handys gab es vor der Smartphone Zeit sagt man)Natuumlrlich gibt es auch hier wieder Ausnahmen und sinnvolle Alternativen

Navigation oben oder untenLaut 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 fuumlr zB ldquozuruumlckrdquo oder ldquoHomerdquo platziert Diese Buttons sind ebenfalls uumlber Beruumlhrung bedienbar und wuumlrden im Konflikt mit einer Content-Steuerung am unteren Rand des Browsers stehen Es bestuumlnde staumlndig die Gefahr dass man versehentlich entweder die Android-Funktionstasten oder das Web-Interface betaumltigt

Fuumlr App-Design kann man daher sagen raquo bei iPhones sollte die Steuerung unten sein raquo bei Android Phones sollte die Steuerung oben sein

Navigation auf Websites

Beim Webdesign koumlnnen wir keine Elemente herstellerabhaumlngig platzieren Daher ist es wichtig eine alternative Loumlsung zu finden Zwei gute Loumlsungen fuumlr touchfaumlhige Navigationen sind

1 Off-Canvas-MenuumlHierbei findet sich im Webinterface an einer fixen Stelle des Viewports ein Menuuml-Button welcher ein Menuuml aufklappt oder einschiebt das zuvor auszligerhalb der Buumlhne versteckt war Der Nachteil ist dass die Animation bzw Einblendung des Off-Canvas-Menuumls Javascript oder aumlhnliches benoumltigt also nicht in allen mobilen Browsern funktioniertDennoch findet sich dieser Ansatz inzwischen bei vielen Anwendungen und Websites und ist bereits nahezu zu einem gaumlngigen Standard gewordenDerzeit setzt sich ein Icon mit drei horizontalen Linien als Symbol fuumlr diese Navigation durch

Android vs

iPhone

4

Die neue digitale Haptik

2 Navigation im FooterUm browserunabhaumlngig zu designen gibt es noch die Moumlglichkeit eine listenartige statische Navigation im Footer der Seite anzubieten Sie kann dann immernoch problemlos uumlber einen im Viewframe fix positionierten But-ton erreicht werden indem dieser einfach uumlber 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 aumlhnliches benoumltigt wirdAuszligerdem folgt diese Methode auch der ldquoInhalt oben - Steuerung untenrdquo Regel Hier kann beispielsweise ebenfalls das Symbol des Off-Canvas-Me-nuumls genutzt werden

Benoumltigen wir noch Buttons

In der neuen Rolle des Produktdesigners stellt sich die Frage ob wir Metaphern fuumlr bedienbare Elemente aus Desktop-Zeiten (typische Buttons) noch benoumltigen Ist es nicht logischer wenn wir direkt mit dem Inhalt interagierenAus dieser Frage haben sich bisher folgende Gesten entwickelt welche ermoumlglichen nicht nur eine kleine Flaumlche zur Interaktion zu nutzen sondern das komplette touchfaumlhige Display

Tap Swipe Long Tap Pinch amp Spread Double Tap

Diese Gesten sind vor allem als Ergaumlnzung zur gewohnten Bedienbarkeit uumlber Buttons zu se-hen da sie weitestgehend noch ungewohnt sind

Technische MachbarkeitAuch wenn es bei der Entwicklung neuer Ideen haumlufig hinderlich ist sich von technischen Machbarkeiten abhaumlngig zu machen kann es nicht schaden sie zu kennenBei nativen Apps gibt es eine nahezu unbegrenzte Vielzahl von moumlglichen Gesten zur digitalen Interaktion Hier ist noch sehr viel Raum fuumlr neue Gesten und InteraktionsmoumlglichkeitenEinige Gesten lassen sich bereits beispielsweise durch den Einsatz von Javascript oder HTML5 ebenfalls auf Websites nutzenHammerjs ermoumlglicht es uumlber Javascript diese Gesten auf Websites zu nutzen (googlzHvR2) und auch HTML5 bietet hierzu diverse Funktionen (googlpKw9F)Dies oumlffnet Webdesignern voumlllig neue Moumlglichkeiten dem User Interaktionsmoumlglichkeiten mit Hilfe des Designs anzubieten Die Bedienung ist nun nicht mehr auf klicken und scrollen be-schraumlnkt Sogar mehrere Finger koumlnnen gleichzeitig zur Steuerung genutzt werden

httpsmapsgoogledeGoogle Maps ermoumlglicht es uumlber Swi-pes den Ausschnitt zu verschieben und mithilfe von Pinch amp Spread heraus und hinein zu zoomen

httpsappftcomDie mobile Seite der Financial Times bietet die Moumlglichkeit uumlber Swipes zwi-schen den einzelnen News-Uumlberthemen hindurch zu blaumlttern Wie in einer realen Zeitung

4

Die neue digitale Haptik

2 Navigation im FooterUm browserunabhaumlngig zu designen gibt es noch die Moumlglichkeit eine listenartige statische Navigation im Footer der Seite anzubieten Sie kann dann immernoch problemlos uumlber einen im Viewframe fix positionierten But-ton erreicht werden indem dieser einfach uumlber 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 aumlhnliches benoumltigt wirdAuszligerdem folgt diese Methode auch der ldquoInhalt oben - Steuerung untenrdquo Regel Hier kann beispielsweise ebenfalls das Symbol des Off-Canvas-Me-nuumls genutzt werden

Benoumltigen wir noch Buttons

In der neuen Rolle des Produktdesigners stellt sich die Frage ob wir Metaphern fuumlr bedienbare Elemente aus Desktop-Zeiten (typische Buttons) noch benoumltigen Ist es nicht logischer wenn wir direkt mit dem Inhalt interagierenAus dieser Frage haben sich bisher folgende Gesten entwickelt welche ermoumlglichen nicht nur eine kleine Flaumlche zur Interaktion zu nutzen sondern das komplette touchfaumlhige Display

Tap Swipe Long Tap Pinch amp Spread Double Tap

Diese Gesten sind vor allem als Ergaumlnzung zur gewohnten Bedienbarkeit uumlber Buttons zu se-hen da sie weitestgehend noch ungewohnt sind

Technische MachbarkeitAuch wenn es bei der Entwicklung neuer Ideen haumlufig hinderlich ist sich von technischen Machbarkeiten abhaumlngig zu machen kann es nicht schaden sie zu kennenBei nativen Apps gibt es eine nahezu unbegrenzte Vielzahl von moumlglichen Gesten zur digitalen Interaktion Hier ist noch sehr viel Raum fuumlr neue Gesten und InteraktionsmoumlglichkeitenEinige Gesten lassen sich bereits beispielsweise durch den Einsatz von Javascript oder HTML5 ebenfalls auf Websites nutzenHammerjs ermoumlglicht es uumlber Javascript diese Gesten auf Websites zu nutzen (googlzHvR2) und auch HTML5 bietet hierzu diverse Funktionen (googlpKw9F)Dies oumlffnet Webdesignern voumlllig neue Moumlglichkeiten dem User Interaktionsmoumlglichkeiten mit Hilfe des Designs anzubieten Die Bedienung ist nun nicht mehr auf klicken und scrollen be-schraumlnkt Sogar mehrere Finger koumlnnen gleichzeitig zur Steuerung genutzt werden

httpsmapsgoogledeGoogle Maps ermoumlglicht es uumlber Swi-pes den Ausschnitt zu verschieben und mithilfe von Pinch amp Spread heraus und hinein zu zoomen

httpsappftcomDie mobile Seite der Financial Times bietet die Moumlglichkeit uumlber Swipes zwi-schen den einzelnen News-Uumlberthemen hindurch zu blaumlttern Wie in einer realen Zeitung

5

Tipps fuumlr touchable Design

Tipps fuumlr touchable DesignMindestgroumlszligen von Buttons

Bei Buttons auf touchable Devices gilt je groumlszliger eine interaktive Flaumlche desto besser laumlsst sie sich mit einem Finger treffen (Siehe Fittslsquo Gesetzt) Auszligerdem stellt sich die Frage wie der User sein Device nutzt raquo Bedient er das Device mit der ganzen Fingerflaumlche oder mit der Fingerspitze raquo Nutzt er Daumen oder Zeigefinger zur Bedienung raquo Koumlnnte der User aus Versehen einen falschen Button treffen wenn zwei dicht nebeneinan-

der platziert sind raquo 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 waumlhrend sie betaumltigt werden

Die Finger-RegelDurch die durchschnittlichen Groumlszligen von Daumen und Zeigefinger von Erwachsenen (ermittelt in einer Studie des MIT Touch Lab) lassen sich Mindestbreiten fuumlr Buttons konkret festlegen

Zeigefinger Daumen

Durchschnittliche Breite 16 - 20mm Durchschnittliche Breite 25mm

Mindestbreite der ButtonsStandard Monitor (72ppi) 45 - 57pxRetina (326ppi) 205 - 257pxSamsung Galaxy S3 (306ppi) 193 - 241px

Mindestbreite der ButtonsStandard Monitor (72ppi) 71pxRetina (326ppi) 321pxSamsung Galaxy S3 (306ppi) 301px

Die iOS human interface guidelines empfehlen eine Buttongroumlszlige

von mindestens 44 x 44px

Achtung Die rot markierten Groumlszligen beziehen sich auf das Design fuumlr NICHT hochaufloumlsende Devices Wenn man also zB fuumlr Retina Aufloumlsung designt muss diese Zahl verdoppelt werden

Learning by doing

Da der Raum bei mobilen Devices begrenzt ist kann manchmal nicht genug Platz sein um alle Buttons mit den oben angegebenen Mindestgroumlszligen zu designen Daher ist es wichtig das Design an verschiedenen Endgeraumlten zu testen um herauszufinden inwieweit auch kleinere Buttons genutzt werden koumlnnenUm zu uumlberpruumlfen ob sich Buttons gut anfuumlhlen und groszlig genug sind empfehlen sich die spauml-ter erwaumlhnten Tools als Hilfe zum touchable Design

6

Tipps fuumlr touchable Design

Metaphern

Nun da die physische Grenze zwischen digital und analog verschwindend duumlnn wird fuumlhlen wir uns den digitalen Medien naumlher denn je Wir koumlnnen Apps und Websites fuumlhlen und erleben - sie direkt ldquoanfassenrdquo Die logische Konsequenz ist dass wir Designer gelernte Gewohnheiten aufgreifen die User bereits mit analogen Gegenstaumlnden gesammelt haben und zur Steuerbar-keit unserer digitalen Produkte nutzen Dadurch koumlnnen wir die Benutzung wesentlich einfacher und intuitiver machen Ein klassisches Beispiel fuumlr eine Metapher ist ein ldquoOrdnerrdquo Menschen

koumlnnen Dinge in Ordner packen und so ist es nur logisch dass man in einem digitalen Ordner Dateien verstauen kann Weitere Beispiele sind die Seiten in eBooks die sich genau wie Seiten in Buumlchern umblaumlttern lassen (durch Schieben nach links und rechts) oder das Durchstreichen einzelner Punkte bei einer To-Do-Liste wenn sie erledigt sind (iPhone App Clear)Durch Metaphern wird zusaumltzlich noch die emotionale Bindung des Users mit der Website oder App gestaumlrkt da das Unterbewusstsein bei der intuitiven Interaktion direkt angesprochen wird

Metaphern sind ein gutes Mittel um eine natuumlrliche Steuerbarkeit

zu erzeugen die einfach zu verstehen ist

Skeuomorphes Design

Skeuomorphes Design ist die digitale Gestaltung nach analogen Vorla-gen Was seit einigen Jahren ein Trend im Webdesign ist spielt auch beim touchable Design seit Einfuumlhrung der ersten Smartphones eine wichtige Rolle Da Pixel optisch zu echten Materialien und Gegenstaumlnden werden zeigen sich digitale Formen im analogen Kostuumlm Der Taschenrechner des iPhones der genau wie ein realer Taschenrechner aussieht oder Post-Its als Stoumlrer auf Websites sind Beispiele fuumlr skeuomorphes Design Weitere Infos zum skeuomorphen Design googlSpx0v

Animation

Animationen erregen nicht nur unsere Aufmerksamkeit sondern koumlnnen auch die Benutzerfuumlh-rung vereinfachen Bewegen sich Elemente bei Interaktion an der Beruumlhrung orientiert so wir-ken sie weniger statisch und digital sondern vielmehr weich und natuumlrlich Zum Beispiel fuumlhlt sich eine Bildergalerie durch die man swipend blaumlttern kann wesentlich natuumlrlicher an wenn die Bilder am Finger haften bleiben und sich an Naturgesetzen orientiert animiert weiterschieben als wenn die Bilder durch einen einfachen Tap auf einen Button statisch weiterblaumlttern Der Inhalt wird greifbarer und die Navigation wird verstaumlndlicher

Animation sollte sich an Naturgesetzen orientieren

Je fluumlssiger eine Animation mit einer Bewegung verknuumlpft ist

desto natuumlrlicher fuumlhlt sich die Interaktion an

In der App bdquoClearldquo koumlnnen ToDos wie auf einer realen Liste gestrichen werden wenn sie erledigt sind

InfoDieser und die nachfolgenden Tipps sind eben-falls Metaphern die Reales immi-

tieren sollen

6

Tipps fuumlr touchable Design

Metaphern

Nun da die physische Grenze zwischen digital und analog verschwindend duumlnn wird fuumlhlen wir uns den digitalen Medien naumlher denn je Wir koumlnnen Apps und Websites fuumlhlen und erleben - sie direkt ldquoanfassenrdquo Die logische Konsequenz ist dass wir Designer gelernte Gewohnheiten aufgreifen die User bereits mit analogen Gegenstaumlnden gesammelt haben und zur Steuerbar-keit unserer digitalen Produkte nutzen Dadurch koumlnnen wir die Benutzung wesentlich einfacher und intuitiver machen Ein klassisches Beispiel fuumlr eine Metapher ist ein ldquoOrdnerrdquo Menschen

koumlnnen Dinge in Ordner packen und so ist es nur logisch dass man in einem digitalen Ordner Dateien verstauen kann Weitere Beispiele sind die Seiten in eBooks die sich genau wie Seiten in Buumlchern umblaumlttern lassen (durch Schieben nach links und rechts) oder das Durchstreichen einzelner Punkte bei einer To-Do-Liste wenn sie erledigt sind (iPhone App Clear)Durch Metaphern wird zusaumltzlich noch die emotionale Bindung des Users mit der Website oder App gestaumlrkt da das Unterbewusstsein bei der intuitiven Interaktion direkt angesprochen wird

Metaphern sind ein gutes Mittel um eine natuumlrliche Steuerbarkeit

zu erzeugen die einfach zu verstehen ist

Skeuomorphes Design

Skeuomorphes Design ist die digitale Gestaltung nach analogen Vorla-gen Was seit einigen Jahren ein Trend im Webdesign ist spielt auch beim touchable Design seit Einfuumlhrung der ersten Smartphones eine wichtige Rolle Da Pixel optisch zu echten Materialien und Gegenstaumlnden werden zeigen sich digitale Formen im analogen Kostuumlm Der Taschenrechner des iPhones der genau wie ein realer Taschenrechner aussieht oder Post-Its als Stoumlrer auf Websites sind Beispiele fuumlr skeuomorphes Design Weitere Infos zum skeuomorphen Design googlSpx0v

Animation

Animationen erregen nicht nur unsere Aufmerksamkeit sondern koumlnnen auch die Benutzerfuumlh-rung vereinfachen Bewegen sich Elemente bei Interaktion an der Beruumlhrung orientiert so wir-ken sie weniger statisch und digital sondern vielmehr weich und natuumlrlich Zum Beispiel fuumlhlt sich eine Bildergalerie durch die man swipend blaumlttern kann wesentlich natuumlrlicher an wenn die Bilder am Finger haften bleiben und sich an Naturgesetzen orientiert animiert weiterschieben als wenn die Bilder durch einen einfachen Tap auf einen Button statisch weiterblaumlttern Der Inhalt wird greifbarer und die Navigation wird verstaumlndlicher

Animation sollte sich an Naturgesetzen orientieren

Je fluumlssiger eine Animation mit einer Bewegung verknuumlpft ist

desto natuumlrlicher fuumlhlt sich die Interaktion an

In der App bdquoClearldquo koumlnnen ToDos wie auf einer realen Liste gestrichen werden wenn sie erledigt sind

InfoDieser und die nachfolgenden Tipps sind eben-falls Metaphern die Reales immi-

tieren sollen

7

Tipps fuumlr touchable Design

Animation als Hilfe zur Orientierung auf SeitenGoogle erzeugt in seinen Apps Tiefe indem sich Seiten und Elemente nach vorn und hinten schieben wenn man durch die Apps navigiert oder Menuumls einblendet Hierbei wird die User Ex-perience deutlich dreidimensionaler und greifbarer Auszligerdem wird die Orientierung vereinfacht da Seiten durch animierte Uumlbergaumlnge miteinander verbunden sind Die Navigation funktioniert wie in der Realitaumlt durch Aktenordner

Animation als Teaser zur GestensteuerungAuszligerdem koumlnnen kleine angedeutete Animationen zu Gesten einladen Beim iPhone bei-spielsweise faumlhrt beim Entsperren des Bildschirms ein Lichtschein uumlber den Schriftzug bdquoEnt-sperrenldquo in die Richtung in welche man den Schieber betaumltigen muss Animation kann eine Interaktion anteasern eine Richtung vorgeben etwas vorfuumlhren et cetera

Greifbarkeit

Verlaumlufe um Licht zu erzeugenUm ein Design dreidimensionaler - also greifbarer - zu machen brauchen Elemente Verlaumlufe und Schatten Diese erhalten sie durch eine Lichtquelle die entweder sichtbar oder imaginaumlr sein kann Beispielsweise kann ein hell-dunkel-Verlauf von oben nach unten den Effekt einer Lichtquelle am oberen Rand der Website erzeugen Auszligerdem wirken Buttons durch Verlaumlufe als haumltten sie eine leicht gewoumllbte Oberflaumlche

SchattenElemente die aus einer Flaumlche herausragen laden zur Interaktion ein (wie Tasten in der realen Welt) Um Elemente digital aus einer Flaumlche hinausragen zu lassen braucht man nur eine ima-ginaumlre Lichtquelle die entsprechend physikalischen Gesetzen einen Schatten wirftUm den Effekt nicht zu zerstoumlren ist hierbei besonders auf die Bestaumlndigkeit der Lichtquelle im gesamten Design zu achten Der Winkel des Schattens sollte immer passend zur Richtung der Lichtquelle gewaumlhlt werden

TexturenUm Haptik zu suggerieren koumlnnen Flaumlchen mit Texturen versehen werden Waumlhrend einfarbige Elemente flach und kuumlnstlich wirken kann man sie durch den Einsatz von Strukturen aus der realen Welt analoger also haptisch ansprechender erscheinen lassen

UumlberlagerungUm Elemente zu gliedern und auf einer zweidimensionalen Flaumlche eine dreidimensionale Wir-kung zu erzeugen kann man einzelne Flaumlchen uumlbereinanderlegen Dies erzeugt auch ohne den Einsatz von Schatten bereits die Illusion von Tiefe

FeedbackDa bei der Bedienung eines Touch Devices kein spuumlrbarer Druckpunkt wie bei einem Mausklick wahrzunehmen ist ist es wichtig dem User Feedback zu geben ob seine Interaktion erfolg-reich war Ein Button koumlnnte seine Farbe veraumlndern leuchten wenn er getappt wird oder durch eine Animation dargestellt nachgeben als ob er wirklich hinein gedruumlckt wuumlrde

8

Tipps fuumlr touchable Design

Coaching

Aumlhnlich wie in Videospielen kann man dem User die Moumlglichkeit geben bestimmte Gesten oder Features zu lernen In Spielen erfolgt dies durch drei Hilfsmittel raquo Coaching Man erklaumlrt dem User eine Geste waumlhrend er bereits die Moumlglichkeit hat diese

anzuwenden Hat er sie erfolgreich angewendet verschwindet die Anleitung Als optionaler Ausstieg sollte sets die Moumlglichkeit gegeben werden das Coaching zu uumlberspringen

raquo Leveling Up Um den User nicht zu uumlberfordern kann man ihm Schrittweise die Bedienung einer komplexen App naumlherbringen Kommt er in eine Situation in der eine Geste ange-wandt werden kann wird ihm diese erklaumlrt und er kann sie anwenden - Geste fuumlr Geste Usern die dieses Know-How bereits anwenden sollten diese Tipps nicht gezeigt werden

raquo Power-Ups Wie Tastaturkuumlrzel von Desktop-Programmen sind es an Touch Devices Ges-ten die Powerusern ermoumlglichen bestimmte Aktionen schneller auszufuumlhren ohne dafuumlr zwei oder mehr Taps zu betaumltigen Diese Gesten sollten nur als Zusatz zur einfachen Steuerung uumlber Buttons verstanden werden da sie nicht unbedingt intuitiv von jedem User verstanden werden koumlnnen Dem User wird wenn er eine Aktion uumlber den Button-Weg beispielswei-se 10 mal ausgefuumlhrt hat als Tool-Tip die Geste erklaumlrt und angeboten welche den But-ton-Weg ersetzt So kann man sicherstellen dass die Information fuumlr den User wirklich von Bedeutung ist da er die Funktion oft benutzt und ihm ein einfacherer Weg angeboten wird

Tooltips

Noch ist es nicht selbstverstaumlndlich dass Websites (wie viele native Apps) uumlber einzigartige Gesten verfuumlgen Daher kann es sinnvoll sein dem User durch dezente Tooltips Hinweise zu geben welche Aktionen er auf der Seite ausfuumlhren kann Man kennt dies von diversen Apps welche nach dem Start beispielsweise einen Screen mit Tooltips zeigen oder bei denen man beim ersten Start ein kurzes Tutorial durchgeht welches die App und ihre Gesten erklaumlrt

Die App bdquoClearldquo erklaumlrt beim ersten Start die wichtigsten Funktionen Mithilfe sympathischer einfacher Illus-trationen und kurzer Texte werden die Grundgesten kurz erklaumlrt

9

Hilfreiche Tools

Vorhandenes Know-How nutzen

Da die meisten Menschen die touchable Devices nutzen bereits Erfahrung mit anderen digi-talen Medien haben kann dieses Wissen auch fuumlr die Steuerung durch Gesten und Beruumlhrung genutzt werden Zum Beispiel koumlnnten Gesten genutzt werden die auf Aktionen aus der Ver-wendung von Desktop-PCs basieren (Drag amp Drop der Doppelklick) Hier ist zu hinterfragen ob bei einer Geste die auf einer solchen Aktion basiert nicht bereits eine andere Touch-Funktio-nalitaumlt der derzeitige Standard ist

Bei Smartphones etablieren sich bereits erste touch-spezifische Gesten als Standard-Funktio-nalitaumlten raquo Double Tap um zu Zoomen (iPhone Windows 7 Phone) raquo Swipe nach links um ein Element aus einer Liste zu loumlschen (iPhone) raquo Getappt halten um Optionen fuumlr ein Element einzublenden (aumlhnlich dem Rechtsklick mit der

Maus)

Es bleibt nun abzuwarten welche Gesten sich auf lange Sicht

herstellerunabhaumlngig durchsetzen

Hilfreiche ToolsTools zur Konzeption

Um bereits in der Entwurfsphase ein Gefuumlhl fuumlr das Look amp Feel einer App oder Website zu be-kommen empfiehlt es sich im Voraus Skizzen in der realen Groumlszlige eines Devices anzufertigen So kann man Inhalte am besten ergonomisch platzieren und bekommt schon zu Beginn des Projektes ein gutes Gefuumlhl fuumlr Groumlszligen Aufteilungen und Prioritaumlten

Zu diesem Zweck koumlnnen zB Holz-Prototypen von iPhone oder iPad genutzt werden auf denen direkt skizziert werden kann - entweder grob mit Kreide auf Tafellack oder detailliert mit Blei- oder Filzstift auf Skizzenpapier Hat das Skizzenpapier bereits eine Rasterung zur Uumlber-tragung in Pixelgroumlszligen lassen sich Groumlszligen von Buttons oder Boxen besonders einfach in den digitalen Entwurf uumlbertragen Die Holzprototypen sollten als robuste Spielzeuge gesehen werden mit denen alles erlaubt ist

10

Hilfreiche Tools

Tools fuumlr den Entwurf

Es ist schwierig Groumlszligenverhaumlltnisse richtig einzuschaumltzen oder ein Gefuumlhl dafuumlr zu bekommen wie sich ein Design zB am iPhone anfuumlhlt waumlhrend man es an einem normalen 72ppi Display designt Mit viel Zeit und Uumlbung werden Designer jedoch ein Gefuumlhl dafuumlr bekommen Inter-faces zu designen unabhaumlngig davon auf welcher Displaygroumlszlige und mit welcher ppi Zahl sie ausgegeben werdenBis es soweit ist koumlnnen wir auf Tools zuruumlckgreifen die uns die Arbeit erleichtern

Skala Preview von bjango (Mac iPhone iPad)gibt am iPhoneiPad eine Live-Vorschau aus Pho-toshop vom Mac aus

Mit dieser App bekommt man bereits beim Designprozess einen direkten Eindruck davon wie sich ein Design am iPhone anfuumlhlt Sind iPhone und Mac im gleichen WLan verbindet Skala Preview die beiden und man kann sein iPhone neben dem Display aufstellen um gleichzeitig bei der Arbeit in Pho-toshop bereits das Design am Zieldevice live mitverfolgenSo laumlsst sich direkt die Groumlszlige eines Buttons uumlberpruumlfen oder die Lesbarkeit von Text sicherstellenMehr Infos zur App googlDqrMi

Tools fuumlr die Entwicklung

Auch bei der Umsetzung ist es nuumltzlich wenn man eine Website beim entwickeln am Desk-top-Rechner live am Device uumlberpruumlfen kann So kann man effektiv sicherstellen dass Menuumls sich korrekt aufklappen Animationen fluumlssig laufen und Interaktionen funktionieren

Adobe Edge Inspect bietet genau diese Moumlglichkeit Man benoumltigt die Adobe Edge App auf dem Device sowie die Browser-Extension auf dem Desktop-RechnerAnschlieszligend wird die aktuell im Desktop-Browser geoumlff-nete Seite live auf dem verbundenen Device angezeigt als wenn man sie eigenstaumlndig geoumlffnet haumltteAm Desktop koumlnnen dann Anpassungen im Code gemacht werden die sofort live am Device uumlberpruumlft werden koumlnnen Vor allem bei responsiven oder fluiden Designs kann dies sehr hilfreich seinMehr Infos zur Edge Inspect googlCTDKY

8

Tipps fuumlr touchable Design

Coaching

Aumlhnlich wie in Videospielen kann man dem User die Moumlglichkeit geben bestimmte Gesten oder Features zu lernen In Spielen erfolgt dies durch drei Hilfsmittel raquo Coaching Man erklaumlrt dem User eine Geste waumlhrend er bereits die Moumlglichkeit hat diese

anzuwenden Hat er sie erfolgreich angewendet verschwindet die Anleitung Als optionaler Ausstieg sollte sets die Moumlglichkeit gegeben werden das Coaching zu uumlberspringen

raquo Leveling Up Um den User nicht zu uumlberfordern kann man ihm Schrittweise die Bedienung einer komplexen App naumlherbringen Kommt er in eine Situation in der eine Geste ange-wandt werden kann wird ihm diese erklaumlrt und er kann sie anwenden - Geste fuumlr Geste Usern die dieses Know-How bereits anwenden sollten diese Tipps nicht gezeigt werden

raquo Power-Ups Wie Tastaturkuumlrzel von Desktop-Programmen sind es an Touch Devices Ges-ten die Powerusern ermoumlglichen bestimmte Aktionen schneller auszufuumlhren ohne dafuumlr zwei oder mehr Taps zu betaumltigen Diese Gesten sollten nur als Zusatz zur einfachen Steuerung uumlber Buttons verstanden werden da sie nicht unbedingt intuitiv von jedem User verstanden werden koumlnnen Dem User wird wenn er eine Aktion uumlber den Button-Weg beispielswei-se 10 mal ausgefuumlhrt hat als Tool-Tip die Geste erklaumlrt und angeboten welche den But-ton-Weg ersetzt So kann man sicherstellen dass die Information fuumlr den User wirklich von Bedeutung ist da er die Funktion oft benutzt und ihm ein einfacherer Weg angeboten wird

Tooltips

Noch ist es nicht selbstverstaumlndlich dass Websites (wie viele native Apps) uumlber einzigartige Gesten verfuumlgen Daher kann es sinnvoll sein dem User durch dezente Tooltips Hinweise zu geben welche Aktionen er auf der Seite ausfuumlhren kann Man kennt dies von diversen Apps welche nach dem Start beispielsweise einen Screen mit Tooltips zeigen oder bei denen man beim ersten Start ein kurzes Tutorial durchgeht welches die App und ihre Gesten erklaumlrt

Die App bdquoClearldquo erklaumlrt beim ersten Start die wichtigsten Funktionen Mithilfe sympathischer einfacher Illus-trationen und kurzer Texte werden die Grundgesten kurz erklaumlrt

9

Hilfreiche Tools

Vorhandenes Know-How nutzen

Da die meisten Menschen die touchable Devices nutzen bereits Erfahrung mit anderen digi-talen Medien haben kann dieses Wissen auch fuumlr die Steuerung durch Gesten und Beruumlhrung genutzt werden Zum Beispiel koumlnnten Gesten genutzt werden die auf Aktionen aus der Ver-wendung von Desktop-PCs basieren (Drag amp Drop der Doppelklick) Hier ist zu hinterfragen ob bei einer Geste die auf einer solchen Aktion basiert nicht bereits eine andere Touch-Funktio-nalitaumlt der derzeitige Standard ist

Bei Smartphones etablieren sich bereits erste touch-spezifische Gesten als Standard-Funktio-nalitaumlten raquo Double Tap um zu Zoomen (iPhone Windows 7 Phone) raquo Swipe nach links um ein Element aus einer Liste zu loumlschen (iPhone) raquo Getappt halten um Optionen fuumlr ein Element einzublenden (aumlhnlich dem Rechtsklick mit der

Maus)

Es bleibt nun abzuwarten welche Gesten sich auf lange Sicht

herstellerunabhaumlngig durchsetzen

Hilfreiche ToolsTools zur Konzeption

Um bereits in der Entwurfsphase ein Gefuumlhl fuumlr das Look amp Feel einer App oder Website zu be-kommen empfiehlt es sich im Voraus Skizzen in der realen Groumlszlige eines Devices anzufertigen So kann man Inhalte am besten ergonomisch platzieren und bekommt schon zu Beginn des Projektes ein gutes Gefuumlhl fuumlr Groumlszligen Aufteilungen und Prioritaumlten

Zu diesem Zweck koumlnnen zB Holz-Prototypen von iPhone oder iPad genutzt werden auf denen direkt skizziert werden kann - entweder grob mit Kreide auf Tafellack oder detailliert mit Blei- oder Filzstift auf Skizzenpapier Hat das Skizzenpapier bereits eine Rasterung zur Uumlber-tragung in Pixelgroumlszligen lassen sich Groumlszligen von Buttons oder Boxen besonders einfach in den digitalen Entwurf uumlbertragen Die Holzprototypen sollten als robuste Spielzeuge gesehen werden mit denen alles erlaubt ist

10

Hilfreiche Tools

Tools fuumlr den Entwurf

Es ist schwierig Groumlszligenverhaumlltnisse richtig einzuschaumltzen oder ein Gefuumlhl dafuumlr zu bekommen wie sich ein Design zB am iPhone anfuumlhlt waumlhrend man es an einem normalen 72ppi Display designt Mit viel Zeit und Uumlbung werden Designer jedoch ein Gefuumlhl dafuumlr bekommen Inter-faces zu designen unabhaumlngig davon auf welcher Displaygroumlszlige und mit welcher ppi Zahl sie ausgegeben werdenBis es soweit ist koumlnnen wir auf Tools zuruumlckgreifen die uns die Arbeit erleichtern

Skala Preview von bjango (Mac iPhone iPad)gibt am iPhoneiPad eine Live-Vorschau aus Pho-toshop vom Mac aus

Mit dieser App bekommt man bereits beim Designprozess einen direkten Eindruck davon wie sich ein Design am iPhone anfuumlhlt Sind iPhone und Mac im gleichen WLan verbindet Skala Preview die beiden und man kann sein iPhone neben dem Display aufstellen um gleichzeitig bei der Arbeit in Pho-toshop bereits das Design am Zieldevice live mitverfolgenSo laumlsst sich direkt die Groumlszlige eines Buttons uumlberpruumlfen oder die Lesbarkeit von Text sicherstellenMehr Infos zur App googlDqrMi

Tools fuumlr die Entwicklung

Auch bei der Umsetzung ist es nuumltzlich wenn man eine Website beim entwickeln am Desk-top-Rechner live am Device uumlberpruumlfen kann So kann man effektiv sicherstellen dass Menuumls sich korrekt aufklappen Animationen fluumlssig laufen und Interaktionen funktionieren

Adobe Edge Inspect bietet genau diese Moumlglichkeit Man benoumltigt die Adobe Edge App auf dem Device sowie die Browser-Extension auf dem Desktop-RechnerAnschlieszligend wird die aktuell im Desktop-Browser geoumlff-nete Seite live auf dem verbundenen Device angezeigt als wenn man sie eigenstaumlndig geoumlffnet haumltteAm Desktop koumlnnen dann Anpassungen im Code gemacht werden die sofort live am Device uumlberpruumlft werden koumlnnen Vor allem bei responsiven oder fluiden Designs kann dies sehr hilfreich seinMehr Infos zur Edge Inspect googlCTDKY

9

Hilfreiche Tools

Vorhandenes Know-How nutzen

Da die meisten Menschen die touchable Devices nutzen bereits Erfahrung mit anderen digi-talen Medien haben kann dieses Wissen auch fuumlr die Steuerung durch Gesten und Beruumlhrung genutzt werden Zum Beispiel koumlnnten Gesten genutzt werden die auf Aktionen aus der Ver-wendung von Desktop-PCs basieren (Drag amp Drop der Doppelklick) Hier ist zu hinterfragen ob bei einer Geste die auf einer solchen Aktion basiert nicht bereits eine andere Touch-Funktio-nalitaumlt der derzeitige Standard ist

Bei Smartphones etablieren sich bereits erste touch-spezifische Gesten als Standard-Funktio-nalitaumlten raquo Double Tap um zu Zoomen (iPhone Windows 7 Phone) raquo Swipe nach links um ein Element aus einer Liste zu loumlschen (iPhone) raquo Getappt halten um Optionen fuumlr ein Element einzublenden (aumlhnlich dem Rechtsklick mit der

Maus)

Es bleibt nun abzuwarten welche Gesten sich auf lange Sicht

herstellerunabhaumlngig durchsetzen

Hilfreiche ToolsTools zur Konzeption

Um bereits in der Entwurfsphase ein Gefuumlhl fuumlr das Look amp Feel einer App oder Website zu be-kommen empfiehlt es sich im Voraus Skizzen in der realen Groumlszlige eines Devices anzufertigen So kann man Inhalte am besten ergonomisch platzieren und bekommt schon zu Beginn des Projektes ein gutes Gefuumlhl fuumlr Groumlszligen Aufteilungen und Prioritaumlten

Zu diesem Zweck koumlnnen zB Holz-Prototypen von iPhone oder iPad genutzt werden auf denen direkt skizziert werden kann - entweder grob mit Kreide auf Tafellack oder detailliert mit Blei- oder Filzstift auf Skizzenpapier Hat das Skizzenpapier bereits eine Rasterung zur Uumlber-tragung in Pixelgroumlszligen lassen sich Groumlszligen von Buttons oder Boxen besonders einfach in den digitalen Entwurf uumlbertragen Die Holzprototypen sollten als robuste Spielzeuge gesehen werden mit denen alles erlaubt ist

10

Hilfreiche Tools

Tools fuumlr den Entwurf

Es ist schwierig Groumlszligenverhaumlltnisse richtig einzuschaumltzen oder ein Gefuumlhl dafuumlr zu bekommen wie sich ein Design zB am iPhone anfuumlhlt waumlhrend man es an einem normalen 72ppi Display designt Mit viel Zeit und Uumlbung werden Designer jedoch ein Gefuumlhl dafuumlr bekommen Inter-faces zu designen unabhaumlngig davon auf welcher Displaygroumlszlige und mit welcher ppi Zahl sie ausgegeben werdenBis es soweit ist koumlnnen wir auf Tools zuruumlckgreifen die uns die Arbeit erleichtern

Skala Preview von bjango (Mac iPhone iPad)gibt am iPhoneiPad eine Live-Vorschau aus Pho-toshop vom Mac aus

Mit dieser App bekommt man bereits beim Designprozess einen direkten Eindruck davon wie sich ein Design am iPhone anfuumlhlt Sind iPhone und Mac im gleichen WLan verbindet Skala Preview die beiden und man kann sein iPhone neben dem Display aufstellen um gleichzeitig bei der Arbeit in Pho-toshop bereits das Design am Zieldevice live mitverfolgenSo laumlsst sich direkt die Groumlszlige eines Buttons uumlberpruumlfen oder die Lesbarkeit von Text sicherstellenMehr Infos zur App googlDqrMi

Tools fuumlr die Entwicklung

Auch bei der Umsetzung ist es nuumltzlich wenn man eine Website beim entwickeln am Desk-top-Rechner live am Device uumlberpruumlfen kann So kann man effektiv sicherstellen dass Menuumls sich korrekt aufklappen Animationen fluumlssig laufen und Interaktionen funktionieren

Adobe Edge Inspect bietet genau diese Moumlglichkeit Man benoumltigt die Adobe Edge App auf dem Device sowie die Browser-Extension auf dem Desktop-RechnerAnschlieszligend wird die aktuell im Desktop-Browser geoumlff-nete Seite live auf dem verbundenen Device angezeigt als wenn man sie eigenstaumlndig geoumlffnet haumltteAm Desktop koumlnnen dann Anpassungen im Code gemacht werden die sofort live am Device uumlberpruumlft werden koumlnnen Vor allem bei responsiven oder fluiden Designs kann dies sehr hilfreich seinMehr Infos zur Edge Inspect googlCTDKY

10

Hilfreiche Tools

Tools fuumlr den Entwurf

Es ist schwierig Groumlszligenverhaumlltnisse richtig einzuschaumltzen oder ein Gefuumlhl dafuumlr zu bekommen wie sich ein Design zB am iPhone anfuumlhlt waumlhrend man es an einem normalen 72ppi Display designt Mit viel Zeit und Uumlbung werden Designer jedoch ein Gefuumlhl dafuumlr bekommen Inter-faces zu designen unabhaumlngig davon auf welcher Displaygroumlszlige und mit welcher ppi Zahl sie ausgegeben werdenBis es soweit ist koumlnnen wir auf Tools zuruumlckgreifen die uns die Arbeit erleichtern

Skala Preview von bjango (Mac iPhone iPad)gibt am iPhoneiPad eine Live-Vorschau aus Pho-toshop vom Mac aus

Mit dieser App bekommt man bereits beim Designprozess einen direkten Eindruck davon wie sich ein Design am iPhone anfuumlhlt Sind iPhone und Mac im gleichen WLan verbindet Skala Preview die beiden und man kann sein iPhone neben dem Display aufstellen um gleichzeitig bei der Arbeit in Pho-toshop bereits das Design am Zieldevice live mitverfolgenSo laumlsst sich direkt die Groumlszlige eines Buttons uumlberpruumlfen oder die Lesbarkeit von Text sicherstellenMehr Infos zur App googlDqrMi

Tools fuumlr die Entwicklung

Auch bei der Umsetzung ist es nuumltzlich wenn man eine Website beim entwickeln am Desk-top-Rechner live am Device uumlberpruumlfen kann So kann man effektiv sicherstellen dass Menuumls sich korrekt aufklappen Animationen fluumlssig laufen und Interaktionen funktionieren

Adobe Edge Inspect bietet genau diese Moumlglichkeit Man benoumltigt die Adobe Edge App auf dem Device sowie die Browser-Extension auf dem Desktop-RechnerAnschlieszligend wird die aktuell im Desktop-Browser geoumlff-nete Seite live auf dem verbundenen Device angezeigt als wenn man sie eigenstaumlndig geoumlffnet haumltteAm Desktop koumlnnen dann Anpassungen im Code gemacht werden die sofort live am Device uumlberpruumlft werden koumlnnen Vor allem bei responsiven oder fluiden Designs kann dies sehr hilfreich seinMehr Infos zur Edge Inspect googlCTDKY

11

Schlusswort

Denk an die UserBehalte immer den Menschen im Hinterkopf der Dein Produkt nutzt Fuumlr seine Sinne entwirfst Du das Produkt und er ist es den Du gluumlcklich machst oder enttaumluschst

Sei kreativNeue Gesten zu kreieren die sich am Markt durchsetzen ist sehr schwierig Trotzdem steht neuen Ideen nichts im Wege wenn sie gut sind

Entwickle die Konventionen des Webdesigns weiterDie Regeln und Konventionen des Designs von digitalen Medien muumlssen sich parallel zum technischen Fortschritt mit weiterentwickeln

Sei Produktdesigner - nicht mehr nur WebdesignerBeruumlhrung bedeutet Haptik und die Hand ist die neue Maus Das heiszligt dass Apps und Websi-tes nun direkt fuumlr die menschliche Interaktion designt werden muumlssen

Spiel mehr VideospieleVideospiele sind das Musterbeispiel fuumlr intuitive Interaktion Gute Spiele sind leicht zu erlernen und zeigen wie vielseitig und spaszligig Interaktivitaumlt sein kann Hier wird auch deutlich wie wichtig Animation zur Interaktion ist

Denk dreidimensionalVersuche uumlber die zweidimensionale Flaumlche des Touch-Devices hinauszudenken Fuumlhlt sich etwas dreidimensional an ist es greifbarer und realer

Quellen

httpventurebeatcom20111024developing-for-tablet-nui

httpuxdesignsmashingmagazinecom20120221finger-friendly-design-ideal-mobile-touchscreen-target-si-zes

httpwwwinstantshiftcom20100921how-to-create-touchable-web-designs

httpdeveloperapplecomlibrarysafaridocumentationUserExperienceConceptualMobileHIGPrinciplesPrin-cipleshtmlapple_refdocuidTP40006556-CH5-SW7

httpmedialootcomblogskeuomorphic-design

The Mobile Book (httpwwwsmashingmagazinecom20121212the-new-mobile-book-is-here)

Schlusswort Achtung Provokant