012345

}w !"#$%&'()+,-./012345
M ASARYKOVA UNIVERZITA FAKULTA INFORMATIKY

Analýza a návrh administraˇcního rozhraní eshopu D IPLOMOVÁ PRÁCE

Bc. Marie Molnárová

Brno, 2014

Prohlášení Prohlašuji, že tato diplomová práce je mým puvodním ˚ autorským dílem, které jsem vypracovala samostatnˇe. Všechny zdroje, prameny a literaturu, které jsem pˇri vypracování používala nebo z nich cˇ erpala, v práci rˇ ádnˇe cituji s uvedením úplného odkazu na pˇríslušný zdroj.

Vedoucí práce: Ing. Leonard Walletzký, Ph.D. ii

Podˇekování Dˇekuji vedoucímu práce Ing. Leonardu Walletzkému, Ph.D. za veškeré rady, pˇripomínky a cˇ as, který si na mou práci ve své vytíženosti vyhradil. Dˇekuji spoleˇcnosti W. za námˇet k práci a prubˇ ˚ ežné smˇerˇ ování, Marii Annˇe M. za obˇetavou korekturu a svému bráškovi za trpˇelivou podporu.

iii

Shrnutí Diplomová práce pˇredkládá návrh administraˇcního rozhraní eshopu, jehož cílem je pˇrekonat možnosti bˇežnˇe dostupné na trhu. Prioritou pˇredloženého návrhu je spokojenost uživatele. Návrhu pˇredchází analýza administraˇcních rozhraní nˇekolika již existujících eshopu. ˚ Kritéria, která byla zvolena pro analýzu, jsou následnˇe aplikována i na návrh a díky tomu je možné porovnat navržené rˇ ešení s analyzovanými. Návrh je vytvoˇren v podobˇe wireframu˚ a podrobné specifikace.

iv

Abstract The thesis presents an e-shop administration interface design, which aims to overcome the options available on the market. The priority of the proposed design is to satisfy users. The design is preceded by an analysis of several existing e-shops’ administration interfaces. The criteria chosen for analysis are subsequently applied to design making it possible to compare the proposed design with analyzed ones. The design consists of wireframes and a detailed specification.

v

Klíˇcová slova Eshop, administraˇcní rozhraní, uživatelské rozhraní, user experience, wireframe.

vi

Obsah 1 2

3

Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vymezení základních pojmu˚ . . . . . . . . . . . . . . . . . . 2.1 Elektronické podnikání . . . . . . . . . . . . . . . . . . . 2.1.1 Druhy elektronického podnikání . . . . . . . . . 2.1.2 Elektronický obchod . . . . . . . . . . . . . . . . 2.1.3 Internetový obchod . . . . . . . . . . . . . . . . . 2.2 Eshop (webová aplikace) . . . . . . . . . . . . . . . . . . 2.3 Administraˇcní rozhraní a CMS . . . . . . . . . . . . . . 2.4 User experience (UX) . . . . . . . . . . . . . . . . . . . . 2.5 Použitelnost . . . . . . . . . . . . . . . . . . . . . . . . . 2.6 Pˇrístupnost . . . . . . . . . . . . . . . . . . . . . . . . . . Analýza administraˇcních rozhraní eshopu˚ . . . . . . . . . . 3.1 Kritéria analýzy . . . . . . . . . . . . . . . . . . . . . . . 3.2 Hodnocení analyzovaných eshopu˚ . . . . . . . . . . . . 3.2.1 Míra naplnˇení kritérií . . . . . . . . . . . . . . . 3.2.2 Váhy kritérií . . . . . . . . . . . . . . . . . . . . . 3.3 Popis kritérií analýzy . . . . . . . . . . . . . . . . . . . . 3.3.1 Usilujte o konzistenci . . . . . . . . . . . . . . . . 3.3.2 Respektujte širokou skupinu uživatelu˚ . . . . . 3.3.3 Poskytujte zpˇetnou vazbu . . . . . . . . . . . . . 3.3.4 Provádˇejte uživatele pracovními postupy . . . . 3.3.5 Pˇredcházejte chybám . . . . . . . . . . . . . . . . 3.3.6 Umožnˇete uživateli vrátit se zpˇet a bud’te tolerantní k jeho chybám . . . . . . . . . . . . . . . . 3.3.7 Vytváˇrejte pˇredvídatelné uživatelské rozhraní . 3.3.8 Nepˇretˇežujte krátkodobou pamˇet’ uživatele, nabízejte pˇrehlednost . . . . . . . . . . . . . . . . . 3.3.9 Navigujte uživatele . . . . . . . . . . . . . . . . . 3.3.10 Usnadnˇete uživateli práci . . . . . . . . . . . . . 3.3.11 Proved’te uživatele inicializací eshopu . . . . . .

4 6 6 6 8 8 8 9 10 10 11 12 12 13 13 14 14 14 14 15 15 16 16 16 17 17 17 18 1

3.4 Analýza eshopu R. . . . . . . . . . . . . . . 3.5 Analýza PrestaShopu . . . . . . . . . . . . . 3.6 Analýza Shoptetu . . . . . . . . . . . . . . . 4 Analýza rolí a procesu˚ . . . . . . . . . . . . . . . 4.1 Popis rolí . . . . . . . . . . . . . . . . . . . . 4.2 Analýza procesu˚ . . . . . . . . . . . . . . . . 4.2.1 Inicializace eshopu . . . . . . . . . . 4.2.2 Zpracování objednávky . . . . . . . 5 Návrh . . . . . . . . . . . . . . . . . . . . . . . . . 5.1 Úˇcel systému . . . . . . . . . . . . . . . . . . 5.2 Layout administraˇcního rozhraní . . . . . . 5.2.1 Spoleˇcné prvky . . . . . . . . . . . . Záhlaví a hlavní menu . . . . . . . . Plovoucí lišta . . . . . . . . . . . . . 5.2.2 Pˇrehledy . . . . . . . . . . . . . . . . 5.2.3 Detaily . . . . . . . . . . . . . . . . . 5.3 Navigace . . . . . . . . . . . . . . . . . . . . 5.3.1 Horizontální menu . . . . . . . . . . 5.3.2 Drobeˇcková navigace . . . . . . . . 5.3.3 Plovoucí lišty . . . . . . . . . . . . . 5.3.4 Tématické bloky . . . . . . . . . . . 5.3.5 Vyhledávání . . . . . . . . . . . . . . 5.3.6 Parametrický filtr . . . . . . . . . . . 5.3.7 Stromové menu s kategoriemi . . . 5.4 Zpˇetná vazba . . . . . . . . . . . . . . . . . 5.4.1 Modální sekundární okna . . . . . . 5.4.2 Hlášení systému . . . . . . . . . . . ˇ 5.5 Cásti administraˇcního rozhraní . . . . . . . 5.5.1 Nástˇenka . . . . . . . . . . . . . . . . 5.5.2 Katalog produktu˚ . . . . . . . . . . . 5.5.3 Objednávky . . . . . . . . . . . . . . 5.5.4 Statistiky . . . . . . . . . . . . . . . . 5.5.5 Nastavení . . . . . . . . . . . . . . . 6 Hodnocení navrženého rˇešení . . . . . . . . . . 6.1 Shrnutí . . . . . . . . . . . . . . . . . . . . . 6.2 Porovnání návrhu a analyzovaných eshopu˚ 7 Závˇer . . . . . . . . . . . . . . . . . . . . . . . . . A Wireframy . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18 25 33 43 43 45 45 47 50 50 50 51 51 51 52 52 52 53 53 54 54 54 55 55 55 55 56 57 57 57 57 59 59 60 66 68 69 73 2

B Specifikace k wireframum ˚ . . . . . . . . . . . . . . . . . . . . 74

3

Kapitola 1

Úvod Na tématu Analýza a návrh administraˇcního rozhraní eshopu jsem zaˇcala pracovat již v rámci svého Interim projektu ve spoleˇcnosti W.1 na jaˇre roku 2013. Navazovala jsem na práci své pˇredchudkynˇ ˚ e, která vytvoˇrila návrh pro administraˇcní rozhraní CMS (Content Management System). Mým úkolem bylo provést analýzu a vytvoˇrit návrh modulu eshopu tak, aby byl konzistentní s návrhem CMS a mohl do nˇeho být zaˇclenˇen. Bˇehem stáže jsem pracovala samostatnˇe, bˇehem pravidelných konzultací s vedením firmy však byly mé pˇredstavy korigovány, aby byly realizovatelné v podmínkách malé a teprve se rozvíjející firmy. Práce tak nabyla praktického rázu a smyslu. Pˇri psaní diplomové práce jsem zaˇcala znovu od zaˇcátku – provedla jsem novou analýzu, odprostila jsem se od návaznosti na navržené CMS a na základˇe toho jsem pˇrepracovala puvodní ˚ návrh. Pulroˇ ˚ cní práce bˇehem stáže mi však pˇrinesla základní pˇrehled v dané problematice a práce již byla mnohem snazší.

Cíl diplomové práce Cílem diplomové práce je provést analýzu administraˇcních rozhraní eshopu, ˚ které jsou dostupné na trhu. Popsat administraˇcní rozhraní ideálního eshopu a vytvoˇrit vlastní návrh, který se bude co nejvíce blížit k ideálu. Následnˇe prokázat jeho pˇrínos oproti stávajícím rˇ ešením, která jsou dostupná na trhu. Návrh bude vytvoˇren ve formˇe wireframu˚ a podrobné specifikace. 1.

Z duvodu ˚ anonymizace neuvádím jméno spoleˇcnosti.

4

1. Ú VOD

Struktura diplomové práce Ve druhé kapitole vymezuji základní pojmy, kterými jsou elektronické podnikání, elektronický a internetový obchod, eshop, administraˇcní rozhraní, user experience, použitelnost a pˇrístupnost. Další dvˇe kapitoly jsou vˇenovány analýze. Ve tˇretí kapitole jsem urˇcila kritéria pro analýzu administraˇcních rozhraní eshopu. ˚ Tato kritéria aplikuji pˇri analýze tˇrí vybraných eshopu˚ (eshop R., PrestaShop a Shoptet). Ve cˇ tvrté kapitole analyzuji potˇrebné role a nejzajímavˇejší procesy – zpracování objednávky a proces inicializace eshopu. Vlastnímu návrhu se vˇenuji v páté a šesté kapitole. V páté kapitole jej popisuji. Vymezuji, jaký má systém úˇcel, jakým zpusobem ˚ poskytuje uživateli zpˇetnou vazbu a jak jej naviguje. Dále popisuji jednotlivé sekce administraˇcního rozhraní. V šesté kapitole jsem podrobila návrh hodnocení podle stejných pravidel, které jsem pˇri analýze aplikovala na administraˇcní rozhraní již existujících eshopu. ˚ V závˇeru práce dospívám k tomu, jak by mˇel vypadat ideální eshop. Porovnávám vytvoˇrený návrh s analyzovanými eshopy a se stanoveným ideálem a konstatuji, zda jsem splnila svuj ˚ cíl.

5

Kapitola 2

Vymezení základních pojmu˚ 2.1

Elektronické podnikání

Elektronickým podnikáním se rozumí každá realizace podnikatelských procesu, ˚ která ke svému uskuteˇcnˇení využívá elektronických informaˇcních technologií a informaˇcních systému. ˚ Oblast, ve které se podnikání uskuteˇcnuje ˇ nehraje roli, muže ˚ jít o nákup a prodej zboží, poskytování služeb nebo cokoli jiného. Duležitý ˚ je zpusob ˚ komunikace a využívání informaˇcních technologií a systému˚ [8]. V souvislosti s elektronickým podnikáním se cˇ asto zminují ˇ také pojmy elektronický obchod a internetový obchod. Elektronický obchod je jednou z forem elektronického podnikání a nejrozšíˇrenˇejším zpu˚ sobem elektronického obchodu je internetový obchod. Vztah mezi tˇemito pojmy je vyjádˇren také obrázkem 2.1. 2.1.1

