Responsiv (följsam) webbdesign

Vår nya webb byggs med ett så kallat responsivt gränssnitt (responsive web design). I veckan annonserade Svenska datatermgruppen den mer poetiskt klingande termen Följsam webbdesign för fenomenet. Responsiv design innebär att man kodar och designar gränssnittet så att layouten anpassar sig till olika skärmstorlekar och enheter. Interaktionen ska fungera både för pekdon och touchscreens. Vår nya design ska stödja datorskärm, surfplatta och smartphone. Webbyrån Dear Friends står för den responsiva grunddesignen och initialkodningen.

Fluid grids
Ett centralt begrepp för responsiv design är fluid grid för att anpassa layouten, där ”gridsen” kan flöda om och lägga sig bredvid och under varandra beroende på skärmstorek/upplösning. Lite som tetris!

fluid_gruids

Man behöver dessutom en del designelement som måste specialanpassas för touchscreens och/eller mindre ytor som smartphones. Menyer är ofta ett exempel på det.

Adaptiv vs. responsiv
Vi har, som ett första steg, valt att visa allt som finns för desktopen även i mobiltelefonen. Men det är diskutabelt om allt som visas i desktopmiljön egentligen passar för mobiltelefonanvändande. Att ha många bilder kan vara fint i desktop, men tar mest stor scrollplats i mobilgränssnittet och värdet kan vara tveksamt. Om man börjar särskilja innehåll beroende på enhet, börjar man  närma sig distinktionen mellan adaptiv och responsiv design, där adaptiv egentligen är den mer anpassningsbara metoden.

Responsive CTHB style
Hittills är vi dock väldigt nöjda med hur det fungerar. Magin i att se hur webbsidan krymper ihop, flödar rätt och anpassar sig i till ett smartphoneformat! Så här ser den nya menyn ut på olika enheter.

Smartphone
meny_Iphone2

Surfplatta

meny_ipad2

Desktop

meny_desktop

Inom kort tänker vi exponera vårt arbete med nya webben för omvärlden – vi provar publik utveckling. Titta gärna på hur olika delar av layouten anpassar sig till olika enheter. RWD Bookmarklet är ett fiffigt verktyg för att testa resultatet för desktop, stående/liggande surfplatta och stående/liggande mobil.

/Kristin Olofsson

 

VLOG – Att skapa sidor och kategorisidor för vår nya webbplats

Vi har som ambition att veckovis berätta om hur arbetet med bibliotekets webbplats fortskrider. Vi har den här sprinten skapat tillräckligt mycket i vårt CMS Umbraco för att kunna börja laborera med att skapa innehåll. Vi skiljer i huvudsak på två typer av sidor. En vanling innehållssida (content page) och en kategori-sida som är en ingång till flera underliggande innehållssidor. Veckans film är ganska lång, nästan 13 minuter men visar hur vi arbetar i Umbraco med att skapa just innehållssidor och kategorisidor.

Vi räknar med att kunna bedriva utvecklingen för öppen ridå inom kort. Det är fortfarande jättemycket att göra, men vi vill ge er en möjlighet att få en känsla för hur det kommer bli.

/Daniel

Att arbeta med en webbyrå

Chalmers bibliotek har valt att köpa tjänster från en webbyrå, Dear Friends, i arbetet med att utveckla bibliotekets nya webb. Det huvudsakliga syftet är förstås att utnyttja deras utifrånperspektiv, design- och interaktionsdesignkompetens. Processen där design är behovs- och motivationsstyrd och där webbplatsen ger en positiv användarupplevelse.

Vi anlitar webbyrån för:

  • design- och interaktionsdesign
  • responsiv webbdesign
  • tillgänglighetsanpassning (för skärmläsare)
  • frontend/gränssnittskodning
Chalmers bibliotek ansvarar för:
  • användarresearch, innehållsarbetet och att ta fram underlag till webbyrån
  • CMS:et Umbraco
  • implementering, redaktörsgränssnitt och allt backendarbete
  • allt annat!
