DOKUMENTACJA PROJEKTOWA

DOKUMENTACJA PROJEKTOWA SKLEPU INTERNETOWEGO EKOZEFIR 85-790 Bydgoszcz; ul. Rynek 9; tel: + 783 340 777; fax: (52) 343 98 90; e-mail: biuro@nixus.pl; www.nixus.pl

SPIS TREŚCI: 1. Wstęp... 3 2. Analiza i Research... 4 2.1. Specyfika działalności firmy... 4 2.2. Obecny system sprzedaży... 5 2.3. Grupa docelowa... 5 3. Koncepcja... 6 3.1. Rdzeń strategii cel projektu... 6 3.2. Określenie stylistyki... 7 3.3. Rozwiązania funkcjonalne... 8 3.3.1. Katalog produktów... 8 3.3.2. Nawigacja i wyszukiwanie produktów... 8 3.3.3. Wyświetlanie produktów... 9 3.3.4. Koszyk... 9 3.3.5. Zamówienia... 10 3.3.6. Płatności i faktury... 10 3.3.7. Program partnerski... 11 3.3.8. Personalizacja... 11 3.3.9. Bezpieczeństwo... 12 3.3.10. Pozycjonowanie... 12 3.3.11. Social Media... 12 4. Makiety funkcjonalne... 13 4.1. Analiza... 22 5. Zalecenia programistyczne... 25 5.1. Standardy kodowania... 25 5.2. Optymalizacja... 25 2

1. Wstęp Niniejszy dokument powstał na zlecenie firmy Ekoklimax-Projekt Sp. J. i stanowi wstęp do budowy przyszłego sklepu internetowego. Prawidłowe zaprojektowanie systemu informatycznego jest podstawą do dalszej efektywnej pracy programistów nad implementacją, poprawnym wdrożeniem oraz późniejszym testowaniem oprogramowania. W pierwszej fazie projektowania e-sklepu, w celu poprawnego określenia wymagań, przeprowadzono analizę potrzeb firmy, zdiagnozowano grupę docelową oraz przeanalizowano obecny system sprzedaży. Kolejnym etapem było opracowanie koncepcji. Określono cel projektu, stylistykę oraz spisano funkcjonalności, które należy zaimplementować w sklepie internetowym. W kolejnym punkcie opracowano spójną i czytelną strukturę serwisu tworząc makiety funkcjonalne poszczególnych podstron serwisu. Ostatnim krokiem było spisanie wytycznych dla programistów odnośnie standardów kodowania oraz optymalizacji. 3

2. Analiza i Research 2.1. Specyfika działalności firmy Firma Ekoklimax-Projekt Sp. J. rozpoczęła swoją działalność w roku 1997. Na początku zajmowała się dystrybucją, montażem oraz serwisem urządzeń w branży klimatyzacji, wentylacji, nawilżania i osuszania. W roku 2000 firma rozszerzyła swoją działalność o produkcję urządzeń wentylacyjnych pod marką Ekozefir. Od tego czasu firma zdobywając nowych partnerów biznesowych zaczęła rezygnować z montażu i serwisu urządzeń na rzecz produkcji, co w 2008 roku stało się jej głównym profilem działalności. W chwili obecnej produkcja firmy Ekoklimax-Projekt obejmuje szeroką gamę urządzeń wentylacyjnych: central nawiewnych, wywiewnych, nawiewno-wywiewnych z odzyskiem ciepła ( rekuperatory ), wraz z zaawansowanym sterowaniem oraz wyposażeniem dodatkowym (nagrzewnice, chłodnice, dyfuzory, przepustnice itp.). Produkowane są centrale od bardzo małych (200 m3/h) przeznaczonych do wentylacji mieszkań, domków biur, po urządzenia o wydajności 20000 m3/h do zastosowań w halach produkcyjnych, galeriach handlowych i innych dużych budynkach. W ofercie można również znaleźć centrale specjalistyczne do stosowania na halach basenowych, w szpitalach, lakierniach, drukarniach i innych budynkach o specjalnym przeznaczeniu. Rozszerzając siatkę partnerów (dystrybutorów, instalatorów oraz serwisantów) firma wprowadziła system rabatowy dla współpracujących firm. W roku 2012 podjęto działania zmierzające do scentralizowania sprzedaży produktów marki Ekozefir opierając ją na tzw. Oddziałach czyli firmach partnerskich głównych dystrybutorach urządzeń Ekozefir w swoich regionach, którzy to współpracują z pozostałymi partnerami. Celem powstania Oddziałów była również idea stworzenia Grupy Ekozefir, w której wymieniane są doświadczenia poszczególnych firm w różnych dziedzinach związanych z branżą HVAC. Dzięki tej współpracy poszczególne firmy rozszerzają swoją działalność zapewniając klientowi kompleksową obsługę. Efektem tej współpracy jest dodanie do oferty firmy Ekoklimax-Projekt urządzeń takich jak odkurzacze centralne, pompy ciepła czy panele fotowoltaiczne. 4

