De sidste par år har vi satset massivt på en forbedring af brugergrænsefladen i OnlineFundraising. Med nye kræfter bag skærmen har vi kunnet arbejde med brugergrænsefladen på en helt ny måde, og nu begynder vi at høste frugten af indsatsen. Dette indlæg giver en generel introduktion til tankerne bag det nye design og arbejdet med det.
Ensartet kode = ensartet design
I kender det sikkert fra jeres egen hjemmeside og formularer: Hver person tilføjer en smule unikt til processen. I de fleste tilfælde kan det være meget positivt, men netop med brugergrænseflader kan det drille. Her vil vi gerne have en konsistent udtryk, for det gør det nemmere at navigere.
Med vores nye tilgang til design har vi skrabet tavlen ren, og genbygget alle elementer fra bunden i et modulært design. Billedligt talt betyder det, at vi først bygger legoklodserne (designelementer), og så genbruger dem på tværs af hele platformen. Et eksempel på et designelement kan være en knap, en datovælger eller et navigationselement, som kan genbruges igen og igen.
Stringent og hurtigt
Ved at genbruge elementer på tværs opnår vi et ensartet design, som løfter brugervenligheden. Det stringente, ensrettede design har også en enorm fordel: Hastighed.
- For brugeren loader siden hurtigere
- For udvikleren går udviklingen hurtigere
- For designeren går det hurtigt, hvis et designelement skal tilpasses
Det betyder altså, at vi fremover nemt kan ændre en funktion på tværs af alle moduler, hvis noget skal tilpasses. Det kan fx være, vi ønsker at tilpasse datovælgeren, så den bliver endnu tydeligere.
Redesign af hvert modul
Før vi kan nå dertil, skal hvert eneste modul kodes på ny. Vi gør det gradvis, så vi tilpasser og optimerer et modul af gangen. Lige nu arbejder vi fx på nye versioner af modulerne Payment Receiver og Export, som relanceres i det nye design.
Eksempler på forbedringer
I første omgang optimerer vi det nye design til en skærmstørrelse på 13,6 tommer og opefter. Udover at sikre stringent, ensrettet og hurtig kode, lægger vi vægt på at indbygge forbedringer, der hjælper på brugervenligheden. Lad os tage et par eksempler:
Email history
Her har vi tilføjet en tydelig mouse-over, som gør det lettere at følge linjen samt paginering nederst:
Export
Lige nu arbejder vi på et redesign af Export-modulet. Øverst kan du se den eksisterende version. Her skal brugeren tage stilling til en lang række indstillinger, og hjælpeteksten støjer faktisk.
Nederst vises ses det nye oplæg fra vores designprogram Figma. (Klik på billedet for at se større version.)
Hjælpetekster er flyttet ind i små bobler, og brugeren guides mere igennem indstillingerne.
Arbejdet fremover
Vi frigiver løbende de nye moduler, og beskriver større ændringer i nyhedsbrevet. Efterhånden som det nye design udrulles, kan vi bedre opsamle data på brugen af de forskellige moduler. Det betyder igen, at vi løbende kan forbedre og sikre, at løsningen er hurtig og brugervenlig. Vi håber, I vil tage godt imod det nye design.
Vil du have nyheder, inspiration og viden om digital fundraising direkte i din indbakke? 
