Badanie użyteczności strony www customtop.eu by Zakład Badań Wizualnych i Interakcji

BADANIE UŻYTECZNOŚCI SKLEPU INTERNETOWEGO WWW.CUSTOMTOP.EU

Pracownia Badań Użyteczności prowadzący: prof. ASP dr hab. Wiesław Gdowicz, asyst. Marta Więckowska Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych w Katowicach rok akademicki 2014/2015 Magdalena Habarta, Kacper Blajer, Kamil Kowalczyk, Klaudia Korniluk

spis treścI

1. Założenia strony Cele strony Grupa docelowa 2. Analiza cech wizualnych Kolorstyka Typografia 3. Analiza funkcjonalnosci Rodzaje funkcji przed i po zalogowaniu Rodzaje interakcji 4. Analiza budowy strony strona główna workshop workschop>pattern workshop> cloth workschp> extras workschop> order podsumowanie 5. Badania użyteczności projekt badania schemat ankiety A schemat badania schemat ankiety B analiza ankiety A analiza badania podsumowanie analiza ankiety B wnioski

CELE strony i grupa docelowa

CELE sprzedaż: - sprzedarz ubrań uszytych według projektu klienta. - wysokiej jakości materiałów.

GRUPA DOCELOWA - użytkownikami strony mogą być wszyscy zainteresowani niezależnie od wieku, osobami korzystającymi z strony bedą: - młodzi projektanci.

projektowanie: - pomoc młodym projektantom w wykonaniu ich projektów. - usprawnienie i uproszczenie komunikacji projektant - wykonawca. - umożliwienie sporządzenia dokładnej dokunentacji i kosztorysu projektu. pozyskiwanie stałych klientów: - strona oferuje założenie profilu, dzięki któremu potencjalny klient zawsze będzie mógł do niej wrócić. - prezentacja firmy i jej działalności.

- osoby zaczynające pracę w branży modowej. - osoby planujące sprzedaż zaprojektowanych przez siebie ubrań. - osoby oczekujące profesjonalnego wykonawcy na terenie Europy- nie Chin czy Bangladeszu. -mniejsze firmy odzieżowe już dzałające na rynku.

ARCHITEKTURA INFORMACJI Strona główna- www.customtop.eu

Home

About

What we do

Workshop

Contact

Rejestracja

Logowanie

Profil użytkownika Nowy projekt

/otwórz zapisany plik/ zapisz plik dane szczegółowe

Rodzaj ubrania zamówienia

bluza/ tishirt damski/męski

kolekcje Krój zapisane projekty opis rozmiaru

Szczegółowy wybór rozmiaru

Kolor/ rodzaj tkaniny Nadruk/aplikacja rodzaj Wykończenie szwu

wczytaj własny projekt

Wykończenie kołnierzyka Metka (labels) Rodzaj wczytaj własny projekt Metka (hangtags) Rodzaj Naklejka standardowa

wczytaj własny projekt wczytaj własny projekt Zamów

ilość sztuk i rozmiar

Otrzymaj ofertę

ANALIZA strony głównej

Pierwsze wrażenie: Strona wygląda na uporządkowaną, prostą i nieskomplikowaną w obsłudze. Takie wrażenie powoduje przede wszystkim mała ilość elementów na stronie głównej i duża ilość wolnego miejsca- strona nie jest przeładowana. Największym elementem jest zdjęcie z hasłem reklamowym. Zdjęcia na tym polu zmieniają się tworząc pokaz slajdów, dominują nad pozostałymi elementami strony - tworzą jej charakter.

Zakładki przekierowywujące do podstron znadują się u góry strony. Dzięki tej nawigacji możemy wejść i wrócić w dowolne miejsce na stronie. Drugi pasek odnośników znajduje się w formie kafelków po prawej stronie. Kafle są kolorowe i dużo bardziej atrakcyjne wizualnie niż zakładki u góry, jednak brakuje im czytelnych i w pełni zrozumiałych opisów.

Po środku strony na białym tle zostały umieszczone krótkie teksty informujące czym się zajmuję dana firma. Tekst jest czytelny, współgra z kompozycją strony, tworząc wspólną całość.

kolorystyka i typografia

KOLORYSTYKA

TYPOGRAFIA

Strona utrzymana jest raczej w neutralntch barwach. Najwięcej kontrastujących ze sobą kolorów zawiera.

Strona customtop.eu wykorzystuje dwa kroje bezszeryfowe: arial i trebuchet ms. W następujących odmianach:

sygnet: - składa się z nasyconych oraz intensywnych kolorów. tło strony: - stanowi tekstura tkaniny w szarym, neutralnym kolorze.

typografia

tło

- arial, regular, punktacja od 10 px do 15 px - trebuchet ms, punktacja od 14 px do 26 px sygnet

- poza sygnetem, największym akcentem kolorystycznym są kafelki po prawej stronie. - kolor fontu przycisków paska narzędzi, jest ciemniejszy od tła, na którym się znajduje. W efekcie pasek narzędzi wychodzi na pierwszy plan.

ARIAL, regular rozmiar 16 px

- pozostałe teksty są w kolorze czarnym i są umiejscowione na białym tle.

