SmashingConf Barcelona 2016 - Dag 2

SmashingConf Barcelona 2016 - Dag 2

SmashingConf Barcelona 2016 - Dag 2

Van 24 tot 26 Oktober trok het Front-End team van EntityOne naar Barcelona om Smashing Conference bij te wonen, een internationale bijeenkomst waarin het woord wordt gegeven aan grote namen in de wereld van het web met een focus op design & front-end. Enkele keren per jaar wordt deze conferentie wereldwijd georganiseerd door Smashing Magazine. Na een zeer positieve eerste ervaring in 2015 besloten we ook dit jaar terug te keren.

In deze blogpost schrijft bij wijze van ruwe samenvatting elk van de 3 front-enders per dag over de voor hem meest memorabele sessie van die dag! 

 

Woensdag 26 Oktober, dag 2 van de conferentie

Laura Elizabeth

“From pages to patterns: How pattern libraries are changing the face of the web” - Laura Elizabeth @laurium

In deze talk heeft Laura Elizabeth het over Pattern Libraries. Dit zijn modulaire, uit vormgegeven elementen opgebouwde styleguides die de voorbije jaren enorm aan populariteit hebben gewonnen, en dit onder het motto tijd en frustraties uit te sparen bij grote projecten. Lightning Design Systems is hier een mooi voorbeeld van. Ze stelt echter enkele belangrijke vragen hierover, niet om ontwerpers af te raden een pattern library te bouwen maar eerder om heel bewuste en onderbouwde stappen te zetten in dit proces. 

Heb je een pattern library nodig? Of eerder: wat voor pattern library?

Het is belangrijk om te begrijpen dat een pattern library (styleguide of designsysteem) niet eenvoudig is om te bouwen en vooral moet onderhouden én gebruikt worden. Ze wijst er op dat dit eigenlijk vooral nuttig is als het bedrijf groot genoeg is, het merk al enkele jaren stabiel is (en niet onderworpen aan constante redesigns), je de tijd hebt om het te bouwen, de mentaliteit om het te onderhouden, en vooral: wanneer er bepaalde problemen zijn om hiermee op te lossen. Want als niemand het gebruikt, is het waardeloos.

Is er een business case? 

Het vinden van business cases voor het gebruik van pattern libraries is moeilijk aangezien dit nog maar enkele jaren een opmars kent en er nog niet genoeg tijd is geweest om goeie business cases te laten ontstaan. Ze heeft wel enkele ervaringen gevonden van het gebruik van pattern libraries, dit bij o.a. Amazon Web, Future Learn, en AirBnB, die er op wijzen dat er zeer positieve kanten zijn aan het gebruik van pattern libraries, maar ook enkele risico’s om rekening mee te houden. Het is dus belangrijk om hier een gesprek over te hebben met de klant, en niet gewoon te beweren dat het tijd uitspaart “omdat dit is wat iedereen zegt”.

Zorg ervoor dat je klant gelooft in de pattern library

