Bygg av prototyp 2

Ytterligare ändring och förbättring av prototypen har gjorts efter ett möte. Jag fokuserade på materialsidan, inställningsfunktionen, bakgrund och laddningsida, medan Haris fokuserade på kartan och logiken för den dynamiska listan.

Design:
Fokus har legat på material design med tydliga simpla färger och en känsla av materiella egenskaper. I t.ex. designen av knappar finns det ett flertal faktorer för att göra användarupplevelsen så bra som möjligt genom feedback enligt riktlinjer för material design. Varje enskild knapp har bl.a.:

• Tydligt skilda färger som konsekvent används med det materialet i appen.
• En symbol som representerar materialet. Symbolerna har valts med noggrannhet för intuitivt förståelse av materialet. Tillsammans med färgen ger de en omedelbar koppling till ett material utan att behöva läsa text.
• Materialnamnet under symbolen för att man utan tvekan ska kunna veta vad knappen är för material.
• Symbolen och materialnamnet är i vitt med en suddig skugga för stil och en tydlig kontrast till bakgrundsfärgen till knappen.
• Suddig bakgrundskugga av knappen för att distinkt höja den från bakgrunden och göra den mer likt en fysisk knapp.
• Vid intryckt knapp höjs gråskalan för färgen medan symbolen och texten blir gråmarkerad. Detta för att tydligt visa att knappen är vald men ändå har kvar en viss del färg för visuell identifikation.
• Den intryckta färgen förlorar sin bakrundskugga. Detta för ge känslan av ett intryckt föremål samt att mer visuellt skilja den intryckta knappen åt de resterande ointryckta knapparna.
• Vid interaktion med knappen blir det en suddig vit kontur runt knappen, nästan som en vit glöd. Detta förbättrar feedback och användarupplevelsen vid användning av knappen, speciellt när man håller in den.

Detta är endast knapparna och är bara en del av förbättring till designen av appen som gjordes. Prototypen kommer fortsätta uppdateras kontinuerligt.

Prototyplänk som uppdateras: https://share.proto.io/8TH8B5/

Datum: 2017-04-27
Tid: 10:30-18:00
Närvarande: Richard, Haris

Bygg av prototyp

Efter att ha undersökt olika prototypverktyg har vi bestämt oss för att använda proto.io.
Efter vår presentation inför D-gruppen samt feedback från think-aloud har en del designändringar gjorts.

• Den ursprungliga huvudsidan tagits bort. Appen startar från materialväljningssidan.
• Efter att ha valt ett material blir knapparna tydligt gråa.
• Checkout/papperskorgen har tagits bort.
• En tydlig "nästa-knapp" finns under i botten av materialsidan för att gå vidare till kartan.
• En menyikon som öppnar en lista med eventuella inställningar.
• När användaren har valt material och anländer till återvinningsstationen finns möjligheten att posta informationen till social media. Den funktionaliteten ska kunna stängas av.

Ett av våra krav var att appen skulle vara så efficient som möjligt vilket vi definierade som att man ska kunna uppnå sitt mål med appen genom så få handlingar som möjligt, d.v.s. i detta fall med så få klick som möjligt. Genom att ta bort den föregående huvudsidan kan man börja sortera direkt.
Eftersom inställningar låg på den förra huvudsidan har den istället flyttats till en ikon som öppnar en lista. Genom en ändring av checkout/papperkorg till en tydlig nästa-knapp förbättras förhoppningsvis användarens workflow med minskad förvirring om hur man fortsätter till nästa steg. Checkout idén blev överflödig då antalet olika funktionaliteter är begränsad och därmed nödvändigheten med en central checkout.

Prototyplänk som uppdateras: https://share.proto.io/8TH8B5/

Datum: 2017-04-21
Tid: 10:00-17:30
Närvarande: Richard, Haris

Think Aloud - Richard Liu

Förberedelse:

