Så blir du redaktörens bästa vän
Blogg

Så blir du redaktörens bästa vän

den 26 maj 2020

Det talas ofta tidigt i projekt om att den nya sajten ska vara tydlig och enkel för besökaren, att den ska vara snygg, snabb, skalbar, lastbalanserad, responsiv och att den såklart ska hamna högst upp på Google (oavsett vad man söker på). Men något som jag tycker också borde finnas med tidigt är användarupplevelsen för redaktören som ska arbeta i det nya CMS verktyget varje dag.

Genom att att välja Umbraco CMS i ditt nästa projekt så har du redan tagit ett aktivt val å redaktörens vägnar. Umbraco kallar sig själva för “redaktörens CMS” eftersom dom lägger mycket krut på just redaktörens upplevelse, men det finns ett par extra steg du kan ta för att lyfta upplevelsen ytterligare och jag tänkte här gå igenom några exempel.

Och vet du vad det bästa är? Många av dessa exempel är inbyggd funktionalitet i Umbraco som är så enkelt att aktivera att du gör det på bara ett par sekunder, oftast med bara en eller ett par knapptryck.

Ikoner och färger

Jag brukar säga att det svåraste som finns i Umbraco är att välja rätt ikon till sina innehållstyper. Inte för att det är krångligt, tvärtom, men för att det finns så otroligt många ikoner att välja emellan. Att de dessutom finns i flera olika färger gör ju inte saken enklare direkt. Men jag tycker att detta är något som man alltid bör göra med omsorg, för det gör allting så mycket trevligare och mer lättarbetat för redaktören som ska arbeta i gränssnittet hela dagarna att snabbt och enkelt kunna se skillnad på olika sidor.

Beskrivningar och hjälptexter

Kopplat till alla sidtyper och egenskaper så kan vi lägga in beskrivningar och hjälptexter. Dessa hjälpande texter är ett superbra komplement till allt vi implementerar för att göra det så enkelt och tydligt som vi bara kan för redaktören.

Ta en rubrik som exempel: Denna egenskap kanske kan tyckas vara självförklarande, men allt är inte alltid helt självklart. Som t.ex att rubriken kommer att agera H1:a på sajten, en viktig html-tagg för sökmotorer. Just av den anledningen så är det viktigt att rubriken korrelerar med resten av innehållet på sidan, inte är för lång eller kort för att kunna indexeras på bästa sätt. Det kanske också är så att denna rubrik inte bara visas på själva sidan utan också kommer visas i listningar på andra delar av sajten. Alla dessa faktorer kan vara lätt att missa för en ny redaktör eller någon som inte jobbar i systemet dagligen och då är hjälptexter ett jättebra komplement.

En tumregel man kan ha: du kan aldrig vara tydlig nog. 
Ingen har någonsin blivit upprörd över en ”för hjälpsam” hjälptext.

Bildbeskärning

Låt inte bara redaktören välja vilken bild som ska visas på sidan, låt redaktören bestämma exakt hur bilden ska se ut i alla olika format. I Umbraco finns det en inbyggd editor som heter Image Cropper som låter redaktören beskära sina bilder utifrån en fokuspunkt, sedan är det bara upp till oss att placera rätt beskärning på rätt ställe. Alla nya bilder beskärs automatiskt så oftast är detta ingenting redaktören ens behöver tänka på, men det är skönt att veta att möjligheten finns för redaktören att vara extra noga med vilken yta som är viktigast på en bild.

Specialanpassad inloggningssida

Det kan kanske verka som en liten grej, men jag tycker det är en trevlig gest att tidigt i projektet byta ut standard bakgrundsbilden på loginsidan mot en av kundens egna bilder. Det tar inte lång tid men det visar verkligen att du bryr dig om kunden och att detta inte bara är “ytterligare en sajt” för dig. Glöm sen inte att byta ut bilden med jämna mellanrum när du får lite tid över, så att redaktören får en trevlig överraskning nästa gång hen ska logga in i Umbraco.

Listvy

