Vi har gjort ett antal design- och användbarhetsuppdateringar i SpeedAdmin Play! för att gränssnittet ska kännas mer modernt, lättläst och bekvämt att arbeta i. Uppdateringen omfattar ny typografi, justerade färger, ett uppdaterat menysystem och finjusterade UI-element som flikar, knappgrupper, switchar, chips och kalender. Nedan ser du de enskilda ändringarna.
Bytt från Helvetica till Open Sans — Open Sans är webboptimerat och säkerställer en enhetlig återgivning på alla plattformar och i alla webbläsare. De humanistiska bokstavsformerna känns inbjudande och moderna, samtidigt som de behåller en neutral och professionell ton.
Bastexten är ökad från 12px till 14px — det förbättrar läsbarhet och tillgänglighet, minskar ögontrötthet och ligger i linje med intervallet 14–16px som används av de flesta moderna webb- och SaaS-gränssnitt för brödtext. I datatabeller använder vi 13px för att hålla tillräckligt mycket innehåll synligt per rad, samtidigt som det är ett steg upp från den tidigare 12px-nivån.
Vi har behållit grundprimärfärgen #006580 oförändrad, men finjusterat de ljusare och mörkare nyanserna. De tidigare ljusa nyanserna kändes för skarpa och övermättade på knappar och bakgrunder — de nya nyanserna känns mjukare och mer balanserade samtidigt som varumärkets karaktär bevaras.
För att ge plats åt den större teckenstorleken och skapa mer luft har några menyalternativ omgrupperats:
• “Mina elever” och “Mina kollegor” är nu samlade under “Resurser” (när du är inloggad som lärare)
• “Media” har flyttats in under “Profil”
Detta åtgärdar utrymmesbristen innan mobilmenyn aktiveras — särskilt för lärarkonton där menyn redan var trång.
Mobilmenyn täcker inte längre hela skärmbredden utan har en fast bredd på 240px. Det gör att en del av sidan förblir synlig bakom menyn, så att användaren behåller orienteringen, gör menyn lättare att stänga genom att trycka utanför, och följer det standardmönster för ”drawer” som används i moderna appar.
Inaktiva flikar är nu transparenta istället för ljusblå. Den tidigare ljusblå bakgrunden var svår att se mot den grå sidbakgrunden och fick de inaktiva flikarna att framstå som mer framträdande än den faktiskt valda. Genom att ta bort bakgrunden och i stället använda en fet teckenvikt på den valda fliken framträder den aktiva fliken tydligt, medan de inaktiva träder tillbaka.
Vi har anpassat designen av knappgrupper så att den följer designen för enskilda knappar — samma border-radius, padding och styling. Tidigare såg knappgrupper märkbart annorlunda ut än fristående knappar, vilket skapade visuell inkonsekvens i gränssnittet. Den enhetliga stilen gör UI:t mer sammanhängande och förutsägbart.
Vi har ökat storleken på switchar till en höjd av 26px, vilket är en standard och bekväm storlek. De tidigare switcharna var märkbart för små, vilket gjorde dem svåra att träffa exakt — särskilt på mobila enheter och pekskärmar. Den nya storleken förbättrar användbarheten och följer vanliga riktlinjer för touch-mål.
Vi har uppdaterat stilen på våra chips — inklusive färg, kantlinje och border-radius — så att de följer det övergripande, uppdaterade visuella språket i gränssnittet. Den nya designen känns modernare och mer konsekvent med övriga komponenter, samtidigt som chips fortfarande är lätta att känna igen och skanna.
Vi har åtgärdat ett problem i kalendern där händelser som låg direkt efter varandra (t.ex. 12:00–12:30 och 12:30–13:00) visades sida vid sida som om de överlappade, i stället för att staplas vertikalt efter varandra. Efterföljande händelser tar nu korrekt upp hela kolumnens bredd och följer på varandra i tidslinjen, medan verkligt överlappande händelser fortsätter att visas sida vid sida som tidigare.