Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren

Kochan & PartnerBrandDesignDevelopment

Mobile Patterns Wie Apps und Co. digitale Interfaces revolutionieren

Markus Grevezur Webwoche 2015

Mit-Teilen: Wo Dich das Rascheln von Laub

aufspürt, der Flügelschlag einer Graugans. Wo

Ideen lässig landen und Musen sich zum Kuss

aufreihen. VERSUCH ÜBER DAS GEMEINSAME:

www.kochan.de/experiment

http://www.kochan.de/experiment

Kochan & Partner Brand Design Development2

Slides http://de.slideshare.net/markusgreve/

Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT

T +49 89 17860–150 E [email protected] @mrmontezuma

Hi, I’m Markus

http://de.slideshare.net/markusgreve/wbfntdy-2012

mailto:[email protected]

Kochan & Partner Brand Design Development

Mobile Patterns Wie Apps und Co. digitale Interfaces revolutionieren

Drei Thesen Ich freue mich auf die

anschließende Diskussion

3


ONE

________

The BurgerIs Dead!

________


Vitaly FriedmannChefredakteur Smashing Magazine

Real-Life Responsive Web Design

Responsive Design ist in. (…) Welche Design Patterns nutzt man und wie

geht man mit komplexen Tabellen, Karten,

Formularen und interaktiven Elementen um?

10

TYPO Berlin 2015


4” +5,5”


Verständnis von Icons abhängig von der Zielgruppe

Je nach Kontext optimierbar durch Zusatz »Menü« oder ähnlich

Die Position fixiert am oberen Bildschirmrand ist in den meisten Anwendungsfällen nicht nutzbar!

➜ Positionierung am

Screen überdenken

19

Zusammenfassung


TWO

________

Two Dimensions Are Not Enough!

________




“Skeuomorphismus (aus dem Altgriechischen σκεῦος Behälter, Werkzeug und μορφή Gestalt) ist eine Stilrichtung

hauptsächlich im Design, bei der Objekte in ihrer Gestaltung ein anderes Material oder eine Form eines älteren, vertrauten

Gegenstandes nachahmen, ohne dass diese durch ihre Funktion begründet ist.

– Wikipedia

23

Design Trend: Vermeidung von Skeuomorphismus


Windows 8: Modern UI (ehemals »Metro«)


Windows Phone 8


Microsoft Windows

Modern UI (ehemals »Metro«)

Apple iOS (später auch Mac OS X)

Flat Design

Google Android

Material Design


Microsoft Windows

Modern UI (ehemals »Metro«)

Apple iOS (später auch Mac OS X)

Flat Design

Google Android

Material Design?


Höhe

Patterns und Höhe

30

Interface Guidelines

Floating Action Button »FAB«

Resting height: 6dp, pressed state 12dp


Klare, aufgeräumte Gestaltung

Glatte Oberflächen

Aber: Interaktion im Interface durch klassische Metaphern wie »Höhe«

➜ Für die Konzepte des »Material Design«

reichen zwei Dimensionen nicht aus.

34

Zusammenfassung


THREE

________

Interfaces Get Simpler

– And Therefor More Complex!

________


Reduzierte Interfaces…

36

Wearables


Noch weniger…

37

Wearables


…bis zum absoluten Nullpunkt

38

Wearables


…bis zum absoluten Nullpunkt

39

Wearables

Apple Watch

Neu: Kurzanleitung

E-Mail Kommunikation

Einladung zum

persönlichen SetupVideo-Tutorials

In-App Lernvideos

https://www.apple.com/media/de/watch/2015/a718f271_b19c_47d8_928d_d108fc5d702a/guided-tours/faces/watch-faces-de-20150323_r848-9dwc.mov









Gegenüberstellung

Gegenüberstellung

on/off

Home

Volume + / –

Mute

Headphone

1

2

3

4

5

Gegenüberstellung

on/off

Home

Volume + / –

Mute

Headphone

Digital crown

Friends

1

2

3

4

5

1

2


Einführung neuer Bedienkonzepte

– Wake-on-Turn

– Mute-on-Cover

– Force Touch

Persönliche Einlernphase

Massenverbreitung

➜ Wiederverwendung bereits »erlernter« Patterns wichtig wie nie!

49

Zusammenfassung

Kochan & PartnerBrandDesignDevelopment

Vielen Dank!