Redesign zpravodajského portálu ČT24
-
Upload
helena-simkova -
Category
Documents
-
view
9 -
download
3
Transcript of Redesign zpravodajského portálu ČT24
![Page 1: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/1.jpg)
Redesign zpravodajského portálu ČT24
Případová studie
Helena ŠimkováUX designérka
![Page 2: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/2.jpg)
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
![Page 3: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/3.jpg)
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)
![Page 4: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/4.jpg)
Design tým
● Vedoucí design týmu● 2 UX designéři - jeden z nich... :)● 1 vizuální designér
![Page 5: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/5.jpg)
1. Analýza dat
![Page 6: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/6.jpg)
Web ČT24 hodně lidí navštěvuje i několikrát denně, častěji kvůli živému vysílání
![Page 7: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/7.jpg)
NPS = -1
![Page 8: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/8.jpg)
● Analýza dat z analytických nástrojů● Tvorba a vyhodnocování dotazníků
Moje role při analýze dat
![Page 9: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/9.jpg)
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)
![Page 10: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/10.jpg)
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
![Page 11: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/11.jpg)
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á.
![Page 12: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/12.jpg)
Zprávy v TV nebo živé vysílání na webu ČT24 lidé často sledují během jiné činnosti
![Page 13: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/13.jpg)
Č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.
![Page 14: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/14.jpg)
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.
![Page 15: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/15.jpg)
● 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
![Page 16: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/16.jpg)
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
![Page 17: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/17.jpg)
● Analýza dat pro tvorbu person● Sestavení person● Prezentace vedení a redakci
![Page 18: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/18.jpg)
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
![Page 19: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/19.jpg)
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í
![Page 20: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/20.jpg)
Atomický design
● Udržení jednotnosti designu● Snazší správa a změny v designu i kódu
![Page 21: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/21.jpg)
Č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)
![Page 22: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/22.jpg)
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
![Page 23: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/23.jpg)
Ž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
![Page 24: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/24.jpg)
Významné události
Významné události mají vlastní rubriku obohacenou o obsahové prvky (mapa, video…)
![Page 25: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/25.jpg)
● Tvorba informační architektury● Skicování● Prototypování v Axure● Uživatelské testování na prototypu● Komunikace s vedením a redakcí
![Page 26: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/26.jpg)
7. Redakční systém(Úprava standardní administrace Drupalu → cíl efektivní tvorba a publikace článků redaktory)
![Page 27: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/27.jpg)
● Skicy a prototypování redakčního systému● Prezentování a diskuse s redakcí
![Page 28: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/28.jpg)
8. Grafický design
![Page 29: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/29.jpg)
● Dohled nad zachováním hlavních principů designu
● Diskuse s vizuálním designérem
![Page 30: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/30.jpg)
Mobilní aplikace
![Page 31: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/31.jpg)
● Prototypování mobilní aplikace pro Android a iOS
● Uživatelské testování● Dohled nad grafickým designem a
implementací
![Page 32: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/32.jpg)
Aplikace HbbTV
![Page 33: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/33.jpg)
● Prototypování aplikace pro HbbTV● Uživatelské testování● Dohled nad grafickým designem a
implementací
![Page 34: Redesign zpravodajského portálu ČT24](https://reader031.fdocument.pub/reader031/viewer/2022021813/58870d521a28abf2228b56bb/html5/thumbnails/34.jpg)
Naplnění cílůWeb ct24.cz, červen 2016