Inlägg publicerade under kategorin wireframe

Av b4 - 2 april 2013 23:22

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.

Av b4 - 18 mars 2013 10:25

I fredags träffades vi för att göra klart det sista på prototypen. Det visade sig att vi överskattat mängden tillgängligt utrymme på en mobilskärm, och vårt gränssnitt var definitivt för komplext för att få plats på skärmens yta på ett sätt som är funktionsdugligt. Vi kollade på den funktionalitet som erbjuds just nu av de olika delarna i vår applikation, och flyttade en del mindre viktig sådan till undermenyer för att användaren inte ska distraheras i onödan när de försöker utföra en central handling (visibility-principen). Nedan är en genomgång om de designändringar vi genomförde under slutförandet av prototypen, och varför vi genomförde dem.


Kartskärmen

Bild och beskrivning slopades från bubblorna som öppnas vid klick av kartnål på kartskärmen. Anledningen till att vi från början hade denna information där var för att möjliggöra enklare jämförelse av olika platser direkt på kartskärmen så användaren inte behöver växla lika mycket mellan skärmar. Även om idén är god i sig så var det utrymmesmässigt inte genomförbart, och dessutom kanske inte en jätteviktig funktion för varesig Krystyna eller Benjamin.


Postsidan

Sidan för en egen post fick sig en rejäl upprensning. En av de största skillnaderna var att vi valde att flytta "närliggande platser", "visa taggar" och "visa på extern karta" till en undermeny. Tyvärr var inte dessa funktioner med i rankningen av funktioner som vi tidigare gjode för respektive persona, men trots det så bedömdes dessa funktioner inte vara centrala för Krystynas och Benjamins viktigaste behov: att hitta information om en plats. ("Få upp resultat på karta" i den länkade posten syftar på den inkluderade sökfunktionaliteten, och inte denna funktion.)


En annan förändring är att vi bytt ut mycket text mot ikoner: "rapportera inlägg", "bra post" och "bokmärk post" har alla bytts ut mot enbart ikoner (istället för enbart text eller ikon+text), för att spara plats och därmed göra gränssnittet mindre plottrigt. Exakt hur ikonerna ser ut avgörs förstås i samband med plattformen i fråga (för att förenkla för användaren att förstå innebörden av knappen utifrån tidigare erfarenheter), men skulle exempelvis kunna vara en flagga, en tumme upp och en stjärna, respektive.


Vi valde också att slopa dupliceringseliminieringsfrågan, på grunden att det är ett tekniskt problem, och att det helt enkelt inte gick att trycka in på den ytan. Dessutom är det ju inte någon funktion som direkt hjälper någon användare, varesig Krystyna eller Benjamin.


De andra lite mindre förändringarna på postsidan var att göra fotot större samt att rotera röstningsindikatorn till att fungera som en vertikal "termometer" snarare än att vara horisontell. Att göra fotot större hjälper att lägga fokus på den, som tillsammans med rubriken och beskrivningen utgör huvudinnehållet i posten. Det är att få tag på denna information som är centralt för hela appen, så det känns rimligt att ge den relativt stort skärmutrymme. Att rotera röstningsindikatorn, som visar hur folk bedömt en plats, var främst för att kunna göra upp- och nerröstningsknapparna större och därmed enklare att klicka på. En annan potentiell fördel är dock att de kan designas som en metafor av just en termometer, som stiger när någon röstar upp posten och sjunker när någon röstar ner den.

Av b4 - 7 mars 2013 15:15

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.

Ovido - Quiz & Flashcards