KDčko

O projektu

KDčko je mobilní aplikace Knihy Dobrovský. Spojuje knižní komunitu a obchod: čtenář si v ní ukládá knihy do seznamů, poslouchá audioknihy, využívá klubovou kartu a čte a hodnotí knihy i příspěvky z Dobrých zpráv.

Moje role

Na KDčku pracuji jako product designer a UX stratég. Přehrávač audioknih jsem navrhoval samostatně: od cesty, kterou se čtenář k audioknize dostane, přes samotný přehrávač a jeho chování až po poznámky a stavy pro vývoj. Níže je výběr úkolů, na kterých je nejlépe vidět, jak přemýšlím.

Hlavní úkol: audioknihy a nový přehrávač

Pro Knihy Dobrovský vznikl nový přehrávač audioknih přímo v aplikaci KDčko a já ho navrhoval od začátku. Cílem bylo, aby si zákazník audioknihu po koupi pohodlně poslechl v aplikaci a aby se k ní snadno vracel. Cesta navazuje na e-shop, kde zákazníka po nákupu do aplikace posílá tlačítko Přehrát v aplikaci KDčko.

Celý přehrávač jsem navrhl jako mapu chování. Hlavní tok vede z widgetu na domovské stránce do přehrávače a do jeho možností, odkud vedou čtyři cesty: kapitoly, rychlost, časovač a audioknihovna. Volba v bottom sheetu se hned uplatní a okno se zavře. Přehrávač lze sbalit do mini přehrávače, který zůstane nad jakoukoliv obrazovkou.

Přehrávač na domovské stránce

Rozposlouchaná audiokniha je vidět hned po otevření aplikace. Widget na domovské stránce ukazuje obálku, název, čas a ovládání, dá se rozbalit na kapitoly a po nákupu nabídne novou audioknihu. Kdo ho nechce, vypne si ho v nastavení domovské stránky.

Přehrávač a jeho nastavení

Přehrávač má minimalizovanou i plnou podobu. Kliknutím kamkoliv na minimalizovaný přehrávač se otevře plná verze, výjimkou je tlačítko pro zastavení. V nabídce možností jsou kapitoly, přechod do audioknihovny, rychlost přehrávání, časovač vypnutí a detail knihy.

Rychlost a časovač vypnutí se nastavují v bottom sheetu. Po volbě se okno samo zavře a změna se hned uplatní. Aktivní nastavení je vidět u ikony v přehrávači a u časovače se zobrazí přibližná doba do vypnutí. Funkce jsou záměrně na dvou místech, na přehrávači i v nabídce, aby je zákazník našel tam, kde je čeká. Krátká upozornění po pěti sekundách zmizí a zavřít je jde i přejetím.

Kapitoly

Kapitoly mají vlastní seznam. U každé kapitoly je nabídka, kde ji jde stáhnout nebo označit jako přečtenou, a u celé audioknihy jsou rychlé možnosti: přejít do audioknihovny, stáhnout, označit jako přečtené, přidat hodnocení, zobrazit autora nebo sdílet. Když zákazník označí, že má přečteno, kniha se sama vloží do seznamu Mám přečteno.

Audioknihovna

Audioknihovna je domov všech koupených audioknih: nově přidané, naposledy přehrané a další. Zákazník v ní vyhledává podle názvu nebo autora, filtruje podle seznamů (Mám v knihovně, Právě čtu, Chci přečíst, Přečteno, Staženo) a řadí podle názvu, data nákupu nebo posledního přehrání. Knihy lze zobrazit i podle seznamů.

Offline režim a ukončení přehrávání

Bez připojení aplikace zákazníkovi řekne, že je offline, a nabídne stažené audioknihy, aby mohl poslouchat dál. Po obnovení spojení to také oznámí. Do přehrávače i do mini modulu jsem přidal funkci Ukončit přehrávání.

Mapa pro vývoj

