Internetowy sklep e-gastronomiczne.pl (studium przypadku)

Prezentujemy studium przypadku projektowania internetowego sklepu e-gastronomiczne.pl wykonanego na zlecenie firmy Technica.

{ TŁO PROJEKTU }

Klient
Profilem działalności firmy Technica jest kompleksowe wyposażanie obiektów gastronomicznych takich jak: restauracje, stołówki, bary, kuchnie placówek budżetowych, a także współpraca z firmami budowlanymi w zakresie wyposażania obiektów w sprzęt gastronomiczny. Na stronach sklepu technica.pl udostępniona jest część oferty firmy obejmująca ok. 20 tys. produktów skierowanych do klientów biznesowych jak i indywidualnych.

Projekt
e-gastronomiczne.pl to projekt internetowego sklepu
z ofertą produktów wyposażenia gastronomicznego. Oferta sklepu to blisko 15 tys. produktów, które podzielone na dziewięć kategorii tworzą głęboką hierarchię menu
z maksymalnie czterema poziomami zagłębienia.

Współpraca
Współpracę z firmą Technica rozpoczęliśmy pod koniec 2010 roku. Do tej chwili, wspólnie zrealizowaliśmy dwa projekty z zakresu e-commerce, w tym opisywany sklep e-gastronomiczne.pl

Zakres projektu
Zostaliśmy poproszeni o opracowanie nowego sklepu internetowego od podstaw bazując na katalogu produktów firmy i informacjach o grupie docelowej oferty. Praca nasza obejmowała projektowanie interakcji oraz część działań technologicznych:

• wybór i zaprojektowanie funkcjonalności sklepu,
• zaprojektowanie architektury informacji oraz wykonanie interfejsów użytkownika w formie makiet,
• ewaluację zaprojektowanych rozwiązań,
• realizację projektów graficznych na podstawie opracowanych makiet,
• front end development.

Użytkownicy sklepu
Sklep e-gatronomiczne.pl podobnie jak serwis technica.pl skierowany jest w kolejności do:

1. osób prowadzących działalność gospodarczą – klienci mocno związani z branżą (ok. 40% sprzedaży całkowitej*),
2. osób przeglądających ofertę sklepu ale kupujących już poza serwisem poprzez telefoniczne złożenie zamówienia (ok. 40% sprzedaży całkowitej*) – klienci ściśle powiązani z branżą,
3. osób nieprowadzących działalności gospodarczej (ok. 20% sprzedaży całkowitej*) – często przypadkowi użytkownicy, niezwiązani z branżą.

* – dane na podstawie informacji o sprzedaży sklepu technica.pl

Założenia projektowe
Głównym założeniem projektowanym było opracowanie sklepu w taki sposób aby maksymalnie różnił się od sklepu technica.pl – pod względem funkcjonalnym i graficznym. Te dwa sklepy
w założeniu strategicznym firmy stanowić mają dla siebie swego rodzaju konkurencję.

Cele poboczne jakie postawiliśmy do osiągnięcia:

• zaprojektowanie narzędzi mogących zwiększyć efektywność dokonywania zakupów przez konkretne grupy docelowe oferty,
• opracowanie nawigacji sklepu tak, by w łatwy i w zrozumiały sposób umożliwiała przeglądanie rozbudowanego katalogu produktów firmy,
• zaprojektowanie serwisu nie tylko pod kątem platformy sprzedażowej ale również pod kątem tworzenia bazy wiedzy – opiniotwórczego miejsca z ocenami produktów gastronomicznych,
• zaprojektowanie łatwego procesu zakupowego i koszyka w taki sposób aby umożliwiały wysoką konwersję,
• wykonanie atrakcyjnych pod względem graficznym projektów sklepu,
• budowa dobrego fundamentu serwisu dla działań typu SEO.

{ REALIZACJA }

Projektowanie
Prace projektowe obejmowały wypracowanie koncepcji serwisu, a następnie zaprojektowanie makiet
i projektów graficznych sklepu. W pierwszym etapie zastanawialiśmy się w jaki sposób powinna zachodzić interakcja użytkownika z serwisem i szukaliśmy odpowiedzi na dwa pytania: - co produkt ma robić? - oraz - jak produkt ma to robić? -

