Interaktiv Prototyp

Vi har börjat arbeta på en interaktiv prototyp i Balsamiq. Vi bytte snabbt ifrån Pop, eftersom den ofta misslyckades med att uppfatta de kanterna vi ritat upp som separata knappar. Vi testade även Fluid UI, men vi upplevde att det fanns en hel del problem med det. Så för att inte spendera mer tid på att välja verktyg valde vi Balsamiq.

Det enda problemet som vi ser med Balsamiq är bristen på animationer, vilket gör att vi inte kommer kunna illustrera där man drar bort korten, vi får se om vi kan hitta någon väg runt det.

Vi har delat in prototypen i följande sidor:
Startsida:
Presenterar kort, ordningen på korten baseras på vilket kort som är "viktigast". Som vi nämnt tidigare är korten det centrala för vår designlösning. De ger en tydlig yta som kan presentera relevant information, det gör att de sidorna som använder de blir konsekventa. De har fördelen att de är inbjudande, i den bemärkelse att det är rätt tydligt att de kan flyttas.

Om korten mot förmodan inte skulle vara aktuella kan användaren klicka på meny-knappen i vänstra hörnet för att bli tagen till Menyn.

Meny:"Fälls" ut från vänstra sidan, och presenterar en lista med olika kategorier. Här finns även ett sökfält och möjlighet att ändra applikationens inställningar. Den här menyn har baserats på Facebook, i hopp om att den ska vara familjär för så många användare som möjligt. Vi tror att det kommer minimera tiden det tar för användare att lära sig använda just den här funktionaliteten.


Hotels:Om Hotell-kortets förslag inte är aktuella kan användaren välja att gå till denna meny.

Här presenteras nya kort, som representerar olika kategorier som närhet, budget och högst kvalité. Varje kategori visar två alternativ, som presenteras med namn, stjärnor (kvalitét) och avstånd.

Hotel-Details: Låter användaren se mer information om det valda hotellet.

Hotel-Book:En liten meny där användaren får ställa in alternativ för bokningen, och därefter boka ett hotellrum.

Hotel-Book-Confirmation:Pop-up som presenteras för att minimera risken att användaren gör fel.

Restaurants:I stort sett identisk med Hotels, med den enda egentliga skillnaden att stjärnorna är ersatta med dollartecken, som representerar prisklass.

Restaurant-Details:
-

Taxi: 
Låter användaren beställa en taxi. Destinationen kan antingen skrivas in, eller väljas från en interaktiv karta. Användaren kan också välja tid för bokningen.

Taxi-Book-Confirmation:
-

Wallet-History:Presenterar transaktionshistorik, och kontosaldo. Användaren kan välja vilken valuta som presenteras. Det finns också en knapp som leder vidare till Wallet-Adjust balance, där användaren kan lägga in nya utgifter, med en beskrivande kommentar. Användaren kan också uppdatera sitt saldo (om hen t ex tagit ut mer pengar).

Övning 3 - Design

Idag hade vi övning nummer 3 i ordningen. Under övningen började vi skissa på två prototyper till en applikation (app), en konventionell version och en "vild", som vi nu ska fortsätta jobba på under den kommande veckan. Arbetet gick bra och vi hade många bra idéer, och även om några av skisserna blev smått kaotiska fick vi alla en tydligare bild av vad vi vill åstadkomma med appen. Vi kommer att fortsätta arbeta på skisserna för att närma oss början till en prototyp, och till nästa övning ska vi även sammanfatta det vi vill göra i en kort presentation. För närvarande har vi lite arbete kvar att göra, men nedan kan ni se skisserna som vi gjorde under dagens övning.

"Vild" design:
Den första protypen (se bild 1, 3, 4) bygger på en designlösning där systemet har förmågan att "förutsäga" vilka funktioner du som användare vill använda. I det här fallet rör det sig om saker som att boka hotell, eller att hitta en restaurang. Den här applikationen ska baserat på var du är, och dina tidigare vanor ge dig information och möjlighet att t ex boka ett rum/bord.

Utöver den smarta funktionen bygger appen på vad vi inom gruppen har valt att kalla för kort. Korten är fyrkantiga, och står ut från bakgrunden, och innehåller den mest grundläggande informationen om något område. Om en användare vill ha mer information om det som står på kortet kan hen bara klicka på kortet för att flyttas till en mer utförlig meny. Om informationen däremot är ointressant, t ex om det översta kortet ger dig information om ett hotell när du redan har bokat, ska du kunna dra bort kortet ur huvudmenyn. Korten ska ge intrycket av att vara dynamiska och interaktiva objekt (affordance).

Denna dynamiska lösning gör att interaktionen till stor del består av konversation (systemet presenterar dig med information när du klickar på kort) och manipulation ("kastandet" av kort och scrollande). 

Konventionell design:I den här prototypen (se bild 2) låg fokus på att skapa ett menysystem, där användaren får navigera sig igenom olika kategorier för att utföra specifika handlingar. Det blev mycket diskussion om vilka kategorier som var viktigast och hur man skulle dela upp saker som vägbeskrivningar, kollektivtrafik och kartor.

Vi valde att försöka hålla oss konsekventa i vår design och låta menysystemet vara ett konstant inslag i designen, så att det alltid låg längst ner, och kunde användas för att antingen navigera tillbaka, eller längre ned i submenyer. Detta ledde till att interaktionen bestod nästan uteslutande av instruktion.

Sammanfattning:
Båda designlösningarna bygger på system som är konsekventa, förhoppningsvis lätta att lära sig, och framför allt att memorera. I den första designen bör detta vara väldigt lätt, givet att algoritmen på ett effektivt sätt kan förutsäga vad du är ute efter. Den första designen gör också den informationen som krävs för att användaren ska kunna utföra sina handlingar väldigt synlig. Korten har även fördelen att informationen kan presenteras, men användaren kan inte av misstag utföra någon handling som relaterar till kortet utan att först klicka sig "in" i kortet. Dvs, korten begränsar användarens möjlighet att göra misstag direkt i huvudmenyn.


Mer om våra ritfärdigheter i nästa inlägg!

/Hälsningar från en färgglad grupp F3