UX-Webdesign fr Tablets

Christian Kuhn
@NUISOL | nuisol.com

UX DESIGN fr Tablets
Eine Anleitung fr Usability, Screendesign und Webentwicklung
Christian Kuhn

N ZEURETS F L
TA B

S DA

Was ist UX-Design? How-To Yeah!, OK, Error Digital Publishing

Das Nutzungsverhalten der nchsten Anwender-/Kundengenerationen verlangt das Kommunikation Digital ist. Sie wird im Web stattfinden. Sie wird Mobile und Social sein.

http://www.universalmccann.de/wave6/

Engaging the Tablet User: What They Expect From Web Sites

http://www.gomez.com/engaging-the-tablet-user/

Engaging the Tablet User: What They Expect From Web Sites

http://www.gomez.com/engaging-the-tablet-user/

Was ist UX-Design?

Design is about communication, and it takes more than pixels to communicate.

Derek Powazek
Content & Community Genius

LO OK

/ FEEL BNIS RLE ZE UT N

Vereinfache mein Leben

NUTZW ERT /

Glaubw rd igk Vertr ei au t en Harm on ie

USER EXPERIENCE
Be

Vereinfache mein Leben

se of u Joy on akti ter In ion akt Re

Vereinfache mein Leben

I n t u itiv t t

it ke enbar Fun k ti o n a lit t

rech

U S A BI L I T Y

Verstrkung

Konversion

Kenntnisse

Menschen

Inhalt

Technologie

Business

Verstehe den User

IBM 370, 1 MIPS Rechenleistung, 36 Teile

electricpig.co.uk

2.000 MIPS

Official Nokia "4th Screen" video, 2007

http://www.youtube.com/watch?v=XpeNk3E36YU

PERIODISCH TIME KILLER ECHTZEIT

Technology codes our minds, changes our OS. Apple products have done this extensively.

http://www.youtube.com/watch?v=aXV-yaFmQNk

http://venturebeat.les.wordpress.com/

Quelle: Google Studie 2011, Apfelnews.de am 06.12.2011

http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

This was a blast to shoot a commercial for AirTran Airways with Peter Graves from Airplane!! It is a spot for their GoGo In Flight WiFi internet which is killer!

http://youtu.be/6EXJZ8J-pds

Kenne die Hardware

1024x600

Android ab 2.2, Windows 7/8, BlackBerry Tablet OS, Amazon Kindle Fire

1024x768 1280x800

iOS, Web OS 3 Android 3/4, Windows 7/8

TABLET-SCREENDESIGN.INFO

Tap

Double Tap

Touch and Hold

Drag-Flick

Pinch

Spread

iOS

Rotate

2 Finger Drag Down

2 Finger Drag Up

Tap

Double Tap

Touch and Hold

Drag-Flick

Pinch

Spread

WebOS

Rotate

Tap

Double Tap

Touch and Hold

Drag-Flick

Pinch

Spread

Android und Windows Phone7

http://gesturecons.com

Plane bevor Du Kreierst

Grerer Bildschirm Mehr Funktionalitt

Mehr Portabel Einfacheres Interface

Dann: Welche Werte werden hinzugefgt?

vorAngigE funktionEn

=
einfache Lsung

Projekt Dna

Projekt Dna

Projekt Dna

WErtE hinzufgEn
Auf Einfachheit fokusieren fragen was nutzer wollen und brauchen

STORM

iOS App: AirDisplay

Adobe Proto fr Android

iMockups fr iOS

http://www.teehanlax.com/blog/ipad-gui-psd-version-2/

<styletype="text/css"> div,p,a,li,td{ -webkit-text-size-adjust:none; } </style>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The App, built using HTML5 technology, features continual and automatic content downloads and improvements.It ensures that FT customers can access FT content anytime, anywhere, on a PC and multiple devices, with one login and one subscription payment.

http://www.youtube.com/watch?v=jhbljqKisig&feature=relmfu

