Workshop II (1IK419) jp222px (Johnny Pesola) sid. 1 av 5

Transkript

1 Workshop II (1IK419) jp222px (Johnny Pesola) sid. 1 av 5 Steg 1.1 Sammanfattningen av diskussionen är att strukturen på en sida bör vara till största del i balans, symmetrisk, reguljär, förutsägbar och enkel för läsbarhetens skull. Men att det behövs något instabilt, irreguljärt och spontant som krydda när allt blir lite för tråkigt. Steg 1.2 Överordnad struktur analys av eget gränssnitt Menyn är jämfört med sidan innehåll assymetrisk. Innehållet är till största del symmetrisk med inslag av assymentriska/ irregulära och några små spontana element. Som till exempel valideringsnotifikationerna när man i formulär redigerar eller skapar nya objekt. Sök och skapa formulären är väldigt spontana jämfört med resterande delar av sidan. Strukturen kan vara något förvirrande, eftersom den varierar så grovt emellan just sök/skapa formulären och resterande delar av gränssnittet. Men detta skapar samtidigt spänning. Kanske kan strukturen göras mer lik resterande delar av sidan i dessa formulär.

2 Workshop II (1IK419) jp222px (Johnny Pesola) sid. 2 av 5 Steg 1.3 Överordnad struktur analys av andras gränssnitt Det upplevdes förvirrande med PLUSSET / Lägg till funktionalitet på två olika ställen med olika gränssnitt. Menyn jämfört med innehållet är assymetrisk, lika så med placering av undermenyer i förhållande till huvudmenyer. Detta kan göras mer symmetriskt. Sidinnehållet kan vara centrerat istället för vänstersällt. Antalet huvudmenyer kan begränsas i antal om man väljer att lägga vissa huvudmenyer som undermenyer i andra huvudmenyer. Steg 2.1 Detaljer analys av FUNKTIONELLA detaljer i eget gränssnitt I sök och skapa formulären så kan de klickbara rutorna ersättas med en select/dropdown istället. Det är rörigt och något svårtläst på det sätt som det är nu. På listsidorna så kan kugghjulet vara något förvirrande. Kanske skulle detta kunna göras till en select/dropdown istället för att förtydliga, dock skulle det inte vara lika estetiskt tilltalande som det är nu. Ett annat alternativ vore att lägga ut knapparna direkt i tabellen som en egen cell, men detta skulle stjäla värdefull bredd i tabellen och i framtiden så skulle det säkerligen komma till fler knappar som tar upp ytterligare utrymme.

3 Workshop II (1IK419) jp222px (Johnny Pesola) sid. 3 av 5 Steg 2.2 Detaljer analys av FUNKTIONELLA detaljer i andras gränssnitt Till och med datum är inte ett datum typ fält i sök-formuläret Fälten gällande datum är inte datumfält i skapa-formuläret. Flytta sökfunktionalitet ifrån huvudmenyn till undermenyer eller sidor istället. Steg 3.1 Detaljer analys av ESTETISKA detaljer i eget gränssnitt Val av färger känns till största del bra. Mycket svar vitt och ljusgrått och några starka färger för att belysa funktionalitet eller viktig information. När det gäller tydlighet finns förbättringar att göra för de klickbara ikonerna i sidhuvudet för sidinnehållet. Att när man klickat på den sådan så ska ikonen bli markerad, så att man förstår att man befinner sig på dessa sidor. Kanske markeras detta med den orangegula färgen som används på andra delar av sidan för att markera detta. En annan sak som är otydlig är när man befinner sig i formulären för att skapa saker, eller söka efter saker och ska avbryta detta. Krysset gömmer sig i samma knapp som får upp själva formuläret från början, vilket inte är så lätt att uppmärksamma.

4 Workshop II (1IK419) jp222px (Johnny Pesola) sid. 4 av 5 Steg 3.2 Detaljer analys av ESTETISKA detaljer i andras gränssnitt Logga ut knappen är otydlig. Skulle vara bättre med en siluett av en gubbe istället. De små ikonerna när man klickar på kugghjulet samt ikonerna i sidhuvudet för sidinnehållet är otydliga. Hover text eller title attribut kanske skulle förtydliga på dessa för att visa text om vad knapparna faktiskt gör. Sidinnehållet är inte enhetligt vad det gäller centrerad eller vänsterjusterad innehåll. Skulle eventuellt vara bättre att centrera huvudmenyer, undermenyer och sidinnehållet. En ny huvudmeny för rapporter, statistik. När man klicka på kugghjulsmenyn så finns det en liten pil till vänster om menyn som dyker upp. Denna är förvirrande och kan tas bort. Knappar på olika delar av sidan har olika storlek. Kanske skulle de anpassas till att ha samma storlek för en mer enhetlig upplevelse. Steg 4.2 Användbarhet analys av eget gränssnitt Det största problemet användarbarhetsmässigt enligt mig själv är de två stora svarta formulären för att söka efter och för att skapa information. Dessa går emot hela sidans upplägg och kan visst till vis del uppfattas som roliga att använda men är väldigt otydliga och skapar förvirring i förhållande till resten av sidans utformning. Bättre vore att istället skapa en dropdown menyer under sök och skapa ikonerna ikonen i huvudmenyn där man får ange vilken typ av objekt det gäller, för att sedan länka till en skapa sida för just den typen av objekt. På detta sätt blir det mer enhetligt, samt att användaren slipper hålla reda på två separata formulär för att skapa objekt. Steg 4.3 Användbarhet analys av andras gränssnitt Flytta användarhuvudmenyn som en undermeny till den nya logga ut ikonen, vilket man gör till en dropdown meny. Där finns det även en undermeny för användarspecifika inställningar, samt en logga ut undermeny. Försöka banta ner antalet huvudmenyer så att användare inte känner sig besvärade av det nuvarande antalet. Skapa knappar i sidinnehållet sidhuvud för sökfunktionalitetet istället för sidhuvudet.

5 Workshop II (1IK419) jp222px (Johnny Pesola) sid. 5 av 5 Reflektion Under processen med checklistor så fick jag förslag på struktur, andra typer av element som lämpar sig bättre för mitt gränssnitt samt formgivning på ett sätt som jag inte skulle komma på själv. Mest förändringar ligger i själva strukturen, antagligen för det är så pass mycket information som det slutgiltiga gränssnittet ska presentera för användaren, utan att det ska kännas som att det blir för mycket. Personligen tycker jag också att checklistorna för struktur och användarbarhet gav mig mest bra feedback för förändringar. Som ett helt paket så täckte checklistorna upp genomgången av gränssnittet ganska bra, dock var det lätt att komma på nya strukturmässiga förändringar i de andra stegen i efterhand som man hade missat att ta upp före. Men det får man ju se som en del i processen för en bättre slutstruktur. Vi hade nog kunnat prata på flera timmar om förbättringar i varandras gränssnitt för att få finslipade slutprodukter, men tiden räckte inte riktigt till. Kanske skulle ett extra steg som går igenom val av språk eller text komplettera de andra stegen på ett bra sätt eftersom de andra stegen till största del fokuserar på färg, form och layout. Denna arbetsmetod ger en kontrollerad form av feedback till ens gränssnitt utan att fokusera alldeles för mycket på en specifik detalj. Därför så tycker jag att man får en bred täckningsgrad på förbättringar som man kan välja att genomföra. Många av de förslag på förändringar var så pass bra att jag idag har genomfört dessa.