ARIAL, regular rozmiar 12 px

ANALIZA FUNKCJONALNOŚCI

niezalogowany kliknięcie w baner

wybór przedmiotu: koszulka, bluza

wybór kroju

tabela rozmiarów

wybór koloru projektu

wybór przedmiotu: koszulka, bluza

wybór kroju

tabela rozmiarów

wybór koloru projektu

dekoracje

logowanie

zalogowany kliknięcie w baner

Droga użytkownika niezalogowanego wynosi sześć etapów do złożenia zamówienia, kończy się w momencie wyboru dodatków. W celu kontynuowania procesu, konieczne jest zalogowanie się. Dla użytkownika niezalogowanego workshop jest prezentacją usług firmy. Po zalogowaniu konieczny jest powrót do początku, gdyż strona nie zapamietuje wcześniej wykonanych kroków przed zalogowaniem. Użytkownik zalogowany ma dostęp do wszystkich opcji warsztatu, w tym możliwość wzbogacenia projektów o zaprojektowane przez siebie dodatki takie jak nadruk czy metka. Gotowy projekt można zapisać lub wysłać do usługodawcy w celu wykonania wykroju i kosztorysu.

niezalogowany - rejestracja w serwisie. - możlowiść obejrzenia filmu promującego markę. - dostęp do pomocy i objaśnień w trakcie pracy z kreatorem odzieży. utworzenie własnego projektu ograniczone do: - wyboru kroju t-shirt/bluzy. - wyboru koloru i materiału. - wyboru wykończenia i szw.u

wczytania własnego projektu

wysyłka

dekoracja/ wykończenia/ metki

zalogowany dostęp do funkcji kreatora odzieży wzbogacony o: - wybranie rozmiaru t-shirt/bluzy. - zapisanie oraz otwarcie wcześniej zapisanego projektu. - wczytanie włanego wzoru/ aplikacji. - wczytanie własnej metki do ubrania- wiszącej i przyszywanej. - wysłanie projektu w celu sporządzenia dokumentacji dostęp do panelu użytkownika w którym znajduje się: - informacje kontaktowe. - informacje o złożonych zamówieniach. - zapisane wcześniej projekty.

ANALIZA BUDOWY STRONY > strona główna

Układ strony głownej jest prosty. Na górze strony zostały umieszczone po kolei: logo, menu i zakładka logowania

elementy stałe (górna część)

Środkowa część strony jest prezentacyjna, tutaj autorzy prezentują grafiki promocyjne oraz informacje tekstowe o założeniach i przeznaczeniu portalu. Na samym dole zostało umieszczone pomniejszone menu z górnej części strony, oraz linki przekieruwujące do portali społecznościowych np. facebook. część prezentacyjna (środkowa)

elementy stałe: elementy które pojawiają się w kązdej zakładce. elementy aktywne: elementy przekieruwujące w kolejne zakładki. zdjecia. tekst

stopka (część dolna)

ANALIZA BUDOWY STRONY > strona główna logo menu Na stronie głównej znajduje się kilka zakładek, które jednocześnie przekieruwują w to samo miejsce. Wyodrębniono cztery takie pary: zakładki przekierowują z strony głównej na stronę główna. W przypadku dwóch pierwszych: logo i menu, które są elementami stałymi, jest to uzasadnione, gdyż pozwalają one użytkownikowi usunąć się z dowolnego miejsca na stronie na stronę początkową. elementy przekieruwujące do strony z informacjami o firmie CustomTop. elementy przekierowują do strony z informacjami o usługach firmy CustomTop. Odnośnik mało ważny w hierarchi ważnośći. Zakładka przenosząca do najważniejszego miejsca na stronie customtop.eu, do kreatora tworzenia zamówienia. Jest to słabo wyróżniona funkcja, równoważna z pozostałymi.

panel logowania

ANALIZA BUDOWY STRONY > workshop

Workshop to najważniejsze miejsce na stronie customtop, gdzie możemy zaprojewktować jedno z trzech odziań wierzchnich oraz zakupić ich produkcję. Panel startu sklada sie z trzech schematycznych rysunków ubrań wierzchnich: czapka, t-shirt oraz bluza. Są to okna wyboru produktu, który chcemy zaprojektować, każde takie okno pod spodem ma podział na wersje męską lub damską. Dalsza analiza została przeprowadzona na przykadzie zakupu t-shirtu męskiego(czerwony prostokąt). Kreator zawiera własne menu, którego zakładki odnoszą się do kolejnych etapów projektowania ubrania.

drugi pasek zadań

pola wyboru CAPS

T-SHIRT

SWEAT SHIRT

panel startu

ANALIZA BUDOWY STRONY > workshop

Po wyborze rodzaju ubrania, które chcemy zakupić kreator umożliwia projektowanie ubrania w czterech następujących etapach: pattern, cloth, extras, order. W zakładce pattern użytkownik wybiera krój koszulki(do wyboru ma 19 kroi). Proces wyboru kroju jest szybki i nieskomplikwany.

pattern

cloth

extras

order

ANALIZA BUDOWY STRONY > workshop