Inför think aloud utvärderingen bad jag min användare hitta närmaste återvinningsstation för att sortera trä och metall. Användaren fick sedan frihet att klicka runt i prototypen och försöka förstå dess funktionaliteter.

Resultat:

Användare tyckte det var oklart hur man går vidare efter man har valt material. Efter lite trial and error testade användaren sig fram till papperskorgen.

På den stora fullskärmskartan med flera stationer önskade sig användaren att kunna välja en station manuellt, även om den är längre bort.

Kommentar:

Papperskorgen är nog den mest kontroversiella designen i projektet. Dock måste idén implementeras bättre eller ändras då det är uppenbart att användare har svårigheter med konceptet. Den stannar ens workflow när man inte kommer vidare efter materialsidan.

Funktionalitet med att kunna välja sin station är något som vi kan implementera. En sådan funktion ökar inte komplexiteten, utan effektiviteten.

Think Aloud - Anton Täcklind

Jag bad min användare att försöka tänka sig in i en situation där användaren blivit rekommenderad appen utan större introduktion och användaren behövde återvinna en del trä och metall. Jag gav exempel som ett ikeabord eller en hög plank och ett par spikar.

Användaren intuitivt förstod sig på knapparna vi hade designat, men insåg inte att knapparna i Återvinningsskärmen användes för att markera material. Användaren antog istället att knapparna skulle visa listor över material relaterade till ämnet. När användaren tänkte sig fram till att knapparna blev "valda" vid tryck försökte användaren nå kartan genom huvudmenyn utan bra resultat, eftersom kartan då inte får någon väg eller materialval.

I retrospekt trodde användaren att papperskorgen (som egentligen ska ta användaren till kartan när alla val hade gjorts) var relaterad till sökningsfältet. När användaren blev introducerad till alla funktionallitet noterade användaren att den slutgiltiga kartan borde kunna importeras till en GPS-applikation.

Think Aloud Haris Poljo

 

Utfördes med en person i 20 års åldern som inte hört eller sett något om appen förut

 

Användaren blev till sagd att hitta närmaste återvinningsstation där man kan sorterar både trä och metall.

Användaren började på hemskärmen och valde sedan att trycka kart knappen vilket sedan ledde till att han insåg att han hade kommit fel. Användaren tryckte bak knappen och sa att sorteringsknappen inte var tydlig med vad den gjorde. Personen tryckte sedan sorterings knappen. Han valde sedan att trycka på trä och metall knappen. För att fortsätta tryckte han på sök knappen vilket inte funkade då man måste trycka på soptunnan för att kunna komma vidare. Förvirringen var en följd av att han trodde att man raderade sina val genom att trycka på knappen.

Eftertanke

Soptunna ikonen måste bytas till något som är mer tydligare till exempel kanske texten ”nästa” som känns mer intuitivt  så att användarens workflow inte blir störd. En soptunna brukar användas för att radera sina val så det var en dålig designval från vårat håll då det skapade förvirring.

Think Aloud - Gruppsammanfattaning

Av våran Think Aloud evaluering så var det vissa punkter som vi genomgående fick kommentarer på i våran prototyp:

• Att använda en papperskorg som knapp för komma till kartan är inte intuitivt. Det försökspersonerna kommenterade var att de trodde att papperskorgen skulle ta bort deras val snarare än att ta sig vidare till kartan.
• Det var inte intuitivt att man kunde välja flera saker att sortera samtidigt.
• Sättet vi visade att ett material hade blivit valt var inte tydligt nog. En grå ring visar inte starkt nog att man har valt något och det visades inte någon annanstans att man har valt saker att återvinna.
• Användarna vill kunna välja station på kartan, något som vi inte hade implementerat i våran prototyp.

Vad vi har diskuterat att ändra och inkludera utefter vår Think Aloud evaluering:

