Post on 19-Feb-2015
description
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
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/
Ü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.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