Myslete responzivně: framework pro budoucí vzdělanost

Před příchodem chytrých telefonů a tabletů mnozí z nás prodlévali ve stavu blažené nevědomosti. Ve víře, že dokážeme zkrotit inherentní nepředvídatelnost webu, předepisovali jsme požadavky pro přístup, a přitom preferovali své vlastní potřeby před potřebami uživatelů.

Jak se předpisy stávaly stále podrobnějšími, signalizoval východisko z dané situace responzivní webový design (RWD). Kromě toho, že nabízí prostředky pro budování layoutů beroucích ohled na různá zařízení, zahájil také éru přehodnocování; ještě nikdy od přijetí webových standardů nezažila naše branže tak radikální přestavbu myšlení a postupů.

Od chvíle, kdy před pěti lety Ethan Marcotte ve svém článku poprvé uctil tyto stránky, byly spuštěny tisíce webů, které mají ve svém jádru responzivní layouty. V průběhu této doby jsme experimentovali s novými způsoby práce, vypilovali jsme design a vývojářské postupy tak, že mnohem lépe padnou tomuto proměnlivému, zapeklitému médiu.

A jak se vynořujeme z éry osvícení, potřebujeme zkonsolidovat naši vzdělanost a uvažovat, jak bychom na ní mohli dál stavět.

Responzivní framework

Když uvažujeme o frameworcích, většinou si představujeme softwarové knihovny a jiné abstrakce související s vykonáváním a kódem. Tento typ frameworku nás ale distancuje od obtížností, jimž čelíme, když navrhujeme pro toto médium. Loni, když Ethan hovořil o potřebě mít nějaký framework, navrhnul jeden takový, zaměřený na náš přístup — pracovní rámec, který by pomáhal modelovat probíhající diskusi a měřit kvalitu a patřičnost naší práce.

Věřím, že takový framework můžeme zformulovat především tím, že se dohodneme na nějaké sadě zásadních designérských principů. Možná, že už jste s tímto pojetím obeznámeni. Některé organizace, jako jsou GOV.UK a Google, s jeho pomocí definují charakteristiky svých produktů, dokonce i svých organizací. Kate Rutterová popisuje designérské principy jako:

…krátké, pronikavé fráze, které slouží jako naváděcí světla a podporují vývoj skvělých prožitků s produkty. Designérské principy umožňují být upřímný k uživatelům a zároveň zůstat věrný své strategii z dlouhodobého horizontu (zvýraznění je mé).

Strategie webu z dlouhodobého horizontu je umožnit univerzální přístup k informacím a službám. Tento vznešený cíl je zásadní z hlediska neutuchající významnosti webu. Designérské principy musejí operovat ve prospěch této vize, oslovovat:

• uživatele. Když sestavujeme inkluzivní týmy, které naslouchají uživatelům — a dokonce pracují bok po boku — budeme docilovat širšího dosahu.
• médium. Když budeme činit méně předpokladů o kontextu a rozhraní, a více se soustředíme na uživatelské úlohy a cíle, budeme vytvářet adaptabilnější produkty.
• nás samotné. Když budeme volit nástroje, které jsou přívětivé, jednoduše použitelné a otevřené vzhledem ke změnám, možná tím uvnitř týmů vyvoláme větší ochotu ke spolupráci.

Reflektujme v praxi rozmanitost

Když si děláme přehled o zařízeních majících dostup na web, může se pokus kategorizovat společné charakteristiky jevit jako šíleně odvážný. Přestože se tato šíře a proměnlivost může někdy zdát frustrující, roztříštěnost zařízení je jen odrazem lidské rozmanitosti a zákazníků uplatňujících své právo volit.

Až donedávna byla empatie ke konzumentům převážně doménou designérů uživatelských prožitků a výzkumníků. Použitelnost webu však může nepříznivě ovlivňovat leccos, i špatně navržené rozhraní či nedostatečně uvážená volba technologie. Všichni neseme svou zodpovědnost za to, jak může naše práce ovlivnit výslednou zkušenost.

