Redesign zpravodajského portálu ČT24

Případová studie

Helena ŠimkováUX designérka

Důvody redesignu

● Uspořádání výpisu článků není příjemné pro skenování textu a výběr článku● Web není uzpůsobený různým zařízením (existuje jen neplnohodnotná

mobilní verze)● Složitá IA● Zastaralý vizuální design

Cíle redesignu

● Spokojenost uživatelů (sledujeme NPS, hodnocení webu uživateli)● Loajalita - frekvence návštěv, návrat● Angažovanost - délka návštěvy, sdílení

(= Designové cíle, jiné bohužel nebyly stanoveny)

Design tým

● Vedoucí design týmu● 2 UX designéři - jeden z nich... :)● 1 vizuální designér

1. Analýza dat

Web ČT24 hodně lidí navštěvuje i několikrát denně, častěji kvůli živému vysílání

NPS = -1

● Analýza dat z analytických nástrojů● Tvorba a vyhodnocování dotazníků

Moje role při analýze dat

2. Výzkum s redaktory

● Cíle○ Poznat, jak vzniká článek a probíhá publikace ○ Zjistit, jak redaktoři pracují s redakčním systémem → s cílem navrhnout efektivní redakční

systém

● Metoda○ Pozorování a rozhovory○ 10 respondentů

■ Segmentovaní dle typu článků, které mají na starosti (politika, kultura, fotočlánky)

3. Výzkum s uživateli

● Cíle○ Poznat, jak lidé pracují se zpravodajstvím a jakou roli hraje v jejich životě○ Zjistit, jak lidé používají zpravodajské weby○ Zjistit, jaké problémy mají lidé s webem ČT24○ Prověřit inovativní zahraniční koncepty

● Metoda○ 2 fáze hloubkových rozhovorů s reálnými uživateli (10 + 18 respondentů)

■ segmentováni primárně dle četnosti s jakou sledují zpravodajství a podle toho, kde sledují zpravodajství

■ sociodemo struktura odpovídala struktuře návštěvníků webu ČT24

Lidi nezajímají všechny zprávy

Typický čtenář se zajímá o domácí zprávy a několik dalších rubrik, například domácí, ekonomika. Oblíbené rubriky (obvykle 2 až 3) si na webu proklikává.

Zprávy v TV nebo živé vysílání na webu ČT24 lidé často sledují během jiné činnosti

ČT24.cz je lidmi vnímán jako web kanálu ČT24

Není vnímaný jako samostatný zpravodajský server. Někteří lidé vůbec netuší, že kanál ČT24 má svůj web.

Text článku je důležitý

Čtení textu je efektivnější než sledování videa – lze snadno přeskakovat nezajímavé pasáže, rychle text skenovat očima. Pro sledování videa musí být také vhodné prostředí.

Pokud článek obsahuje text i video, lidé dávají přednost textu, zejména pokud očekávají, že video obsahuje stejné informace jako text.

● Příprava scénářů● Moderování sezení● Pozorování a zapisování poznatků z rozhovorů● Analýza zjištění

Moje role při výzkumu

Michal: “Zprávy mě baví. Chci vědět o všem, co se děje”

Markéta: “Chci zůstat v obraze, nemám teď na sledování zpráv moc čas”

Honza: “Chci vědět jen to hlavní, abych nebyl mimo.”

Lada: “Zprávy mě moc nezajímají, sleduji jen mimořádné události, které mne zasáhnou”

4. Persony

● Analýza dat pro tvorbu person● Sestavení person● Prezentace vedení a redakci

5. Informační architektura

Hlavní principy:

● Článek je hlavní obsahovou jednotkou● Rozdělení na rubriky je důležité, ale není primární (na HP jeden tok)● Obsah třídíme podle témat (rubriky, štítky, události), ne podle formy

6. Prototypování

● Desítky skic● Interaktivní prototyp● Několik kol uživatelských testování

○ Menší problémy opravovány hned mezi jednotlivými sezeními, větší problémy mezi testováními

○ Testování různých velikostí rozlišení na různých zařízeních → prototypy jsou responzivní

Atomický design

● Udržení jednotnosti designu● Snazší správa a změny v designu i kódu

Článek

● Sestavuje se z obsahových molekul (vytvořeno asi 25 druhů)● Některé molekuly mají pevnou pozici (nadpis, perex), většina z nich je ale variabilní (fotogalerie, citát…)● Každá molekula má čtyři verze - přes celou šířku stránky, na šířku textu, na šířku textu sbalená pod

odkaz a postranní molekula (využití podle důležitosti obsahu)

Výpis článků

● Podporuje čitelnost a skenovatelnost obrázků a nadpisů článků● Jednotvárnost toku článků narušují vizuálně odlišené články - obsahující zajímavé fotografie, rozhovory

apod. ● Pro uživatele, kteří nechodí na web několikrát denně, ale chtějí mít přehled, zobrazujeme souhrn

nejzajímavějších zpráv za uplynulý den

Živé vysílání

Okno s živým vysíláním TV kanálu ČT24 je dostupné na jakékoli stránce a zapnutím živého vysílání člověk netratí možnost sledovat obsah webu

Významné události

Významné události mají vlastní rubriku obohacenou o obsahové prvky (mapa, video…)

● Tvorba informační architektury● Skicování● Prototypování v Axure● Uživatelské testování na prototypu● Komunikace s vedením a redakcí

7. Redakční systém(Úprava standardní administrace Drupalu → cíl efektivní tvorba a publikace článků redaktory)

● Skicy a prototypování redakčního systému● Prezentování a diskuse s redakcí

8. Grafický design

● Dohled nad zachováním hlavních principů designu

● Diskuse s vizuálním designérem

Mobilní aplikace

● Prototypování mobilní aplikace pro Android a iOS

● Uživatelské testování● Dohled nad grafickým designem a

implementací

Aplikace HbbTV

● Prototypování aplikace pro HbbTV● Uživatelské testování● Dohled nad grafickým designem a

implementací

Naplnění cílůWeb ct24.cz, červen 2016