Pro vývojáře jsem přehrávač sestavil do jedné propojené mapy: každá obrazovka, každý stav a každý přechod mezi nimi, doplněné poznámkami k chování, například jak se zavírá bottom sheet, jak dlouho zůstane upozornění nebo co se stane po zastavení přehrávání. Takhle vypadá výřez z původního podkladu.

Stejnou mapu jsem překreslil načisto, aby šel celý přehrávač přečíst na první pohled. Najdeš v ní všechny stavy a přechody, od widgetu na domovské stránce přes přehrávač a jeho možnosti až po kapitoly, časovač, rychlost a audioknihovnu.

Design systém

Když jsem na aplikaci začal pracovat, byla v ní nekonzistence a chyběla knihovna komponent, ze které bych mohl při nových návrzích čerpat. Klient souhlasil, že by bylo dobré aplikaci postupně předělat, a tak jsem bokem začal stavět vlastní design systém pro nový vzhled od nuly.

Aby vývojáři rozuměli jazyku designéra, bylo potřeba pracovat s tokenizací a definovat vlastní velikosti písma, mezery a další hodnoty. Tokeny jsou ve Figmě jako proměnné a mají čtyři kolekce: Root s kořenovými hodnotami, Alias, který jim dává význam (barvy tématu, mezery, velikosti, zaoblení), Mapped, který je přiřazuje konkrétním místům (povrch, text, ikona, okraj), a Responsive s velikostmi a řádkováním písma. Dohromady je to přes dvě stě proměnných.

Barvy ve vrstvách

Kořenové tokeny drží surové hodnoty: modrou, zelenou, fialovou, žlutou a stupnice šedé, oranžové, červené a neonově červené. Alias jim dává význam, například primary, secondary, rating, club nebo audio player, a mapped je přiřazuje použití. Díky tomu se barva přehrávače nebo klubu mění na jednom místě a nemusí se hledat po obrazovkách.

Typografie a mezery

Písmo je Open Sans a má tři škály: body, label a header. Mezery a velikosti vycházejí ze základní jednotky 4 px a mají vlastní pojmenovaná měřítka, aby se v návrzích nepoužívaly nahodilé hodnoty.

Komponenty a ikony

Pro nové návrhy vznikla knihovna komponent se stavy: tlačítka ve dvou velikostech a třech typech (primary, outline a textové) se stavy default, disabled a pressed, chipy, přepínací chip, vstupní pole se stavem focus, upozornění, přepínače a další. K tomu sada ikon a komponenty přehrávače, které mají napříč velikostmi stejný tvar a barvu, žlutá varianta je vyhrazená pro ukázku.

Co se nepovedlo a co z toho beru

Kvůli nedostatečné komunikaci se nakonec nestalo, že by vývojáři začali používat stejné komponenty jako já. Dál pracovali s knihovnou ze starého vzhledu aplikace a jen ji upravovali podle změn. Chápu to, ale vývoj jsem nedělal, jen product design, takže jsem na to neměl vliv.

Design systém se dál pomalu vyvíjí. Myslím si, že s AI by se společný jazyk designérů a vývojářů dal sjednotit mnohem rychleji.

Úkol: jedna kniha, víc vydání

Jedna kniha existuje v několika podobách: pevná vazba, e-kniha, audiokniha, různé jazyky i nakladatelé. Čtenář ale knihy ukládá do seznamů, takže aplikace musí vědět, které vydání má na mysli. A přitom nesmí zdržovat toho, komu jde jen o rychlé uložení.

Z toho vzešly čtyři situace, které se musely chovat každá jinak:

• čtenář nemá uložené žádné vydání a chce knihu rychle uložit,

• už nějaké vydání má a chce přidat jiné, třeba audioknihu k e-knize,

• dívá se na vydání, které nemá, ale jiné vydání téže knihy už uložené je,

• má jedno vydání přečtené a jiné jen uložené, a aplikace musí rozhodnout, co ukázat.

