Settings Editor

Vad är det?

En Settings Editor kan framträda antingen som en egen sida eller som ett fönster. I en Settings Editor kan användaren ändra inställningar, egenskaper eller göra andra olika tillval. Den ska vara lätt att hitta och förstå samt vara självständig från övrigt innehåll. Ofta används en kugghjulsikon för inställningarna.

En Settings Editor är inte bara till för att användaren ska kunna ändra inställningar, utan finns även till för att användaren enkelt ska kunna se vilka befintliga inställningar som finns. Om den innefattar mycket information kan innehållet fördelas över flera sidor eller flikar. Det är då viktigt att de olika inställningarna är kategoriserade och namngivna på ett bra och genomtänkt sätt som gör det lätt för användaren att navigera och hitta rätt information. I och med det ökade användandet av smartphones i många olika sammanhang har det blivit allt viktigare att anpassa även Settings Editors till mindre skärmar.

När används det?

Gränssnittsmönstret för Settings Editor används vid design av applikationer, verktyg etc. som skall innehålla en eller flera av följande funktioner:

Systemövergripande inställningar
- Detta gäller för alla typer av applikationer, operativsystem, verktyg och plattformar.
Login – möjligheten att skapa och använda sig av ett konto
- Dessa konton bör ha möjligheten att redigeras via en Settings Editor
Skapande och redigering av komplexa arbetsprodukter
- Detta gäller för skapandet av t.ex. dokument eller andra komplexa objekt där användaren kan komma att behöva ändra dess egenskaper.
Produktkonfiguration
- Anpassning av produkter online. (Detta tillhör egentligen ett annat gränssnittsmönstret med andra krav och begränsningar)

En Settings Editor kan användas och navigeras på flera olika sätt beroende på sammanhang: genom en mus på en dator, en touch screen på en mobil eller tablet, eller via en joystick kopplad till en skärm. Alla dessa olika användningssätt skapar olika förutsättningar för hur Settings Editorn utformas på bästa sätt.

Hur används det?

När man ska skapa en Settings Editor är det bästa att placera funktionen där användaren hittar den. Det flesta tjänster brukar ha en standardplats för dessa inställningar. Vilket oftast är i det övre vänstra eller högra hörnet. Det är viktigt att hålla sig till dessa standarder för att inte förvirra användaren.

När användaren har hittat Settings Editor är det viktigt att hen hittar det den söker på ett enkelt sätt. Detta görs genom att kategorisera upp innehållet i grupper. Oftast brukar innehållet inte få plats på en sida och kräver då hierarki med olika nivåer. Döp dessa grupper till tydliga och kända namn för att ge användaren överblick på innehållet. Det är viktigt att hen når sitt mål med så få knapptryck som möjligt. Därmed behöver man bestämma hur dessa grupperingar och hierarki ska visas. Det vanligaste sättet för Settings Editor är enligt Tidwells (2011), Tabs (flikar man kan välja emellan), Two-Panel Selector (en ruta/fönster med två paneler, kategorier och kategoriernas innehåll) och One-Window Drilldown (en lista eller meny med all information i ett fönster/ruta, valt objekt från listan visas i fönstret och ersätter sidan med alla objekt).

Innehållet i dessa grupper är också viktigt att man presenter så att användaren får en överblick av inställningarna. Settings Editor används inte bara till att gå in och ändra något utan kan lika gärna vara för att se vilka dessa är. Oavsett om hen ska ändra något eller bara se över sina inställningar är det också bra att fundera på om användaren ska erbjudas en spara eller avbryta knapp, eller om ändringens som görs ska tillämpas direkt. Detta kan variera beroende på Settings Editor hävdar Tidwells (2011) och har ingen större påverkan på användarvänligheten. Han förklarar att det man kan se är att platform övergripande inställningar verkar tillämpas omedelbart när de ändras medan inställningar på webbplatser använder oftast spara-knappar och när det gäller applikationsinställningar ser man båda varianterna.

Eget exempel