Analiza
W wyniku analizy grup docelowych zadecydowaliśmy przyszłych użytkowników sklepu powiązać
z modelami poszukiwania informacji w serwisie. Modele te, zależne są od stopnia posiadanej przez daną osobę wiedzy na temat tego co chce ona w serwisie odnaleźć. Ostatecznie przyszli użytkownicy odwiedzający sklep zostali podzieleni na:

• użytkowników, którzy wiedzą czego szukają i mają dobrą orientację w produktach, często Klienci sklepu technica.pl – eksperci, branżowcy,
• użytkowników poszukujących produktów typu „premium” (o wysokich cenach), którzy wybierają je z katalogu e-sklepu, a w ostateczności zamawiają telefonicznie z pominięciem koszyka seriwsu – eksperci, branżowcy,
• grupę, która na ogół nie wie czego szuka, lub ma małą wiedzę o produktach z oferty sklepu – często są to nowi Klienci zupełnie niezwiązani z branżą.

Makiety serwisu
Do zaprojektowania makiet serwisu użyto oprogramowania Axure RP. Wybrane makiety prezentujemy poniżej:

 

 

Odnajdywanie informacji (wyszukiwarka, filtry, strona SERP)
Modele poszukiwania informacji przyporządkowane do kolejnych grup docelowych sklepu wspierają następujące funkcjonalności:

• wyszukiwarka tekstowa i strona wyników wyszukiwania (SERP), której ekran został podzielony na dwa obszary,
• rozbudowane filtry na listach produktów – zawężanie wyników wyszukiwania odbywa się według parametrów „miękkich kryteriów”,
• pomoc kontekstową wyświetlaną na ekranach pod-kategorii produktów.

Wyszukiwarka tekstowa, którą uznaliśmy za niezmiernie istotny element sklepu, podczas projektowania makiet została umiejscowiona w centralnej, górnej części każdego ekranu
i dodatkowo wyposażona w duże pole do wpisywania słów/ fraz kluczowych. Zabieg ten miał na celu zachęcanie użytkowników do korzystania z tej funkcjonalności. Zdaliśmy sobie sprawę z tego, że zachęcanie może wiązać się ze złożeniem pewnej obietnicy co przekładać musi się na satysfakcję używania narzędzia – efektywność prezentowania wyników. Dlatego też mechanizm wyszukiwarki wzbogacony został o funkcję wyszukiwania dynamicznego (ang. „search-as-you-type”), dzięki której użytkownik serwisu może szybciej przeszukać jego zawartość ponieważ wstępne wyniki (podpowiedzi/ sugestie) otrzymuje już w czasie wpisywania słów/ fraz kluczowych
w pole:

 

Naszą dodatkową rekomendacją dla Klienta i firmy programującej serwis była specyfikacja mechaniki wyświetlania podpowiedzi/ sugestii przez wyszukiwarkę,  tak aby jak najdokładniej dobierała ona wyniki do potrzeb użytkowników reprezentujących różne grupy docelowe. Rekomendacja polegała na zastosowaniu w algorytmie szukającym wag odpowiedzialnych za kolejność przeszukiwania elementów strony. W ostateczności algorytm wyszukiwarki serwisu
w pierwszej kolejności szuka:

1. w nazwach produktów i kodach wewnętrznych (indeksach produktów), które są powszechnie stosowane i standaryzowane wśród branżowców,
2. w tagach produktów (dodatkowych znacznikach służących do opisywania informacji) dodawanych przez administratora sklepu do opisu,
3. w treściach opisowych produktów,
4. w stronach nie powiązanych z katalogiem produktowym.

Dodatkowo prosty zabieg – zastosowanie w wyszukiwarce listy wyboru umiejscowionej przed polem do wpisywania słów/ fraz kluczowych zawierającej tematy poszukiwanych informacji umożliwił powiązanie decyzji użytkownika z prezentacją wyników SERP. Wybór z listy kategorii ściśle powiązanej z ofertą sklepu (np. bar) powoduje wyświetlanie na stronie SERP w pierwszej kolejności:

1. prezentacji wyszukanych produktów,
2. listy wyników nie powiązanych z katalogiem produktów sklepu np. informacje z działu „O firmie”.

