Daily UI – nastavení

V rámci další Design UI výzvy jsem měl tentokrát navrhnout Nastavení – pro cokoliv, například bezpečnost, soukromí nebo nastavení hry. Bylo to opět na mě, co si vyberu na řešení

Po pár nakreslených nápadech pro různé možnosti jsem nakonec vybral něco trochu jednoduššího – nastavení kvality online přehrávaného videa.

Co ta čísla znamenají

Abych se přiznal, nechtělo se mi navrhovat nějakou stránku s nastavením. Třeba přeorganizovat nebo vizuálně upravit nastavení Androidu. Vybral jsem si tedy něco menšího – vzpomněl jsem si totiž na rodiče, když se s dcerkou koukají na pohádku.

Jak si vlastně na YouTube nastavit kvalitu videa?

  • Můžete si vybrat z několika rozlíšení, které jsou pro dané video dostupné.
  • Možnosti jsou omezená podle kvality vašeho displeje (monitoru).

Jenže co ta čísla znamenají, jaký je rozdíl mezi 720, 1080 nebo 1440? Vždyť je to přece HD.

V nastavení kvality videa na Youtube si můžete vybrat z několika možností.
V nastavení kvality videa na Youtube si můžete vybrat z několika možností.

Nastavení kvality řešila také má žena, když se chtěla na cestách dívat na nějaké video, ale nechtěla si vyplácat všechna mobilní data a chtěla „koukatelnou“ kvalitu.

Co kdyby zde tedy byla nějaká vizuální nápověda, která by s výběrem rozlišení pomohla? Například v podobě rozmazené až zaostřené ikonky, podle rozlišení.

Jak by mohlo vypadat nastavení kvality přehrávaného videa.
Jak by mohlo vypadat nastavení kvality přehrávaného videa.

Co jsem si tak s návrhem hrál, ikonky jsou ve výsledku udělané tak, že vlastně nejde ani poznat rozdíl mezi rozlišením větším než 1080p (osobně jsem ten rozdíl viděl až na 5K displeji). To už je tak vysoká kvalita, že nuance budou znatelné jen na opravdu kvalitních displejích.

Detailní pohled na ikony v nastavení kvality.
Detailní pohled na ikony v nastavení kvality.

Co kdyby to fungovalo ještě trochu líp. Například byste myší mohli najet nad některou z možností a aktuální snímek by se zobrazil v dané kvalitě jako náhled? Podle mě byste si snáz vybrali, co je ještě koukatelné.

Zobrazit přesnou kvalitu jako náhled aktuálního snímku.
Zobrazit přesnou kvalitu jako náhled aktuálního snímku.

Přemýšlel jsem také nad otázkou, zda jsou vůbec potřeba nějaká čísla. Možná by stačilo, pokud bychom:

  • Úrovně kvality popsali jednoduše jako Nejmenší až Nejvyšší.
  • Zobrazili úroveň kvality pouze s využitím zmíněných obrázků.

Nebo jiným způsobem, který by pomohl s výběrem běžným smtelníků.

Ono ale může být užitečné mít pro výběr rozlišení více informací, například právě:

  • Číslo,
  • Název rozlišení, tedy HD nebo 4K.

Možná se ale najde dost lidí, kteří chtějí znát tyto detailní informace (a nemusí jí pouze o fajnšmekry), aby si mohli vybrat vhodnou kvalitu podle jejich aktuálních potřeb. Jim by popisek asi nestačil.

Jak také Jan Henneberg na Twitteru trefně poznamenal, mohl jsem v rámci daného problému nějak zobrazit i objem dat, které sledování “spotřebuje”. Přemýšlel jsem nad tím, a z řešení asi nešťastně vypustil.

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 👍.

Komentáře

  1. Zajímavý nápad s rozmazaným pozadím ikonky videa. Naopak dát červený podklad pod HD, 4K mi nepříjde vhodné, moc to “tahá” oči, původní verze se mi líbila víc. Každopádně děkuji za tento blog, je inspirativní ho číst 😉

    • Díky moc komentář. Červené pozadí jsem zvolil nakonec kvůli tomu, aby bylo trochu výraznější a lidé to “4K” nebo “HD” viděli spíš – právě kvůli tomu, že číslo jim nemusí nic moc říct. Možná jsem ale přepískl a šlo by to i jinak :).

  2. Nápad se mi líbí, ale realizace by bohužel v praxi nikdy nefungovala – je zábavné si podobné věci kreslit, taky na tom občas ujedu (dělal jsem asi 10 variant přepínání jazyka napojené na košík, nakonec jsme skončili u jednoduchého dialogu po příchodu zákazníka, pokud to systém sám nezařadí), ale zde vidím zásadní problém – ty ikonky vypadají všechny naprosto stejně, nepůsobí to jako stupnice.

    Na mobilu (malý displej) nemám šanci rozeznat rozdíl, myslím že běžný uživatel by měl problém zjistit rozdíl i mezi úplně rozmazanou a nerozmazanou ikonkou. Navíc ta ikonka naprosto nic neříká. Takže nápad dobrý, ale aplikace by měla být jiná – přemýšlel bych, zda nezkusit třeba jen 3 velké ikonky telefonu, notebooku a desktopu, které by pokryly rozpětí těch rozlišení. Osobně se snažím skoro vždy eliminovat zbytečné ikonky, pokud s nimi počítám, musí mít praktické využití a ideálně dostatečně srozumitelné.

    • Ahoj, díky za komentář.

      Co jsem zkoušel ikonky zobrazit na 3 různých displejích, ty pro menší rozlišení se od ostatních lišily. Samozřejmě ty zbývající vypadají hodně podobně a jak jsem psal v článku, v tom možná tkví ten vtip – je totiž jedno, které vyšší rozlišení si vybereš, protože ono vlastně teoreticky nepoznáš rozdíl. Musel bys mít hodně kvalitní displej, na kterém bys vlastně viděl i rozdíl v ikonách. Je ale pravda, že by mohly být větší, aby byl ten rozdíl patrný.

      Co se týče mobilu, tak pro něj bych to řešil jinak. Počítal bych tam s různou hustotou pixelů a velikostí ikonek. Kvůli omezenému času jsem se v rámci toho „cvíčení“ soustředil primárně na verzi pro desktop, případně tablet.

      Pokud bych taky něco takového řešil v práci, určitě bych tento nápad nejprve ověřil.

Napsat komentář