Návrh uživatelských rozhraní D4 NOV-WEB Web pro stránky předmětů Jakub Bartoš, Pavel Dvořák, Jakub Motyčka, Kamil Procházka
Popis prototypu Prototyp je vytvořen formou webové stránky, která je realizována pomocí blogovacího systému, který je použit pro současné webové stránky předmětu NUR. Tento systém zajistil funkci základních vlastností systému, jako je přihlášení, přídávání článků a přidávání komentářů. Systém používá velice přívětivé administrační rozhraní. Toto rozhraní umožňuje tvorbu html šablon a použití funkčních prvků, které systém nabízí. Systém se z větší části soustředí na třídění informací pomocí tagů, a proto je i většina komponent zaměřena na použití tagů. Systém obsahuje komponenty pro zobrazení všech tagů, vyhledávání pomocí tagů, zobrazení příbuzných článků dále komponetu pro menu a další doplňující komponenty. Komponenty jsou identifikované pomocí unikátního jména, které je vepsané do dvojitých složených závorek tímto způsobem: {{nazev_komponenty}}. Takto identifikované komponenty se umísťují na požadované místo v html šabloně. Administrační rozhraní systému je velice přívětivé a umožňuje definici různého počtu vlastních šablon. Dále je možná editace kaskádových stylů a to přímo ve webovém prohlížeči. Systém používá dvě základní šablony, jednu výchozí, která slouží pro zobrazení výchozí stránky a dále šablonu pro zobrazení jednotlivých článků. Systém dále pomocí administračního rozhraní umožňuje přidávání a editaci jednotlivých článků, každý z článků má určen text, nadpis, klíčová slova a přílohy. Dodatečná nastavení, která nejsou přímo přístupná přes webové administrační rozhraní, je možné nastavit pomocí konfiguračního souboru kb.yml. V tomto souboru je možné nastavit například automatické načítání výchozího kaskádového stylu, automatické generování nadpisů článků atd.. Prototyp je vytvořený a dostupný na adrese http://demo317282.knowledgebase.divine.cz/. Blogovací systém neumožňoval docílit veškeré funkčnosti, která byla zjištěna pomocí uživatelského výzkumu, například fultextové vyhledávání bylo nahrazeno vyhledáváním pomocí tagů. Pro vytvoření a testování prototypu byl použit uživatelský účet jakubonty@gmail.com a heslo nurnurnur. State-transition network - stavy = bubliny s textem představují jednotlivé stavy - start = kolečko znázorňuje vstupní bod do prototypu - konec = není znázorněn, v každém jednotlivém stavu může nastat konec - čára (relace) - orientovaný přechod mezi stavy - popisek relace = akce reprezentující daný přechod mezi stavy - podmínka relace = představuje podmínku nutnou pro přechod do následujícího stavu Diagram byl zjednodušen hlavně o všechny odchozí relace, které by jej připravili o přehlednost. Do konečného stavu se lze dostat z kteréhokoli stavu diagramu zavřením okna prohlížeče. Bylo vynecháno menu, které je pouze jakousi zkratkou pro vyhledávání článků podle tagů, čímž se značně zjednodušil a zpřehlednil diagram.
Softwarové a hardwarové technologie použité pro vytvoření prototypu Software Jak je zmiňováno výše, pro vytvoření prototypu byl použit blogovací systém, na kterém je postaven současný web předmětu NUR. Vzhledem k tomu, že nebyla dostupná dokumentace tohoto systému, bylo pro zjištění struktury css a html elementů nutné použití nástroje Firebug, což je plugin do prohlížeče Firefox. Tímto nástrojem byly zjištěné prvky, které bylo třeba změnit a tyto prvky byly dále i s pomocí tohoto nástroje upraveny dle požadované formy. Samotný blogovací systém je vytvořen pomocí populárního webového frameworku Ruby On Rails, který používá jazyk Ruby. Použití této platformy samo o sobě definuje software nutný pro běh systému. Množina softwarového vybavení, které umožňuje běh aplikací napsaných ve webovém frameworku Ruby On Rails, zahrnuje interpreter jazyka Ruby, webový server určený pro jazyk Ruby a dále databázový server. Hardware Jako hardware byly pro tvorbu prototypu použity běžné desktopové počítače, systém běží na webovém severu, jehož konfigurace je nám neznámá. Diagram přechodů znázorňuje na vysoké úrovni abstrakce všechny stavy, do kterých se může prototyp dostat. Diagram zachycuje několik typů informací, které vysvětluje následující legenda:
Screenshoty výsledného prototypu
Testování Byl testován elektronický prototyp aplikace (respektive vzhledové šablony) pro interaktivní web předmětu. Veškerý obsah webu se vkládá pomocí článků, jednotlivé články jsou označeny tagy pro snazší vyhledávání. Články je možné také upravovat, mazat a komentovat. Cílem testu bylo ověřit reakce uživatelů na rozmístění ovládacích prvků na stránce, jejich (ne)viditelnost a intuici uživatele (zejména při nutnosti přihlásit se). Dalším cílem bylo zjistit, jaké různé možnosti ovládání webu mohou jednotliví participanti používat. Popis testu Test proběhl na notebooku Asus P50IJ se dvoujádrovým procesorem Intel o souhrnné frekvenci 4,2 GHz, 4 GB RAM paměti a rozlišením 15 palcového displeje 1366 768 pixelů. Počítač byl připojen k internetu. Pro test byl využit internetový prohlížeč Opera ve verzi 12. Zadání testu Uživateli byl předložen následující seznam úkolů: Úkol 1 Chyběli jste na první a druhé přednášce a potřebujete si na webu zjistit jejich obsah. Úkol 2 Byl/a jste na 6. přednášce a máte z ní podrobné zápisky. Chcete je prostřednictvím webu předmětu sdílet s ostatními studenty. Poznámky vložte jako prostý text do článku. Nezapomeňte na příslušný tag Lecture. Text pro vložení je umístěn v souboru zapisky.docx na ploše PC. Úkol 3 Máte možnost se prostřednictvím komentáře článku vyjádřit k zadání Deliverables D4 (popsané v takto pojmenovaném článku). Napište, že to je tak akorát. Úkol 4 Zapomněl/a jste do článku vloženého ve druhém úkolu přidat důležitou větu, bez níž zápisek nedává smysl. Doplňte ji do článku. Věta je v souboru dodatek.txt na ploše PC. Průběh testu Participant 1 - V prvním úkolu mu vadí, že jsou informace k jednotlivým přednáškám v jednotlivých článcích a ne na jedné stránce. Články chvilku hledal v seznamu mezi ostatními. - Při druhém úkolu neví, zda se musí nebo nemusí přihlásit a hledá tlačítko na přidání článku jako nepřihlášený. - V průběhu plnění 2. úkolu si není jist, zda tlačítko Přidat vede opravdu na přidání článku nebo něčeho jiného - Při plnění 4. úkolu jej zmátlo tlačítko Upravit na titulní stránce, které nevede k úpravě žádného článku, ale titulní stránky.
- 3. úkol participant splnil dle očekávání Participant 2 - Ve 2. úkolu měla drobný problém s oddělováním klíčových slov článku čárkou. - Při plnění 4. úkolu nalezla článek pomocí seznamu nejnovějších článků, který se zobrazí po kliknutí do horní (adminské) lišty. - Po upravení článku jej chce uložit přes tlačítko Přidat v horní liště (které ale vede na formulář pro vložení nového článku). - Při plnění ostatních úkolů nedošlo k žádné zvláštní události.
Závěry z testu - Do budoucna je vhodné lépe pojmenovat tlačítka v horní liště. Tuto úpravu ale není možné provést v rámci tvorby šablon v tomto předmětu. - Některá tlačítka v horní adminské liště jsou v určitých situacích nepotřebná či matoucí. I tuto věc ale nemůžeme ovlivnit. - Na stránce přidání článků jsou některé poznámky psané tmavě šedým písmem na světle šedém pozadí, a proto je uživatelé mohou přehlédnout. - Uživatelé musí sami dojít k závěru, že pro přidání článku se musí přihlásit a současný web je k tomu nijak nenavádí. - Správci článků by měli dbát preferencí uživatelů na uspořádání webu. Uživatelé neradi překlekávají mezi ohromným množstvím článků, ve kterých se důležité články ztrácejí. Dokumentace pro vývojáře Funkční požadavky Funkční požadavky nejlépe vystihují případy použití. Funkční požadavky seřazené dle priority je následující: 1. Přihlášení do systému 2. Přidání článku 3. Zobrazení detailu článku 4. Upravení článku 5. Nalezení článku 6. Okomentování článku 7. Upravení účtu Případy užití odpovídající uvedeným funkčním požadavkům jsou blíže specifikované v deliverable číslo 2. Interaction design Prototyp je navržen pro používání zařízením, kterým se ovládá běžný webový prohlížeč, tedy pro klávesnici a myš, ale je možné použit například i dotykového ovládání pomocí tabletu. Visual design Jelikož je systém vytvořen formou webové stránky, je vizuální vzhled utvořen pomocí jazyka html a kaskádových stylů css. Struktura html je rozdělena na dvě šablony. Obě šablony mají velice podobnou strukturu. Hlavní rozdíl obou šablon je v oblasti zobrazení obsahu, kde se u výchozí šablony zobrazuje seznam článků a u šablony určené pro zobrazení článku, se zobrazuje text článku, komentáře a klíčová slova. Html je možné sjednocovat pomocí funkčnosti, kterou nabízí použitý blogovací systém. Jinými slovy lze použít libovolný html kód v několika různých šablonách. Této vlastnosti bylo využito při tvorbě menu, které je stejné použito v obou šablonách. Kaskádové styly se používají pro obě šablony naprosto shodné. Styly jsou definovány v několika souborech. Pro definování kaskádových stylů používá aplikace css framework blueprint, který definuje nejpoužívanější prvky pro určování vzhledu webové stránky. Soubory se styly:
blueprint.css css framework blueprint default_app.css css používané blogovacím systémem User experience design Šablona byla tvořena s ohledem na dodržení běžně používaných standardů na Internetu. Jedná se zejména o umístění menu na levou stranu stránky a jeho vyzdvihnutí na úkor vyhledávání (při jehož použití se navíc musí využívat tagy na rozdíl od běžného fulltextového vyhledávání). Dalším přínosem vytvořené šablony je nutnost využívat nadpisy článků. To může vést k lepší orientaci uživatele, neboť správně formulovaný nadpis je lepší než několik tagů. Oproti původní verzi již není uživatel maten nic neříkajícím TagCloudem. Tato feature dle našich průzkumů nepatřila mezi nejpoužívanější a většina uživatelů ani nevěděla, co obsahuje a proč. Cílem tvorby šablony bylo, aby se uživateli s webem pracovalo dobře a příjemně a aby nebyl nijak zvláště zmaten věcmi, které se běžně nepoužívají. Popis odevzdaného archivu Odevzdaný archiv obsahuje pouze soubory s html kódem šablon a soubor s kaskádovými styly. Popis jednotlivých souborů: article.html soubor obsahující html kód šablony pro zobrazení článku index.html soubor obsahující html kód šablony pro zobrazení výchozí stránky default_app.css soubor s kaskádovými styly menu.html soubor obsahující html kód prvku {{html-38}}