Kolejnym krokiem jest zapoznanie się z dostępnymi wymiarami ubrania. Po prawej stronie znajduje sie duży uproszczony rysunek koszulki z wzorcowymi wymiarami, za to po lewej jest tabela z której owe wymiary możemy odczytać. Niestety proces ten kończy się jedynie na odczytaniu dostępnych wymiarów. Wybór będzie dokonywany w ostatnim etapie order, jezeli użytkownik nie zapamięta swoich wymiarów, będzie musiał spowrotem wrócić do tej zakładki. Ciekawą opcją jest wejście w zakładkę customize, która ma umożliwić wpisanie własnych wymiarów, jednak w praktyce ten proces nie działa, gdyż wymiary wpisujemy w końcowym etapie zamówienia. Na tej podstronie użytkownik jedynie może uzyskać informacje o dostpnych rozmiarach, ale nie dokonuje tutaj ich wyboru. Mylące dla odbiorcy mogą być tabela rozmiaró oraz zakładka customize.

pomoc

cloth

extras

order

informacja o koszulce C

wstecz

B A tabela rozmiarów customize następna strona

pattern

dostępne rozmiary

ANALIZA BUDOWY STRONY > workshop

Cloth to kolejny krok podczas projektowania koszulki. Po prawej stronie znajduje się koszulka na którą zostały umieszczone cztery cyfry: 1; 2; 3; 4. Znajdują się one również w panelu bocznym: Każda z cyfr odnosi się od innej części koszulki. Użytkownik może przypisać każdej części ten sam lub odmienny kolor. Następnie kupujący wybiera rodzaj tkaniny ma do wyboru aż 11 rodzai. Kupujący może wybrać również własne barwy oraz rodzaj tkaniny w zakładce mycustom.

pattern

wybór miejsca dla koloru

cloth

all 1. 2. 3. 4.

Iość kroków do wykonania w tej podstronie: 3

wybór koloru i tkaniny

dostępne rozmiary

następna strona

zamów

extras

order

ODNOŚNIK DO UMIESZCZENIA KOLORU (widok z przodu)

wybór przodu albo tyłu koszulki

ANALIZA BUDOWY STRONY > workshop

Po wybraniu opcji my custom pokazuje się mniejsze okienko, w którym znajdują się 2 podkategorie: - wybór tkaniny. - wybór próbki kolorytycznej. Opcja my custom ma też zastosowanie przy nadawaniu kolorów dla poszczególnych części tkanin, produkt możemy zobaczyć z przodu oraz z tyłu. Następny krok to przejście do zakładki extras, prowadzą do niej przyciski: - następna strona. - zamów. -extras w panelu głównym.

pattern

wybór miejsca dla koloru

cloth

all 1. 2. 3. 4.

dostępne rozmiary

mycustom

następna strona

zamów

extras

order

ODNOŚNIK DO UMIESZCZENIA KOLORU (widok z przodu)

wybór przodu albo tyłu koszulki

ANALIZA BUDOWY STRONY > workshop

Zakładka Extras jest trzecim etapem podczas projektowania swojej koszulkii, podzielona jest na 6 podstron. Pierwszą z nich jest zakładką decorations.

pattern

cloth

extras

order

typy dekoracji

pola aktywne do wpisu/ wyboru dla użytkownika wybór dekoracji poprzez rozwinięcie listy

decorations

crew neck finish

neck finish

labels

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

Po wybraniu zakładki decorations otwiera się okno. Jeżeli jesteśmy zalogowani automatycznie przechodzimy do zakładki your decorations w przeciwnym wypadku strona automatycznie przerzuca nas do okienka types of decoraions z pominięciem wcześniejszej zakładki.

CLOTH

PATTERN

EXTRAS

ORDER

Użytkownik ma możliwość wyboru wszystkich dostępnych dekoracji. DECORATIONS

TYPES OF DECORATIONS

Typy dekoracji PRINT

decorations

crew neck finish

neck finish

EMBROIDERY

labels

OTHERS

ALLOVER PRINT

DIGITAL PRINT

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

Okienko Types of decorations podzielone jest na 5 okienek - rodzaje nadruków na koszulki. TYPES OF DECORATIONS

EMBROIDERY

OTHERS

ALLOVER PRINT

1. print

2. Embroidery

Pierwszą z nich jest okienko print podzielone na 11 typów nadruków np: - plastizol screen print - discharge print - puff print - 3D print - gel print

Zakładka embroidery oferuje 5 rodzai haftów: - direct flat embroidery - direct 3D embroidery - aplication embroidery - trimmed aplication embroidery - patches

DIGITAL PRINT

4. Allover Print

3. Others Umożliwia dodanie dżetów, blaszek do projektu : - sequin - dżety - blachy

Zakładka allover print umożliwia nadruk na całej powierzchni koszulki.

5. Digital Print Zakładka digital print umożliwa nadruk cyfrowy.

decorations

crew neck finish

neck finish

labels

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

Drugą podstroną zakładki extras jest okno crew neck finish. PATTERN

Dział ten oferuje jedno z trzech wykończeń t-shirtu przy szyji, które różnią sie od siebie. t-shirtu przy szyi, które różnią się między sobą grubością szwu i jego wykończeniem.