Navrhovat pro všechny

Univerzální design prosazuje vytváření produktů, které může používat kdokoli, bez ohledu na věk, zdatnost nebo stav. Mezi architekty a designéry produktů už tyto ideje došly většího uznání, stejně relevantní však jsou i pro naši vlastní praxi.

Vezměme například kuchyňské potřeby OXO Good Grips. V roce 1989 se Sam Farber nechal inspirovat artritidou své manželky a předělal design běžných škrabek na zeleninu. Nahradil jejich kovové rukojeti jemněji propracovanými, lépe uchopitelnými držadly. Pak mohl tento nástroj používat kdokoli, bez ohledu na to, jakou má sílu v prstech či jak je manuálně zručný — přitažlivým se stal i Farberův ohled na estetiku. Jeho přístup byl aplikován na celou řadu produktů; Good Grips se stala mezinárodně známou značkou získávající ceny v soutěžích, a Farberova firma, OXO, začala generovat signifikantní prodeje.

Tato práce přinesla do mainstreamu pojetí inkluzivního designu. OXO zůstává i nadále zastáncem navrhování inherentně přístupných produktů, poznamenává, že:

Když se berou v úvahu potřeby všech uživatelů už v počátku designérského procesu, je výsledkem produkt, který může používat nejširší spektrum uživatelů. V případě OXO to znamená navrhovat produkty pro mladé i staré, muže i ženy, leváky i praváky, i pro mnohé další se speciálními potřebami.

Mnohé z technologií a specifikací, které používáme, už obsahují některé aspekty univerzálního designu. Kromě specifikací, jako je WAI-ARIA, která zvyšuje přístupnost dynamických rozhraní, jsou i v HTML už dlouho zařazené základní funkce přístupnosti: atribut alt umožňuje autorům přidat textovou alternativu k obrázku, element object umožňuje poskytnout náhradní obsah, pokud není dostupný původní plugin média nebo kodek.

Ukázky také najdete uvnitř W3C a WHATWG. Klíčový princip, který byl použitý v designu HTML5, se týká jeho samotného, jak mají autoři hodnotit dodatky nebo změny specifikace. Říká se mu priorita klientel, a konstatuje, že:

V případě konfliktu přikládejte větší význam uživatelům než autorům, autorům než implementátorům, implementátorům než specifikátorům, a specifikátorům než změnám navrhovaným jen kvůli teoretickému purizmu.

Takto můžeme stanovovat priority, když činíme nějaké volby ve vlastních projektech. Přestože může vývojářům dodat větší pohodlí nějaký MVC (Model-View-Controller) framework na straně klienta, tak pokud to má znamenat, že uživatel bude muset stahovat nějaký velký soubor JavaScriptu předtím, než se bude moci přistoupit k nějaké aplikaci, měli bychom hledat jiný přístup.

Přemostění propasti

Když jsou zhotovitelé napojeni na displeje s vysokým rozlišením a na super rychlá širokopásmová připojení, bývá pro ně někdy obtížné si představit, jaké prožitky mohou mít uživatelé s finálním produktem na mobilních zařízeních s nízkým výkonem a na nespolehlivé celulární síti. Čím širší je propast mezi těmi, kdo produkt zhotovují, a těmi, kdo ho budou používat, tím větší je pravděpodobnost, že ti první učiní nesprávnou volbu. Když stanovujeme priority, musíme se dostat blíže k uživatelům.

Jak uživatelé interagují s produkty, to pomáhají zjistit uživatelské průzkumy a testy použitelnosti. Když participují různé disciplíny (vývojáři, designéři rozhraní a obsahu, produktové manažeři), lze zajistit, aby byla tato vzdělanost obecně sdílena. Vždy však můžeme udělat ještě něco navíc. Susan Robertsonová nedávno psala, jak musela strávit celý týden na pracovišti podpory odpovídáním na emaily uživatelů, a že jí to umožnilo získat nové pohledy na to, jak zákazníci používali aplikaci, kterou tehdy budovala:

Místo anonymních osob bušících do klávesnice se z uživatelů náhle stali lidé s konkrétními jmény, kteří chtěli používat to, co pomáháte vytvářet.

Když je za finální zkušenost kolektivně zodpovědný celý tým, znamená to, že úvahy o použitelnosti a přístupnosti zůstanou klíčovými atributy finálního produktu — co když je ale více inkluzivní také samotný tým? Ve svém článku “Univerzální design ve skutečném životě” Sara Wachter-Boettcherová poznamenává, že:

Nejlepší cestou, jak pochopit publika, pro která navrhujeme, je znát tato publika. A nejlepší cestou k poznání lidí je mít je vedle sebe, se všemi odlišnostmi v jejich stanoviscích a zázemích, a ano, s různým stářím, pohlavím, rasou a jazykem.

Patrně není jen shodou okolností, že jak jsme se dozvídali víc a víc o rozmanitosti zákazníků, že jsme si začali přiznávat nedostatek rozmanitosti v rámci naší vlastní branže. Budeme-li se snažit reflektovat skutečný svět, budeme moci budovat empatičtější a efektivnější týmy, což se pak zase odrazí v lepších produktech.

Budovat na adaptovatelných základech

Když se vžíváme do pocitů uživatelů, můžeme činit prozíravější volby. Přesto budou muset výsledná rozhodnutí cestovat přes nespolehlivé sítě, než budou zkonzumována různorodými zařízeními s neznámými charakteristikami. Je obtížné činit rozhodnutí, když nejste schopni predikovat výsledky.

Když se díváte na weby skrz objektivy s různým zvětšením, můžete odkrýt oblasti omezení, které nabízejí největší stupeň dosažitelnosti a adaptability. Pokud rozhraní funguje na mobilním zařízení, bude fungovat i na větším displeji. Pokud si lze data vyžádat, i když není žádná síť, bude nespolehlivé připojení snadno překonatelnou zábranou. Jestliže základ designu formuje obsah, budou informace dostupné bez ohledu na stylování. Optimalizace, které jsou založené na méně jistých předpokladech, se mohou vrstvit později, bezpečně totiž víme, že nouzová řešení jsme už poskytli.

Nejdřív rozhraní

V roce 2009 Luke Wroblewski požádal, abychom rozvažovali, jak by mohla rozhraní těžit ze schopností mobilních zařízení, abychom však tyto úvahy činili dřív, než začneme přemýšlet o tom, jak se budou tato rozhraní manifestovat v desktopových prohlížečích. Myšlení navrhovat nejdřív pro mobily dodává odvahu soustředit se na ně: displeje telefonů poskytují jen málo prostoru pro nepatřičné rozhraní či obsah, takže potřebujeme vědět, na čem záleží nejvíc. Když se soustavně ptáme, které části rozhraní jsou kritické a které ne, můžeme rozhodnout, zda budeme ty neklíčové části načítat podmíněně nebo až když je to zapotřebí — nebo vůbec ne.

Nejdřív síť

Když v roce 2013 Alex Feyerke zvažoval jak to je doopravdy se síťovou spolehlivostí, doporučil přístup nejdřív offline. Nemusíme přitom považovat offline přístup za extrémní případ, můžeme vytvářet nepřerušované prožitky bez ohledu na konektivitu — když assety stahujeme preventivně a synchronizujeme data, až když jsme online, a když agresívně cachujeme a výpočty provádíme na straně klienta, pokud online nejsme. Jiní zase doporučovali začít s adresami URL nebo s přístupem nejdřív API, a s pomocí těchto úhlů pohledu přemýšlet, kde bude uvnitř nějakého systému přebývat obsah. Každý z těchto přístupů zahrnuje podkladovou tkaninu, strukturu webu, která pomáhá budovat robustnější a odolnější produkty.

