Porównanie funkcjonalności dwóch portali www

Porównanie funkcjonowania dwóch portali internetowych Mateusz Wrzosek Wzornictwo, rok 2, semestr III prow. prof. ASP W. Gdowicz, asys. mgr Marta Więckowska Zakład Badań Wizualnych i Interakcji ASP Katowice 2011/2012

część 1 - porównawcza analiza własna

- cele stron - strona główna

-

podział strony na główne elementy podział na rodzaj elementów strony podział na rodzaj linków na stronie kolorystyka strony i tekstów obszar obejmowania strony przez ekran

- mapy stron - draftest - opinia własna

część 2 - badanie z użytkownikami - opis badania

-

komenda a strony O.pl komenda b strony O.pl komenda c strony O.pl zestawienie wyników strony O.pl średnia czasów dla strony O.pl komenda a strony purpose.pl komenda b strony purpose.pl komenda c strony purpose.pl zestawienie wyników strony purpose.pl średnia czasów dla strony purpose.pl zestawienie wyników dla obu stron średnia czasów dla strony purpose.pl

- opinie badanych

- wnioski

część 3 - porównanie analizy własnej z badaniem użyteczności - porównanie menu

cele stron

strona główna

część 1 - porównawcza analiza własna

cele strony O.pl:

cele strony Purpose:

- udostępnianie informacji o wydarzeniach kulturalnych na terenie kraju

- aktywnościach kulturalnych lub aktualnościach w tymże świecie w wielu kategoriach

- strona bazuje na strukturze newsów

- informowanie o odbywających się konkursach

- możliwość zamówienia magazynu “O”

- możliwość zamówienia newsletteru

- strona przydziela własną Nagrodę

- reklamy dotyczą także świata kulturalnego

- udostępnianie informacji o wydarzeniach kulturalnych na terenie kraju

- aktywnościach kulturalnych lub aktualnościach w tymże świecie w wielu kategoriach

- strona bazuje na strukturze elektronicznego magazynu

- możliwość zamówienia magazynu “Purpose”

- możliwość zamówienia newsletteru

- strona posiada osobny dział z wyrobami brandu p+eco

- reklamy nie zawsze dotyczą świata kulturalnego, są także zwykłe komercjale

menu

cele stron

strona główna

mapy stron

część 1 - porównawcza analiza własna 16 elementów

13 elementów menu tytułowe

logo

logo

wyszukiwanie wyszukiwarka

menu główne

menu główne

wyszukiwanie wyszukiwarka

podmenu

podmenu artykuł główny artykuł główny

konkursy

reklama aktualności

reklamy

reklama

magazyn informacje

informacje

newsy

informacje

newsletter

newsy

opinie

menu w stopce menu w stopce na stronie o.pl obszar przeznaczony na aktualności, artykuły i główne wydarzenia, zajmuje dużo mniej miejsca niż to jest na purpose.pl, a także na purpose układ elementów jest klarowny

cele stron

strona główna

podział strony na główne elementy

podział na rodzaj elementów strony

grafika, kolorystyka i teksty stron

część 1 - porównawcza analiza własna elementy statyczne

elementy dynamiczne

na obu dwóch stron rozkład i układ elementów statycznych i dynamicznych jest podobny, lecz na o.pl elementów jest znacznie więcej

strona główna

podział strony na główne elementy

podział na rodzaj elementów strony

grafika, kolorystyka i teksty stron

obszar obejmowania strony przez ekran

część 1 - porównawcza analiza własna linki wewnętrzne

linki zewnętrzne

strona o.pl posiada więcej linków zewnętrznych i miejsc gdzie można opuścić stronę, natomiast purpose.pl posiada tylko jedno zawsze to samo miejsce na reklamy czyli linki zewnętrzne

strona główna

podział strony na główne elementy

podział na rodzaj linków na stronie

grafika, kolorystyka i teksty stron

obszar obejmowania strony przez ekran

część 1 - porównawcza analiza własna kolorystyka strony i tekstów logo

logo

kolorystyka

