Tady se má nahrát waving GIF :(

jmenuji se František Čanda a jsem (učím se být) UX designer v Socialbakers.

Pokud máte něco zajímavého a nejlépe kde bych se něčemu přiučil neváhejte se ozvat.

Abyste viděli co mě baví a co zhruba umím, podívejte se na 3 připravené "případovky" níže:

Muzeum Experimentální psychologie, WorkFlow - sdílení souborů, Leader System a Další a ostatní.

Jsem členem Asociace UX.

Muzeum experimentální psychologie

Cílem tohoto školního projektu bylo ve spolupráci s Laboratoří behaviorálních a lingvistických studií (LABELS) AV ČR vytvořit informační a výukový portál podávající ucelené informace o vědeckých psychologických experimentech.

Responsive image
Logo muzea vychází z iluze Impossible Fork.

Problém

Experimentální psychologie je součást základní látky pro studenty psychologie (tvoří základní jádro oboru). Některé experimentální postupy se špatně demonstrují. Studenti nevidí smysl a učitelé to často berou jako něco, čím se musí studenti “prokousat”. Vytvořením tohoto portálu by vznikl jednotný prostor, kam by přednášející směřovali studenty kvůli názornému demonstrování toho, o čem se píše v knihách.

Responsive image

Uživatelé

Hlavní cílovou skupinu jsme definovali jako studenty psychologie (především ve věku 18-28 let). Dalšími uživateli jsou odborní pracovníci případně i široká veřejnost. Primární persona je tak 20letý student psychologie, který aktuálně navštěvuje předmět obecné psychologie, kde jsou experimenty jednou ze základních látek. Ve škole je vyzván k nastudování experimentů v literatuře i právě na připravovaném portále, kde si může, narozdíl od knihy, zejména vizuální experimenty vyzkoušet.

Responsive image

Koncept

Konceptem projektu bylo vytvořit databázi experimentů s jejich demonstracemi/ukázkami, možnost cest, tedy interaktivního výukového procházení experimenty s upraveným interaktivním didaktickým uspořádáním a prostorem pro odborně vytvořené výkladové kurzy, které se vztahují k tématice experimentů, ale i psychologie z obecnějšího hlediska.

Responsive image Responsive image

Moje role

Tento projekt jsme zpracovávali v rámci předmětu Multimediální projekt na SNM FF UK spolu s 2 dalšími kolegy. Moje role v týmu byla komunikace a plánování se zadavatelem (Labels), sepisování průběžných zpráv a dokumentace, tvorba konceptu a návrhu portálu včetně UI. Na projektu jsme pracovali v týmu při pravidelných schůzkách s kolegy a zadavateli, kde jsme dohromady řešili koncept celého portálu. Následně jsem zpracovával procesy, wireframy, funkční protopy v Axure a následně UI design ve Sketch.

Bohužel nebyly časové ani další prostředky k provedení rozsáhlejších uživatelských výzkumů a testování. Nicméně naším cílem bylo dodání funkčního prototypu po první ucelenější iteraci. Poté jsme předali funkční šablonu a dokumentaci zadavateli, který o realizaci dále jedná. Role v týmu nebyly pevně rozděleny a vzájemně jsme se v jednotlivých procesech navrhování a realizace šablony doplňovali. Kolegy z projektu Jana Maršíčka a Jiřího Mahu, jejichž práci nejen na front-endu, mohu určitě doporučit.

Responsive image
Jednoduchá mapa systému.

PROCES

  • Hloubkové rozhovory se zadavateli
  • Vytváření konceptu projektu
  • Analýzy a rešerše
  • Analýza procesů
  • Skicy, wireframy
  • Prototypy
  • Testování
  • Grafické zpracování
  • HTML&CSS&JS šablona projektu
Responsive image Responsive image
Wireframy k projektu z Axure RP.

Řešení

Projekt jsme rozdělili na čtyři základní části:

Katalog plní funkci strukturovaného zdroje experimentů a je rozčleněn do tří úrovní. Na Katalog, Kategorii a Experiment. Layout katalogu je rozdělen v každé úrovni do dvou sloupců.
Na úrovni Katalog jsou v levém sloupci popsané kategorie, do kterých jsou experimenty řazené. V pravém sloupci jsou pak jednotlivé kategorie vypsané. Proklikem na název kategorie se uživatel dostane na úroveň Kategorie. V této úrovni je v pravém sloupci uveden název kategorie, odkazy na podkategorie a krátká anotace kategorie. V právem sloupci je uveden seznam všech experimentů, které patří do dané kategorie a odkazují na úroveň Experimentů. V této poslední úrovni je v levém sloupci název experimentu, perex k experimentu, jeho zařazení do dalších kategorií případně tlačítko na spuštění experimentů v novém okně. V pravém sloupci je uveden text k danému experimentu a náhled nebo aplikace experimentu.

Druhou částí jsou kurzy, které by měly obsahovat odborníky vypracované výukové bloky, které by dávaly experimenty do kontextů apod.

Cesty jsou alternativní způsob zobrazení experimentů. V nich je obsah každého experimentu rozdělen do několika obrazovek (slidů), mezi kterými si uživatel může jednoduše (i pomocí klávesnice) procházet strukturované informace o experimentech, které mohou být doplněny o další obsah či otázky (testy). Cesty by pro uživatele mohly být lepší formou obsahu k zapamatování či jejímu prezentování.

Každý experiment je možno si uložit pro příští návštěvu. Tyto experimenty se ukládají pomocí Cookies a není nutné po uživateli vyžadovat registraci a přihlašování. Tyto experimenty se ukládají to tzv. offcanvasu pomocí ikonky, která je zobrazena u každého názvu experimentu. To je sloupec, který se zobrazí po kliknutí na ikonu v pravém horním rohu rozhraní. Do tohoto sloupce je možné uložit či přidat jeden a více experimentů. Tyto experimenty je možné, v tomto offcanvasu, spustit v módu prohlížení experimentů, který nazýváme cesty.

Responsive image
Příklad aplikace experimentu Snake Illusion.
Responsive image
Příklad aplikace experimentu "Stepping feet".

Problémy

Problémem, který jsme při návrhu řešili bylo vyhledávání a filtrace experimentů. Po rozhovorech se zainteresovanými osobami jsme došli k závěru, že je vhodné klasické procházení katalogem po jednotlivých vrstvách katalogu, kde jsou jednotlivé objekty doplněny o fasetovou klasifikaci. To samé se týká fulltextového vyhledávání, které by řadilo výsledky podle katalogového vrstvení (experiment a jednotlivé kategorizace).

Druhým problémem byla podoba demonstrací experimentů. Psychologické experimenty mají velmi rozličnou podobou. Některé vyžadují zobrazení přes celou obrazovku, u některých je potřeba přesně měřit čas, některé jsou licencované a nelze je přímo vložit na web a některé jsou pouze v podobě obrázků. Navíc je skoro každý experiment tvořen jinou technologií či speciálními frameworky pro psychologické experimenty. Jelikož zadavatel nepočítá s vlastním vytváření demonstrací, snažili jsme se uzpůsobit layout a UI portálu na všechny možné výstupy a odprostili jsme se od možnosti pracovat s jednotlivými výstupy z těchto demonstrací

Responsive image
Náhled několika málo obrazovek navrhnutých pro projekt ve Sketch 3.

Závěry

Tento projekt skýtal problémů daleko více (například uživatelské profily, přihlašování apod.) a na další by se přišlo dalším uživatelským výzkumem a testováním. Bohužel k tomuto jsme se zatím nedostali. Projekt tak slouží spíše jako referenční funkční prototyp k získání dalších prostředků k jeho vývoji.

Tento projekt byl velkým přínosem i nám, převážné v oblastech jako je práce v týmu a celkové projektové řízení, kde jsme si osvojili práci s nástroji, jako je Basecamp nebo GitHub. Ačkoliv jsme cíl splnili v poměrně dobré kvalitě, tak mě mrzí, že jsme se nedostali k většímu uživatelskému výzkumu a testování.

WorkFlow - sdílení souborů

V rámci své bakalářské práce jsem zpracovával problematiku návrhu systému komunikace a sdílení vizuálních nebo audiovizuálních souborů mezi designéry a klienty. Téma mé práce vycházelo z vlastní tehdejší potřeby tento problém řešit, kdy nebyli tyto systémy tolik rozšířeny jako dnes. Cílem této práce nebyl pouze návrh tohoto systému ale hlavně studium literatury a možnost prohloubit znalosti v uživatelském výzkumu a testování.

Prezentace z Diplomového semináře k zadávání tématu.

Proces

Proces návrhu systému obsahoval následující kroky:

  • zpracování projektového úkolu
  • analýza přímé a nepřímé konkurence
  • analýza uživatelů a jejich požadavků
  • vytváření person
  • analýza procesů
  • analýza informační architektury
  • návrh UI pomocí skic, wireframů a prototypu
  • uživatelský výzkum papírového prototypu
Responsive image
Výsledková tabulka z analýzy konkurence. Další výsledky jsou v této práci (PDF).

Konkurenční analýza

Cílem kompetitivní analýzy je prostudování jednotlivých uživatelských rozhraní konkurenčních systémů, jejich funkcí, mechanismů, výhod a nedostatků a vyvodit doporučení pro návrh aplikace WorkFlow.

Příme (Prevueit, Dropmark) i nepřímé (CloudApp, Dropbox) konkurenční projekty jsem analyzoval podle předem připravených hodnotících kritérií (manipulace se soubory, způsoby komunikace, rozlišení profilů, omezení a požadavky na systém a uživatele, mobilní a responsivní design, apod.).

Výsledky analýzy pro mě byli především poznáváním jak takovéto systémy fungují a ve skutečnosti jsem jich prošel mnohem více. Výsledné doporučení se týkalo především použítí obecných prvků UI, na které by se nemělo zapomenout a možnost odlišení se od ostatních systémů pomocí důrazu na komunikaci.

Responsive image
Jedna z již podrobnějších skic layoutu systému.

Analýza uživatelů a jejich potřeb

Uživatelský výzkum tvořil především kvalitativní dotazník zaměřený na cílovou skupinu. Na základě předtestového dotazníku jsem vytvořil finální dotazník o 13 otázkách. Pořadí otázek jsem určoval podle náročnosti odpovědi tak, aby se střídaly lehké otázky s těžkými, aniž bych narušoval logický postup, a tím se vyhnul ztrátě respondentů. Z výzkumu jsem získal relevatní odpovědi od 70 respondentů.

Cílem výzkumu byla identifikace požadavků, případně podnětů k funkčnosti systému a názorů na problematiku sdílení souborů a komunikace s klienty, Druhým cílem byla segmentace vzorů chování, motivací, názorů pro navrhnutí person.

Požadavky získané na základě výsledků dotazníku a dalších rozhovorů s cílovými uživateli se pak pohybovali od požadavků na jednoduchost a plynulost UI přes praktické funkce jako Drag&Drop, komunikaci přes chat, zařazování souborů do několika kategorií až po responsivní design.

Responsive image
Primární persona Karel.
Responsive image
Sekundární persona Martin.

Persony

Data získaná z dotazníkového výzkumu, jejichž relevanci jsem potvrdil v rozhovorech s vývojovým týmem a potenciálními koncovými uživateli systému a výsledky těchto rozhovorů jsem využil k modelování person. Vytvořil jsem dvě persony, primární (Karel), sekundární (Martin) pro návrháře a jednu personu doplňkovou (Karolínu) pro klienty, které zastupují určité uživatelské profily potenciálních uživatelů.

Responsive image
"Procesní diagram" soukromých zpráv.

Diagramy, IA a první návrhy UI

V další části procesu návrhu uživatelského rozhraní pro systém WorkFlow jsem začal s vytvářením funkčních diagramů a jejich popisem. Vytvořil jsem diagram případů použití (Use case) zachycující obecné fungování systému a jednoduché procesní diagramy (flow charts) k jednotlivým základním procesům v systému. Procesní diagramy vycházejí z diagramu případů užití. Na základě vstupního zadání, doporučení z uživatelské a kompetitivní analýzy a za pomocí person a definování procesů, jsem přešel k samotnému návrhu uživatelského rozhraní a jeho informační architektury. Ty jsem řešil nejdříve analýzou mapy systému, skicováním a tvorbou wireframů a prototypů.

Responsive image
Papírový prototyp použitý k uživatelskému testování.

Uživatelské testování

Po prvním podrobnějším návrhu uživatelského rozhraní WorkFlow jsem provedl první uživatelský test. Pro tento test jsem vytvořil jednoduchý papírový prototyp, který vyhovoval aktuálnímu stavu procesu navrhování rozhraní. Zároveň umožňoval případné rychlé úpravy během testu a případnou pozdější vizualizaci změn při rozhovorech s testery.

Test zahrnoval výběr účastníků, předtestový výzkum, testování prototypu na předem definovaných scénářích a potestovém rozhovoru. Následně jsem výsledky analyzoval a vyvodil doporučení pro další fázi navrhování systému WorkFlow.

Testování bylo úspěšné. Odhalilo hned několik nedostatků, ze kterých vznikly podnětné doporučení pro další cyklus návrhu UI systému.

Responsive image
Wireframe/prototyp vytvořený v Balsamiq Mockups.

Závěr

Práce na tomto systému byla vůbec mým prvním pokusem o komplexnější přístup k návrhu UI. Ačkoli v tomto návrhu i v bakalářské práci mnoho chybí (např. řešení bezpečnosti a obsahuje chyby a nesrozumitelnosti, které by se případně odstranili v další iteraci, dosáhl tento proces kýžených výsledků a zároveň byla pro mě velkým přínosem.)

Návrh tohoto systému byl nakonec vytvořen i do fáze funkční aplikace (ne mnou). Bohužel v době od první myšlenky až do této fáze uběhlo mnoho času a na „trhu” se objevilo mnoho podobných a lepších systémů a my nadále tento projekt již nerozvíjíme.

Pro čtení s "rezervou" je možné si stáhnout praktickou část práce v pdf zde.

Responsive image

Leader system

V roce 2010 jsem dostal možnost podílet se na databázové aplikaci jedné tzv. Místní akční skupiny ČR, která komunitní formou pracuje ve prospěch místního rozvoje venkova na území České republiky.

Responsive image
Dodaný wireframe, podle kterého jsem se orientoval

Aplikace měla pokrývat celý proces „života” projektů od podávání žádostí přes monitoring průběhu a jejich doby udržitelnosti. Hlavním cílem aplikace je především archivace těchto událostí.

Aplikace Leader měla být velmi komplexní záležitostí s velkým množstvím procesů a především uživatelských rolí (administrátor, moderátor, manažer, pracovník MAS, facilitátor a žadatel). Taková aplikace přímo vybízí k poctivému procesu návrhu, který by měl obsahovat především pečlivou analýzu procesů a zpracování informační architektury v souvislosti s uživatelskými rolemi.

Responsive image

Bohužel moje práce byla pouze „překreslení” dodaného wireframu do grafické podoby. Zároveň nebyla žádným „oficiálním” pracovním poměrem. Nakonec se struktura systému velmi změnila a můj grafický návrh nebyl použit.

S podobným systémem v současné době pracuji ve svém aktuálním zaměstnání a vůbec se nedivím, že Tesco SW, který tyto systémy vyvíjí, aktuálně hledá v Olomouci UX designéry.

Responsive image

Skaut - středisko Letohrad

Ostatní a další

Kategorie jako je "ostatní" nebo "další" jsou důsledkem neschopnosti analyzovat.

Responsive image
Responsive image
Responsive image
Responsive image
Responsive image
Responsive image

Kontakt

Rozhodně nekoukejte do kódu!

2015