• Byt ut papperskorgen till något mer intuitivt och tydligt så att folk enklare kan förstå att man kommer vidare till kartan. Ett förslag var att sätta en återvinningssymbol på papperskorgen eller att byta ikon till en karta som lyser upp när man gjort ett eller flera val.
• Vi ska förtydliga responsen när man valt ett eller flera objekt att återvinna. Både genom att knappen för varje material förändras på ett tydligare sätt samt även att papperskorgen/kart-knappen ska vara dynamisk så att man lättare ser att man kan gå vidare.
• Se till att kartan är interaktiv så att man själv kan välja station man slänger på. Det är något vi redan planerade på att göra och det blev bekräftat som en bra ide då användarna frågade efter den funktionen.

Think aloud - Emil Abrahamsson

En användare fick i uppgift att sortera trä och metall, samt hitta närmaste vägen till sorteringsstationen.
Följande händelseförlopp var användarens tankar under användandet, ett så kallat Think aloud protocol.


Användaren tänker att det finns tre knappar som har  kryptiska namn (Wip, WIp och WiP).
Användaren klickar på sortering.
Hen vill sortera trä och metall, börjar med metall.
Upplever att ingenting hände.
Klickar trä.
Klickar soptunna och uppföljs av ett uppenbarande "jaha okej, där förstår jag"
Får upp karta.
Antar att kartans markörer är vart man kan sortera trä och metall.

Färdig.



Eftertankar;
Symbolen av en soptunna kändes svårtolkad.
Förstod inte uppgiften och visste inte vad appen skulle användas till, men om hen visste vad syftet var tror användaren att hen hittat dit ganska lätt. Klicka på sortering är uppenbart, soptunnan anser användaren kan ha text vid sig. Soptunna förknippas med deleteknapp men råkade bli rätt knapp eftersom inget annat alternativ fanns, egentligen trodde hen att något skulle försvinna.

Analys:
De kryptiska namnen var endast där eftersom prototypen ej var färdigställd, med andra ord kan vi avfärda den feedbacken.
Vägen till att uppfylla målet var kort och inte allt för krånglig, den största motgången var soptunnan som upplevdes vara otydlig. Användaren upplevde att ingenting hände när hen tryckte på metall, medan verkligheten var att knappen fick en grå ring omkring sig. Vi kan från detta dra slutsatsen att den gråa ringen behöver vara större eller ersättas med något som tydligt visar på att användaren har lagt i materialet i soptunnan, exempelvis ett X över symbolen.

Think Aloud - Ruwaid Louis

Think Aloud Ruwaid Louis

En Think Aloud evaluering är när någon person ska genomföra vissa uppgifter med en prototyp och samtidigt säger det som kommer i tanken, såsom förväntningar, frågor, åsikter eller hur de går tillväga.

Jag gjorde en think aloud evaluering med min syster, någon som jag tycker passar väl inom vår målgrupp. Den interaktiva prototypen, appen, var gjord med hjälp av Invision. Jag gav henne en kort introduktion om våran app och vårt mål med appen. Jag förklarade hur en think aloud går till och att hon kunde kommentera på vad hon ville. Jag gav henne därefter några uppgifter att utföra och försökte dokumentera det jag fick fram.

Hitta närmaste återvinningsstation

Från hemskärmen antog hon att "Kartor" skulle ge henne en karta med alla återvinningsstationer i hennes närhet. Hon tyckte om att man kunde se hur långt det var till de närmaste stationerna och att de var rankade men tyckte inte om färgen på de. 

Hitta närmaste återvinningsstation som sorterar både trä och metall 

Från hemskärmen valde hon "Sortering" och därefter kommenterade hon att hon inte riktigt förstod vad hon skulle göra efter. Därefter trodde hon att "Trä" skulle ta henne till en lista som listade föremål som var gjorda av trä vilket hon kunde välja av. Men hon kom på att man endast ska välja vilka material man vill sortera och valde "Trä" och "Metall". Därefter var det en förvirring över kring hur hon ska gå vidare. "Checkout" knappen, som skulle ta henne vidare till kartan, trodde hon skulle rensa hennes val.