Nejdřív obsah

V roce 2011 signalizoval Mark Boulton odklon od přístupu, v němž je design založený na předdefinovaném plátně (canvas in), a posun k přístupu, v němž se layouty navrhují na základě ideje dané obsahem a přetvořené do struktury (from the content out). Když určujeme vizuální vztahy na základě prvků stránky a místo fixních hodnot používáme procenta, můžeme stránce vštípit logickou spojitost nezávisle na jejích rozměrech.

Mark uznával, že požadavek mít obsah dostupný dřív než začneme navrhovat stránku, může být přemrštěný. Proto později doporučoval, abychom se snažili nejprve pochopit typ a strukturu obsahu daného projektu, ale zároveň nikdy nezapomínali na skutečný obsah, přístup zvaný nejdřív struktura, obsah vždycky. Ten jde dobře dohromady s jádrovým modelem (Core Model), což je idea, se kterou poprvé přišel Are Halland v roce 2007 na summitu o informační architektuře. Když se ptáme, co je jádrem obsahu daného webu — jakou úlohu má vykonat, jakou informaci by měl vyslovit — můžeme pomoci klientům, aby dokázali myslet kritičtěji o svých strategických plánech, cílech byznysu a potřebách uživatelů. Ida Aalenová nedávno poznamenala:

Jádrový model je především nástroj určený pro uvažování. Pomáhá obsahovému stratégovi identifikovat na webu nejdůležitější stránky. Pomáhá UX designérovi identifikovat, které moduly potřebuje na té či oné stránce. Pomáhá grafickému designérovi dozvědět se, které prvky v designu je třeba zvýraznit, protože jsou nejdůležitější. Pomáhá zapojit do strategie projektu i klienty nebo stakeholdery, kteří bývají méně zdatní co do webových dovedností. Pomáhá textařům a editorům opustit mentalitu sila a vytvářet lepší obsah.

Sdílení toolboxu

Když se vžíváme do pocitů svých uživatelů a navigujeme nepředvídatelné médium, je třeba zajistit, aby byla naše rozhodnutí a zjištění sdílena mezi týmy.

Jak se postupně responzivní design zakotvuje uvnitř organizací, týmy stále více spolupracují s ostatními lidmi i mezi sebou. Dříve dobře definované role začínají splývat, hranice mezi nimi se rozmazávají. Také pracovní pozice a kariéry začínají reflektovat tuto změnu: viz pozice “full-stack vývojář” nebo “produktový designér”. Nástroje, které byly kdysi hájemstvím specifických disciplin, se půjčují, sdílejí a převádějí do jiných formátů; prototypování animace si může vyžádat psaní v JavaScriptu, zatímco sestavení modulární knihovny komponent zase porozumět vizuálnímu jazyku a designérským teoriím.

Pokud jsou nástroje příliš neprůhledné a adopce procesů neschůdná, ubývá příležitostí pro spolupráci. Pokud učiníte nějaký systém příliš složitým, stane se zapojování nových členů do týmu obtížným a bude zabírat spoustu času. Musíme nepřetržitě dbát, aby byla naše práce přístupná ostatním.

Ohleduplný kód

Jedním z příkladů dozrávání vztahu mezi disciplinami je narůstající používání front-endových stylových směrnic. Designéři už neprodukují statické layouty vyráběné účelově na zakázku, osvojili si systematičtější přístupy k designu. Front-endoví vývojáři je přebírají a budují knihovny vzorů a modulární komponenty, což je forma doručování, která jde lépe dohromady s  přístupy používanými v backendovém vývoji.

Vývoj řízený komponentami se projevil postupným nasazováním nástrojů, které měly uspokojit tuto potřebu. Nástroje jako Less a Sass dovolují modularizovat, řetězit a zmenšovat stylové předpisy, přesto mohou zároveň zavádět procedurální funkcionalitu do CSS, i když je to jazyk záměrně navržený tak, aby byl deklarativní a byla s ním snadnější domluva. Když však tuto úvahu aplikujeme na další členy týmu, tato nová funkcionalita se může použít k rozšíření existující deklarativní sady schopností CSS. Když používáme mixiny a funkce, můžeme vkládat designérský jazyk dovnitř kódu a prosazovat jmenné konvence, které pochopí celý tým.

