Nenechte zákazníka odejít se špatným pocitem

Hodně lidí řeší, co je to User Experience a jak se liší od ostatních pojmů (použitelnost, UI, HCI,…). Uvedu jeden pěkný příklad, na kterém se to pokusím vysvětlit. Stalo se mi to při nákupu v Datartu v jejich kamenné prodejně. Tady už si můžete všimnout, že User Experience se nevztahuje jen na web.

Kupoval jsem v Datartu gril. Prohlédl jsem si nabízené výrobky a jeden si vybral. U vystaveného grilu nebyly žádné další, které bych si mohl vzít. Obrátil jsem se proto na člověka, který seděl o dva metry dál a něco si tam dělal na počítači. Pán mne ale odmítl a sdělil mi, že musím za někým z bílého zboží a ukázal na druhou stranu prodejny. Vydal jsem se tedy přes prodejnu a požádal jiného pracovníka. S ním jsem se zase vrátil zpět a ukázal mu gril, který chci. Následně jsem se s ním odebral na další místo, kde do počítače něco naťukal. Dostal jsem od něj papírový lísteček s tím, že mám dojít zaplatit na pokladnu a pak si támhle do těch skleněných dveří dojít vyzvednout zboží. Zaplatil jsem tedy u pokladny a odebral se na zmíněné místo. Tam ale nikdo nebyl. Vedle postávali a svačili další pracovníci Datartu. Otráveně jsem na ně koukal, jak tam postávají a po chvíli jsem to nevydržel a poprosil je, jestli mi mohou zboží vydat. Dostalo se mi odpovědi, ať počkám, že v místnosti je kamera a že o mě ve skladu ví. Skutečně za další chvíli se objevil pracovník i s grilem a já si ho odnášel domů.

I když se ze mne stal zákazník a utratil jsem tam peníze, odcházel jsem z Datartu dost otrávený a další nákup tam si určitě dobře rozmyslím. Proč?

Krátké shrnutí

  • I když jsem měl vybraný konkrétní výrobek, musel jsem v prodejně vyhledat 2 pracovníky Datartu.
  • Celkem 3 pracovníky jsem musel žádat, abych se v procesu dostal dál.
  • Musel jsem dojít na celkem 5 různých míst v prodejně (nepočítám dvě návštěvy samotného výrobku).

Chápu sice, že některé věci mají své odůvodnění, ale v roce 2012 absolvovat takový proces je smutné.

Řešení

Abych tady jen neplkal, zkusil jsem se zamyslet nad tím, jak by to šlo vyřešit jinak. Vycházím z toho, že na prodejně jsou vystavené výrobky a k prodeji jsou ve skladu, odkud je potřeba je vyzvednout. Řešení bere v potaz pouze situaci, kterou jsem prošel. Pro komplexní řešení by se museli zahrnout i další situace.

Pokladnu jsem jednoduše spojil s výdejním místem, zbytek je vidět v následujícím komiksu:

Kurz Axure RP – 5. Klávesové zkratky a jak zefektivnit práci v Axure

Pojďme se podívat, jaké jsou klávesové zkratky v Axure, které znáte, které ne a jakým způsobem si zjednodušit každodenní práci s tímto programem.

Základ – zkratky z Windows

Asi nepřekvapí, že zde fungují běžně známé klávesové zkratky z prostředí operačního systému Windows (jak je to s MAC verzí netuším).

  • CTRL + C – kopírování objektu (i více najednou)
  • CTRL + X -vyjmutí objektu
  • CTRL + V – a jejich následné vložení
  • CTRL + TAB – přepínání jednotlivých otevřených záložek v Axure
  • CTRL + W – naopak jejich zavření

Hledání

Tady to není také žádná změna. Jen vás možná hned nenapadne, že v Axure tato funkce je. Můžete tedy prohledávat texty a další objekty přímo ve wireframech, ale také v poznámkách a anotacích pomocí následujících klávesových zkratek:

  • CTRL + F – hledání
  • CTRL + H – a dokonce je nahradit

Hledání textu v Axure

Nahrazování textu v Axure