kolorystyka

tło

napisy

tło

B B B B B B B B B B

podział strony na główne elementy

podział na rodzaj elementów strony

napisy

B B B B B

kolorystyka strony i tekstów

obszar obejmowania strony przez ekran

mapy stron

część 1 - porównawcza analiza własna ułożenie i wyśrodkowanie stron względem ekranu

5,6 długości ekranu układ pionowy

1,33 długości ekranu układ poziomy

wielkość ekranu o przekątnej 16:9

porównaie długości stron, mierzone w długościach ekranu dłuższa strona przekłada się na dłuższe jej przewijanie, a tym samym negatywnie wpływa na jej użytkowanie jak widać strona o.pl jest kilkukrotnie dłuższa od purpose.pl dodatkowo strona o.pl jest lokalizowana na lewą stronę ekranu z rozpraszającą uwage grafiką po prawej, kiedy purpose.pl jest wycentrowana na środku ekranu podział na rodzaj elementów strony

grafika, kolorystyka i teksty stron

obszar obejmowania strony przez ekran

mapy stron

uwagi

część 1 - porównawcza analiza własna

Home

News

Wydarzenia

Magazyn

Nagroda O

Cytaty

Kartki

Info

Magazyn

Archiwum

Wydarzenia

Kultura

Nauka

Przedsięb.

Wywiad

News -> Archiwum

Home

Start

Start

Katalog

Start

Wstep

Architektura

Technologia

Oferty pracy

Architektura

Artykul

O Nagrodzie O

Najnowsze

Top Kartki

Partnerzy

Wywiad

Wzornictwo

Badania i rozwoj

Profile

Design

Myslnik

Kontakt

Kategorie

Nowosci

Reklama

Prezentacja

Sztuka

Edukacja

Przetargi

Film

Opinie

FotoWall

Pomoc

Kontakt

Analiza

Moda

Fotografia

Renzje

Lista autorów

Literatura

Rozmowy

Impressum

Kariera

Muzyka

Przemysl kultury

Film i teatr

Muzyka

Mloda kultura

Turystyka

Nowe Media

Warsztaty Felieton

Taniec

Margines

Peco

Wideo

Prawo

Polityka pryw.

Sztuka

Pleasure

Teatr Konferencje Historia Kids Nagłówek O Purpose

Stopka Copyright

Praca

Polityka pryw.

XHTYML 1.1

Kontakt

CSS

Reklama

Created by...

Kontakt

Partnerzy

RSS

Newsletter

Rejestracja

Logowanie

Powered by...

graficzne przedstawienie map stron, stworzone by zaprezentować ilość zakładek występujących po rozklikaniu danej zakładki menu głównego

cele stron

Reklama

strona główna

menu główne zakładki po rozwinięciu menu

mapy stron

draftest

uwagi

English

część 1 - porównawcza analiza własna

opis badania

średnie z poszczególnych kategorii Draftestu: O.pl

- test oceny wizualnej części strony - przeprowadzany na grupie 10 osób - każda z osób dokonuje oceny walorów strony www w skali od 1 do 5, w sześciu kategoriach - przedmiotem testu była strona “home” - badanie wykonywane za pomocą programu online na stronie www.draftest.com

4,09

kategorie ocenianie według Draftestu:

-

pierwsze wrażenie kolory widoczność loga innowacyjność struktura informacji użyteczność

purpose pierwsze wrażenie

3,9

3,7

kolory

3,2

3,8

widoczność loga

3,86

3,21

innowacyjność

3,1

3,55

struktura informacji

3,7

3,27

użyteczność

3,99

wyniki

O.pl stwarza lepsze pierwsze wrażenie oraz kusi kolorami natomiat purpose.pl zdobyło lepszą ocene ze względu na użyteczność strony

strona główna

mapy stron

draftest

opinia własna

badania

część 1 - porównawcza analiza własna łatwość i płynność nawigacji - wiele odnośników do podstron - wstępny natłok informacji kompletnie dezorientuje - bardzo długa strona co przekłada się na ciągłe przewijanie

