}w!"#$%&'()+,-./012345<ya

}w!"#$%&'()+,-./012345<ya MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY Analýza a návrh administračního rozhraní eshopu DIPLOMOVÁ PRÁCE Bc. Marie Molnárová Brno, 2014

Prohlášení Prohlašuji, že tato diplomová práce je mým původním autorským dílem, které jsem vypracovala samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používala nebo z nich čerpala, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj. Vedoucí práce: Ing. Leonard Walletzký, Ph.D. ii

Poděkování Děkuji vedoucímu práce Ing. Leonardu Walletzkému, Ph.D. za veškeré rady, připomínky a čas, který si na mou práci ve své vytíženosti vyhradil. Děkuji společnosti W. za námět k práci a průběžné směřování, Marii Anně M. za obětavou korekturu a svému bráškovi za trpělivou podporu. iii

Shrnutí Diplomová práce předkládá návrh administračního rozhraní eshopu, jehož cílem je překonat možnosti běžně dostupné na trhu. Prioritou předloženého návrhu je spokojenost uživatele. Návrhu předchází analýza administračních rozhraní několika již existujících eshopů. Kritéria, která byla zvolena pro analýzu, jsou následně aplikována i na návrh a díky tomu je možné porovnat navržené řešení s analyzovanými. Návrh je vytvořen v podobě wireframů 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íčová slova Eshop, administrační rozhraní, uživatelské rozhraní, user experience, wireframe. vi

Obsah 1 Úvod................................ 4 2 Vymezení základních pojmů.................. 6 2.1 Elektronické podnikání................... 6 2.1.1 Druhy elektronického podnikání......... 6 2.1.2 Elektronický obchod................ 8 2.1.3 Internetový obchod................. 8 2.2 Eshop (webová aplikace).................. 8 2.3 Administrační rozhraní a CMS.............. 9 2.4 User experience (UX).................... 10 2.5 Použitelnost......................... 10 2.6 Přístupnost.......................... 11 3 Analýza administračních rozhraní eshopů.......... 12 3.1 Kritéria analýzy....................... 12 3.2 Hodnocení analyzovaných eshopů............ 13 3.2.1 Míra naplnění kritérií............... 13 3.2.2 Váhy kritérií..................... 14 3.3 Popis kritérií analýzy.................... 14 3.3.1 Usilujte o konzistenci................ 14 3.3.2 Respektujte širokou skupinu uživatelů..... 14 3.3.3 Poskytujte zpětnou vazbu............. 15 3.3.4 Provádějte uživatele pracovními postupy.... 15 3.3.5 Předcházejte chybám................ 16 3.3.6 Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám................ 16 3.3.7 Vytvářejte předvídatelné uživatelské rozhraní. 16 3.3.8 Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost................. 17 3.3.9 Navigujte uživatele................. 17 3.3.10 Usnadněte uživateli práci............. 17 3.3.11 Proved te uživatele inicializací eshopu...... 18 1

3.4 Analýza eshopu R...................... 18 3.5 Analýza PrestaShopu.................... 25 3.6 Analýza Shoptetu...................... 33 4 Analýza rolí a procesů...................... 43 4.1 Popis rolí........................... 43 4.2 Analýza procesů....................... 45 4.2.1 Inicializace eshopu................. 45 4.2.2 Zpracování objednávky.............. 47 5 Návrh................................ 50 5.1 Účel systému......................... 50 5.2 Layout administračního rozhraní............. 50 5.2.1 Společné prvky................... 51 Záhlaví a hlavní menu............... 51 Plovoucí lišta.................... 51 5.2.2 Přehledy....................... 52 5.2.3 Detaily........................ 52 5.3 Navigace........................... 52 5.3.1 Horizontální menu................. 53 5.3.2 Drobečková navigace............... 53 5.3.3 Plovoucí lišty.................... 54 5.3.4 Tématické bloky.................. 54 5.3.5 Vyhledávání..................... 54 5.3.6 Parametrický filtr.................. 55 5.3.7 Stromové menu s kategoriemi.......... 55 5.4 Zpětná vazba........................ 55 5.4.1 Modální sekundární okna............. 55 5.4.2 Hlášení systému.................. 56 5.5 Části administračního rozhraní.............. 57 5.5.1 Nástěnka....................... 57 5.5.2 Katalog produktů.................. 57 5.5.3 Objednávky..................... 57 5.5.4 Statistiky....................... 59 5.5.5 Nastavení...................... 59 6 Hodnocení navrženého řešení................. 60 6.1 Shrnutí............................ 66 6.2 Porovnání návrhu a analyzovaných eshopů....... 68 7 Závěr................................ 69 A Wireframy............................. 73 2

B Specifikace k wireframům.................... 74 3

Kapitola 1 Úvod Na tématu Analýza a návrh administračního rozhraní eshopu jsem začala pracovat již v rámci svého Interim projektu ve společnosti W. 1 na jaře roku 2013. Navazovala jsem na práci své předchůdkyně, která vytvořila návrh pro administrační rozhraní CMS (Content Management System). Mým úkolem bylo provést analýzu a vytvořit návrh modulu eshopu tak, aby byl konzistentní s návrhem CMS a mohl do něho být začleněn. Během stáže jsem pracovala samostatně, během pravidelných konzultací s vedením firmy však byly mé představy 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ři psaní diplomové práce jsem začala znovu od začátku provedla jsem novou analýzu, odprostila jsem se od návaznosti na navržené CMS a na základě toho jsem přepracovala původní návrh. Půlroční práce během stáže mi však přinesla základní přehled 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čních rozhraní eshopů, které jsou dostupné na trhu. Popsat administrační rozhraní ideálního eshopu a vytvořit vlastní návrh, který se bude co nejvíce blížit k ideálu. Následně prokázat jeho přínos oproti stávajícím řešením, která jsou dostupná na trhu. Návrh bude vytvořen ve formě wireframů a podrobné specifikace. 1. Z důvodu anonymizace neuvádím jméno společnosti. 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ční rozhraní, user experience, použitelnost a přístupnost. Další dvě kapitoly jsou věnovány analýze. Ve třetí kapitole jsem určila kritéria pro analýzu administračních rozhraní eshopů. Tato kritéria aplikuji při analýze tří vybraných eshopů (eshop R., Presta- Shop a Shoptet). Ve čtvrté kapitole analyzuji potřebné role a nejzajímavější procesy zpracování objednávky a proces inicializace eshopu. Vlastnímu návrhu se věnuji v páté a šesté kapitole. V páté kapitole jej popisuji. Vymezuji, jaký má systém účel, jakým způsobem poskytuje uživateli zpětnou vazbu a jak jej naviguje. Dále popisuji jednotlivé sekce administračního rozhraní. V šesté kapitole jsem podrobila návrh hodnocení podle stejných pravidel, které jsem při analýze aplikovala na administrační rozhraní již existujících eshopů. V závěru práce dospívám k tomu, jak by měl vypadat ideální eshop. Porovnávám vytvořený návrh s analyzovanými eshopy a se stanoveným ideálem a konstatuji, zda jsem splnila svůj cíl. 5

Kapitola 2 Vymezení základních pojmů 2.1 Elektronické podnikání Elektronickým podnikáním se rozumí každá realizace podnikatelských procesů, která ke svému uskutečnění využívá elektronických informačních technologií a informačních systémů. Oblast, ve které se podnikání uskutečňuje nehraje roli, může jít o nákup a prodej zboží, poskytování služeb nebo cokoli jiného. Důležitý je způsob komunikace a využívání informačních technologií a systémů [8]. V souvislosti s elektronickým podnikáním se často zmiňují také pojmy elektronický obchod a internetový obchod. Elektronický obchod je jednou z forem elektronického podnikání a nejrozšířenějším způsobem elektronického obchodu je internetový obchod. Vztah mezi těmito pojmy je vyjádřen také obrázkem 2.1. 2.1.1 Druhy elektronického podnikání Druhy elektronického podnikání se obvykle dělí podle vzájemných vztahů mezi subjekty, které do obchodního vztahu vstupují. Nejčastěji se jedná o podnikání mezi dvěma firmami (B2B) nebo firmou a konečnými spotřebiteli (B2C). Úplný výčet všech druhů elektronického podnikání je však mnohem pestřejší [8]: B2C (Business to consumer) jedná se o vztah mezi firmou a konečnými spotřebiteli. Obchodní vztahy jsou realizovány prostřednictvím webových aplikací nebo virtuálních obchodů. Rozvoj informačních technologií přispěl ze všech forem elektronického podnikání nejvíce právě k rozvoji vztahů B2C. 6