A teď k té práci s Axure

  • CTRL + K – uzamkne objekt
  • CTRL + G – sváže více objektů do skupiny
  • CTRL + L – hodně užitečná zkratka, zobrazí jinak těžko dohledatelné pole, kde můžete nastavit velikost objektu a jeho umístění pomocí souřadnic. Zjednoduší práci, když se potřebujete trefit na konkrétní velikost objektu a máte zapnutou mřížku nebo pracujete s příliš malým objektem. Zjednodušit si také můžete přesouvání objektu z jednoho konce dlouhé stránky na druhý, které je pomocí myši pomalé.

Pracovní prostředí a jeho změny

  • CTRL + ALT + D – schováte a zase zobrazíte mřížku
  • F9 – přepnete se do Intersected modu – kdy označením prostoru pomocí kurzoru myši se označí všechny objekty, které do výběru aspoň z části zasahují. Tohle je defaultní nastavení a možná vám nebude vyhovovat.
  • CTRL + F9 – přepne do Contained modu – k označení dojde jen u těch objektů, které se celé nacházejí ve výběru. Mnohem lepší na práci.
  • F11 – se pak přepnete do Connector modu – ten využijete, pokud pracujete s digramy a potřebujete je spojovat (prvky si na stránku navkládáte, ale bez přepnutí do tohoto módu už je nespojíte).
  • F2 – je také výborná zkratka a funguje přesně jako u MS Office – umožní editaci objektu. Výhodné především, když máte více objektů svázaných ve skupině a v jedno z nich potřebujete upravit text. Prvním klikem vyberete skupinu, druhým jeden její prvek. Následným dvojklikem se většinou stane něco jiného, než editace objektu. Takže jednodušší je jen stisknout F2 a psát.

Kopírování hotových objektů a jejich přesun

Hodně času při práci s Axure strávíte kopírováním objektů, které už jste vytvořili, nebo je to rychlejší než je přetahovat z postranního panelu. Klasické CTRL C a V jde také, ale je to zdlouhavé. První je možnost podržet CTRL a objekt přetáhnout myší tam, kde má být. Tohle mně ale nevyhovuje, protože si často jen původní objekt přetáhnu a nezkopíruju. Musím to zas celé vracet. Nejefektivnější je pro mne tedy zkratka CTRL + D, která vytvoří kopii původního objektu na stejném místě. Následně ho myší posunu tam, kam chci.

Ještě lepší je to pak s kombinací CTRL + šipka. Nemusíte objekt posouvat myší. Tato klávesová zkratka posouvá objekt o šířku mřížky. Ideální je to jakmile potřebujete mít objekty stejně daleko od sebe. Třeba máte blok 50px a chcete ho na stránce několikrát. Zmáčknete CTRL + D, následně jen 6x šipku doprava a máte jeho kopii tam, kde chcete. A zase akci opakujete. Stejně dobře tu funguje i na výšku, což oceníte u textových objektů. CTRL + šipku využijete také pro samotné zarovnání objektu (přesune se k nejbližší lince mřížky) nebo pro rychlý přesun (jen šipkou je to pomalé, takhle se posunujete po skocích a rázem přesunete objekt z konce stránky na začátek).

Potřebujete něco posunout a musí to zůstat ve stejné výšce nebo vzdálenosti od kraje? Stačí při tažení myši podržet SHIFT a objekt se posunuje pouze po X nebo Y ose.

Tohle je přehled zkratek a manévrů, které nejčastěji při práci v Axure využívám. Zkratek je samozřejmě mnohem více, ale ty už tolik nevyužívám. Jestli znáte ještě nějakou další super zkratku nebo postup pro zjednodušení práce, podělte se v komentářích.

Kurz Axure RP – 4. Jak v Axure RP udělat opakující se cyklus – smyčku?

V tomto článku vám ukážu na praktickém příkladě, jak v Axure RP verze 5.6 udělat cyklus. Možnosti využití jsou různé. Já jsem zvolil jednoduchý příklad reklamy s rotujícími bannery. Ale dají se na tom založit i hry.

Princip cyklu

Předně musím zmínit, že autorem tohoto jednoduchého principu je Jeff Harrison, který s ním poprvé přišel. Věc je to geniálně jednoduchá a dá se i více rozvíjet. Jeffa mimochodem doporučuju sledovat, pokud vás Axure zajímá více.

