Realization of intended visual hierarchy in e-commerce web design : An eye tracking case study

Abstract

The theory of visual hierarchy has been widely used in the field of web design, with the increasingly emphasized importance of UX-design in the e-commerce industry. As eye tracking technology has become a popular research method, the visual hierarchy of web pages has been studied from various perspectives. However, the domain lacks extensive research to determine the effectiveness of specific visual hierarchies in conveying intended information.

This thesis reports a case study to investigate the design of a selected e-commerce website, with a focus on visual hierarchy and viewing patterns. The study employs an eye-tracking device to examine whether the arrangement of design elements on the website leads to the desired viewing patterns and supports the company's intended commercial objectives.

The theoretical section of this paper discusses the ways in which the structural design of a web store can influence user attention and affect the customer’s journey within the page. The empirical part of the study begins with a case interview to determine the applied design strategy and intended outcomes of the design. This is followed by an eye-tracking experiment to assess whether practice aligns with theory and whether the website's goals are achieved in real-world conditions.

The findings of this study provide valuable scientific insight for the company by suggesting improvements to the website's design. These findings may also be generalized to other websites or interfaces with similar characteristics, contributing to scientific knowledge. Additionally, the accuracy of existing scientific knowledge in applicable contexts is discussed along with the implications of the results.

Verkkokaupan käyttäjäkokemuksen korostuneen merkityksen myötä visuaalisen hierarkian teoria on saanut laajaa suosiota verkkosivusuunnittelun viitekehyksessä. Katseenseurannan kehittyessä ja yleistyessä tutkimusmenetelmänä, on sitä hyödynnetty visuaalisen hierarkian aihepiirissä huomattavasti. Kuitenkaan kirjallisuudessa ei ole kattavasti käsitelty visuaalisten asettelutapojen tavoitteiden toteutumista käyttäjien katseessa. Tämän tutkielman tarkoituksena on selvittää, kuinka verkkokaupan sivustosuunnittelussa käytettyjen visuaalisten elementtien asettelu toteuttaa suunnittelijan tavoitteet asiakkaiden käyttäytymisessä. Katseenseurantalaitetta hyödyntämällä toteutettu tapaustutkimus pyrkii selvittämään, miten sivustoa katsovan huomio jakautuu elementtien kesken ja tukevatko havaitut katsekuviot suunnittelijan haastattelussa esittämiä tarkoitusperiä, liittyen sivuston visuaaliseen hierarkiaan ja halutun tiedon välittymiseen. Tutkielma koostuu kirjallisuuskatsauksesta sekä empiirisen tutkimuksen raportista. Aiemman kirjallisuuden tarkastelussa määritellään keskeiset käsitteet sekä pohditaan, millä tavoin verkkokaupan visuaalinen rakenne ja asettelu voi vaikuttaa asiakkaan käyttäytymiseen ja kokemukseen. Empiirinen osa alkaa case-sivuston suunnittelijan haastattelulla, jonka jälkeen suunnittelijan tavoitteita vertaillaan katseenseurantalaitteella kerättyyn aineistoon. Tutkimuksen tulokset tarjoavat case-yritykselle arvokasta tietoa hyödynnettäväksi verkkokauppansa kehittämisessä. Tuloksia voi myös yleistää muille sopiville käyttöliittymille, tarjoten tieteellistä aineistoa myös laajemman yleisön hyödynnettäväksi. Tutkielman päätteeksi raportissa pohditaan havaintojen suhdetta aiempaan tieteelliseen kirjallisuuteen.