A takové bylo letošní UXLx v Lisabonu…

Den 1. a 2. - workshopy a krátké přednášky

Learning from Sci-Fi Interfaces - Nathan Shedroff (@nathanshedroff)

V prvním workshopu, který jsem navštívila, ukázal Nathan Shedroff účastníkům, že sci-fi filmy nemusí být jen zdrojem zábavy, ale můžeme v nich najít inspiraci i pro design současných rozhraní. Nathan nás provedl stoletou historií sci-fi filmů a představil nám neuvěřitelně tvůrčí a efektivní rozhraní „budoucnosti“, která byla později úspěšně aplikována i v reálných produktech a ze kterých se můžeme stále mnohé naučit.

Po výjimečně zajímavé přednášce následovalo praktické cvičení. Cílem bylo naučit designéry odpoutat se při návrhu rozhraní od omezení dnešních technologií a až později nově vymyšlené rozhraní přizpůsobit současným podmínkám.

Designing for Emotion - Aarron Walter (@aarron)

Aarron Walter na svém workshopu Designing for Emotion ukázal, že použitelnost už dnes není konkurenční výhodou a zákazníky je třeba získávat jinak – vyvolat v nich pozitivní emoci.

Citát Mayi Angelou, který použil v úvodu, v podstatě vystihuje hlavní myšlenku workshopu: „ People will forget what you said, and what you did, but they will never forget the way you made them feel.“ Tuto myšlenku Aarron přetransformoval do obdoby Maslowovi hierarchie potřeb - pyramidy potřeb uživatelů.

Na příkladech různých aplikací ukázal principy, jak pomocí emočního designu a personalizace působit na lidi tak, aby po interakci s rozhraním neměli pocit, že mluvili s počítačem, ale s lidskou bytostí. Příjemný a hezký design navíc způsobí, že lidé považují rozhraní za použitelnější.

Praktická část byla jen velmi krátká a podezřívám Aarrona, že ji sem zařadil jen proto, aby splnil definici workshopu. Naším úkolem bylo vytvořit tzv. Empathy Map. Jedná se o metodu výzkumu, která slouží k poznání našich zákazníků, jejich potřeb, ale i myšlenek, prostředí a dalších potřebných informací, abychom mohli designovat právě pro ně.

Prezentace ke stažení: Designing for Emotion

Organizing Mobile Web Experiences - Luke Wroblewski (@lukew)

V úvodu svého workshopu zabrousil Luke podle svých slov daleko do historie… až k září loňského roku:) Ukázal, že za 8 týdnů se na trhu objevilo 35 nových, naprosto odlišných, mobilních zařízení. Smartphony se neustále zvětšují, tablety zmenšují… Podle čeho poznat, jestli se jedná o smartphone, tablet, laptop nebo desktop? Kde je hranice mezi nimi? Liší se od sebe zařízení velikostí, rozlišením, možností telefonovat, dotykovým rozhraním? Ne. Jediným rozlišovacím elementem jsou omezení daná ergonomií lidského těla.

Řešením pro uspokojení potřeb uživatelů na všech těchto zařízeních je multi-device web design. Lidé nerozlišují, jestli hledají informaci na tabletu nebo telefonu – chtějí se k ní dostat kdekoli a kdykoli. V tomto pojetí designu musíme brát v úvahu, jak lidé různá zařízení používají – mobil ovládají jednou rukou, tablet drží dvěma, myš a klávesnici používají pro tradiční PC a kombinaci myši a dotyku využívají nové hybridní notebooky.

A na co tedy myslet při strukturování obsahu pro mobilní zařízení?