Arbetsgång
CTHB gör skiss för en sidtyp –> Webbyrån ger backbrief – var det det här ni menade? –> Webbyrån arbetar fram wireframes (schematisk webbsida med funktionsbeskrivningar) –> Webbyrån tar fram design (look & feel) -> leverans av gränssnittskod  –> CTHB implementerar.

Klicka på bilderna för att få exempel!

wireframe utbbild1Skiss backbriefFunktionsmatris wireframeWireframe design2Visuell design

 

Arbetet med webbyrån är uppdelat i 4-5 sprintar/rundor/leveranser. På biblioteket arbetar vi med utvecklingen enligt Scrummetodiken med betydligt fler sprintar.
Och så finns det ju en trevlig film som levandegör hur vi arbetar!

 

/Kristin Olofsson

 

Jobbar på ny webbplats

Vi håller på för fullt att jobba fram en ny webbplats. Här är en liten film om arbetssättet och lite om tekniken. Framöver så räknar vi med att berätta mer om arbetet. Planen är att lansera den nya webbplatsen i januari/februari.

Vi presenterar våra tre personor Sofia, David och Maria

Allt vårt användarresearcharbete har nu lett fram till tre personor. Låt oss presentera Sofia, David och Maria!

En persona är en slags typanvändare som representerar en användargrupp med liknande behov och beteenden. Högskolebiblioteket i Jönköping har beskrivit personametoden på ett koncist och bra sätt i den utvecklingsblogg de använde när de byggde sin senaste webbplats.

Personor kan användas till mycket, men vi vill framhäva några saker:

  • Undvika självcentrerad design
  • Kommunicera användarbehov på ett lättsmält sätt
  • Göra personan levande – skapa empati för användaren så att vi vill utveckla något bra för henne
  • Ha som kontinuerlig avstämningspunkt – designar vi fortfarande för personan? Har en funktion ett värde för henne/honom?

Här är de nu – Sofia, David och Maria.

sofia1 david1 maria1

/Kristin

Från intervjuer till personor – konsten att smälta data

Vi har tidigare skrivit om våra användarintervjuer inför arbetet med bibliotekets nya webb.
Efter datainsamling (och oj vad man mycket data man kan samla in!) kommer bearbetning, modellering och analys och det är också det vi har ägnat mycket tid åt i projektet. Det ÄR tidsödande, men här ska man inte fuska.

Vi började med att plocka ut det som känns mest användbart från våra intervjuanteckningar för att kunna designa en ny webb. Det blev sådana saker som:

  • motivation (vad driver våra användare?)
  • vilka mål har de? (vad gör de?)
  • aktivitet (hur gör de?)
  • hinder/frustration (vad får dem att ge upp, misslyckas?)
  • vilken känsla förmedlar vi/ska vi förmedla?
  • önskemål, förväntningar, tips

modellering2

Varje lapp är märkt med vilken intervjuad person informationen är hämtad från.

Nu har vi fått en grupperad översikt av innehållet i intervjuer och observationer, men vad är nästa steg för att åstadkomma Chalmers biblioteks egna personor?

Dimensioner
dimensioner21Vi började rita upp dimensioner där vi kunde sätta våra intervjuoffer någonstans på en skala.
”Använder biblioteket som information gateway” Alltid <–> aldrig.
”Vet exakt vad de söker <–> vill orientera sig”.
”Vill ha personlig kontakt <–> vill ha digital kontakt”,
etc.

Tanken är att hitta några personer som i stort följer samma mönster, bildar ett litet kluster, på skalorna. Av dessa personer kan man då skapa en persona eftersom man kan misstänka att de har väldigt liknande behov och beteendemönster. Återigen går man tillbaka till researchmaterialet och använder noteringarna från just de personer som ingick i klustret när man skapar sin persona. Personer är inget man hittar på själv, de ska vara byggda på användarresearchen!

Nu var våra intervjupersoner något bångstyriga och ville inte placera sig i riktigt så snygga kluster som vi hade velat, men efter lite vridande och vändande hittade vi tre olika typer.  Dessa har nu utgjort grunden för våra tre personor vi ska presentera i nästa blogginlägg.