- klarowność układu i przemyślana kategoryzacja działa dodatnio na szybkość trafienia w szukane miejsce na temat danej kategorii

czytelność układu strony - pierwsze wrażenie chaosu panującego na stronie - całość dzieli sie w odrębne ciągi dotyczące różnych zagadnień - przesunięcie strony do lewej krawędzi ekranu

- strona wyśrodkowana na ekranie, - proste środki graficzne sprzyjają czytelności układu, - strona przejrzyście podzielona na obszary tematyczne

kategoryzacja treści - szczegółowa, logiczna - czasem odnośniki nie pokrywają się z treścią wyświetlaną po kliknięciu weń

- szczegółowa, logiczna - odnośniki pokrywają się treściowo z ich nazwą - kilka niezrozumiałych odnośników dla laika

zrozumiałość treści dla użytkownika - treść zrozumiała, bogata w informacje, przyjemna w czytaniu

- świetnie skategoryzowane odnośniki - wydaje się czasem że informacja nie jest w pełni kompetentna

sposób prezentacji odnośników i informacji - obraz dotyczący artykułu podpisany krótkim zdaniem na temat oraz tekst dotyczący artykułu - wyróżnienie tematu artykuły kolorem - gęsto od informacji

- artykuł wspierany obrazem, lecz nie podpisanym - temat w nagłówku artykułu - bez wyróźnienia kolorystycznego, za to z dużym kontrastem między treścią i osobnymi artykułami

estetyka grafiki - żywe lecz nie rzucające się kolory menu - pstrokate, rozpraszające elementy graficzne - tekst oraz obrazy artukułów przedstawiane na białym tle

mapy stron

draftest

opinia własna

- ascetyczna monochromatyczna kolorystyka - czystość, biel - czarne subtelne napisy w menu jak i artykułach

badania

oceny

część 2 - badanie z użytkownikami

opis badania

zaobserwowanie reakcji użytkownika podczas poruszania się na stronie każda z osób ma do wykonania na stronie trzy polecenia rejestrowana oraz badana jest droga użytkowników do celu, ilość błędnych wyników oraz powrotów na strone główną w tym badaniu analizowany jest stopień zrozumienia, intuicyjności oraz kategoryzacji treści strony sesja nagrywana jest za pomocą programu CamStudio test przeprowadzany jest na 3 osobach

komendy dla użytkowników dla strony O.pl

a b c

odnajdź i zamów newsletter na stronie znajdź informacje na temat American Film Festival znajdź artykuł Bunkry. Mistyczne, barbarzyńskie, znudzone

komendy dla użytkowników dla strony Purpose

a b c

odnajdź i zamów newsletter na stronie znajdź wydanie magazynu z czerwca 2010 dowiedz się o produkcie Zegar kuchenny “Magnetic”

draftest

opinia własna

opis badania

komenda a strony O.pl

komenda b strony O.pl

część 2 - badanie z użytkownikami komenda a - odnajdź newsletter na stronie użytkownik 1 0:13 cel

poziomy strony 1 2

strona główna

3

użytkownik 2

poziomy strony 1

0:09

0:17

news

cel

strona główna

2 3

użytkownik 3

poziomy strony 1 2

0:16

0:28

0:39

magazyn

home

cel

strona główna

3

linie oznaczają uproszczony ślad kursora

opinia własna

badania

kierunek krzywej zależy od wgłębiania sie w strukture strony kierunek w góre oznacza powrót

komenda a strony O.pl

komenda b strony O.pl

komenda c strony O.pl

część 2 - badanie z użytkownikami komenda b - znajdź informacje na temat American Film Festival użytkownik 1 0:04 0:07 wydarzenia

poziomy strony 1 2

film

0:18 cel

strona główna

3

użytkownik 2

poziomy strony 1

0:10

0:28

wydarzenia

szukaj

0:39 0:45 enter

cel

strona główna

2 3

użytkownik 3

poziomy strony 1 2

0:06

0:23

0:31

0:43

news

wydarzenia