Společné konvence

Dost často spočívají problémy spojené s nějakým procesem nikoli v omezeních daných technologií, ale v neochotě aplikovat kritické myšlení. Když se snažíme řešit technologické problémy tím, že použijeme ještě víc technologie, ignorujeme skutečnost, že stejně prospěšné, a pro ostatní snadnější si osvojit, může být zřízení řádných konvencí.

Aby se CSS styly aplikovaly jen v zamýšleném oboru (atribut scoped), byly zapouzdřené a snadno udržovatelné, k tomu může pomoci metodologie BEM pro pojmenovávání, přitom tento přístup nemá žádnou závislost na nějaké konkrétní technologii; je to čistě sada zdokumentovaných konvencí. Kdybychom tuto potřebu předvídali, mohli jsme BEM používat už v roce 2005. Obdobnou konvenci představují jmenné prostory CSS, jejichž zastáncem je Harry Roberts. Pouhé přidání jednopísmenného prefixu způsobí, že všichni, kdo pracují na projektu, chápou účel různých tříd a vědí, jak by se měly používat.

Ti, kdo si přejí používat software takového druhu, jaký představují preprocesory a nástroje pro automatizované spouštění opakujících se úloh (tzv. task runners), si obvykle stěžují, že často vyžadují znalost práce na příkazovém řádku. Nástroje svádějí nové rekruty instalačními pokyny v rozsahu jediného řádku, realita je však často taková, že to často zahrnuje spoustu úzkostných stavů a zdánlivě nesmyslných činností. U GitHub to vzali v úvahu a vytvořili Boxen, nástroj, který znamená, že každý v jejich firmě může na svém vlastním počítači spustit lokální instanci GitHub.com tak, že prostě napíše jediný příkaz. GitHub, i jiné firmy jako jsou Bocoup a Financial Times, se také přimlouvají, aby se pro instalace, testování a spouštění nových projektů používaly standardní příkazy.

Responzivní principy, responzivní ke změnám

Od chvíle, kdy nás responzivní design vyzval, abychom vytvářeli rozhraní, která lépe uspokojují potřeby uživatelů, nepřekvapuje, že se související diskuse stále více soustřeďovaly na to, abychom brali větší ohled na uživatele, médium a jejich vzájemné vztahy.

Chceme-li vybudovat web, který bude opravdově univerzální, musíme přijmout jeho nepředvídatelnou povahu. Musíme pozorněji naslouchat úplnému spektru našeho publika. Musíme vidět příležitosti na optimalizace tam, kde jsme dříve viděli bariéry překážející někam vstoupit. A musíme v tomto procesu také brát v úvahu spolupracovníky tím, že vybudujeme nástroje, které pomohou všem nám společně zdolávat tyto výzvy.

Tyto principy by měly utvářet náš přístup k responzivnímu designu — ony pak zase budou pociťovat potřebu se adaptovat. Tento framework nás může vést, měl by ale také zároveň být otevřený ke změnám, jak budeme nadále budovat, experimentovat a vzdělávat se.

O autorovi

Paul Robert Lloyd

Paul je nezávislý designér, spisovatel a spíkr usazený v krásném anglickém městě Brighton. Protože je usazený tam, kde se protínají grafický design a front-endový webový vývoj, je zastáncem spolupracující praxe, systémového myšlení a přijetí univerzální povahy webu.

Článek byl původně zveřejněn na serveru Alistapart.com a byl přeložen a zveřejněn s jeho svolením. Celý článek v originálním znění najdete na Thinking Responsively: A Framework for Future Learning

Přeložil: RNDr. Jan Pokorný