RTHK News

RTHK, the authorised broadcaster from HK, aims to build a news platform for all and enables the minorities to participate equally.

After the launch of the TV channel app, RTHK continued to deliver news on mobile. They defined three target user groups: the publiclow vision users and people with limited cellular data. We so came up with two viewing modes to meet various needs.

News Dashboard

In multimedia mode, users can access multimedia content and pin news tiles on the dashboard with ease. It works like shortcuts, pointing users to a news category, article, podcast, or radio channel. Live info like weather and traffic news is also shown at a glance. Users can rearrange, add or remove news tile by dragging a tile. Indeed our team had set some rules to make the interaction looks smoother, such as filling up with tiles if the row above is empty.

Tiles
News Dashboard
dashboard_flow_3
Instructions to remove and swap tiles.

Design Universally

Simple mode is for both low vision users and those who want to reduce data usage. We put the former users in priority, as they need a particular design to assist with using a device than the other. Therefore the design aims to meet the web accessibility standard, WCAG 2.0 (Level AA), to make it usable for these people.

rthk_ref_govukLinear Layout

It is further than just implementing voice-over and adjusting font size and colours. Still, navigation is the part I concerned about much.

Unlike people with normal vision, low vision users usually take a longer time to fumble before deciding. Therefore, information should be placed in a direct, linear way to clue what will happen next when he taps an action button.

Wireframe
Detail guidelines on building universal design

Visibility and States

It is common to hide anything that’s not useful, but it doesn’t apply to low vision users. We have a button on the homepage to show the current playing track. It is hidden when no track is playing, but how can a low vision user (or the blinded) spot the difference from the screen? No, of course not. Action buttons, especially the primary ones, should remain its size and position unchanged to help these users learn the app, get used to the navigation and remember the placement.

Conversion of information
Transformation of the homepage. Player button on the top right

Afterword

Having two reading modes is one of the distinctive features of the product. It targets normal vision users, as well as low vision users. Unfortunately, that is only the tip of the iceberg. My client said the simple mode should also bring values to users who want to save cellular data. We are so shocked because we assumed the simple mode is designed for low vision users or the blinded. At last, we compromised and tried to find commons from the two user groups:

Would linear navigation and persistent placement of components work with people with normal vision?

It was my doubt at first, but the answer is yes.

If vision-impaired users understand the user interface, normal vision users will do, as it is the core value of universal design (or accessibility design). However, I believe Android and iOS have advanced accessibility features to handle it. Developers can use it instead of creating one and asking users to learn it.

More UI designs on Behance.

ClientRadio Television Hong Kong
RoleDesign Lead (Zensis): UX & UI
PlatformiOS and Android Universal Apps