Little intro
One of my annoyances when I started working at Channel 4 was the 4oD links. My aim was to make them look like buttons (and therefore a visible action for the user), while reducing the amount of 4oD logos around the site. Hence reducing the amount of visual clutter.
Before
After
- Removing the chevrons from the title
- Turning “More” link into a double chevron link
- Turning the 4oD links into actual buttons
- Reducing the visual clutter created by the 4oD logos
Comes in all different sizes and alerts
Interactions
Rules
I also setup some rules for the different sizes.
Large buttons
Use only in conjunction with the main programme promo. The large buttons are there to attract the user to a current episode and therefore using one will ensure the importance of that link.
Medium buttons
For use within repeating lists of information. We don’t want to overload the user with repeating 4oD logos, so I reduced the size and turned it all into text. Using greys helps the buttons sit nicely within any page while the border allows the button to have its own presence.
Small buttons
Use inside programme image to highlight its availability of 4oD. However, this button is different, its proximity reaches outside of its own dimensions. So when a user hovers over the highlight area the button goes to :hover status.