1. Zvyky a chování lidí při práci s mobilem: lidé nejčastěji na mobilu něco hledají, chtějí se bavit, sbírat informace nebo něco vytvářet.
2. Pravidlo Content First: obsah je král a navigace by měla být jen pomocník v jeho procházení. Proto bychom se měli snažit minimalizovat navigaci a maximalizovat obsah, zaměřit se na to, co je na webu důležité, a držet se pravidla postupného odkrývání obsahu. Lidé se nechtějí dostat všude ve stejnou chvíli, je třeba jim ukázat vždy právě tu cestou, kterou potřebují.
3. Navigace
   • Vyhněte se prostorově velkému menu, které ubírá místo obsahu.
   • Menu umístěné v horní části stránky je vhodné pro rychlou navigaci uživatele.
   • Menu v dolní části stránky je naopak vhodné k postupnému prozkoumávání obsahu.
   • Kontextová navigace musí být umístěna vždy u obsahu, který rozvíjí.
   • Existuje několik designových vzorů pro navigaci na mobilním/responzivním webu. Každá má svá pro a proti. Každá se hodí pro jiné případ.
     • Footer Anchor = odkaz (v horní části stránky) na menu, které je umístěné dole na stránce (např. www.greygoose.com). Hlavní výhodou je, že zabírá málo místa v horní části stránky a nevyžaduje javascript. Na druhou stranu přeskočení na konec stránky může být matoucí. Člověk ho nemusí zaregistrovat a tím ztratí přehled o tom, kde se na stránce nachází.
     • Toggle menu = menu, které se otevře hned u odkazu v hlavičce (např. www.starbucks.com). Jeho výhoda je v tom, že uživatel pozná, co se stalo. Navigace se zobrazí hned u tlačítka menu. V některých prohlížečích mohou vzniknout problémy s vykreslením animace v CSS nebo s javascriptem, který je v tomto případě nutností.
     • Off-canvas menu = navigace, která „vyjede“ ze strany po kliknutí na tlačítko menu v horní části stránky. Výhodou je to, že uživatel ví, kde se nachází, navigace nezabírá místo v horní části stránky a je dostupná na jedno kliknutí. Problém může být s vykreslením animace v prohlížeči tak, aby člověk věděl, co se stalo.
     • Select menu = po kliknutí na tlačítko menu se zobrazí rozbalovací seznam (např. www.viljamis.com). Toto řešení kombinuje výhody výše zmíněných – horní navigace zabírá minimum místa, člověk vždy ví, kde je, a nemá problém s ovládáním. Nevýhodou je omezená možnost formátování a komplikace se zobrazením víceúrovňové navigace.
     • Top navigation = neboli navigace zobrazená celá v horní části stránky (např. www.confab2012.com). Její hlavní výhodou je jednoduchá implementace a poměrně dobrá orientace v menu. Velkým mínusem je však to, že zabírá cenné místo pro obsah (jde proti pravidlu content first). Problémy může způsobovat i málo prostoru pro trefení se na odkaz prstem a také to, že se navigace láme na více řádků.
     • Fixně pozicovaná menu = jejich hlavní nevýhodou je, že ubírají místo obsahu, fixní pozicování není podporováno všemi operačními systémy a u menu fixovaného v dolní části stránky je nebezpečí, že uživatel omylem zmáčkne systémové tlačítko telefonu místo odkazu v menu. Lukova rada zní: "Vyhněte se jim!"
4. Funkce mobilních zařízení: Design pro mobilní zařízení nabízí spoustu nových možností. Designér by měl umět využít všechny funkce mobilu, jako je např. geolokace, možnost platit přes mobil, využití fotoaparátu apod. Nejde jen o to vměstnat velký web do malé obrazovky.

Advanced Simplicity - Giles Colborne (@gilescolborne)

Giles Colborne skvěle vyvážil praktickou a teoretickou část workshopu Advanced Simplicity. Účastníci si tak mohli sami vyzkoušet, že vytvářet jednoduchá rozhraní, není vůbec jednoduché.

Jednoduchost není v tom, jak je produkt sestrojen, nebo jak vypadá, ale ve snadnosti jeho používání. Použití jednoduchých rozhraní je efektivní a přináší uživateli i dobrý pocit. Musíme si však uvědomit, že ne všichni touží po jednoduchých rozhraních. Existují dvě skupiny lidí:

• Experti, kteří produkt dokonale znají, zaměřují se na detail a jsou ochotní investovat čas, aby se naučili produkt používat. Tito lidé nechtějí jednoduchá rozhraní, ale detailní informace a sofistikované funkce.
• Běžní smrtelníci, které zajímá jen splnění jejich cíle, uspokojení potřeby. O použití produktu nemají detailní informace a ani je nechtějí zjišťovat.

A jak zjednodušit složitá rozhraní?

1) Odstraňujte:

• Obsah a funkce, které lidé nepotřebují k dosažení svého cíle - prioritizujte podle potřeb a cílů uživatelů a nikoli podle frekvence používání.
• Různé cesty, jak udělat totožnou věc.
• Funkce, u nichž je riziko vzniku chyb.
• Zbytečné možnosti nastavení.
• Věci, které způsobují vizuální hluk.
• "Nice to have" věci, které nebudou nikomu chybět.

2) Uspořádávejte:

• Využívejte vzory, které lidé znají (barvy, logické struktury atd.)
• Vytvářejte jednoduché skupiny.
• Zvýrazněte ty nejdůležitější věci.
• Nenuťte uživatele, aby se učili nějaké nové vzory.

3) Schovávejte:

• Obsah a funkce, které lidé nepotřebují k dosažení svého cíle - prioritizujte podle potřeb a cílů uživatelů a nikoli podle frekvence používání.
• Nechte uživatele postupovat od obecného k detailnímu. Neukazujte vše najednou.
• Obsah a funkce, které potřebují běžní uživatelé, musí být vždy vidět. Experti si ty svoje najdou.
• Další krok v procesu musí být vždy viditelný.
• Vždy zde musí být možnost vrátit se zpět.

4) Ukazujte:

• To, co je důležité.

Problémem jednoduchosti je, že může být nudná. Nikdy tedy nesmíme odstranit z designu prvky, které vyvolají pozitivní emoce.

Krátké přednášky mezi workshopy

Louise Klinker (@LouiseKlinker): Simple Drawings = Big Business – Přednáška o tom, že jednoduché skicování může nejen UXákovi ušetřit čas a zefektivnit tak celý proces designování.

Anna Batista: Eye tracking glasses help define shop layout and record visitors’ experience – Případová studie o využití brýlí pro eyetracking při výzkumu možností, jak zlepšit user experience v informačních centrech v Edinburghu.

Stephen Denning (@steve_denning): What can three German psychologists teach us about UI design? Přednáška o tom, jak využít principy gestalt (tvarové) psychologie v designu.

Per Axbom (@axbom): Eliminate design -Zamyšlení nad tím, že design nezačíná kreslením wireframů, ale poznáním potřeb a problémů, které lidé řeší, a způsobu, jak s rozhraním budou pracovat. O tom, že nikdy není pozdě změnit způsob a směr, jakým postupujeme, když vidíme, že je špatný.

Den 3. - přednášky

Na programu třetího dne bylo 11 přednášek. Velkými tématy byla práce s emocemi v designu, o níž mluvili Kelly Goto a Giles Colborne, a důsledky stále rostoucího využití mobilních zařízení k přístupu na web.

A means to An End - Jon Kolko (@jkolko)

Blok přednášek zahájil Jon Kolko spíše filosofickou úvahou nazvanou A Means to An End a námětem k zamyšlení nad tím, jak designéři pracují, jaký dopad může mít jejich práce na fungování světa a proč by měli zaměřit své úsilí na projekty, které dávají smysl.

Design is always a force for change in the world, what problems do you want to work on?

Designing for Connected Homes - Claire Rowland (@clurr)

V následující přednášce Designing for Connected Homes mluvila Claire Rowland o tom, že díky využití mobilních telefonů je už „dálkové ovládání“ na náš dům poměrně rozšířenou záležitostí. Claire ukázala na příkladech, jak se výrobci těchto zařízení vyrovnávají s hlavními UX výzvami a jaké designové principy zde platí. Celou přednášku shrnula větou: "People don’t more control of their homes, they want more control of their lives."

Microinteractions: Design with Detail - Dan Saffer (@odannyboy)

Dan Saffer ve své přednášce Microinteractions: Design with Detail mluvil o významu drobných interakčních prvků. Tzv. mikrointerakce mohou existovat sami o sobě (např. v podobě malé aplikace), nebo mohou být součástí většího systému (např. přihlašovací formulář, kalendář, výběr kreditní karty, vyhledávání). Ať tak, či tak, mikrointerakce jsou právě to, co určuje rozdíl mezi produkty, které lidé milují a těmi, které tolerují. To je důvod, proč se posunout od řešení komplexních problémů k detailům.

If you care about user experience, you have to care about micro-interactions. If the micro-interactions are bad, the whole product (no matter how great it is) can cause pain and frustration.

Think small and go change the world.

The Mobile Content Mandate - Karen McGrane (@karenmcgrane)

Karen McGrane mluvila ve své přednášce The Mobile Content Mandate o tom, proč je klíčové, aby firmy nezapomínaly na mobilní obsah. Svou poutavou prezentaci začala příkladem z roku 1988, kdy ředitel firmy vyrábějící digitální produkty prohlásil: "Není důvod, aby měli jednotlivci doma svůj vlastní počítač." A do deseti let firma zkrachovala.

Stejné je to s tvrzením firem: "Tohle přece nebude nikdo na mobilu používat." Proč? Není přece důvod, aby se lidé nemohli dostat ke stejnému obsahu z mobilu, jako z počítače. 31 % Američanů přistupuje na internet výhradně nebo alespoň většinou z mobilu (to je jejich „počítač“). Zároveň 70 % firem nemá web optimalizovaný pro mobily (dle dat Googlu). Jaký je důvod, aby těch 31 % lidí dostali méně obsahu nebo špatně použitelné stránky?

Jaká by tedy měla být obsahová strategie pro mobilní zařízení?

