UX, UI, GUI, IA, ID aneb Babylonské zmatení pojmů

Ačkoliv v profesionálních kruzích panuje celkem dobrý konsenzus, mezi lidmi mimo obor převládá často značné zmatení ohledně základních pojmů. Od zákazníků slýcháme: „Musí to mít hezkou grafiku!“ nebo „Potřebujeme hlavně přehledné GUÍčko!“. Po krátké diskuzi vyjde najevo, že vlastně chtějí, aby se k nim jejich uživatel často vracel, měl z aplikace co nejlepší dojem, co nejpříjemnější zážitek – tedy aby měla aplikace co nejlepší UX (user experience). Grafika by samozřejmě měla být také „pěkná“, i když to je velmi relativní pojem závisející na řadě faktorů, včetně existující korporátní identity, cílové klientele apod. Ani nejlepší grafický návrh ale nezachrání špatně navrženou aplikaci, v níž se uživatel ztrácí, nechápe pojmy, kterými s ním aplikace komunikuje, a nerozumí, proč se v aplikaci dějí některé akce.

User experience je pojem, pro který čeština zatím nemá zažitý ekvivalent. Jedná se o celkovou zkušenost, zážitek, pocit, který si uživatel vytváří a odnáší po použití určité aplikace. Je to komplexní fenomén, do kterého přispívá řada faktorů – osobností, zkušeností a inteligencí uživatele počínaje, grafickým designem, barvami a layoutem pokračujíc a technologickými aspekty, jako je například rychlost odezvy, konče. Někdy se můžeme setkat také s pojmem client experience, který se obvykle chápe v ještě širším kontextu a nezahrnuje pouze informační systémy a aplikace, ale také interakci klienta jinými prostředky a kanály (např. na pobočkách bank). Jako user experience je ale také označována disciplína, která dnes zaujímá stále důležitější místo v procesu vývoje informačních systémů.

User interface je obecné označení uživatelského rozhraní. Pojem pochází původně z oblasti průmyslového designu a označuje libovolné rozhraní pro interakci člověka a produktu (stroje) – tedy například i páky či fyzického tlačítka. V oblasti aplikací a informačních systémů je dnes asi vhodnější používat specifičtější termín, tedy grafické uživatelské rozhraní (GUI), které používá naprostá většina informačních systémů, webů a aplikací. Nezapomínejme ale na to, že například uživatelské rozhraní mobilní aplikace neznamená pouze zmiňovanou grafickou část, ale také že chytrý telefon disponuje specifickým ovládáním přes dotykový displej, uživatel může použít různá další fyzická tlačítka telefonu atd.

Usability, tedy použitelnost, je obecně sada vlastností čehokoliv – v našem kontextu se jedná o informační systémy a weby – které charakterizují, jak dobře dokáže uživatel prostřednictvím dané věci nebo softwaru vyřešit úkol, k němuž je daná věc nebo software určený (důraz je kladen zejména na pragmatické, nikoliv estetické nebo emotivní aspekty). Odvozeným pojmem je usability testing, tedy testování použitelnosti aplikace na reprezentativním vzorku uživatelů.

Zastavme se ještě chvíli u pojmů informační architektura a interaction design. V obou případech se jedná o disciplíny, jejichž cílem je zajistit dobrou použitelnost nebo vysokou user experience informačních systémů či webů. Informační architektura řeší, jakým způsobem a kde mají být v systému rozmístěny informace, například kde uživatel najde e-shop, kde najde informaci o předplatném, jak se dostane do nápovědy, jak najde možnost přihlášení do systému, kde má k dispozici vyhledávání atp. Interaction design se zabývá, jak již název napovídá, návrhem, jakým způsobem bude uživatel komunikovat se systémem (tlačítka, táhla, dotykové obrazovky, scénáře přechodů mezi obrazovkami, způsob použití dialogových oken, interaktivní nápověda ve formulářích apod.).

Všechny výše zmíněné disciplíny hojně využívají poznatky z různých odvětví psychologie, kognitivních věd, antropologie a dalších oborů.

Prototyp jako multivitamin

