Když uživatelé otevřou webovou stránku nebo aplikaci, nejprve si všimnou zjevných prvků designu: loga, barev, ikon, ilustrací a obrázků. Tyto prvky sice přispívají k celkovému uživatelskému zážitku, ale ve skutečnosti jsou to dílky větší skládačky: interakčního designu. Tento koncept může být pro koncové uživatele nenápadnější než nablýskaná nová domovská stránka, ale má zásadní význam pro vytvoření poutavého a intuitivního digitálního zážitku.

Co je interakční design?

Interakční design je o usnadnění interakce mezi uživateli a produkty (nejčastěji jsou těmito produkty aplikace nebo webové stránky). Podle nadace Interaction Design Foundation je „cílem interakčního designu vytvořit produkty, které uživateli umožní dosáhnout jeho cíle (cílů) tím nejlepším možným způsobem“. Jinými slovy, designéři interakce jsou zodpovědní za vytvoření každého prvku na obrazovce, s nímž může uživatel interagovat, ať už prostřednictvím kliknutí, přejetí prstem, klepnutí nebo nějaké akce.

Pět dimenzí designu interakce slouží jako užitečný model pro pochopení toho, co zahrnuje. Tento model, který poprvé představila Gillian Crampton Smithová, akademička zabývající se interakčním designem, zahrnoval pouze čtyři dimenze. Kevin Silver, vedoucí designér interakcí ve společnosti IDEXX Laboratories, přidal pátou.

1D: Slova by měla být jednoduchá na pochopení a měla by uživateli sdělovat správné množství informací (příliš mnoho detailů může uživatele zahltit, zatímco příliš málo informací může způsobit zmatek).

2D: Vizuální reprezentace, jako jsou obrázky, typografie a ikony, by měly doplňovat slova, aby uživateli sdělily informace.

3D: Fyzické objekty nebo prostor se týkají skutečného hardwaru a objektů, s nimiž uživatel interaguje. Používají například chytrý telefon nebo notebook s myší? A kde se nachází, u svého pracovního stolu nebo v přeplněném metru?

4D: Čas se týká toho, jak uživatelé mohou měřit pokrok, například pomocí zvuku a animace, a také toho, jak dlouho stráví interakcí s prvními třemi dimenzemi.

5D: Chování přidal Kevin Silver a zahrnuje, jak předchozí dimenze definují interakce produktu. Zahrnuje také reakce uživatelů a produktu.

Související: 6 důvodů, proč by návrháři UX měli zkoumat interakci s gesty

10 příkladů interakčního designu

Jak vypadá interakce designu v reálném životě? Zde je několik našich oblíbených příkladů nalezených na Dribbble.

Autor: Jony vino. Rozdělit se s přáteli o účet není vždy tak snadné, jak se zdá, zejména pokud jste spíše vizuální člověk než člověk, který se zabývá čísly. Tento koncept aplikace vám umožní zadat celkový účet, vybrat procento spropitného a pak se podívat, kolik která osoba zaplatí. A co je na tom nejlepší? Místo toho, abyste ručně upravovali část každé osoby a museli neustále aktualizovat podíl každého z nich, můžete v aplikaci jednoduše změnit velikost části každé osoby a čísla se automaticky přepočítají pro každého.

Autor: Prem Gurusamy. Na většině webů elektronických obchodů musíte pro zobrazení košíku přejít do zcela jiné části webu nebo aplikace. Díky této interakci můžete okamžitě vidět, jak vaše položky „letí“ do košíku, jakmile kliknete na tlačítko „Přidat do košíku“. Košík se nadále vizuálně vynořuje na povrchu vašich položek, i když prozkoumáváte další části webu.