Eftersom stora mängder data sällan gör sig bra i trädstrukturen så finns det en inbyggd inställning i Umbraco som heter List Views. Genom att aktivera en List View så kommer undersidorna till en viss sida inte längre loopas ut i sidträdet, utan istället visas i en tabell på sidan. Denna tabellen kan du specialanpassa i oändlighet, som t.ex vilken sorteringsordning den ska ha som standard, vilka fält och kolumner som ska visas i vilken ordning osv. Redaktörer kan också själv klicka på den kolumn som hen önskar sortera på för stunden och får dessutom en inbyggd sökfunktion på köpet. 

Och det är inte allt, med hjälp av List Views så kan redaktören även markera flera noder och göra mass ändringar, vilket kan vara skönt om redaktören vill städa upp lite att inte behöva rensa eller flytta en sida åt gången.

Välj rätt verktyg för jobbet

Den primära funktionen för ett CMS är ju att spara innehållsrelaterad data som ska visas upp på sajten, och för att spara denna datan i Umbraco används något som heter Property Editors. Många olika Property Editors samlar samma sorts data fast på olika sätt så här är det viktigt att vi som utvecklare funderar kring varje enskilt fall och implementation. Vilken är den bästa Property Editorn för just det här jobbet? 

Ta nummervärden som ett exempel: Det är inte helt ovanligt att vi ibland kan behöva samla in nummervärden, säg t.ex att redaktören kan bestämma hur många nyheter som ska visas på startsidan. Det absolut enklaste sättet att göra det på hade kanske varit med ett helt vanligt textfält som bara tillåter siffror. Men ett ännu snyggare sätt kan vara att använda den inbyggda Slidern, och dessutom ange ett minsta och högsta värde samt vilka steg som går att välj (säg t.ex att du har en design för startsidan följer ett rutnät som gör sig bäst med 3, 6, 9 eller 12 nyheter).

Det här va bara ett exempel på hur olika Property Editors kan göra samma jobb. Umbraco kommer med en uppsjö av denna typen av inbyggda alternativ som vi som utvecklare kan välja och vraka emellan för att hitta just rätt Property Editor för jobbet. Så fundera en gång extra nästa gång du adderar en property till en av dina sidtyper.

Specialanpassad välkomstsida

By default när redaktören loggar in i Umbraco så möts användaren av en generell välkomstsida som lyfter fram Umbracos kringtjänster, utbildningar och blogginlägg men denna välkomstsida kan också specialanpassas efter kundens behov, något jag tycker fler borde känna till och utnyttja. 

Här är det bara fantasin som sätter gränser, men några exempel på bra sätt att använda välkomstsidan:

  • Visa statistik från Google Analytics för mest besökta sidor och sökord.

  • Senast skapade sidorna eller annat innehåll, vilka som skapade innehållet och när.

  • För en webbshop kan man t.ex lista senast inkomna ordrar, statistik över antal inkomna ordrar det senaste månaden/året, mest handlade produkter osv.

  • För ett intranät kan man lista dom senaste eller mest diskuterade sidorna och artiklarna, mest aktiva användarna osv.

...eller som vi gjorde i ett av våra senaste projekt: Eftersom kundens sajt har mycket användargenererat innehåll som dagligen behöver ses över, godkännas och publiceras innan det syns ute på webben så skapade vi den här välkomstsida som listar innehåll med relevant data med filtreringar efter kundens specifika önskemål samt ett par snabba actions som redaktören kan göra på innehållet direkt från listan. 

Vi skapade även en andra välkomstsida för denna kund för att snabbt och enkelt kunna exportera innehållet till antingen Excel och Word. Dessa vyer sparar kunden otroligt mycket tid varje dag, och det är precis så välkomstsidan ska utnyttjas på bästa sätt.

Summering

Som du märker så kan man med ganska små medel förbättra upplevelsen för redaktören avsevärt genom små genomtänkta val. De här var bara några exempel, det finns massa fler sätt att lyfta redaktörsupplevelsen än vad som nämns i det här inlägget. Kontakta oss om du veta mer om hur vi kan hjälpa just dig.