Modernisering av design för besiktningssystemet Muster : Uppgradering av användargränssnitt och funktionalitet

Abstract

Detta examensarbete handlar om modernisering och uppgradering av design och användarupplevelse för besiktningssystemet Muster. Syftet med arbetet var att förbättra användargränssnittet för att skapa en mer enhetlig och professionell design, som skulle både underlätta användningen och skapa en bättre helhetsupplevelse. Fokus låg på att implementera en ny färgpalett, samt förbättra och modernisera grundläggande designelement som knappar, inmatningsfält och valmenyer.

Genomförandet har bestått av flera steg, där den första förändringen var att uppdatera Bootstrap 4 till Bootstrap 5. Denna uppdatering har förbättrat prestanda, säkerhet och funktionalitet, samtidigt som det har öppnat för modernare designmöjligheter och responsiva lösningar. För att säkerställa en smidig integration med systemet har även komponenter från ngx-bootstrap implementerats i Angular-applikationen, vilket har möjliggjort användning av Bootstrap-komponenter utan att behöva jQuery.

Arbetet har även fokuserat på att förbättra den responsiva designen för att säkerställa att systemet fungerar optimalt på olika enheter, inklusive mobila enheter. Detta har bland annat inneburit att navigeringen och layouten har anpassats för att ge användarna en bättre och mer konsekvent upplevelse på olika skärmstorlekar.

Resultatet av arbetet är en modern och användarvänlig design som ökar användbarheten och estetiken i Muster. Genom att skapa en enhetlig design och uppgradera teknologin har systemet blivit mer attraktivt och funktionellt, vilket förväntas stärka användarnas engagemang och förbättra plattformens långsiktiga användarupplevelse.

Tämä opinnäytetyö keskittyy Muster-katsastusjärjestelmän suunnittelun ja käyttäjäkokemuksen modernisointiin ja päivitykseen. Työn tarkoituksena oli parantaa käyttöliittymää luomalla yhtenäisempi ja ammattimaisempi ulkoasu, joka helpottaisi käyttöä ja parantaisi kokonaiskokemusta. Pääpaino oli uuden väriteeman käyttöönotossa sekä keskeisten suunnitteluelementtien, kuten painikkeiden, syöttökenttien ja valikkojen, parantamisessa ja modernisoimisessa.

Toteutuksessa oli useita vaiheita, joista ensimmäinen oli Bootstrap 4:n päivittäminen Bootstrap 5:een. Tämä päivitys paransi suorituskykyä, turvallisuutta ja toiminnallisuutta, samalla kun se avasi mahdollisuuksia nykyaikaisemmille suunnitteluratkaisuille ja responsiivisille ominaisuuksille. Sujuvan integroinnin varmistamiseksi järjestelmään lisättiin myös ngx-bootstrap-komponentteja Angular-sovellukseen, mikä mahdollisti Bootstrap-komponenttien käytön ilman jQueryn tarvetta.

Työssä keskityttiin myös responsiivisen suunnittelun parantamiseen, jotta järjestelmä toimisi optimaalisesti eri laitteilla, mukaan lukien mobiililaitteet. Tämä sisälsi navigoinnin ja ulkoasun mukauttamisen, jotta käyttäjät saisivat paremman ja johdonmukaisemman kokemuksen eri kokoisilla laitteilla.

Työn tuloksena on moderni ja käyttäjäystävällinen suunnittelu, joka parantaa Musterin käytettävyyttä ja estetiikkaa. Yhtenäisen suunnittelun luominen ja teknologian päivittäminen on tehnyt järjestelmästä houkuttelevamman ja toimivamman, mikä todennäköisesti vahvistaa käyttäjien sitoutumista ja parantaa alustan pitkäaikaista käyttäjäkokemusta.

This thesis focuses on the modernization and upgrade of the design and user experience for the inspection system Muster. The purpose of the work was to improve the user interface to create a more unified and professional design, which would both facilitate use and enhance the overall experience. The focus was on implementing a new color palette, as well as improving and modernizing essential design elements such as buttons, input fields, and selects.

The implementation process consisted of several steps, with the first change being the upgrade from Bootstrap 4 to Bootstrap 5. This update improved performance, security, and functionality while also giving way for more modern design possibilities and responsive solutions. To ensure seamless integration with the system, components from ngx-bootstrap were also implemented into the Angular application, enabling the use of Bootstrap components without the need for jQuery.

The work also focused on enhancing the responsive design to ensure the system functions optimally on various devices, including mobile devices. This included adapting the navigation and layout to provide users with a better and more consistent experience across different screen sizes.

The result of the work is a modern and user-friendly design that increases the usability and aesthetics of Muster. By creating a unified design and upgrading the technology, the system has become more attractive and functional, which is expected to strengthen user engagement and improve the platform's long-term user experience.