Vi har lavet en række design- og brugervenlighedsopdateringer på tværs af SpeedAdmin Play!, så grænsefladen føles mere tidssvarende, læsbar og behagelig at arbejde i. Opdateringen omfatter ny typografi, justerede farver, et opdateret menusystem og finpudsede UI-elementer som faner, knapgrupper, switches, chips og kalender. Herunder kan du se de enkelte ændringer.
Skiftet fraHelvetica til Open Sans — Open Sans er web-optimeret og sikrer en ensartet visning på tværs af alle platforme og browsere. De humanistiske bogstavformer virker imødekommende og moderne, samtidig med at de bevarer en neutral og professionel tone.
Den grundlæggende skriftstørrelse er øget fra 12px til 14px — det forbedrer læsbarhed og tilgængelighed, reducerer trætte øjne og flugter med 14–16px-intervallet, som de fleste moderne web- og SaaS-grænseflader bruger til brødtekst. I datatabeller bruger vi 13px for at bevare nok indhold pr. række, samtidig med at vi stadig løfter os fra det tidligere 12px-niveau.
Vi har bevaret den grundlæggende primærfarve #006580, men finjusteret de lyse og mørkenuancer. De tidligere lyse nuancer virkede for skarpe og overmættede på knapper og baggrunde — de nye nuancer føles blødere og mere balancerede, samtidig med at brandets karakter bevares.
For at give plad stil den større skriftstørrelse og skabe mere luft er nogle menupunkter blevet omgrupperet:
• “Mine elever” og“Mine kolleger” er nu samlet under “Ressourcer” (når man er logget ind som lærer)
• “Medier” er flyttet ind under “Profil”
Det imødekommer den begrænsede plads, før mobilmenuen aktiveres — især for lærerkonti, hvor menuen i forvejen var trang.
Mobilmenuen fylder ikke længere hele skærmens bredde, men har en fast bredde på 240px. Det holder en del af siden synlig bag menuen, så brugerne fastholder orienteringen, gør menuen lettere at lukke ved at trykke udenfor og flugter med det standard mønster, der bruges i moderne apps.
Inaktive faner ernu transparente i stedet for lyseblå. Den tidligere lyseblå baggrund var svær at se mod den grå sidebaggrund og fik de inaktive faner til at fremstå mere markante end den faktisk valgte. Ved at fjerne baggrunden og bruge en kraftig skrifttype på den valgte fane fremstår den aktive fane nu tydeligt, mens de inaktive træder i baggrunden.
Vi har tilpasset designet af knapgrupper, så de matcher designet af enkeltstående knapper og deler samme visuelle sprog — samme border-radius, padding og styling. Tidligere så knapgrupper markant anderledes ud end almindelige knapper, hvilket skabte visuel uensartethed på tværs af grænsefladen. Den fælles styling gør UI’et mere sammenhængende og forudsigeligt.
Vi har øget størrelsen på switches til en højde på 26px, hvilket er en standard og behagelig størrelse. De tidligere switches var mærkbart for små, hvilket gjorde dem svære at ramme præcist — især på mobile enheder og touchskærme. Den nye størrelse forbedrer brugervenligheden og flugter med almindelige retningslinjer for touch-mål.
Vi har opdateret stylingen af vores chips — herunder farve, kant og border-radius — så de flugter med det samlede, opdaterede visuelle sprog i grænsefladen. Det nye design virker mere moderne og konsistent med resten af komponenterne, samtidig med at chips fortsat er nemme at genkende og scanne.
Vi har rettet et problem i kalenderen, hvor begivenheder, der lå i forlængelse af hinanden(f.eks. 12:00–12:30 og 12:30–13:00), blev vist side om side, som om de overlappede, i stedet for at blive stablet vertikalt efter hinanden. Sammenhængende begivenheder fylder nu korrekt hele kolonnens bredde og følgerefter hinanden i tidslinjen, mens reelt overlappende begivenheder fortsat vises side om side som hidtil.