Jesteś tu:  Strona główna    Nasza oferta    Aplikacje RIA

Zapytaj o produkt

Jeśli jesteś zainteresowany naszym produktem, skontaktuj się z nami

 

 

albo przejedź do działu

 

Lista wdrożeń systemu mSHOP

 

 

Przykładowa aplikacja - InteliSHOP

Wprowadzenie do projektu InteliSHOP

Realizując projekt podstawowy nacisk został położony na jego funkcjonalność. Elementy zostały rozplanowane tak, aby korzystając z systemu użytkownik posiadał w każdej chwili dostęp do jak największej liczby informacji. Szablon graficzny przygotowany jest według z góry założonego kontrastu, dzięki czemu zarówno czcionki, jak i elementy logiki aplikacji, taki jak przyciski i komponenty są doskonale wyróżnione.

Klient nie powinien mieć wątpliwości który komponent spełnia jaką rolę ponieważ wydłuża się wówczas czas jego reakcji. Przekłada się on bezpośrednio na odbiór serwisu gdyż podstawowym dążeniem ludzkim jest swoboda działania w jak najbardziej naturalnym dla niego środowisku.

Dlatego też system wprowadza kilka rozwiązań, rzadko stosowanych w aplikacjach internetowych ale bardzo popularnych i często używanych w środowiskach desktopowych. Takie bezpośrednie przełożenie systemów domowych na aplikacje internetowe powoduje że klient korzystając z naszego systemu nie czuje ograniczenia swojej ingerencji w system. Rozwiązania takie jak „drag&drop” oraz animacje symbolizujące przesuwanie zakładek sprawiają iż świat wirtualny coraz bardziej zbliża się do rzeczywistości, a co za tym idzie przechodzi z konieczności w przyjemność.

Pierwsze wrażenie które towarzyszu klientowi w momencie wejścia do serwisu jest rzeczą kluczową. Nie rzadko wpływa ono znacząco na chęć dalszego poruszania się po systemie. Wprowadzenie elementów niekonwencjonalnych, ułatwiających znacznie proces poruszania się i zakupu oraz pozwalający na większą swobodę działania powoduje większe zadowolenie klienta, a co za tym idzie jego późniejszy powrót.


Nawigacja w systemie

Systemy InteliSHOP został zaprojektowany tak aby dostęp do wszystkich informacji był możliwie jak najszybszy, a jego obsługa bardzo intuicyjna. Wszystkie widoki zostały przygotowane tak, aby przy maksymalnej zawartości treści pozwalały na sprawne poruszanie się pomiędzy nimi, a udostępnione przez nie informacje były w danej chwili konieczne.




Aplikacja została wyposażona w wizualizację przypominającą na pierwszy rzut oka projekt InteliSHOP, zachowując jego wyrazistość i kolorystykę. Na pierwszy plan zostały wysunięte takie elementy jak:

  1. Menu główne – pozwalające na poruszanie się pomiędzy głównymi widokami aplikacji.
  2. Boczny panel – został umieszczony w sąsiedztwie głównego okna. Zawiera on potrzebne w danej chwili mechanizmy, przy czym pozwala na zachowanie bezpośredniego porównania z głównym oknem informacyjnym.
  3. Okno informacyjne – służy do prezentowania zawartości aktualnej zakładki. W przypadku powitania jest to krótki tekst wprowadzający, w przypadku produktów jest to ich pełna lista.

Widok zakładki produkty

Zakładka widoku produktów została rozplanowana w podobny sposób jak strona powitalna z tą jednak różnicą iż w zależności od aktualnego stanu aplikacji zmienia ona swoją konfigurację. Boczny panel jest ruchomy i w zależności od jego funkcjonalności pojawia się z lewej strony jako panel wyszukiwarki bądź też z prawej reprezentując panel koszyka.



Widok produktów składa się z 4 głównych części, które są widoczne na ekrenie w różnej konfiguracji. Pierwszym elementem są uchwyty symbolizujące zakładki, które pozwalają na przechodzenie pomiędzy panelami. Uchwyt znajdujący się po lewej stronie pozwala na wysunięcie panelu wyszukiwarki natomiast uchwyt po prawej stronie ekranu powoduje ujawnienie zawartości koszyka. Panel boczny rozszerzający funkcjonalność głównego okna o koszyk bądź też wyszukiwarkę. Okno informacyjne, zawieraja listę produktów.

Panel wyszukiwarki produktów

Wyszukiwarka produktów pozwala na przyspieszenie procesu zakupu poprzez filtrowanie zawartości katalogu produktów aby spełniały potrzeby i ograniczenia użytkownika.

