RTHK News

RTHK, Hong Kong’s authorised broadcaster, aspires to create a news platform for all, allowing minorities to contribute equitably.

RTHK continued to deliver news on mobile after the debut of the TV channel app. They identified three target user groups: the general publiclow vision users and people with limited cellular data. We so came up with two viewing modes to fulfil various needs.

News Dashboard

In the multimedia mode, users can easily browse multimedia content and pin news tiles to the dashboard. It functions similarly to a shortcut, directing readers to a news category, article, podcast, or radio channel. At a glance, live information such as weather and traffic news is also displayed. By dragging a tile, users can rearrange, add or remove news tile. Indeed, our team had established some guidelines to improve the interactive transition, such as filling up tiles if the row above is empty.

Tiles
News Dashboard
dashboard_flow_3
Instructions to remove and swap tiles.

Design Universally

The simple mode is for people with low vision and those who wish to reduce their data usage. We prioritised former users since they require a different design to help them utilise 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 more than just implementing voice-over and changing font sizes and colours. Still, navigation is the part of the app I am most concerned with.

Unlike persons with normal vision, low vision users tend to take longer to fumble before making a decision. Therefore, information should be presented directly, linearly, to clue what will happen next when he taps an action button.

Wireframe
Detail guidelines on building universal design

Visibility and States

It is usual practice to hide anything that’s not useful; however, this doesn’t apply to low vision users. There is a button on the homepage to show the currently playing track. It is hidden when no track is playing, but how can a low vision user (or the blind) tell the difference from the screen? No way, no how. Action buttons, especially the primary ones, should remain the same size and position 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

The two reading modes are the distinctive features of the product. According to my client, the simple mode should be valuable to users who want to save cellular data. It is designed for people with normal vision as well as those with low vision. Unfortunately, that is merely the tip of the iceberg. We were taken aback because we assumed the simple mode was only intended for low or impaired vision. Finally, we compromised and tried to identify common ground between the two user groups:

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

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

Normal vision users will comprehend the user interface if vision-impaired users do, as this is a basic concept of universal design (or accessibility design). However, I believe both Android and iOS have excellent accessibility features to deal with 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