2.2. Obecny system sprzedaży Obecnie można rozróżnić kilka kanałów sprzedaży w firmie opierających się na różnych systemach komunikacji i potwierdzania zamówień. W przypadku sprzedaży central wentylacyjnych bardzo często wymagana jest pomoc techniczna przy doborze odpowiedniego urządzenia. Właśnie dlatego główny kanał sprzedaży opiera się o system doboru i ofertowania. W firmie funkcjonuje dział sprzedaży, pełniący również funkcje doradczo-techniczne, którego zadaniem jest pomoc w doborze urządzeń, ofertowanie oraz ustalenie ewentualnych rabatów. Ten system przyjęty został również odnośnie innych urządzeń, np. klimatyzatorów, osuszaczy itp. Do roku 2012 cała komunikacja na linii partner-firma, klient-firma, klient-partner opierała się o wymianę maili oraz kontakty telefoniczne. W roku 2012 utworzona została platforma B2B służąca do ofertowania oraz zamawiania central wentylacyjnych. Uprościło to sposób zamówień urządzeń przez partnerów i pozwala klientom indywidualnym na składanie zapytań ofertowych. Platforma ta nie zaspokaja jednak w całości potrzeb firmy w działaniach sprzedażowych ponieważ: nie obejmuje innych urządzeń oferowanych przez firmę oraz Grupę Ekozefir takich jak klimatyzatory, osuszacze, nawilżacze, odkurzacze centralne i inne; klienci indywidualni nie mogą bezpośrednio zamawiać urządzeń bez pominięcia etapu ofertowania; informacje o produktach Ekozefir przedstawione na platformie są niekompletne - brak takich informacji jak: stany magazynowe, przewidywany czas realizacji zamówienia, ceny podane są dopiero na etapie zamawiania; brak możliwości realizacji płatności online. 2.3. Grupa docelowa Ze względu na specyfikę firmy oraz wcześniej wdrożone rozwiązania tworzony e-sklep jest skierowany przede wszystkim do klientów indywidualnych. Są to w dużej mierze osoby budujące dom, poszukujące rozwiązań energooszczędnych i nowoczesnych. Grupa ta interesuje się nowymi technologiami i rozwiązaniami w dziedzinie budownictwa. Przypuszczać można, że większość z nich korzysta na co dzień z urządzeń mobilnych m.in. do wyszukiwania informacji produktowych. 5

3. Koncepcja 3.1. Rdzeń strategii cel projektu Podstawowym założeniem projektu jest stworzenie sklepu internetowego z pełną ofertą firmy Ekoklimax-Projekt Sp. J. oraz produktów oferowanych przez partnerów biznesowych firmy, czyli tzw. Grupę Ekozefir. Ze względu na specyfikę firmy jako dystrybutora i producenta, priorytetem jest integracja e-sklepu z istniejącymi systemami informatycznymi firmy, w tym platformy ekozefir.pl (moduł składania ofert i zamówień do produkcji) oraz systemem ERP (zamówienia - dystrybucja, lista produktów, stany magazynowe). Poprzez ofertę szerokiej gamy nowoczesnych produktów z branży HVAC, firma chce promować energooszczędne rozwiązania w budownictwie oraz poszerzać wiedzę na ich temat. Dlatego też jednym z najważniejszych elementów systemu jest intuicyjne, przejrzyste i czytelne przedstawienie oferty w formie katalogu. Istotną rolę odgrywa też aspekt emocjonalny misją firmy jest sprawianie, by życie stało się łatwe i przyjemne dzięki zastosowaniu nowoczesnych technologii. W ten aspekt wpisują także urządzenia mobilne, więc do nich musi być również przystosowany e-sklep. Konieczne jest zastosowanie technologii RWD (Responsive Web Design) dzięki której wygląd i układ sklepu dostosowują się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany. Powstanie sklepu internetowego ma na celu: Wprowadzenie nowoczesnych form sprzedaży w firmie; Intuicyjne i czytelne przedstawienie produktów firmy i partnerów; Uproszczenie i zautomatyzowanie procesu zamówienia produktów; Przedstawienie informacji o stanach magazynowych i czasie dostawy; Promocję produktów proekologicznych i energooszczędnych; Promocję firmy. 6

