Under övningen fick vi titta på Grupp 3:s projekt. De har designat en mobilapplikation liknande vår, som ska ge förslag på platser som turister kan besöka under deras tid i Stockholm. Det är värt att notera att gruppen hade redan vid utvärderingstillfället en online-prototyp gjord i FluidUI.

För att utvärdera deras applikation använde vi oss utav diskussionspunkterna som var givna i övningen powerpoint. Vi började högst upp och arbetade oss neråt och diskuterade varje punkt.

För att utvärdera flödet men även designen och kompositionen i mobilappen klickade vi oss omkring bland knapparna, för att simulera en användare. Vi noterade de tillfällen då vi tyckte att en knapp saknades, eller då knappar inte ledde oss dit där vi trodde att de skulle leda oss.

För att utvärdera om huvudfunktionerna är i fokus började vi först fundera vilka funktioner som var huvudfunktioner utifrån målgruppen. Sedan jämförde vi våra tankar om huvudfunktioner och vad vi tyckte var i fokus i prototypen.

Idag hade vi ett möte för att påbörja jobbet på prototypen. Vi gick igenom varje skärm, och antecknade alla sätt som man kan interagera med respektive skärm och vad dessa interaktioner ska leda till, för att se till att vi alla är överens om vad som ska hända och för att ha det samlat på ett ställe nu när vi påbörjar arbetet på high-fidelity-prototypen.

 === Startsida ===
 
  * Klicka på Login             => Tar fram login-popup och dimmar det som är under
                                   för att informera användaren om att de undre
                                   knapparna är inaktiverade
  * Klicka Sök i sökrutan       => Tar fram kartresultat  
  * Skriva/Klicka i sökrutan
  * Klicka på Hjälp             => Mer popups! Enkel hjälpsida. Back för att backa.
  * Pinch-zoom i tagcloudet
  * Klicka på tags              => Skriver in taggen i sökrutan
  * Trycka på Bookmarks         => Till kartresultat-skärmen  
  * Trycka på Share             => Tar fram inloggning, sedan tar fram Share-sidan
 
 === Share ===
  * Klicka på bilden            => Ta bild från kamera/filsystem
                                   Bilden ändras till den valda.  
  * Gråtext "Name of place"     => Gråtexten försvinner och man kan skriva   
  * Gråtext "Description"       => -----||----
  * Klick på tag-område         => Får fram tag-popup (bild senare)
  * Tag-område är vertikalt scrollbart
  * Klick på kartområde         => Får upp karta där koordinat kan ändras
  * Lägg till klar-knapp        => Posten läggs till i databasen
  * Tryck på Find               => Till Startsidan
 
 
 === Login-popup === (Overlay)

  * Flytta login upp
  * Toggleknappar för Facebook och Google som
    vilket konto man loggar in med.
  * Skriva i username
  * Skriva i password
  * Trycka på Login
  * Lägg till avbryt-knapp som avbryter => (tillbaka till startsida)
  * Vid faillogin kommer det upp rödtext
  * Klicka under overlayet för att avbryta också

 === Kartresultat ===
  * Swipea ut lista från höger-sak eller klicka på flärpen
  * Pinch-zoom (och inte pinch-zoom) och panning  
  * Klick på blob               => Få upp google maps-bubbla
                                    För grupper är det en lista på platser samt zoom-knapp
                                    För enskild plats fås bild fram samt beskriving och gå till post-knapp
                                   De bubblor som är öppna hamnas överst i listvyn och highlightas på något
  * Kryssknapp för bubblor
  * Inloggningsknapp            => Ta fram login-popup
  * Bakåt-knapp                 => Gå till startsidan
  * Sök-knapp                   => En popup (sökruta, innehåller den senaste sökningen)
  * Min positions-knapp         => Fokusera kartan på ens plats
 
  * Tryck på listelement        => Gå till post
 
 === Postsidan ===
  * Tryck på Koordinat-knapp    => Öppna i extern kartapp
  * Trycka på upvote/downvote
  * Tryck på "sök på närliggande platser" => Gör ny sökning med centrum på aktiva posten.  
  * Swipe till höger/vänster    => Ändra aktuell post
  * Klick på taggar             => Sökning?
  * Scroll på taggar (vertikal och horisontell/marqueeee?)
  * Tryck på Rapportera inlägg  => Öppna rapport-popup
  * Tryck på Rekommendera besk.
  * Tryck på Ja/Nej i Frågan    => Ta bort Frågan (ersättning med
  * Tryck på bokmärke           => Knappen ändrar utséende
 
  * Tryck på Bakåt              => Resultat
  * Inloggningsknapp            => Ta fram login-popup
 
 
=== Rapportera inlägg-popup ===
  * En rullgardin där kategorier kan väljas
  * Textfält för kommentarer under.
  * Avbryt och Rapportera-knappar
 
 
=== Allmänt för popups ===
  * Skärmen under dimmas
  * Klicka utanför för att stänga.
  * Swosha ner eller poppa upp?  
 
=== Beslut om bakåt-knapp === (åter igen)

Från en skärm så länkar bakåtknappen alltid till en annan specifik skärm. Den varierar inte baserat på historik. Vi valde detta för att vi inte vill att man ska behöva backa igenom en massa sökresultat för att komma dit man vill, och göra det tydligt hur man kommer tillbaka till t.ex. hemskärmen

Sökhistoriken löste vi istället genom att lägga in den i sökdialogen.

Ex:

Inne på Vasamuséet. Väljer närliggande platser och den gör en ny sökning. Nu är Vasamuséet centrerad och dess bubbla är öppnad från början så man kan enkelt gå tillbaka till Vasamuséet igen. Bakåt gör alltid en sak, som en riktad graf. Nu är det beslutat att bakåtknappen inte är en stack.

 
   
Vi började evaluera olika wireframe-verktyg bland annat Fluid UI (på bild), Balsamiq samt klipp-och-klistra-HTML+javascript. Just nu verkar vi luta mot Fluid UI, men innan vi fattar ett slutgiltigt beslut så ska vi titta lite noggrannare på vad som rekommenderas av bland annat boken, föreläsningarna och Google.

Dagens diskussion gjorde ändrade vi på mycket som vi beslutade mötet den 21 feb.

* Startsidan
Består av två vertikala flikar. Den första är Sök där man det finns ett sökfält
och ett tagcloud. Trycker man på en tag i det så skrivs den automatiskt in i
sökfältet utan att göra sökning. Vi valde att göra så för att då kan man
på ett enkelt sätt söka på flera taggar. Man kan också skriva in egen text
att söka efter. När man trycker på sök så går man vidare till sökresultat.

Trycker man istället på dela åker expanderas dela-fliken istället. Där ser
man en knapp som tar en till kameran och man kan fota platsen. Man får sedan
skriva in en titel, beskrivning och taggar. Tagcloudet som är med på bilden är inte
med i den slutgiltiga designen.

Sök i första bilden upp till vänster. Dela på andra bilden. 

* Sökresultat
Vi tog beslutet att visa kartan när man trycker på sök istället för en lista
som var först tänkt. Kartan är centrerad på ens egna position, och markerar
ut ställen som matchar sökningen. När det är många sökningar runt samma plats
så blobbas dem ihop och man måste zooma in för att de inviduella platserna ska visas.

Från höger kan man även dra ut en lista över de platser som visas på kartan.
Vi diskuterade mycket om vad som skulle hända när man tryckte på ett listelement
i listan. Ska det ta en till posten om platsen, eller ska platsen
markeras ut på kartan? Efter mycket diskussion bestämde vi för att den ska markera ut platsen,
och det finns en ytterligare knapp i listelementet som tar en till själva posten.

Man måste inte dra ut listan för att få fram den. Trycker man på ett element i listan
så dras den ut och man ser titeln på bara den posten, eller så kan man trycka på en blob
och då visar listan alla platser i bloben.

Sökresultat karta till vänster, och med listan utdragen till höger. Man ska fortfarande kunna se kartan vilket inte 

framgår på bilden.

* Post
Posten visar främst titeln, en bild och en kort beskrivning (ungefär twitter-längd).
Man kan scrolla åt sidled för att visa andra poster på samma plats. Vi ser också
att under beskrivningen så kan man rapportera inlägg (t.ex. om någon postar porr/gore)
och sedan ser man att det finns en rating på både plats (bredvid titeln) och på posten
(Hjälpsam?, bredvid rapportera)

Under Rapportera/Hjälpsam ser vi ett område som inte alltid visas. Antingen så kommer det
vara tomt eller så kommer det att vara en "Är detta samma plats?"-fråga som ställs till användaren.
En liten bild visas och titeln på den posten. Problemet är att vi måste kunna avgöra som är dubletter
och inte, och då frågar användaren om posten i rutan beskriver samma plats som den riktiga posten.
Användaren kan då trycka Ja eller Nej och frågan försvinner och ersätts med ingenting eller kanske
"Tack för hjälpen!".

* Inloggning
Inloggningen fungerar som en popup. Användaren kan alltid ta fram den genom att trycka
på loginknappen i toppen av skärmen, eller så kommer den att poppa up då användaren
gör något som kräver inloggning (bokmärke, rösta, dela). Om användaren är inloggad så
loginknappen ersättas med den inloggade användarens namn.

Till vänster är innan man loggar in, och till höger har användaren Leif loggat in. 

Detta är vår bästa design och det är denna som vi kommer att fortsätta med. 

Litteraturtermer: Denna prototyp blev både en horisontell prototyp (fokus på många funktioner) och en vertikal prototyp (fokus på detaljer). Vi tycker att den blev rätt så komplett.  

Scrappa communityskit
Communitysaker såsom kommentarer på poster, persongalleri och bevaka personer tar vi bort.
Vid närare eftertanke så tyckte vi inte det passade in med den enkla designen vi
ville göra, och mediumet kändes inte som att det var rätt. Det blir för mycket små knappar som 

måste ha en plats och ligga vilket kommer bli jobbigt för användaren och för oss som måste 

lägga dem någonstans. 

Favoriter/bokmärken
Var ska favoriterna sparas? Vi tänkte att de antingen kan sparas lokalt i mobilen,
eller så kan det sparas på någon server. Fördelarna med lokalt är att man inte behöver
logga in för att komma åt favoriterna, men om man sedan använder en annan persons mobil
så kan man inte komma åt den. De kan man om de istället sparas i cloudet.
Vi beslutade oss sen om att de skulle sparas i cloudet.

Inloggning 

Vi pratade mycket om inloggning och vad man kan göra utan att logga in samt
vad man göra efter inloggningen.
Vi har sagt nu iallafall att man loggar in med Facebook och endast Facebook.
Vi har inget lokalt konto. Genom att logga in så kan man dela saker (dvs posta platser)
och ratea (både platser och poster).

Bilder på pappersskiss

Idag träffades gruppen för att börja diskutera de nya designförslagen utifrån de vi redan har tagit fram. Denna post är tänkt att sammanfatta vad som diskuterades och vad vi kom fram till. Vi började med att gå igenom de två designförslagen (se föregående post) och välja ut vilka detaljer som är bäst från de.

Någonstans under tisdagen/mellan tisdagen och idag så insåg vi att dubletter (flera poster kopplade till samma geografiska plats) är ett klurigt problem, och att vi måste ha någon form av plan för hur det ska lösas.

De oenigheter vi kom fram till var:

Bakåtknapp
Det visade sig inte vara helt trivialt att bestämma hur bakåtknappen bör fungera för att vara så intuitiv som möjligt för användaren. Som följd av dessa diskussioner så valde vi att slå ihop skärmarna för resultatlista och kartvy i design #1 till separata flikar i samma skärm, så bakåtknappen (som ligger utanför dessa flikar) får en mer lättförståerlig funktion.

Dubletter
Hur ska dubletter av poster identifieras? Hur ska de presenteras för användaren? Vi behandlade dessa problem i omvänd ordning, och började med presentationen.

Presentation av dubletter
Ett av förslagen var att ha en lista med dubletter. Ett annat var att kunna slide:a hela skärmen åt vänster/höger för att bläddra mellan flera poster knutna till samma geografiska plats (som då kommer från olika användare och har olika foton/beskrivningar). Vi beslutade oss att använda det senare förslaget, och vidare så flyttade vi upp titel och röstningsknappar till ovanför "post-delen" (den del som kan slide:as åt sidan för att växla mellan poster rörande samma plats).

Identifiering av dubletter
Vi ville helst av allt låta användare få sköta identifieringen av dubletter, men vill inte göra det till en jobbig uppgift utan presentera ett så lättanvänt gränssnitt som möjligt. Detta valde vi att lösa genom att låta den nedersta biten av resultatsidan då och då innehålla en ruta för en annan post, och fråga användaren huruvida den nuvarande posten är en dublett till denna andra post eller inte. Efter att användaren svarar på frågan så fylls området ut helt av det faktiska resultatet, utom en kort notis som tackar för bidraget.

För att hitta "potentiella dubletter" så jämförs GPS-koordinater, och närliggande platser blir automatiskt kandidater för användarfrågor.

Röstning
Ett annat problem är att man utöver att kunna rösta på en plats ("den här platsen är värd att besöka") också behöver kunna rösta på en post ("den här posten ger en bra beskrivning av platsen"). Detta valde vi att hantera med en "textlänk" där man kan tala om huruvida man fann beskrivningen hjälpsam.

Edit: Läs även fortsättningen, http://b4.bloggplatsen.se/2013/02/26/9524523-fortsattning-pa-dagens-diskussioner-21-feb/

Under övningen i tisdags så delade vi in projektgruppen i två undergrupper och tog fram två separata designförslag, en mer konventionell design och ett (lite) mer nytänkande och "galet" alternativ. Resultatet av detta presenteras nedan.

Design #1

(Tyvärr så har den första skissen ändrats lite grann mellan övningen och det att fotots tog, men dessa ändringar är väldigt marginella.)

Startsidan för denna design är delad i två delar, en "Dela"/"Lägg till" och en "Sök". Den första delen används för att bidra med en ny post till databasen, medan den andra (som är expanderad när man först startar appen) används för att söka bland existerande poster. Genom att klicka på ena rubriken så expanderar dess skärm medan den andra krymper ihop till en rubrik. Bidragsfunktionaliteten är placerad direkt i startskärmen eftersom den ansågs så pass separat från sökfunktionen att man inte från "hitta plats"-delen behöver kunna ta sig direkt dit (det är antagligen inte medan man söker upp en plats som man vill bidra med en ny plats).

Sökskärmen (startsidan med sökdelen expanderad) innehåller möjlighet till fritextsök (bland titlar såväl som taggar) eller sökning genom att klicka på en tagg i det moln av taggar som finns under sökfältet. På en statisk position i taggmolnet (längst ner?) så finns en länk till "specialtaggen" för bokmärkta platser.

Sökresultatet presenteras i två skärmsorter: dels i listform och dels i kartform. Genom att växla till lista så kan man se korta beskrivningar och thumbnails av foton av de olika platserna, och i kartvyn så får man geografisk kontext till var platserna ligger (i förhållande till staden, till varandra och till ens nuvarande position).

I skärmen för en enskild post så presenteras informationen som är knuten till den, tillsammans med möjlighet att rösta upp/ner, anmäla post för missbruk samt redigera taggar. Dessa funktioner kräver dock inloggning (om man inte är inloggad och försöker göra något av de så får man upp en popup med begäran att logga in).

Delningsskärmen (startsidan med dela-delen expanderad) används för att lägga till en ny post, bestående av foto, titel, beskrivning/kommentar samt taggar.

Över lag så kan det om denna design sägas att vi valt att slopa en hel del communityrelaterade funktionalitet, och istället fokusera mer på bara posterna.

Design #2

Den andra designen har många likheter men också många skillnader jämfört med den första. På startskärmen finns möjlighet att se populära platser och taggar samt att få en lista över platser som man bidragit med. Vidare så har flikraden högst upp fått ett alternativ "Jag"/"Mina sidor" som styr allt rörande den inloggade användarens konto.

Skärmen för enskild post har fått fältet under fotot indelat i två flikar--beskrivning och kommentarer. Taggar har flyttats till under beskrivningen istället för till höger. Andra större skillnader är möljigheten att visa ytterligare information på kartan (bokmärken, ens egna bidrag), och att sökresultatsidan ser lite annorlunda ut.

När man lägger till en ny post så krävs att man först tar ett foto av platsen genom att kamera-appen helt enkelt startas så fort man klickar på "lägg till"-knappen. Efter att man tagit ett foto så får man möjlighet att fylla i titel och beskrivning samt att lägga till taggar. Vid tagginmatning så får man under inmatning upp förslag på matchande existerande taggar, men kan även lägga till taggar som inte redan finns.