Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Device Agnostic: Geräteunabhängiges Design als UX Grundlage

452 views

Published on

Brauchen wir noch starre Designs aus Photoshop für die Gestaltung von Websites? Ignorieren wie damit nicht seit langem die Flexibilität des Webs. Der eigentliche Grundgedanke des Webs ist Informationen unabhängig von Formfaktoren, Bandbreiten und Latenzen zugänglich zu machen. Das denken und designen in Silos von Mobile, Tablet und Desktop hat ausgedient. Content First, Breakpoints in Abhängigkeit einer fluiden Content Experience zu setzten, frühzeitiges Prototyping und schnelles iterieren sollten unser Vorgehen bestimmen. Für eine nachhaltige User Experience sind Coherence, Fluidity und Adaptability entscheidend geworden. Wie können wir Stakeholder davon überzeugen den klassischen visuellen Pfad zu verlassen? Der Vortag beleuchtet die Vorteile einer kontextsensitiven Experience auf und formuliert Empfehlungen für die Kommunikation mit den Stakeholdern.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Device Agnostic: Geräteunabhängiges Design als UX Grundlage

  1. 1. @webinterface DEVICE AGNOSTIC Geräteunabhängiges Design als UX Grundlage @webinterface WEBINALE 2016
  2. 2. PETER ROZEK @webinterface
  3. 3. ÜBER MICH @webinterface
  4. 4. @webinterface @webinterface
  5. 5. UX, USABILITY, ACCESSIBILITY, FRONTEND @webinterface
  6. 6. WORK @ ECX.IO (DIGITAL AGENCY) @webinterface
  7. 7. ECX.IO AN IBM COMPANY
  8. 8. @webinterface WIKIPEDIA „Agnostizismus ist eine Weltanschauung, die insbesondere die prinzipielle Begrenztheit menschlichen Wissens und Verstehens bzw. Begreifens betont.“
  9. 9. @webinterface BIS 2007 DENKEN UND DESIGNEN IN (WEB)SEITEN.
  10. 10. @webinterface 55,2% 39,9% 2,4 % 1,7 % BROWSER DEZ 2007 Quelle: https://www.browser-statistik.de
  11. 11. @webinterface MENSCH UND MASCHINE INTERAKTION GEPRÄGT DURCH DAS GRAPHICAL USER INTERFACE (GUI) UND DEM GRUNDPRINZIP „SEE, POINT AND CLICK“.
  12. 12. @webinterface DER NUTZUNGSKONTEXT WAR ÜBERWIEGEND STATIONÄR. @webinterface
  13. 13. @webinterface HEUTE HABEN WIR EINE FORTSCHREITENDE (DEVICE) FRAGMENTIERUNG. @webinterface Bild: http://opensignal.com/reports/2015/08/android-fragmentation/
  14. 14. @webinterface 24093 Quelle: http://opensignal.com/ BEISPIEL ANDRIOD DEVICES: JAHR 2015 JAHR 2014 18796
  15. 15. Quelle: http://opensignal.com/@webinterface
  16. 16. Quelle: http://opensignal.com/@webinterface VERGLEICH BETRIEBSSYSTEME: IOS VS. ANDRIOD
  17. 17. @webinterface WIR SIND STÄNDIG VERNETZT UND ONLINE UND NUTZEN UNTERSCHIEDLICHE DEVICES IN ABHÄNGIGKEIT VOM NUTZUNGSKONTEXT. Bild: https://sportinfrastrukturreport.wordpress.com
  18. 18. @webinterface UND DAS SIND DIE MITSPIELER. Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com
  19. 19. IPAD PRO: TABLET ODER NOTEBOOK? Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface
  20. 20. Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface TOUCH ODER KEYBOARD?
  21. 21. @webinterface Grafik: http://www.lukew.com/
  22. 22. @webinterface 2010: ETHAN MARCOTTE RESPONSIVE WEDDESIGN @webinterface
  23. 23. @webinterface@webinterface RESPONSIVE WEDDESIGN ADRESSIERT (IST) DEVICE AGNOSTIC.
  24. 24. @webinterface RESPONSIVE WEBDESIGN: 1. EINE URL 2. EIN CONTENT 3. EINE SEITE
  25. 25. @webinterface UNTERSCHIEDLICHE LÖSUNGEN: 1. ANDERE URL 2. UNTERSCHIEDLICHE SEITEN UND CONTENT VERSIONEN 3. UNTERSCHIEDLICHE TECHNISCHE PLATTFORMEN
  26. 26. @webinterface …WO WIR WIEDER BEI DER FRAGEMENTIERUNG DURCH UNTERSCHIEDLICHE LÖSUNGEN 
 UND CONTENT VERSIONEN SIND.
  27. 27. @webinterface RESPONSIVE WEBDESIGN ADRESSIERT MULTISCREEN EXPERIENCE.
  28. 28. @webinterface JEDER VON UNS BESITZT UND NUTZT UNTERSCHIEDLICHE DEVICES.
  29. 29. @webinterface MORGENS AUF DEM WEG ZUR ARBEIT IM
 BÜRO MEETING MITTAG
 ESSEN ABENDS 
 AUF DER 
 COUCH SEQUENTIALLY NUTZUNG UND KONTEXT RELEVANTE NUTZUNG.
  30. 30. @webinterface „People use any platform to do anything“ GILES COLBORNE (COLBORNE 2012) Bild: https://www.flickr.com/photos/katariinajarvinen/6319346422/sizes/o/
  31. 31. @webinterface STEPHEN HAY, ZERO INTERFACE „There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web.“
  32. 32. @webinterface DER CONTENT MUSS IM NUTZUNGSKONTEXT HANDLUNGSRELEVANT SEIN.
  33. 33. @webinterface SARITA HARBOUR „The site you build is not dependent on knowing what device it is being displayed on.“
  34. 34. @webinterface SCHLECHTE USER EXPERIENCE FÜHRT IMMER ZUM GLEICHEN ERGEBNIS. @webinterface
  35. 35. @webinterface VON RESPONISVE DESIGN ZU DEVICE AGNOSTIC DESIGN.
  36. 36. @webinterface MULTI-DEVICE EXPERIENCE: CONTENT CHOREOGRAPHIE ANGEPASST AM NUTZUNGSKONTEXT. @webinterface Bild: https://flic.kr/p/2cDDwn
  37. 37. @webinterface WIR HABEN KEINEN EINFLUSS WELCHES DEVICE NUTZER VERWENDEN. WIR KÖNNEN ABER DEN CONTENT STEUERN.
  38. 38. @webinterface OPTIMIERUNG DES CONTENT AUF PRÄSENTATION UND INTERAKTION. @webinterface Bild: https://www.flickr.com/photos/hernanpc/11390495316/
  39. 39. @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721 ORIENTATION MODE
  40. 40. @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
  41. 41. @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721 HYBRID: TOUCH/MOUSE/KEYBOARD
  42. 42. @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721 HYBRID: TOUCH/MOUSE/KEYBOARD
  43. 43. @webinterface BRAD FROST „Get your content to go anywhere, because it’s going to go everywhere.“
  44. 44. @webinterface KAREN MCGRANE „ It is your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it.“
  45. 45. @webinterface DESIGN
 DEVICE AGNOSTIC IN DER PRAXIS
  46. 46. @webinterface CONTEXT FIRST
  47. 47. @webinterface 1. CONTENT VS. BILDSCHIRMGRÖßE 2. DESIGN ALS MODULARES SYSTEM 3. DESIGNING FOR TOUCH 4. BROWSER KOMPATIBILITÄT 5. PERFORMANCE CONTEXT FIRST
  48. 48. @webinterface MIT DER INHALTSANALYSE STARTEN: 1. CONTENT INVENTORY 2. INTERFACE INVENTORY 3. CONTENT AUDITS
  49. 49. @webinterface CONTENT INVENTORY: QUANTITATIVE DOKUMANTION ÜBER DEN INHALT. BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
  50. 50. @webinterface INTERFACE INVENTORY (VORHER) BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
  51. 51. @webinterface INTERFACE INVENTORY (NACHHER) BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
  52. 52. @webinterface ZIEL DES CONTENT AUDIT: WELCHE INHALTE SIND FÜR DEN NUTZUNGSKONTEXT HANDLUNGSRELEVANT?
  53. 53. @webinterface VIER STUFEN FÜR DIE
 HANDLUNGSRELEVANT: 1. Ersteindruck 2. Gesamteindruck 3. Wiederbesuchsbereitschaft 4. Weiterempfehlungsbereitschaft
  54. 54. Source/Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks KILL BAD IDEAS WITH RAPID PROTOTYPING. @webinterface
  55. 55. @webinterface 1. IDENTIFIZIEREN SIE DAS PROBLEM. 2. TESTEN SIE IDEEN UM DAS PROBLEM ZU LÖSEN. 3. OPTIMIEREN SIE DIE USER EXPERIENCE IN BEZUG AUF DEN NUTZUNGSKONTEXT.
  56. 56. @webinterface CONTENT BASED BREAKPOINTS: BREAKPOINTS IN ABHÄNGIGKEIT VOM CONTENT SETZEN UND NICHT NACH DEM DEVICE.
  57. 57. @webinterface MAJOR- UND MINOR-BREAKPOINTS MAJOR BREAKPOINT 1 320 MAJOR BREAKPOINT 2 720 MAJOR BREAKPOINT 3 1100 MAJOR BREAKPOINT
 MAJOR LAYOUT CHANGES 645 MINOR BREAKPOINT 780 MINOR BREAKPOINT MINOR BREAKPOINT
 CONTENT RELATED TWEAKS
  58. 58. @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721 JOSH CLARK „New rule: every desktop design has to go finger friendly.“
  59. 59. @webinterface KEINE SEITEN DESIGNEN SONDERN EIN MODULARES DESIGN SYSTEMS.
  60. 60. @webinterface VORTEILE EINES MODALEREN DESIGN SYSTEM: 1. KONSISTENTE UX UND DESIGN 2. GERÄTEUNABHÄNGIG 3. BESSERE WERTBARKEIT 4. SCHNELLES TIME TO MARKET
  61. 61. @webinterface TEMPLATES DEFINIEREN FOOTER HEADER & NAV FEATURES FEATURES
 CATEGORIES FEATURES
 PRODUCTS FOOTER CATEGORIES HEADER & NAV FOOTER FILTER
 &SEARCH PRODUCTS HEADER & NAV FOOTER RELATED
 PRODUCTS ADDITIONAL INFO GALLERY HEADER & NAV STARTSEITE KATEGORIEN PRODUKTE PRODUKT DETAIL
  62. 62. @webinterface FOOTER FILTER
 &SEARCH PRODUCTS HEADER & NAV PROD PROD PROD PROD PROD PROD PROD PROD PROD PROD PROD PROD FOOTER RELATED
 PRODUCTS ADDITIONAL INFO GALLERY HEADER & NAV PROD PROD PROD PROD FOOTER CATEGORIES HEADER & NAV CATEG CATEG CATEG CATEG CATEG CATEG PRODCATEGORY CATEGORY CATEGORY FOOTER HEADER & NAV FEATURES FEATURES
 CATEGORIES FEATURES
 PRODUCTS PROD PROD PROD PROD CATEG CATEG CATEGORY CATEGORY STARTSEITE KATEGORIEN PRODUKTE PRODUKT DETAIL RASTER
  63. 63. @webinterface FOOTER HEADER & NAV FEATURES FEATURES
 CATEGORIES FEATURES
 PRODUCTS FOOTER HEADER & NAV FEATURES FEATURES
 CATEGORIES FEATURES
 PRODUCTS PROD PROD PROD PROD CATEGORY CATEG CATEG HEADER & NAV FEATURES FOOTER FOOTER HEADER & NAV FEATURES FEATURES
 CATEGORIES FEATURES
 PRODUCTS PROD PROD PROD PROD CATEG CATEG CATEGORY CATEGORY CROSS DEVICE DARSTELLUNG STARTSEITE DESKTOP STARTSEITE MOBILE
  64. 64. @webinterface PROD PROD PROD PROD CATEGORY CATEG CATEG HEADER & NAV FEATURES FOOTER FOOTER HEADER & NAV FEATURES FEATURES
 CATEGORIES FEATURES
 PRODUCTS PROD PROD PROD PROD CATEG CATEG CATEGORY CATEGORY HEADER & NAV FOOTER HEADER & NAV FOOTER CROSS DEVICE DARSTELLUNG
  65. 65. @webinterface HEADER & NAV FOOTER HEADER & NAV FOOTER PATTERN IDENTIFZIEREN
  66. 66. @webinterface FEATURES FEATURES PRODUCTS SINGLE PRODUCTS DESKTOP MOBILE PATTERN LIBRARY ERSTELLEN
  67. 67. @webinterface Quelle/Image: http://mediatemple.net Frontend Styleguide
  68. 68. @webinterface RESUMÉ
  69. 69. @webinterface DEVICE AGNOSTIC DESIGN BEDEUTET EINE CONTEXT FIRST STRATEGIE ZU HABEN.
  70. 70. @webinterface FOKUS AUF DEN CONTENT UND NUTZUNGSKONTEXT RICHTEN.
  71. 71. @webinterface CONTENT BASED BREAKPOINTS DEFINIEREN.
  72. 72. @webinterface EIN DESIGN SYSTEM ENTWICKLEN UND KEINE MODUL SAMMLUNG.
  73. 73. @webinterface KOMPLEXITÄT MINIMIEREN
  74. 74. @webinterface KILL BAD IDEAS WITH RAPID PROTOTYPING.
  75. 75. @webinterface INTERDISZIPLINÄRE TEAMS BILDEN, UND T-SHAPE SKILLS FÖRDERN.
  76. 76. VIELEN DANK …FÜR Ellen @webinterface
  77. 77. @webinterface peter.rozek@ecx.io @webinterface FRAGEN ?

×