Druhy elektronického podnikání

Druhy elektronického podnikání se obvykle dˇelí podle vzájemných vztahu˚ mezi subjekty, které do obchodního vztahu vstupují. Nejˇcastˇeji se jedná o podnikání mezi dvˇema firmami (B2B) nebo firmou a koneˇcnými spotˇrebiteli (B2C). Úplný výˇcet všech druhu˚ elektronického podnikání je však mnohem pestˇrejší [8]: •

B2C (Business to consumer) – jedná se o vztah mezi firmou a koneˇcnými spotˇrebiteli. Obchodní vztahy jsou realizovány prostˇrednictvím webových aplikací nebo virtuálních obchodu. ˚ Rozvoj informaˇcních technologií pˇrispˇel ze všech forem elektronického podnikání nejvíce právˇe k rozvoji vztahu˚ B2C. 6

2. V YMEZENÍ ZÁKLADNÍCH POJM U˚

Obrázek 2.1: Schéma elektronického podnikání [11]. •

B2B (Business to business) – forma podnikání mezi dvˇema podnikatelskými subjekty slouží k obchodování se zbožím za úˇcelem dalšího podnikání. Z hlediska objemu je tento druh obchodu nejvýznamnˇejší. Informaˇcními systémy jsou tyto vztahy realizovány jako elektronická výmˇena dat.

•

B2G (Business to government) – jedná se o vztah firmy a orgány státní správy (jako jsou napˇr. finanˇcní úˇrady, sociální a zdravotní pojišt’ovny apod.). Komunikace mezi tˇemito subjekty neslouží k obchodní cˇ innosti pˇrímo, ale je velmi duleži˚ tou nadstavbou.

•

C2C (Consumer to consumer) – jedná se o vztahy mezi koncovými spotˇrebiteli, kteˇrí nakupují a prodávají zboží napˇr. prostˇrednictvím elektronických aukcí. Vzhledem k tomu, že ve vztahu nefigirují podnikatelské subjekty, se však nejedná o podnikání a tento druh obchodu mezi druhy elektronického podnikání ve skuteˇcnosti nepatˇrí.

•

B2E (Business to employee) – oznaˇcení reprezentuje vztahy mezi firmou a jejími zamˇestnanci. Muže ˚ nabývat ruzných ˚ podob – sdílení informací prostˇrednictvím Intranetu, poskytování kurzu˚ formou e-learningu apod. Cílem je zlepšení komunikace mezi 7

2. V YMEZENÍ ZÁKLADNÍCH POJM U˚ firmou a zamˇestnanci a zvýšení produktivity práce pomocí upevnování ˇ pocitu˚ sounáležitosti a duležitosti. ˚ •

2.1.2

B2R (Business to Reseller) – jedná se o vztah mezi firmou a obchodním zástupcem. Tento vztah by se mohl považovat také za B2E nebo B2B, podle toho, zda je obchodní zástupce zamˇestnancem dané firmy cˇ i nikoli. Elektronický obchod

Pojmem elektronický obchod je podmnožinou elektronického podnikání. Zahrnuje obchodování s hmotným i nehmotným zbožím, službami a všemi souvisejícími kroky týkajícími se reklamy, prodejní podpory nebo uzavˇrení a plnˇení smlouvy [9]. Ne vždy je možné realizovat elektronický obchod plnˇe elektronickou cestou. Pod pojem elektronický obchod se zahrnují produkty, které byly zakoupeny pˇres internet a zaslány v digitální podobˇe, ale i produkty, které byly doruˇceny ve hmotné podobˇe [8]. 2.1.3

Internetový obchod

Pod pojmem internetový obchod, neboli eshop, se skrývají dva odlišné významy. Prvním významem je forma elektronického obchodování, která je provozována prostˇrednictvím Internetu. Takto jej budu chápat i v této práci. Druhý význam je zúžen pouze na webovou aplikaci, která takové obchodování umožnuje. ˇ Aˇckoli se pojmy internetový obchod a eshop bˇežnˇe chápají jako synonymní, pro pˇresnost budu v této práci používat termín internetový obchod pouze ve významu formy elektronického obchodu a termín eshop ve významu webové aplikace, která je nástrojem internetového obchodu.

2.2

Eshop (webová aplikace)

Pojem eshop v této práci chápu jako nástroj, který slouží k internetovému obchodu. Je to webová aplikace, která slouží k nabízení a poskytování informací o zboží, zprostˇredkování prodeje a dalších služeb jako je reklamace apod. Nezbytnými souˇcástmi aplikace jsou 8

2. V YMEZENÍ ZÁKLADNÍCH POJM U˚ katalog produktu, ˚ nákupní košík a databáze pro ukládání objednávek a evidenci zákazníku. ˚ V ostatních funkcích se jednotlivé eshopy od sebe navzájem liší, málokdy však zustávají ˚ jen u tˇech základních [8].

2.3

Administraˇcní rozhraní a CMS

Pro definování pojmu administraˇcní rozhraní je tˇreba nejprve vysvˇetlit pojem CMS, jehož je administraˇcní rozhraní souˇcástí. CMS (Content Management System, cˇ esky systém pro správu obsahu, obvykle se však nepˇrekládá a používá se anglická zkratka) je webová aplikace, která slouží ke shromažd’ování, správˇe a publikování jednotlivých informací, které tvoˇrí komponenty obsahu webu. Smyslem CMS je uˇcinit správu webu intuitivní a co nejjednodušší. Díky CMS je možné spravovat obsah webových stránek skrze administraˇcní rozhraní, aniž by byla nutná znalost programovacího nebo znaˇckovacího jazyka [7]. CMS je obvykle tvoˇreno databází, ve které jsou uložena všechna data, rozhraním, ve kterém se obsah stránek zobrazuje návštˇevníkum ˚ stránek (takzvaným front-endem) a pro nás podstatným administraˇcním rozhraním, které je pˇrístupné pouze po pˇrihlášení (nˇekdy se používá termín back-end). V nˇem lze obsah stránek upravovat. Mezi funkce administraˇcních rozhraní patˇrí [15]: •

Vytváˇrení, úprava a publikace textu˚ (obvykle za použití jednoduchého WYSIWYG editoru)

•

Správa souboru, ˚ obrázku˚ a galerií

•

Správa pˇrístupových práv

•

Správa diskusí nebo komentáˇru˚

•

Vkládání aktualit a správa kalendáˇre

•

Statistika pˇrístupu˚ 9


2.4

User experience (UX)

Pro termín user experience (UX) se obtížnˇe hledá výstižný cˇ eský ekvivalent. Nˇekdy se pˇrekládá jako uživatelský prožitek, jindy jako uživatelská zkušenost, setkala jsem se i s výrazem uživatelská spokojenost. Nejlepším rˇ ešením je nejspíš termín vubec ˚ nepˇrekládat a používat jej v puvodním ˚ znˇení. Ještˇe obtížnˇejší než vybrat správný pˇreklad je však nalézt pˇresnou definici tohoto termínu – je jich mnoho a vždy se navzájem trochu liší. Spoleˇcné jim je to, že do stˇredu svého zájmu nekladou produkt, ale uživatele produktu. Duležitou ˚ roli pˇritom hraje subjektivní prožívání a emoce spojené s jeho používáním. Jedna z nejvýstižnˇejších definic je uvedena na anglické Wikipedii: “User experience (UX) se zabývá tím, jak se lidé cítí, když používají nˇejaký produkt, systém cˇ i službu. UX se zamˇerˇuje na emoˇcní a hodnotové aspekty komunikace cˇ lovˇeka s poˇcítacˇ em a vlastnictví produktu, zahrnuje také vnímání praktických aspektu˚ jako je užiteˇcnost, snadné použití a efektivita systému. User experience je ve své podstatˇe subjektivní, protože se týká individuálních pocitu˚ a smýšlení o systému. UX je dynamické, mˇení se v prubˇ ˚ ehu cˇ asu spolu s mˇenícími se okolnostmi” [16, pˇreložila autorka].

2.5

Použitelnost

V analýze administraˇcních rozhraní eshopu˚ i ve vlatním návrhu budu klást duraz ˚ na to, zda jsou použitelné. Použitelný web pˇritom chápu takto: „Použitelný web je takový web, který se návštˇevníkum ˚ dobˇre používá. Kde se dobˇre orientují, rychle naleznou to, co hledají. Kde se neztrácí, nedˇelají zbyteˇcné chyby. Jsou to weby, ze kterých mají uživatelé dobrý pocit“ [17] Cílem použitelnosti je spokojený uživatel. Ke stejnému cíl smˇerˇ uje i pˇrístupnost, kterou vymezím v následující sekci. 10


2.6

Pˇrístupnost

Pˇrístupnost se zamˇerˇ uje pˇredevším na spokojenost handicapovaných uživatelu. ˚ Je takový stav, kdy „daná vˇec neklade svým uživatelum ˚ pˇri používání žádné zásadní pˇrekážky“ [17]. Podle Špinara má až tˇretina uživatelu˚ nˇejaké zdravotní omezení, které jim brání v plnohodnotném používání webu. Jedná se pˇredevším o zrakovˇe postižené, ale také o sluchovˇe a pohybovˇe postižené uživatele, uživatele s poruchami uˇcení a soustˇredˇení nebo uživatele s alternativními zobrazovacími zaˇrízeními. Jen barvoslepostí trpí každý desátý cˇ lovˇek, pˇetina lidí je v duchodovém ˚ vˇeku. Doˇcasnˇe omezené možnosti muže ˚ mít napˇríklad i jinak zdravý cˇ lovˇek, který si zlomí ruku a není schopen manipulovat s myší. Vytvoˇrení nepˇrístupného webu by popˇrelo jednu z jeho základních idejí: „Síla webu je v jeho univerzalitˇe. Pˇrístup pro každého nezávisle na jeho schopnostech je jeho základní prvek“ [17]. Špinar a Pavlíˇcek vytvoˇrili Pravidla tvorby pˇrístupného webu [18]1 , která slouží pro úˇcely informaˇcních systému˚ státní správy. Dají se však zobecnit jako doporuˇcení pro jakýkoli jiný web. Specifikují jednotlivé aspekty pˇrístupnosti v tˇechto oblastech: •

ˇ Citelnost a dostupnost obsahu webových stránek

•

Práce s webovou stránkou rˇ ízená uživatelem

•

Srozumitelnost a pˇrehlednost informací

•

Jasné a pochopitelné ovládání webu

•

Technická zpusobilost ˚ a struktura kódu

1. Oficiální znˇení cˇ eských pravidel pˇrístupného webu vzniklo v rámci projektu vˇedy a výzkumu YA512006003 Pˇrístupnost webových stránek orgánu˚ státní správy. Na jeho rˇ ešení se podíleli z velké cˇ ásti také zamˇestnanci Fakulty informatiky MU.

11

Kapitola 3

Analýza administraˇcních rozhraní eshopu˚ Cílem této analýzy je rozebrat problematiku uživatelského rozhraní na menší cˇ ásti a: •

Urˇcit, které aspekty jsou vzhledem k cíli práce nejduležitˇ ˚ ejší a podle toho stanovit vhodná kritéria pro analýzu

•

Na základˇe stanovených kritérií vytvoˇrit nástroj pro hodnocení administraˇcních rozhraní eshopu˚

•

Zjistit, jakým zpusobem ˚ jsou v analyzovaných eshopech rˇ ešeny dílˇcí problémy

•

Zhodnotit pozitivní a negativní stránky tˇechto rˇ ešení

•

Inspirovat se pro vytvoˇrení lepšího návrhu.

3.1

Kritéria analýzy

Pro stanovení kritérií analýzy uživatelských rozhraní eshopu˚ jsem použila osm zlatých pravidel pro návrh uživatelského rozhraní [14].1 Tato kritéria jsem doplnila o tˇri další, která považuji vzhledem k charakteru práce s administraˇcním rozhraním eshopu za duležitá. ˚ Jedná se o kritéria týkající se navigace (3.3.9), snadné práce se systémem (3.3.10) a procesu inicializace eshopu (3.3.11). 1.