O co tedy jde? Formulářové prvky mají události reagující na jejich označení (focus). Pokud tedy například textové pole získá „focus“, provede akci, která je navázána na událost OnFocus. A je to. Už jen zbývá po provedené akci předat „focus“ dalšímu prvku. Takhle si ho dva prvky mohou předávat donekonečna. Problém je s počítáním. V Axure jde udělat i jednoduché počítadlo (o tom jindy), ale nejjednodušší je to prostě „vypodmínkovat“.

Příklad

Nejdřív se podívejte na hotový příklad. Jedná se o jednoduchý banner, kde rotují stále dokola 4 obrázky. Po kliknutí na některý z nich se rotování zastaví.
Vytvoříme si tedy dynamický panel se 4 stavy, kde každý bude představovat jeden z obrázků. V každém stavu jsou dole stejné odkazy, které ukončí smyčku a přepnou na stav odpovídajícímu danému číslu.

Jak uděláme ten cyklus?

Na níže uvedeném obrázku vidíte již hotový dynamický banner a dvě textová pole. Ty si mezi sebou předávají „focus“, přičemž jedno vždy provede odpovídají akci (v našem případě změnu stavu banneru).

Akce navázané na textové pole jsou jednoduché. První tlačítko (TEXT1) řeší změnu stavu a pak předá „focus“ dále. Akce vidíte na následujícím obrázku.

Druhé tlačítko (TEXT3) pak počká odpovídající časový interval, po který se má jedna reklama zobrazit a následně vrátí „focus“ prvnímu tlačítku. A jede se dokola dál.

Spuštění cyklu

Cyklus spustíme jednoduše. Stačí některému z uvedených prvků ve smyčce (TEXT1, TEXT3) udělit „focus“. Může to být navázáno na nějakou akci uživatele na stránce. V našem případě jde o reklamu a ta se spustí hned jak uživatel načte stránku. Proto tedy události na stránce OnPageLoad přidáme a odpovídající akci, jak ukazuje další obrázek. Pokud chcete reklamní prvky na větším webu dávat na více míst a uděláte z nich „master“, přidejte OnPageLoad přímo v „mastru“, nebudete se tak muset starat, kde na stránce reklama je.

Ukončení cyklu

Ukončení cyklu je opět jednoduché. V našem případě je navázáno na stisknutí některého z čísel odpovídajících obrázků. Můžeme buď v případě složitějších akcí předat „focus“ prostě někam jinam. Pokud chceme mít naprostou jistotu, je vhodné cyklus ukončit tím, že všem prvkům v cyklu nastavíme „disable“ a tím znemožníme, aby jim cokoliv udělilo „focus“. Jak vypadá akce jednoho tlačítka vidíte na následujícím obrázku.

Závěrem

Nakonec ještě textová pole za něco schováme, protože nechceme, aby byli vidět. Pro lepší pochopení se kromě ukázky podívejte i na zdrojový soubor příkladu .rp. Tenhle jednoduchý princip vám hodně rozšíří funkčnost, pokud si chcete vyhrát s funkčními prototypy. A pro ty, co opravdu chtějí, dodám, že se princip dá aplikovat i na dynamické panely. Ty sice nemají událost OnFocus, ale zase se mohou schovat a zobrazit. Samotné zobrazení již zobrazeného panelu vám nepomůže. Pokud si tedy chcete s panelem hrát, nejdříve ho schovejte a následně hned zobrazte. Navázáním akcí na událost OnShow docílíte stejného efektu jako u textových polí.

V následujícím článku se můžete těšit na přehled klávesových zkratek a praktických tipů, jak zrychlit a zefektivnit práci v Axure RP.

Od kdy vaše konkurence využívá Axure RP?

Děláte v Axure RP, sledujete dění okolo a zajímá vás i konkurence? Víte od kdy jej využívají?

Jednou jsem se zase podíval na české vyhledávače a narazil jsem stařičký článek Martina Snížka, který dříve dělal v H1 (v době psaní článku) a teď dělá ve vlastní firmě Optimics. Článek je zajímavý jednou věcí a to tím, že z něj a z komentářů pod ním si můžete udělat hrubou představu, kdy v jaké firmě nebo v případě jednotlivců používají programy Axure RP.

Je to samozřejmě hlavně pro zajímavost, protože to nic neříká o výsledné kvalitě, která nemusí být přímo úměrná době používání programu Axure RP, a stejně tak lidi mezi firmami přecházejí.

