UX IN DER PRAXIS 
HERAUSFORDERUNGEN 
BEI DESKTOP & MOBILE PROJEKTEN 
ANDRÉ DAHMS, SEVENVAL CONSULTING 
twitter @andredahms...
SEVENVAL TECHNOLOGIES 
LERNEN SIE UNS KENNEN. HIER EINE KURZÜBERSICHT VON SEVENVAL IN ZAHLEN: 
15 140 3 
Jahre Erfahrung M...
SEVENVAL LEISTUNGEN 
CONSULTING 
Mit Ihrem Return on Investment als 
Ausgangspunkt unserer Überlegungen 
finden wir techno...
SEVENVAL REFERENZEN 
Das Livestyle-Magazin mb! als Full Responsive Lösung für Desktop, 
Tablet und Mobile. 
SEVENVAL | COM...
SEVENVAL REFERENZEN 
Traumurlaub ganz einfach mobil finden – optimiert für Smartphones und Tablets. 
SEVENVAL | COMPANY PR...
SEVENVAL REFERENZEN 
OneWeb als Musterbeispiel – eine URL, alle Devices, immer performant. 
SEVENVAL | COMPANY PRESENTATIO...
UX IN DER PRAXIS 
HERAUSFORDERUNGEN 
BEI DESKTOP & MOBILE PROJEKTEN
DESKTOP/MOBILE HERAUSFORDERUNGEN
NUTZERERWARTUNG 
Nutzerbezogene Anforderungen in einer Multi-Device-Welt 
• Selbstverständlicher und alltäglicher Umgang m...
Mobile Website Key Findings 
1. The median web page has slowed down by 47% since 2012 
2. The median page takes 5.4 second...
www.strangeloopnetworks.com/web-performance-infographics 
1. Sek. mehr Wartezeit 
7% weniger 
Conversion 
11% weniger 
Sei...
Wie wird man diesen Anforderungen gerecht? 
Flexibles 
Responsive Design 
User- und Kontext- 
Sensitivität 
Assistierte To...
DESKTOP/MOBILE HERAUSFORDERUNGEN
DESKTOP/MOBILE HERAUSFORDERUNGEN 
Smartphones Small Tablets Large Tablets Desktop 
1. Liquid Layout nach Geräteklassen 
2....
FLUID GRID SYSTEM 
Fluid Grid Design als Bestandteil von RWD optimierten Websites 
MUSIC WORLD CUP breakpoint system Owner...
FLEXIBLES RESPONSIVE DESIGN 
Zusammenfassung 
• Extrem Modularer Frontend-Aufbau auf Basis eines Fluid Grid Systems und 
R...
BEISPIELE
KRYSTALRAE.COM
KRYSTALRAE.COM
APPLE.COM/MAC-PRO/
MATTHEW.WAGERFIELD.COM/PARALLAX/
JOURNEY.LIFEOFPIMOVIE.COM
PUMA.COM/MOBIUM/
DISCOVER.STORE.SONY.COM/BE-MOVED/
LEARNINGS 
Den Nutzer zum scrollen animieren 
Wiedererkennungswert steigern 
Storytelling
HERAUSFORDERUNGEN
HERAUSFORDERUNGEN – HOLIDAYCHECK 
mobile Website mobile APP 
Desktop Website
HERAUSFORDERUNGEN – HOLIDAYCHECK 
Desktop Website
HERAUSFORDERUNGEN – HOLIDAYCHECK 
mobile APP mobile Website
HERAUSFORDERUNGEN – ZUFÜHRUNG
HERAUSFORDERUNGEN – ZUFÜHRUNG
TIPPS ZUR PROJEKTPLANUNG
TIPPS ZUR PROJEKTPLANUNG 
MOBILE FIRST 
RESPONSIVE WEB DESIGN
TIPPS ZUR PROJEKTPLANUNG 
NEUER DESIGN PROZESS 
IST NOTWENDIG
TIPPS ZUR PROJEKTPLANUNG 
Alter Design Prozess
TIPPS ZUR PROJEKTPLANUNG 
Responsive Webdesign Prozess
TIPPS ZUR PROJEKTPLANUNG 
VISION 
Digital Hub 
Adaptive One 
Web persönliche App 
Zugriff auf 
Entertainment, 
Information...
TIPPS ZUR PROJEKTPLANUNG 
TOTAL COST OF OWNERSHIP 
BEACHTEN
TOTAL COST OF OWNERSHIP (TCO) 
EIN PROJEKT BESTEHT NICHT NUR AUS INITIALKOSTEN. 
Initiale Kosten 
Laufende Kosten
FRAGEN? 
VIELEN DANK 
André Dahms, Sevenval Consulting 
twitter @andredahms 
office +49 221 84630 124 
mobile +49 162 204 ...
UX in der Praxis - Herausforderungen bei Desktop und mobile Projekten
UX in der Praxis - Herausforderungen bei Desktop und mobile Projekten
UX in der Praxis - Herausforderungen bei Desktop und mobile Projekten
Nächste SlideShare
Wird geladen in …5
×