film

cel

strona główna

3

linie oznaczają uproszczony ślad kursora

badania

komenda a strony O.pl

kierunek krzywej zależy od wgłębiania sie w strukture strony kierunek w góre oznacza powrót

komenda b strony O.pl

komenda c strony O.pl

zestawienie wyników strony O.pl

część 2 - badanie z użytkownikami komenda c - znajdź artykuł Bunkry. Mistyczne, barbarzyńskie (...) użytkownik 1 0:05 0:08 magazyn artykuł

poziomy strony 1 2

0:19

0:28

0:38 0:42 0:47 0:50 0:55 1:02

kolejna strona

kolejna strona

szukaj enter strona szukaj enter główna

cel

strona główna

3

użytkownik 2 0:08 fotografia

poziomy strony 1

0:20 0:26 0:29 0:36 kolejna szukaj enter strona

cel

strona główna

2 3

użytkownik 3

poziomy strony 1 2

0:02

0:06 0:11 0:17

0:34

szukaj

enter magazyn artykuł

news

0:49 0:55 fotografia

cel

strona główna

3

linie oznaczają uproszczony ślad kursora

komenda a strony O.pl

komenda b strony O.pl

kierunek krzywej zależy od wgłębiania sie w strukture strony kierunek w góre oznacza powrót

komenda c strony O.pl

zestawienie wyników strony O.pl

średnia czasów dla strony O.pl

część 2 - badanie z użytkownikami komenda a

komenda b

komenda c

linie oznaczają uproszczony ślad kursora, a koła ukazują cel wyznaczony dla danej komendy

użytkownik 1

wyraźnie widać iż trzecia komenda dotycząca odnalezienia konkretnego artykułu była najbardziej problematyczna dla badanych, co widać po zawiłych śladach kursora biegnących po mapi, problemem była niedokładna wyszukiwarka wbudowana w stronę

użytkownik 2 użytkownik 3 komenda b strony O.pl

komenda c strony O.pl

zestawienie wyników strony O.pl

średnia czasów dla strony O.pl

komendy dla użytkowników strony Purpose

część 2 - badanie z użytkownikami średnia wszystkich użytkowników komenda a

0:23

0:39

0:13

po lewej wykresy przedstawiają osobno czas poszczególnych użytkowników jaki poświęcili by wykonać polecenie po prawej średnie czasów wszystkich użytkowników dla danej komendy

0:17

komenda b 0:45

0:43

komenda a - została wykonana w miarę szybko i łatwo

0:18

komenda b - umiarkowanie trudna

komenda c 1:02 0:55

komenda c - wykonanie tego polecenia nie należało do łatwych

0:51

0:36

użytkownik 1 komenda c strony O.pl

0:35

ze względu na czas:

użytkownik 2

użytkownik 3

zestawienie wyników strony O.pl

czasy podawane są w sekundach

średnia czasów dla strony O.pl

komendy dla użytkowników strony Purpose

komenda a strony purpose.pl

część 2 - badanie z użytkownikami komenda a - odnajdź newsletter na stronie użytkownik 1 0:09 cel

poziomy strony 1 2

strona główna

3

użytkownik 2 0:04 0:10 magazyn

poziomy strony 1 2

cel

strona główna

3

linie oznaczają uproszczony ślad kursora

użytkownik 3 0:05 cel

poziomy strony 1 2

strona główna

3

kierunek krzywej zależy od wgłębiania sie w strukture strony kierunek w góre oznacza powrót

zestawienie wyników strony O.pl

średnia czasów dla strony O.pl

komenda a strony purpose.pl

komenda b strony purpose.pl

komenda c strony purpose.pl

część 2 - badanie z użytkownikami komenda b - znajdź wydanie magazynu z czerwca 2010 uzytkownik 1

poziomy strony 1 2

0:06 0:12

0:27

magazyn archiwum

cel

strona główna

3

użytkownik 2 0:10 0:15 0:19 0:27 archiwum szukaj enter

poziomy strony 1 2

brak wyników

0:33 archiwum