2. VYMEZENÍ ZÁKLADNÍCH POJMŮ Obrázek 2.1: Schéma elektronického podnikání [11]. B2B (Business to business) forma podnikání mezi dvěma podnikatelskými subjekty slouží k obchodování se zbožím za účelem dalšího podnikání. Z hlediska objemu je tento druh obchodu nejvýznamnější. Informačními systémy jsou tyto vztahy realizovány jako elektronická výměna dat. B2G (Business to government) jedná se o vztah firmy a orgány státní správy (jako jsou např. finanční úřady, sociální a zdravotní pojišt ovny apod.). Komunikace mezi těmito subjekty neslouží k obchodní činnosti přímo, ale je velmi důležitou nadstavbou. C2C (Consumer to consumer) jedná se o vztahy mezi koncovými spotřebiteli, kteří nakupují a prodávají zboží např. prostřednictví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čnosti nepatří. B2E (Business to employee) označení reprezentuje vztahy mezi firmou a jejími zaměstnanci. Může nabývat různých podob sdílení informací prostřednictvím Intranetu, poskytování kurzů formou e-learningu apod. Cílem je zlepšení komunikace mezi 7

2. VYMEZENÍ ZÁKLADNÍCH POJMŮ firmou a zaměstnanci a zvýšení produktivity práce pomocí upevňování pocitů sounáležitosti a důležitosti. 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ěstnancem dané firmy či nikoli. 2.1.2 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ření a plnění smlouvy [9]. Ne vždy je možné realizovat elektronický obchod plně elektronickou cestou. Pod pojem elektronický obchod se zahrnují produkty, které byly zakoupeny přes internet a zaslány v digitální podobě, ale i produkty, které byly doručeny ve hmotné podobě [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řednictví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žňuje. Ačkoli se pojmy internetový obchod a eshop běžně chápají jako synonymní, pro přesnost 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ředkování prodeje a dalších služeb jako je reklamace apod. Nezbytnými součástmi aplikace jsou 8

2. VYMEZENÍ ZÁKLADNÍCH POJMŮ katalog produktů, nákupní košík a databáze pro ukládání objednávek a evidenci zákazníků. V ostatních funkcích se jednotlivé eshopy od sebe navzájem liší, málokdy však zůstávají jen u těch základních [8]. 2.3 Administrační rozhraní a CMS Pro definování pojmu administrační rozhraní je třeba nejprve vysvětlit pojem CMS, jehož je administrační rozhraní součástí. CMS (Content Management System, česky systém pro správu obsahu, obvykle se však nepřekládá a používá se anglická zkratka) je webová aplikace, která slouží ke shromažd ování, správě a publikování jednotlivých informací, které tvoří komponenty obsahu webu. Smyslem CMS je učinit správu webu intuitivní a co nejjednodušší. Díky CMS je možné spravovat obsah webových stránek skrze administrační rozhraní, aniž by byla nutná znalost programovacího nebo značkovacího jazyka [7]. CMS je obvykle tvořeno databází, ve které jsou uložena všechna data, rozhraním, ve kterém se obsah stránek zobrazuje návštěvníkům stránek (takzvaným front-endem) a pro nás podstatným administračním rozhraním, které je přístupné pouze po přihlášení (někdy se používá termín back-end). V něm lze obsah stránek upravovat. Mezi funkce administračních rozhraní patří [15]: Vytváření, úprava a publikace textů (obvykle za použití jednoduchého WYSIWYG editoru) Správa souborů, obrázků a galerií Správa přístupových práv Správa diskusí nebo komentářů Vkládání aktualit a správa kalendáře Statistika přístupů 9

2.4 User experience (UX) 2. VYMEZENÍ ZÁKLADNÍCH POJMŮ Pro termín user experience (UX) se obtížně hledá výstižný český ekvivalent. Někdy se překládá jako uživatelský prožitek, jindy jako uživatelská zkušenost, setkala jsem se i s výrazem uživatelská spokojenost. Nejlepším řešením je nejspíš termín vůbec nepřekládat a používat jej v původním znění. Ještě obtížnější než vybrat správný překlad je však nalézt přesnou definici tohoto termínu je jich mnoho a vždy se navzájem trochu liší. Společné jim je to, že do středu svého zájmu nekladou produkt, ale uživatele produktu. Důležitou roli přitom hraje subjektivní prožívání a emoce spojené s jeho používáním. Jedna z nejvýstižnějších definic je uvedena na anglické Wikipedii: User experience (UX) se zabývá tím, jak se lidé cítí, když používají nějaký produkt, systém či službu. UX se zaměřuje na emoční a hodnotové aspekty komunikace člověka s počítačem a vlastnictví produktu, zahrnuje také vnímání praktických aspektů jako je užitečnost, snadné použití a efektivita systému. User experience je ve své podstatě subjektivní, protože se týká individuálních pocitů a smýšlení o systému. UX je dynamické, mění se v průběhu času spolu s měnícími se okolnostmi [16, přeložila autorka]. 2.5 Použitelnost V analýze administračních rozhraní eshopů i ve vlatním návrhu budu klást důraz na to, zda jsou použitelné. Použitelný web přitom chápu takto: Použitelný web je takový web, který se návštěvníkům dobře používá. Kde se dobře orientují, rychle naleznou to, co hledají. Kde se neztrácí, nedělají zbytečné 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ěřuje i přístupnost, kterou vymezím v následující sekci. 10

2. VYMEZENÍ ZÁKLADNÍCH POJMŮ 2.6 Přístupnost Přístupnost se zaměřuje především na spokojenost handicapovaných uživatelů. Je takový stav, kdy daná věc neklade svým uživatelům při používání žádné zásadní překážky [17]. Podle Špinara má až třetina uživatelů nějaké zdravotní omezení, které jim brání v plnohodnotném používání webu. Jedná se především o zrakově postižené, ale také o sluchově a pohybově postižené uživatele, uživatele s poruchami učení a soustředění nebo uživatele s alternativními zobrazovacími zařízeními. Jen barvoslepostí trpí každý desátý člověk, pětina lidí je v důchodovém věku. Dočasně omezené možnosti může mít například i jinak zdravý člověk, který si zlomí ruku a není schopen manipulovat s myší. Vytvoření nepřístupného webu by popřelo jednu z jeho základních idejí: Síla webu je v jeho univerzalitě. Přístup pro každého nezávisle na jeho schopnostech je jeho základní prvek [17]. Špinar a Pavlíček vytvořili Pravidla tvorby přístupného webu [18] 1, která slouží pro účely informačních systémů státní správy. Dají se však zobecnit jako doporučení pro jakýkoli jiný web. Specifikují jednotlivé aspekty přístupnosti v těchto oblastech: Čitelnost a dostupnost obsahu webových stránek Práce s webovou stránkou řízená uživatelem Srozumitelnost a přehlednost informací Jasné a pochopitelné ovládání webu Technická způsobilost a struktura kódu 1. Oficiální znění českých pravidel přístupného webu vzniklo v rámci projektu vědy a výzkumu YA512006003 Přístupnost webových stránek orgánů státní správy. Na jeho řešení se podíleli z velké části také zaměstnanci Fakulty informatiky MU. 11

Kapitola 3 Analýza administračních rozhraní eshopů Cílem této analýzy je rozebrat problematiku uživatelského rozhraní na menší části a: Určit, které aspekty jsou vzhledem k cíli práce nejdůležitější a podle toho stanovit vhodná kritéria pro analýzu Na základě stanovených kritérií vytvořit nástroj pro hodnocení administračních rozhraní eshopů Zjistit, jakým způsobem jsou v analyzovaných eshopech řešeny dílčí problémy Zhodnotit pozitivní a negativní stránky těchto řešení Inspirovat se pro vytvoření lepšího návrhu. 3.1 Kritéria analýzy Pro stanovení kritérií analýzy uživatelských rozhraní eshopů jsem použila osm zlatých pravidel pro návrh uživatelského rozhraní [14]. 1 Tato kritéria jsem doplnila o tři další, která považuji vzhledem k charakteru práce s administračním rozhraním eshopu za důlež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živatelů 1. Osm zlatých pravidel lze nalézt také v českém překladu ve skriptech Dostála [10]. 12

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ 3. Poskytujte zpětnou vazbu 4. Provádějte uživatele pracovními postupy 5. Předcházejte chybám 6. Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám 7. Vytvářejte předvídatelné uživatelské rozhraní 8. Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost 9. Navigujte uživatele 10. Usnadněte uživateli práci 11. Proved te uživatele inicializací eshopu 3.2 Hodnocení analyzovaných eshopů Ohodnocení administračních rozhraní eshopů není samo o sobě cílem mé práce, má však svůj význam. Slouží jednak k většímu pohodlí čtenáře mohu mu předložit výsledek analýzy v jednom přehledném grafu. Především však mohu stejným způsobem, jakým hodnotím analyzovaná administrační rozhraní, ohodnotit i vlastní návrh. Poté mohu snáze rozhodnout, zda jsem splinila cíl práce: navrhnout lepší řešení než jsou ta, která jsou již běžně dostupná na trhu. 3.2.1 Míra naplnění kritérií Při analýze eshopů budu u každého kritéria sledovat, ve kterých ohledech jej naplňuje a ve kterých naopak porušuje. Silné a slabé stránky budu pro co nejsnazší čitelnost zapisovat v bodech. U každého kritéria uvádím hodnocení, které říká, do jaké míry je naplněno. Hodnocení je sice velmi subjektivní, avšak umožňuje administrační rozhraní navzájem porovnávat. Míra zkreslení je ve všech případech přibližně stejná. 13

3.2.2 Váhy kritérií 3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Jednotlivá kritéria, která v rámci analýzy hodnotím, jsou různě důležitá. Proto pro celkové porovnání eshopů mezi sebou nestačí vypočítat aritmetický průměr, ale je třeba pracovat s váženým průměrem. Jsem si vědoma toho, že i to, jak moc je které kritérium důležité, je subjektivní. Přesto však považuji za lepší řešení přiřadit kritériím různé váhy podle svého nejlepšího vědomí, než s nimi pracovat jako s rovnocennými. Váhy jsou uvedeny u pří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 různých místech v menu, v menu a v nápovědě...), uspořádání stránek, ikon, barev, fontů. Stejné posloupnosti úkonů se dělají stejně, podobné podobně [14]. Konzistence usnadňuje ovládání systému. Pokud není dodržena, je uživatel nucen zastavit se a přemýšlet, zda dva různě vzhlížející prvky slouží ke stejnému účelu či nikoli. Kvalita systému je nekonzistentními prvky snížena, ne však zásadním způsobem. Kritériu přiřazuji váhu 0.9. 3.3.2 Respektujte širokou skupinu uživatelů V rámci tohoto kritéria si budu všímat, do jaké míry administrační rozhraní eshopu respektuje různorodé potřeby uživatelů. Lze je rozdělit do tří skupin: Potřeby a požadavky vyplývající z velikosti internetového obchodu, jeho zaměření apod. Respektování různě pokročilých uživatelů začátečníkům mohou pomoci například vysvětlivky, expertům přidání pokročilých funkcí, možnost používání klávesových zkratek apod. [14]. 14

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Přístupnost i pro handicapované uživatele (přehledná struktura informací, alternativy netextových prvků...) Tomuto kritériu přiřazuji váhu 1.0. 3.3.3 Poskytujte zpětnou vazbu Pokaždé, když uživatel provede nějakou operaci, by měl být informován o jejím výsledku. Zpětná vazba by měla být přiměřená důležitosti sdělení. Slabá zpětná vazba se používá u málo významných a často se opakujících událostí, kdy stačí uživatele informovat o tom, co právě probíhá (např. hláška ve stavovém řádku aplikace, změna kurzoru během načítání ve spinner). Při zásadních nebo neobvyklých úkonech by měla být zpětná vazba výraznější. V případě, že se jedná o nevratnou změnu je dobré vyžádat si od uživatele ujištění například formou dialogu s otázkou Opravdu chcete produkt XY smazat? [14]. Dodržování konvencí, jako je například změna barvy odkazu při najetí kurzorem myši, změna podoby kurzoru ze šipky na podobu velkého písmena I při označení aktivního textového pole apod., považuji za samozřejmé a budu je v tomto bodě analýzy zmiňovat jen v případě, že by byly porušeny. Tomuto kritériu přiřazuji váhu 1.1. 3.3.4 Provádějte uživatele pracovními postupy Složitějšími pracovními úlohami provádějte uživatele krok za krokem. Měly by být uspořádány do několika částí tak, aby každá z nich měla jasný začátek a konec a jednotlivé kroky aby logicky následovaly po sobě. Obsáhlé formuláře by měly být rozděleny do několika menších (typickým případem takového formuláře v administraci eshopu je popis produktu). Na konci by měl uživatel dostat zpětnou vazbu o jejím dokončení dostaví se tak pocit uspokojení z úspěšně vykonané práce a může se psychicky připravit na další úkol [14]. Tomuto kritériu přiřazuji nižší váhu z toho důvodu, že většinu postupů provádí uživatel opakovaně a může se s nimi postupem času naučit pracovat i v případě, že by byly špatně navrženy. Váha kritéria je 0.8. 15

