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

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

Post on 13-Apr-2017

320 views

Category:

Design

2 download

Embed Size (px)

TRANSCRIPT

  • @webinterface

    DEVICE AGNOSTICGerteunabhngiges 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

    https://www.browser-statistik.de/marktanteile/2007/dezember/

  • @webinterface

    MENSCH UND MASCHINE INTERAKTION GEPRGT DURCH DAS GRAPHICAL USER INTERFACE (GUI) UND DEM GRUNDPRINZIP SEE, POINT AND CLICK.

  • @webinterface

    DER NUTZUNGSKONTEXT WAR BERWIEGEND STATIONR.

    @webinterface

  • @webinterface

    HEUTE HABEN WIR EINE FORTSCHREITENDE (DEVICE) FRAGMENTIERUNG.

    @webinterface Bild: http://opensignal.com/reports/2015/08/android-fragmentation/

    http://opensignal.com/reports/2015/08/android-fragmentation/

  • @webinterface

    24093Quelle: http://opensignal.com/

    BEISPIEL ANDRIOD DEVICES:

    JAHR 2015 JAHR 2014

    18796

    http://opensignal.com/reports/2015/08/android-fragmentation/

  • Quelle: http://opensignal.com/@webinterface

    http://opensignal.com/reports/2015/08/android-fragmentation/

  • Quelle: http://opensignal.com/@webinterface

    VERGLEICH BETRIEBSSYSTEME: IOS VS. ANDRIOD

    http://opensignal.com/reports/2015/08/android-fragmentation/

  • @webinterface

    WIR SIND STNDIG VERNETZT UND ONLINE UND NUTZEN UNTERSCHIEDLICHE DEVICES IN ABHNGIGKEIT VOM NUTZUNGSKONTEXT.

    Bild: https://sportinfrastrukturreport.wordpress.com

    https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/

  • @webinterface

    UND DAS SIND DIE MITSPIELER.

    Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com

    https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/

  • IPAD PRO: TABLET ODER NOTEBOOK?

    Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface

    https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/

  • Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface

    TOUCH ODER KEYBOARD?

    https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/https://sportinfrastrukturreport.wordpress.com/tag/stadion-wiener-neustadt/

  • @webinterface Grafik: http://www.lukew.com/

    http://www.lukew.com/

  • @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 LSUNGEN: 1. ANDERE URL 2. UNTERSCHIEDLICHE SEITEN UND

    CONTENT VERSIONEN 3. UNTERSCHIEDLICHE TECHNISCHE

    PLATTFORMEN

  • @webinterface

    WO WIR WIEDER BEI DER FRAGEMENTIERUNG DURCH UNTERSCHIEDLICHE LSUNGEN 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

    IMBRO

    MEETING MITTAGESSEN

    ABENDS AUF DER COUCH

    SEQUENTIALLY NUTZUNG UND KONTEXT RELEVANTE NUTZUNG.

  • @webinterface

    People use any platform to do anythingGILES COLBORNE (COLBORNE 2012)

    Bild: https://www.flickr.com/photos/katariinajarvinen/6319346422/sizes/o/

    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 FHRT 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

    https://flic.kr/p/2cDDwn

  • @webinterface

    WIR HABEN KEINEN EINFLUSS WELCHES DEVICE NUTZER VERWENDEN.

    WIR KNNEN ABER DEN CONTENT STEUERN.

  • @webinterface

    OPTIMIERUNG DES CONTENT AUF PRSENTATION UND INTERAKTION.

    @webinterface Bild: https://www.flickr.com/photos/hernanpc/11390495316/

    https://www.flickr.com/photos/hernanpc/11390495316/

  • @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721

    ORIENTATION MODE

    http://www.lukew.com/ff/entry.asp?1721

  • @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721

    http://www.lukew.com/ff/entry.asp?1721

  • @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721

    HYBRID: TOUCH/MOUSE/KEYBOARD

    http://www.lukew.com/ff/entry.asp?1721

  • @webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721

    HYBRID: TOUCH/MOUSE/KEYBOARD

    http://www.lukew.com/ff/entry.asp?1721

  • @webinterface

    BRAD FROST

    Get your content to go anywhere, because its 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. BILDSCHIRMGRE 2. DESIGN ALS MODULARES SYSTEM 3. DESIGNING FOR TOUCH 4. BROWSER KOMPATIBILITT 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/

    http://bradfrost.com/blog/post/interface-inventory/

  • @webinterface

    INTERFACE INVENTORY (VORHER)

    BILD/Image: http://bradfrost.com/blog/post/interface-inventory/

    http://bradfrost.com/blog/post/interface-inventory/

  • @webinterface

    INTERFACE INVENTORY (NACHHER)

    BILD/Image: http://bradfrost.com/blog/post/interface-inventory/

    http://bradfrost.com/blog/post/interface-inventory/

  • @webinterface

    ZIEL DES CONTENT AUDIT: WELCHE INHALTE SIND FR DEN NUTZUNGSKONTEXT HANDLUNGSRELEVANT?

  • @webinterface

    VIER STUFEN FR 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

    https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks

  • @webinterface

    1. IDENTIFIZIEREN SIE DAS PROBLEM. 2. TESTEN SIE IDEEN UM DAS

    PROBLEM ZU LSEN. 3. OPTIMIEREN SIE DIE USER

    EXPERIENCE IN BEZUG AUF DEN NUTZUNGSKONTEXT.

  • @webinterface

    CONTENT BASED BREAKPOINTS: BREAKPOINTS IN ABHNGIGKEIT 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.

    http://www.lukew.com/ff/entry.asp?1721

  • @webinterface

    KEINE SEITEN DESIGNEN SONDERN EIN MODULARES DESIGN SYSTEMS.

  • @webinterface

    VORTEILE EINES MODALEREN DESIGN SYSTEM: 1. KONSISTENTE UX UND DESIGN 2. GERTEUNABHNGIG 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

    http://mediatemple.net/blog/tips/modern-style-guides-for-web-design-and-development/

  • @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

    KOMPLEXITT MINIMIEREN

  • @webinterface

    KILL BAD IDEAS WITH RAPID PROTOTYPING.

  • @webinterface

    INTERDISZIPLINRE TEAMS BILDEN, UND T-SHAPE SKILLS FRDERN.

  • VIELEN DANK

    FR Ellen

    @webinterface

  • @webinterfacepeter.rozek@ecx.io

    @webinterface

    FRAGEN ?

    mailto:peter.rozek@ecx.io?subject=