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.
13. @webinterface
HEUTE HABEN WIR EINE
FORTSCHREITENDE
(DEVICE)
FRAGMENTIERUNG.
@webinterface Bild: http://opensignal.com/reports/2015/08/android-fragmentation/
17. @webinterface
WIR SIND STÄNDIG VERNETZT UND
ONLINE UND NUTZEN
UNTERSCHIEDLICHE DEVICES IN
ABHÄNGIGKEIT VOM
NUTZUNGSKONTEXT.
Bild: https://sportinfrastrukturreport.wordpress.com
18. @webinterface
UND DAS SIND DIE MITSPIELER.
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com
19. IPAD PRO: TABLET ODER NOTEBOOK?
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface
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. @webinterface
„People use any platform to do anything“
GILES COLBORNE (COLBORNE 2012)
Bild: https://www.flickr.com/photos/katariinajarvinen/6319346422/sizes/o/
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.“
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.“
47. @webinterface
1. CONTENT VS. BILDSCHIRMGRÖßE
2. DESIGN ALS MODULARES SYSTEM
3. DESIGNING FOR TOUCH
4. BROWSER KOMPATIBILITÄT
5. PERFORMANCE
CONTEXT FIRST
53. @webinterface
VIER STUFEN FÜR DIE
HANDLUNGSRELEVANT:
1. Ersteindruck
2. Gesamteindruck
3. Wiederbesuchsbereitschaft
4. Weiterempfehlungsbereitschaft
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.
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
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. @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. @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. @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. @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