A už je zbývá přidat odkaz na zmíněný článek Martina Snížka „Tip na zajímavý nástroj: Axure RP“.

Kurz Axure RP – 3. Několik malých tipů

V tomto článku se dovíte hromadu nesouvisejících detailů, které možná znáte, ale možná taky ne. Nic světoborného, ale možná vám jejich znalost unikla a mohou vám v budoucnu ušetřit práci.

Tímto článkem navážu na předchozí, který se zabýval několika tipy pro práci v Axure RP. Zde je několik dalších drobností, které se vám mohou hodit.

Kopírování akcí u interaktivních prvků

Jak už jsem naznačil v příkladu na tvorbu odkazu na určité místo ve stránce, tzv „cases“ (já jim říkám akce) není nutné vždy definovat znovu, ale lze je jednoduše kopírovat a vkládat. Což není zřejmé, protože ta možnost nikde není zobrazena (naopak některé možnosti jsou v menu nahoře a tak je lehké nabýt dojmu, že nic dalšího už dělat nejde). Stačí ale použít pravé tlačítko myši nad danou akcí a lokální menu je tu. Na něm je vidět, že akce můžete nejen kopírovat a zase vkládat, ale také různě přeskupovat (nová akce se vždy přidá jako poslední, což nemusí být vždy žádané).

Jak dát najevo více možností při kliknutí?

Pokud například vytváříte formulář pro přihlášení a děláte do prototypu obě varianty (chybné přihlášení i správné přihlášení), je vhodné o tom dát nějak vědět osobě, která s ním bude pracovat (pokud například formulář reaguje na jakékoliv heslo, uživatel si nemusí všimnout, že v dynamickém panelu je i stav pro chybové hlášení). Hodit se to může i během testování (nemusíte uživatele nutit zadat konkrétní jméno a heslo, které mu musíte nadiktovat). Tomu se vyhnete tak, že pro tlačítko (nebo cokoliv) zadáte hned dvě akce najednou pro událost OnClick. Obě akce budou bez podmínky a do názvu každé akce je potřeba napsat to, co se zobrazí po kliknutí na tlačítko. Pokud na něj někdo klikne, zobrazí se menu obou akcí a uživatel si musí vybrat a podle jeho výběru se provede jedna z těchto akcí. Nejlépe to pochopíte na ukázkovém příkladě, který jinak nic dalšího nedělá (ke stažení je i zdrojový soubor .rp). Jak jsou akce pro tlačítko v příkladu vytvořeny vidíte na následujícím obrázku.

URL na konkrétní stránku prototypu

Pokud chcete získat odkaz na konkrétní stránku prototypu a nechcete nad ním přemýšlet, kde je uložený a z čeho ho složit, klikněte na stránku v panelu „Sitemap“ a vyberte poslední možnost uložit URL do schránky. Celou adresu pak můžete kamkoliv nakopírovat.

Text s křížem na pozadí

Pokud používáte widget PlaceHolder a píšete do něj texty jako „obrázek“ nebo „reklama“, určitě vám vadí, že písmo má na pozadí kříž a je tedy špatně čitelné. Jedním z jednoduchých řešení je zarovnat text na spod bloku, čímž se docílí, že text se zobrazí ve spodním trojúhelníku a nebude překřížen čárami.

V Axure RP 6 už je tento problém odstraněn a text má pozadí s barvou výplně boxu, takže čáry nejsou pod textem vidět.

Automaticky vygenerovaná mapa webu

Pokud se vám hodí, ze stránek prototypů mít i mapu webu (ať už jako součást prototypu, dokumentace či jen jako obrázek), Axure umí ze stránek vygenerovat mapu webu jako diagram jednotlivých stránek a rovnou je provázat odkazy na odpovídající stránky prototypu. Můžete si ještě vybrat, zda strom diagramu půjde shora dolů, nebo zleva doprava. Výsledek pro obě varianty vidíte na následujícím obrázku. Vygenerovat mapu webu lez jednoduše kliknutím pravým tlačítkem na danou stránku v panelu „Sitemap“ a vybráním předposlední volby Generate Flow Diagram. Pokud tuto volbu vyvoláte na nějaké podstránce, vygeneruje se mapa jen pro odpovídající část (pro ni a její potomky).