3.3.5 Předcházejte chybám 3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Každá chyba snižuje efektivitu práce uživatele, ztrácí čas, který by jinak mohl věnovat své práci a je psychicky frustrován tím, že se mu něco nepodařilo, jak by si představoval. Proto je lepší vůbec 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 čísla nelze napsat nic jiného a typová kontrola se provádí okamžitě. V případě, že chybě zabránit nelze, je důležité alespoň dobře informovat o tom, co se stalo a nabídnout nějaký způsob, jak chybu napravit. Chybová hlášení mají být konstruktivní, podaná pozitivním tónem a problém by měla co nejlépe specifikovat [14]. Efektivita práce a psychické rozpoložení uživatele jsou velmi důležité. Shneiderman a Plaisant [14] toto kritérium považují dokonce za nejdůležitější z osmi zlatých pravidel (tj. z prvních osmi kritérií). Přiřazuji mu proto váhu 1.3. 3.3.6 Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám Všude kde je to možné by měl mít uživatel možnost vrátit zpět změny, které provedl. Kromě tlačítka Undo by měl mít pochopitelně k dispozici také tlačítko Redo. Když má uživatel jistotu, že se může vrátit, je mnohem zvídavější a je ochotný vyzkoušet funkce, o kterých přesně neví jak fungují [14]. Možnost vrátit provedené změny je důležitá, ne však tolik jako například u editorů (textových, grafických nebo jakýchkoli jiných), ve kterých uživatel něco tvoří a jediný chybný krok by mohl znehodnotit celé dílo. Při vyplnění špatné kolonky však obvykle stačí vyplnit informaci znovu a správně. Tomuto kritériu proto přiřazuji váhu 0.7. 3.3.7 Vytvářejte předvídatelné uživatelské rozhraní Uživatel je tím, kdo ovládá aplikaci a měl by nad ní mít subjektivní pocit kontroly. Zkušení uživatelé mají potřebu porozumět aplikaci jako celku, pochopit jak funguje a co kde mohou provést. Pokud se jim to nepodaří, aplikace se jim nelíbí a nebudou ji používat rádi. 16

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Proto by mělo být ovládání předvídatelné, návodné. Mělo by se řídit zavedenými stereotypy, existují-li nějaké [14]. Tomuto kritériu přiřazuji váhu 1.1. 3.3.8 Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost Prvky na stránce by měly být rozvrženy tak, aby se uživatel pokaždé rychle zorientoval a v ideálním případě nebyl nucen si nic pamatovat nebo opakovaně hledat. Lidský mozek je schopen uchovat v krátkodobé paměti pouze 7±2 prvků [10]. Tomuto kritériu přiřazuji váhu 0.9. 3.3.9 Navigujte uživatele Navigace by měla být jednoduchá, konzistentní a jasná. Navigace poskytuje opěrný bod na každé stránce by mělo být uživateli zřejmé, kde se v danou chvíli nachází, jak se tam dostal a kudy může zpátky. Zároveň navigace říká, co všechno může na dané stránce najít [13]. Tomuto kritériu přiřazuji váhu 1.0. 3.3.10 Usnadněte uživateli práci Administrační rozhraní eshopu patří mezi systémy, ve kterých se mnoho činností provádí rutinně. Každý zbytečný úkon, který je nutné provést třeba stokrát denně, se stává nesmírně obtěžujícím a unavujícím, i kdyby zabral třeba jen zlomek vteřiny. Mnoho úkonů může být automatizováno (import a export produktů, objednávek, napojení na porovnávače zboží apod.). Tam, kde je nezbytná práce člověka, je dobré dbát na to, aby byly úkony co nejjednodušší a nejpřímočařejší. Klade-li administrační rozhraní uživateli neustále nějaké překážky, míra jeho frustrace se stupňuje. Administrační rozhraní se stává nepoužitelným, možná dokonce zcela zbytečným. Toto kritérium proto považuji za nejdůležitější ze všech a proto mu přiřazuji váhu 1.4. 17

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ 3.3.11 Proved te uživatele inicializací eshopu Úvodní nastavení eshopu před jeho zprovozněním se liší od většiny ostatních činností každodenní údržby eshopu - neprovádí se totiž rutinně. Pro uvedení internetového obchodu na trh a jeho budoucí fungování je však velmi důležité, aby bylo provedeno správně. První dojem uživatele má navíc výrazný vliv na jeho postoj k administračnímu rozhraní. Tomuto kritériu proto přiřazuji 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ředstavení. Byl vytvořen jako součást jádra webů vyvinutého ve společnosti W. Je provizorním ř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ření lepšího návrhu administračního rozhraní. Proto jej uvádím i v této analýze. 1. Usilujte o konzistenci Jednotný vzhled modulu eshopu s ostatními částmi CMS Konzistentní layout Názvy a barvy tlačítek (Zpět, Zpět bez uložení, Storno, Zrušit - viz obrázek 3.1) Různá míra abstrakce v terminologii (někdy obecné pojmy jako produkt, kategorie, jindy ve srovnatelném kontextu zkonkretizované na divadelní představení nebo divadlo) Nejednotný vzhled tabulek (zarovnání, písmo, šířka řádků) Některé chybové hlášky se objevují i v české lokalizaci v angličtině ( Please enter numeric value ) - zřejmě se jedná o nedokonale ošetřenou výjimku 2. Z důvodu anonymizace neuvádím jméno projektu ani společnosti, která jej vytvořila a spravuje. 18

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Naplnění kritéria 43 %. Obrázek 3.1: Nekonzistentní názvy a barvy tlačítek. 2. Respektujte širokou skupinu uživatelů Jednoduchost a přehlednost systému Popisky grafických prvků Přímý kontakt na technickou podporu Neuspokojí uživatele se specifickými požadavky na funkcionalitu Chybí nápověda Naplnění kritéria 50 %. 3. Poskytujte zpětnou vazbu 19

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Adekvátní rozlišení silné a slabé zpětné vazby Hlášení konzistentně umístěná, význam je barevně podpořený Hlášení o úspěšně proběhlých akcích zelená barva (uložení, přidání nového produktu, kategorie..) Chybové hlášky jsou červené, např. Toto divadlo již má popis Před smazáním produktu se zobrazí dialog s ujištěním, zda jej chce uživatel opravdu smazat Chybí dialog s upozorněním před nevratným smazáním objednávky nebo před nevratnou změnou jejího stavu Naplnění kritéria 70 %. 4. Provádějte uživatele pracovními postupy Složitý formulář s informacemi o produktu je rozdělen do logicky souvisejících bloků (Cenové kategorie, Termíny, Obrázky ke hře, Doporučené hry) Zpětná vazba o úspěšném dokončení Rozdělení do bloků je jen optické nutnost rolovat stránkou pro zobrazení dalších bloků Údaje o novém produktu nelze vložit najednou produkt se nejprve vytvoří a vyplní se první část údajů, pro vyplnění zbývajících údajů je nutné přepnout se do editace Naplnění kritéria 55 %. 5. Předcházejte chybám 20

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Povinné položky ve formulářích jsou označeny hvězdičkou Při uložení formuláře bez vyplnění povinné položky se stránka odroluje k místu, kde povinná informace chybí a u příslušné kolonky se objeví konstruktivní hláška, např. Jméno produktu musí být vyplněné Našeptávání při výběru doporučených produktů (nelze doporučit neexistující produkt) Popis divadla lze přidat pouze jednou, avšak na tlačítko Přidat popis divadla lze klepnout i v případě, kdy již popis divadla existuje, načež se objeví chybová hláška Toto divadlo již má popis (viz obrázek 3.2) Změna stavu objednávky nelze vrátit zpět a není ošetřena žádným dialogem se zpětnou vazbou Při nahrávání obrázků není předem specifikována maximální velikost ani povolené formáty, až při pokusu o nahrání nevhodného souboru se objeví chybová hláška File is too large, případně File has an invalid extension, it should be one of jpg, jpeg, png, bpm, gif (české překlady chybí). Naplnění kritéria 50 %. 6. Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám Funkce Undo a Redo v textovém editoru Možnost pohodlně se vrátit zpět ze zobrazeného detailu na seznam Svobodný pohyb hierarchií webu pomocí navigace Nelze vrátit operaci smazání produktu, objednávky apod. 21

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.2: Chybová hláška po pokusu o přidání popisu divadla v ideálním případě by měl být pokus již předem znemožněn, aby k chybě nemohlo dojít (eshop R.). Nelze vrátit zpět změnu stavu objednávky Naplnění kritéria 50 %. 7. Vytvářejte předvídatelné uživatelské rozhraní Pocit kontroly nad systémem Komplexní přehled, co všechno je součástí administračního rozhraní a co lze kde provést Ikona ozubeného kola se používá ve významu editace, běžně je užívána spíše pro nastavení Zbytečně komplikované a neintuitivní nastavení hlavního obrázku u produktu Naplnění kritéria 65 %. 8. Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost 22

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Přehledné rozdělení hlavních sekcí Jednoduchost (daná hlavně minimalistickým řešením eshopu) Nastavitelný počet položek v tabulkách Při odrolování stránky nemá uživatel na očích název stránky ani tlačítka pro akce a je nucen si tyto informace uchovávat v paměti Naplnění kritéria 82 %. 9. Navigujte uživatele Výrazný název stránky Hlavní menu je konstantní, umístěné vertikálně Chybí jakékoli vyhledávání! Název stránky je staticky umístěný, pokud uživatel stránku odroluje, už jej nevidí Naplnění kritéria 60 %. 10. Usnadněte uživateli práci Našeptávání při výběru doporučených her Chybí vyhledávání, parametrické filtrování Produkty nelze vyhledávat přímo, ale jen přes pří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římo na ně 23

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.3: Graf naplnění kritérií v analýze administračního rozhraní eshopu R. Vážený průměr je 55 %. Naplnění kritéria 40 %. 11. Proved te uživatele inicializací eshopu Eshop není složitý, ani inicializace není složitá Import a export produktů, avšak jen za asistence programátora Nejsou definovány kroky, které je třeba při inicializaci vykonat Naplnění kritéria 50 %. Shrnutí analýzy eshopu R. Velkou předností, ale zároveň i nedostatkem je jednoduchost. Administrační rozhraní nemá mnoho funkcí, a tak je snadné naučit se všechny používat. Systém je přehledný, uživatel není přehlcen informacemi. Náročným požadavkům však vždy nevyhoví. 24

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Problémem jsou drobné chyby, které komplikují používání, nutí uživatele zbytečně přemýšlet a kazí celkový dojem. Nejčastěji se týkají nekonzistentních názvů, barev či vzhledu (kritérium 3.3.1). Velkou nevýhodou je absence vyhledávání nebo parametrického filtrování a přístup k produktům pouze přes jejich kategorie, jež komplikuje každodenní práci se systémem (kritérium 3.3.10). 3.5 Analýza PrestaShopu PrestaShop je nejrozšířenějším open source řešením eshopu je na něm postaveno více než 150 tisíc úspěšně fungujících internetových obchodů. Je prezentován poněkud ambiciózně jako nejlepší, nejspolehlivější a neflexibilnější software pro internetové obchodování. O vývoj technologie se stará přes 70 nadšenců a komunita, která čítá 500 tisíc členů [3]. Pro analýzu jsem použila verzi PrestaShop TM 1.5.3.1. 1. Usilujte o konzistenci Konzistentní layout Konzistentní zpětná vazba Konzistentní drobečková navigace Nedokonalá česká lokalizace jen polovina výrazů je česky, druhá polovina je v původní angličtině Nekonzistentní umístění chybových hlášení Naplnění kritéria 80 %. 2. Respektujte širokou skupinu uživatelů Přizpůsobení internetovým obchodům různých velikostí (např. jednoduché nebo pokročilé řízení skladových zásob) 25

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Mnoho funkcí dokáže uspokojit různorodé potřeby uživatelů Velké množství modulů a pluginů k dodatečné instalaci Výrazná ikona pro nápovědu, manuály, weby o Presta- Shopu (i české, např [5] nebo [4]) Vzájemná pomoc v rámci široké komunity přispěvatelů prostřednictvím diskuzního fóra Open source řešení pro experty existuje dokonce možnost úprav zdrojového kódu nebo doprogramování vlastních modulů Méně pokročilý uživatel se ztrácí ve velkém množství funkcí, možností Nápověda není v češtině Některé ikony nemají popisky, začátečník nemusí vědět, k čemu slouží Obtížně přístupné pro handicapované uživatele informace jsou nepřehledné, chybí textové alternativy netextových prvků Naplnění kritéria 80 %. 3. Poskytujte zpětnou vazbu Adekvátní rozlišení silné a slabé zpětné vazby Při editaci produktu lze jedním klepnutím zobrazit náhled produktu ve frontendu, tedy stejně, jak jej potom vidí i zákazník Pěkně zpracovaná hlášení viditelně umístěná, jejich význam je podpořen barevným rozlišením a symbolem (viz obrázek 3.4): Chybová hlášení jsou červená se symbolem kříže, analogicky s červenou barvou na semaforu vybízejí k tomu, aby se uživatel zastavil a vyřešil problém 26

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.4: Barevně dokreslený charakter hlášení (PrestaShop). Výstražná hlášení žlutooranžová s vykřičníkem, upozorňují na chyby, které by mohly v blízké době nastat Hlášení o úspěšném dokončení zelená s fajfkou, ujišt ují o tom, že je všechno v pořádku a uživatel může pokračovat dál Informativní hlášení modrá s písmenem i, jsou to poznámky čistě informativního rázu, případně rady pro uživatele Chybová hlášení: nejsou příliš konkrétní, neuvádějí, v jaké sekci k chybě došlo neříkají nic o tom, jak chybu napravit (např. Pole upc je neplatné ) nejsou konzistentně umístěná (výstražná hlášení jsou pod lištou s drobečkovou navigací, hlášení o úspěšném dokončení a chybová hlášení jsou umístěna nad ní; a informativní hlášení jsou vždy přímo na místě, ke kterému se vztahují) Naplnění kritéria 90 %. 4. Provádějte uživatele pracovními postupy 27

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Složité úkoly jsou rozdělené do logicky souvisejících bloků Velikost a počet jednotlivých dílčích bloků jsou vyvážené Pohyb mezi bloky je usnadněn odkazy ve vertikálním menu na levém okraji stránky Dobře viditelné ikony pro základní akce dostupné v dané sekci Zpětná vazba o úspěšném dokončení Žádné neshledávám Naplnění kritéria 75 %. 5. Předcházejte chybám Povinné údaje ve formulářích jsou označeny hvězdičkou Včasné informování o tom, že nebyly vyplněny povinné údaje Při najetí kurzorem myši na textové pole se objeví seznam povolených (příp. zakázaných) znaků Našeptávání při výběru doporučených produktů (nelze doporučit neexistující produkt) Jasně deklarované formáty a maximální velikost obrázků, 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ěn až při uložení, časová prodleva mezi chybným vyplněním kolonky a zpětnou vazbou může způsobit zmatek Chybová hlášení: 28

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.5: Chybové hlášení neříká, kde přesně chyba vznikla a jak ji napravit (PrestaShop). nejsou příliš konkrétní, neuvádějí, v jaké sekci k chybě došlo neříkají nic o tom, jak chybu napravit (např. Pole upc je neplatné, viz obrázek 3.5) Naplnění kritéria 75 %. 6. Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám Funkce Undo a Redo v textovém editoru Možnost pohodlně se vrátit zpět ze zobrazeného detailu na seznam Svobodný pohyb hierarchií webu pomocí navigace Pohodlný pohyb mezi sekcemi Nelze vrátit operaci smazání produktu Naplnění kritéria 65 %. 7. Vytvářejte předvídatelné uživatelské rozhraní Základní pocit kontroly nad systémem Využití analogie ikon pro upozornění s Facebookem, pro více než miliardu uživatelů Facebooku jsou ikony na první pohled povědomé (viz obrázek 3.6) 29

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.6: Analogie ikon pro upozornění v PrestaShopu a na Facebooku (PrestaShop a Facebook). Některé ikony nemají popisky, význam přitom nemusí být zřejmý (např. význam ikony nákladního auta, která slouží pro stažení souboru s fakturační a doručovací adresou) Význam ikon analogických s Facebookem se liší, není na první pohled zřejmý Naplnění kritéria 60 %. 8. Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost Rozčlenění informací o produktu do přehledných sekcí Název stránky a drobečková navigace se při odrolování stránky posouvají, aby uživatel nebyl nucen pamatovat si, kde se nachází Tlačítka pro dostupné akce se při rolování stránkou posouvají, aby byla stále na očích Příliš mnoho funkcí, které uživatel málokdy použije (např. více než 60 tlačítek u textového editoru, viz obrázek 3.7) 30

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.7: Přeplněný panel nástrojů textového editoru (Presta- Shop). Počet položek v hlavním menu překračuje pravidlo 7±2 Naplnění kritéria 60 %. 9. Navigujte uživatele Základ navigace tvoří hlavní menu s širokou hierarchií (12 položek) lze rozbalovat do nižších úrovní Výrazná drobečková navigace, při 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áře rozděleny do více sekcí s vlastním vertikálním menu Žádné neshledávám Naplnění kritéria 90 %. 10. Usnadněte uživateli práci Komerční nabídky propojení s účetními systémy 31

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Rychlé odkazy na nástěnce, možnost nastavení podle svých potřeb Parametrické vyhledávání v produktech, kategoriích, objednávkách Export objednávek Nástěnka se statistikami Možnost nastavit hromadné úpravy cen a skladových zásob Při instalování rozšiřujících modulů, které usnadní práci je iniciativa především na uživateli Naplnění kritéria 85 %. 11. Proved te uživatele inicializací eshopu Na internetu lze nalézt podrobné návody, co všechno je potřeba provést před spuštěním, např. [2] Import a export produktů Kontrolní seznam konfigurace, který pomáhá odhalit chyby (týká se technických detailů konfigurace serveru, cache atd., vzniklá chyba je zřejmá i laikovi, aniž by ji musel nutně rozumět po technické stránce) Chybí proces provedení inicializací přímo v administračním rozhraní Naplnění kritéria 70 %. 32

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.8: Graf naplnění kritérií v analýze administračního rozhraní PrestaShopu. Vážený průměr je 76 %. Shrnutí analýzy PrestaShopu Nejcharakterističtějším rysem administračního rozhraní PrestaShopu shledávám jeho otevřenost a tvárnost. Uživatel si jej může přizpůsobit dle svých rozličných potřeb a představ. Nabízí se mu nepřeberné možnosti, velké množství funkcí a modulů (kritérium 3.3.2). Druhou stranou této přizpůsobitelnosti je nepřehlednost a velký nápor na krátkodobou pamět uživatele (kritérium 3.3.8). Z analyzovaných administračních rozhraní má PrestaShop nejlépe vytvořenou 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 důkladně poskytována zpětná vazba (kritérium 3.3.3). 3.6 Analýza Shoptetu Shoptet je služba, která nabízí pronájem a tvorbou eshopů. Je vlastněná firmou Cybergenics s.r.o., která působí na trhu od roku 2009. Službu Shoptet spustili začátkem roku 2011 a již po prvních deseti měsících fungování měla více než 900 pravidelně platících klientů [6]. 33

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ 1. Usilujte o konzistenci Konzistentní layout (kromě stromového menu v nastavení, které není rozčleněné pomocí záložek, ale pomocí stromového menu) Konzistentní navigace Konzistentní terminologie Konzistentní ikony, názvy, vzhled a umístění tlačítek Všechny sekce jsou rozčleněné pomocí horizontálních záložek, jen nastavení je rozčleněné pomocí stromového menu (vzhledem k obsáhlosti nastavení to nepovažuji za jednoznačně špatné řešení, výhodou je, že položky jsou takto přehlednější) Mírně nekonzistentní grafická úprava hlášení Naplnění kritéria 95 %. 2. Respektujte širokou skupinu uživatelů Různé tarify podle různých potřeb zákazníků (Start, Lite, Business, Profi, Enterprise) Nápověda, online manuál, popisky grafických prvků, nápověda u kolonek, jejichž vyplnění není triviální Technická podpora Přehledná struktura informací i v textovém prohlížeči Žádné neshledávám Naplnění kritéria 90 %. 34

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.9: Barevně rozlišená hlášení, graficky mírně nejednotná (Shoptet). 3. Poskytujte zpětnou vazbu Adekvátní rozlišení silné a slabé zpětné vazby Při editaci produktu lze jedním klepnutím zobrazit náhled produktu ve frontendu, tedy stejně, jak jej potom vidí i zákazník Hlášení konzistentně umístěná, význam je barevně podpořený (viz obrázek 3.9) Upozornění červené bez symbolu Hlášení o úspěšně proběhlých akcích (uložení, přidání nového produktu, kategorie..) zelené s fajfkou Informativní hlášení žlutooranžové se symbolem žárovky Před smazáním produktu se zobrazí dialog s ujištěním, zda jej chce uživatel opravdu smazat Červená barva u chybových hlášení evokuje chybu, sdělení má však spíše charakter upozornění Chyby nejsou řešeny standardními hláškami, nýbrž vyskakovacími dialogy, které jsou zcela nevypovídající (např. null jako reakce na neúspěšné nahrání souboru, viz obrázek 3.10) Naplnění kritéria 75 %. 4. Provádějte uživatele pracovními postupy 35

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Složité úkoly jsou rozdělené do logicky souvisejících záložek a bloků Velikost a počet jednotlivých dílčích bloků jsou vyvážené Počet záložek je přiměřený Dobře viditelné ikony pro základní akce dostupné v dané sekci Zpětná vazba o úspěšném dokončení Žádné neshledávám Naplnění kritéria 75 %. 5. Předcházejte chybám Okamžitá kontrola unikátnosti kódu produktu Povinné údaje o produktu se vyplňují ve zvláštním dialogu hned při vytváření nového produktu, nemůže se tedy stát, že by některý nebyl vyplněn Při 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ě Není kontrolována velikost loga ani obrázků, automaticky se neupravují, velké obrázky potom mohou zaplnit i celou stránku Formát není kontrolován ani při nahrání obrázků, po nahrání souboru v chybném formátu se zobrazí dialog s chybovou hláškou Uživatel není při vytváření produktu ani při editaci upozorněn na to, že nejsou definovány ceny (případně že 36

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.10: Chybové hlášení není řešeno standardní hláškou, o ničem nevypovídá (Shoptet). ceny obsahují chybné znaky). Tato skutečnost je konstatována jen v tabulce s přehledem produktů v administračním rozhraní. Zákazníci produkt bez ceny nevidí vůbec Chyby nejsou řešeny standardními hláškami, nýbrž vyskakovacími dialogy, které nevypovídají o tom, jak chyba vznikla a jak ji napravit (např. null jako reakce na neúspěšné nahrání souboru, viz obrázek 3.10) Naplnění kritéria 55 %. 6. Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám Funkce Undo a Redo v textovém editoru Možnost pohodlně se vrátit zpět ze zobrazeného detailu na seznam Svobodný pohyb hierarchií webu pomocí navigace Pohodlný pohyb mezi záložkami Nelze vrátit operaci smazání produktu Naplnění kritéria 65 %. 37

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ 7. Vytvářejte předvídatelné uživatelské rozhraní Pocit kontroly nad systémem Návodné ovládání Napomáhá uživateli získat komplexní přehled, co všechno je součástí administračního rozhraní a co lze kde provést Žádné neshledávám Naplnění kritéria 80 %. 8. Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost Přehledné rozčlenění hlavních sekcí i podsekcí Přehledné rozčlenění formulářů do záložek a bloků Tlačítka pro dostupné akce se při odrolování stránky posouvají, aby byla stále na očích Při odrolování stránky nemá uživatel na očích její název a umístění, je nucen uchovávat to v paměti Naplnění kritéria 75 %. 9. Navigujte uživatele Základ navigace tvoří hlavní menu, které lze rozbalovat do nižších úrovní V sekci nastavení je vytvořeno pomocné menu pomocí stromové struktury Výrazný název každé stránky 38

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Drobečková navigace Globální vyhledávání Parametrické vyhledávání v produktech, kategoriích, objednávkách apod. Složité formuláře rozděleny do více záložek, v rámci záložek jsou ještě členěny do bloků Název stránky i drobečková navigace jsou statické, pokud uživatel stránku odroluje, již nevidí, kde se nachází Naplnění kritéria 80 %. 10. Usnadněte uživateli práci Propojení s účetní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í produktů Nástěnka se statistikami Našeptávání při výběru souvisejících produktů Žádné neshledávám Naplnění kritéria 92 %. 11. Proved te uživatele inicializací eshopu 39

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.11: Hromadné úpravy skladových zásob (Shoptet). Pěkně zpracovaný postup v devíti krocích udává komplexní představu o tom, co vše je potřeba nastavit (viz obrázek 3.12) Návod není násilný, nevnucuje se Navádí ke správnému pořadí kroků (nejprve nastavím kategorie, následně nahraji zboží) Tam, kde není dodržení pořadí kroků důležité, není vyžadováno Zpětná vazba u kroků, které byly splněny (změní se barva a typ písma, číslo kroku se promění ve fajfku a objeví se zelený rámeček s nápisem Hotovo) Import a export produktů Žádné neshledávám Naplnění kritéria 98 %. Shrnutí analýzy Shoptetu Administrační rozhraní Shoptetu je důsledné v detailech. Používá konzistentní názvy, umístění prvků, pracovní postupy (kritérium 3.3.1). Provádí uživatele nejkomplikovanějším procesem, který v administračním rozhraní existuje, a tím je jeho inicializace. Definuje jednotlivé kroky, kterými je třeba projít a dává zpětnou vazbu o tom, zda byly úspěšně splněny. 40

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.12: Proces inicializace eshopu (Shoptet). Slabou stránkou jsou chyby, které nejsou ošetřeny takovým způsobem, aby k nim vůbec nemohlo dojít především při nahrávání souborů, kdy nejsou předem specifikovány povolené formáty ani maximální velikost (kritérium 3.3.5). 41