3.2. Określenie stylistyki Firma Ekoklimax-Projekt sp. j. posiada swój system identyfikacji wizualnej i wprowadza go również dla całej Grupy Ekozefir. Zaznaczony jest on we wszelkich broszurach i katalogach firmy oraz stronach internetowych ekozefir.pl i ekoklimax.pl. Stylistyka sklepu internetowego powinna być spójna z już przyjętym przez firmę stylem. Kolorami dominującymi są zielony, biały i szary. Niektóre z produktów firmy dla wyróżnienia, oznaczone są innymi kolorami, np. serie dużych central wentylacyjnych kolorem błękitnym, sterowniki zielononiebieskim. Ważniejsze elementy, takie jak tytuły i podpisy, wyróżnione są poprzez wstawienie je w kształt prostokąta z dodatkowym małym trójkątem wskazującym odpowiedni kierunek umieszczenia treści. Kształty te występują w dwóch kolorystykach: biały tekst na zielonym tle (bądź innego koloru ze względu na rodzaj produktu) lub szary tekst na białym tle. Czcionka użyta w stylistyce firmy to Open Sans Light. Kolor czcionki szary (80% czarnego). 7

3.3. Rozwiązania funkcjonalne 3.3.1. Katalog produktów Najważniejszym elementem każdego sklepu internetowego jest katalog produktów. Powinien być on jak najbardziej intuicyjny i czytelny dla użytkowników. Cała oferta podzielona powinna zostać na kategorie wg rodzaju produktu, np. klimatyzacja, wentylacja, pompy ciepła, panele słoneczne, osuszacze. System powinien mieć również przypisywania podkategorii w przypadku wentylacji można rozróżnić podkategorie: centrale nawiewno-wywiewne, centrale nawiewne, centrale wywiewne, rekuperatory, sterowanie. Z poziomu panelu administracyjnego powinna być możliwość aktywacji bądź dezaktywacji poszczególnych kategorii bądź produktów aby nie były widoczne dla użytkownika. Kategorie, produkty i ich opisy oraz stany magazynowe powinny być na bieżąco pobierane z systemu ERP firmy. 3.3.2. Nawigacja i wyszukiwanie produktów Bardzo ważne jest, aby znalezienie konkretnego produktu czy informacji przez użytkownika możliwe było w jak najkrótszym czasie, dlatego ważna jest najbardziej intuicyjna i czytelna nawigacja na stronie. Prócz menu z produktami podzielonymi na kategorie powinna się również znaleźć zakładka O nas, Kontakt oraz odnośnik do działu pomocy. Podczas gdy klient szuka konkretnego produktu w sklepie, przydatna może się okazać wyszukiwarka formularz w widocznym miejscu na stronie z ikonką lupy lub przyciskiem Szukaj, do którego użytkownik wpisuje nazwę poszukiwanego produktu. Wyszukiwarka ta powinna posiadać opcję automatycznych podpowiedzi co oszczędza potencjalnemu klientowi czas na wpisanie całej nazwy produktu. Jako sklep specjalistyczny z branży HVAC, posiadający dużą ofertę e-sklep powinien posiadać system filtrów w celu jak najszybszego znalezienia produktu o konkretnych właściwościach. Jest to najbardziej efektywny i najszybszy sposób wyszukiwania produktów. W filtrach tych powinny się znaleźć prócz ceny i producenta najważniejsze parametry techniczne urządzeń w zależności od kategorii, np. w kategorii central wentylacyjnych powinna być to wydajność, spręż, pozycja pracy, rodzaj wymiennika. 8