Wybór kategorii nie powiązanych ściśle z ofertą sklepu powoduje wyświetlenie odwrotnej do opisanej powyżej kolejności prezentacji wyników, a kolejno wybór tematu „wszystkie kategorie” powoduje wyświetlenie prezentacji o dokładnej strukturze jak opisana wyżej.

 

Dodatkowo w ekranie prezentacji wyników wyszukiwania każde słowo/ fraza kluczowa zgodna
z informacją poszukiwaną jest wyróżniona, co łatwo pozwala zidentyfikować użytkownikowi kontekst, w którym dane słowo czy fraza kluczowa się znajduje. W momencie braku wyniku wyszukiwania zgodnego z poszukiwanymi informacjami, użytkownikowi wyświetlają się komunikaty sugerujące:

• sprawdź poprawność wpisanego słowa/ frazy,
• spróbuj szukać z ograniczoną ilością znaków,
• spróbuj użyć bardziej ogólnych słów kluczowych,
• to Twoja ponowna próba? Skontaktuj się z nami: pomoc@e-gastronomiczne.pl

Niezależnie od powyższego, poniżej komunikatów z podpowiedziami wyświetlane są również produkty najbardziej zbliżone do zapytania użytkownika, które mają szansę zainteresować szukającego.

Dzięki wykorzystaniu mechanizmu „search-as-you-type”, listy wyboru tematu przewodniego oraz hierarchii informacji w prezentacji wyników ograniczamy wyświetlanie użytkownikowi nietrafionych rezultatów niezwiązanych z jego oczekiwaniami, do czego wagi często nie przywiązują popularne sklepy. Tym samym podnosimy efektywność wyszukiwarki i zwiększamy satysfakcję osób z niej korzystających.

Przeszukiwanie katalogu produktów w serwisie odbywa się poprzez zawężanie wyników
z wykorzystaniem dostępnych na stronach filtrów. Dzięki takiemu rozwiązaniu precyzyjnie zmniejszamy ilość produktów na liście, a zwiększamy efektywność identyfikacji produktu pożądanego i wspieramy osoby, które wiedzą czego szukają. Filtry sklepu zostały zaprojektowane
w oparciu o „miękkie kryteria” takie jak np. wysokość, pojemność. Tego typu filtry pozwalają użytkownikom przynajmniej częściowo ograniczyć zakres rekordów do przeszukania. Przy konstruowaniu filtrów w sklepie zostały wzięte pod uwagę następujące wytyczne projektowe:

• ułożenie filtrów powinno bazować na hierarchii ważności – filtry ważniejsze dla danej kategorii umiejscowione są wyżej w prawej części ekranu,
• wybrane parametry filtrowania powinny być wyraźnie oznaczone nad wynikami prezentowanymi
  w centralnej części ekranu,
• powinna istnieć możliwość szybkiego wyczyszczenia filtrów, poprzez opcje kasowania wyboru,
• powinno łatwo zorientować się w zawartości wyników – nad listą produktów prezentowana jest liczba wszystkich wyników, a stronicowanie umieszczone w górnej i dolnej części listy produktów umożliwia szybkie przeglądanie dłuższych list prezentowanych produktów,
• dla lepszego zobrazowania opcji filtrowania powinien zastosowanie znaleźć także filtr graficzny – suwak cen służący do wyboru zakresu cenowego produktów,
• opcje filtrowania zorganizowane w prawej części ekranu powinny być dopasowane za każdym razem do poszukiwanych informacji i produktów faktycznie istniejących w wybranej kategorii produktów. Oznacza to, że w procesie poszukiwania zbędne opcje filtrowania są automatycznie dezaktywowane (właściwe, znajdujące zastosowanie są aktywne), a użytkownika po dłuższym filtrowaniu wyników i wyborze filtru nie mającego zastosowanie nie zaskoczy komunikat typu „brak produktów spełniających wybrane kryteria”.

 

W celu wspierania osób z niewielką znajomością oferty na stronie każdej z kategorii produktów wdrożona została pomoc kontekstowa – w postaci szybkich tips’ów/ porad. Zadaniem takiej pomocy jest edukowanie i podpowiadanie wyboru. Dzięki temu na każdym kroku szukania informacji pomagamy użytkownikowi nabywać wiedzę dotyczącą prezentowanych produktów:

 