3. ANALÝZA ADMINISTRAČNÍCH ROZHRANÍ ESHOPŮ Obrázek 3.13: Graf naplnění kritérií v analýze administračního rozhraní Shoptetu. Vážený průměr je 80 %. Obrázek 3.14: Porovnání míry naplnění kritérií u analyzovaných eshopů. Nejlepšího ohodnocení dosáhl Shoptet, vážený průměr je 80 %. 42

Kapitola 4 Analýza rolí a procesů 4.1 Popis rolí Uživatel jakákoli osoba, která používá administrační rozhraní eshopu. Technický správce má na starosti technickou podporu, zajišt uje bezproblémové fungování, může upravovat systémové nastavení, do obsahové stránky eshopu nezasahuje. Administrátor má veškeré přístupy do administrace eshopu (kromě systémového nastavení). Může vykonávat stejné činnosti jako obsluha eshopu, navíc může zřizovat uživatelské účty a spravovat jejich oprávnění. Obsluha eshopu uživatel, který provádí základní správu eshopu: Vkládá nový produkt Edituje informace o produktu Hromadně upravuje ceny/marži/dph Zadává akce a slevy Přidává a upravuje způsoby platby Přidává a upravuje způsoby dopravy Vytváří a upravuje kategorie produktů Uskupuje produkty do kategorií 43