UX in der Praxis - Herausforderungen bei Desktop und mobile Projekten

627 Aufrufe

Veröffentlicht am

UX in der Praxis - Herausforderungen bei Desktop und mobile Projekten

Veröffentlicht in: Mobil
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
627
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UX in der Praxis - Herausforderungen bei Desktop und mobile Projekten

  1. 1. UX IN DER PRAXIS HERAUSFORDERUNGEN BEI DESKTOP & MOBILE PROJEKTEN ANDRÉ DAHMS, SEVENVAL CONSULTING twitter @andredahms office +49 221 84630 124 mobile +49 162 204 80 57 mail andre.dahms@sevenval.com
  2. 2. SEVENVAL TECHNOLOGIES LERNEN SIE UNS KENNEN. HIER EINE KURZÜBERSICHT VON SEVENVAL IN ZAHLEN: 15 140 3 Jahre Erfahrung Mitarbeiter Standorte 2000+ 200+ Websites Apps
  3. 3. SEVENVAL LEISTUNGEN CONSULTING Mit Ihrem Return on Investment als Ausgangspunkt unserer Überlegungen finden wir technologie-unabhängig für jedes Ihrer Projekte den richtigen Weg in das Mobile- und Responsive Web. UX DESIGN Wir bieten Konzeption, Visual Design auf Basis aktuellster technischer Möglichkeiten und verlieren dabei den Nutzer nie aus den Augen. QUALITY ASSURANCE Wir stehen Ihnen bei allen Fragen der Qualitätssicherung zur Seite und bieten von der Test-Konzeption bis hin zur finalen Handlungsempfehlung alles aus einer Hand. PRODUCT SUITE Unsere Produkte optimieren und beschleunigen die Darstellung von Webinhalten auf sämtlichen internetfähigen Endgeräten. Sie garantieren eine reibungslose Einbindung jeglicher IT-Infrastrukturen. IMPLEMENTIERUNG Wir setzen Ihre Mobile- und Multi-Device- Projekte um und bieten flexibles Projektmanagement und erstklassige Software-Entwicklung für Apps und Web. MOBILE SERVICES Wir erhöhen den Bekanntheitsgrad Ihrer Produkte und Services mit digitalen Kampagnen. Dabei nutzen wir die neuesten Technologien und Methoden.
  4. 4. SEVENVAL REFERENZEN Das Livestyle-Magazin mb! als Full Responsive Lösung für Desktop, Tablet und Mobile. SEVENVAL | COMPANY PRESENTATION
  5. 5. SEVENVAL REFERENZEN Traumurlaub ganz einfach mobil finden – optimiert für Smartphones und Tablets. SEVENVAL | COMPANY PRESENTATION
  6. 6. SEVENVAL REFERENZEN OneWeb als Musterbeispiel – eine URL, alle Devices, immer performant. SEVENVAL | COMPANY PRESENTATION
  7. 7. UX IN DER PRAXIS HERAUSFORDERUNGEN BEI DESKTOP & MOBILE PROJEKTEN
  8. 8. DESKTOP/MOBILE HERAUSFORDERUNGEN
  9. 9. NUTZERERWARTUNG Nutzerbezogene Anforderungen in einer Multi-Device-Welt • Selbstverständlicher und alltäglicher Umgang mit verschiedenen internetfähigen Geräten • Erwartet vollen Inhalts- und Funktions-Umfang in Kombination mit einem jeweils optimierten Interface • Setzt Berücksichtigung der individuellen Nutzungssituation voraus und erwartet volle Kompatibilität zu aktuellen Sharing-Szenarien • Erwartet eine immer höhere Service-Qualität und –Intelligenz und hat wenig Verständnis für technische Einschränkungen
  10. 10. Mobile Website Key Findings 1. The median web page has slowed down by 47% since 2012 2. The median page takes 5.4 seconds to become interactive 3. The top 100 sites are slower than the top 500 4. Sites that use a CDN were slower than sites that do not 5. Most sites fail to leverage best practices for optimizing images
  11. 11. www.strangeloopnetworks.com/web-performance-infographics 1. Sek. mehr Wartezeit 7% weniger Conversion 11% weniger Seitenaufrufe 16% Abnahme Zufriedenheit Weniger Conversion = weniger Umsatz!
  12. 12. Wie wird man diesen Anforderungen gerecht? Flexibles Responsive Design User- und Kontext- Sensitivität Assistierte Tools und Services
  13. 13. DESKTOP/MOBILE HERAUSFORDERUNGEN
  14. 14. DESKTOP/MOBILE HERAUSFORDERUNGEN Smartphones Small Tablets Large Tablets Desktop 1. Liquid Layout nach Geräteklassen 2. Unterschiedliche Bedienkonzepte bedienen 3. Hardwareleistung beachten
  15. 15. FLUID GRID SYSTEM Fluid Grid Design als Bestandteil von RWD optimierten Websites MUSIC WORLD CUP breakpoint system Owner: Raymond O'Hora Author: Markus Stuhr, Tassilo Eichler Version: 0.01 Page 1 / 1 iPhone (P) iPhone (LS) iPad (P) iPad (LS) laptops large screens 600px 400px 800px 1025px 1500px min. 240px ∞ A B C D F breakpoint area E layout type liquid fix content area 100% 1024px 1300px number of columns 4 6 10 12 focus input type touch mouse typo scale small medium large layout example 8
  16. 16. FLEXIBLES RESPONSIVE DESIGN Zusammenfassung • Extrem Modularer Frontend-Aufbau auf Basis eines Fluid Grid Systems und Responsive Elements • Mobile First, Progressive Enhancement und funktionale Breakpoints als Grundansätze für maximale Geräteanpassung und Zukunftssicherheit • Modernes, systemübergreifendes Interface Design für höchste Ansprüche in Usability und CI-Adaption • Klarer Seitenaufbau, zielgruppengerechte Informations-Architektur und nahtlose Verzahnung von verschiedenen Inhalten
  17. 17. BEISPIELE
  18. 18. KRYSTALRAE.COM
  19. 19. KRYSTALRAE.COM
  20. 20. APPLE.COM/MAC-PRO/
  21. 21. MATTHEW.WAGERFIELD.COM/PARALLAX/
  22. 22. JOURNEY.LIFEOFPIMOVIE.COM
  23. 23. PUMA.COM/MOBIUM/
  24. 24. DISCOVER.STORE.SONY.COM/BE-MOVED/
  25. 25. LEARNINGS Den Nutzer zum scrollen animieren Wiedererkennungswert steigern Storytelling
  26. 26. HERAUSFORDERUNGEN
  27. 27. HERAUSFORDERUNGEN – HOLIDAYCHECK mobile Website mobile APP Desktop Website
  28. 28. HERAUSFORDERUNGEN – HOLIDAYCHECK Desktop Website
  29. 29. HERAUSFORDERUNGEN – HOLIDAYCHECK mobile APP mobile Website
  30. 30. HERAUSFORDERUNGEN – ZUFÜHRUNG
  31. 31. HERAUSFORDERUNGEN – ZUFÜHRUNG
  32. 32. TIPPS ZUR PROJEKTPLANUNG
  33. 33. TIPPS ZUR PROJEKTPLANUNG MOBILE FIRST RESPONSIVE WEB DESIGN
  34. 34. TIPPS ZUR PROJEKTPLANUNG NEUER DESIGN PROZESS IST NOTWENDIG
  35. 35. TIPPS ZUR PROJEKTPLANUNG Alter Design Prozess
  36. 36. TIPPS ZUR PROJEKTPLANUNG Responsive Webdesign Prozess
  37. 37. TIPPS ZUR PROJEKTPLANUNG VISION Digital Hub Adaptive One Web persönliche App Zugriff auf Entertainment, Informationen und Services Entertainment und Informationen auf on- Board Displays Wearables zeigen zusätzliche Informationen Verlinkung von Spielen per Ton ausgesteuerte Links zu Werbung Auto erkennt Fahrer und Position und bietet Kontext entsprechende Informationen Self-Service Digital Signage Stationen
  38. 38. TIPPS ZUR PROJEKTPLANUNG TOTAL COST OF OWNERSHIP BEACHTEN
  39. 39. TOTAL COST OF OWNERSHIP (TCO) EIN PROJEKT BESTEHT NICHT NUR AUS INITIALKOSTEN. Initiale Kosten Laufende Kosten
  40. 40. FRAGEN? VIELEN DANK André Dahms, Sevenval Consulting twitter @andredahms office +49 221 84630 124 mobile +49 162 204 80 57 mail andre.dahms@sevenval.com

×