Został on podzielony na cztery podstawowe pozwalające na zachowanie jego całkowitej przejrzystości:

  • Okno wyświetlające liczbę produktów pasujących do zadanych parametrów wyszukiwania.
  • Poziomy suwak pozwalający na manipulowanie parametrem ceny. Produkty znajdujące się na liście muszą zawierać się cenowo pomiędzy ustalonym przez ten komponent zakresem.
  • Dynamicznie generowana lista kategorii sklepowych. Zaznaczenie jednego z elementów powoduje wyświetlenie tylko tej kategorii w głównym oknie produktów.
  • Okno promocje pozwalający na wyświetlenie tylko tych elementów które występują aktualnie w promocji.


W przypadku manipulacji parametrem ceny liczba produktów wyświetlana jest aktualizowana dynamicznie podczas przesuwania ograniczenia. Pozwala to jeszcze przed jej ustaleniem uzyskać informację jaki będzie wynik końcowy naszego działania.

Elementy znajdujące się na liście kategorii pobierane są za pomocą HTTPService z bazy aplikacji opartej o system CMS. Powoduje to iż każda zmiana wykonana przy pomocy aplikacji zarządzającej będzie miała swoje odzwierciedlenie również w aplikacji InteliSHOP. Zachowana została struktura kategorii i ich zawartość. Elementy niższych poziomów oznaczane są poprzez wcięcie pokazujące występującą hierarchie.

Lista produktów i produkty

W zależności od liczby wyświetlanych w głównym oknie produktów wykorzystywany jest inny układ elementów. Jeśli ich liczba przekracza 9 wówczas produkty wyświetlane są w 3 kolumnach natomiast jeśli spadnie ona poniżej 9 produkty zostają rozplanowane według układu 2 kolumn.


Klikając na danym produkcie system przenosi nas do jego informacji szczegółowych. Wszystkie produkty zostają automatycznie umieszczone w jednej kolumnie po prawej stronie okna produktów. Takie rozwiązanie pozwala w bardzo szybki sposób poruszać się pomiędzy produktami z wybranego zakresu.

Koszyk

Podczas całego procesu dokonywania zakupu klient informowany jest o ilości elementów będących w danej chwili w jego koszyku. Informacja ta jest ściśle powiązana z panelem produktów i widoczna nie zależnie od aktualnego stanu widoku produktów.


System InteliSHOP pozwala na dodawanie nowych elementów do widoku koszyka przy pomocy metody „drag&drop”. Każde przytrzymanie klawisza myszki nad oknem produktu powoduje jego uaktywnienie, element staje się wówczas półprzezroczysty, dając możliwość jego przeniesienia i upuszczenia w obrębie panelu spełniającego funkcję koszyka. Upuszczony element łagodnie zanika sprawiając wrażenie upuszczenia i pojawia się na liście produktów w koszyku jako ostatni produkt. Produkty mogą być również dodawane do koszyka za pomocą standardowego przycisku kup teraz. Nowe rozwiązanie sprawia jednak wrażenie bardziej naturalnego zachowania.

Każda zmiana stanu pociąga za sobą dynamiczną zmiane podsumowania ilościowego i kosztowego koszyka. Ponieważ obliczenia wykonywane są na bierząco na komputerze klienta ma możliwość ciągłego podglądu na koszt zamówienia i nie przekraczając przy tym swojego budżetu. System nie wymienia informacji pomiędzy aplikacją klienta a serwerem, dzięki czemu odpowiedź aplikacji InteliSHOP jest praktycznie natychmiastowa.

Realizacja zamówienia

Akceptując zawartość koszyka klient przechodzi do procesu realizacji zamówienia. Z ekranu znika panel zawierający listę produktów a na jego miejsce pojawia się panel zamówienia. Na ekranie pozostaje jednak moduł koszyka zapewniając ciągły podgląd na skład i koszt realizowanego zamówienia.

Panel dostawy oparty jest w głównej mierze o komponent Accordion. Pozwala on na definiowanie szeregu zakładek z których każda traktowana jest jakooddzielny widok. Pierwszą zakładką jest widok pozwalający na wprowadzenie danych osobowych klienta. Wraz z danymi kontaktowymi oraz adresem dostawy produktu stanowi on pełne źródło informacji o kliencie. W momencie wypełnienia wszystkich pól z aktualnej zakładki klient może przejść do kolejnego kroku przy pomocy przycisku Akceptuj. Powoduje to zapisanie wszystkich informacji dotyczących zamówienia, zwinięcie aktualnej zakładki i rozwinięcie następnej zakładki pokazując tym samym całą jej zawartość. Powrót odbywa się za pomocą przycisku wróć(5), który w zależności od aktualnego położenia otwiera poprzednią zakładkę.


Wybierając opcję kupuj dalej klient ma możliwość zawieszenia procesu realizacji zamówienia i powrotu do widoku produktów. Panel stopniowo zanika, a na jego miejsce pojawia się panel z widokiem produktów. W przypadku ponownego powrotu do widoku realizacji zamówienia, wszystkie dotychczas wprowadzone informacje pozostają w niezmienionym stanie.