Usilujte o konzistenci

2.

Respektujte širokou skupinu uživatelu˚

1. Osm zlatých pravidel lze nalézt také v cˇ eském pˇrekladu ve skriptech Dostála [10].

12

ˇ ˚ 3. A NALÝZA ADMINISTRA CNÍCH ROZHRANÍ ESHOP U

3.

Poskytujte zpˇetnou vazbu

4.

Provádˇejte uživatele pracovními postupy

5.

Pˇredcházejte chybám

6.

Umožnˇete uživateli vrátit se zpˇet a bud’te tolerantní k jeho chybám

7.

Vytváˇrejte pˇredvídatelné uživatelské rozhraní

8.

Nepˇretˇežujte krátkodobou pamˇet’ uživatele, nabízejte pˇrehlednost

9.

Navigujte uživatele

10.

Usnadnˇete uživateli práci

11.

Proved’te uživatele inicializací eshopu

3.2

Hodnocení analyzovaných eshopu˚

Ohodnocení administraˇcních rozhraní eshopu˚ není samo o sobˇe cílem mé práce, má však svuj ˚ význam. Slouží jednak k vˇetšímu pohodlí cˇ tenáˇre – mohu mu pˇredložit výsledek analýzy v jednom pˇrehledném grafu. Pˇredevším však mohu stejným zpusobem, ˚ jakým hodnotím analyzovaná administraˇcní rozhraní, ohodnotit i vlastní návrh. Poté mohu snáze rozhodnout, zda jsem splinila cíl práce: navrhnout lepší rˇ ešení než jsou ta, která jsou již bˇežnˇe dostupná na trhu. 3.2.1

Míra naplnˇení kritérií

Pˇri analýze eshopu˚ budu u každého kritéria sledovat, ve kterých ohledech jej naplnuje ˇ a ve kterých naopak porušuje. Silné a slabé stránky budu pro co nejsnazší cˇ itelnost zapisovat v bodech. U každého kritéria uvádím hodnocení, které rˇ íká, do jaké míry je naplnˇeno. Hodnocení je sice velmi subjektivní, avšak umožnuje ˇ administraˇcní rozhraní navzájem porovnávat. Míra zkreslení je ve všech pˇrípadech pˇribližnˇe stejná. 13


3.2.2

Váhy kritérií

Jednotlivá kritéria, která v rámci analýzy hodnotím, jsou ruznˇ ˚ e dule˚ žitá. Proto pro celkové porovnání eshopu˚ mezi sebou nestaˇcí vypocˇ ítat aritmetický prumˇ ˚ er, ale je tˇreba pracovat s váženým prumˇ ˚ erem. Jsem si vˇedoma toho, že i to, jak moc je které kritérium duležité, ˚ je subjektivní. Pˇresto však považuji za lepší rˇ ešení pˇriˇradit kritériím ruzné ˚ váhy podle svého nejlepšího vˇedomí, než s nimi pracovat jako s rovnocennými. Váhy jsou uvedeny u pˇríslušných kritérií v následující podkapitole (3.3).

3.3

Popis kritérií analýzy

3.3.1

Usilujte o konzistenci

Toto kritérium je velice obsáhlé – týká se konzistentní terminologie (na ruzných ˚ místech v menu, v menu a v nápovˇedˇe...), uspoˇrádání stránek, ikon, barev, fontu. ˚ Stejné posloupnosti úkonu˚ se dˇelají stejnˇe, podobné podobnˇe [14]. Konzistence usnadnuje ˇ ovládání systému. Pokud není dodržena, je uživatel nucen zastavit se a pˇremýšlet, zda dva ruznˇ ˚ e vzhlížející prvky slouží ke stejnému úˇcelu cˇ i nikoli. Kvalita systému je nekonzistentními prvky snížena, ne však zásadním zpusobem. ˚ Kritériu pˇriˇrazuji váhu 0.9. 3.3.2

Respektujte širokou skupinu uživatelu˚

V rámci tohoto kritéria si budu všímat, do jaké míry administraˇcní rozhraní eshopu respektuje ruznorodé ˚ potˇreby uživatelu. ˚ Lze je rozdˇelit do tˇrí skupin: •

Potˇreby a požadavky vyplývající z velikosti internetového obchodu, jeho zamˇerˇ ení apod.

•

Respektování ruznˇ ˚ e pokroˇcilých uživatelu˚ – zaˇcáteˇcníkum ˚ mohou pomoci napˇríklad vysvˇetlivky, expertum ˚ pˇridání pokrocˇ ilých funkcí, možnost používání klávesových zkratek apod. [14]. 14


•

Pˇrístupnost i pro handicapované uživatele (pˇrehledná struktura informací, alternativy netextových prvku...) ˚ Tomuto kritériu pˇriˇrazuji váhu 1.0.

3.3.3

Poskytujte zpˇetnou vazbu

Pokaždé, když uživatel provede nˇejakou operaci, by mˇel být informován o jejím výsledku. Zpˇetná vazba by mˇela být pˇrimˇerˇ ená dule˚ žitosti sdˇelení. Slabá zpˇetná vazba se používá u málo významných a cˇ asto se opakujících událostí, kdy staˇcí uživatele informovat o tom, co právˇe probíhá (napˇr. hláška ve stavovém rˇ ádku aplikace, zmˇena kurzoru bˇehem naˇcítání ve spinner). Pˇri zásadních nebo neobvyklých úkonech by mˇela být zpˇetná vazba výraznˇejší. V pˇrípadˇe, že se jedná o nevratnou zmˇenu je dobré vyžádat si od uživatele ujištˇení – napˇríklad formou dialogu s otázkou „Opravdu chcete produkt XY smazat?“ [14]. Dodržování konvencí, jako je napˇríklad zmˇena barvy odkazu pˇri najetí kurzorem myši, zmˇena podoby kurzoru ze šipky na podobu velkého písmena I pˇri oznaˇcení aktivního textového pole apod., považuji za samozˇrejmé a budu je v tomto bodˇe analýzy zminovat ˇ jen v pˇrípadˇe, že by byly porušeny. Tomuto kritériu pˇriˇrazuji váhu 1.1. 3.3.4

Provádˇejte uživatele pracovními postupy

Složitˇejšími pracovními úlohami provádˇejte uživatele krok za krokem. Mˇely by být uspoˇrádány do nˇekolika cˇ ástí tak, aby každá z nich mˇela jasný zaˇcátek a konec a jednotlivé kroky aby logicky následovaly po sobˇe. Obsáhlé formuláˇre by mˇely být rozdˇeleny do nˇekolika menších (typickým pˇrípadem takového formuláˇre v administraci eshopu je popis produktu). Na konci by mˇel uživatel dostat zpˇetnou vazbu o jejím dokonˇcení – dostaví se tak pocit uspokojení z úspˇešnˇe vykonané práce a muže ˚ se psychicky pˇripravit na další úkol [14]. Tomuto kritériu pˇriˇrazuji nižší váhu z toho duvodu, ˚ že vˇetšinu postupu˚ provádí uživatel opakovanˇe a muže ˚ se s nimi postupem cˇ asu nauˇcit pracovat i v pˇrípadˇe, že by byly špatnˇe navrženy. Váha kritéria je 0.8. 15


3.3.5

Pˇredcházejte chybám

Každá chyba snižuje efektivitu práce uživatele, ztrácí cˇ as, který by jinak mohl vˇenovat své práci a je psychicky frustrován tím, že se mu nˇeco nepodaˇrilo, jak by si pˇredstavoval. Proto je lepší vubec ˚ je nedopustit. Položky menu, které v daném kontextu nelze použít mají být zakázané, do kolonek, ve kterých mají být cˇ ísla nelze napsat nic jiného a typová kontrola se provádí okamžitˇe. V pˇrípadˇe, že chybˇe zabránit nelze, je duležité ˚ alesponˇ dobˇre informovat o tom, co se stalo a nabídnout nˇejaký zpusob, ˚ jak chybu napravit. Chybová hlášení mají být konstruktivní, podaná pozitivním tónem a problém by mˇela co nejlépe specifikovat [14]. Efektivita práce a psychické rozpoložení uživatele jsou velmi du˚ ležité. Shneiderman a Plaisant [14] toto kritérium považují dokonce za nejduležitˇ ˚ ejší z osmi zlatých pravidel (tj. z prvních osmi kritérií). Pˇriˇrazuji mu proto váhu 1.3. 3.3.6

Umožnˇete uživateli vrátit se zpˇet a bud’te tolerantní k jeho chybám

Všude kde je to možné by mˇel mít uživatel možnost vrátit zpˇet zmˇeny, které provedl. Kromˇe tlaˇcítka Undo by mˇel mít pochopitelnˇe k dispozici také tlaˇcítko Redo. Když má uživatel jistotu, že se muže ˚ vrátit, je mnohem zvídavˇejší a je ochotný vyzkoušet funkce, o kterých pˇresnˇe neví jak fungují [14]. Možnost vrátit provedené zmˇeny je duležitá, ˚ ne však tolik jako napˇríklad u editoru˚ (textových, grafických nebo jakýchkoli jiných), ve kterých uživatel nˇeco tvoˇrí a jediný chybný krok by mohl znehodnotit celé dílo. Pˇri vyplnˇení špatné kolonky však obvykle staˇcí vyplnit informaci znovu a správnˇe. Tomuto kritériu proto pˇriˇrazuji váhu 0.7. 3.3.7

Vytváˇrejte pˇredvídatelné uživatelské rozhraní

Uživatel je tím, kdo ovládá aplikaci a mˇel by nad ní mít subjektivní pocit kontroly. Zkušení uživatelé mají potˇrebu porozumˇet aplikaci jako celku, pochopit jak funguje a co kde mohou provést. Pokud se jim to nepodaˇrí, aplikace se jim nelíbí a nebudou ji používat rádi. 16


Proto by mˇelo být ovládání pˇredvídatelné, návodné. Mˇelo by se rˇ ídit zavedenými stereotypy, existují-li nˇejaké [14]. Tomuto kritériu pˇriˇrazuji váhu 1.1.

3.3.8

Nepˇretˇežujte krátkodobou pamˇet’ uživatele, nabízejte pˇrehlednost

Prvky na stránce by mˇely být rozvrženy tak, aby se uživatel pokaždé rychle zorientoval a v ideálním pˇrípadˇe nebyl nucen si nic pamatovat nebo opakovanˇe hledat. Lidský mozek je schopen uchovat v krátkodobé pamˇeti pouze 7±2 prvku˚ [10]. Tomuto kritériu pˇriˇrazuji váhu 0.9.

3.3.9

Navigujte uživatele

Navigace by mˇela být jednoduchá, konzistentní a jasná. Navigace poskytuje opˇerný bod – na každé stránce by mˇelo být uživateli zˇrejmé, kde se v danou chvíli nachází, jak se tam dostal a kudy muže ˚ zpátky. Zárovenˇ navigace rˇ íká, co všechno muže ˚ na dané stránce najít [13]. Tomuto kritériu pˇriˇrazuji váhu 1.0.

3.3.10 Usnadnˇete uživateli práci Administraˇcní rozhraní eshopu patˇrí mezi systémy, ve kterých se mnoho cˇ inností provádí rutinnˇe. Každý zbyteˇcný úkon, který je nutné provést tˇreba stokrát dennˇe, se stává nesmírnˇe obtˇežujícím a unavujícím, i kdyby zabral tˇreba jen zlomek vteˇriny. Mnoho úkonu˚ muže ˚ být automatizováno (import a export produktu, ˚ objednávek, napojení na porovnávaˇce zboží apod.). Tam, kde je nezbytná práce cˇ lovˇeka, je dobré dbát na to, aby byly úkony co nejjednodušší a nejpˇrímoˇcaˇrejší. Klade-li administraˇcní rozhraní uživateli neustále nˇejaké pˇrekážky, míra jeho frustrace se stupnuje. ˇ Administraˇcní rozhraní se stává nepoužitelným, možná dokonce zcela zbyteˇcným. Toto kritérium proto považuji za nejduležitˇ ˚ ejší ze všech a proto mu pˇriˇrazuji váhu 1.4. 17