I vårt exempel demonstreras Settings Editor för en webbshops mobiltjänst. Demon är utformad att allt som inte har med Settings Editor är illustrerad som en mockup. Detta för att demon ska tydliggöra Settings Editor och inget annat. För att hitta funktionen trycker användaren på profilsymbolen. Då hamnar hen på sin profilsida där användaren kan trycka på inställningarsymbolen (kugghjulet) för att komma till tjänstens Settings Editor. Placeringen och utformningen på dessa symboler är baserad på hur de flesta tjänster brukar göra, för att på bästa sätt skapa en igenkänning för användaren. Vilket brukar vara att menyraden är längst ned och inställningsymbolen i det högra hörnet.

För att göra det lättare för användaren att få en överblick på webbshoppens Settings Editor är innehållet uppdelat i kategorier och hierarkier. I detta exempel visas de vanligaste kategorierna som brukar finnas för en Settings Editor. För att navigera sig mellan dessa inställningar trycker användaren på pilarna i höjd med kategorierna och de som är högst upp i högra hörnet. Om man känner sig klar med sina inställningar kan användaren när som helst komma tillbaka till startsidan genom att navigera sig med menyraden längst ned. Denna meny följer med vart man än är på webbshopen.

Under inställningssidorna kan man redigera sitt innehåll genom att antingen ändra i texten eller bocka i eller ur en ruta. Om man som användare har ändrat sitt innehåll i Settings Editor finns det en knapp “Spara ändring” längst ned på varje inställningssida. När hen trycker på knappen uppdateras sidan genom att förflytta användaren längst upp på sidan och sedan bekräftas detta genom en ruta med texten ”Uppdaterad!” visas. Det gör det tydligt för användaren att ändringen av innehållet är sparat.

För att komma till demon tryck HÄR!

Bra exempel

Snapchat

Snapchat (2019) är applikationen som gör det möjligt för dig att skicka bilder och videos till dina nära vänner. Snapchat har sett till att användaren snabbt och enkelt kan ta sig till applikationens inställningar. Genom att användaren klickar på sin profil så kommer den genast till sin profilsida och kan därmed klicka på kugghjulet högst upp i det högra hörnet. Kugghjulet är en bekant symbol för inställningar och enligt Tidwell (2011) är placeringen av kugghjulet idealt för att användaren enkelt ska kunna navigera sig fram till den. Snapchat har även delat in sina inställningar i kategorier där man som användare ser vad för information man skrivit in sen tidigare bredvid rubriken. Detta är enligt Tidwell (2011) ett bra sätt att strukturera sina inställningar på så att det blir tydligt för användaren att ta del av informationen utan att behöva klicka på rubriken. Om det finns inställningar användaren inte fyllt i markeras dessa med rött för att göra det tydligt för användaren vad som behöver fyllas i. Snapchats inställningar utgår ifrån en One-Window Drilldown som i sin tur öppnar ett nytt fönster. Då applikationen inte har så många inställningar fungerar det bra med One-Window Drilldown.

Pinterest (2019) är tjänsten som låter dig spara och organisera bilder du tycker om via digitala anslagstavlor. Vilken sida du än befinner dig på har Pinterest sett till att användaren har enkel och ständig tillgång till tjänstens inställningar. Genom att klicka på meny-symbolen högst upp i högra hörnet kan användaren enkelt klicka sig vidare till: redigera inställningar. Här har användaren direkt tillgång till sin användarprofil och kan sedan klicka sig vidare till övriga inställningar. Enligt Tidwells (2011) riktlinjer uppfyller även Pinterest ett gott förhållningssätt till placering av hamburgaremenyn, enkel tillgång oberoende vilken sida du befinner dig på, kategoriserade inställningar under inställningsmenyn med en Two-Panel Selector och relevanta huvudrubriker för tjänsten. Settings Editorn visar också ikoner i kombination med text och gör det enligt Tidwell (2011) enklare för användaren att uppfatta de olika inställningarna.

Twitter

