Gränssnittsskisser på hemsidan

Under dagens träff byggdes hemsideprototyper i bitar som lades ihop för att få en känsla för hur hemsidan bäst skulle byggas upp.



Det här är versionen som en oinloggad användare möts av. Den innehåller i stort sett samma saker som den inloggade sidan, förutom fliksystemet. Som icke inloggad användare ser du inte t ex veckoplaneringar eller statistik över din kosthållning eftersom det inte finns någon användare att lagra informationen hos.



Det här är en skiss på den inloggade versionen. Längst upp till höger finns en inloggningsruta brevid hemsidans logotyp. Sedan följer en flikrad med några olika sidor som de inloggade användarna får tillgång till, som planering och statistik.

Möte den 17:e september

Arbetet med designutkasten har börjat gå igång på allvar, och inför dagens fortsatta arbete bestämde vi oss för att byta medlemmar i designgrupperna. För att behålla någon form av kontinuitet i arbetet är en person i respektive grupp kvar och agerar tankeankare, där Johan och Erika agerar ankare i hemsidagruppen respektive mobilgruppen.

Gruppen diskuterade några svårigheter man stött på under ritandet, där framförallt djupet i vyerna på mobilapplikationen och vart viss funktionalitet ska finnas (i mobilen eller på hemsidan, eller alls etc) har varit problematiska. På grund av detta bestämde vi oss för att göra en LoFi-prototyp i början av nästa vecka, så att upplägg och idéer lättare kan testas och modifieras.

Skulle arbetet med LoFi-prototyperna gå smidigt och snabbt är tanken att arbetet med en HiFi-prototyp kan påbörjas i slutet av nästa vecka.

Bilder på dagens skissande

Dagens skissande hade tyngdpunkten vid utseende och funktionalitet hos de två gränssnitten. Först visas bilder på hemsidan, och sedan på mobilapplikationen.



Detta är en kort skiss på veckoplaneringen samt vad som eventuellt bör finnas i anslutning till denna.



Här har vi utökat förra träffens inloggningsskiss på hemsidan med ungefär hur innehållet kan fördelas över sidan.
Plus: Två fält ger möjlighet till text i det ena och bilder i det andra för inspiration.



Denna skiss har sedan förra träffen utvecklats i samband med diskussioner kring gränssnittslösningarna. Diskussionerna rör främst hur vi ska undvika för många klick och för detaljerad loggning av vad användaren ätit.




Här kommer vi in på en mer detaljerad skissning av matloggningsgränssnittet.
Det skapades en förenklad lösning med grundare navigering: användaren väljer matlogg, typ av mål och valde sedan vad den ätit från en tabell med matikoner.
Plus: Tydligare definition gör statistiken på hemsidan mer precis.
Minus: Fortfarande många klick och väldigt detaljerat loggande, risk för att användaren tycker att det är för mycket jobb.

Ett annat alternativ var att bara logga typ av mål samt storlek istället för att definiera precis vad denne ätit.
Plus: Färre klick gör loggandet enklare för användaren.
Minus: Sämre precisering av vad användaren ätit gör hemsidestatistiken mycket mindre pålitlig.



Här skissades hur den första skärmen av mobilapplikationen skulle se ut. Tanken låg kring fem knappar med den mest använda (matloggen) i mitten.
Plus: Lätt att nå alla val med ett tryck.

Gränssnittsmöte

Gruppen konstaterade att vi enats kring en lösning med en mobilapplikation knuten till en hemsida, för att hjälpa studenter att få i sig nog med energi för att inte bli trötta under skoldagen och även erbjuda ett planeringsstöd för måltider. Med detta klart kunde vi diskutera funktionsmål:

Mobilapplikation

• Påminnelsesystem
• Ligga i bakgrunden
• Inköpslista med avbockningsfunktion
• Loggning av vad man äter under dagen

Hemsida

• Receptdatabas med sökfunktion
• Statistik (näringsämnen osv)
• Användarinställningar
• Inspiration
• Modularitet
• Inköpslista
• Veckomatsedel

Efter detta delade vi in oss i två mindre grupper och tog var sin del att börja skissa på. Linnea, Johan och Gro tog hemsidan och Oscar, Erica och Elisabeth ritade på mobilapplikationen. Efter ungefär en timme återsamlades hela gruppen och gick igenom idéerna de fått under skissningen och delgav varandra skisser och tankar.

Nedanstående skisser visar mobilapplikationens tänkta funktioner och gränssnitt:


Plus: Den fyrindelade skärmen för matval är lätt att navigera och förstå, ikoner gör det extra tydligt.
Minus: Risk för att det blir många klick även för enkla sysslor, risk för överdriven millimeterrapportering.

Hemsidegruppen utgick från två olika förstasidor beroende på om du är medlem eller inte, och började rita på den grundläggande designen:



Tydligare bilder på hemsidans förstasida, inte inloggad respektive inloggad.


Plus: Reklam för att användaren ska vilja registrera sig, enkel och okomplicerat intryck.
Minus: Kan verka grund och innehållslös om för mycket förbehålls registrerade användare.



