[9] Hezčí a dynamičtejší rozhraní a ovládacích prvků

nnis commented 2 years ago

Issue slouží ke sběru podnětů pro uživatelské rozhraní a design Vždy napište, co vás na prvku zaujalo, popište chování prvku, udělejte screenshot a dejte link na stránku

kristynahubickova commented 2 years ago

Tohle asi není ani tak inspirace, jako ukázka toho, že velmi podobně pracují s virtuálními výstavami on site ve Švédsku (konkrétně Museum of World Culture)

infopointy

https://user-images.githubusercontent.com/79597746/145991295-997e27b7-b5fd-4b4c-9375-8d6006130187.mp4

Kahoot - inspirace a alternativa progress baru v levém dolním rohu a taky využití pozadí.

Quizlet a jejich "subjects" rozřazení - inspirace ke vzniku"centrální databáze" výstav právě třeba podle tématu (nebo délky, publika, hodnocení, atd)

Líbí se mi idea featured výstavy na landing page, mohla by se třeba i obměňovat

nnis commented 2 years ago

Mě se líbí chování ovládacích prvků na stránce DOXu (https://www.dox.cz/). A to konkrétně:

zbarvení prvků, když na ně najedu myší
krátky s tím, že se kolečko změní ve čtverec
že když na něco kliknu, prvky se objeví v pohybu a pak až se ustálí

Tady na té stránce se stejně jako u DOXu pohybují prvky, než se "načtou" (https://jankelley.com/about/)

zároveň tam mají celkem hezky udělaný info boxíky, když člověk najede myší na nějaký prvek
taky tam mají vpravo nahoře ikonu menu a křížku, která se mění, to mi taky přijde dobrý

Do třetice mě baví web designéra Václava Kokeše (jinak klidně, pokud bychom měli peníze, bych ho angažovala, má fakt pěknou práci a zároveň je opravdu ochotný) - http://www.vasekkokes.cz/. Konkrétně

dynamický text při najetí (povyskočení a zvětšení), to samé dělají ikony
líbí se mi ikony šipek
baví mě barevná obruba u kulaté fotky

Tady je to taky celé takové hýbací - https://growerssoil.com/

překvapuje mě, jak používají i svislý text
fakt mě baví trojúhelníková ikona nahoře vpravo, která se pak změní v šipku
líbí se mi prvek barevných obdélníků (mimochodem ty nám v INDIHU neladí, nepasují na sebe, různě se překrývají a nelícují, což vypadá jako chyba, ale tady na tom webu s tím pracují a myslím, že by to nemusel být špatný nápad, kdyby si tvůrce mohl třeba měnit barvu těch obdélníků, lišt a tak

K infopointům - nemá to špatně vyřešené IKEA (https://www.ikea.com/cz/cs/rooms/childrens-room/gallery/misto-pro-dva-a-na-hrani-taky-pubb04f20f0), která má takový nenápadný puntík s orámováním a když se to rozklikne, jde tam ještě šipkou pokračovat dál, což by mohlo být fajn u té nelinearity. Dovedla bych si představit, že by ty puntíky pulzovaly, aby víczvaly k rozkliknutí nebo bych si mohla měnit barvy (vždy tmavší vnitřek, světlejší obruba), což by mi dávalo prostor využívat nějaké barevné kódování (třeba žluté info, zelené infopointy s proklikem nebo navázání na nějaká témata) ovladaci-prvky6

H-a-n-k-a commented 2 years ago

Pár podnětů k ikonám a tlačítkům obecně:

rozlišit klikací a neklikací ikony (barva, pulzování)
užití i neviditelných/průhledných tlačítek/ikon jako dosud, ale doplnit vysvětlující zprávy o funkci ikony/tlačítka zobrazující se při najetí myší a/nebo přímo v ikoně
"button states" - odlišit tlačítko (barva, pulzování) při přejetí myší, rozlišovat použité tlačítko či neaktivní tlačítko (užití např. v kvízech, jiných minihrách?)
plující tlačítka, případně celá plující lišta (budou zasuté a ukáží se jen při pohybu myší)

Příklady:

Construct Klee app