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).

Inför övning 4

Vi har idag skissat på den tredje iterationen av vårt designförslag, den iteration som skall utvärderas under övningen på onsdag (27/2). Under skissen hade vi många diskussioner om olika design/tekniska-lösningar, nedan följer en kort lista med några av idéerna som diskussionen genererade:  

• Vi ska ha en "Book Now"-knapp för trötta affärsresande i enlighet med våra personas. Meningen med denna är att göra alternativ för bokning av hotell och restauranger mer lättillgänglig.

• Förslag på restauranger, hotell, osv. visar alla avståndet och antal stjärnor/prisklass i mindre text under namnet. Betyg/prisklass visas först och sedan avståndet i meter. Detta är ett mönster som vi använder för att befästa en grund som designen kan vila på i ett försök att vara konsekventa i den övergripande designidéen.
• Avståndet och betyg/prisklass har fasta bredder så att de finns på samma plats på varje rad. Detta underlättar för användare som snabbt vill "scanna" av listan. Under listan med hotell visas betyg först då vi ansåg att det är mest relevant vid valet av hotell.
• Vi hade en knapp som tidigare hette "Alternatives" som skulle visa fler alternativ inom en given kategori. Dock kom vi fram till att den borde heta "More hotels" istället, då detta är en mer pricksäker benämning på den funktion om knappen möjliggör.
  
  Den här observationen kom nog som en följd av Gulans inledande föreläsning, där han gav många exempel på oklara menyer som kunde missförstås av användaren.
• Vad vill användarna ha? Vår huvudsida består av olika delar som vi kallar "kort". Dessa ska se ut som lådor för att upplevas som mer tillfälliga element i listan, tanken är att användaren ska kunna dra bort de kort som inte upplevs som relevanta för stunden. Appen ska även arbeta förutsägande för att underlätta i vardagen. Med detta menas att appen ska försöka förutse vad användaren kan tänkas behöva näst, och tillhandahålla lösningar på dessa behov genom att presentera olika kort på huvudsidan. Till exempel är det lämpligt att ha ett kort med närliggande restauranger vid lunchtid, eller en valutaräknare när användaren är ute och rör sig på stan.
• Vi överväger att implementera kort för att hålla koll på inköp, men avstår från det för tillfället för att inte göra projektet för spretigt. Dock finns det stora möjligheter att bygga på appen med ytterligare funktionalitet, detta är en möjlighet som vi lämnar öppen i den fortsätta utvecklingen av appen.
• Vi ska även ha en huvudmeny som går att nå via huvudsidan, där ska det vara möjligt att direkt nå alla funktioner som appen tillhandahåller. 

Det här är några av våra idéer som vi vill förverkliga med vår prototyp. I slutet av det här inläggen följer lite bilder från våra verkliga skisser av appen. Vi har även börjat använda en iPhone app som heter "POP" för att översätta våra skisser till en riktig prototyp. 

Det får räcka med info för idag! Fler uppdateringen kommer efter övningen på onsdag.

/Hälsningar från en "POP"-ande grupp F3!