Varför har vi gjort allt det här arbetet? Den största nyttan är förstås att vi går ut och lär känna våra användare, och arbetet med det insamlade datat tvingar oss att brottas ännu mer med användarnas behov och motiv. Det hjälper oss att undvika egendesign, att vi designar en webbplats för oss på biblioteket. Att istället eftersträva att utveckla en webb som ger ett värde till våra användare. Det har lett fram till att vi har tre personor, tre användarpersonligheter, som vi känner extra väl och som vi kommer att presentera i nästa blogginlägg!

Användarintervjuer – projektet Ny webb

Nu är vi klara med våra användarintervjuer.

Och oj, så mycket man lär sig! Ambitionen är förstås att nollställa våra antaganden och tyckanden och istället aktivt försöka ta reda på hur våra användare använder webben, vad de förväntar sig i sin interaktion och vad de har behov av på bibliotekets webbplats. Vi intervjuade 7 studenter, en doktorand och 2 forskare.

Etnografiska intervjuer och observation
Metoden har varit ett närmande till etnografiska intervjuer kombinerat med observation. Enligt metoden ska man egentligen befinna sig i användarens normala miljö, med deras egna verktyg och arbetssätt för minsta möjliga styrning och risk för artificiella uppgifter. Det kan vara svårt att lösa när man ska intervjua studenter, vi fick använda oss av rum i bibliotekets lokaler där vi kunde sitta ostört. Forskare och doktorander besökte vi i deras arbetsmiljöer.

quote3

Det har gått förvånansvärt bra, även om man ska vara medveten om att det är en konstruerad situation och att en intervju-, observations- eller testsituation påverkar i sig. Nervositet, eller att den intervjuade tar det för ett test och vill visa sig duktig, vara extra tillmötesgående eller extra kritisk är vanliga reaktioner. Det är bra att vara medveten om detta och formulera frågor så öppet som möjligt att be dem berätta och visa hur de brukar göra istället för att (bara) konstruera upgifter som måste lösas.

quote7

Inte usability
För här handlar det inte om att testa användbarhet på en produkt – vi ska ju utveckla något helt nytt! Usability kommer sedan för att se om våra idéer och research har alstrat något användbart. Nu handlar det om – det mer svårfångade – att hitta beteendemönster, behov och motivationer och utifrån det kunna bygga något nytt som inte redan finns. Intevjufrågorna handlade mycket om att berätta och att demonstrera hur de brukade göra och vi använde oss av prata-högt-metoden (berätta vad de gjorde, vad de förväntade sig, reaktioner etc). Vad den intervjuade säger och faktiskt gör skiljer sig förvånansvärt ofta!

quote13

Intervju och observationsmanus
Trots detta använde vi nuvarande webbplats vid intervjuerna, men försökte undvika att se det som ett test av den. Istället försökte vi fånga upp interaktion och förväntade funktioner, vad på en bibliotekswebbplats man faktiskt ansåg sig ha behov av, vad som motiverade dem och vad som gjorde dem frusterade.

Vi ställde frågor som:

  • Hur använder du biblioteket. Fysiskt? Onine?
  • När/vid vilka tillfällen använder du bibliotekets webb, vad är det du vill göra då?
  • Kan du berätta lite vad du förväntar dig att hitta på bibliotekets webb?
  • Vad skulle du vilja hitta? Vad skulle du bli positivt överraskad av?
  • ……

Här är vårt intervjumanus som vi hade som ryggrad vid intervjutillfällena. Samtidigt måste man vara beredd att improvisera om den intervjuade tar upp ett spår som överraskar oss. Det är just sådana spår som är guld värda och som man aldrig skulle upptäcka om man inte aktivt letar efter dem.

quote12

Tillvägagångssätt
Vi har varit två personer vid varje intervju. En som koncentrerar sig på intervjun och en som koncentrerar sig på att observera och anteckna. Ofta har vi bytt efter halva tiden så att man får chans att prova båda rollerna (och man delar på det tidskrävande jobbet att renskriva anteckningarna).