3.3.3. Wyświetlanie produktów Jednym z elementów decydujących o zakupie jest opis produktu. Powinien on być zwięzły, czytelny i interesujący dla potencjalnego klienta. Musi zawierać wszelkie niezbędne informacje na temat produktu, w tym dane techniczne. Dodatkowym uzupełnieniem są dokumenty do ściągnięcia w formacie pdf (np. rysunki techniczne, wykresy) oraz zdjęcia obrazujące produkt (możliwość zamieszczenia większej ilości zdjęć). Przy każdym opisie produktu, w widocznym miejscu, znajdować się musi pole z takimi informacjami jak: cena, dostępność (dane synchronizowane z oprogramowaniem magazynowym firmy), czas realizacji w przypadku braku towaru na magazynie. W tym miejscy powinien znaleźć się też formularz zamówienia. Dodatkowym aspektem jest możliwość rekomendacji produktu oraz polecenia go znajomym. Użytkownicy mogą w ten sposób wysyłać linki produktów swoim znajomym poprzez wiadomość e-mail co jest jedną z najlepszych form reklamy. 3.3.4. Koszyk Jednym z najważniejszych przycisków call to action jest przycisk Dodaj do koszyka, który powinien rzucać się w oczy i najlepiej by znajdował się obok ceny produktu. Koszyk jest elementem sklepu, w którym użytkownik przechowuje produkty, które zdecydował kupić, lecz jest to również miejsce, które decyduje o finalnym zakupie. Prócz podstawowych funkcji koszyka przedstawienia listy wybranych produktów, podsumowania cen, obliczenia podatku i kosztów dostawy, powinna się znajdować informacja o kolejnych krokach składania zamówienia. Dzięki temu użytkownik nie będzie się obawiać ile kroków i formularzy czeka go zanim sfinalizuje zamówienie. Ze względu na to, że czas od podjęcia decyzji o zakupie do realizacji zamówienia jest często bardzo długi, oraz tego, że użytkownik często korzysta z różnych urządzeń (np. przegląda produkty na tablecie, a zamawia z komputera), należy przechowywać stan koszyka dla danego użytkownika przez dłuższy czas, aby nie musiał on ponownie wyszukiwać produktów które chciał zakupić. Firma Ekoklimax-Projekt powinna mieć wgląd w zrealizowane i niezrealizowane koszyki użytkowników w celach statystycznych. 9