Pattern libraries zijn geen ding op zich, maar een oplossing voor een mogelijk probleem. Onderzoek dus met uw klant wat de problemen zijn, en of pattern libraries een oplossing hiervoor kunnen bieden. Om dit te doen biedt Laura enkele stappen aan:

  • Stap 1: Luister naar de klant. Wat zijn de problemen, wat werkt niet goed, wat vinden ze niet aangenaam? Verzamel zoveel mogelijk data van zoveel mogelijk mensen.
  • Stap 2: Definieer de pijnpunten
  • Stap 3: Workshop de pijnpunten (hiervoor kon ze o.a. de interface inventory van Brad Frost aanraden: http://bradfrost.com/blog/post/interface-inventory)
  • Stap 4: Doe user testing om het belang van consistente design-elementen aan te tonen
  • Stap 5: Just do it: systematiseer je ontwerp en je resources op kleine manieren bij het werk, dit is iets wat je sowieso zou moeten doen. Zelfs als je geen volledige pattern library opbouwt zal dit een groei in productiviteit met zich meebrengen, en dit is enkel in het voordeel van de klant.
Jen Simmons

“Revolutionize Your Page: Real Art Direction on the web” - Jen Simmons @jensimmons

Jen Simmons is gefascineerd door pagina layout.

Wat je ongetwijfeld al zal gemerkt hebben op het web is dat vele websites op elkaar beginnen te gelijken. Dit omdat we als ontwerper vast zitten aan het grid systeem, we gebruiken overal hetzelfde grid, zelfde patronen of zelfs templates.

Het is beter dat we voor elk project opnieuw vanaf nul beginnen en proberen een layout te voorzien die vernieuwend is en past bij het onderwerp. We kunnen hiervoor inspiratie halen uit boeken, magazines, … Print is namelijk iets waar we minder een patroon zullen in kunnen terugvinden dan wat  we nu vooral doen op het web.

Er zijn ook tal van nieuwe technieken beschikbaar in CSS om pagina’s een “amazing” gevoel mee te geven. We kunnen bijvoorbeeld net zoals in print de tekst laten lopen rond een ronde afbeelding of een andere willekeurige vorm. We hoeven zo niet vast te zitten aan de vaak rechthoekige vorm van afbeeldingen.

Nog enkele nieuwe technieken zijn:

  • Outside circle;
  • Rotation (transform);
  • Viewport units
  • Multi columns met Flexbox;

En tot slot één van de grootste vernieuwingen binnen CSS volgens Jen:

CSS grid layout (gepland om te kunnen gebruiken in Spring 2017). Grid layout is een raster layout in css waarin we de inhoud willekeurig kunnen plaatsen. Met grid layout kunnen we bijvoorbeeld het bekende schilderij van Piet Mondriaan namaken op het web en het meteen ook responsive maken. Momenteel ondersteunt ironisch genoeg enkel IE en Edge deze technologie. Ik test het alvast uit in de dev build van mozilla zo ben ik klaar voor 2017!

 http://jensimmons.com/

Christian Holst

“Conversion rate optimization techniques in e-commerce” - Christian Holst @KiehnHolst

Christian kwam in zijn talk vertellen hoe je het meeste kan halen uit je webshop.

Momenteel verlaat namelijk gemiddeld 70% van de bezoekers van een webshop het winkelmandje alvorens de bestelling af te ronden. 61% hiervan omwille van de te hoge extra kosten die er meestal pas bijkomen in de laatste stap.

Na 7 jaar onderzoek naar de conversion rate in e-commerce zijn dit 5 bevindingen waarbij als je deze aanpakt je mogelijk al 35% minder verlaten winkelmandjes hebt.

  1. in 2012 waren er gemiddeld 5,08 checkout steps tegenover 5,42 in 2016. Het aantal stappen in de checkout verhoud zich niet tot een beter checkoutproces. De focus moet liggen op het aantal velden in plaats van het aantal stappen.
  2. Privacy issues, Je maakt een veld ofwel optioneel of legt uit waarom je het nodig hebt. Bijvoorbeeld. Als je een telefoonnummer vraagt om een pakketje bij iemand thuis te laten leveren kan de uitleg zijn: “ Mochten er problemen zijn bij het verzenden”.
  3. Review step pitfall. Bij sommige webshops (bv Disney) is de laatste stap een review pagina waarbij je de volledige bestelling te zien krijgt.  Hier verwacht men dat je alles naleest en dan nogmaals op Bestellen klikt alvorens je bestelling effectief is geplaatst. Maar sommige mensen zien dit als een bevestiging van wat ze hebben besteld en vergeten daardoor op de button te klikken onderaan deze pagina. Je kan dit oplossen door de button bovenaan de samenvatting te plaatsen, zodat men ziet dat er nog een actie moet gebeuren.
  4. Maak gebruik van adaptive error messages. Zo verlaten mensen je webshop niet zo snel als er een fout bij het ingeven van alle velden optreed omdat ze duidelijk zien wat ze verkeerd hebben gedaan.
  5. Maak het mogelijk om te bestellen als een gast. Want de meeste mensen vergeten het paswoord voor hun account op je webshop toch en moeten dan weer het volledige proces van een nieuw paswoord aan te vragen doorlopen vooraleer ze kunnen bestellen.