Rätt gränssnitt

för rätt användare

Ett helhetsperspektiv över användargränssnitt

�Stanislav Khromov

Aftonbladet

Om mig

Stanislav Khromov�WordPress-utvecklare på Aftonbladet

stanislav@khromov.se

@khromov

khromov.se

*

Schibsted Media Group

*

*

*

• Team på 7 personer�
• Producerar digitala läsupplevelser�
• Använder WordPress

Aftonbladet

Editorial Team

Denna presentation

• Rätt gränssnitt för rätt person - hur uppnår vi detta?
• Tre persona
• Content creation och Site building
• Tillgängliga verktyg för Content Creation
• Tillgängliga verktyg för Site Building
• Ett mellanläge?
• Avslut & Länkar

Uppdrag:

Rätt gränssnitt för rätt person

?

?

William Webbredaktör

Inga Innehållsansvarig

Sara Sajtbyggare

• Huvuduppgift är att författa innehåll�
• Vill ha ett enkelt sätt att att ändra och skriva text�
• Blir orolig och störd över jobbiga gränssnitt.�

• Författar innehåll i mindre grad, samlar in andras texter och justerar.�
• Justerar widgets, shortcodes.�
• Inte nödvändigtvis tekniskt lagd.�

• Sätter upp hela sajter med en sidbyggare.�
• Tekniskt lagd�
• Vill ha stor frihet och många alternativ att välja på - inget är omöjligt!�

William Webbredaktör

Hur kan vi hjälpa?

• Förenkla, förenkla, förenkla.
• Få dem att komma över “det verkar jobbigt”-tröskeln.
• Det är inte användarens fel.
• Tillhandahåll lättillgänglig dokumentation�

Inga Innehållsansvarig

Hur kan vi hjälpa?

• Ta reda på de vanligaste sysslorna och försök att underlätta dessa.
• Gör det enkelt att göra ändringar utan översikt.
• Men ge inte alltför stor frihet, så att man inte råkar ut för det fruktade “jag vågar inte”

Sara Sajtbyggare

Hur kan vi hjälpa?

• Ge användaren stora möjligheter att justera innehåll.
• Begränsa inte i onödan, välj hellre att ge mer frihet än mindre.
• Bygg skräddarsydda lösningar som är flexibla.
• Tillhandahåll färdiga mallar och moduler, och mindre dokumentation.

Olika behov, varför samma gränssnitt?

Content Creation

Innehållsskapande

Site Building

Sajtbyggande

Content Creation

Site Building

Content creation

Content creation

• Content creation handlar om att skapa innehåll för användare.
• Utmaning: Innehåll är inte begränsad till text & bild.
• Bildspel
• Interaktiv grafik
• Externa inbäddningar (Video, live streaming)
• Övriga element (Rubriker, anfang, infoboxar mm.)

Content creation - vad vi vill ha

• “Medium”-känslan. Snabbt och tillgängligt sätt att redigera innehåll.
• Inga komplicerade layoutalternativ
• Distraktionsfritt
• Sömlöst, förhandsgranskningsbart, förutsägbart

Content creation - problem

• Ännu inget stort ekosystem av tillägg.
• Svårt att integrera på ett sömlöst och förutsägbart sätt.
• Enkla användargränssnitt är namnet till trots förvånansvärt svåra att bygga.

Content creation-verktyg

• Distraction-free writing mode

WordPress

WordPress - text formats

WordPress - shortcodes

Shortcake - Ett gränssnitt för shortcodes

• Standardiserat sätt att lägga till gränssnitt till Shortcodes
• Låter dig förhandsgranska shortcodes direkt i WYSIWYG-editorn.
• Byggt på Backbone.js
• Innehåller ett eget hjälpbibliotek för fält.
• Kandidat för inkludering i en framtida WordPress-version. (Features plugin)

En enkel shortcode

Integrera en befintlig shortcode med Shortcake

Exempel:

[button text="Min knapp" url="http://aftonbladet.se"]

Integrera en befintlig shortcode med Shortcake

Exempel:

[button text="Min knapp" url="http://aftonbladet.se"]

Integrera en befintlig shortcode med Shortcake

• Registrera shortcode-basen i Shortcake
• Specificera vilka fälttyper som tillhör vilka attribut�(Tillgängliga fälttyper: text, checkbox, textarea, radio, select, email, url, number, date, attachment, color, post_select)
• Luta dig tillbaka och låt Shortcake göra jobbet

