UX/UI design produktů a aplikací v Praze

Nejdřív produkt, potom obrazovky

Většina práce, která se prodává jako „UI design“, začíná na špatném místě: někdo otevře Figmu a posouvá obdélníky, dokud obrazovka nevypadá hezky. Obrazovka vypadá hezky. Pak si skutečný člověk chce rezervovat, zaregistrovat se nebo dokončit objednávku, narazí na krok, se kterým nikdo nepočítal, a odejde. Problém nikdy nebyly pixely, ale tok, který je pod nimi.

My postupujeme ve správném pořadí. Než vůbec vznikne rozhraní, zmapujeme, co se vaši uživatelé opravdu snaží udělat, jakou nejkratší cestou se k tomu dostanou a na kterých místech se ta cesta může zlomit. Teprve když tok drží, navrhujeme obrazovky, které ho nesou. Je to stejný princip, na kterém stojí i naše tvorba webových stránek: nejdřív struktura, potom povrch, protože povrch je jen tak dobrý jako přemýšlení pod ním.

Co u nás UX/UI design zahrnuje

• Uživatelské toky a informační architektura. Zmapujeme skutečné cesty produktem: tu ideální i ty nepříjemné (chyby, prázdné stavy, uživatele, který přijde uprostřed úkolu z odkazu v e-mailu). Pokud nějaký krok nemá důvod existovat, jde pryč.
• Wireframy pro desktop i mobil, komponované zvlášť. Telefon není zmenšený desktop. Rozvrhneme obojí, protože většina uživatelů se rozhoduje na malé obrazovce a stísněné rozložení vás stojí konverzi.
• Interaktivní prototyp. Proklikávací prototyp ve Figmě, kterým projdete a otestujete ho na skutečných lidech dávno předtím, než někdo napíše kód, jehož změna je drahá.
• Design systém, ne hromada obrazovek. Znovupoužitelné komponenty s každým definovaným stavem (výchozí, po najetí, ve fokusu, neaktivní, chyba, prázdný stav, načítání) a k tomu tokeny pro odsazení a barvy. Právě z téhle části vývojáři reálně staví.

Proč vám design systém šetří peníze

Hezká maketa jedné obrazovky se dobře obdivuje a draho staví, protože neodpovídá na jedinou otázku, kterou vývojář dostane u druhé obrazovky. Jak vypadá tlačítko během načítání? Co se ukáže, když je seznam prázdný? Jak zní chybová hláška? Bez odpovědí si je vývojář vymýšlí jednu po druhé, pod termínem, a produkt se obrazovku po obrazovce rozjíždí.

Design systém odpoví na tyhle otázky jednou. Každá komponenta přichází se svými stavy a pravidly, takže postavit čtyřicátou obrazovku je stejně předvídatelné jako postavit druhou, a nový vývojář za půl roku zdědí systém, ne hádanku. Za přemýšlení zaplatíte jednou a používáte ho po celou životnost produktu. Proto se UX/UI přirozeně potkává s naším vývojem webu: stejná specifikace, která vede design, vede i stavbu.

Předání, se kterým vývojáři opravdu umí pracovat

Místo, kde projekty potichu ztrácejí čas, je předání, tedy okamžik, kdy se z designu stává kód. Zavíráme ho vědomě. Každá komponenta je anotovaná: přesné odsazení, breakpointy, chování interakce a co se stane po klepnutí, najetí i při chybě. Nic důležitého nenecháváme jako „samozřejmé“, protože samozřejmé pro designéra a samozřejmé pro vývojáře v pět odpoledne nejsou totéž.

Výsledkem je soubor, který vývojář otevře a staví z něj přímo. Proto to, co předáme, obvykle nasazujeme přesně v podobě, kterou jsme vám ukázali, ne v jejím hrubém přiblížení.

Použitelnost řešíme dřív, než se píše kód

Testování použitelnosti nezní jako položka, kterou byste chtěli platit, dokud si nespočítáte, kolik stojí předělat hotovou funkci, kterou lidé nepochopili. Odhalit nedorozumění na prototypu je otázka jednoho odpoledne. Odhalit ho až v ostrém provozu je otázka nové iterace, dalšího kola vývoje a zákazníků, kteří mezitím odešli.

Proto u větších produktů posadíme před prototyp pár skutečných lidí a sledujeme, kde zaváhají. Nepotřebujeme laboratoř ani stovky respondentů: pět až osm lidí u reálných úkolů spolehlivě ukáže, kde návrh drhne. U menších webů vystačíme s heuristickou revizí a s daty z vaší stávající verze. Vždy doporučíme úroveň, která dává smysl vzhledem k rozpočtu i riziku.

Kolik UX/UI design stojí

UX/UI projekty začínají na 30 000 Kč za sevřený produkt: toky, wireframy, proklikávací prototyp a základní design systém pro jednoúčelovou aplikaci nebo menší sadu klíčových obrazovek. Rozsáhlejší produkty s mnoha stavy, rolemi a hraničními situacemi vycházejí výš, přičemž cenu žene rozsah, ne dekorace: víc obrazovek, víc stavů, víc toků. Každá cena je pevná a dostanete ji písemně před začátkem práce. Kompletní přehled najdete v našem ceníku.

Pro koho to je

Startupy, které tvoří první produkt, týmy přestavující rozhraní, jež časem zarostlo, a firmy, jejichž vývojáři jsou zdatní, ale potřebují jasné zadání, proti kterému mohou stavět. Pokud zároveň spouštíte marketingový web, v portfoliu uvidíte, jak přistupujeme k různým oborům, a mějte na paměti, že čisté UX podporuje i SEO: strukturu, které rozumí uživatel, obvykle chápe i vyhledávač.

Nejste si jistí, jestli potřebujete plné UX/UI, nebo jen dobře navržený web? Popište svůj produkt pár větami přes náš kontaktní formulář a do 24 hodin odpovíme s konkrétním doporučením a pevnou cenou. Včetně upřímného „tohle nepotřebujete“, když to tak je.