device agnostic: geräteunabhängiges design als ux grundlage
TRANSCRIPT
@webinterface
DEVICE AGNOSTICGeräteunabhängiges Design als UX Grundlage
@webinterface
WEBINALE 2016
PETER ROZEK
@webinterface
ÜBER MICH
@webinterface
@webinterface
@webinterface
UX, USABILITY, ACCESSIBILITY, FRONTEND
@webinterface
WORK @ ECX.IO (DIGITAL AGENCY)
@webinterface
ECX.IO AN IBM COMPANY
@webinterface
WIKIPEDIA
„Agnostizismus ist eine Weltanschauung, die insbesondere die prinzipielle Begrenztheit menschlichen Wissens und Verstehens bzw. Begreifens betont.“
@webinterface
BIS 2007 DENKEN UND DESIGNEN IN (WEB)SEITEN.
@webinterface
55,2% 39,9% 2,4 % 1,7 %
BROWSER DEZ 2007
Quelle: https://www.browser-statistik.de
@webinterface
MENSCH UND MASCHINE INTERAKTION GEPRÄGT DURCH DAS GRAPHICAL USER INTERFACE (GUI) UND DEM GRUNDPRINZIP „SEE, POINT AND CLICK“.
@webinterface
DER NUTZUNGSKONTEXT WAR ÜBERWIEGEND STATIONÄR.
@webinterface
@webinterface
HEUTE HABEN WIR EINE FORTSCHREITENDE (DEVICE) FRAGMENTIERUNG.
@webinterface Bild: http://opensignal.com/reports/2015/08/android-fragmentation/
@webinterface
24093Quelle: http://opensignal.com/
BEISPIEL ANDRIOD DEVICES:
JAHR 2015 JAHR 2014
18796
Quelle: http://opensignal.com/@webinterface
Quelle: http://opensignal.com/@webinterface
VERGLEICH BETRIEBSSYSTEME: IOS VS. ANDRIOD
@webinterface
WIR SIND STÄNDIG VERNETZT UND ONLINE UND NUTZEN UNTERSCHIEDLICHE DEVICES IN ABHÄNGIGKEIT VOM NUTZUNGSKONTEXT.
Bild: https://sportinfrastrukturreport.wordpress.com
@webinterface
UND DAS SIND DIE MITSPIELER.
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com
IPAD PRO: TABLET ODER NOTEBOOK?
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface
TOUCH ODER KEYBOARD?
@webinterface
2010: ETHAN MARCOTTE RESPONSIVE WEDDESIGN
@webinterface
@webinterface@webinterface
RESPONSIVE WEDDESIGN ADRESSIERT (IST) DEVICE AGNOSTIC.
@webinterface
RESPONSIVE WEBDESIGN: 1. EINE URL 2. EIN CONTENT 3. EINE SEITE
@webinterface
UNTERSCHIEDLICHE LÖSUNGEN: 1. ANDERE URL 2. UNTERSCHIEDLICHE SEITEN UND
CONTENT VERSIONEN 3. UNTERSCHIEDLICHE TECHNISCHE
PLATTFORMEN
@webinterface
…WO WIR WIEDER BEI DER FRAGEMENTIERUNG DURCH UNTERSCHIEDLICHE LÖSUNGEN UND CONTENT VERSIONEN SIND.
@webinterface
RESPONSIVE WEBDESIGN ADRESSIERT MULTISCREEN EXPERIENCE.
@webinterface
JEDER VON UNS BESITZT UND NUTZT UNTERSCHIEDLICHE DEVICES.
@webinterface
MORGENS AUF DEM WEG ZUR
ARBEIT
IMBÜRO
MEETING MITTAGESSEN
ABENDS AUF DER COUCH
SEQUENTIALLY NUTZUNG UND KONTEXT RELEVANTE NUTZUNG.
@webinterface
„People use any platform to do anything“GILES COLBORNE (COLBORNE 2012)
Bild: https://www.flickr.com/photos/katariinajarvinen/6319346422/sizes/o/
@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.“
@webinterface
DER CONTENT MUSS IM NUTZUNGSKONTEXT HANDLUNGSRELEVANT SEIN.
@webinterface
SARITA HARBOUR
„The site you build is not dependent on knowing what device it is being displayed on.“
@webinterface
SCHLECHTE USER EXPERIENCE FÜHRT IMMER ZUM GLEICHEN ERGEBNIS.
@webinterface
@webinterface
VON RESPONISVE DESIGN ZU DEVICE AGNOSTIC DESIGN.
@webinterface
MULTI-DEVICE EXPERIENCE: CONTENT CHOREOGRAPHIE ANGEPASST AM NUTZUNGSKONTEXT.
@webinterface Bild: https://flic.kr/p/2cDDwn
@webinterface
WIR HABEN KEINEN EINFLUSS WELCHES DEVICE NUTZER VERWENDEN.
WIR KÖNNEN ABER DEN CONTENT STEUERN.
@webinterface
OPTIMIERUNG DES CONTENT AUF PRÄSENTATION UND INTERAKTION.
@webinterface Bild: https://www.flickr.com/photos/hernanpc/11390495316/
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
ORIENTATION MODE
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
HYBRID: TOUCH/MOUSE/KEYBOARD
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
HYBRID: TOUCH/MOUSE/KEYBOARD
@webinterface
BRAD FROST
„Get your content to go anywhere, because it’s going to go everywhere.“
@webinterface
KAREN MCGRANE
„ It is your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it.“
@webinterface
DESIGNDEVICE AGNOSTIC IN DER PRAXIS
@webinterface
CONTEXT FIRST
@webinterface
1. CONTENT VS. BILDSCHIRMGRÖßE 2. DESIGN ALS MODULARES SYSTEM 3. DESIGNING FOR TOUCH 4. BROWSER KOMPATIBILITÄT 5. PERFORMANCE
CONTEXT FIRST
@webinterface
MIT DER INHALTSANALYSE STARTEN: 1. CONTENT INVENTORY 2. INTERFACE INVENTORY 3. CONTENT AUDITS
@webinterface
CONTENT INVENTORY: QUANTITATIVE DOKUMANTION ÜBER DEN INHALT.
BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
@webinterface
INTERFACE INVENTORY (VORHER)
BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
@webinterface
INTERFACE INVENTORY (NACHHER)
BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
@webinterface
ZIEL DES CONTENT AUDIT: WELCHE INHALTE SIND FÜR DEN NUTZUNGSKONTEXT HANDLUNGSRELEVANT?
@webinterface
VIER STUFEN FÜR DIEHANDLUNGSRELEVANT: 1. Ersteindruck 2. Gesamteindruck 3. Wiederbesuchsbereitschaft 4. Weiterempfehlungsbereitschaft
Source/Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
KILL BAD IDEAS WITH RAPID PROTOTYPING.
@webinterface
@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.
@webinterface
CONTENT BASED BREAKPOINTS: BREAKPOINTS IN ABHÄNGIGKEIT VOM CONTENT SETZEN UND NICHT NACH DEM DEVICE.
@webinterface
MAJOR- UND MINOR-BREAKPOINTS
MAJOR BREAKPOINT 1
320
MAJOR BREAKPOINT 2
720
MAJOR BREAKPOINT 3
1100
MAJOR BREAKPOINTMAJOR LAYOUT CHANGES
645
MINOR BREAKPOINT
780
MINOR BREAKPOINT
MINOR BREAKPOINTCONTENT RELATED TWEAKS
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
JOSH CLARK
„New rule: every desktop design has to go finger friendly.“
@webinterface
KEINE SEITEN DESIGNEN SONDERN EIN MODULARES DESIGN SYSTEMS.
@webinterface
VORTEILE EINES MODALEREN DESIGN SYSTEM: 1. KONSISTENTE UX UND DESIGN 2. GERÄTEUNABHÄNGIG 3. BESSERE WERTBARKEIT 4. SCHNELLES TIME TO MARKET
@webinterface
TEMPLATES DEFINIEREN
FOOTER
HEADER & NAV
FEATURES
FEATURESCATEGORIES
FEATURESPRODUCTS
FOOTER
CATEGORIES
HEADER & NAV
FOOTER
FILTER&SEARCH
PRODUCTS
HEADER & NAV
FOOTER
RELATEDPRODUCTS
ADDITIONAL INFO
GALLERY
HEADER & NAV
STARTSEITE KATEGORIEN PRODUKTE PRODUKT DETAIL
@webinterface
FOOTER
FILTER&SEARCH
PRODUCTS
HEADER & NAV
PROD PROD PROD PROD
PROD PROD PROD PROD
PROD PROD PROD PROD
FOOTER
RELATEDPRODUCTS
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
FEATURESCATEGORIES
FEATURESPRODUCTS
PROD PROD PROD PROD
CATEG CATEG
CATEGORY
CATEGORY
STARTSEITE KATEGORIEN PRODUKTE PRODUKT DETAIL
RASTER
@webinterface
FOOTER
HEADER & NAV
FEATURES
FEATURESCATEGORIES
FEATURESPRODUCTS
FOOTER
HEADER & NAV
FEATURES
FEATURESCATEGORIES
FEATURESPRODUCTS
PROD PROD
PROD PROD
CATEGORY
CATEG CATEG
HEADER & NAV
FEATURES
FOOTER
FOOTER
HEADER & NAV
FEATURES
FEATURESCATEGORIES
FEATURESPRODUCTS
PROD PROD PROD PROD
CATEG CATEG
CATEGORY
CATEGORY
CROSS DEVICE DARSTELLUNG
STARTSEITE DESKTOP STARTSEITE MOBILE
@webinterface
PROD PROD
PROD PROD
CATEGORY
CATEG CATEG
HEADER & NAV
FEATURES
FOOTER
FOOTER
HEADER & NAV
FEATURES
FEATURESCATEGORIES
FEATURESPRODUCTS
PROD PROD PROD PROD
CATEG CATEG
CATEGORY
CATEGORY
HEADER & NAV
FOOTER
HEADER & NAV
FOOTER
CROSS DEVICE DARSTELLUNG
@webinterface
HEADER & NAV
FOOTER
HEADER & NAV
FOOTER
PATTERN IDENTIFZIEREN
@webinterface
FEATURES
FEATURES PRODUCTS
SINGLE PRODUCTS
DESKTOP MOBILE
PATTERN LIBRARY ERSTELLEN
@webinterface Quelle/Image: http://mediatemple.net
Frontend Styleguide
@webinterface
RESUMÉ
@webinterface
DEVICE AGNOSTIC DESIGN BEDEUTET EINE CONTEXT FIRST STRATEGIE ZU HABEN.
@webinterface
FOKUS AUF DEN CONTENT UND NUTZUNGSKONTEXT RICHTEN.
@webinterface
CONTENT BASED BREAKPOINTS DEFINIEREN.
@webinterface
EIN DESIGN SYSTEM ENTWICKLEN UND KEINE MODUL SAMMLUNG.
@webinterface
KOMPLEXITÄT MINIMIEREN
@webinterface
KILL BAD IDEAS WITH RAPID PROTOTYPING.
@webinterface
INTERDISZIPLINÄRE TEAMS BILDEN, UND T-SHAPE SKILLS FÖRDERN.
VIELEN DANK
…FÜR Ellen
@webinterface