3.3.5. Zamówienia Ze względu na specyfikę firmy i istniejące systemy informatyczne, proces zamówienia powinien być zintegrowany z oprogramowaniem ERP firmy oraz platformą B2B ekozefir.pl. Podczas składania zamówienia przez klienta informacja o zamówieniu powinna być przesyłana do systemu ERP, a w przypadku zamówienia central wentylacyjnych, których nie ma na magazynie powinno zostać dodatkowo utworzone zlecenie produkcyjne na platformie ekozefir.pl. Zgodnie z najnowszymi zaleceniami unijnymi, przycisk umożliwiający finalizację zamówienia powinien odróżniać się od pozostałych przycisków w całym procesie zakupu, dodatkowo powinien zostać opisany w sposób jasny, wskazujący jednoznacznie, iż jego kliknięcie wiązać się będzie ze świadomym złożeniem zamówienia i koniecznością jego opłacenia. Proponowanym opisem przycisku jest: Kupuję i płacę. Formularz składania zamówienia powinien być jasny i czytelny, oraz zawierać tylko te informacje, które są niezbędne w procesie zamówienia. W tym miejscu nie powinno się zamieszczać żadnych dodatkowych informacji rozpraszających uwagę. Klient powinien mieć również wgląd w etapy realizacji zamówienia, oraz dostawać odpowiednie powiadomienia e-mail (potwierdzenie zamówienia, potwierdzenie otrzymania płatności, informacja o gotowości do wysyłki i o wysyłce). 3.3.6. Płatności i faktury Użytkownik powinien mieć możliwość wyboru formy płatności. W zależności od rodzaju towaru powinny być dostępne różne formy takie jak: przelew bankowy (Sofort Banking, PayPal), płatność kartą kredytową i przy odbiorze. W przypadku niektórych towarów powinna być opcja płatności zaliczkowej. Przy danej kategorii produktu ustalany powinien być procent zaliczki, po jej wpłacie nastąpiłby proces realizacji zamówienia (np. produkcji central wentylacyjnych). Po skompletowaniu zamówienia wysyłana byłaby prośba do klienta o wpłatę pozostałej części płatności. Klienci biznesowi firmy, którzy korzystaliby ze sklepu internetowego powinni płacić cenę pomniejszoną o przyznany wcześniej rabat, dlatego też ważna jest możliwość grupowania użytkowników i przydzielania im określonych upustów. Klient podczas rejestracji oraz później w swoim profilu powinien mieć możliwość wyboru czy chce otrzymać fakturę elektroniczną. Podczas procesu zamówienia również powinno znajdować się pole z taką informacją. Jeżeli użytkownik wybrał fakturę papierową, może on wpisać adres wysyłki faktury jeżeli jest on inny niż adres dostawy. W przypadku wybrania e-faktury, po realizacji zamówienia wygenerowana faktura (z podpisem 10

elektronicznym) powinna zostać wysłana w wiadomości e-mail do klienta. Użytkownik powinien również mieć dostęp do faktur elektronicznych z poziomu historii zamówień w sklepie internetowym. 3.3.7. Program partnerski Firma Ekoklimax-Projekt posiada siatkę swoich partnerów biznesowych na terenie całej Polski. Są to zarówno hurtownie jak i instalatorzy tych urządzeń. W wielu przypadkach klient dowiaduje się o marce Ekozefir właśnie od nich, dlatego też należy w sklepie wprowadzić system partnerski, który pozwalałby na wypłatę odpowiedniego procenta od zakupu firmom, dzięki którym dokonano zakupu. Firmy partnerskie powinny dostać wygenerowany specjalny link URL i umieścić go np. na stronie internetowej lub w wiadomości e-mail. W momencie wejścia klienta na stronę sklepu z takiego odnośnika, utworzony zostaje plik cache w którym przechowywane są dane od którego z partnerów jest on przekierowany. W momencie zamówienia przyznawana jest prowizja (określony procent od transakcji) temu z partnerów, który skierował klienta do sklepu. 3.3.8. Personalizacja Sukces w handlu odnoszą firmy, które potrafią przywiązać do siebie konsumentów i sprawiać, że czują się wyjątkowi. Dlatego w e-sklepie użytkownikowi powinny wyświetlać się m.in. spersonalizowane rekomendacje tworzone na podstawie historii zamówień klienta. Kolejnym dodatkiem na stronie zwiększającym lojalność klienta jest wyświetlanie mu produktów ostatnio przeglądanych, dzięki czemu może on szybko powrócić do właściwej strony bez konieczności ponownego wyszukiwania. Wszelkie wiadomości wysyłane ze sklepu powinny być tak skonstruowane, żeby użytkownik czuł, że ta wiadomość jest kierowana bezpośrednio do niego, np. zawierała w powitaniu jego imię. 11

3.3.9. Bezpieczeństwo Zaufanie, jakim klient obdarza firmę, ma szczególne znaczenie w handlu internetowym. Odwiedzający e-sklepy zwracają coraz większą uwagę na wiarygodność sprzedawców, oraz to, gdzie i jak przechowywane są ich dane osobowe. Dlatego też należy wprowadzić w sklepie takie elementy jak: Polityka Prywatności informacja o tym, kto jest administratorem bazy danych oraz kto, w jaki sposób i w jakim celu będzie przetwarzał zgromadzone dane; Regulamin musi on być w pełni zgodny z obowiązującym prawem, powinien jasno precyzować politykę zwrotów i reklamacji, oraz być zweryfikowany pod kątem klauzul niedozwolonych. Należy w tym miejscy również umieścić pełne dane adresowe i rejestrowe firmy, aby kupujący byli poinformowani, że mają do czynienia z legalnie działającą firmą; Certyfikat SSL używanie połączeń szyfrowanych (https) ma na celu ochronę przesyłanych informacji (np. danych osobowych podczas rejestracji). 3.3.10. Pozycjonowanie Wyszukiwarki internetowe są dobrym sposobem na promowanie marki, dlatego należy pamiętać o zaimplementowaniu w e-sklepie mechanizmów do pozycjonowania i optymalizacji. W sklepie internetowym powinny się znaleźć więc: przyjazne linki tworzenie adresów URL ze słowami kluczowymi, dostosowane do grupy docelowej; metadane wpisywanie do każdej strony indywidualnych tytułów stron, opisów i słów kluczowych; mapa strony plik zawierający wszystkie podstrony serwisu, pomagający wyszukiwarkom dotrzeć do wszystkich treści; zapobieganie duplikatom wprowadzenie zabezpieczeń przed powielaniem treści (zasada jedna strona jeden adres URL). 3.3.11. Social Media Największą siłą marketingową firmy są klienci, którzy utożsamiają się z marką i produktami firmy. Należy dać im możliwość dzielenia się informacjami zamieszczonymi na stronach firmy/marki i umieścić na nich przyciski Social Media (Facebook, Google+, Twitter i inne), które to umożliwiają. 12