3.3.11 Proved’te uživatele inicializací eshopu Úvodní nastavení eshopu pˇred jeho zprovoznˇením se liší od vˇetšiny ostatních cˇ inností každodenní údržby eshopu - neprovádí se totiž rutinnˇe. Pro uvedení internetového obchodu na trh a jeho budoucí fungování je však velmi duležité, ˚ aby bylo provedeno správnˇe. První dojem uživatele má navíc výrazný vliv na jeho postoj k administraˇcnímu rozhraní. Tomuto kritériu proto pˇriˇrazuji váhu 1.2.

3.4

Analýza eshopu R.

Eshop R.2 je úzce specializovaný eshop, který slouží k prodeji vstupenek na kulturní pˇredstavení. Byl vytvoˇren jako souˇcást jádra webu˚ vyvinutého ve spoleˇcnosti W. Je provizorním rˇ ešením pro jeden konkrétní projekt a v mnoha ohledech není nedokonalý. V rámci mého Interim projektu byl vstupem pro vytvoˇrení lepšího návrhu administraˇcního rozhraní. Proto jej uvádím i v této analýze. 1.

Usilujte o konzistenci Silné stránky: • •

Jednotný vzhled modulu eshopu s ostatními cˇ ástmi CMS Konzistentní layout

Slabé stránky: • •

• •

Názvy a barvy tlaˇcítek (Zpˇet, Zpˇet bez uložení, Storno, Zrušit - viz obrázek 3.1) Ruzná ˚ míra abstrakce v terminologii (nˇekdy obecné pojmy jako produkt, kategorie, jindy ve srovnatelném kontextu zkonkretizované na divadelní pˇredstavení nebo divadlo) Nejednotný vzhled tabulek (zarovnání, písmo, šíˇrka rˇ ádku) ˚ Nˇekteré chybové hlášky se objevují i v cˇ eské lokalizaci v angliˇctinˇe („Please enter numeric value“) - zˇrejmˇe se jedná o nedokonale ošetˇrenou výjimku

2. Z duvodu ˚ anonymizace neuvádím jméno projektu ani spoleˇcnosti, která jej vytvoˇrila a spravuje.

18


Naplnˇení kritéria 43 %.

Obrázek 3.1: Nekonzistentní názvy a barvy tlaˇcítek. 2.

Respektujte širokou skupinu uživatelu˚ Silné stránky: •

Jednoduchost a pˇrehlednost systému

•

Popisky grafických prvku˚

•

Pˇrímý kontakt na technickou podporu

Slabé stránky: •

Neuspokojí uživatele se specifickými požadavky na funkcionalitu

•

Chybí nápovˇeda

Naplnˇení kritéria 50 %. 3.

Poskytujte zpˇetnou vazbu Silné stránky: 19


•

Adekvátní rozlišení silné a slabé zpˇetné vazby

•

Hlášení – konzistentnˇe umístˇená, význam je barevnˇe podpoˇrený – –

•

Hlášení o úspˇešnˇe probˇehlých akcích – zelená barva (uložení, pˇridání nového produktu, kategorie..) Chybové hlášky – jsou cˇ ervené, napˇr. „Toto divadlo již má popis“

Pˇred smazáním produktu se zobrazí dialog s ujištˇením, zda jej chce uživatel opravdu smazat


Chybí dialog s upozornˇením pˇred nevratným smazáním objednávky nebo pˇred nevratnou zmˇenou jejího stavu


Provádˇejte uživatele pracovními postupy Silné stránky: •

Složitý formuláˇr s informacemi o produktu je rozdˇelen do logicky souvisejících bloku˚ (Cenové kategorie, Termíny, Obrázky ke hˇre, Doporuˇcené hry)

•

Zpˇetná vazba o úspˇešném dokonˇcení


Rozdˇelení do bloku˚ je jen optické – nutnost rolovat stránkou pro zobrazení dalších bloku˚

•

Údaje o novém produktu nelze vložit najednou – produkt se nejprve vytvoˇrí a vyplní se první cˇ ást údaju, ˚ pro vyplnˇení zbývajících údaju˚ je nutné pˇrepnout se do editace


Pˇredcházejte chybám Silné stránky: 20


•

Povinné položky ve formuláˇrích jsou oznaˇceny hvˇezdiˇckou

•

Pˇri uložení formuláˇre bez vyplnˇení povinné položky se stránka odroluje k místu, kde povinná informace chybí a u pˇríslušné kolonky se objeví konstruktivní hláška, napˇr. „Jméno produktu musí být vyplnˇené“

•

Našeptávání pˇri výbˇeru doporuˇcených produktu˚ (nelze doporuˇcit neexistující produkt)


Popis divadla lze pˇridat pouze jednou, avšak na tlaˇcítko Pˇridat popis divadla lze klepnout i v pˇrípadˇe, kdy již popis divadla existuje, naˇcež se objeví chybová hláška „„Toto divadlo již má popis“ (viz obrázek 3.2)

•

Zmˇena stavu objednávky nelze vrátit zpˇet a není ošetrˇ ena žádným dialogem se zpˇetnou vazbou

•

Pˇri nahrávání obrázku˚ není pˇredem specifikována maximální velikost ani povolené formáty, až pˇri pokusu o nahrání nevhodného souboru se objeví chybová hláška „File is too large“, pˇrípadnˇe „File has an invalid extension, it should be one of jpg, jpeg, png, bpm, gif“ (ˇceské pˇreklady chybí).


Umožnˇete uživateli vrátit se zpˇet a bud’te tolerantní k jeho chybám Silné stránky: •

Funkce Undo a Redo v textovém editoru

•

Možnost pohodlnˇe se vrátit zpˇet ze zobrazeného detailu na seznam

•

Svobodný pohyb hierarchií webu pomocí navigace


Nelze vrátit operaci smazání produktu, objednávky apod. 21


Obrázek 3.2: Chybová hláška po pokusu o pˇridání popisu divadla – v ideálním pˇrípadˇe by mˇel být pokus již pˇredem znemožnˇen, aby k chybˇe nemohlo dojít (eshop R.). •

Nelze vrátit zpˇet zmˇenu stavu objednávky


Vytváˇrejte pˇredvídatelné uživatelské rozhraní Silné stránky: •

Pocit kontroly nad systémem

•

Komplexní pˇrehled, co všechno je souˇcástí administraˇcního rozhraní a co lze kde provést


Ikona ozubeného kola se používá ve významu editace, bˇežnˇe je užívána spíše pro nastavení

•

Zbyteˇcnˇe komplikované a neintuitivní nastavení hlavního obrázku u produktu


Nepˇretˇežujte krátkodobou pamˇet’ uživatele, nabízejte pˇrehlednost Silné stránky: 22


•

Pˇrehledné rozdˇelení hlavních sekcí

•

Jednoduchost (daná hlavnˇe minimalistickým rˇ ešením eshopu)

•

Nastavitelný poˇcet položek v tabulkách


Pˇri odrolování stránky nemá uživatel na oˇcích název stránky ani tlaˇcítka pro akce a je nucen si tyto informace uchovávat v pamˇeti


Navigujte uživatele Silné stránky: •

Výrazný název stránky

•

Hlavní menu je konstantní, umístˇené vertikálnˇe


Chybí jakékoli vyhledávání!

•

Název stránky je staticky umístˇený, pokud uživatel stránku odroluje, už jej nevidí


Usnadnˇete uživateli práci Silné stránky: •

Našeptávání pˇri výbˇeru doporuˇcených her


Chybí vyhledávání, parametrické filtrování

•

Produkty nelze vyhledávat pˇrímo, ale jen pˇres pˇríslušnou kategorii (komplikace nastává, když si uživatel nepamatuje, v jaké kategorii daný produkt hledat)

•

Malé ikony pro akce – je obtížné se trefit pˇrímo na nˇe 23


Obrázek 3.3: Graf naplnˇení kritérií v analýze administraˇcního rozhraní eshopu R. Vážený prumˇ ˚ er je 55 %. Naplnˇení kritéria 40 %. 11.

Proved’te uživatele inicializací eshopu Silné stránky: •

Eshop není složitý, ani inicializace není složitá

•

Import a export produktu, ˚ avšak jen za asistence programátora


Nejsou definovány kroky, které je tˇreba pˇri inicializaci vykonat

Naplnˇení kritéria 50 %. Shrnutí analýzy eshopu R. Velkou pˇredností, ale zárovenˇ i nedostatkem je jednoduchost. Administraˇcní rozhraní nemá mnoho funkcí, a tak je snadné nauˇcit se všechny používat. Systém je pˇrehledný, uživatel není pˇrehlcen informacemi. Nároˇcným požadavkum ˚ však vždy nevyhoví. 24


Problémem jsou drobné chyby, které komplikují používání, nutí uživatele zbyteˇcnˇe pˇremýšlet a kazí celkový dojem. Nejˇcastˇeji se týkají nekonzistentních názvu, ˚ barev cˇ i vzhledu (kritérium 3.3.1). Velkou nevýhodou je absence vyhledávání nebo parametrického filtrování a pˇrístup k produktum ˚ pouze pˇres jejich kategorie, jež komplikuje každodenní práci se systémem (kritérium 3.3.10).

3.5

Analýza PrestaShopu

PrestaShop je nejrozšíˇrenˇejším open source rˇ ešením eshopu – je na nˇem postaveno více než 150 tisíc úspˇešnˇe fungujících internetových obchodu. ˚ Je prezentován ponˇekud ambicióznˇe jako nejlepší, nejspolehlivˇejší a neflexibilnˇejší software pro internetové obchodování. O vývoj technologie se stará pˇres 70 nadšencu˚ a komunita, která cˇ ítá 500 tisíc cˇ lenu˚ [3]. Pro analýzu jsem použila verzi PrestaShopTM 1.5.3.1. 1.

Usilujte o konzistenci Silné stránky: •

Konzistentní layout

•

Konzistentní zpˇetná vazba

•

Konzistentní drobeˇcková navigace


Nedokonalá cˇ eská lokalizace – jen polovina výrazu˚ je cˇ esky, druhá polovina je v puvodní ˚ angliˇctinˇe

•

Nekonzistentní umístˇení chybových hlášení



Pˇrizpusobení ˚ internetovým obchodum ˚ ruzných ˚ velikostí (napˇr. jednoduché nebo pokroˇcilé rˇ ízení skladových zásob) 25


•

Mnoho funkcí dokáže uspokojit ruznorodé ˚ potˇreby uživatelu˚

•

Velké množství modulu˚ a pluginu˚ k dodateˇcné instalaci

•

Výrazná ikona pro nápovˇedu, manuály, weby o PrestaShopu (i cˇ eské, napˇr [5] nebo [4])

•

Vzájemná pomoc v rámci široké komunity pˇrispˇevatelu˚ prostˇrednictvím diskuzního fóra

•

Open source rˇ ešení – pro experty existuje dokonce možnost úprav zdrojového kódu nebo doprogramování vlastních modulu˚


Ménˇe pokroˇcilý uživatel se ztrácí ve velkém množství funkcí, možností

•

Nápovˇeda není v cˇ eštinˇe

•

Nˇekteré ikony nemají popisky, zaˇcáteˇcník nemusí vˇedˇet, k cˇ emu slouží

•

Obtížnˇe pˇrístupné pro handicapované uživatele – informace jsou nepˇrehledné, chybí textové alternativy netextových prvku˚


Poskytujte zpˇetnou vazbu Silné stránky: •


•

Pˇri editaci produktu lze jedním klepnutím zobrazit náhled produktu ve frontendu, tedy stejnˇe, jak jej potom vidí i zákazník

•

Pˇeknˇe zpracovaná hlášení – viditelnˇe umístˇená, jejich význam je podpoˇren barevným rozlišením a symbolem (viz obrázek 3.4): –