Jak do tohoto ekosystému disciplín a důležitých pojmů zapadají prototypy? Díky interaktivním prototypům je možné velmi rychle a kvalitně ověřit závěry a návrhy většiny uvedených disciplín – tedy ověřit použitelnost aplikace, úroveň user experience, správně navrženou informační architekturu i způsob interakce. Ostatní nástroje, například vyhodnocování grafických návrhů pomocí oční kamery nebo řízeným rozhovorem s uživateli, nepostihují všechny aspekty interakce člověka s počítačem tak komplexně jako právě interaktivní prototypy. Dalo by se tedy s jistou nadsázkou říct, že prototypy jsou „všeléky“ nebo multivitaminy v oblasti návrhu a ověřování použitelnosti informačních systémů. Ale nejenom v této oblasti jsou prototypy užitečné. Mohou být úspěšně využity v řadě dalších případů:

• vizualizují a pomáhají validovat navržené řešení,
• ukazují, že zamýšlená aplikace je uchopitelná a realizovatelná (důležité pro sponzory, management, další zainteresované osoby, kolegy v týmu, ... ),
• pomáhají dobře zmapovat a řídit rozsah budoucího projektu,
• díky prototypům lze snadno odhalit nejasná a nezmapovaná místa aplikace či webu,
• prototyp dále může sloužit jako referenční zadání pro dodavatele (třetí strany), nástroj pro provedení různých druhů testů použitelnosti, reference pro provedení akceptačních testů.
   

Příklad high-fidelity prototypu s pokročilou grafikou a interakcemi

Hi-fi, nebo lo-fi?

Zjednodušeně řečeno, high-fidelity (hi-fi) prototypy se od low-fidelity (lo-fi) prototypů liší zejména tím, že jejich obrazovkové prvky, popisky, grafika a interakce obsahují velké množství detailů a svým vzhledem a chováním takřka odpovídají finální aplikaci. Namísto strohých šedých wireframů, jednoduchých tlačítek, schematických návrhů formulářů a „lorem ipsum“ textů můžeme v těchto prototypech vidět zcela konkrétní obrazovky s konkrétními ovládacími prvky, finální smysluplnou textaci, grafiku, na které se podíleli grafici, konkrétní interakce, funkční validace formulářů, animace apod. Může se zdát, že takové prototypy jsou nejvíce „sexy“, nejblíže budoucí realitě, a tedy to nejlepší, co by návrháři prototypů měli vyrábět. Není to ale zcela pravda. Lo-fi prototypy mají oproti hi-fi prototypům řadu výhod a v mnoha případech mohou být vhodnější.

Náklady na výrobu prototypů většinou představují jen zlomek nákladů na realizaci finální aplikace. Pochopitelně je nákladnější výroba hi-fi prototypů než lo-fi prototypů. Obvykle se začíná právě od lo-fi návrhu, který se několikrát iteruje (prochází prvními oponenturami a testy), pak se ho musí chopit grafické studio (případně musí být k dispozici existující styleguide) a je potřeba prototyp tzv. obarvit. Čím více obrazovek, interakcí, validací a přechodů, tím více roste komplexita prototypu jako takového a samozřejmě rostou také náklady na jeho výrobu. I když je high-fidelity prototyp vyžadován a má smysl a opodstatnění, v určitém stupni jeho rozvoje je třeba zavelet „stop!“, neboť další jeho rozvoj už má jen minimální přidanou hodnotu.

Hi-fi prototypy mohou strhnout nežádoucí pozornost ke grafice a barvám. Každý z nás má nějaké preference a subjektivní názor na to, co je „hezké“ a co je „ošklivé“. Tento názor samozřejmě mají i ti, kdo prototyp schvalují a mají sponzorovat tvorbu budoucí aplikace nebo webu. Pokud se grafická stránka prototypu netrefí do vkusu těchto zainteresovaných osob, může „diskuze o barvičkách“ zcela zastínit výrazně důležitější diskuzi – totiž jestli aplikace jako celek bude dávat smysl, jestli má dobře navrženou informační architekturu, layout apod. Pro takové případy je tedy opět rozumnější použít lo-fi prototyp. Pro další účely mohou být vhodné oba přístupy, v závislosti na kontextu. Například zadání pro dodavatele (třetí stranu), vysvětlení záměru ze strany business oddělení pracovníkům interního IT vývoje a různé druhy testů použitelnosti. Ve všech těchto případech mohou být dobře použity jak hi-fi, tak lo-fi prototypy.
 

Příklad low-fidelity prototypu...

Dynamicky, interaktivně, responzivně!