Vi spelade in intervjuerna med hjälp av Soundcloud, ett verktyg vi har berätta om tidigare. Inspelningen har vi mest som backup om vi skulle bli osäkra på vad den intervjuade egentligen sa. Och så skyndade vi oss att skriva rent våra anteckningar – det är så lätt att glömma bort och blanda ihop vad som egentligen sades efter några intervjuer.

Hjälp inte till!
Och så det svåraste av allt – att låta bli att gå in och hjälpa, visa eller tipsa den intervjuade! I den här situationen är det studenten/forskaren som ska lära oss och vi ska bara vara lyhörda för deras behov. Nästa steg i reseracharbetet blir att modellera och analysera resultatet vi har fått från intervjuerna.

Nu gör vi ett uppehåll i webbplatsarbetet. Ett litet intranätsprojekt pockar på uppmärksamhet.

/Kristin Olofsson
quote11

Arbetsverktyg i Ny webb-projekt

Jag tycker om att använda olika molntjänster för dokumentation och kommunikation i projekt. Det är ett bra sätt att testa olika gränssnitt och se vad som funkar, och kanske går det att överföra inslag till den sak man är igång med att skapa. I arbetet med att skapa en ny webbplats för Chalmers bibliotek gillar vi några grejer riktigt bra. Förutom tjänsterna nedan har vi använt Adobe Connect för några onlinemöten med andra universitetsbibliotek som också skapat nya webbplatser.

För övrigt älskar vi analoga material som post it-lappar, pappersark, tuschpennor, anslagstavlor, whiteboard. Om det har varit en workshop som resulterat i post-it på väggar så fotar vi med mobilen 🙂

STIXY
Skärmavbild-2011-12-09-kl.-15.38.57
Stixy påminner om en anslagstavla eller en sån där tavla som de har i kriminalfilmer för bilder, kartor och anteckningar. På Stixy gör man olika sidor eller grupper och lägger till post-it-lappar, laddar upp bilder och dokument. En kul sak är att det går att ändra färger och typsnitt lite hur som helst. Man ska inte underskatta vikten av ett snyggt, intuitivt och lekfullt gränssnitt! Det påverkar upptäckarlustan och gör att man gärna använder tjänsten. Naturligtvis går det att dela allt i Stixy, om man vill. Alltså bjuda in andra till samarbete.

FACEBOOK-GRUPP
fb-grupp
Om gruppens medlemmar brukar använda Facebook är det smidigt att jobba i en ”Grupp”. Här lägger vi upp tips på intressanta sajter och tjänster, och eftersom alla i gruppen är inloggade mer eller mindre hela dagen så fungerar det bra.

GOOGLE DOCS

G-Docs
Google Docs (Google Dokument) blir bara bättre och bättre, tycker jag. Här samlar vi alla protokoll, renskrivna intervjuer, Sprint-dokumentation etc. och länkar till dem från Stixy. Vi sitter ofta tillsammans i ett rum och jobbar samtidigt i ett och samma dokument.

SOUNDCLOUD

De intervjuer med studenter och andra användare som gjorts har bandats med appen Soundcloud. När ljudklippet är uppladdat går det att göra det åtkomligt endast för gruppen. Enkel att använda och snygg är den. En nackdel är att gratisversionen bara tillåter ca en timmes ljudklipp. Men man kan ju ha flera konton eller radera allt eftersom.

Se även tidigare inlägg om Soundcloud.

GOOGLE+ HANGOUT
Skärmavbild-2011-12-12-kl.-16.41.20
Vi har haft ett antal onlinemöten med andra universitetsbibliotek för erfarenhetsutbyte om webbprojekt. De flesta hölls i  Adobe Connect, men för det sista ville vi testa hangout i Google+. Det var mycket enkelt att använda och komma igång med och fungerade bra. Den enda möjliga nackdelen var att det inte gick att dela skrivbord eller ladda upp dokument som alla kunde titta på tillsammans. I de situationerna valde vi att istället dela en länk som alla gick till, samtidigt som vi fortsatte prata.

/Linnéa

Fokusgrupp/workshop med ledningsgruppen – projektet Ny webb

