UX-Webdesign für Tablets

Christian Kuhn @NUISOL | nuisol.com

UX DESIGN für TabletsChristian Kuhn

Eine Anleitung für Usability, Screendesign und Webentwicklung

DAS

ZEN FUR

TABLETS

Was ist UX-Design?

How-To

Yeah!, OK, Error

Digital Publishing

Das Nutzungsverhalten der nächsten

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 aboutcommunication, and ittakes more than pixelsto communicate.”

Derek PowazekContent & Community Genius

USEREXPERIENCE

Joy of use

Gla

ubw

ürdi

gkeit

Interaktion

V

ertr

auen Reaktion

H

arm

onie

Berechenbarkeit

Funktionalität

Intuitivtät

NU

TZW

ERT

/ LOOK

NUTZERLEBN

IS / FEEL

USABILITY

Vereinfache mein LebenVereinfache mein Leben

Vereinfache mein Leben

Verstärkung

Konversion

Kenntnisse

Menschen

Inhalt

Technologie

Business

Verstehe den User

IBM 370, 1 MIPS Rechenleistung, 36 Teile

electricpig.co.uk

2.000 MIPS

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

Official Nokia "4th Screen" video, 2007

PERIODISCH

TIME KILLER

ECHTZEIT

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

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

http://venturebeat.files.wordpress.com/

Quelle: Google Studie 2011, Apfelnews.de am 06.12.2011

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

http://youtu.be/6EXJZ8J-pdsThis 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!

Kenne die Hardware

1024x600

1024x768 1280x800

iOS, Web OS 3

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

Android 3/4, Windows 7/8

TABLET-SCREENDESIGN.INFO

Tap Double Tap Touch and Hold

Drag-Flick Pinch Spread

Rotate 2 Finger Drag Down 2 Finger Drag UpiOS

Tap Double Tap Touch and Hold

Drag-Flick Pinch Spread

RotateWebOS

Tap Double Tap Touch and Hold

Drag-Flick Pinch Spread

Android und Windows Phone7

http://gesturecons.com

Plane bevor Du

Kreierst

Größerer Bildschirm

Mehr Funktionalität

Mehr Portabel

Einfacheres Interface

einfache Lösung

= +Projekt Dna

Projekt Dna

Projekt Dna

Auf Einfachheit fokusieren

WErtE hinzufügEn

vorAngigE funktionEn

fragen was nutzer wollen und

brauchen

Dann: Welche Werte werden hinzugefügt?

STORM

iOS App: AirDisplay

Adobe Proto für Android

iMockups für iOS

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

<style type="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 FlashJA, SIE HABEN ES GESCHAFFT

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

Einfachheit ist die höchste Stufe

der Vollendung. Leonardo Da Vinci

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

http://youtu.be/c_4XTiE5PEE

The Economist on iPhone & iPad

Neustart:

Responsive

Responsive Web Design (RWD)

fluid grid + fluid images + media queries

@media all and (orientation:portrait) { /* Hier der allgemeine CSS-Code für Geräte im Portrait Modus */}

@media all and (orientation:landscape) { /* Hier der allgemeine CSS-Code für Geräte im Landscape Modus */}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte 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 für 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 für 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 für 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 für 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.orghttp://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

• Größere Schriften

• Device optimierte Inhalte

Content + Context = King

Digital Publishingmit 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 Publishingmit 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 Lösungen für Marketing und Kommunikation. Der neuste Stand der Technologie ist

dabei Maßstab.

Das Wissen über Entwicklungen und Trends macht NUISOL so praktisch nutzbar und bietet Orientierung in der rasanten

digitalen Evolution.

NUISOL. Agentur für digitale Aha-Erlebnisse.

Artikel, Buch, Vorträge, Workshops, Trainings

UX Design

Webentwicklung

Mobile

Tablet

E-Commerce

Digital Publishing

Live Streaming (HLS)

Social Media

Christian.Kuhn@NUISOL.com

Tel. 0151 15 77 66 99

Besuchen Sie auch:http://www.nuisol.com/xingprofilhttp://www.twitter.com/nuisolhttp://www.facebook.com/NUISOL.communication

Vielen Dank für Ihre Aufmerksamkeit