4. Makiety funkcjonalne Punktem wyjściowym przed przystąpieniem do projektu graficznego jest opracowanie spójnej, funkcjonalnej i czytelnej struktury serwisu. Szkice takie nazywane makietami skupiają się na funkcjonalnościach, zawartości i interakcjach, a nie na wyglądzie i stanowią podstawę do dalszej pracy grafików i programistów. Ze względu na misję firmy i jej nastawienie na nowe technologie, należy wziąć pod uwagę urządzenia mobile i stworzyć makiety w dwóch wersjach: przeglądarkowej i mobilnej. Należy pamiętać o tym, że obie wersje mają być tworzone w technologii RWD i będą ze sobą powiązane. Opracowane makiety stron: Strona główna; Strona kategorii (lista produktów); Strona produktu (opis produktu); Koszyk; Formularz zamówienia; Płatności; Strona o nas ; Podstrony informacyjne. 13

Strona główna przeglądarkowa mobilna 14

Strona kategorii (lista produktów) przeglądarkowa mobilna 15

Strona produktu (opis produktu) przeglądarkowa mobilna 16

Koszyk przeglądarkowa mobilna 17

Formularz zamówienia (wybór adresu) przeglądarkowa mobilna 18

Płatności przeglądarkowa mobilna 19

Strona o nas przeglądarkowa mobilna 20

Podstrona informacyjna przeglądarkowa mobilna 21

4.1. Analiza Projektowana strona podzielona została zgodnie z zasadami użyteczności na 3 główne części patrząc od góry: nagłówek (header), część główną (body) oraz stopkę (footer). Górny i dolny fragment strony to elementy stałe - ich rozkład się nie zmienia, a treść jest modyfikowana nieznacznie lub wcale. Centralna część jest dynamiczna, jej układ zależy od tego, na jakiej aktualnie podstronie znajduje się użytkownik, a treść zmienia się ze względu na interakcje. W nagłówku zawarte jest główne menu strony, oraz niektóre przyciski funkcyjne. Podzielony on został na dwie części. Górna część (węższa) zawiera od lewej strony: pole wyszukiwania, przyciski do zmiany języka i waluty, odnośniki do logowania/rejestracji bądź powitanie zalogowanego użytkownika oraz przycisk przejścia do Koszyka. Pole Koszyk powinno na bieżąco informować o jego aktualnym stanie, czyli liczbie przechowywanych produktów, a po najechaniu na to pole powinna wyświetlać się lista wybranych towarów. W dolnym pasku nagłówka od lewej strony widnieje logo sklepu, które jest jednocześnie odnośnikiem do strony głównej oraz główne menu. W tym menu znajdować się powinien element Kategorie po najechaniu którego rozwinie się dodatkowe okno z głównymi kategoriami sklepu. W wersji mobilnej odnośniki z górnego paska dzielą się na dwie części (górną i dolną), poniżej nich widnieje logo rozciągnięte na całą szerokość ekranu, a poniżej menu w wersji rozwijanej. W stopce strony znajdują się od góry: elementy marketingowe z informacjami np. o oddziałach, liczbie partnerów, jakości produktów i wsparciu technicznym (w wersji mobilnej brak); interaktywna mapa z lokalizacjami punktów sprzedażowych; pasek z powielonym logiem strony, przyciskami szybkiej nawigacji (pomocnicze menu) oraz formularzem newslettera i przyciskami social media (w wersji mobilnej przyciski szybkiej nawigacji są w formie rozwijanych list jedna pod drugą, pod nimi newsletter, a na samym dole logo). Strona główna jest wizytówką sklepu, a jej głównym zadaniem jest przejrzysta prezentacja i łatwy dostęp do oferty produktów. W górnej części umieszczony został na całej szerokości slider z nowościami produktowymi, szczególnie polecaną ofertą bądź promocjami. Slider ten posiada nawigację oraz link do podstrony z ofertą. Poniżej znajdują się główne kategorie (grupy katalogowe), a następnie pasek z produktami polecanymi. W wersji przeglądarkowej, po lewej stronie obok produktów polecanych umieszczono grafikę z treścią marketingową. W momencie, gdy użytkownik wchodzi na stronę po raz pierwszy, 22