4. ANALÝZA ROLÍ A PROCESŮ Zákazník osoba, která navštíví eshop s úmyslem něco zakoupit, prohlíží si produkty, filtruje je podle různých parametrů, vkládá produkty do košíku, objednává, platí apod. Nemá přístup do administračního rozhraní. Skladník osoba, která přijímá zboží, skladuje je a vydává. Aktualizuje údaje o skladových zásobách, kompletuje zboží z jednotlivých objednávek a předává je k doručení zákazníkům. V administraci eshopu provádí tyto činnosti: Zobrazí objednávku Změní stav objednávky Zobrazí skladové zásoby Upraví skladové zásoby Účetní osoba, která provozuje účetnictví (tedy činnost, která vede ke zjištění stavu a změn majetku a jeho zdrojů, výsledku hospodaření za určité období). Ke své práci potřebuje přístup k fakturám a sazbám DPH u produktů, kategorií a pod. Pro účetní je vytvořený speciální pohled na objednávky jen jako faktury. Zobrazí si aktuální sazbu DPH produktu/kategorie Změní sazbu DPH produktu/kategorie Zobrazí si faktury z daného období Zobrazí si zaplacené/nezaplacené faktury 44

4. ANALÝZA ROLÍ A PROCESŮ 4.2 Analýza procesů Poměrně málo úkonů, které v administrační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 důležité, že si zaslouží důkladnější analýzu. Jedná se o inicializaci eshopu a proces zpracování objednávky. Pro vytvoření BPMN (Business Process Model and Notation) diagramů jsem použila nástroj Academic Signavio. 4.2.1 Inicializace eshopu Inicializací eshopu jsem se zabývala již při analýze v předchozí kapitole (kapitola 3). Proces znázorněný na obrázku 4.1 zachycuje základní kroky, které je nezbytné provést předtím, než se eshop spustí v ostrém provozu. Role: Administrátor vytvoří uživatelský účet pro obsluhu eshopu Obsluha eshopu má na starosti všechny úkony související se samotnou inicializací - nastavení kategorií, plnění eshopu produkty, určení způsobů platby a dopravy apod. 45

