Matteboken.se

Mattecentrum hjälper ungdomar

Mattecentrum är en ideell förening som helt gratis hjälper barn och ungdomar att förbättra sina kunskaper i matematik. De arrangerar öppna räknestugor i 28 svenska städer och på Matteboken.se finns – precis som det låter – matteboken från grundskolan årskurs 3 till Matte 5 på gymnasiet. Dessutom finns systerorganisationer med sajter i Danmark och Norge. Totalt hjälper Mattecentrum fler än 350 000 ungdomar varje månad och webbplatserna har över 30 000 besökare varje dag. Det är med andra ord välanvända webbar som vi relanserar med en helt ny design och övningsuppgifter.

Två projekt blev ett

Vi började arbeta med Mattecentrum och Matteboken.se i början av 2013. Det första projektet var att ta fram något som länge eftersökts – funktionalitet för att räkna övningsuppgifter på webben. Detta gjordes som en del av den dåvarande webbplatsen och Mattecentrum satte under våren igång det digra arbetet att ta fram övningsuppgifter till hela materialet. Snart kom förfrågan om projekt nummer två, att mobilanpassa Matteboken.se. Antalet mobila användare hade fördubblats det senaste året och utgör nu mer än en tredjedel av besökarna. Vi såg dock att det fanns många förbättringsmöjligheter som sträckte sig längre än att bara mobilanpassa den befintliga sidan.

Tillsammans med Mattecentrum kom vi fram till att lösningen var ett större omtag av hela webbplatsens utformning. Vi beslöt att sammanföra lanseringen av övningsuppgifter med den nya webbplatsen och göra en större satsning för en helt ny Matteboken.se till hösten 2013. Det skulle bli den största förändringen i Mattebokens femåriga historia. Ett minst sagt spännande arbete som vi nu ska berätta mer om.

Den nya Matteboken

Något som uppskattades med den föregående designen av Matteboken var det lekfulla uttrycket med en bakgrundsbild av en uppslagen bok. Det är ju en trots allt en mattebok – varför inte låta den ta inspiration från en. Vi behöll den grafiska metaforen med en bok, men samtidigt ville vi få innehållet mer integrerat med ramverket. Inte bara ytan av en bok, utan även funktionen av en.

Enkelt sett består Matteboken av två delar: sidor i själva boken och en meny för att ta sig mellan sidorna.

Dessa länkas samman av en färgpalett med en grundfärg för grundskolan respektive gymnasiet och färgtoner av respektive grundfärg för att urskilja de innbördes kurserna. Varje boksida använder samma accentfärg för de grafiska elementen som återfinns i menyn och därigenom skapas en tydlig koppling till aktuell kurs.

Respektive kurs färg går igen i menyn och i innehållet på sidan.

En ordentlig boksida

Böcker har generellt sett en betydligt mer genomarbetad typsättning än webbplatser. Det finns ju en flera hundra år lång tradition av tryckhantverket – och det märks – det slarvas inte med radlängder, radhöjder, rubrikstrukturer och marginaler. Samspelet mellan dessa skapar en bra läsupplevelse och det gäller givetvis även på webben.

Innehållet på nya Matteboken är i stort detsamma som tidigare. Men det saknades struktur och design av själva sidinnehållet. Texten var liten och svårläst, det fanns ingen tydlig rubrikstruktur och matematiska uttryck var inlagda som bilder. Vi ville ta det utmärkta innehållet och ge det en konsekvent och genomtänkt form.

Innehållet är samma men formgivningen av innehållet på nya Matteboken är mer genomarbetad.

När vi formgivit innehållet på Matteboken har vi sökt tydlighet och harmoni. Typsnittet Camphor utgör grunden för sidan. Det är en lite mjukare sans-serif som är behaglig att läsa i korta såväl som längre stycken. Den ger en varm ton till texten och avväpnar det matematiska innehållet. Avdelningsrubrikerna är ackompanjerade av ett vertikalt streck i den aktuella kursens accentfärg, ett tydligt sätt att markera när ett nytt avsnitt börjar. Matematiska uttryck återger vi i dynamisk text, men genom språket LaTeX, och får därigenom kraften att visa även avancerade uppställningar på ett sätt som inte är möjligt med ett vanligt typsnitt.

Att formge sidans innehåll är förstås poänglöst om det inte används i praktiken. Mattecentrum har gjort ett gediget arbete genom att gå igenom alla innehållssidor och strukturerat dom efter den nya designen. Som i de flesta projekt är stöd och utbildning till webbredaktörerna helt avgörande om slutresultatet ska bli bra.

Navigation

Innehållet i Matteboken består av ca 1 000 sidor uppdelade i olika nivåer. När vi gick igenom statistiken över hur webbplatsen användes märkte vi att besökare rör sig mestadels inom samma kurs och ämnesområde, det vill säga de förflyttar sig oftast mellan sidor i den djupaste ämnesnivån och byter sällan årskurs.