Chybová hlášení – jsou cˇ ervená se symbolem kˇríže, analogicky s cˇ ervenou barvou na semaforu vybízejí k tomu, aby se uživatel zastavil a vyˇrešil problém 26


Obrázek 3.4: Barevnˇe dokreslený charakter hlášení (PrestaShop). – –

–

Výstražná hlášení – žlutooranžová s vykˇriˇcníkem, upozornují ˇ na chyby, které by mohly v blízké dobˇe nastat Hlášení o úspˇešném dokonˇcení – zelená s fajfkou, ujišt’ují o tom, že je všechno v poˇrádku a uživatel muže ˚ pokraˇcovat dál Informativní hlášení – modrá s písmenem i, jsou to poznámky cˇ istˇe informativního rázu, pˇrípadnˇe rady pro uživatele


Chybová hlášení: – – –

nejsou pˇríliš konkrétní, neuvádˇejí, v jaké sekci k chybˇe došlo neˇríkají nic o tom, jak chybu napravit (napˇr. „Pole upc je neplatné“) nejsou konzistentnˇe umístˇená (výstražná hlášení jsou pod lištou s drobeˇckovou navigací, hlášení o úspˇešném dokonˇcení a chybová hlášení jsou umístˇena nad ní; a informativní hlášení jsou vždy pˇrímo na místˇe, ke kterému se vztahují)


Provádˇejte uživatele pracovními postupy Silné stránky: 27


•

Složité úkoly jsou rozdˇelené do logicky souvisejících bloku˚

•

Velikost a poˇcet jednotlivých dílˇcích bloku˚ jsou vyvážené

•

Pohyb mezi bloky je usnadnˇen odkazy ve vertikálním menu na levém okraji stránky

•

Dobˇre viditelné ikony pro základní akce dostupné v dané sekci

•



Žádné neshledávám


Pˇredcházejte chybám Silné stránky: •

Povinné údaje ve formuláˇrích jsou oznaˇceny hvˇezdiˇckou

•

Vˇcasné informování o tom, že nebyly vyplnˇeny povinné údaje

•

Pˇri najetí kurzorem myši na textové pole se objeví seznam povolených (pˇríp. zakázaných) znaku˚

•

Našeptávání pˇri výbˇeru doporuˇcených produktu˚ (nelze doporuˇcit neexistující produkt)

•

Jasnˇe deklarované formáty a maximální velikost obrázku, ˚ které lze nahrát


Neprovádí se okamžitá typová kontrola – do textových polí lze psát jakékoli znaky

•

Uživatel je na použití nepovoleného znaku upozornˇen až pˇri uložení, cˇ asová prodleva mezi chybným vyplnˇením kolonky a zpˇetnou vazbou muže ˚ zpusobit ˚ zmatek

•

Chybová hlášení: 28


Obrázek 3.5: Chybové hlášení neˇríká, kde pˇresnˇe chyba vznikla a jak ji napravit (PrestaShop). – –

nejsou pˇríliš konkrétní, neuvádˇejí, v jaké sekci k chybˇe došlo neˇríkají nic o tom, jak chybu napravit (napˇr. „Pole upc je neplatné“, viz obrázek 3.5)




•


•


•

Pohodlný pohyb mezi sekcemi


Nelze vrátit operaci smazání produktu



Základní pocit kontroly nad systémem

•

Využití analogie ikon pro upozornˇení s Facebookem, pro více než miliardu uživatelu˚ Facebooku jsou ikony na první pohled povˇedomé (viz obrázek 3.6) 29


Obrázek 3.6: Analogie ikon pro upozornˇení v PrestaShopu a na Facebooku (PrestaShop a Facebook). Slabé stránky: •

Nˇekteré ikony nemají popisky, význam pˇritom nemusí být zˇrejmý (napˇr. význam ikony nákladního auta, která slouží pro stažení souboru s fakturaˇcní a doruˇcovací adresou)

•

Význam ikon analogických s Facebookem se liší, není na první pohled zˇrejmý


Nepˇretˇežujte krátkodobou pamˇet’ uživatele, nabízejte pˇrehlednost Silné stránky: •

Rozˇclenˇení informací o produktu do pˇrehledných sekcí

•

Název stránky a drobeˇcková navigace se pˇri odrolování stránky posouvají, aby uživatel nebyl nucen pamatovat si, kde se nachází

•

Tlaˇcítka pro dostupné akce se pˇri rolování stránkou posouvají, aby byla stále na oˇcích


Pˇríliš mnoho funkcí, které uživatel málokdy použije (napˇr. více než 60 tlaˇcítek u textového editoru, viz obrázek 3.7) 30


Obrázek 3.7: Pˇreplnˇený panel nástroju˚ textového editoru (PrestaShop). •

Poˇcet položek v hlavním menu pˇrekraˇcuje pravidlo 7±2



Základ navigace tvoˇrí hlavní menu – –

s širokou hierarchií (12 položek) lze rozbalovat do nižších úrovní

•

Výrazná drobeˇcková navigace, pˇri rolování stránkou se posouvá, aby byla vždy viditelná

•

Globální vyhledávání

•

Parametrické vyhledávání v produktech, kategoriích, objednávkách apod.

•

Složité formuláˇre rozdˇeleny do více sekcí s vlastním vertikálním menu





Komerˇcní nabídky propojení s úˇcetními systémy 31


•

Rychlé odkazy na nástˇence, možnost nastavení podle svých potˇreb

•

Parametrické vyhledávání v produktech, kategoriích, objednávkách

•

Export objednávek

•

Nástˇenka se statistikami

•

Možnost nastavit hromadné úpravy cen a skladových zásob


Pˇri instalování rozšiˇrujících modulu, ˚ které usnadní práci je iniciativa pˇredevším na uživateli



Na internetu lze nalézt podrobné návody, co všechno je potˇreba provést pˇred spuštˇením, napˇr. [2]

•

Import a export produktu˚

•

Kontrolní seznam konfigurace, který pomáhá odhalit chyby (týká se technických detailu˚ – konfigurace serveru, cache atd., vzniklá chyba je zˇrejmá i laikovi, aniž by ji musel nutnˇe rozumˇet po technické stránce)


Chybí proces provedení inicializací pˇrímo v administraˇcním rozhraní

Naplnˇení kritéria 70 %. 32


Obrázek 3.8: Graf naplnˇení kritérií v analýze administraˇcního rozhraní PrestaShopu. Vážený prumˇ ˚ er je 76 %. Shrnutí analýzy PrestaShopu Nejcharakteristiˇctˇejším rysem administraˇcního rozhraní PrestaShopu shledávám jeho otevˇrenost a tvárnost. Uživatel si jej muže ˚ pˇrizpuso˚ bit dle svých rozliˇcných potˇreb a pˇredstav. Nabízí se mu nepˇreberné možnosti, velké množství funkcí a modulu˚ (kritérium 3.3.2). Druhou stranou této pˇrizpusobitelnosti ˚ je nepˇrehlednost a velký nápor na krátkodobou pamˇet’ uživatele (kritérium 3.3.8). Z analyzovaných administraˇcních rozhraní má PrestaShop nejlépe vytvoˇrenou navigaci. Uživatel vždy vidí, kde se nachází a kudy se na dané místo dostal (kritérium 3.3.9). Také je uživateli dukladnˇ ˚ e poskytována zpˇetná vazba (kritérium 3.3.3).

3.6

Analýza Shoptetu

Shoptet je služba, která nabízí pronájem a tvorbou eshopu. ˚ Je vlastnˇená firmou Cybergenics s.r.o., která pusobí ˚ na trhu od roku 2009. Službu Shoptet spustili zaˇcátkem roku 2011 a již po prvních deseti mˇesících fungování mˇela více než 900 pravidelnˇe platících klientu˚ [6]. 33


1.


Konzistentní layout (kromˇe stromového menu v nastavení, které není rozˇclenˇené pomocí záložek, ale pomocí stromového menu)

•

Konzistentní navigace

•

Konzistentní terminologie

•

Konzistentní ikony, názvy, vzhled a umístˇení tlaˇcítek


Všechny sekce jsou rozˇclenˇené pomocí horizontálních záložek, jen nastavení je rozˇclenˇené pomocí stromového menu (vzhledem k obsáhlosti nastavení to nepovažuji za jednoznaˇcnˇe špatné rˇ ešení, výhodou je, že položky jsou takto pˇrehlednˇejší)

•

Mírnˇe nekonzistentní grafická úprava hlášení



Ruzné ˚ tarify podle ruzných ˚ potˇreb zákazníku˚ (Start, Lite, Business, Profi, Enterprise)

•

Nápovˇeda, online manuál, popisky grafických prvku, ˚ nápovˇeda u kolonek, jejichž vyplnˇení není triviální

•

Technická podpora

•

Pˇrehledná struktura informací i v textovém prohlížeˇci





Obrázek 3.9: Barevnˇe rozlišená hlášení, graficky mírnˇe nejednotná (Shoptet). 3.



•

Pˇri editaci produktu lze jedním klepnutím zobrazit náhled produktu ve frontendu, tedy stejnˇe, jak jej potom vidí i zákazník

•

Hlášení – konzistentnˇe umístˇená, význam je barevnˇe podpoˇrený (viz obrázek 3.9) – – –

•

Upozornˇení – cˇ ervené bez symbolu Hlášení o úspˇešnˇe probˇehlých akcích (uložení, pˇridání nového produktu, kategorie..) – zelené s fajfkou Informativní hlášení – žlutooranžové se symbolem žárovky

Pˇred smazáním produktu se zobrazí dialog s ujištˇením, zda jej chce uživatel opravdu smazat


ˇ Cervená barva u chybových hlášení evokuje chybu, sdˇelení má však spíše charakter upozornˇení

•

Chyby nejsou rˇ ešeny standardními hláškami, nýbrž vyskakovacími dialogy, které jsou zcela nevypovídající (napˇr. „null“ jako reakce na neúspˇešné nahrání souboru, viz obrázek 3.10)


Provádˇejte uživatele pracovními postupy Silné stránky: 35


•

Složité úkoly jsou rozdˇelené do logicky souvisejících záložek a bloku˚

•

Velikost a poˇcet jednotlivých dílˇcích bloku˚ jsou vyvážené

•

Poˇcet záložek je pˇrimˇerˇ ený

•

Dobˇre viditelné ikony pro základní akce dostupné v dané sekci

•






Okamžitá kontrola unikátnosti kódu produktu

•

Povinné údaje o produktu se vyplnují ˇ ve zvláštním dialogu hned pˇri vytváˇrení nového produktu, nemuže ˚ se tedy stát, že by nˇekterý nebyl vyplnˇen


Pˇri nahrávání loga není kontrolován formát souboru, chyba se projeví jen tím, že se logo nenahraje, nezobrazí se žádné hlášení o chybˇe

•

Není kontrolována velikost loga ani obrázku, ˚ automaticky se neupravují, velké obrázky potom mohou zaplnit i celou stránku

•

Formát není kontrolován ani pˇri nahrání obrázku, ˚ po nahrání souboru v chybném formátu se zobrazí dialog s chybovou hláškou

•

Uživatel není pˇri vytváˇrení produktu ani pˇri editaci upozornˇen na to, že nejsou definovány ceny (pˇrípadnˇe že 36


Obrázek 3.10: Chybové hlášení není rˇ ešeno standardní hláškou, o nicˇ em nevypovídá (Shoptet). ceny obsahují chybné znaky). Tato skuteˇcnost je konstatována jen v tabulce s pˇrehledem produktu˚ v administraˇcním rozhraní. Zákazníci produkt bez ceny nevidí vu˚ bec •

Chyby nejsou rˇ ešeny standardními hláškami, nýbrž vyskakovacími dialogy, které nevypovídají o tom, jak chyba vznikla a jak ji napravit (napˇr. „null“ jako reakce na neúspˇešné nahrání souboru, viz obrázek 3.10)




•


•


•

Pohodlný pohyb mezi záložkami


Nelze vrátit operaci smazání produktu



7.