lub też nie ma włączonej obsługi plików cookies, pod częścią z produktami polecanymi wyświetlić się powinien pasek z nowo dodanymi produktami. Gdy użytkownik był już wcześniej na stronie, w tym miejscu pojawić się powinny produkty ostatnio przeglądane, dzięki czemu potencjalny klient może szybko powrócić do produktów, którymi się interesował wcześniej. Tak jak w produktach polecanych, lecz po prawej stronie w wersji przeglądarkowej umieszczono dodatkową grafikę marketingową. Na dole strony głównej znajduje się przewijany slider z logami producentów, których produkty widnieją w sklepie. Na każdej z podstron, zaraz pod nagłówkiem strony umieszczono nawigację breadcrumbs. Dzięki niej użytkownik widzi całą przebytą drogę do danej lokalizacji i może szybko powrócić do poprzednich kroków. Podstrony kategorii oraz produktów w wersji przeglądarkowej podzielono na dwie kolumny. Lewa część (wąska) zawiera od góry listę kategorii i podkategorii, filtry do wyszukiwania konkretnych produktów po parametrach oraz produkty polecane (brak w wersji mobilnej). W wersji strony na urządzenia mobilne lista kategorii oraz filtry umieszczone są pod nagłówkiem jako listy rozwijane, aby nie zajmowały zbyt dużo miejsca. Strona kategorii zawiera w prawej kolumnie od góry: grafikę kategorii, jej opis, linki do podkategorii (o ile występują), przyciski funkcyjne (zmiana sposobu wyświetlania produktów lista/siatka, przycisk sortowania oraz link do porównywarki) oraz produkty. W wersji mobilnej brak jest możliwości zmiany wyświetlania produktów, ponieważ przedstawione są one jeden pod drugim jako lista. Prawa kolumna na podstronie o produkcie podzielona jest dodatkowo na dwie równe kolumny. W lewej umieszczono zdjęcia produktu, a w prawej części od góry: opis podstawowy, ceny, dostępność, przycisk Dodaj do koszyka i przyciski social media. Poniżej tych dwóch kolumn znajduje się okno z zakładkami z rozszerzonym opisem produktu oraz opiniami. Kolejne podstrony koszyk, formularz zamówienia, płatności, posiadają na górze pasek z wymienionymi krokami zamówienia, co daje podgląd użytkownikowi jak dużo kroków musi przejść od wybrania produktu do zakupu. W koszyku umieszczona jest przejrzysta tabela z wybranymi produktami w której można zmienić ilość sztuk produktu bądź go usunąć z listy. Pod tabelą znajdować się powinna podsumowana cena towarów i dostawy. Formularz zamówienia (wybór danych do wysyłki) składa się z dwóch części: wybór adresu dostawy oraz danych do faktury. Adresy te użytkownik może zapisać w ustawieniach swojego profilu i w tym kroku wybrać z listy rozwijanej by nie musieć za 23

każdym zamówieniem wypełniać formularzy. Z tego miejsca można również dodać nowy adres i automatycznie zapisać w ustawieniach. Poniżej wyboru adresów umieszczono pole na uwagi dodatkowe do zamówienia. Na podstronie z płatnościami pojawia się podsumowanie koszyka (tabelka z podstrony koszyka), a poniżej opcje wyboru płatności i przycisk Kupuję i płacę kończący proces zakupowy. Stworzono również makiety stron informacyjnych w tym stronę o nas, która składa się z dużej grafiki reklamowej oraz tekstem opatrzonym nagłówkiem w jednej bądź dwóch kolumnach. Strona informacyjna wygląda analogicznie, lecz zrezygnowano w niej z grafiki. 24