CLOTH

EXTRAS

ORDER

CREW NECK FINISH

grubość wykończenia

odmiana grubości wykończenia

decorations

crew neck finish

neck finish

RIBB

NOTHING

labels

hantags

stickers

ANALIZA BUDOWY STRONY work shop pattern > cloth > extras > order

Trzecią podstroną w zakładce extras jest okienko neck finish. Korzystając z niej użytkownik ma możliwość wyboru wykończenia ściegu tylnej strony t-shirtu. Do wyboru są 4 rodzaje wykończenia.

EXTRAS NECK FINISH

decorations

crew neck finish

neck finish

labels

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

W zakładce labels znajdują się 4 podstrony z wyborem etykiet: - woven - printed - rubber 3D - others

extras

order

woven Zakładka oferuje 4 rodzaje standardowych materiałowych etykiet: - cut and fold - hot cut - badges - zip pullers sposób wykończenia projektu

LABEL TYPES OF LABELS

WOVEN

rodzaje wykończeń danego sposobu

decorations

crew neck finish

neck finish

labels

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

printed Użytkownik ma do wyboru 2 rodzaje drukowanych etykiet: - satine printed label Wybierając tą możliwość nasze wykończenie będzie drukowane na satynie przez co nadruk staje się delikatny.

extras

order

- woven printed label Przy woven printed abel nasze wykończenie będzie wyglądać jak tkane. LABEL

Rubber 3D TYPES OF LABEL

Jest to nadruk z gumy w technice 3D, często naklejany jest w lewym dolnym rogu ubrania. Others.

sposób wykończenia projektu

Są to różnego rodzaju etykiety.

PRINTED

rodzaje wykończeń danego sposobu

decorations

crew neck finish

neck finish

labels

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

W następnym kroku zakładki extras wybieramy HANGTAGS Jest to tekturowa metka, na której najcześciej umieszcza się grafikę. W przypadku customtop.eu grafikę na hangtag projektujemy sami i musimy wgrać ją jako nowy projekt.

extras

Mamy dwa rodzaje hangtagów: - standardowe prostokątne - niestandardowe w kształcie koszulki

order

HANGTAGS

TYPES OF HANGTAGS

STANDARD

decorations

crew neck finish

neck finish

labels

OTHER S

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

Ostanim krokiem w wyborze dekoracji jest stickers, naklejka, którą możemy wybrać dla naszego produktu. Użytkownik do wyboru ma: - standardową naklejkę Naklejkę która oferuje usługodawca. - naklejka zaprojektowana przez użytkownika

extras

order

W celu dodania własnego projektu neleży: 1. Nacisnąć odnośnik custom 2. Następnie opcję przeglądaj 3. Ostatnim krokiem jest kliknięcie przycisku dodaj własną naklejkę.

STICKERS

STANDARD CUSTOM

decorations

crew neck finish

neck finish

labels

hantags

stickers

ANALIZA BUDOWY STRONY > workshop

Ostatnim etapem projektowania naszego ubioru jest zakładka order. Zawiera ona podsumowanie dotyczące całej dotychczasowej pracy, której dokonaliśmy w procesie projektowym. Zakończenie pracy z projektem nie jest równoznaczne z jego zakupem.

Po lewej stronie mamy podsumowanie całego procesu projektowania. -obowiązkowo należy wybrać nazwę dla naszego zamówienia. - w podsumowaniu znajdzeimy również odnośniki do wszystkich poszczególnych etapów, na wypadek, gdybyśmy potrzebowali coś zmienić. Po prawej stronie natomiast znajduje się rozwijany panel pomocy, taki sam, jak we wcześniejsych krokach. - pod panelem pomocy znajduje się okienko umożliwiające wybór rozmiaru - możemy zamówić po kilka sztuk w różnych rozmiarach. Klient może wybrać termin przesyłki oraz dodać komentarz/ uwagę co do swojego produktu. Po wciśnięciu “get quote” dostajemy informację, że projekt jest w trakcie realizacji i w każdej chwili mamy do niego dostęp w zakładce mystock.

Analiza funkcjonalności / rodzaje interakcji

klikanie

Powiększenie po najechaniu

- klikanie umożliwia wybór opcji , jej zaznaczanie lub przenosi do innej zakładki - podstawowa, najczęściej używana interakcja. - umożliwia sprawne poruszanie się po całej stronie

Interakcja przybliża użytkownikowi wygląd przez powiększenie grafiki ubrania po najechaniu na jego pole kursorem. Umożliwia zapoznanie się ze szczegółami projektu bez konieczności wchodzenia do poszczególnych etapów jego projektu. Występuje w: workshop (type of decorations - wybór rodzaju grafiki na ubranie)

wyświetlenie opisu po najechaniu Po najechaniu na element pojawia się dodatkowy opis wyjaśniający jego funkcję. - interakcja ukazana podczas dokonywania wyboru kroju ubrania, które chcemy zaprojektować. - dzięki niej użytkownik zapoznaje się z charakterystyką danej rzeczy, nie dokonując kolejnego kroku zapoznaje się: czego dotyczy podstrona do której przekierowuje przycisk lub opcja wyboru, której dotyczy, bez konieczności klikania. Występuje w : workshop (wybór kroju ubrania), workshop ( decorations- wybór rodzaju grafiki)