4. ANALÝZA ROLÍ A PROCESŮ 46 Obrázek 4.1: Proces inicializace eshopu.

4. ANALÝZA ROLÍ A PROCESŮ 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ěm znázorněny další úkoly, které je v rámci zpracování objednávky nutné vykonat (objednat chybějící produkty u dodavatele, poděkovat zákazníkovi apod.) Pro větší přehlednost jsem se při modelování procesu nezabývala přijetím a ověřením platby. Role: Eshop (webová aplikace) zaznamená vytvořenou objednávku, ověří skladové zásoby a po vyřízení objednávky pošle klientovi zprávu s poděkováním za nákup Obsluha eshopu v případě potřeby objednává zboží u dodavatele, připravené objednávky předává zákazníkovi nebo zásilkové službě Skladník kompletuje produkty v objednávce a aktualizuje skladové množství Černé skříňky : 1 Zákazník vytvoří objednávku, na konci procesu mu jsou doručeny objednané produkty (případně si je sám vyzvedne) Dodavatel dodáva produkty, které nejsou skladem Zásilková služba převezme produkty a doručí zákazníkovi 1. Aktéři spolupracují pouze jako černé skříňky. Viditelná je jen jejich komunikace, procesy, které probíhají uvnitř nejsou známy. 47

4. ANALÝZA ROLÍ A PROCESŮ Obrázek 4.2: Proces zpracování objednávky. 48