Pocit kontroly nad systémem

•

Návodné ovládání

•

Napomáhá uživateli získat komplexní pˇrehled, co všechno je souˇcástí administraˇcního rozhraní a co lze kde provést





Pˇrehledné rozˇclenˇení hlavních sekcí i podsekcí

•

Pˇrehledné rozˇclenˇení formuláˇru˚ do záložek a bloku˚

•

Tlaˇcítka pro dostupné akce se pˇri odrolování stránky posouvají, aby byla stále na oˇcích


Pˇri odrolování stránky nemá uživatel na oˇcích její název a umístˇení, je nucen uchovávat to v pamˇeti



Základ navigace tvoˇrí hlavní menu, které lze rozbalovat do nižších úrovní

•

V sekci nastavení je vytvoˇreno pomocné menu pomocí stromové struktury

•

Výrazný název každé stránky 38


•

Drobeˇcková navigace

•

Globální vyhledávání

•


•

Složité formuláˇre rozdˇeleny do více záložek, v rámci záložek jsou ještˇe cˇ lenˇeny do bloku˚


Název stránky i drobeˇcková navigace jsou statické, pokud uživatel stránku odroluje, již nevidí, kde se nachází



Propojení s úˇcetním systémem Stormware Pohoda

•

Hromadné úpravy ceníku, skladových zásob, slev a akcí (viz obrázek 3.11)

•

Parametrické vyhledávání v produktech, kategoriích, objednávkách apod

•

Možnost exportu objednávek

•

Pohodlné kopírování produktu˚

•

Nástˇenka se statistikami

•

Našeptávání pˇri výbˇeru souvisejících produktu˚




Proved’te uživatele inicializací eshopu Silné stránky: 39


Obrázek 3.11: Hromadné úpravy skladových zásob (Shoptet). •

Pˇeknˇe zpracovaný postup v devíti krocích udává komplexní pˇredstavu o tom, co vše je potˇreba nastavit (viz obrázek 3.12)

•

Návod není násilný, nevnucuje se

•

Navádí ke správnému poˇradí kroku˚ (nejprve nastavím kategorie, následnˇe nahraji zboží)

•

Tam, kde není dodržení poˇradí kroku˚ duležité, ˚ není vyžadováno

•

Zpˇetná vazba u kroku, ˚ které byly splnˇeny (zmˇení se barva a typ písma, cˇ íslo kroku se promˇení ve fajfku a objeví se zelený rámeˇcek s nápisem Hotovo)

•

Import a export produktu˚



Naplnˇení kritéria 98 %. Shrnutí analýzy Shoptetu Administraˇcní rozhraní Shoptetu je dusledné ˚ v detailech. Používá konzistentní názvy, umístˇení prvku, ˚ pracovní postupy (kritérium 3.3.1). Provádí uživatele nejkomplikovanˇejším procesem, který v administraˇcním rozhraní existuje, a tím je jeho inicializace. Definuje jednotlivé kroky, kterými je tˇreba projít a dává zpˇetnou vazbu o tom, zda byly úspˇešnˇe splnˇeny. 40


Obrázek 3.12: Proces inicializace eshopu (Shoptet). Slabou stránkou jsou chyby, které nejsou ošetˇreny takovým zpu˚ sobem, aby k nim vubec ˚ nemohlo dojít – pˇredevším pˇri nahrávání souboru, ˚ kdy nejsou pˇredem specifikovány povolené formáty ani maximální velikost (kritérium 3.3.5).

41


Obrázek 3.13: Graf naplnˇení kritérií v analýze administraˇcního rozhraní Shoptetu. Vážený prumˇ ˚ er je 80 %.

Obrázek 3.14: Porovnání míry naplnˇení kritérií u analyzovaných eshopu. ˚ Nejlepšího ohodnocení dosáhl Shoptet, vážený prumˇ ˚ er je 80 %.

42

Kapitola 4

Analýza rolí a procesu˚ 4.1

Popis rolí

•

Uživatel – jakákoli osoba, která používá administraˇcní rozhraní eshopu.

•

Technický správce – má na starosti technickou podporu, zajišt’uje bezproblémové fungování, muže ˚ upravovat systémové nastavení, do obsahové stránky eshopu nezasahuje.

•

Administrátor – má veškeré pˇrístupy do administrace eshopu (kromˇe systémového nastavení). Muže ˚ vykonávat stejné cˇ innosti jako obsluha eshopu, navíc muže ˚ zˇrizovat uživatelské úˇcty a spravovat jejich oprávnˇení.

•

Obsluha eshopu – uživatel, který provádí základní správu eshopu: –

Vkládá nový produkt

–

Edituje informace o produktu

–

Hromadnˇe upravuje ceny/marži/DPH

–

Zadává akce a slevy

–

Pˇridává a upravuje zpusoby ˚ platby

–

Pˇridává a upravuje zpusoby ˚ dopravy

–

Vytváˇrí a upravuje kategorie produktu˚

–

Uskupuje produkty do kategorií 43

4. A NALÝZA ROLÍ A PROCES U˚ •

Zákazník – osoba, která navštíví eshop s úmyslem nˇeco zakoupit, prohlíží si produkty, filtruje je podle ruzných ˚ parametru, ˚ vkládá produkty do košíku, objednává, platí apod. Nemá pˇrístup do administraˇcního rozhraní.

•

Skladník – osoba, která pˇrijímá zboží, skladuje je a vydává. Aktualizuje údaje o skladových zásobách, kompletuje zboží z jednotlivých objednávek a pˇredává je k doruˇcení zákazníkum. ˚ V administraci eshopu provádí tyto cˇ innosti:

•

–

Zobrazí objednávku

–

Zmˇení stav objednávky

–

Zobrazí skladové zásoby

–

Upraví skladové zásoby

Úˇcetní – osoba, která provozuje úˇcetnictví (tedy cˇ innost, která vede ke zjištˇení stavu a zmˇen majetku a jeho zdroju, ˚ výsledku hospodaˇrení za urˇcité období). Ke své práci potˇrebuje pˇrístup k fakturám a sazbám DPH u produktu, ˚ kategorií a pod. Pro úˇcetní je vytvoˇrený speciální pohled na objednávky jen jako faktury. –

Zobrazí si aktuální sazbu DPH produktu/kategorie

–

Zmˇení sazbu DPH produktu/kategorie

–

Zobrazí si faktury z daného období

–

Zobrazí si zaplacené/nezaplacené faktury

44

4. A NALÝZA ROLÍ A PROCES U˚

4.2

Analýza procesu˚

Pomˇernˇe málo úkonu, ˚ které v administraˇcním rozhraní eshopu probíhají, je natolik složitých, že o nich má smysl mluvit jako o procesech. Výjimkou jsou dva procesy, které považuji za tolik duležité, ˚ že si zaslouží dukladnˇ ˚ ejší analýzu. Jedná se o inicializaci eshopu a proces zpracování objednávky. Pro vytvoˇrení BPMN (Business Process Model and Notation) diagramu˚ jsem použila nástroj Academic Signavio. 4.2.1

Inicializace eshopu

Inicializací eshopu jsem se zabývala již pˇri analýze v pˇredchozí kapitole (kapitola 3). Proces znázornˇený na obrázku 4.1 zachycuje základní kroky, které je nezbytné provést pˇredtím, než se eshop spustí v ostrém provozu. Role: •

Administrátor – vytvoˇrí uživatelský úˇcet pro obsluhu eshopu

•

Obsluha eshopu – má na starosti všechny úkony související se samotnou inicializací - nastavení kategorií, plnˇení eshopu produkty, urˇcení zpusob ˚ u˚ platby a dopravy apod.

45


46

Obrázek 4.1: Proces inicializace eshopu.

4. A NALÝZA ROLÍ A PROCES U˚ 4.2.2

Zpracování objednávky

Proces zpracování objednávky je zachycen diagramem na obrázku 4.2. V procesu jsou zachyceny stavy, kterými objednávka prochází. Dále jsou v nˇem znázornˇeny další úkoly, které je v rámci zpracování objednávky nutné vykonat (objednat chybˇející produkty u dodavatele, podˇekovat zákazníkovi apod.) Pro vˇetší pˇrehlednost jsem se pˇri modelování procesu nezabývala pˇrijetím a ovˇerˇ ením platby. Role: •

Eshop (webová aplikace) – zaznamená vytvoˇrenou objednávku, ovˇerˇ í skladové zásoby a po vyˇrízení objednávky pošle klientovi zprávu s podˇekováním za nákup

•

Obsluha eshopu – v pˇrípadˇe potˇreby objednává zboží u dodavatele, pˇripravené objednávky pˇredává zákazníkovi nebo zásilkové službˇe

•

Skladník – kompletuje produkty v objednávce a aktualizuje skladové množství

1 ˇ „Cerné skˇrínky“: ˇ

•

Zákazník – vytvoˇrí objednávku, na konci procesu mu jsou doruˇceny objednané produkty (pˇrípadnˇe si je sám vyzvedne)

•

Dodavatel – dodáva produkty, které nejsou skladem

•

Zásilková služba – pˇrevezme produkty a doruˇcí zákazníkovi

1. Aktéˇri spolupracují pouze jako cˇ erné skˇrínky. ˇ Viditelná je jen jejich komunikace, procesy, které probíhají uvnitˇr nejsou známy.

47


Obrázek 4.2: Proces zpracování objednávky.

48


Obrázek 4.3: Subproces: Pˇríprava objednávky.

49

Kapitola 5

Návrh Na základˇe analýzy administraˇcních rozhraní nˇekolika z dostupných eshopu˚ jsem vytvoˇrila vlastní návrh. Je vytvoˇren v podobˇe wireframu˚ (tzv. drátˇených modelu), ˚ které znázornují ˇ rozložení funkˇcních prvku˚ na stránce. Po odsouhlasení funkcionality slouží jako základ pro vytvoˇrení grafického designu. Pro tvorbu wireframu˚ jsem použila webovou aplikaci moqups.1 Navržené wireframy jsou popsány v podrobné specifikaci. Wireframy i specifikace jsou elektronickými pˇrílohami diplomové práce.

5.1

Úˇcel systému

Administraˇcní rozhraní eshopu slouží ke spravování internetového obchodu bez potˇreby odborných doovedností (znalosti programovacího nebo znaˇckovacího jazyka, detailních informací o systému apod.). Duraz ˚ je kladen na snadnou, efektivní práci a intuitivní ovládání. Nejˇcastˇejšími úkony je vkládání a upravování informací o nabízených produktech a ke správˇe objednávek.

5.2

Layout administraˇcního rozhraní

Layout je pˇrizpusobený ˚ charakteru obsahu stránky. Na stránkách podobného charakteru je i uspoˇrádání prvku˚ podobné. Podle rozložení prvku˚ lze rozdˇelit stránky do tˇrí skupin: •

Úvodní strany

•

Pˇrehledy

1.

Aplikace moqups je dostupná na adrese

50

5. N ÁVRH

Obrázek 5.1: Spoleˇcné prvky layoutu. •

5.2.1

Detaily

Spoleˇcné prvky

Prvky layoutu, které se opakují na všech stránkách administraˇcního rozhraní, jsou znázornˇeny na obrázku 5.1

Záhlaví a hlavní menu Všechny stránky administraˇcního rozhraní mají stejné záhlaví a hlavní menu.2 V levé cˇ ásti záhlaví je umístˇeno logo, které slouží jako odkaz na úvodní stranu (nástˇenku). V pravé cˇ ásti je umístˇen odkaz pro odhlášení a zobrazení frontendu. Pod záhlavím je umístˇeno horizontální menu, zarovnané je k levému okraji a lze u obsáhlejších sekcí rozbalovat do nižších úrovní. Na pravém okraji je ve výšce menu umístˇené také vyhledávání, ne však ve všech cˇ ástech systému. Na pˇrehledových a detailových stránkách chybí.