Autor: Igor Pavlinski. Aplikace sociálních médií jsou proslulé informačním přetížením, kdy se vám najednou zobrazují všechny nejzajímavější články, trendová videa nebo články a aktuální zprávy. Tento koncept nové aplikace pro sociální média vrací kontrolu zpět do rukou uživatele, organizuje obsah podle zdrojů (například YouTube, Vimeo, Twitter nebo Reddit) a nechává vás vybrat, který kanál chcete prozkoumat. Toto uspořádání podobné kartě také eliminuje nutnost přeskakovat mezi aplikacemi, abyste mohli konzumovat svůj oblíbený obsah. Místo toho lze snadno střídat zdroje v rámci jednoho prostředí.

Podle tubik. Existuje milion a jeden způsob, jak si hamburger přizpůsobit. A když si ho objednáváte na chytrém telefonu, může být výběr jednotlivých ingrediencí na malé obrazovce cvičením v obratnosti. Tento koncept uživatelského rozhraní pro aplikaci Tasty Burger zjednodušuje objednávání tím, že ingredience rozděluje do kyblíků podle typu. Místo zobrazení dlouhého seznamu všech možných variant sýra, produktů, masa nebo housky nejprve kliknete na kategorii ingredience (například sýr) a poté se vám zobrazí různé typy, například gouda nebo comte.

Autor: Rahul.Design. Pokud hledáte dům a nemůžete si nemovitost prohlédnout osobně, další nejlepší možností je virtuální prohlídka. Tento koncept realitní aplikace Spec využívá naše přirozené chování při prohlídce nového prostoru. Můžete kliknout do libovolné místnosti, například do kuchyně nebo obývacího pokoje, a pohybem telefonu získat 360stupňový pohled. Mezi místnostmi lze snadno přepínat jediným klepnutím.

Autor: Forest Plasencia. Filtry nabízejí výkonný a snadný způsob, jak zobrazit různé výseče informací. Problémem mnoha interakcí s filtry však je, že otevírají vyskakovací okno nebo novou stránku v aplikaci a skrývají právě ty informace, které chcete filtrovat. Tato mikrointerakce udržuje vše ve stejném zobrazení, i když filtrujete. Tímto způsobem můžete vidět okamžitou změnu dat při výběru různých kritérií filtrování.

Autor: Dmitro Petrenko. Díky aplikacím pro chytré telefony je snadnější než kdykoli předtím zabezpečit a monitorovat dům, ale v rozmezí 94-99 %

Související: Vytvoření nástroje, který zaznamenává interakce uživatelů

Autor: Gil. Tato jednoduchá interakce se stránkou zlepšuje uživatelský zážitek na webu a pomáhá společnosti udržet návštěvníky na svých stránkách, a to déle. Hlavním účelem stránek je ukázat, jak lze tyto vlastnosti využít v přírodě, jako kancelář a jako rozšíření. Namísto vytváření samostatných zkušeností pro každý účel tato stránka napodobuje uživatelský tok srovnávání a porovnávání různých způsobů využití a plynulé přeskakování mezi nimi.

Autor: Dominik Martin. Interakce nemusí být výrazné a nápadné, aby zapůsobily. Tento koncept aplikace zjednodušuje chování, kterým všichni opovrhujeme – výběr země pobytu z dlouhého seznamu. Místo toho, aby uživatelé museli procházet seznam a hledat svou zemi, tato mikrointerakce vás nejprve nechá vybrat první písmeno vaší země a pak ji najde z mnohem menšího, soustředěného seznamu zemí.

Autor: Mykolas Puodziunas. Stále více maloobchodních webů vám usnadňuje „rychlé zobrazení“ položky, místo abyste museli klikat na každou stránku s podrobnostmi a pak se vracet zpět do výsledků vyhledávání a procházet další položky. Tento koncept jde ještě o krok dál a umožňuje zobrazit každý produkt v různých dostupných barvách, aniž byste museli opustit stránku kategorie.

Vynechali jsme váš oblíbený příklad interakčního designu? Podělte se o něj s námi na Twitteru: @InVisionApp.