4. ANALÝZA ROLÍ A PROCESŮ Obrázek 4.3: Subproces: Příprava objednávky. 49

Kapitola 5 Návrh Na základě analýzy administračních rozhraní několika z dostupných eshopů jsem vytvořila vlastní návrh. Je vytvořen v podobě wireframů (tzv. drátěných modelů), které znázorňují rozložení funkčních prvků na stránce. Po odsouhlasení funkcionality slouží jako základ pro vytvoření grafického designu. Pro tvorbu wireframů jsem použila webovou aplikaci moqups. 1 Navržené wireframy jsou popsány v podrobné specifikaci. Wireframy i specifikace jsou elektronickými přílohami diplomové práce. 5.1 Účel systému Administrační rozhraní eshopu slouží ke spravování internetového obchodu bez potřeby odborných doovedností (znalosti programovacího nebo značkovacího jazyka, detailních informací o systému apod.). Důraz je kladen na snadnou, efektivní práci a intuitivní ovládání. Nejčastějšími úkony je vkládání a upravování informací o nabízených produktech a ke správě objednávek. 5.2 Layout administračního rozhraní Layout je přizpůsobený charakteru obsahu stránky. Na stránkách podobného charakteru je i uspořádání prvků podobné. Podle rozložení prvků lze rozdělit stránky do tří skupin: Úvodní strany Přehledy 1. Aplikace moqups je dostupná na adrese <https://moqups.com> 50

5. NÁVRH Obrázek 5.1: Společné prvky layoutu. Detaily 5.2.1 Společné prvky Prvky layoutu, které se opakují na všech stránkách administračního rozhraní, jsou znázorněny na obrázku 5.1 Záhlaví a hlavní menu Všechny stránky administračního rozhraní mají stejné záhlaví a hlavní menu. 2 V levé části záhlaví je umístěno logo, které slouží jako odkaz na úvodní stranu (nástěnku). V pravé části je umístěn odkaz pro odhlášení a zobrazení frontendu. Pod záhlavím je umístěno 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ěné také vyhledávání, ne však ve všech částech systému. Na přehledových a detailových stránkách chybí. Plovoucí lišta Je umístěna pod drobečkovou navigací. Podrobněji je popsána v podkapitole 5.3.3. 2. Vzhledem k tomu, že je záhlaví a menu vždy stejné, není znázorněno ve wireframech. Není to potřeba. 51