1) Poznejte své workflow – kdo co ve firmě dělá a jak? Často se stává, že ve firmě vyvíjí mobilní web úplně jiné oddělení než ten klasický a pokud mezi sebou tato oddělení nekomunikují, může nastat problém.

2) Pište lépe - neexistuje nic jako psaní pro mobil, existuje jen dobré spaní. Ale omezený prostor může pomoci spát lépe – jasně a stručně.

3) Jak zrecyklovat desktopový obsah pro mobil? - jeden obsah musí být použitelný pro všechna zařízení – neukrajujte (text, nadpisy, odkazy, obrázky…)!

4) Nevytvářejte obsah pro specifický kontext/zařízení – nikdy nemůžete vědět, kdy, kde a na jakém zařízení si bude člověk váš obsah prohlížet.

You don’t get to decide which device people use to access your content. They do.

Designing for Delight - Giles Colborne (@gilescolborne)

Giles Colborne se ve své přednášce Designing for Delight zamýšlel nad tím, jaké produkty a služby přináší lidem potěšení. Z příběhů různých lidí, zjistil, že to, co považují odborníci za příjemné řešení, se hodně liší od toho, jak to vidí „normální“ lidé. Důvod, aby si člověk zapamatoval, že ho nějaký produkt nebo služba potěšila, není v jeho kráse nebo nápaditosti, ale v tom, že na začátku stála nějaká nepříjemná situace, starost nebo zneklidnění, které bylo následně snadno, překvapivě nebo chytře vyřešeno. A toto potěšení způsobí, že si produkt zapamatují.

Jeho rada tedy zní: "Identifikujte místa (kroky v zákaznickém procesu), která jsou pro uživatele nepříjemná nebo stresující, a hledejte snadná, osobní, chytrá a promyšlená řešení jejich problému. Tento příjemný zážitek si lidé zapamatují a budou o něm mluvit dál. Proto následně sledujte a měřte (např. pomocí net promoter score), jak o vašem produktu lidé mluví, abyste věděli, jak úspěšní v designování pro potěšení jste."

Remember that delight fades away – don ’t get cocky.

Clear Language in Interfaces - Sandra Fisher-Martins (@SandraMartins)

Sandra Fisher-Martins začala svou přednášku Clear Language in Interfaces reakcí na obecnou pravdu, že lidé na webu nečtou – podle ní lidé čtou, ale textu nerozumí. V Portugalsku asi 80 % lidí těžko rozumí tomu, co čte (low literacy level), v Británii je to asi 50 % lidí. Pochopení textu závisí na těchto faktorech:

• Kontext – je člověk např. ve stresu, když čte?
• Pozornost – je plně soustředěný?
• Motivace.
• Předchozí znalosti.
• Kvalita textu.

A jak tedy psát tak, aby lidé chápali, o čem se píše?

• Mějte jasné sdělení a jděte rovnou k věci.
• Začněte s nejdůležitějšími informacemi.
• Pište jednoduché věty.
• Používejte výstižné nadpisy.
• Používejte slova svých uživatelů.
• Testujte, jestli rozumí (testy použitelnosti, A/B testování, doplňovačky – respondent má za úkol doplnit do textu slova podle jeho významu).
• Vytvořte si persony, abyste věděli, jakým způsobem vaši uživatelé mluví.
• V rámci firmy používejte jednotný způsob a styl psaní.

Clarify leads to better products, better interfaces, better ux.

Další zajímavosti a inspirace

Aarron Walter v Big Data UX mluvil o tom, jakým způsobem pracují s daty v MailChimpu.

Oliver Reichenstein jako jediný přednášel bez slajdů. Přiznám se, že jeho přednáška Learning to See byla pro mě trochu chaotická a odnesla jsem si z ní tyto myšlenky: "Be thankful for feedback, even bad feedback", a trochu praktičtější: "The power of pauses - when a client says something stupid… just pause, don’t say anything".

V závěrečné přednášce Mobile to the Future Luke Wroblewski upozornil na to, že dnešní mobilní web je obvykle jen vmáčknutím obsahu pro desktop (se všemi jeho problémy) do malé obrazovky, ale vůbec nejsou využívané jeho odlišnosti od desktopu. Budoucnost vidí ve změně designového myšlení, kterou přinese právě rostoucí vliv mobilu jako masmédia.

More and more device features are being opened up to be accessible to use via the web browser - use them!

Skvělá organizace, výborní řečníci, inspirativní přednášky a výborné zákusky v pauzách mezi bloky… to už asi dnes nikoho nepřekvapí. O zpestření se ale postarali lidé z @LiveSketching, kteří úžasně zachytili obsah jednotlivých přednášek. Všechny skeče můžete najít na jejich twitteru @LiveSketching.