Video v prototypech

Chcete mít v prototypu skutečné video? Mělo by to jít jednoduše vložit přes widget Inline Frame (ještě jsem sám nezkoušel).

Jak na tabulky v Axure

Pracovat s tabulkou v Axure dá někdy pořádně zabrat. Pokud se dostanete do situace, že potřebujete udělat nějakou komplikovanější tabulku, zkuste to obejít takto: tabulku si udělejte v Excelu (ideální pro případy, kdy už ji v Excelu máte). Zkopírujte si ji do schránky (CTRL + C) a v Axure na stránce ji zase vkopírujte (CTRL + V). Axure se vás následně zeptá, zda data chcete vložit jako tabulku (většinou je výsledek naprosto nepoužitelný) nebo jako obrázek. Pro druhou možnost musíte z nabízené volby zvolit „No“ a tabulka se v celé své původní kráse vloží do Axure jako obrázek.

Barevné přechody

Pokud jste si nevšimli, že v Axure jde udělat jednoduše jako výplň prvků barevný přechod, tedy nikoliv jen vyplnění jednou barvou, tak poslední tip je pro vás. V paletě barev pro výplň hned u první možnost Fill Type vyberte tu druhou – Linear Gradient. Nabídka palety se doplní o volbu barev přechodu a jeho úhlu naklonění (zpravidla budete chtít úhel 90 stupňů).

V dalších dvou článcích ukážu, jak v Axure udělat neustále se opakující smyčku a v druhém článku vyberu užitečné klávesové zkratky.

Kurz Axure RP – 2. Jak udělat odkaz doprostřed stránky z jiné stránky?

V Axure RP je možné odkazovat na konkrétní místo na stránce pomocí funkce Scroll to Image Map Region, tak jak je to běžné na webech pomocí tzv „kotvy“ v odkazu umístěné v URL za #. Problém je, když ale na takové místo chceme odkázat z jiné stránky. Image Map Region na jiné stránce není dostupné. Jak to tedy udělat?

Praktický příklad

Nakonec jsem zvolil po prvním článku – Základní tipy pro práci – jako další článek jeden velice jednoduchý příklad, který se může čas od času hodit, a je na něm vidět základní práce s proměnnými v Axure a k čemu všemu se vlastně hodí.

Zde je ukázka výsledku tohoto příkladu.

Jednoduché řešení

Protože nemůžeme odkázat na místo ve stránce, které se nachází na jiné stránce, necháme to na stránce samotné. V odkazu navíc nastavíme proměnnou, která řekne cílové stránce, aby posunula obsah na žádané místo. V cílové stránce nastavíme, aby při svém načtení zkontrolovala tuto proměnou a případně posunula obsah.

Postup – jak na to

Jednak vytvoříme novou proměnnou (PrKotva1: Wireframes > Manage Variables). Na stránce s odkazem je vhodné ji vynulovat (při OnPgaeLoad ji nastavit hodnotu na „false“). V odkazu, který má na stránku a místo v ní odkazovat, navážeme ještě změnu této proměnné na „true“ (je to nutné udělat ještě před samotným odkazem na stránku, jinak se stránka načte dřív než se proměnná změní).

Na cílové stránce pomocí Image Map Region vytvoříme „kotvu“, která označí místo kam má být stránka posunuta.

Zároveň na této stránce nastavíme, aby při načtení zkontrolovala proměnnou PrKotva1 a pokud je její hodnota „true“, posune stránku na dané místo a následně proměnnou vynuluje.

Tip na závěr: Pokud budete muset něco takového dělat (mít tím přeplácaný projekt je cesta do pekel, ale občas se to hodí), buď si celý odkaz zkopírujte a nebo kliknutím na Case s danými akcemi si ji pomocí Copy + Paste přeneste na jiný objekt (nemusíte je složitě dělat znovu).

Zdrojový soubor ke stažení

Kromě samotné ukázky si můžete stáhnout i zdrojový soubor .rp toho příklad.

Stopky v Axure RP 5.6

Stopwatch in AxurePoměrně plně funkční stopky udělané ještě ve staré verzi Axure RP 5.6 jako malá ukázka toho, co jde v Axure udělat.

Demo – stopky