Case: Aftonbladet Long Reads

• Utmaning: Skapa ett enkelt gränssnitt för redaktörer där de kan välja mellan en stor samling av block.
• Implementerat i Shortcake
• Exempel:�khromov.se/ab-longreads

​

*

WordPress

+

Shortcake

​

​

​

​

​

Demo

Site building

Site building

• “Site building” handlar om att sätta upp strukturen för en sajt.
• Gärna komplicerade layoutalternativ
• Kräver maximal flexibilitet
• Inte så viktigt att förhandsgranska innehållet perfekt - får vara abstrakt.

Site builders

Site building - problem

• Komplicerat!
• För många inställningar! (violates KISS principle)
• Brant inlärningskurva
• Riktat till utvecklare snarare än innehållsskapare.
• Inlåsningseffekt

Visual Composer

• Visual Composer bygger på shortcodes.
• Om ni någonsin har gjort eller använt en shortcode så kan den enkelt integreras i Visual Composer.
• Vi återanvänder vår [button]-shortcode.

​

Case: Aftonbladet Kampanjer

• Utmaning: Unika kampanjsidor som måste byggas snabbt. �
• Implementerat med Visual Composer.��Exempel:�khromov.se/ab-kampanj

WordPress

+

Visual Composer

​

​

​

​

​

Demo

Content Creation

Site Building

?

Managed builder

Managed builder - vad vi vill ha?

• Enkelt att administrera
• Flexibelt
• Begränsar inte användaren lika mycket som ett content creation-verktyg
• Ger inte samma skräckinjagande upplevelse som ett site building-verktyg

Managed builder - problem?

• Inga nyckelfärdiga alternativ.
• Om begränsningarna börjar kännas av så är det svårt att byta.
• Svårt att förhandsgranska
• Varken bra på content creation eller site building, förhoppningsvis adekvat på båda.
• Svårt att implementera perfekt utan förstudier.

ACF Flexible Content Field

• Finns att köpa till ACF 4, ingår i ACF PRO.
• Låter dig sätta upp hela fria “sektioner” på sidan där man sedan kan använda valfria fält från ACF.

​

Resultatet

Resultatet

Resultatet

Integrera med ett tema

En enkel shortcode

Case: Aftonbladet Interaktiv

Story

• Utmaning: Komplext innehåll, men med krav på tydliga gränser i vad man kan göra.
• Implementerat med ACF Flexible Content.�Exempel:�khromov.se/ab-interaktiv

WordPress

+

ACF Flex. Content

​

​

​

​

​

​

​

Demo

Hur står sig lösningarna mot varandra?

Content Creation

Site Building

Shortcake

ACF Flex content

Visual Composer

Enkelt gränssnitt

Komplicerat gränssnitt

Fritt

Begränsat

Shortcake

ACF Flex Content

Visual Composer

Fler bra tips

• Skapa en admin bar-länk för att länka till hjälpen.�
• Lägg in hjälptexter direkt i dashboarden! Både när användaren loggar in och när användaren redigerar innehåll.

Fler bra tips

• Justera rättigheter efter vad användarna faktiskt behöver när de skapar eller bygger.�
• Skapa användarklasser med skräddarsydda behörigheter.

William Webbredaktör

Inga Innehållsansvarig

Sara Sajtbyggare

Avslutningsvis

• Fundera kring de användargrupper som ska använda sajterna ni bygger.
• Om ni är kravställare: Ställ krav utifrån den persona som passar er!
• Använd WordPress fantastiska ekosystem av tillägg!
• Att bygga gränssnitt blir aldrig lättare, det blir svårare.

WordPress-podden Avsnitt 1: Page builders

wpodd.se�

Wordcamp Stockholm, 22-23 November!

2016.stockholm.wordcamp.org��

Resurser

• Denna presentation: https://khromov.se/presentationer/granssnitt
• Shortcake: https://wordpress.org/plugins/shortcode-ui
• Shortcake Bakery: https://wordpress.org/plugins/shortcake-bakery/
• Visual Composer: https://vc.wpbakery.com/
• VC dokumentation: https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332
• ACF: https://www.advancedcustomfields.com/
• ACF Flexible Content-dokumentation:�https://www.advancedcustomfields.com/resources/flexible-content/��

Tack!

Frågor?

Om mig

Stanislav Khromov�WordPress-utvecklare på Aftonbladet

stanislav@khromov.se

@khromov

khromov.se

https://khromov.se/presentationer/granssnitt