Twitter har en lätthittad sida för inställningar där man kan komma åt inställningar som kontoinställningar, säkerhetsinställningar och dataanvändningsinställningar. Sättet de har delat upp innehållet underlättar för när man snabbt vill hitta en specifik inställning. Man kan även lätt gå fram och tillbaka mellan de olika inställningarna om man skulle råkat klicka sig in på fel.

Dåliga exempel

SoundCloud

SoundCloud (2019) som är världens största plattform för musikinspelningar, har inte en jättebra Settings Editor. Användaren hittar inställningar precis som på Pinterest genom att klicka på meny-symbolen högst upp i det högra hörnet och sedan på knappen Inställningar som användaren hittar näst längst ner i listan. När användaren klickar på knappen kommer den till tjänstens inställningar. Inställningsmenyn består av flikar men gränssnittet ser ut och beter sig olika under varje flik. Det finns inget tydligt mönster i hur man ändrar sina inställningar och dessutom är huvudrubrikerna på inställningsmenyn inte beskrivande för vad som finns under varje rubrik. Under exempelvis rubriken Innehåll hittar man endast inställningar till att dela sina uppladdade filer till ett RSS-flöde för att möjliggöra prenumeration i podcasting-appar.

Det finns heller ingen flik för att användaren ska kunna ändra sina profilinställningar. Profilinställningarna hittas istället under användarens personliga profil där det finns en knapp som heter Redigera. Det står inte vad det är som ska redigeras förrän användaren har tryckt på knappen och kommit vidare till sina profilinställningar. En enklare lösningen hade istället varit att flytta RSS-flödet till fliken Annonsering och fliken Innehåll hade istället kunnat bytas ut till Profilinställningar för att enligt Tidwell (2011) samla alla inställningsfunktioner på en plats för att få en bättre översikt och enklare kunna ändra inställningar.

MyMoodle

I MyMoodle går det att ändra inställningar för användaren som är inloggad men det är inte helt effektivt eller lättförståeligt. Webbplatsen presenterar en lista med inställningar och kategorier där man kan klicka på varje ämne. Dock är det lätt att uppfatta att varje knapp eller länk kommer att visa inställningarna för klickat ämne som en drop down-funktion under knappen då pilarna ser ut att kunna expandera något. Istället fungerar det så att varje knapp tar besökaren till en annan sida. Det är därför svårt att leta rätt inställning på ett snabbt sätt. Om man bara vill veta vad som är under till exempel ‘Inställningar för forum’ så måste man ladda in en ny sida.

I slutändan skiljer sig också varje del av inställningarna i presentation. Här ovan ser vi ‘Inställningar för meddelande’ som visar ett popup-fönster. Värt att notera är också att det inte finns någon för att spara eller bekräfta ändringar. På olika sektioner presenterar man materialet annorlunda vilket kan uppfattas som att man lämnar inställningarna. Konsekvent presentation är viktigt för att ge en känsla av samhörande funktioner.

PingPong

Det finns ingen generell sida för inställningar utan varje ruta har en egen inställningsknapp för vad rutan ska visa. Den grafiska formen påverkar också att intrycket blir rörigt, med de mörkgröna borderna upptill i varje block som drar åt sig all uppmärksamhet.

Fler exempel

För fler bra och dåliga exempel tryck HÄR!

Källor och länktips

MyMoodle (2019).
MyMoodle

PingPong (2019). Webbplats för vårdnadshavare i Borås kommun, enbart åtkomlig från inloggat läge. https://www.boras.se/utbildningochforskola/larplattformenpingpong.4.1bf797ef1589280df2c1417a.html

Pinterest (2019). Allt om Pinterest.
https://help.pinterest.com/sv/guide/all-about-pinterest [2019-11-15]

SnapChat (2019). Snap Inc.
https://www.snap.com/sv-SE [2019-11-17]

Sound Cloud (2019). Om Soundcloud.
https://soundcloud.com/pages/contact [2019-11-15]

Society6 (2019) About Society6
https://society6.com/about [2019-11-15]

Tidwell, J. (2011) Designing interfaces. Second edition. Sebastopol, CA: O´Reilly Media, Inc.

Twitter (2019).
Twitter.com