Jedním z letošních zadání bylo vytvořit pro portál iRozhlas sérii nových prvků. Mezi nimi například řešení pro audio přehrávač nebo redesign karet autorů.

Autorské karty jsem pojala trochu s předskokem — jednou z plánovaných featur na portále je možnost přihlašování a s ním spojená customizace. Pokud by se tak čtenáři líbil styl, jakým je článek napsaný, mohl by si rychle ověřit, zda se mu oplatí daného autora sledovat, a to pomocí tagů rubrik, do nichž přispívá autor nejčastěji. Na to by pak navazovala sekve Od vašich autorů, která by se návštěvníkovi propisovala na hlavní stránce zpravodajství.

Audioplayer jsem se pokusila zpracoval v co nejmenší možné formě, aby nepřekážel dalšímu obsahu a byl dobře skladný. Umístila jsem jej totiž do záhlaví, kde bude vždy viditelný a schová se do protoru, který tam již je vyčleněný. Frontu si čtenář může prohlédnout on-demand.
V případě, že se uživatel nachází v prostorách Longread článků, player je připnutá přímo do horního pásu s menu. V něm se také nachází prvky přizpůsobení — velikost textu, přepnutí do tmaveho režimu apod.
Úprava stávajícího UX řešení

Konkrétně čtením v režimu Longreadu jsem se zabávala více. Jako jeden z problémů, které jsem z UX hlediska identifikovala, byl nepřehledný průchod webem. Uživatel zdánlivě náhodně a bez důvodu přechází do jiných zobrazovacích režimů, a to například v případě Longreadů, vyhledávání (které přepne di vyhledávání v rozhraní portálu Českého rozhlasu), galerie a pravděpodobně také dalších.

V případě Longreadů jsem tedy přidala do záhlaví hlavičku iRozhlas Témata, v nichž by se podobné rozcestníky mohly srdužovat. Hlavní článek by byl jasně označen jako rozcestník a jakýkoliv další článek na toto téma otevřený z něj, by sdílel stejnou šablonu a režim zobrazení. Ve stránce rozcestníku hned pod fotkou a základními údaji o čtení nebo poslechu může uživatel najít nejnovější články pro dané téma a úvodní informace do problematiky. V případě běžného článku na dané téma pod šablonovou hlavičkou následuje samotné tělo článku. V tomto režimu čtení se také primárně jako související texty odkazují články ze stejného sborníku a pouze v patičce například zprávy z domova, nebo sekce Nepřehlédněte.
I do těchto longreadů jsem zakomponovala prostor pro drobkovou navigaci, která uživateli lépe pomůže pochopit strukturu portálu.

V tomto ohledu jsem také restrukturovala menu a rozložení položek v něm. Některé jsem uméstila přímo do layoutu stránky (velikost písma, tmavý mód), jiné jsem uklidila do přehlednějšího zobrazení celostránkového menu. Zredesignovala jsem také patičku.

Celkově jsem řešení postavila na trojsloupcovém layoutu, kdy dva ze tří sloupců jsou v článku věnovány textovému poli a třetí umožňuje přidávat rozšiřující obsah, navazující články nebo audiostopy.

V přídě klasických rozcestníkových stránek typu rubriky, trojsloupcové řešení umožňuje používat rozličné elementy a typy obsahu, zatímco si stále udržuje strukturu a přehlednost.


Odkaz na prototyp
zde