Plovoucí lišta Je umístˇena pod drobeˇckovou navigací. Podrobnˇeji je popsána v podkapitole 5.3.3. 2. Vzhledem k tomu, že je záhlaví a menu vždy stejné, není znázornˇeno ve wireframech. Není to potˇreba.

51

5. N ÁVRH

Obrázek 5.2: Rozložení prvku˚ na pˇrehledových stránkách. 5.2.2

Pˇrehledy

Pˇrehledové stránky slouží k procházení seznamu˚ položek. Patˇrí mezi nˇe: Pˇrehled produktu, ˚ Pˇrehled kategorií, Hromadné úpravy a Pˇrehled objednávek. Rozložení prvku˚ je znázornˇeno na obrázku 5.2. Jednotlivé položky pˇrehledu jsou uspoˇrádány v tabulce. Název položky je vložen vždy jako odkaz pro zobrazení detailu. V posledním sloupci tabulky jsou nabídnuty akce dostupné pro danou položku. 5.2.3

Detaily

Mezi detailové stránky patˇrí Detail a editace produktu, Detail a editace objednávky, Editace kategorie a velké množství stránek v sekci Nastavení. Rozložení prvku˚ je znázornˇeno na obrázku 5.3. Informace jsou uspoˇrádány v rozbalovacích blocích, ke kterým náleží vertikální menu umístˇené na pravé stranˇe. Pod širokou lištou s názvem stránky je umístˇena ménˇe výrazná lišta na které lze pˇrepínat jazykové verze.

5.3

Navigace

K navigaci v eshopu slouží tyto prvky: •

Horizontální menu 52

5. N ÁVRH

Obrázek 5.3: Rozložení prvku˚ na detailových stránkách. •


•

Plovoucí lišty

•

Tématické bloky

•

Vyhledávání

•

Parametrický filtr

•

Stromové menu s kategoriemi

5.3.1

Horizontální menu

Základní osou navigace v celém administraˇcním rozhraní je horizontální menu, které je tvoˇreno šesti položkami: Nástˇenka (úvodní strana), Produkty, Kategorie, Objednávky, Statistiky, Nastavení, 5.3.2


Drobeˇcková navigace zrcadlí strukturu eshopu. Pokud se uživatel dostal na aktuální stránku pˇrímoˇcarou cestou, pak zrcadlí i jeho cestu. Neplatí to však v pˇrípadˇe, kdy uživatel na stránku pˇrišel nˇejakou oklikou nebo naopak využil rychlého odkazu. Je zobrazena v horní cˇ ásti stránky nad širokou plovoucí lištou a narozdíl od ní se pˇri rolování neposouvá dolu, ˚ ale zustává ˚ na místˇe. 53

5. N ÁVRH 5.3.3

Plovoucí lišty

Na každé stránce i podstránce eshopu se zobrazuje široká lišta, která poskytuje základní informaci o tom, kde se uživatel nachází (napˇr. editace objednávky 325554). Pˇri rolování stránkami s rozsáhlejším obsahem zustává ˚ lišta stále viditelná nahoˇre nad zobrazeným obsahem. Titulek napsaný pˇrívˇetivˇe velkými písmeny a informuje o tom, k cˇ emu stránka slouží (k editaci objednávky), v pˇrípadˇe zobrazení konkrétní položky i s cˇ ím mohu danou cˇ innost provádˇet (s objednávkou cˇ íslo 325554). V pravé cˇ ásti lišty jsou ikonky, které nabízejí základní a nejˇcastˇeji upotˇrebitelné úkony (uživatelsky pˇrívˇetivé svou velikostí i tím, že jsou stále na oˇcích a vždy po ruce, jsou stereotypní a opatrˇ ené popisky).

5.3.4

Tématické bloky

O každém produktu i objednávce je v eshopu uloženo velké množství informací. Aby byly tyto informace pˇrehledné, jsou tématicky uspoˇrádány v blocích pod sebou. Obsah bloku˚ je možné podle potˇreby zobrazit nebo skrýt. Pro rychlejší pohyb mezi bloky a vˇetší pˇrehlednost mají také vlastní menu, které se posouvá po stránce stejnˇe jako plovoucí lišta.

5.3.5

Vyhledávání

Pole pro vyhledávání je umístˇeno v pravém horním rohu hlavní stránky (viz wireframe nástˇenky – obrázek 5.6). Velikost vyhledávacího je pˇribližnˇe pro 25 znaku, ˚ aby postaˇcila pro pohodlný zápis i víceslovných výrazu˚ [12]. V sekci Produkty lze vyhledávat pouze produkty, v sekci Objednávky pouze objednávky. Pole pro vyhledávání je umístˇeno pˇrímo nad tabulkou s pˇrehledem produktu˚ (viz obrázek 5.4), v Objednávkách analogicky. 54

5. N ÁVRH

Obrázek 5.4: Umístˇení vyhledávacího pole v sekci Produkty. 5.3.6

Parametrický filtr

Slouží pro vyhledávání produktu˚ podle štítku˚ 3 nebo ruzných ˚ para4 metru˚ . Poˇcet parametru, ˚ které je možné definovat není omezený. V internetových obchodech s ruznorodým ˚ sortimentem jich muže ˚ být k popisu všech produktu˚ potˇreba obrovské množství. Filtrování produktu˚ podle všech definovaných parametu˚ by však nebylo pˇrehledné. Proto je ve výchozím nastavení povoleno filtrování, jen pokud je vybraná konkrétní kategorie, jinak filtrování nebude možné. 5.3.7

Stromové menu s kategoriemi

Slouží k vyhledání všech produktu˚ dané kategorie v Pˇrehledu produktu˚ nebo v Hromadných úpravách. Kategorie jsou zobrazeny ve stromové struktuˇre, podkategorie je možné skrývat a zobrazovat. Stejnˇe tak je možné skrýt nebo zobrazit celý strom kategorií pomocí velké ikony s šipkou umístˇené na lištˇe pod širokou plovoucí lištou.

5.4

Zpˇetná vazba

5.4.1

Modální sekundární okna

Pro silnou zpˇetnou vazbu jsou použita modální sekundární okna. Dokud nejsou obsloužena, neumožnují ˇ interakci s ostatními souˇcástmi 3. Štítky (novinky, výprodej apod.) lze definovat v nastavení eshopu a jejich nabídka je pro všechny produkty v celém eshopu spoleˇcná. 4. Parametry se rovnˇež definují v nastavení eshopu. Na rozdíl od štítku˚ lze parametr definovat pro konkrétní produkt nebo kategorii. Jednou definovaný parametr je možné využívat opakovanˇe i u jiných produktu˚ nebo kategorií.

55

5. N ÁVRH

Obrázek 5.5: Umístˇení hlášení systému. webové aplikace. Jsou proto vhodná pro situace, kdy je nezbytné, aby uživatel jasnˇe vyjádˇril, že je s informací v modálním oknˇe srozumnˇen [10]. Pˇríkladem je dialog, který vyskoˇcí pˇred smazáním produktu: „Opravdu chcete produkt XY smazat?“

5.4.2

Hlášení systému

Hlášení systému jsou konzistentnˇe umístˇena na horním okraji stránky pod hlavním menu (viz obrázek 5.5). Stejnˇe jako v PrestaShopu jsou rozdˇelena do cˇ tyˇr skupin: •

Chybová hlášení – jsou cˇ ervená se symbolem kˇríže, v ideálním pˇrípadˇe by se nemˇely nikdy objevit

•

Výstražná hlášení – žlutooranžová s vykˇriˇcníkem, upozornují ˇ na chyby, které by mohly v blízké dobˇe nastat

•

Hlášení o úspˇešném dokonˇcení – zelená s fajfkou, ujišt’ují o tom, že je všechno v poˇrádku a uživatel muže ˚ pokraˇcovat dál

•

Informativní hlášení – modrá s písmenem i, jsou to poznámky informativního rázu, rady pro uživatele

56

5. N ÁVRH

5.5

ˇ Cásti administraˇcního rozhraní

5.5.1

Nástˇenka

Nástˇenka (anglicky dashboard) je úvodní stránkou administraˇcního rozhraní. Sama o sobˇe nemá žádnou funkci, která by nebyla dostupná jiným zpusobem. ˚ Je ve velké míˇre personalizovatelná a slouží k tomu, aby mohl mít každý uživatel po pˇrihlášení do administraˇcního rozhraní po ruce to, co potˇrebuje nejvíce. Moduly, které lze umístit na nástˇenku jsou detailnˇe popsány v dokumentaci k eshopu. Nástˇenka muže ˚ vypadat napˇríklad jako na obrázku 5.6. 5.5.2

Katalog produktu˚

Katalog produktu˚ slouží k vkládání a upravování informací o nabízených produktech. Všechny produkty jsou uspoˇrádány v kategoriích podle spoleˇcných rysu˚ – jejich uspoˇrádání je systematické, produkty se snadnˇeji vyhledávají a informace, které jsou spoleˇcné pro všechny produkty v kategorii mohou být v systému uloženy pouze jednou. V menu v administraˇcním rozhraní je katalog produktu˚ rozdˇelen na dvˇe samostatné položky: •

Kategorie – v této sekci lze vytvoˇrit stromovou strukturu kategorií, do kterých se následnˇe zaˇrazují produkty. Jeden produkt muže ˚ pˇríslušet k více kategoriím souˇcasnˇe, jedna kategorie však musí být nastavena jako hlavní.

•

Produkty – v této sekci se vkládají nebo upravují informace o produktech

5.5.3

Objednávky

Modul objednávky umožnuje ˇ pˇristupovat k objednávkám, které byly vytvoˇreny zákazníky ve frontendu eshopu a spravovat je. U každé objednávky lze zobrazit její aktuální stav a zda již byla zaplacena. Tyto údaje je možné mˇenit tak, aby odpovídaly skuteˇcnosti. Dále lze zobrazit údaje o zákazníkovi, vybraný zpusob ˚ platby a dopravy, jednotlivé položky objednávky a slevy k nákupu, jsou-li nˇejaké. 57

5. N ÁVRH

Obrázek 5.6: Ukázka nástˇenky s vybranými moduly. 58

5. N ÁVRH 5.5.4

Statistiky

Statistiky jsou urˇceny k tomu, aby poskytovaly zpˇetnou vazbu o tom, jak se daˇrí obchodování a pomohly odhalit jeho slabiny. Tyto informace pˇrispívají ke zvýšení konverzního pomˇeru. Statistiky nejsou implementovány v navrženém rˇ ešení pˇrímo, jsou generovány prostˇrednictvím služby Google Analytics (více informací [1]). 5.5.5

Nastavení

Nastavení slouží k pˇrizpusobení ˚ internetového obchodu podle ruz˚ norodých potˇreb. Zahrnuje tyto sekce: •

Doprava a platba

•

Ceny

•

Produkty

•

Sklad

•

Výrobci a dodavatelé

•

Statistiky

59

Kapitola 6

Hodnocení navrženého rˇešení Hlavním cílem mé práce bylo vytvoˇrit takový návrh administraˇcního rozhraní, který bude lepší, než rˇ ešení již dostupná na trhu. K tomu, abych se pˇriblížila odpovˇedi na otázku, zda jsem tento cíl splnila, využiji stejných kritérií, pomocí nichž jsem analyzovala a následnˇe hodnotila vybrané eshopy v kapitole 3, a tato kritéria aplikuji i na vlastní návrh. 1.


Konzistentní layout na stránkách stejného charakteru

•

Konzistentní navigace

•

Terminologie, ikony, vzhled a umístˇení tlaˇcítek





Jednoduchost a pˇrehlednost

•

Popisky grafických prvku˚

•

Snaha o co nejširší možnosti použití

•

Pˇrístupnost

•

Možnost personalizace nástˇenky 60

ˇ 6. H ODNOCENÍ NAVRŽENÉHO REŠENÍ


Neobsahuje nápovˇedu

•

Návrh nenabízí ruzné ˚ tarify odpovídající potˇrebám ruz˚ ných internetových obchodu˚




•

Modální sekundární okna pro silnou zpˇetnou vazbu

•

Konzistentnˇe umístˇená hlášení

