Introduction
The Channel 4 programme pages required some updates to help push 4oD content to the user, quicker and easier. Aided with some usability tests concluded by amberlight, we produced some wireframes to convey what was needed to reduce a user’s task of either, finding the right show [precise decision-making] or browsing to a favourite genre [emotional decision-making].
From there on, I took what I learnt from 4Beauty and began to think about the Channel 4 style on a global scale. How can we create beautiful functional elements that can be used throughout different Channel 4 sites? A vital design step, that will eventually help our users understand how our sites work without comprising on design and style.
Grid view [quick]
Five programmes per row.
- Less copy
- More Visual
- 4oD on/off
List view [familiar & detailed]
Programmes in the old style New Concept style.
- Synopsis
- Broadcast info
- 4oD button on/soon/off
Filter column
Putting the options on the right is like giving someone their money before giving back their card. So nicely forcing users to scan the left side before trying to get to the content. I added “View by” header to help explain what the column does; it also allows the design to align itself to the content. If a letter has no programmes it will be dimmed out, while adding a soft inner-shadow so it looks hollowed out. It cannot be clicked but has a hover state.
Emotional searching – view by category
Help find specific programmes by a certain genre. Most popular categories at the top. Channels visually spilt. Show more button reveals the other categories, which makes less clutter and in general will increased positivity.
Precise searching – view by letter
Help find specific programmes with beginning with a letter.
Accessibility
Adding more information into the page Using <abbr> tag for [S], [AD], etc. keys “Abbreviations can give useful information to browsers, spellcheckers, screen readers, translation systems and search-engines.”
Buttons
Bring realism to buttons and get better user feedback.
Icons
Options for ordering and viewing have been turned into icons to increase response and look user friendly.
Mouse over look – darkens the icon and border. On mouse over – a tooltip appears, highlighting the icon’s action. Tooltips that highlight functionality appear left bottom / top of the mouse cursor.
Coming soon
Provides the user with a teaser of what to look forward to. Sits above the the main content on the categories pages. This version sits within the content. Close button slides up the component.