Wyróżnianie elementu po najechaniu na jego pole kursorem - po najechaiu kursorem na obiekt, zostaje on wyróżniony poprzez zmianę koloru lub podświetlenie. - taka interakcja informuje użytkownika, że dany element jest aktywny i można w niego kliknąć. Powoduje również, że wybrana przez nas opcja staje się bardziej widoczna. Występuje w napisach na stałej części strony (home, about, what we do, miejsce logowania)

Przesuwanie suwakiem Scrollowanie Pomaga użytkownikowi przejrzeć konkretną część strony bez przechodzenia do kolejnej.

Przesuwanie, podobnie jak scrollowanie pozwala na odczytanie dalszej części informacji na stronie.

OCENA STRONY- PODSUMOWANIE

minusy - brak wersji strony w języku polskim. - za dużo powtarzalnych się odnośników. - niedziałający suwak w zakładce “workshop”. - niejasny wybór rozmiaru w zakładce “worksop”. - mało zachęcająca szata graficzna. - brak ujednoliconej kolorystyki.

plusy - płynna nawigacja w zakładkach “client panel” i “workshop”. - możliwość powrotu do poprzednich kroków z każdego etapu projektowania. - wiele możliwości personalizacji zamawianego produktu. - strona nie używa plików cookies.

Spotkanie z przedstawicielem firmy – podsumowanie sFORMUŁOWANIE CELÓW I PYTAŃ BADAWCZYCH. - Ofertą firmy jest szycie projektantom zaprojektowanych przez nich kolekcji, które są prznaczone do sprzedaży. Strona nie oferuje sprzedaży ubrań indywidualnym klientom. - Zakładka workshop jest narzędziem komunikacji między projektantem a wyknoawcą- jej użycie ma za zadanie ułatwić proces przygotowania profesjonalnej oferty dla projektanta. - Konieczność wprowadzenia workshopu spowodowana jest tym, że większość koncepcji porojektantów zostaje przysyłana w zbyt ogólnej formie, np rysnku z pominięciem ważnych detali decydujących o cenie lub w formie opisu słownego. - Mimo wprowadzenia zakładki workshop, znaczna część klientów nie chce z niej skorzystać, woli kontaktować się z firmą drogą mailową, wysyłając niepełne koncepcje w załączniku. - Najbardziej rozbudowana zakładka extras zawiera wszsytkie te elementy, które mogą wyróżnić zaprojektowany krój na tle innych. Wnioski wypływające ze spotania: - Aby badanie zostało wykonane poprawnie, sytuacja osoby badanej musi zostać zaaranżowana, ponieważ klientami strony jest ściśle zdefiniowana grupa odbiorców- nie są to przypadkowe osoby odwiedzające stronę.

pytania badawcze - Jakie są pierwsze wrażenia osoby odwiedzającej stronę odnośnie strony głównej oraz samej zakładki Workshop? - Dlaczego użytkownicy preferują kontakt mailowy z firmą zamiast korzystania z zakładki WORKSHOP? - Który etap w workshop sprawia użytkownikowi największe trudności i czym to jest spowodowane? - Jaki etap projektowania trwa najdłużej?

projekt badania Badanie będzie polegać na obserwacji użytkowników podczas korzystania ze strony www.customtop.eu i wykonywania określonych poleceń. Narzędzia wykorzystywane przy badaniu: • ankiety • wywiady • narzędzia do rejestrowania obrazu z poziomu komputera.

Rola badacza: • obserwuje użytkownika, który korzysta z badanej strony internetowej i wykonuje wyznaczone zadanie • zachęca do głośnego komentowania swoich kroków podczas badania •pyta o odczucia związane z użytkowaniem portalu

Ilość osób badanych: 5 osób w wieku od 16-24 lat

część 1: ankieta A

część 2: badanie

część 3: ankieta b

Badanie użyteczności- schemat ANKIETY A

Osoby badane po 2 minutowym zapoznaniu się ze stroną proszone są o wypełnienie ankiety dotyczące oceny portalu.

- skomplikowana/ prosta - chaotyczna/ uporządkowana (badany zaznacza wartość na skali ocen od -5 do 5)

Ankieta składa się z trzech pytań otwartych • Z czym kojarzy ci się strona? • Czego, Twoim zdaniem dotyczy dana strona?

• W jakim stopniu podoba Ci sę strona internetowa? nie podoba mi się/ raczej mi sie nie podoba/ nie mam zdania/ racze mi się podoba/ podoba mi się • Jak łatwo korzysta się ze strony www?

• Jakie, według Ciebie informacje można odnaleźć na stronie? Oraz z testu różnicowania semantycznego:

bardzo trudno/ raczej trudno/ ani łatwo ani trudno/ raczej łatwo/ bardzo łatwo

•Czy strona według Ciebie jest: -tradycyjna/nowoczesna - przyjazna/nieprzyjazna - poważna/zabawna - przejrzysta/ nieprzejrzysta -denerwująca/ przyjemna - zachęcająca/niezacęcająca

