I et samarbejde med skaberen af den populære Sims 4 mod 'MC Command Center' arbejdede jeg på at forbedre hjemmesiden for dette program. Hjemmesiden var ikke responsiv, hvilket var et problem, da en stor del af supportteamet rådgav brugere på farten og havde svært ved at finde den nødvendige dokumentation. Hjemmesiden fulgte ikke almindelige konventioner, elementernes design og placering virkede tilfældig, og siden havde et forældet udseende, der mindede om design fra 90'erne.
Målet med udviklingen af den nye side var at skabe en responsiv løsning, forbedre brugervenligheden og modernisere det visuelle design, så det føltes mere indbydende. Vi ønskede at gøre det lettere for brugerne at få adgang til informationen og for supportteamet at levere hjælp. Samtidig sigtede vi mod at skabe en mere organiseret og læsevenlig struktur for indholdet på hjemmesiden.
When Sarah came to me about redesigning my website, I jumped at the opportunity she presented. I know I'm a coder and not a web designer, so my website was definitely not something easy-on-the-eyes.
Through her redesign, she has been very accommodating to any suggestions that we've made and I think she's always kept the priority focused on the look-and-feel and usability for the many people that use the website regularly.
She's been great to work with and I am extremely grateful for all she's done!
En af sidens vigtigste funktioner, er muligheden for at søge igennem de hundredevis af indstillinger mod'en tilbyder. Siden det er en mod der altid er i aktiv udvikling, i takt med at EA udgiver flere udvidelsesmuligheder og opdateringer til Sims 4, var det vigtigt at det var nemt at opdatere de indstillinger søgefunktionen filtrerer.
For at imødekomme dette behov anvender jeg vanilla JavaScript i kombination med JSON filer, der indeholder datasættet med indstillinger. Dette erstatter den tidligere Angular-løsning, hvilket gør det mere bekvemt for hjemmesidens ejer at foretage opdateringer uden ekstra setup ved skift af PC.
Søgefunktionen fungerer ved at kombinere brugerens indtastede søgeterm med det valgte modulnavn (hvis et modul er valgt). Herefter filtreres JSON-dataen, og resultater, der matcher søgekriterierne, præsenteres i en overskuelig tabel på hjemmesiden.
For at sikre en brugervenlig oplevelse er der tilføjet en 'Scroll to top'-knap og en knap til at rydde alle søgninger, hvis resultatet er overvældende - siden der kan være rigtig mange resultater. Disse knapper har en fast position, så de altid er nemme for brugeren at tilgå, uanset hvor på siden de befinder sig.
Den implementerede løsning skaber en langt mere brugervenlig oplevelse, hvor det er nemt for brugeren at finde og overskue resultaterne. Samtidig er det også en effektiv løsning for ejeren, der blot behøver at opdatere JSON filerne, når indstillingerne ændrer sig, for at vedligeholde hjemmesiden.
Det største problem med den oprindelige FAQ-side var dens enorme længde og uoverskuelighed. Den bestod af en lang række ID-links, der førte til endnu længere sektioner nede på siden, hvor alle spørgsmål og svar var placeret. Denne struktur gjorde det svært at finde information, da overskrifterne havde dårlig kontrast, og titlerne blev gentaget flere gange, hvilket skabte forvirring og frustration, både for brugerne og support-teamet.
For at løse dette redesign opdelte jeg spørgsmålene i kategorier og oprettede interne links til hver kategori, hvilket gjorde det nemt og overskueligt at navigere til den ønskede sektion. Derudover blev hvert svar gemt i en collapsible, som kan vises eller skjules ved et enkelt klik. For at forbedre læseoplevelsen og skabe bedre visuel adskillelse, designede jeg hver collapsible som en knap med større margin og padding, hvilket gjorde det lettere for brugerne at skimme og finde relevante svar.
Samtidig var det vigtigt, at support-teamet kunne linke direkte til specifikke svar, så de kunne assistere brugerne mere effektivt. Derfor tildelte jeg hvert spørgsmål sit eget ID, hvilket gjorde det muligt at linke direkte til det relevante svar. Jeg skrev tilpasset JavaScript-kode, som identificerer ID'et i URL'en og åbner den tilsvarende collapsible, hvis ID'et matcher. Dette betyder, at support-teamet nu kan linke en person direkte ind til svaret på deres spørgsmål, og den specifikke collapsible vil automatisk åbne sig, så både spørgsmålet og svaret er synlige i brugerens viewport. Yderligere blev der tilføjet ekstra JavaScript-kode, der sikrer, at siden scroller 120px op, efter brug af et sådant link, for at undgå, at spørgsmålet gemmer sig under navigationsbaren.