•

Zmˇena barvy prvku pˇri oznaˇcení




Provádˇejte uživatele pracovními postupy Silné stránky: •

Složité úkoly jsou rozdˇeleny do logicky souvisejících bloku˚ (uspoˇrádání bloku˚ je znázornˇeno na obrázku 6.1)

•

Velikost a poˇcet dílˇcích bloku˚ jsou vyvážené

•

Pohyb mezi bloky je usnadnˇen odkazy ve vertikálním menu na levém okraji stránky

•

Momentálnˇe nepotˇrebné bloky lze skrýt (pomocí ikonky s šipkou), v pˇrípadˇe potˇreby opˇet zobrazit

•

Výrazné ikony pro akce dostupné v dané sekci

•



Žádné neshledávám 61


Obrázek 6.1: Uspoˇrádání tématických bloku. ˚ K rychlému pohybu mezi bloky slouží vertikální menu. Nepotˇrebné bloky lze skrýt, jejich poˇradí lze upravit pomocí cˇ tyˇrsmˇerné šipky. Naplnˇení kritéria 75 %. 5.


Pˇresnˇe definované formáty a maximální velikost pro nahrávané soubory

•

Oznaˇcení povinných položek ve formuláˇrích

•

Automatické dopoˇcítávání cen podle sazby DPH pˇredchází chybám ve výpoˇctech

•

Okamžitá typová kontrola

•

Okamžitá kontrola unikátnosti ID


Název tlaˇcítka Zpˇet muže ˚ být matoucí: znamená vrátit zpˇet zmˇeny nebo zpˇet na pˇredchozí stránku?



6.


Pohodlný pohyb hierarchií webu

•

Pˇrívˇetivˇe velké tlaˇcítko Zpˇet pro návrat z detailu do pˇrehledu


Návrh neˇreší problematiku ukládání dat do databáze, nejsem na jeho základˇe oprávnˇena rozhodnout, zda administraˇcní rozhraní umožní vrátit zpˇet operaci smazání

•

Textová pole pro popis produktu˚ umožnují ˇ vkládat pouze prostý text, nemjí žádný panel nástroju˚ a tím pádem nejsou dostupné ani funkce Undo a Redo



Návodné ovládání, pocit kontroly nad systémem

•

Intuitivní ikony

•

Snadno pochopitelná struktura administraˇcního rozhraní





Pˇrehledné a logické rozˇclenˇení sekcí a bloku˚

•

Aktuální poloha a tlaˇcítka pro dostupné akce vždy dobˇre viditelné, pˇri rolování stránkou se také posouvají 63


•

Nepotˇrebné prvky lze skrýt (napˇríklad tématické bloky v editaci produktu) ˚

•

Prvky, které nejsou potˇreba cˇ asto jsou skryty již ve výchozím uspoˇrádání (parametrický filtr, stromové menu pro výbˇer kategorie)





Výrazný název stránky, viditelný i pˇri rolování stránkou

•


•

Vyhledávání v produktech, objednávkách, kategoriích

•

Parametrické filtrování

•

Složité formuláˇre rozdˇeleny do více bloku˚ s vlastním vertikálním menu





Propojení s úˇcetními systémy pomocí formátu ISDOC (Information System Document), který je standardem elekˇ tronické fakturace v CR

•

Export objednávek

•

Tisk položek objednávky pro snadné kompletování produktu˚

•

Automatické dopoˇcítávání cen a marží 64


Obrázek 6.2: Pruvodce ˚ inicializací eshopu na nástˇence administraˇcního rozhraní. •

Automatické doplnování ˇ souvisejících produktu˚

•

Hromadné úpravy ceníku, skladových zásob, slev a akcí

•


•

Našeptávání

•

Rychlé odkazy a pˇrehledné statistiky na nástˇence





Modul pro nástˇenku První kroky v eshopu – jednoduchý, pˇrehledný pruvodce ˚

•

Navádí ke správnému poˇradí kroku˚ a poskytuje zpˇetnou vazbu o tom, co bylo splnˇeno

•

Doporuˇcený postup inicializace není jediný správný a proto se nevnucuje, uživatel má možnost rozhodnout se, zda se ho bude držet, nebo zda vše nastaví po svém


Žádná neshledávám



6.1

Shrnutí

Hodnocení návrhu je znázornˇeno grafem 6.3, porovnání s analyzovanými eshopy je znázornˇeno v grafu 6.4. Administraˇcní rozhraní je navrženo tak, aby uživatelum ˚ co nejvíce usnadnilo práci (kritérium 3.3.10). Na toto kritérium kladu nejvˇetší duraz ˚ a ze všech eshopu˚ hodnocených v této práci dopadl návrh nejlépe. Všechny cˇ innosti, u kterých je to možné, probíhají automatizovanˇe. Systém je podle návrhu možné pomocí formátu ISDOC propojit s ruznými ˚ úˇcetními systémy. V administraˇcním rozhraní se lze snadno a rychle pohybovat díky pˇrehlednému uspoˇrádání a prakticky umístˇeným rychlým odkazum. ˚ Ceny a produkty lze upravovat hromadnˇe. Nedostatkem návrhu je, že vytvoˇren pouze v jedniné univerzální podobˇe. Neexistují verze, které by lépe odpovídaly potˇrebám internetových obchodu˚ z ruzných ˚ segmentu˚ trhu, s ruznˇ ˚ e vysokými rozpoˇcty apod. Na druhou stranu je i tato jediná verze natolik flexibilní, že je schopna uspokojit mnoho ruznorodých ˚ požadavku˚ (kritérium 3.3.2). Návrh v podobˇe wireframu˚ není schopen zachytit nˇekteré jemnˇejší zpusoby ˚ zpˇetné vazby (napˇr. zmˇena barvy odkazu˚ pˇri najetí kurzorem myši apod.). Ze své podstaty návrh vubec ˚ nepostihuje problematiku ukládání dat do databáze. Nejsem oprávnˇena rozhodnout, zda by bylo v navrženém systému možné doˇcasnˇe ukládat smazané produkty pro umožnˇení funkce Undo. Hlavnˇe z tohoto duvodu ˚ je hodnocení kritéria 3.3.6 tak nízké.

66


Obrázek 6.3: Graf naplnˇení kritérií u navrženého rˇ ešení. Vážený pru˚ mˇer je 84 %

Obrázek 6.4: Graf naplnˇení kritérií analyzovaných eshopu˚ a navrženého rˇ ešení.

67


6.2

Porovnání návrhu a analyzovaných eshopu˚

Poˇradí eshopu˚ podle výsledku˚ hodnocení je následující: 1.

Návrh eshopu (vážený prumˇ ˚ er 84 %)

2.

Shoptet (vážený prumˇ ˚ er 80 %)

3.

PrestaShop (vážený prumˇ ˚ er 76 %)

4.

Eshop R.(vážený prumˇ ˚ er 55 %)

Vážený prumˇ ˚ er hodnocených kritérií u navrženého rˇ ešení je 84 %, což je lepší výsledek než u jakéhokoli z analyzovaných eshopu. ˚ Hodnocení prvních tˇrí eshopu˚ jsou pomˇernˇe vyrovnaná, eshop R. zustává ˚ s dosaženým výsledkem váženého prumˇ ˚ eru 55 % výraznˇe pozadu.

68

Kapitola 7

Závˇer V diplomové práci jsem provedla analýzu administraˇcních rozhraní eshopu˚ bˇežnˇe dostupných na trhu. Pˇrednosti i nedostatky analyzovaných eshopu˚ mne inspirovaly k vytvoˇrení pˇredstavy o ideálním administraˇcním rozhraní eshopu, kterou jsem se pokusila zhmotnit ve vlastním návrhu. Administraˇcní rozhraní ideálního eshopu by mˇelo vycházet vstˇríc potˇrebám svého uživatele. Mˇelo by pro nˇeho být užiteˇcné a usnadnovat ˇ mu práci jak pˇri jeho každodenních povinnostech, tak i pˇri nárazových úkolech. Na tento aspekt jsem kladla pˇri návrhu vlastního rˇ ešení nejvˇetší duraz. ˚ Cíl diplomové práce se mi podaˇrilo splnit ve všech jeho bodech. Vytvoˇrila jsem návrh administraˇcního rozhraní eshopu a pomocí hodnotících kritérií jsem prokázala, že je návrh v daných ohledech lepší, než dostupná rˇ ešení. Pˇri vytváˇrení návrhu jsem mˇela velkou výhodu – znala jsem již slabé stránky, které jsem nalezla u analyzovaných eshopu˚ a mohla jsem se jim snáze vyvarovat. Nejvˇetší výzvou pro mne bylo pracovat s tak velkým množstvím detailních informací, všímat si každého prvku na stránce, neopomenout žádnou duležitou ˚ funkci, a pˇritom udržet jednotnou koncepci.

69

Literatura [1] Google analytics official website – web analytics and reporting, January 2013. [Online; cit. 2013-11-15]. URL: . [2] Prestashop – nastavení pˇred spuštˇením, June 2013. [Online; cit. 2013-12-08]. URL: . [3] Prestashop demo: Explore the world’s best free e-commerce software, 2013. [Online; cit. 2013-11-21]. URL: . ˇ [4] Prestashop Cesky: Informaˇcní web o e-shop systému prestashop, 2013. [Online; cit. 2013-12-08]. URL: . ˇ [5] Prestashop cˇ esky: Ceský portál o nejlepším open source eshopu, 2013. [Online; cit. 2013-12-08]. URL: . [6] Shoptet – startup.lupa: Pomáháme cˇ eským startupum, ˚ 2013. [Online; cit. 2014-01-02]. URL: . [7] Bob Boiko. Content Management Bible. Wiley Publishing, Indianapolis, 2nd edition, 2005. [8] Jan Chromý. Elektronické podnikání. VŠH, Praha, 2nd edition, 2009. 70

ˇ 7. Z ÁV ER

[9] Marek Doleˇcek. Elektronický obchod, June 2010. [Online; cit. 2013-11-20]. URL: . [10] Martin Dostál. Základy tvorby uživatelského rozhraní. Univerzita Palackého, Olomouc, 2007. Dostupné také z: . [11] Tomáš Dudek. Vybíráme internetový obchod pro prodej zboží, March 2008. [Online; cit. 2013-11-20]. URL: . [12] Martin Kopta. Jak cˇ eské weby rˇ eší pole pro vyhledávání, January 2003. [Online; cit. 2013-12-28]. URL: . [13] Steve Krug. Webdesign: Nenut’te uživatele pˇremýšlet. Computer Press, Brno, 2nd edition, 2006. [14] Ben Shneiderman and Catherine Plaisant. Designing the User Interface: Strategies for Effective Human-Computer Interaction. Pearson Addison Wesley, College Park, 4th edition, 2005. [15] Wikipedia. Systém pro správu obsahu – wikipedie, otevˇrená encyklopedie, 2013. [Online; cit. 2013-12-20]. URL: . [16] Wikipedia. User experience – wikipedia, the free encyclopedia, 2013. [Online; cit. 2013-11-21]. URL: . [17] David Špinar. Tvoˇríme pˇrístupné webové stránky. Zoner Press, Brno, 2004. 71

ˇ 7. Z ÁV ER

[18] David Špinar and Radek Pavlíˇcek. Pravidla tvorby pˇrístupného webu, 2007. [Online; cit. 2013-11-20]. URL: .

72

Pˇríloha A

Wireframy Elektronická pˇríloha Pˇríloha obsahuje návrh administraˇcního rozhraní eshopu v podobˇe wireframu, ˚ neboli drátˇených modelu. ˚ Wireframy jsou uspoˇrádány ve složkách podle sekcí administraˇcního rozhraní: •

Nástˇenka

•

Produkty

•

Kategorie

•

Objednávky

•

Nastavení

73

Pˇríloha B

Specifikace k wireframum ˚ Elektronická pˇríloha Jedná se o dokument popisující wireframy pˇriložené v pˇríloze A.

74

012345

Recommend Documents