Daily UI – pop-up nebo překrytí

V rámci další Daily UI výzvy jsem měl navrhout pop-up, resp. nějaký prvek překrývající zbytek rozhraní (něco jako modální dialog).

Věřím, že podobná „vyskakovátka“ snad alespoň jednou navrhoval každý. Sám jsem jich hodně navrhl, proto jsem se tedy v rámci výzvy pokusil návrh připravit tak, jak to mám nejradši a jak to podle mě dává největší smysl.

Animace jako způsob navigace

Už dlouho mě inspiruje přístup, kdy se jeden prvek změní ve druhý. Líbí se mi to, protože díky tomu můžeme lidem:

• Lépe pochopit, jak vlastně rozhraní funguje.
• Usnadnit navigaci napříč rozhraním.

Líbí se mi na tom právě to, že to vede naší pozornost a zároveň funguje jako okamžitá zpětná vazba o tom, co se děje.

Vezměmě si například, jak většinou fungují modální dialogy:

• Kliknete na nějakou akci na kraji obrazovky.
• Modální dialog se zničeho nic objeví v prostředku obrazovky.

Naše pozornost jej zachytí především díky tomu, že se dialog objeví rychle (o tom níže) a že jsme si tak nějak zvykli po obrazovce trochu „těkat“. Myslím si ale, že to jde určitě lépe a trochu „přívětivěji“ – právě pomocí animací.

Vycházím z toho, jak funguje naše vnímání, tedy že nejostřejší vidění máme zhruba v úhlu 5° od středového bodu a zbytek se postupně rozostří, jak centrální vidění přechází do periferního.

Představme si to na příkladu použití mobilního telefonu, tedy že:

• Držíme telefon přiblizně 30 cm od sebe.
• Centrální vize pak zabírá přibližně (pokud bereme v potaz zdravé oko) úhel 5°, tedy přibližně 4 cm (2 cm na obou stranách) kolem místa, na které se soustředite. Zbytek už se pomalu rozmazává. (Což si sami můžeme vyzkoušet.)

Pokud bych tedy svou pozornost zaměřil na tlačítko pro přidání nové poznámky, zmáčkl jej a dialog by se začal pomalu objevovat, možná bych si jej ani nemusel všimnout (určitě jste slyšeli o Neviditelné gorile).

Dialog je tedy potřeba zobrazit přiměřeně rychle, což je opět „nápor“ na naší pozornost – je to vlastně impulz pro (nebo bych řekl spíš útok na) náš „ještěří“ mozek, aby začal dávat pozor. S nadsázkou můžeme říct, že mozek znejistí, protože by na nás mohl vyskočit tygr.

Právě díky animaci přeměny jednoho prvků v další pomůžeme lidem zachytit výskyt toho nového, protože jej rovnou navedeme na vhodné místo tak, že si toho všimnou a nebude tak interakce působit rušivě jako v případě, když na vás prvek odněkud vyskočí.

Animujeme rozhraní

Google tento přístup zabudoval do Material Designu jako jeden z klíčových principů. Animace totiž:

• Pomáhá vést pozornost.
• Vede uživatele rozhraním.
• Funguje jako okamžitá zpětná vazba.

O tomto principu jsem se záměrně rozepsal trochu víc z toho důvodu, že jsem jej využil právě pro řešení pop-upu / překrytí v rámci této výzvy.

Snažil jsem se primárně o to, aby:

• Se plynule objevil celoobrazovkový dialog po kliknutí na tlačítko pro přidání nové poznámky.
• Zadaný text plynule přešel v novou poznámku v seznamu.

Pro zjednodušení zobrazení seznamu jsem využil pouze oddělený text. Pokud bych jednotlivé poznámky uzavřel do kartiček, efekt přechodu z obrazovky Nové poznámky do nové položky v seznamu by určitě lépe vynikl.

Podle mě je pak rozhraní nejen lépe funkční a pochopitelné, ale díky animacím získá takový ten „hravý“ element, díky kterému se nám bude s rozhraním lépe pracovat a s větší „láskou“ používat. A to nejen na mobilu, ale samozřejmě i na počítači.

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