RTHK News

RTHK, the authorised broadcaster from HK, aims at building 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 3 groups of target users: the general public, low vision users and people with limited cellular data. We consequently came up with two viewing modes to meet various needs.

News Dashboard

In multimedia mode, users can access to multimedia content and pin news tiles on the dashboard with ease. It works like shortcuts, pointing users to a news category, article, podcast programme or radio channel. Live info like weather and traffic news are 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, for example, fill 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 who wants to reduce data usage, we put the former users in priority, as they need a particular design to assist with the usage of 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

When it comes to ground, it is further than just implementing voice-over and adjusting font size and colours, but navigation is the part I really concerned with.

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

Wireframe
Detail guidelines on building universal design

Visibility and States

It is a common practice 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 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 the normal vision users, as well as low vision users. Unfortunately, that is only the tip of the iceberg. In fact, the simple mode should also bring values to users that want to save cellular data, said my client. 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 a 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 people will do, as it is the core value of universal design (or accessibility design). However, I believe Android and iOS has its advanced accessibility features to handle it, which developers can make use of instead of creating one and ask users to learn it.

More UI designs on Behance.

Client Radio Television Hong Kong
Role Design Lead (Zensis): UX & UI
Platform iOS and Android Universal Apps