UI, bezzkratkovitě User Interface, je přesně to místo, kde se spojují ruce na Davidově fresce v Sixtinské kapli. Česky uživatelské rozhraní – místo, kde spolu interagují člověk a počítač. Tahle interakce ale vůbec není vyvážená, podíváme-li se na to z pohledu počítače. UI je totiž místo, které uživateli umožňuje počítač ovládat. Hahah.
Tak a teď se na to pojďme podívat pořádně. UI je viditelná část. V praxi se jedná o design, barvy, fonty, obrázky, ale i ikonky, typografii a celkový layout stránky. Už jsme doma? UI je, jednoduše řečeno, to, co vidíš. A taky, co trochu nevidíš.
UI vs. UX
Co se týká těchto pojmů, ano, je to tak, velmi často dochází k výměně, záměně, domněnce. Domněnce? Tak či tak, hodně lidí si tyto dva pojmy plete.
UI = user interface
UX = user experience
Pod UX se skrývají aspekty interakce s uživatelem, které podmiňují úspěšnost značky. UX tedy popisuje funkčnost produktu a to, jaký zážitek si uživatel odnáší. Do UX se ale odráží i další ukazatele, jako třeba – cílovka, očekávání uživatelů, proč, jak a kým je produkt využíváním.
UX je nadřazený UI. Ty jako UX/UI designer musíš vědět, pro koho a co přesně tvoříš, teprve až pak tomu můžeš dát nějakou podobu. Ostatně hodně už jsme o rozdílu UI a UX psali zrovna nedávno tady.
Nechceme ale, aby sis myslel*a, že role UI designera je jen a pouze o designu. Ona taky není. Nemalou a neméně důležitou součástí UI jsou i ovládací prvky (texty, formuláře, animace, microcopy), které slouží ke snadnějšímu používání aplikace.
Ale teď už zpátky k našemu hlavnímu tématu: jak udělat top strop UI? Představujeme ti nejlepší hacky, díky kterým budou tvoje produkty a projekty co nejvíc strop. A taky top. Prostě top strop!
Profesionální přístup se cení
Všichni profesionální UI designeři už dávno vědí, kam sáhnout. To znamená, že moc dobře znají způsob, pomocí kterého tvoří nové aplikace. Téměř vždycky se zaměří na konkrétní designové prvky, věnují dostatečný čas barvám, rozhodně nemalují čerta na zeď, hrají si s umístěním, s fonty, se tvary, s velikostmi. Jejich cílem je jednoduše zvýšit konverze firmy jako mávnutím kouzelného proutku.
Jak toho docílit? Popřemýšlej o účasti na našem kurzu UX/UI Design, kde se naučíš všechno potřebné, aby ses mohl*a vydat na dráhu UI designera. Naši lektoři Šimon Jůn a Jindřich Zvolánek ti ukážou, co a jak. Naučíš se taky pracovat s Figmou a získáš cenné rady nejen do života.
Cenné hacky aka tipy a triky
Ne vždycky se zavděčíš všem, ale to už je život. Každopádně psychologie (oh my lord what a science) zjistila, že lidičky nejčastěji zaměřují svou pozornost na první a poslední položku. Tzv. efekt sériové pozice velmi výrazně ovlivňuje, jak bude daná stránka vnímaná. Je to velmi zajímavý úkaz a profesionálové s ním umí opravdu dobře pracovat. Proč myslíš, že CTA tlačítko je nejčastěji v jednom z horních rohů?
Pojďme se teď už konečně (!) přesunout k výčtu:
#1 Vizuální hierarchie
Když něco tvoříš, a zejména pak když tvoříš něco pro lidi, je fakt důležité, aby to vypadalo pěkně. A aby to vypadalo pěkně, je v případě UI potřeba dodržovat jakýsi vizuální rytmus.
Ne všechno zdůraznění se musí řešit capslockem, rudou barvou a velkými písmy. Nejsme přeci v bulváru – nechceš lidi nalákat na drby, chceš je nalákat, protože propaguješ, prodáváš a máš něco dobrého, něco suprh! Takže místo velikosti písma použít třeba jinou barvu nebo jiný odstín. Klíčová slova klidně odlišuj, stejně tak i další věci, na které chceš upozornit, ale dělej to s citem. Hezky pěkně.
#2 Intenzivnější zážitek
Pokud chceš zvýšit celkový dojem návštěvníků webu, zefektivnit způsob, jakým se chovají a pohybují po webu, začni je řídit z bodu A do bodu B a C a tak dále. Nejprve ale musíš zjistit, jak budou tvoji uživatelé interagovat s novým návrhem, a také definovat, jak chceš, aby se chovali.
#3 Méně je (vždycky) více
A jsme zase u toho: lidé mají rádi jednoduchost, to nám věř. Čím více možností a spouštěcích bodů web obsahuje, tím obtížnější je pro uživatele webem plynule procházet.
Zkus se na web podívat očima uživatele/zákazníka, takže s odstupem. Zjisti, co právě tobě vadí, co je pro tebe až zbytečně moc složité. Díky tomu zjistíš, co, kde a jak můžeš změnit, opravit či upravit.
#4 Konzistence a kontinuita
Žádný z těchto tipů nebude prospěšný, když nebudeš pracovat dostatečně důsledně. Všechno si připrav předem, protože štěstí přeje připraveným. Vytvoř si Ul Kit obsahující styly textu, podklady, mřížku, ikony a barvy. Díky tomu si vytvoříš odrazový můstek a základ, na kterém můžeš stavět. Základ, který můžeš kdykoli znovu a znovu upravit a přepracovat. Ale důležité je jedno: dvakrát měř jednou řež.