Tohle na webu samozřejmě nikdy nevyužijete, ale je to ideální na procvičení a dokonalému zvládnutí práce v Axure. A je to zajímavější než furt dokola omílat jen objednávkové formuláře.

Kurz Axure RP – 1. Základní tipy pro práci

V seriálu článků, které budou následovat, se s vámi chci podělit o moje zkušenosti s prací v prototypovacím programu Axure RP Pro. Naopak vy se pak můžete podělit o ty své v komentářích. Nebudu se rozepisovat o základech, kde je jaký panel, k čemu je atd. Soustředím se na věci, které jsou v samotném programu těžko zjistitelné a přijdete na ně buď důkladným procházením zahraničních zdrojů nebo po delší práci se samotným programem. A samozřejmě se to pokusím prokládat konkrétními příklady.

Axure 5.6 × Axure 6.

Určitě víte, že je k dispozici ke stažení nová verze Axure 6 Beta (můžete si ji stáhnout a zdarma s ní pracovat, než bude oficiálně vydána verze 6). Má se tedy smysl učit ještě Axure 5.6? Ano, má. Nová verze pouze rozšiřuje možnosti (například nové funkce k matematickým výrazů, vylepšení stylů atd.) stávající. Většinu věcí tedy musíte znát pro obě verze. Naopak je lepší mít nejdřív dobře zvládnuté základní věci z verze 5.6, protože v rozšířených možnostech verze 6 se potom budete lépe orientovat.

Tipy pro začátek projektu.

Jelikož s Axure už máte zkušenosti, určitě víte co jsou „masters“, „dynamické panely“ a „image map region“. Pokud si je vložíte do stránky, jsou různě zbarvené, jak ukazuje následující obrázek.

Někdy to může být velice rušící, pokud máte na stránce příliš mnoho takovýchto prvků. Není nijak složité jejich zbarvení vypnout: wireframe > show masters. Vypnout můžete i “footnote”, což jsou ty male žluté čísílka u odkazů a dalších interaktivních prvků (s nimi si vypnete i označení poznámek, které můžete psát ke všem prvkům a které se označují stejným způsobem).

V Axure 5.6 nejsou vodící linky („guides“), je zde pouze mřížka, ke které se dají objekty přichytávat. Tady se můžete těšit, v Axure 6 jsou vodící linky a to jak lokální (vytáhnete je tažením z kraje), pro konkrétní stránku, tak i globální, které se zobrazí na všech stránkách (stejným způsobem, jen přitom držte CTRL).

Mřížka – grid system

Pokud jste zvyklý pracovat s mřížkou, je potřeba si kvůli absenci vodících linek pomoci nějak jinak. Znám dva způsoby jak na to:

  1. Mřížku si někde vygenerujete a jako obrázek ji vložíte na pozadí stránky.
  2. Druhým řešením je simulovat mřížku pomocí „image map region“. Výhodou je, že ty nejsou ve vygenerovaných prototypech vidět.

V obou případech se mřížka vloží do „mastru“. Já ji změním ještě na dynamický panel. To mně umožňuje ji kdykoliv „vypnout“ (edit dynamic panel > set hidden) a neruší tak na pozadí. Když ji potřebuji, zase si ji zapnu. Pokud si zvolíte obrázek a zvyknete si při práci a něj, budete stále generovat prototypy s mřížkou na pozadí. Toho se zbavíte jednoduše. Stačí v „masteru“ nastavit, aby se na OnPageLoad tento dynamický panel schoval. Při načtení stránky v prohlížeči tak nebude vidět a vy s nemusíte starat o jeho vypínání.

A ještě jeden tip na závěr: až budete mít tento „master“ s mřížkou hotový, nastavte mu v menu behavior > place in background. Schválně si vyzkoušejte na nějaké stránce s obsahem, co to dělá, když ho tam vložíte. Pokud jste toto chování neznali, ušetří vám to pár vteřinek práce. To že má jinou barvu, to můžete ignorovat (tak se jen odlišuje od ostatních „masters“).

V příštích dvou článcích se budu ještě věnovat různým tipům pro práci s Axure, než se dostanu k proměnným, „masters“ a dynamickým panelům. Tak pokud vás tohle nezajímá, tady je jedna malá ukázka příkladu, ke kterým se snad časem propíšu. Pokud se nudíte a tenhle trik neznáte, můžete koumat jak na to.