0:48 cel

strona główna

3

linie oznaczają uproszczony ślad kursora

użytkownik 3

poziomy strony 1 2

0:08

0:20

archiwum

cel

strona główna

3

kierunek krzywej zależy od wgłębiania sie w strukture strony kierunek w góre oznacza powrót

średnia czasów dla strony O.pl

komenda a strony purpose.pl

komenda b strony purpose.pl

komenda c strony purpose.pl

zestawienie wyników strony Purpose

część 2 - badanie z użytkownikami komenda c - dowiedz się o produkcie Zegar kuchenny “Magnetic” użyrkownik 1 0:12 0:18 wyszukiwanie

poziomy strony 1 2

0:27

enter

cel

strona główna

3

użyrkownik 2

poziomy strony 1 2

0:14 0:18

0:40 0:45 0:49

nauka

szukaj enter

technologia

cel

strona główna

3

linie oznaczają uproszczony ślad kursora

użyrkownik 3 0:03 0:07 0:18 szukaj enter

poziomy strony 1 2

cel

strona główna

3

kierunek krzywej zależy od wgłębiania sie w strukture strony kierunek w góre oznacza powrót

komenda a strony purpose.pl

komenda b strony purpose.pl

komenda c strony purpose.pl

zestawienie wyników strony Purpose

średnia czasów dla strony Purpose

część 2 - badanie z użytkownikami

komenda a

komenda b

komenda c

linie oznaczają uproszczony ślad kursora, a koła ukazują cel wyznaczony dla danej komendy

użytkownik 1

w tym wypadku komenda b dotycząca znalezienia konkretnego wydania magazynu z czerwca 2010 roku przysporzyła najwięcej kłopotów

użytkownik 2 użytkownik 3 komenda b strony purpose.pl

komenda c strony purpose.pl

zestawienie wyników strony Purpose

średnia czasów dla strony Purpose

zestawienie wyników dla obu stron

część 2 - badanie z użytkownikami średnia wszystkich użytkowników komenda a

0:09

komenda b

0:10

0:05

0:48

po lewej wykresy przedstawiają osobno czas poszczególnych użytkowników jaki poświęcili by wykonać polecenie po prawej średnie czasów wszystkich użytkowników dla danej komendy ze względu na czas:

0:27

komenda a - bardzo szybko 0:20

komenda b - umiarkowanie trudna

0:08 0:32

komenda c - umiarkowanie trudna

komenda c

0:49

0:31

0:27 0:18

użytkownik 1 użytkownik nr 3 strony Purpose

użytkownik 2

użytkownik 3

zestawienie wyników strony Purpose

czasy podawane są w sekundach

średnia czasów dla strony Purpose

zestawienie wyników dla obu stron

średnia czasów dla obu stron

część 2 - badanie z użytkownikami komenda a

użytkownik 1 użytkownik 2 użytkownik 3 zestawienie wyników strony Purpose

komenda b

komenda c

zamierzony stopień trudności wzrastał z każdym kolejnym poleceniem we wszystkich wypadkach jest zauważalne że strona O.pl wymaga dużo dłuższego, czasochłonnego przewijania strony i odnaleźć dany wynik większosć komend dla purpose.pl ograniczało się w polu górnym polu strony średnia czasów dla strony Purpose

zestawienie wyników dla obu stron

średnia czasów dla obu stron

wnioski

część 2 - badanie z użytkownikami komenda a

0:23

komenda a - dotycząca odnalezienia newslettera została wykonana błyskawicznie na stronie purpose. pl, kiedy na O.pl opcja ta była ledwo zauważalna mimo powtarzania się elementu newslettera na każdej stronie

0:08

komenda b

0:35

komenda b - której celem było odnalezienie informacji dotyczących dla wydarzenia lub magazynu, w obu przypadkach rozwiązane w podobnym czasie

0:32

komenda c

0:51

komenda c - odnalezienie dokładnie sprecyzowanego zagadnienia, strona O.pl okazała się być bardziej wyzywającą w porównaniu do drugiej