część 1: ankieta A

część 2: badanie

część 3: ankieta b

Projekt badania - Część 2

Te badanie ma na celu odpowiedzieć na pytanie: Dlaczego użytkownicy nie chcą korzystać z zakładki workshop? Rodzaj badania i realizacja: Badanie przyjmuje formę bezpośredniej obserwacji użytkowników podczas obsługi badanej strony www. Użytkownicy są proszeni o wcielenie się w rolę projektantów ubrań.

zostaną dzięki programowi Camptasia • Każdy badany dostaje wydruk z poleceniem oraz ilustracją koszulki, którą musi zaprojektować • Badany rozpoczyna pracę będąc zalogowanym użytkownikiem • Badanie rozpoczyna się na stronie startowej serwisu customtop.eu

Treść polecenia: www.customtop.eu to strona umożliwiająca początkującym projektantom uszycie kolekcji ubrań według ich własnego projektu. ZADANIE: Wyobraź sobie, że jesteś początkującym projektantem i potrzebujesz wykonać 50 sztuk koszulek: w rozmiarze L. Projekt Twojej koszulki widoczny jest poniżej. Wykorzystaj do tego serwis customtop.eu. Masz nieograniczony czas na wykonanie zadania.

•zachowania użytkownika zarejestrowane

część 1: ankieta A

część 2: badanie

część 3: ankieta b

Projekt badania - część b

Cel badania: Dowiedzieć się jakie elementy serwisu są dla użytkownika niejasne? Ilość badanych: 5 osób w wieku 16-24 lat Rodzaj i realizacja badania: Jest do badanie bezpośrednie, po wykonaniu polecenia w części B badania użytkownik proszony jest o wypełnienie ankiety papierowej. Ankieta zbudowana jest z 5 pytań:

W ankiecie użytkownik ma 5 możliwości odpowiedzi:

1. Zakładka Extras jest zrozumiała.

1. Zdecydowanie się nie zgadzam

2. Praca w workshopie jest mniej problematyczna niż wyjaśnienie swoje go projektu poprzez rozmowę.

2. Nie zgadzam się 3. Nie mam zdania

3. Wrócę na stronę przy kolejnym projekcie bluzki. 4. Zgadzam się 4. Mam problem z odnalezieniem zakładki Workshop 5. Zdecydowanie się zgadzam 5. Zakładka workshop jest przeze mnie odebrana poztywnie. Odpowiedzi ankiety oparte są na 5-stopniowej skali Likert’a . Użytkownik wybiera jedną odpowiedź wyrażając swoją opinię. część 1: ankieta A

część 2: badanie

część 3: ankieta b

podsumowanie badania użyteczności- ankieta a

Z czym kojarzy Ci się oglądana strona www? Odpowiedzi:

W jakim stopniu podoba ci się strona internetowa? • raczej mi się podoba - 3 odpowiedzi • ani mi sie nie podoba ani mi się podoba -1 odpowiedź

sklep internetowy, młodzież, moda, dzianina

Wskaż elementy, które:

Czego twoim zdaniem dotyczy oglądana strona www?

•przyciągają twoją uwagę logo, zdjęcie, menu na górze

Odpowiedzi: ubrania (3 odpowiedzi), projektowanie ubrań Określ jakie cechy możesz przypisać oglądanej stronie

•których funkcje są według ciebie niejednoznaczne reklamy, zdjęcia na środku, • które podobają ci się najbardziej baner reklamowy - 2 odpowiedzi, tło, logo • elementy na stronie których nazwy/pojęcia są według ciebie niezrozumiałe brak odpowiedzi

Jak myślisz czy łątwo/trudno będzie się korzystać ze strony www i odnajdywać na niej potrzebne informacje? raczej łatwo - 2 odpowiedzi bardzo łatwo - 2 odpowiedzi

ankieta a- ODPOWIEDZI NA PYTANIA ZAMKNIęTE

tradycyjna

-5 -4 -3 -2 -1 0 1 2 3 4 5

nowoczesna

przyjazna

nieprzyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

zabawna

poważna

-5 -4 -3 -2 -1 0 1 2 3 4 5

zabawna

nieprzejrzysta

-5 -4 -3 -2 -1 0 1 2 3 4 5

przejrzysta

nieprzejrzysta

-5 -4 -3 -2 -1 0 1 2 3 4 5

przejrzysta

denerwująca/drażniąca

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjemna

denerwująca/drażniąca

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjemna

zniechęcająca do korzystania

-5 -4 -3 -2 -1 0 1 2 3 4 5

zachęcająca do korzystania

zniechęcająca do korzystania

-5 -4 -3 -2 -1 0 1 2 3 4 5

zachęcająca do korzystania

skomplikowana

-5 -4 -3 -2 -1 0 1 2 3 4 5

prosta

skomplikowana

-5 -4 -3 -2 -1 0 1 2 3 4 5

prosta

chaotyczna

-5 -4 -3 -2 -1 0 1 2 3 4 5

uporządkowana

chaotyczna

-5 -4 -3 -2 -1 0 1 2 3 4 5

