TED-Ed
The TED-Ed website functions primarily to showcase original animated video content on a wide variety of worldly topics. The interface is designed in a minimalist, flat design with a very limited color palette so as not to distract from its central purpose: to get site visitors consuming video content. Where TED-Ed succeeds in delivering world-class educational materials, it falls slightly short in two aspects of its design, covered in more detail in the ensuing analysis.
Problem #1
Form element inconsistencies
Flat UI design can lend itself to insufficient distinction between form elements. In the case of TED-Ed, we see inconsistencies with call to action (CTA) buttons on mouse hover. There are no fewer than three different treatments for these CTA buttons on mouse hover: a drop-shadow, a color inversion, and another button that remained unchanged.
The fact that the various CTA buttons behave so differently on hover makes it hard for the user to ascertain the reasoning behind that treatment and leads to a sense of discontinuity in the site’s navigation.
Take the examples below depicting the different hover states.
Learn More - off hover
Learn More - on hover (drop shadow)
Let’s Get Started - off hover
Let’s Get Started - on hover (color inversion)
Customize This Lesson - off hover
Customize This Lesson - on hover (no change)
Solution: Limit CTA button hover states to one or two different conditions.
CTA buttons normally have these traits in common: font style, font size, font color, button color, button size, borders, rounded corners, drop shadow or glow effects, hover state and animations. Limiting the hover states to 1-2 conditions would ensure that neither the design nor the brand guidelines are compromised.
Problem #2
Inaccessibility
The web should be accessible to all. This means that no site’s design should prohibit the comfortable, safe, and effective use and enjoyment by any user. One of the pitfalls of flat UI design is that it can fall flat (so to speak) as it pertains to legibility. As you will see with the examples below, flat UI design ignores the basic rules of color contrast at its own peril. TED. The TED-Ed site is beset by instances of frustratingly low legibility, ranging from moderate to practically indecipherable.
Setting the stage for two-tone, white-on-red design.
When bolded the font appears slightly more legible.
Now look at the examples below of the most egregious color contrast faux pas.
If you’re like me, this required a good squint — it says “Enter a search term or YouTube URL.”
Another eye-strainer.
Going beyond what we can qualitatively perceive as a poor readability experience, it is actually quantifiable. The WCAG (Web Content Accessibility Guidelines) 2.0 AA level contrast requirements dictate a certain threshold for internet accessibility in terms of contrast color. Users must be able to perceive content on the page. The Level AA minimum contrast requirement requires a “visual presentation of text and images of text with a contrast ratio of at least 4.5:1.”
I applied a Colorzilla Chrome extension and WebAim’s contrast checker for the preceding two examples.
Body text #F6F6F6 to Background #FFFFFF = 1.08:1 WCAG AA: FAIL
Body text #D5D5D5 to Background #FFFFFF = 1.46:1 WCAG AA: FAIL
My recommendation would be to obviously darken the fonts here, and for greater site consistency, adopt the same font color used in the main dropdown menus.
Much better.