średnie czasy wykonywania poleceń dla O.pl

średnia czasów dla strony Purpose

zestawienie wyników dla obu stron

0:31

średnie czasy wykonywania poleceń dla purpose.pl

średnia czasów dla obu stron

opinia badanych

wnioski

część 2 - badanie z użytkownikami łatwość i płynność nawigacji - bogatość odnośników - ciągłe przewijanie strony, okazało sie nie być na tyle irytujące

- klarowność układu i przemyślana kategoryzacja działa dodatnio na szybkość trafienia w szukane miejsce na temat danej kategorii

czytelność układu strony - pierwsze wrażenie chaosu panującego na stronie - problemy z odczytaniem treści - przesunięcie strony do lewej krawędzi ekranu

- strona wyśrodkowana na ekranie, - proste środki graficzne sprzyjają czytelności układu, - strona przejrzyście podzielona na obszary tematyczne

kategoryzacja treści - zbyt rozbudowana - nie pokrywające się, mylne odnośniki

- odnośniki pokrywają się treściowo z ich nazwą - lecz mylą użytkownika - kilka niezrozumiałych odnośników dla laika

zrozumiałość treści dla użytkownika - treść zrozumiała, bogata w informacje, przyjemna w czytaniu

- świetnie skategoryzowane odnośniki - wydaje się czasem że informacja nie jest w pełni kompetentna

sposób prezentacji odnośników i informacji - obraz dotyczący artykułu podpisany krótkim zdaniem na temat oraz tekst dotyczący artykułu - duża ilość informacji na stronie głównej jako zaleta

- artykuł wspierany obrazem, lecz nie podpisanym - temat w nagłówku artykułu - bez wyróźnienia kolorystycznego, za to z dużym kontrastem między treścią i osobnymi artykułami

estetyka grafiki - pierwsze wrażenie - zbyt wiele dzieje się na ekranie - pstrokate, rozpraszające elementy graficzne - tekst oraz obrazy artukułów przedstawiane na białym tle średnia czasów dla strony Purpose

zestawienie wyników dla obu stron

- ascetyczna monochromatyczna kolorystyka - czystość, biel - czarne subtelne napisy w menu jak i artykułach

opinia badanych porównanie

wnioski

część 3 - porównanie analizy własnej z badaniem użyteczności analiza własna

opinie badanych

analiza własna

opinie badanych

łatwość i płynność nawigacji

czytelność układu strony

kategoryzacja treści

zrozumiałość treści dla użytkownika

sposób prezentacji odnośników i informacji

estetyka grafiki

porównanie przedstawia średnie opiń własnych oraz użytkowników strona purpose.pl cechuje się łatwiejszą nawigacją i większą przejrzystością, natomiast o.pl posiada więcej informacji zestawienie wyników dla obu stron

opinia badanych porównanie

wnioski

część 3 - porównanie analizy własnej z badaniem użyteczności

wnioski dla strony O.pl:

wnioski dla strony Purpose:

- tracony czas na przewijaniu, przekłada się na długi czas poszukiwań

- opcja wyszukaj działa tylko na wybraną główną zakładkę, tak więc nie znajdzie się informacji na temat danej rzeczy w nieodpowiedniej zakładce głównej, np inf. na temat magazynu nie wyszukają się w zakładce o Nagrodzie ‘O’

- bardzo sprawna wyszukiwarka wbudowana w stronę,

- wygodna archiwizacja treści i ich sposób przedstawiania, nie wymaga ciągłego przewijania

- strona za to nie zawiera tylu infomracji co porównywana,

- duża kategoryzacja wpływa pozytywnie na łatwość szukania, ale nie niweluje problemu przewijania ze względu na ogromną ilość treści jaką przedstawia opisywana strona

ogółem:

- czasochłonne przewijanie strony,

- zbyt skumulowane przedstawianie treści, - więcej informacji

opinia badanych porównanie

ogółem:

wnioski

- łatwość nawigacji, - łatwe wyodrębnianie poszczególnych treści, - mniej informacji