Huvudsidan (1):
Huvudsidan har runda knappar som leder till samtliga huvudsakliga funktioner i appen. Dessa innefattar “Sortering”, “Statistik” med mera. Beslutet med runda knappar togs med affordance-teori i baktanke, eftersom vi vill att användaren intuitivt ska förstå att det är något man ska klicka på. Med fitts's law som grund har vi gjort knapparna stora för användaren snabbare ska kunna klicka på dem och därmed uppfylla vårt effektivitetskrav. Knapparna fyller ut skärmen för att effektivt kunna använda sitt utrymme och har bättre synlighet enligt the visibility principle.
Kundvagns-symbol (se kundvagn-sektion nedan) används för att snabbt komma åt sin checkout (usability/färre klick). Denna knapp befinner sig alltid vid samma ställe och är därmed konsekvent, lättare att lära sig (learnability) och komma ihåg (memorability).
Knapparna har symboler för att det går snabbare att ta in informationen enligt visual perception teori.
Sorteringsida(2):
Denna sida har samma layout av samma anledningar som Huvudsidan (affordance m.m). Knapparna har specifika färger för enkel identifiering av kategorier (t.ex röd för farligt avfall), med rena färger där det går. Ett klick på en kategori lägger den direkt i kundvagnen utan att belasta användaren med fler val för att öka efficiency. Sökfunktion i toppen för objekt man inte vet kategorin för. Sökningen listar upp alternativ med kategorins färg som bakgrundsfärg, t.ex söker användaren efter bly så kommer sökresultatet ha röd bakgrundsfärg för att det är farligt avfall. Detta kan innebära att användaren lättare kommer ihåg vilken kategori ett objekt tillhör genom att komma ihåg färgen (memorability). Ett klick i listan lägger till objektet/kategorin i kundvagnen.
Håller användaren in en kategoriknapp så öppnas en lista med exempel på objekt som tillhör den kategorin(3). Denna funktion ökar effectiveness med minskad efficiency på samma sätt som sökningsfunktionen.
Klickar användaren på kundvagnen så öppnas Kundvagnssidan.
Kundvagnssidan(4):
Den övre delen av skärmen visar en karta med din position, närmaste återvinningsstation och en väg dit. Om materialen kräver mer än en station visar kartan den närmaste vägen mellan stationerna som uppfyller alla material.
Nedanför finns namnet och avståndet till stationen. Nedre delen av skärmen är en lista med alla materialkategorier med färgad bakgrund för konsekvent presentation. Ett "X" på högra sidan tar bort kategorin från listan och kartan samt vägen uppdateras vid behov.
Klickar man på en knapp på kartan kommer man får man fullskärmskarta(5).
Sidan har en minimalistiskt estetisk design utifrån de heuristiska användbarhetsprinciperna från Neilsen. Informationen som behövs för att uppfylla användarens mål (att hitta närmaste station för all material) presenteras och inte mycket annat.
Fullskärmskarta(5):
Kartan är zoombar och kan visa flera stationer för ökad effectiveness. Den nedre delen av kartan visar en lista med uppsättningar av stationer där användaren kan återvinna allt material i kundvagnen. Listan är sorterad efter kortast totaldistans. Det första resultatet som ska visas upp på kartan ska vara den kortaste vägen till de stationer som tillsammans kan återvinna allting i användarens kundvagn. Algoritmen kommer alltså att jämföra distanser mellan användarens nuvarande position och de närliggande stationerna och även använda distanserna mellan de olika stationerna om användaren behöver besöka flera stationer. Användaren kan välja den reseväg som passar de andra behöven användaren kan ha, t.ex åka till jobbet.
 |
| Intensiv diskussion i gruppen |