WordPressin sivunrakennustyökalujen vertailu
Ikari, Johanna (2024)
Ikari, Johanna
2024
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202401171474
https://urn.fi/URN:NBN:fi:amk-202401171474
Tiivistelmä
Tutkimuksen tavoitteena oli selvittää, miten WordPressin sivunrakennustyökalujen käyttökokemus eroaa toisistaan ja miten eri työkalut soveltuvat asiakkaan tarpeisiin ja taitotasoon. Opinnäytetyössä tutkittiin eroavaisuuksia WordPressin natiivin Gutenberg block-editorin ja suositun Elementor-sivunrakennustyökalun välillä. Tutkimuksen keskiössä olivat työkalujen tuottamat käyttäjäkokemukset.
Opinnäytetyön teoreettisessa osuudessa määritellään työn kannalta keskeiset käsitteet liittyen käytettävyyteen ja käyttäjäkokemukseen. Tietopohjassa käydään myös läpi mistä hyvä käyttäjäkokemussuunnittelu (UX) ja käyttöliittymäsuunnittelu (UI) ja rakentuvat. Teoriaosassa esitellään WordPressin sisäisten sivueditorien eri versioita sekä suosituimpia kolmannen osapuolen suunnittelemia sivunrakennuslisäosia ja niiden roolia sivustokehityksessä. Opinnäytetyö on toiminnallinen, ja se toteutettiin kvalitatiivisena vertailevana tapaustutkimuksena. Tutkimuksessa vertailtiin saman laskeutumissivun rakennusprosessia kahdella eri sivunrakennustyökalulla, teoreettisen osuuden pohjalta valituilla kriteereillä. Vertailun pohjalta syntyneet havainnot tallennettiin päiväkirjamerkintöinä, joiden pohjalta analysoitiin ja kirjattiin eri työkalujen erityispiirteitä vertailumatriisiin.
Tutkimusvaiheen alussa havaittiin, että Gutenbergin rajalliset ominaisuudet eivät sellaisenaan mahdollistaneet suunnitelman mukaisen laskeutumissivun toteutusta, joten Gutenbergin toiminnallisuuksia laajennettiin hyödyntämällä Gutenbergille tarkoitettua Spectra-lisäosaa. Tutkimuksessa havaittiin, että molempien työkalujen käyttäjäkokemus oli pääasiassa miellyttävä, tarpeeseen vastaava ja mahdollisti lähes täysin suunnitelman mukaisen laskeutumissivun toteutuksen. Tutkimuksessa todettiin, että Spectralla paranneltu Gutenberg täytti kriteerit Elementoria paremmin monilla osa-alueilla: se suoriutui niin käytettävyyden, houkuttelevuuden kuin uskottavuudenkin suhteen kilpailijaansa paremmin. The purpose of the thesis was to examine how the user experience of WordPress page builder varies between different tools and how these tools suit to customer’s needs and skills. In this thesis differences between the native WordPress Gutenberg block editor and a popular page builder Elementor were studied. The most emphasis was put on the user experience of these tools.
The theoretical part consists of the most relevant concepts of usability and user experience. The theory base also walked through the building blocks of user experience design (UX) and user interface design (UI). The different versions of native WordPress editors and the most popular third-party page builders were introduced. The thesis is functional, and it was executed as a qualitative comparative case study. The research was conducted by comparing the building process of the same landing page with two different page builders by criteria that were selected based on the theoretical section. The observations found in the comparison were saved as diary notes. These notes were analyzed and recorded in the comparison matrix.
In the early stages of the research, it was noticed that the limited properties of Gutenberg didn’t enable the landing page design that was planned to be executed in the study. Therefore, Gutenberg’s functionalities were upgraded with Spectra, an add-on that works on top of the native Gutenberg editor. The research demonstrates that the user experience of both page builders was mostly pleasant, corresponding the user’s needs and enabled the building of the landing page almost entirely as designed. The analysis indicates that the Gutenberg upgraded with Spectra filled the chosen criteria better than Elementor in several areas: it exceled in usability, desirability and credibility compared to its competitor.
Opinnäytetyön teoreettisessa osuudessa määritellään työn kannalta keskeiset käsitteet liittyen käytettävyyteen ja käyttäjäkokemukseen. Tietopohjassa käydään myös läpi mistä hyvä käyttäjäkokemussuunnittelu (UX) ja käyttöliittymäsuunnittelu (UI) ja rakentuvat. Teoriaosassa esitellään WordPressin sisäisten sivueditorien eri versioita sekä suosituimpia kolmannen osapuolen suunnittelemia sivunrakennuslisäosia ja niiden roolia sivustokehityksessä. Opinnäytetyö on toiminnallinen, ja se toteutettiin kvalitatiivisena vertailevana tapaustutkimuksena. Tutkimuksessa vertailtiin saman laskeutumissivun rakennusprosessia kahdella eri sivunrakennustyökalulla, teoreettisen osuuden pohjalta valituilla kriteereillä. Vertailun pohjalta syntyneet havainnot tallennettiin päiväkirjamerkintöinä, joiden pohjalta analysoitiin ja kirjattiin eri työkalujen erityispiirteitä vertailumatriisiin.
Tutkimusvaiheen alussa havaittiin, että Gutenbergin rajalliset ominaisuudet eivät sellaisenaan mahdollistaneet suunnitelman mukaisen laskeutumissivun toteutusta, joten Gutenbergin toiminnallisuuksia laajennettiin hyödyntämällä Gutenbergille tarkoitettua Spectra-lisäosaa. Tutkimuksessa havaittiin, että molempien työkalujen käyttäjäkokemus oli pääasiassa miellyttävä, tarpeeseen vastaava ja mahdollisti lähes täysin suunnitelman mukaisen laskeutumissivun toteutuksen. Tutkimuksessa todettiin, että Spectralla paranneltu Gutenberg täytti kriteerit Elementoria paremmin monilla osa-alueilla: se suoriutui niin käytettävyyden, houkuttelevuuden kuin uskottavuudenkin suhteen kilpailijaansa paremmin.
The theoretical part consists of the most relevant concepts of usability and user experience. The theory base also walked through the building blocks of user experience design (UX) and user interface design (UI). The different versions of native WordPress editors and the most popular third-party page builders were introduced. The thesis is functional, and it was executed as a qualitative comparative case study. The research was conducted by comparing the building process of the same landing page with two different page builders by criteria that were selected based on the theoretical section. The observations found in the comparison were saved as diary notes. These notes were analyzed and recorded in the comparison matrix.
In the early stages of the research, it was noticed that the limited properties of Gutenberg didn’t enable the landing page design that was planned to be executed in the study. Therefore, Gutenberg’s functionalities were upgraded with Spectra, an add-on that works on top of the native Gutenberg editor. The research demonstrates that the user experience of both page builders was mostly pleasant, corresponding the user’s needs and enabled the building of the landing page almost entirely as designed. The analysis indicates that the Gutenberg upgraded with Spectra filled the chosen criteria better than Elementor in several areas: it exceled in usability, desirability and credibility compared to its competitor.