uporządkowana

tradycyjna

-5 -4 -3 -2 -1 0 1 2 3 4 5

nowoczesna

nieprzyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

poważna

tradycyjna

-5 -4 -3 -2 -1 0 1 2 3 4 5

nowoczesna

nieprzyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjazna

poważna

-5 -4 -3 -2 -1 0 1 2 3 4 5

zabawna

nieprzejrzysta

-5 -4 -3 -2 -1 0 1 2 3 4 5

przejrzysta

denerwująca/drażniąca

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjemna

zniechęcająca do korzystania

-5 -4 -3 -2 -1 0 1 2 3 4 5

zachęcająca do korzystania

skomplikowana

-5 -4 -3 -2 -1 0 1 2 3 4 5

prosta

chaotyczna

-5 -4 -3 -2 -1 0 1 2 3 4 5

uporządkowana

Badany 1 Badany 2 Badany 3 Badany 4 Badany 5

ankieta a- ODPOWIEDZI NA PYTANIA ZAMKNIęTE

tradycyjna

-5 -4 -3 -2 -1 0 1 2 3 4 5

nowoczesna

nieprzyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjazna

poważna

-5 -4 -3 -2 -1 0 1 2 3 4 5

zabawna

nieprzejrzysta

-5 -4 -3 -2 -1 0 1 2 3 4 5

przejrzysta

denerwująca/drażniąca

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjemna

zniechęcająca do korzystania

-5 -4 -3 -2 -1 0 1 2 3 4 5

zachęcająca do korzystania

skomplikowana

-5 -4 -3 -2 -1 0 1 2 3 4 5

prosta

chaotyczna

-5 -4 -3 -2 -1 0 1 2 3 4 5

uporządkowana Badany 1 Badany 2 Badany 3

tradycyjna

-5 -4 -3 -2 -1 0 1 2 3 4 5

nowoczesna

nieprzyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjazna

poważna

-5 -4 -3 -2 -1 0 1 2 3 4 5

zabawna

nieprzejrzysta

-5 -4 -3 -2 -1 0 1 2 3 4 5

przejrzysta

denerwująca/drażniąca

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjemna

zniechęcająca do korzystania

-5 -4 -3 -2 -1 0 1 2 3 4 5

zachęcająca do korzystania

skomplikowana

-5 -4 -3 -2 -1 0 1 2 3 4 5

prosta

chaotyczna

-5 -4 -3 -2 -1 0 1 2 3 4 5

uporządkowana

Badany 4 Badany 5

aNKIETA A- ZESTAWIENIE WYNIKÓW PYTAŃ ZMKNIĘTYCH

sumowanie Badany :

1 3 2

tradycyjna

-5 -4 -3 -2 -1 0 1 2 3 4 5

nowoczesna

nieprzyjazna

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjazna

poważna

-5 -4 -3 -2 -1 0 1 2 3 4 5

zabawna

nieprzejrzysta

-5 -4 -3 -2 -1 0 1 2 3 4 5

przejrzysta

denerwująca/drażniąca

-5 -4 -3 -2 -1 0 1 2 3 4 5

przyjemna

zniechęcająca do korzystania

-5 -4 -3 -2 -1 0 1 2 3 4 5

zachęcająca do korzystania

skomplikowana

-5 -4 -3 -2 -1 0 1 2 3 4 5

prosta

chaotyczna

-5 -4 -3 -2 -1 0 1 2 3 4 5

uporządkowana

BADANIE uŻYTECZNOŚCI- STOPIEŃ WYKONANIA POSZCZEGÓLNYCH ETAPÓW ZADANIA:

etap pominięty

Workshop Etapy wyróżnione w interfejsie

przejście etapu

adany 1

Badany 1

adany 2

Badany 2

adany 3

Badany 3

adany 4

Badany 4

adany 5

Badany 5

Rodzaj ubrania: men/tshirt Krój NEXT STEP

Obszar: ALL Kolor: czarny NEXT STEP

YOUR DECORATION new decoration tytuł wczytanie pliku opis sposób naszycia ADD NEW DECORATION

ORDER nazwa zamówienia nazwa kolekcji ilość szt/ rozmiar data doręczenia GET QUOTE

BADANIE UŻYTECZNOŚCI- SZCZEGÓŁOWA ANALIZA DROGI UŻYTKOWNIKa 1

Legenda:

BADANIE UZYTECZNOŚCI- SZCZEGÓŁOWA ANALIZA DROGI UŻYTKOWNIKa 2

Legenda:

Legenda: TE

kcj

ole

ien

ów

TIO N

00:01:11

cia

szy

na EW

sób

spo

liku

ie p

zyt

ion

rat

shi

n/t

TIO N

DE eco

arn

: cz

lor

r: A LL

sza

qbm

q=p

kbu

START

hê¼

ia:

ran

j ub

êâë Üç é dza

tç

BADANIE uŻYTECZNOŚCI- SZCZEGÓŁOWA ANALIZA DROGI UŻYTKOWNIKa 3

BADANY 3 BADA

00:45:11

11:00

BADANIE UŻYTECZNOŚCI- SZCZEGÓŁOWA ANALIZA DROGI UŻYTKOWNIKa 4