První uložení: rychle, s možností změny

Řešení jsem postavil na jednom vzoru, bottom sheetu, který se opakuje na hlavní stránce, v seznamu i na detailu. Čtenář se ho učí jen jednou.

Když nemá uložené žádné vydání, systém předvybere „hlavní“ vydání, na které se právě dívá, a ukáže ho v bloku Vybrané vydání s obálkou, typem a jazykem. Vedle je tlačítko Vybrat vydání/typ pro případ, že chce jiné. Uložení je tak jedno klepnutí, a když chce čtenář něco změnit, má to po ruce, ale nic se mu nevnucuje.

V seznamu knih stejný princip drží stav u každé knihy, takže je hned vidět, co už je uložené a co ne.

Když už něco mám: nejdřív výběr vydání

Jakmile má čtenář u knihy nějaké vydání uložené, je nejpravděpodobnější, že chce přidat jiné. Klepnutí na uložit proto nejdřív otevře seznam všech dostupných vydání a nahoře krátce vysvětlí, že už něco uloženo je a že si klidně může přidat i další.

Každé vydání má obálku, jazykovou vlajku, nakladatele, datum a EAN a jasný stav: Uložit, V knihovně, nebo Vybraná.

Sheet Uložit do seznamu se chová stejně pro každé vydání, ať jde o českou tištěnou knihu, nebo anglickou audioknihu. Zaškrtnout jde víc seznamů najednou.

Detail knihy: vydání a stav na obálce

Na detailu je řádek Dostupné vydání s počtem a aktuálním typem. Otevře stejný seznam vydání, na který je čtenář zvyklý ze slideru, a podle toho, jestli už má něco uložené, se zobrazí buď úvodní vysvětlení, nebo rovnou výpis. Stav knihy je vidět přímo na obálce štítkem, takže není potřeba nikam vstupovat.

Priorita stavů: „Mám přečteno“ vyhrává

Když je jedno z vydání dočtené, na obálce se vždy zobrazí zelený štítek Mám přečteno, i kdyby jiná vydání byla jen uložená. Přečtení je pro čtenáře nejsilnější informace o knize a nemá se schovat za slabší stav.

Upozornění na jiná uložená vydání

Pokud se čtenář dívá na vydání, které nemá uložené, ale u téže knihy už jiná uložená má, sheet ho na to upozorní řádkem Uložené vydání s počtem a výčtem typů. Předejde se tomu, aby si omylem uložil totéž dvakrát, a zároveň je to rychlá orientace v tom, co už je v knihovně.

Klub Knihy Dobrovský v aplikaci

Klub má v aplikaci dvě podoby. Kdo ještě není členem, projde třemi obrazovkami, které ukazují, proč se přidat: body za každý nákup, e-kniha jako dárek každý měsíc, sleva na knižní hity a překvapení k narozeninám a svátku. Člen vidí svou klubovou kartu a u pokladny ji naskenuje. Při prvním otevření ho provede nápověda, jas obrazovky se zvýší na maximum a vždy je vidět jen jedna karta, mezi kartami se přepíná přejetím. Kartu lze přidat do Apple i Google Peněženky a zákazník si může vybrat, jak bude vypadat.

Hodnocení knih a výzvy

Hodnocení knihy je rychlé: hvězdy lze zvolit klepnutím, nebo tažením jako u slideru. Při nula hvězdách se tlačítko pro odeslání aktivuje, až když zákazník napíše recenzi s minimální délkou. Výzvy k hodnocení se objevují v pravou chvíli, po konci ukázky a po dokončení audioknihy. A samotná aplikace se zákazníků ptá vlastním hlasem v první osobě: Užíváte si náš společný čas?

Dobrozprávy

Dobrozprávy jsou feed příspěvků, recenzí a článků. Příspěvek lze označit srdíčkem s malou animací a z feedu se čtenář dostane do detailu příspěvku. Feed počítá i s reklamním formátem.