När vi planerade vilka metoder vi skulle använda i researcharbetet i projektet insåg vi snabbt att vi behövde veta varför projektet initierats; vilka mål och visioner fanns? Tankar om komplexa spörsmål? Policyfrågor? Förutom en intervju med initierande chef skulle en fokusgrupp med bibliotekets ledningsgrupp kunna hjälpa oss.

Fokusgrupp som metod är ofta ifrågasatt
Kritiken går ut på att man inte kan fånga upp egentliga behov och beteenden, bara vad gruppen säger sig tycka. Att någon lätt dominerar hela diskussionen och gruppen tenderar att följa den personen och eftersträva koncensus istället för att uttrycka individuella motiv. Fokusgrupp används ofta vid marknadsundersökningar där man vill veta hur man förstår och pratar om en speciell produkt. När man använder metoden ska man göra det för att få insikt i tankegångar och attityder, inte för att hitta sanningar.

Fokusgrupp blir workshop?
Nu är ju ledningsgruppen inte de användare vi designar webben för, så deras beteende behövde vi inte bry oss om. Övriga fokusgruppsfällor försökte vi parera genom att göra en workshopsliknande fokusgrupp och med explicit uppmaning att inte tänka koncensus. Det ger projektet mycket mer om vi kan få många infallsvinklar, olika sätt att tänka och få till stånd riktigt bra diskussioner till komplexa frågor. Koncensusönskande grupper tenderar att skyla över problem och olikheter. Vi tror att det också gav ledningsgruppen en djupare förståelse för olika frågeställningar och vad man behöver brottas med.

Skalor och prioriteringar
Ledningsgruppen fick arbeta mycket med skalor och prioriteringar där inget fick vara lika viktigt. Resultatet var inte det viktigaste utan att man tvingades resonera, argumentera och tänka om under arbetets gång.

skalabild

Uppgift: Var sätter du dig på den här skalan? Mitten är förbjuden parkering så du måste ta ställning. Berätta hur du tänker när du placerar dig där.

Exempel på ”skaluppgifter”

  • Allt som biblioteket gör måste med så att det syns vad vi gör vs. Avskalat gränssnitt som hjälper användaren att lösa en uppgift
  • Personalens tillgänglighet vs. Fixa själv
    (t.ex nå någon hela tiden via en snabb och synlig kanal från samtliga sidor vs. Så mycket som möjligt ska finnas på webben så att vi kan hänvisa dit)

Prioritering som workshopsmetod
En annan uppgift var att varje person i ledningsgruppen fick berätta i vilken prioritetsordning de satte olika delar av webbarbetet. ”Vad är viktigast? Berätta hur ni tänker. Ni får ångra er när ni hör andra.” Återigen var det inte rangordningen som var det viktiga, utan det resonemang och de diskussioner det lockade/tvingade fram.

Saker de fick i uppgick att rangordna inom webbprojektet var t.ex.

  • det visuella intrycket
  • tilltalet i text och bild
  • att hitta och navigera lätt genom den uppgift användaren vill utföra
  • marknadsföra och presentera bibliotekets informationsresurser
  • marknadsföra och presentera bibliotekets ”fysiska verksamhet”
  • marknadsföra andra strategiska delar av verksamheten
  • ….

Vem riktar vi oss mot?
Fokusgruppens diskussionen om vem vi riktade oss mot genom webbplatskanalen blev ett exempel på olika infallsvinklar som blev fruktbara. Diskussionen böljade från klassiska användarkategorier/målgrupper (studenter/lärare/forskare/tredje uppgiften) till att strunta i målgruppstänkandet och designa för ett beteende eller en uppgift.

Värdeord – vad ska webben signalera?
Ledningsgruppen hann dessutom med att ta fram 3 värdeord som de tycker webbplatsen ska uttrycka. Men vilka värdeord det blev berättar vi lite senare, i ett eget blogginlägg och när övrig bibliotekspersonal haft samma workshop!

Stort beröm beröm till bibliotekets ledningsgrupp som engagerat tog sin an uppgiften och gärna diskuterade saker som det inte finns några lätta svar på.

http://www.flickr.com/apps/slideshow/show.swf?v=109615

/Kristin Olofsson

Inga fler inlägg.