Nawigacja (Mega drop-down menu oraz menu prawostronne)
Katalog produktów w menu sklepu zaprezentowany został z wykorzystaniem menu typu mega drop-down szczególnie polecanym dla rozbudowanych struktur informacji. Zastosowana mechanika menu charakteryzuje się:

1. dużymi panelami nawigacyjnymi z wyraźnym podziałem na poszczególne pod-kategorie (kilka pod-kategorii danej kategorii głównej w panelu nawigacyjnym pogrupowanych jest pionowo, dodatkowo wszystkie pod-kategorie są od siebie wyraźnie oddzielone),
2. różnym rozmiarem czcionki dla pod-kategorii i pod-pod-kategorii menu co ułatwia identyfikację głównych grup i zawartych w nich głębszych obszarów (dzięki temu podkreślamy relację zachodzące między poszczególnymi linkami),
3. łatwym użyciem – wszystkie pod-kategorie dla danej kategorii głównej prezentowane są razem bez konieczności przewijania ekranu w dół, co pozwala użytkownikowi zobaczyć wszystkie elementy na pierwszy rzut oka (dzięki temu nie wymagamy od użytkownika wykorzystywania pamięci krótkotrwałej),
4. dodatkową opcją zamykającą panel – każdy aktywowany panel nawigacyjny wyposażony został w prawym górnym rogu w link ZAMKNIJ,
5. niezbyt szybkim czasem reakcji (aktywowanie, dezaktywowanie) menu i paneli nawigacyjnych – na aktywowanie/ dezaktywowanie nawigacji potrzeba około 0.5-1.0s bezruchu kursora
   w obrębie menu głównego lub poza obszarem panelu (dzięki temu zapewniamy użytkownikowi odpowiedni czas reakcji na zachodzące zmiany),
6. większą, aktywną częścią przycisku w menu głównym – po wybraniu kategorii głównej
   i pojawieniu się panelu z nawigacją użytkownik może swobodnie przesunąć kursor z przycisku na panel nawigacyjny aby dokonać kolejnego wyboru, nawet zahaczając kursorem o sąsiednie przyciski (takie rozwiązanie nie powoduje dezorientacji – uaktywnienia sąsiednich przycisków
   i migotania różnych paneli nawigacyjnych).

 

Dosyć nietypowym podejściem w projektowaniu układu menu jest menu leżące po prawej stronie ekranu. Ze względu na to, że menu położone w tej części serwisu jest „pod ręką” i naszym zdaniem jest bardziej przyjazne oraz bardziej naturalne dla wyboru użytkownika, zastosowaliśmy je na listach produktów, w opisie rozszerzonym produktu oraz stronach tekstowych serwisu.

Argumenty jakie pojawiły się za menu prawostronnym podczas projektowania:

1. Układ motoryczny ręki – kursor myszy komputerowej przebywa częściej w prawej części ekranu,
2. Większość użytkowników jest praworęczna – osoby praworęczne naturalnie preferują rzeczy zorientowane po prawej stronie,
3. Skalowalność – zwiększenie satysfakcji przy wyświetlaniu strony na monitorach o niższej rozdzielczości, gdzie przy układzie prawostronnego menu zasadnicza część serwisu prezentowana jest w całości, zaś nawigacyjna jest ukryta – ale dostęp do niej jest możliwy poprzez przesuwanie paska poziomego przewijania. Przy układzie lewostronnego menu korzystanie z tego paska zawsze po przeładowaniu strony aby móc zapoznać się ze stroną zasadniczą jest bardziej uciążliwe.

Na podstawie: ui.blox.pl

 

Dodatkowe funkcjonalności
Tworząc projekt z założeniem opracowania opiniotwórczej bazy zaprojektowaliśmy system opiniowania (w formie tekstowej wypowiedzi) oraz oceniania (prosty system głosowania na produkt) produktów gastronomicznych. Informacje te pozwolą przyszłym użytkownikom sklepu porównać produkty i maksymalnie zawęzić swój wybór. Przy decydowaniu się na system zostały wzięte pod uwagę dwa główne kryteria:

1. łatwość używania, przejrzystość i intuicyjność,
2. system z przeznaczeniem głównie dla branżowców.

Ostatecznie zdecydowaliśmy się na wdrożenie skali trzystopniowej ocen, z kryteriami: „polecam” (pozytywna), „trudno powiedzieć” (neutralna), „nie polecam” (negatywna) oraz dodanie do oceny opisu tekstowego, czyli opinii doprecyzowującej wskazaną ocenę – dodanie komentarza jest wymagane. Ostatecznie system ocen i opinii sklepu charakteryzują:

• skala ocen – oceny nie są pokazywane w postacie średniej arytmetycznej. W etykietach graficznych prezentowane są faktyczne ilości ocen, co niesie ze sobą dodatkowe wartości,
• rozkład ocen – oceny prezentowane są dodatkowo w postacie graficznego słupka ukazującego faktyczny, procentowy rozkład ocen,
• moment braku oceny – sygnalizowany jest za pomocą informacji „Nikt jeszcze nie ocenił tego produktu”,
• rozróżnianie autorów opinii – dodawana jest informacja czy dany użytkownik jest klientem sklepu czy też nie,
• listy umożliwiające filtrowanie ocen i opinii wg wybranych kryteriów,
• mechanika strony produktu niezależna od stronicowania ocen i opinii – w praktyce oznacza to łatwiejsze przeglądanie ocen i opinii niewymagające ciągłego odświeżania strony przeglądanego produktu.

 

 

Proces zakupowy
Koszyk na stronach sklepu to jedynie szybki podgląd jego zawartości. Dodatkowo w jego podglądzie możliwe jest usunięcie wybranych produktów bez przechodzenia do właściwego ekranu koszyka.

 

Główną ideą procesu zakupowego była synteza wszystkich kroków w tradycyjnym sklepie do jednego – co ma zadanie zwiększać wskaźnik ukończenia procesu i tym samym powodować większe konwersje. Koszyk został wyposażony tylko i wyłącznie w niezbędne do realizacji zakupu opcje – umożliwia zalogowanie użytkownika posiadającego konto w sklepie i zakup produktów lub rejestrację nowego i zakupów wybranych przedmiotów. Dodatkowo użytkownik w koszyku ma możliwość łatwego powrotu do ostatnio przeglądanego produktu lub kategorii produktowej czy strony głównej serwisu, co zastępuje typowe, mało zrozumiałe w sklepach opcje „kontynuuj zakupy”. Po prawej stronie użytkownik ma stały wgląd w zawartość koszyka, a w razie pytań może skorzystać z obszaru pomocy, w którym zostały umieszczone informacje o telefonach i adresach
e-mail.

Koszyk właściwy w sklepie to jeden formularz podzielony na dwa główne obszary takie jak: panel logowania i panel rejestracji/ kupna produktów. Część rejestracji została podzielona na dodatkowe, mniejsze pola jak: dane do faktury, dane do dostawy, sposób płatności i wysyłki oraz dane do logowania w sklepie. W formularzu zastosowano także system informowania o błędach popełnionych podczas jego wypełniania. Użytkownikowi wyraźnie formularz nie tylko wskazuje miejsce popełnionego błędu ale również w formie tekstu opisuje co należy zrobić aby taki błąd naprawić. Cały proces kończą niezbędne do realizacji zakupów reguły dotyczące przetwarzania danych i akceptacji regulaminu sklepu.

 

Linia graficzna
Dysponując dostarczonym przez Klienta logo zaproponowaliśmy próbną, jedną linię graficzną serwisu. Projekt strony głównej spotkał się z pozytywnym odbiorem, a Klient zadecydował ostatecznie o kontynuowaniu prac nad przygotowaną propozycją. Wszystkie projekty graficzne wykonał uznany grafik Łukasz Bronisz „Ghentelmen”. Końcowy efekt prezentujemy na wybranych projektach poniżej:

 

 

 

Technologia
Końcowy etap obejmował kodowanie zaakceptowanych projektów graficznych do XHTML oraz CSS zgodnie z przyjętymi standardami. Programowanie sklepu w pełni opartego o gotową platformę
i-sklep.pl wykonała  firma nie powiązana z IGK.