Menyn är uppdelad i kolumner som förflyttas i sidled. Här visas tre nivåer bredvid varandra.

För att stödja det beteendet har vi valt att lägga fokus på att synliggöra innehållet i aktuell nivå genom att använda en kolumnbaserad navigation som förflyttas i sidled vid nivåbyte. På så sätt kan vi visa innehållet stort och tydligt på aktuell nivå, men det är samtidigt smidigt att förflytta sig upp och ner mellan nivåerna.

Samma webbplats i flera storlekar

En viktig del för användbarheten på webbplatsen är att funktion och innehåll är konsekvent oberoende vilken skärmstorlek besökaren har. Fler än en tredjedel av besökarna på Matteboken surfar webbplatsen med mobiltelefonen och många växlar mellan dator, surfplatta och telefon beroende på i vilken situation de befinner sig. Vi ville undvika att använda olika navigationssätt för olika enheter.

Lösningen blev en högerställd meny som ligger utanför själva boksidan. När skärmbredden tillåter visas menyn hela tiden, men när bredden minskar visas endast själva innehållet i boken och menyn aktiveras med en menyikon. Menyn fälls då ut till höger i samma storlek som på bredare skärmar. Fördelen är uppenbar – det är i grunden samma webbplats och navigation oavsett skärmstorlek och fokus ligger alltid på själva innehållet.

När menyn fälls ut på mobiltelefonen är det samma meny som visas på större skärmar.

Övningsuppgifter

Den tidigare versionen av Matteboken instruerade enbart med text och video, men elever har länge efterfrågat interaktiva övningsuppgifter. I den nya Matteboken finns nu äntligen övningsuppgifter till hela materialet – totalt över 1100 uppgifter!

Att realisera detta har varit en utmaning både konceptuellt och tekniskt, och givetvis även ett enormt pedagogiskt arbete för Mattecentrum.

Övningsuppgifterna fungerar precis som sidan i övrigt lika bra oberoende av enhet.

När vi tillsammans med Mattecentrum arbetade fram kraven på övningsuppgifterna kom vi fram till att tekniken för att utforma dessa måste vara flexibel. Uppgifter kan vara utformade på många olika sätt och svarsmöjligheterna för besökaren är flera: ett fritextfält, flera fritextfält, flervalsalternativ, multipla flervalsalternativ och manipulering av grafer. Vi insåg också att själva talen i övningsuppgifterna måste variera från gång till gång på samma uppgift, annars går det inte att göra uppgifterna igen utan att man känner igen svaren. Ett komplext problem med andra ord.

Besökaren svarar på en uppgift och får direkt reda på om det var rätt svar.

Vi började skissa på ett grafiskt gränssnitt för att skapa uppgifterna, men vi insåg att kostnaden för att realisera det blev alldeles för hög. Vi ställde oss frågan hur vi skulle kunna skapa en flexibel uppgiftsmotor som samtidigt gick att bygga på utsatt tid? Genombrottet kom när vi insåg att redaktörerna på Mattecentrum inte bara har grym koll på matte, utan även logiska problem i största allmänhet. Det gjorde att vi kunde höja abstraktionsnivån för skapandet av uppgifter. Vi utvecklade ett förenklat programmatiskt ramverk i form av ett JSON-objekt per uppgift. I detta definieras uppgiften med både logisk verifierbarhet och full kreativ flexibilitet. Resultatet är en uppgiftsmotor som fungerar för allt från additionsövningar för lågstadiet till komplexa formler och interaktiva grafer för gymnasiemattens högre kurser.

Varje uppgift definieras i ett JSON-objekt (till höger).

Exempel på olika typer av uppgifter.

Teknisk lösning

Nya Matteboken är byggd på Umbraco CMS. Uppgiftsmotorn är helt javascriptbaserad med ramverket AngularJS. Matematiska uttryck visas i dynamisk text med LaTeX-ramverket MathJax. Typografisk text hanteras genom Fonts.com. HTML/CSS-ramverket är responsivt och baseras på REM-skalning för att anpassas i storlek mellan totalt 5 olika lägen beroende på enhetens storlek. Menyn animeras med CSS-transitions vilket ger hårdvaruaccelererade animationer som mer ger känslan av att använda en app än en webbsida. Vi använder en vektorbaserad SVG-sprite för alla grafiska element som inte kan återskapas med CSS samt en kompletterande PNG-sprite (i vanlig och dubbel upplösning) för de få element som inte kan återges i vektorer. Matteboken är rakt igenom anpassad för högupplösta skärmar, men trots det är den totala storleken för ramverkets grafik under 100 kb.

Resultatet av vårt arbete hittar ni på www.matteboken.se.

Obviuse är en webbyrå som planerar, designar, producerar och förvaltar webbplatser.