Kein Flash
JA, SIE HABEN ES GESCHAFFT

Watch this space, Flash Banner, wertvoller Platz, alternates?

ist die hchste Stufe der Vollendung.

LeonardoDa Vinci

Einfachheit

http://designspiration.net/image/3866/

http://onswipe.com

http://www.asidemag.com/grid/

berdenke die Navigation

"There's nothing on the iPhone or iPad that you can do that I can't do."
Stevie Wonder, September 2011

The Economist on iPhone & iPad

http://youtu.be/c_4XTiE5PEE

Neustart:

Responsive

Responsive Web Design (RWD)

uid grid + uid images + media queries

@media all and (orientation:portrait) { /* Hier der allgemeine CSS-Code fr Gerte im Portrait Modus */ } @media all and (orientation:landscape) { /* Hier der allgemeine CSS-Code fr Gerte im Landscape Modus */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Hier der CSS Code fr Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Gerte o.. */ } @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { /* iPhone mit Retina Display */ } /* Computer und Tablet CSS */ @media only screen and (min-device-width: 800px) { /* Hier der CSS-Code fr Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */ }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) { /* Hier der CSS-Code speziell fr das iPad */ body {background:none;} } @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* Hier der CSS-Code speziell fr das neue iPad(3)*/ body {background:none;} } @media only screen and (max-device-height: 800px) and (max-device-width: 1280px) and (orientation : landscape) { /* Hier der CSS-Code speziell fr das Android Tablets mit 1280x800 */ body {background:#fff;} #wrap { width:940px; padding:0 40px; margin:0 auto; background-color:#fff; -moz-box-shadow:0 -10px 10px 0 #fff; -webkit-box-shadow:0 -10px 10px 0 #fff; box-shadow:0 -10px 10px 0 #fff; }

http://resizemybrowser.com/

http://seesparkbox.com/foundry/media_query_bookmarklet

http://quirktools.com/screen!y/

http://www.opera.com/developer/tools/

http://loadtimer.org

http://loadtimer.org

http://adaptive-images.com/

Yeah! OK Error

mobile-zeitgeist.com

Tablet UX-Design:
Portrait und Landscape Modus Stark reduzierte Touch-Navigation swipen - sliden - zoom - kein scrollen Minimal, hell GUI Design Integration Grere Schriften Device optimierte Inhalte

Content + Context = King

Digital Publishing
mit Adobe Publishing Suite

http://tv.adobe.com/watch/digital-publishing/transforming-the-magazine-experience-with-wired/

The New Yorker

http://tv.adobe.com/watch/digital-publishing-customer-showcase/app-of-the-week-fast-company/

Digital Publishing
mit QuarkXpress Publishing System

http://www.quark.com/de/Solutions/Applications/ Digital_Publishing_Solutions.aspx

http://itunes.apple.com/DE/app/discovery-channel-extreme/id490082236?mt=8

http://www.youtube.com/embed/0DBmCMh7MSc?wmode=opaque

http://code.google.com/p/sixthsense/

http://code.google.com/p/sixthsense/

NUISOL entwickelt digitale Lsungen fr Marketing und Kommunikation. Der neuste Stand der Technologie ist dabei Mastab. Das Wissen ber Entwicklungen und Trends macht NUISOL so praktisch nutzbar und bietet Orientierung in der rasanten digitalen Evolution. NUISOL. Agentur fr digitale Aha-Erlebnisse.

UX Design

Mobile

Webentwicklung

Tablet

Social Media

Digital Publishing

E-Commerce

Live Streaming (HLS)

Artikel, Buch, Vortrge, Workshops, Trainings

Vielen Dank fr Ihre Aufmerksamkeit

Christian.Kuhn@NUISOL.com Tel. 0151 15 77 66 99
Besuchen Sie auch: http://www.nuisol.com/xingprofil http://www.twitter.com/nuisol http://www.facebook.com/NUISOL.communication