Legenda:

BADANIE uŻYTECZNOŚCI- SZCZEGÓŁOWA ANALIZA DROGI UŻYTKOWNIKa 5

Legenda:

bADANIE UŻYTECZNOŚCI- PODSUMOWANIE WYNIKÓW- WNIOSKI

03:43 - 07:03

KONIEC

03 20 r decorations lu your you de wypisywanie w polu x3

07:50 01:09

04:19

06:45 06 6:4 45

10:44:21

ien

TE UO

ole ak zw

GE TQ

kcj

ów am az zw na

DE EW DN AD

na sób spo

is op

RA TIO cia szy

liku ie p an zyt wc

ion rat eco

wd ne

N RA TIO CO DE UR YO

EP ST XT NE

arn y Ko

lor

: cz

LL r: A sza Ob

TEP NE XT S

rt shi n/t me Kró j

11:0001:55:23

00:45:11

6:01:23

ia: ran j ub dza Ro

przycisku get quote.

06:46

00:01:11

op Wo rks h

KONIEC E

02:49

START

04:50 0 04 4:50 00:44

rezygnacja t b your decorationsLabels 13:39

Większość badanych przynajmniej raz musiała cofnąć się do poprzednich kroków • Najwięcej kroków wstecz zostało wykonywanych przy zakładce cloth (17) oraz extras (12) • Dla większości badanych informacja o rozmiarach w zakładce CLOTH jest myląca

Legenda:

• Osoby badane mają problem przy wczytywaniu własnego nadruku- funkcja okienka comment nie jest rozumiana jednoznacznie. Plik można wgrywać na różnych poziomach tworzenia dokumentacji i nie można sprecyzować jednego konkretnego momentu. • Najczęściej pomijane kroki to: nazwanie kolekcji, oraz kroki związane z wgrywaniem włsnego nadruku- nazwa, komentarz, sposób naszycia.

Część 3- ankieta oceny wykonania zadania wyniki

Zakładka EXTRAS jest zrozumiała

Praca w workshopie jest mniej problematyczna niż wyjaśnienie swoje go projektu poprzez rozmowę. odpowiedzi:

odpowiedzi:

Zdecydowanie nie zgadzam się

14,3%

Zdecydowanie nie zgadzam się

28,6 %

Zdecydowanie nie zgadzam się

28,6 %

Nie zgadzam się

28,6 %

Nie zgadzam się

14,3 %

Nie zgadzam się

14,3 %

Nie mam zdania

14,3 %

Nie mam zdania

14,3 %

Zgadzam się

14,3 %

Zgadzam się

28,6 %

Zgadzam się

14,3 %

Zdecydowanie zgadzam się

14, 3 %

Zdecydowanie zgadzam się

14, 3 %

Zakładka WORKSHOP jest przeze mnie odebrana pozytywnie

Zdecydowanie nie zgadzam się

Mam problem z odnalezieniem zakładki WORKSHOP

odpowiedzi:

Wrócę na stronę przy kolejnym projekcie koszulki

odpowiedzi:

Zdecydowanie nie zgadzam się

42,9 %

Nie zgadzam się

28,6 %

Nie zgadzam się

42,9 %

Nie mam zdania

14,3 %

Nie mam zdania

Zgadzam się

28, 6 %

Zgadzam się

Zdecydowanie zgadzam się

14, 3 %

Zdecydowanie zgadzam się

Podsumowanie: •W ankiecie użytkownicy zaznaczyli, że nie mają problemów z odnalezieniem zakładki workshop, jednak niechętnie wróciliby na stronę by projektować po raz kolejny. • praca w workshopie jest dla nich dosyć problematyczna, ale ludzie odbierają ją pozytywnie. • Dla większej części osób zakładka EXTRAS jest niezrozumiała.

wnioski

Strona nie kojarzy się raczej ze sklepem internetowym niż ze stroną przeznaczoną dla projektantów Strona zawiera zbyt wiele powtarzających się zakładek. Większość użytkowników nie potrafi odnaleźć się w zakładce WORKSHOP, skutkiem tego jest powtarzanie czynności tworzenia projektu około 3 razy. Dodanie etykiet/grafik na swój projekt sprawiło badanym bardzo dużo problemów. Więksozść musiała powtórzyć tą czynność przynajmniej dwukrotnie. Użytkownicy niechętnie korzystają z workshopu również z powodu bardzo zawiłej procedury wyboru rozmiarów zamawianych ubrań. Większość użytkowników spodziewa się w workshopie zobaczyć cenę produktu. Nie wiedzą, że firma dopiero przygotowuje dokumentację i na jej podstawie szacuje koszty tworzenia danego projektu

REKOMENDACJE

• Nadanie strony nowoczesnego wyglądu: - jednolity layout - wzbudza zaufanie i skojarzenia z designem - nawiązuje do krawiectwa i projektowania ubioru, designu • Wyróżnienie na stronie celu (opis) oraz charakteru strony • Uproszczneie procedury projektowania • Przebudowa zakładki extras • Wyróżnić zakładkę workshop • wprowadzić dla strony wersję z językiem polskim