Pod pojmem prototyp nerozumíme jen statický návrh obrazovky, ale částečně funkční aplikaci, která dokáže přiměřeným způsobem simulovat interakce s uživatelem a reagovat na různé události. Interaktivní prototyp je ale stále poměrně široký pojem, protože je jistě velký rozdíl mezi základními interakcemi typu kliknutí na odkaz a přechod na další stránku a mezi pokročilými interakcemi (animace, výpočty, validace vstupů, entitní logika, tj. např. pamatování si obsahu nákupního košíku, který uživatel dynamicky naplnil). Prototypovací nástroje, které jsou dnes k dispozici na trhu, často nabízejí právě základní interakce (přechody mezi obrazovkami), v lepším případě doplněné o přechodové efekty a jednoduché animace. Již výrazně méně nástrojů umožňuje do prototypu zahrnout reakce na různé jiné typy událostí (například stisky kláves, formulářová logika nebo dotyková gesta pro mobilní aplikace) a výpočty na základě statických proměnných. A ještě méně nástrojů disponuje tzv. entitní logikou, která umožňuje spravovat dynamické seznamy položek, agregovat výpočty, filtrovat a zobrazovat obsah na základě uživatelem zadaných kritérií.

Při návrhu webových aplikací se dnes často setkáváme s pojmem responzivní design. Ten neznamená, jak by se při doslovném překladu mohlo zdát, design, který „reaguje“ či „odpovídá“ na vstupy uživatele. Jedná se o označení takového návrhu, který je univerzální napříč různými typy zařízení, pomocí nichž může uživatel web zobrazit. Počínaje počítači s velkými monitory přes menší notebooky, ještě menší tablety až po nejmenší obrazovky chytrých telefonů. Cílem návrhářů responzivního designu je zachovat přehlednost a použitelnost webu i v případech, kdy nemohou využít prostor velké obrazovky, nebo když se mění poměr stran (z obvyklého širokého monitoru na vysoký displej telefonu). Samozřejmě je velmi žádoucí, aby pro každou variantu layoutu nemusely být znovu vytvářeny všechny „assety“ (obrázky, layoutovací bloky, tlačítka atd.), ale aby byla zajištěna co největší flexibilita a znovupoužitelnost. Na trhu je dnes jen hrstka nástrojů, které responzivní design nativně podporují, ale zdá se, že v blízké budoucnosti se objeví další (např. plánovaná verze Axure RP 7.0). V ostatních nástrojích je třeba responzivní design navrhovat bez speciální podpory, takže se většinou prototypují všechny varianty webu zvlášť a jednotlivé assety se replikují.

Tipy, jak na prototypy

Jste přesvědčeni, že prototyp pro vás může být užitečný, a nevíte, jaký nástroj zvolit? Začít můžete samozřejmě s jednoduchými „kreslítky“ a základními interakcemi (přechody mezi obrazovkami aplikace či stránkami webu). K tomu může docela dobře posloužit i PowerPoint, ale samozřejmě je vhodnější použít nástroj pro to určený, s nativní podporou interakcí, knihovnou obrazovkových prvků apod. Naštěstí je většina prototypovacích nástrojů k dispozici jako free nástroj nebo v trial verzi. Pořízení licence navíc nestojí v porovnání s jiným korporátním softwarem žádné velké peníze (u těch lepších nástrojů se jedná o řádově stovky dolarů za licenci na jednoho uživatele). Zamyslete se však, co od nástroje požadujete a seznamte se s jeho rozhraním a ergonomií.
 

Shrnutí

Prototypování je relativně snadný a levný, zato však velmi přínosný způsob, jak si budoucí aplikaci „osahat“ ještě před investicí do její tvorby, jak otestovat správný návrh struktury webu či přesvědčit sponzory a zainteresované osoby o správnosti a reálnosti projektového záměru. Prototypy mohou velmi věrně simulovat budoucí aplikaci, včetně profesionálního vzhledu a pokročilých interakcí. Je však třeba zvolit vhodný nástroj, který vytváření takových prototypů umožňuje, a také je třeba počítat s vyššími náklady na tvorbu prototypu. V mnoha případech mohou stejně dobře posloužit i jednodušší (low-fidelity) prototypy. Před výběrem prototypovacího nástroje je dobré vědět, co od něj požadujeme. Vhodnou alternativou může být využití služeb profesionálního partnera – ať už pro školení nebo pro samotnou tvorbu prototypu.

Alois Filip, Štěpán Verecký