Daily UI – žebříček

V rámci další Daily UI výzvy jsem měl navrhnout žebříček. Měl jsem pro něj zvážit důležité statistiky, procenta, body, profilové obrázky nebo cokoliv dalšího.

Pokusil jsem se tedy navrhnout trochu hravější žebříček na motivy jedné offline hry, kterou jsem před pár lety hrál.

Žebříček má motivovat

I když jsou pro mě žebříčky poměrně známý prvek (ze studia gamifikace, game designu a hraní her), stejně jsem si potřeboval trochu ujastnit a připomenout, co je vlastně jejich smyslem a proč bych je měl používat.

Je to jeden z možných prvků gamifikace, tedy motivace lidi k určité aktivitě. Co mám nastudováno a vyzkoušeno na projektech, žebříček opravdu není jen pouhý přehled toho, jak si stojíte oproti ostatním, ale může dost pomoct s motivací (pokud je udělán správně).

Podívejme se například na žebříčky v hrách na Google Play. Často zde na prvních příčkách uvidíme lidi s tak velkým skóre, že pak vlastně žebříček nelze brát jako motivaci k dalšímu posunu. (Což by opravdu nešlo, pokud by za pozici v žebříčku byla nějaká další odměny.)

Ukázka žebříčku na Google Play.
Ukázka žebříčku na Google Play.

Aby měl žebříček v mém návrhu nějaký smysl, přemýšlel jsem nad tím:

  • Kdo budou daní hráči, budou se znát?
  • Jaké skóre je možné ve hře nasbírat?

Od toho se pak návrh odvíjel. Předpokládal jsem totiž, že:

  • Hráči se znát nemusí.
  • Sbírají se různě velké odměny za různé aktivity v čase, tudíž může být rozptyl bodů hodně velký.

Smyslem mého žebříčku byla případná snaha udržet „hráče hrát“. Rozmýšlel jsem tedy nad třemi variantami řešení tak, že:

  1. Vždy budu po vstupu zaměřen já a budu si moct žebříček volně procházet.
  2. Uvidím pouze 2-3 okolní hráče.
  3. Uvidím první 3 a poté sebe ve středu zbývajícího žebříčku.

Protože jsem si ale definoval fungování hry, vybral jsem si nakonec variantu číslo 2 – tedy zobrazit pouze okolní hráče a rozdíly bodů s tím, aby je vlastně ten minimální rozdíl motivoval k dalšímu hraní, respektive posunu v rámci žebříčku.

Lezeme na horu

Jak jsem zmínil v úvodu, žebříček jsem se snažil pojmout trochu hravě. Inspiroval jsem se v aktivitě chození po schodech, kdy jsme se snažili ujít tolik schodů, že bychom vylezli na horu.

Tento motiv jsem tedy využil v žebříčku místo obyčejného očíslovaného seznamu.

Jak by mohl takový žebříček vypadat.
Jak by mohl takový žebříček vypadat.

Pro ukázku postuného stoupání jsem přemýšlel i o tom, že bych mezi jednotlivými pozicemi udělal “stopy” jako symbol postupného stoupání po dané cestě.

Stopy ve sněhu jako cesta na vrchol hory.
Stopy ve sněhu jako cesta na vrchol hory.

Ze začátku se mi tato myšlenka poměrně líbila, ale čím víc jsem o ní přemýšlel, tím více jsem měl pocit, že sice trochu vysvětluje daný smysl, zároveň ale žebříček trochu komplikuje. Proto jsem od ní nakonec ustoupil.

V návrhu jsou zároveň trochu pracoval i s tím, že by si lidé mohli svého avatara přizpůsobit, tedy například:

  • Nahrát svou fotku.
  • Zvolit různé oblečení a jeho barvy.

Pro zjednodušení výsledného návrhu jsem s tím ve finále do detailu nepracoval, pouze to využil jako koncept.

Jak by vypadali panáčci (sloužící jako avatary), když by si někdo přidal svou fotku.
Jak by vypadali panáčci (sloužící jako avatary), když by si někdo přidal svou fotku.

Návrh jsem realizoval ve Sketch. Nabízí totiž skvělé možnosti práce se symboly (komponentami), díky čemuž jsem si mohl z návrhu udělat jednoduchou skládačku.

Žebříček jako skládačka

Na Sketch se mi líbí asi nejvíc to, jak je možné pracovat s objekty a v posledních verzích i se styly. Snadno v něm tedy lze vytvořit různorodé návrhy.

Žebříček jsem vlastně tvořil tak, že jsem na základě jednoduché skici vytvořil nejprve kostru (vlastně takový wireframe) s rozdělením objektů.

Návrh scény pro žebříček ve formě wireframu.
Návrh scény pro žebříček ve formě wireframu.

Poté jsem si připravil postavu panáčka, se kterým jsem už od začátku počítal jako se symbolem. Určitě by se mi nechtělo donekonečna různě obarvovat postavičku, proto jsem si z ní udělal symbol, stejně tak i z jeho jednotlivých částí.

Postava panáčka a jeho jednotlivé části pro symboly.
Postava panáčka a jeho jednotlivé části pro symboly.

Aby panáčci nebyli úplně stejní, vytvořil jsem ještě různé varianty oblečení, například:

  • Normální boty a sněhule;
  • Širší, normální a krátké kalhoty;
  • Různě uvazanou šálu;
  • Různé bambule pro čepici.
Různé varianty oblečení pro větší různorodost postaviček.
Různé varianty oblečení pro větší různorodost postaviček.

Model jsem měl připravený a už jsem potřeboval využít nějaké vhodné barvy. Nechtělo se mi je ale složitě vymýšlet, spíš mě napadlo vygooglit nějaké reálné věci a z nich si barvy vypůjčit.

Protože jsem chtěl jednotlivé panáčky odlišit, vytvořil jsem z barev jednotlivé barevné styly. Ty jsem poté u rozmístěných panáčků mohl velice jednoduše namíchat.

Ukázka jednotlivých barevných stylů pro oblečení.
Ukázka jednotlivých barevných stylů pro oblečení.

Díky tomu jsem mohl velice snadno naklikat různé barevné kombinace oblečení, ale i barev.

Různé barevné varianty panáčků.
Různé barevné varianty panáčků.

Poté jsem si už jen na internetu našel nějaké fotografie se sněhem, hlínou a oblohou, ze kterých jsem si „vytáhl“ barvy a obarvil svůj drátěný model do trochu hezčí podoby.

Jak vypadala výsledná scéna s využitím barev.
Jak vypadala výsledná scéna s využitím barev.

Samozřejmě vnímám, že ne všechno je v návrhu ideální. Myslím si třeba, že bych pište mohl zapracovat například na:

  • Lepším zobrazení pořadí, žebříček je trochu méně přehledný.
  • Odlišení rozdílu bodů, třeba zelená pro náskok, červená pro ztrátu.
  • Lepší práci s panáčkem a jménem, lépe je vizuálně spojit dohromady, třeba včetně pořadí?

Nicméně jako experiment mi to nepřijde zase tak špatné.

Poznámka: Budu moc rád, pokud mi do komentářů napíšete, co si o mém nápadu myslíte. Moc mi to pomůže v dalších výzvách. Díky moc 👍.

Napsat komentář