5. NÁVRH Obrázek 5.2: Rozložení prvků na přehledových stránkách. 5.2.2 Přehledy Přehledové stránky slouží k procházení seznamů položek. Patří mezi ně: Přehled produktů, Přehled kategorií, Hromadné úpravy a Přehled objednávek. Rozložení prvků je znázorněno na obrázku 5.2. Jednotlivé položky přehledu jsou uspořá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ří Detail a editace produktu, Detail a editace objednávky, Editace kategorie a velké množství stránek v sekci Nastavení. Rozložení prvků je znázorněno na obrázku 5.3. Informace jsou uspořádány v rozbalovacích blocích, ke kterým náleží vertikální menu umístěné na pravé straně. Pod širokou lištou s názvem stránky je umístěna méně výrazná lišta na které lze přepí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í prvků na detailových stránkách. Drobečková navigace 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čním rozhraní je horizontální menu, které je tvořeno šesti položkami: Nástěnka (úvodní strana), Produkty, Kategorie, Objednávky, Statistiky, Nastavení, 5.3.2 Drobečková navigace Drobečková navigace zrcadlí strukturu eshopu. Pokud se uživatel dostal na aktuální stránku přímočarou cestou, pak zrcadlí i jeho cestu. Neplatí to však v případě, kdy uživatel na stránku přišel nějakou oklikou nebo naopak využil rychlého odkazu. Je zobrazena v horní části stránky nad širokou plovoucí lištou a narozdíl od ní se při rolování neposouvá dolů, ale zůstává na místě. 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ř. editace objednávky 325554). Při rolování stránkami s rozsáhlejším obsahem zůstává lišta stále viditelná nahoře nad zobrazeným obsahem. Titulek napsaný přívětivě velkými písmeny a informuje o tom, k čemu stránka slouží (k editaci objednávky), v případě zobrazení konkrétní položky i s čím mohu danou činnost provádět (s objednávkou číslo 325554). V pravé části lišty jsou ikonky, které nabízejí základní a nejčastěji upotřebitelné úkony (uživatelsky přívětivé svou velikostí i tím, že jsou stále na očích a vždy po ruce, jsou stereotypní a opatř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řehledné, jsou tématicky uspořádány v blocích pod sebou. Obsah bloků je možné podle potřeby zobrazit nebo skrýt. Pro rychlejší pohyb mezi bloky a větší přehlednost mají také vlastní menu, které se posouvá po stránce stejně jako plovoucí lišta. 5.3.5 Vyhledávání Pole pro vyhledávání je umístěno v pravém horním rohu hlavní stránky (viz wireframe nástěnky obrázek 5.6). Velikost vyhledávacího je přibližně pro 25 znaků, aby postačila pro pohodlný zápis i víceslovných výrazů [12]. V sekci Produkty lze vyhledávat pouze produkty, v sekci Objednávky pouze objednávky. Pole pro vyhledávání je umístěno přímo nad tabulkou s přehledem produktů (viz obrázek 5.4), v Objednávkách analogicky. 54

5. NÁVRH Obrázek 5.4: Umístění vyhledávacího pole v sekci Produkty. 5.3.6 Parametrický filtr Slouží pro vyhledávání produktů podle štítků 3 nebo různých parametrů 4. Počet parametrů, které je možné definovat není omezený. V internetových obchodech s různorodým sortimentem jich může být k popisu všech produktů potřeba obrovské množství. Filtrování produktů podle všech definovaných parametů by však nebylo přehledné. 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 produktů dané kategorie v Přehledu produktů nebo v Hromadných úpravách. Kategorie jsou zobrazeny ve stromové struktuře, podkategorie je možné skrývat a zobrazovat. Stejně tak je možné skrýt nebo zobrazit celý strom kategorií pomocí velké ikony s šipkou umístěné na liště pod širokou plovoucí lištou. 5.4 Zpětná vazba 5.4.1 Modální sekundární okna Pro silnou zpětnou vazbu jsou použita modální sekundární okna. Dokud nejsou obsloužena, neumožňují interakci s ostatními součá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čná. 4. Parametry se rovněž definují v nastavení eshopu. Na rozdíl od štítků lze parametr definovat pro konkrétní produkt nebo kategorii. Jednou definovaný parametr je možné využívat opakovaně i u jiných produktů nebo kategorií. 55

5. NÁVRH Obrázek 5.5: Umístění hlášení systému. webové aplikace. Jsou proto vhodná pro situace, kdy je nezbytné, aby uživatel jasně vyjádřil, že je s informací v modálním okně srozumněn [10]. Příkladem je dialog, který vyskočí před smazáním produktu: Opravdu chcete produkt XY smazat? 5.4.2 Hlášení systému Hlášení systému jsou konzistentně umístěna na horním okraji stránky pod hlavním menu (viz obrázek 5.5). Stejně jako v PrestaShopu jsou rozdělena do čtyř skupin: Chybová hlášení jsou červená se symbolem kříže, v ideálním případě by se neměly nikdy objevit Výstražná hlášení žlutooranžová s vykřičníkem, upozorňují na chyby, které by mohly v blízké době nastat Hlášení o úspěšném dokončení zelená s fajfkou, ujišt ují o tom, že je všechno v pořádku a uživatel může pokračovat 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 Části administračního rozhraní 5.5.1 Nástěnka Nástěnka (anglicky dashboard) je úvodní stránkou administračního rozhraní. Sama o sobě nemá žádnou funkci, která by nebyla dostupná jiným způsobem. Je ve velké míře personalizovatelná a slouží k tomu, aby mohl mít každý uživatel po přihlášení do administračního rozhraní po ruce to, co potřebuje nejvíce. Moduly, které lze umístit na nástěnku jsou detailně popsány v dokumentaci k eshopu. Nástěnka může vypadat například jako na obrázku 5.6. 5.5.2 Katalog produktů Katalog produktů slouží k vkládání a upravování informací o nabízených produktech. Všechny produkty jsou uspořádány v kategoriích podle společných rysů jejich uspořádání je systematické, produkty se snadněji vyhledávají a informace, které jsou společné pro všechny produkty v kategorii mohou být v systému uloženy pouze jednou. V menu v administračním rozhraní je katalog produktů rozdělen na dvě samostatné položky: Kategorie v této sekci lze vytvořit stromovou strukturu kategorií, do kterých se následně zařazují produkty. Jeden produkt může příslušet k více kategoriím současně, 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žňuje přistupovat k objednávkám, které byly vytvořeny 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ěnit tak, aby odpovídaly skutečnosti. Dále lze zobrazit údaje o zákazníkovi, vybraný způsob platby a dopravy, jednotlivé položky objednávky a slevy k nákupu, jsou-li nějaké. 57

5. NÁVRH Obrázek 5.6: Ukázka nástěnky s vybranými moduly. 58

5. NÁVRH 5.5.4 Statistiky Statistiky jsou určeny k tomu, aby poskytovaly zpětnou vazbu o tom, jak se daří obchodování a pomohly odhalit jeho slabiny. Tyto informace přispívají ke zvýšení konverzního poměru. Statistiky nejsou implementovány v navrženém řešení přímo, jsou generovány prostřednictvím služby Google Analytics (více informací [1]). 5.5.5 Nastavení Nastavení slouží k přizpůsobení internetového obchodu podle různorodých potřeb. Zahrnuje tyto sekce: Doprava a platba Ceny Produkty Sklad Výrobci a dodavatelé Statistiky 59

Kapitola 6 Hodnocení navrženého řešení Hlavním cílem mé práce bylo vytvořit takový návrh administračního rozhraní, který bude lepší, než řešení již dostupná na trhu. K tomu, abych se přiblížila odpovědi na otázku, zda jsem tento cíl splnila, využiji stejných kritérií, pomocí nichž jsem analyzovala a následně hodnotila vybrané eshopy v kapitole 3, a tato kritéria aplikuji i na vlastní návrh. 1. Usilujte o konzistenci Konzistentní layout na stránkách stejného charakteru Konzistentní navigace Terminologie, ikony, vzhled a umístění tlačítek Žádné neshledávám Naplnění kritéria 95 %. 2. Respektujte širokou skupinu uživatelů Jednoduchost a přehlednost Popisky grafických prvků Snaha o co nejširší možnosti použití Přístupnost Možnost personalizace nástěnky 60

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ Neobsahuje nápovědu Návrh nenabízí různé tarify odpovídající potřebám různých internetových obchodů Naplnění kritéria 75 %. 3. Poskytujte zpětnou vazbu Adekvátní rozlišení silné a slabé zpětné vazby Modální sekundární okna pro silnou zpětnou vazbu Konzistentně umístěná hlášení Změna barvy prvku při označení Žádné neshledávám Naplnění kritéria 85 %. 4. Provádějte uživatele pracovními postupy Složité úkoly jsou rozděleny do logicky souvisejících bloků (uspořádání bloků je znázorněno na obrázku 6.1) Velikost a počet dílčích bloků jsou vyvážené Pohyb mezi bloky je usnadněn odkazy ve vertikálním menu na levém okraji stránky Momentálně nepotřebné bloky lze skrýt (pomocí ikonky s šipkou), v případě potřeby opět zobrazit Výrazné ikony pro akce dostupné v dané sekci Zpětná vazba o úspěšném dokončení Žádné neshledávám 61

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ Obrázek 6.1: Uspořádání tématických bloků. K rychlému pohybu mezi bloky slouží vertikální menu. Nepotřebné bloky lze skrýt, jejich pořadí lze upravit pomocí čtyřsměrné šipky. Naplnění kritéria 75 %. 5. Předcházejte chybám Přesně definované formáty a maximální velikost pro nahrávané soubory Označení povinných položek ve formulářích Automatické dopočítávání cen podle sazby DPH předchází chybám ve výpočtech Okamžitá typová kontrola Okamžitá kontrola unikátnosti ID Název tlačítka Zpět může být matoucí: znamená vrátit zpět změny nebo zpět na předchozí stránku? Naplnění kritéria 78 %. 62

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ 6. Umožněte uživateli vrátit se zpět a bud te tolerantní k jeho chybám Pohodlný pohyb hierarchií webu Přívětivě velké tlačítko Zpět pro návrat z detailu do přehledu Návrh neřeší problematiku ukládání dat do databáze, nejsem na jeho základě oprávněna rozhodnout, zda administrační rozhraní umožní vrátit zpět operaci smazání Textová pole pro popis produktů umožňují vkládat pouze prostý text, nemjí žádný panel nástrojů a tím pádem nejsou dostupné ani funkce Undo a Redo Naplnění kritéria 45 %. 7. Vytvářejte předvídatelné uživatelské rozhraní Návodné ovládání, pocit kontroly nad systémem Intuitivní ikony Snadno pochopitelná struktura administračního rozhraní Žádné neshledávám Naplnění kritéria 80 %. 8. Nepřetěžujte krátkodobou pamět uživatele, nabízejte přehlednost Přehledné a logické rozčlenění sekcí a bloků Aktuální poloha a tlačítka pro dostupné akce vždy dobře viditelné, při rolování stránkou se také posouvají 63

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ Nepotřebné prvky lze skrýt (například tématické bloky v editaci produktů) Prvky, které nejsou potřeba často jsou skryty již ve výchozím uspořádání (parametrický filtr, stromové menu pro výběr kategorie) Žádné neshledávám Naplnění kritéria 90 %. 9. Navigujte uživatele Výrazný název stránky, viditelný i při rolování stránkou Drobečková navigace Vyhledávání v produktech, objednávkách, kategoriích Parametrické filtrování Složité formuláře rozděleny do více bloků s vlastním vertikálním menu Žádné neshledávám Naplnění kritéria 90 %. 10. Usnadněte uživateli práci Propojení s účetními systémy pomocí formátu ISDOC (Information System Document), který je standardem elektronické fakturace v ČR Export objednávek Tisk položek objednávky pro snadné kompletování produktů Automatické dopočítávání cen a marží 64

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ Obrázek 6.2: Průvodce inicializací eshopu na nástěnce administračního rozhraní. Automatické doplňování souvisejících produktů Hromadné úpravy ceníku, skladových zásob, slev a akcí Parametrické vyhledávání v produktech, kategoriích, objednávkách apod. Našeptávání Rychlé odkazy a přehledné statistiky na nástěnce Žádné neshledávám Naplnění kritéria 96 %. 11. Proved te uživatele inicializací eshopu Modul pro nástěnku První kroky v eshopu jednoduchý, přehledný průvodce Navádí ke správnému pořadí kroků a poskytuje zpětnou vazbu o tom, co bylo splněno Doporučený 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 Naplnění kritéria 92 %. 65

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ 6.1 Shrnutí Hodnocení návrhu je znázorněno grafem 6.3, porovnání s analyzovanými eshopy je znázorněno v grafu 6.4. Administrační rozhraní je navrženo tak, aby uživatelům co nejvíce usnadnilo práci (kritérium 3.3.10). Na toto kritérium kladu největší důraz a ze všech eshopů hodnocených v této práci dopadl návrh nejlépe. Všechny činnosti, u kterých je to možné, probíhají automatizovaně. Systém je podle návrhu možné pomocí formátu ISDOC propojit s různými účetními systémy. V administračním rozhraní se lze snadno a rychle pohybovat díky přehlednému uspořádání a prakticky umístěným rychlým odkazům. Ceny a produkty lze upravovat hromadně. Nedostatkem návrhu je, že vytvořen pouze v jedniné univerzální podobě. Neexistují verze, které by lépe odpovídaly potřebám internetových obchodů z různých segmentů trhu, s různě vysokými rozpočty apod. Na druhou stranu je i tato jediná verze natolik flexibilní, že je schopna uspokojit mnoho různorodých požadavků (kritérium 3.3.2). Návrh v podobě wireframů není schopen zachytit některé jemnější způsoby zpětné vazby (např. změna barvy odkazů při najetí kurzorem myši apod.). Ze své podstaty návrh vůbec nepostihuje problematiku ukládání dat do databáze. Nejsem oprávněna rozhodnout, zda by bylo v navrženém systému možné dočasně ukládat smazané produkty pro umožnění funkce Undo. Hlavně z tohoto důvodu je hodnocení kritéria 3.3.6 tak nízké. 66

6. HODNOCENÍ NAVRŽENÉHO ŘEŠENÍ Obrázek 6.3: Graf naplnění kritérií u navrženého řešení. Vážený průměr je 84 % Obrázek 6.4: Graf naplnění kritérií analyzovaných eshopů a navrženého řešení. 67