Plus: Tydligt fliksystem, bra grund för addering av innehåll till sidorna.
Minus: Receptsökknappen flyter bort från flikarna.

Scenario, pt 2

...och så här bra vill vi att Sebastian ska ha det när han använder vårt kommande system!

Klockan är åtta på morgonen och Sebastian, 23, är på väg till sista föreläsningen innan morgondagens tenta i linjär algebra. Vid det här laget har han hunnit vara vaken ungefär en timme, och med gröt i magen känns det inte tungt trots den tidiga timmen. Till sin glädje märker Sebastian att han verkar ha koll på allt inför tentan. Tredje gången gillt – den här gången kommer han att klara den!

På tiorasten äter han en av bananerna som [vår mobilapplikation] sagt åt honom att packa med sig, och undviker på så sätt den energidipp som annars kan komma så här dags. På den efterföljande föreläsningen hänger han med bra, trots att ämnet är svårt, och ställer frågor till föreläsaren. Vid lunch går Sebastian till sektionsrummet för att slappa lite i sofforna, och packar upp sin medhavda matlåda. Till efterrätt blir det en chokladboll i sektionscaféet.

Dagen flyter på rätt bra, trots att den är lång, och när det är dags att cykla hemåt är bananerna och termosen med te Sebastian haft med sig förbrukade. Väl hemma sätter han direkt igång med att laga mat – allt finns ju redan hemma, han vet vad han ska äta, och receptet finns i mobilen. På kvällen finns inget spår av den gamla tenta-ångesten i magen, så Sebastian tänker att han lika gärna kan dra ihop en filmkväll. Några av kompisarna sitter fortfarande och panikpluggar, men ett par stycken får han med sig. Det blir dock relativt tidig hemgång på grund av morgondagens morgontenta, och Sebastian somnar gott strax innan midnatt.

Scenario, pt 1

Följande scenario skrev vi ihop om stackars Sebastian (en figur baserad på våra intervjuer, vänner och bekanta, och egna erfarenheter) och hur illa han har det innan han har fått tillgång till vårt system...

Sebastian, 21, köper en macka i café Baljan på nio-rasten. Han har inte hunnit äta frukost eftersom han försov sig imorse. Det är ingen ovanlighet för honom - när man går i skolan från åtta till fem varje dag blir man lätt lite sliten. När det är dags för lunch köper Sebastian en likadan macka. Det känns lite torftigt, men han hade ingen matlåda hemma att ta med sig.

För att orka sig igenom den långa dagen köper Sebastian flera koppar kaffe i det billiga sektionskaféet. Ändå somnar han i mitten av tre-föreläsningen, det är så otroligt svårt att koncentrera sig på matten så här på eftermiddagen. På kvartsrasten köper han därför klägg och ännu mer kaffe, med följden att magen gör uppror. Efterson kaffe är vätskedrivande leder det även till att Sebastian blivit uttorkad, men det vet han själv inte om – han känner sig bara ännu tröttare.

Vid femtiden åker Sebastian hem till korridoren. Hans plan är att plugga lite linjär algebra för att ta igen det han på grund av sin brist på koncentration missade på dagens föreläsningar och lektioner. Men han lägger sig först på sängen en liten stund för att pusta ut efter den långa dagen, och somnar omedelbart. Vid sju vaknar han med ett ryck, och får genast panik. Det kurrar i magen men han har ingen mat i kylen, så han stoppar i sig några digestivekex för att dämpa hungern. ”Jag kan inte äta pizza igen…” funderar Sebastian och beslutar att gå till affären för att köpa något, så han blir mätt. Sedan kan han kanske hinna med ett par timmars plugg ändå.

Men på väg till affären ringer en kompis och bjuder in Sebastian till filmkväll. ”Asch”, tänker Sebastian. ”Om jag ska hitta på mat, handla den och laga den, kommer jag ändå inte hinna plugga ikväll.” Han köper en köttbullmacka på Statoil på vägen. Väl hemma hos kompisen bjuds de på popcorn till filmen, så det kompletterar han med. Sebastian kommer hem till sitt rum strax efter midnatt. När han lagt sig är huvudet fullt av dåligt samvete och stress, och han kan inte sova på ett par timmar. Vid tre-tiden faller han slutligen utmattad i sömn, med mobilens alarm ställt på 07.00.

Skissträff

I detta inlägg presenteras bilder på skisserna som producerades under dagens skissträff. Fokus låg på mobilapplikationens och hemsidans gränssnitt.





Här har det skissats på en första struktur av hur man skulle kunna logga vad man ätit i mobilen, samt lite övergripande skisser på funktioner som kan vara bra att ha i mobilapplikationen.



Det diskuterades om mobilapplikationen snarare skulle vara en WAP-sida som man kunde logga in på via mobilen och hur detta skulle lösas.





Detta är några första skisser på vad hemsidan bör innehålla i funktionalitetsväg.





På ovanstående bilder blandas mobilgränssnitt och hemsidegränssnitt för att främja funderingar kring interaktionen mellan dessa.