5. Zalecenia programistyczne Ze względu na dużą ilość gotowych rozwiązań, przetestowanych przez szeroką społeczność użytkowników, zaleca się stworzenie sklepu internetowego w oparciu o sprawdzony system e-commerce. Projekty takie tworzone i dopracowywane przez wielu programistów i charakteryzują się skalowalnością, dzięki czemu można daną aplikację rozwijać dodając kolejne moduły. Podczas tworzenia niniejszego dokumentu przeanalizowano gotowe rozwiązania e-commerce pod względem funkcjonalności, rozszerzalności, łatwości przebudowy i integracji z innymi aplikacjami, ilości wdrożeń oraz skupionej wokół niego społeczności. Zalecanym rozwiązaniem jest dostosowanie oprogramowania PrestaShop do wymagań projektu (w tym utworzenie komunikacji z systemem ERP firmy oraz platformą ekozefir.pl). Ewentualnym rozwiązaniem mogą być również programy Magento lub Zen Cart. 5.1. Standardy kodowania Podczas tworzenia oprogramowania, należy przyjąć jeden standard kodowania, co ułatwi późniejszą pracę nad kodem i dodawanie nowych funkcjonalności. W przypadku stosowania gotowych rozwiązań (np. PrestaShop) należy stosować się do przyjętych w danym systemie standardów. Kod powinien być zoptymalizowany powinno się unikać powtórzeń kodu (np. te same funkcje w różnych plikach). Warto też pozbyć się wszystkich niepotrzebnych elementów kodu HTML, zbędnych zagnieżdżeń, nadmiaru komentarzy, białych znaków czy pustych nowych linii. 5.2. Optymalizacja Podczas przeglądania któregokolwiek portalu internetowego, jedną z kluczowych rzeczy jest czas ładowania strony. Jest to jeden z elementów decydujących o użyteczności e-sklepu i tym, czy klient pozostanie na naszej stronie. W przypadku zbyt długiego oczekiwania bardzo prawdopodobne jest, że opuści on nasz sklep i już nie wróci. Istnieje kilka sposobów, aby zoptymalizować stronę internetową i przyspieszyć jej działanie. Są to m.in.: Optymalizacja grafiki należy dobierać odpowiednie formaty grafik i je kompresować. Przy tworzeniu strony w technologii RWD zaleca się tworzenie kilku wersji grafik, aby dla wersji mobilnej (mniejsze obrazki) nie pobierać dużych obrazów przeznaczonych na wersje desktopowe; 25

CSS zamiast grafiki wszędzie gdzie jest to możliwe należy stosować style css zamiast wczytywania obrazów. Tak tworzone elementy są w pełni responsywne (technika wektorowa); CSS Sprites używanie plików złożonych z wielu oddzielnych elementów graficznych, dzięki czemu wszystkie te elementy przesyłane są jako jeden plik. Przesłany plik może być wielokrotnie wykorzystywany na stronie do wyświetlania poszczególnych jego części stanowiących osobne grafiki; Unikanie Flash w elementach graficznych należy unikać stosowania technologii Flash; Optymalizacja kodu usuwanie niepotrzebnych stylów w plikach css, funkcji w plikach js, zagnieżdżeń w kodzie i wszystkich innych zbędnych elementów (puste linie, duża ilość komentarzy ); Kompresja plików css o ile jest taka możliwość, należy wszystkie style umieszczać w jednym skompresowanym pliku (bez spacji, komentarzy i pustych znaków). Wszystkie zbędne style powinny być usunięte; Kompresja plików javascript jak w przypadku plików css, należy ograniczyć liczbę plików do niezbędnego minimum i usunąć z nich spacje, puste linie, komentarze, aby plik był jak najmniejszy; Umieszczanie plików w jednym miejscu wszystkie pliki (css, javascript) powinny był ściągnięte na serwer, na którym znajduje się strona i stamtąd pobierane; Poza powyższymi wskazówkami należy zaimplementować algorytmy cache czyli zapisywanie wygenerowanych elementów strony w tymczasowych plikach i odczytywanie ich podczas kolejnych zapytań nie przeciążając serwera. Metoda ta znacząco przyspiesza działanie stron internetowych co wpływa na ich użyteczność. 26