8 things we can learn about user interface design from Ted.com

Web Design Professional Clinic: TED

According to Alexa, the well-known “ideas worth spreading” Ted.com brand is ranked #650 in the U.S. and 860 globally. The site has a bounce rate of just under 50%, gets 2.61 pages views per visitor who spend an average of 4:10 minutes on the site. While bounce rates can be of concern, the fact that Ted.com is ranked in the top 1000 in terms of traffic means high value content is outweighing concerns about engagement.

1. Visuals are generally more engaging than text.

vortex-blog-TED-interface-design-5

Above: TED.com Home Page

Imagine if Ted.com presented a directory style text listing of their talks without any visuals. Visitors would have to work hard to find content of interest. Instead, the design successfully uses an editorial-style portrait combined with its “Ted Talk” title to provide an engaging graphic.  The photography is shot from the perspective of the audience, and so there is a feeling that you are at a conference and the talks are happening in real-time. The design uses a variety of photo sizes which moves the visitors eye around the page, and grayed-out images on the right hand side of the page hint at what’s to come.

TIP: Use visuals to pull visitors into subject matter. Consider using scale and dramatic typography to create drama and interest.

2. Interface Design Should Reflect Brand Essence

Ted.com is both an online library of Ted Talks as well as a marketing tool to engage people with the Ted brand. When the Ted conferences were first launched, attending one was considered a privilege. The attendees had a chance to hear about big ideas firsthand. Even though the talks are now accessible to virtually everyone, the unique identity and accomplishments of the Ted speakers is right up front. The website design reflects a sense that the value of the content is very high. Aside from hearing it live before the masses, Ted.com’s design ensures that there’s little difference in the experience, whether you attend a conference or watch online.

From the home page, visitors can “mouse-over” a talk they may want to learn more about and a pop-up window provides a brief synopsis. If the viewer is interested, they simply click and are taken to that specific talk. This effect is helpful because it provides the visitor a great deal of information without having to scroll or navigate off the page.

TIP: Use website + graphic design to create a presence that captures the essence of your brand. The essence is what both you, your prospects and customers believe it is. If you’re not sure how your customers view your brand, research buyer personas.

3. Well-Indexed Content is More Valuable Content

Ted.com goes to great effort to index its content with a number of factors such as: date; popularity; keywords; topic; and speaker. The organization of content help users drill down into topics quickly and easily.

Right below the home page navbar is a filtering tool which lets visitors sort talks by a variety of factors. This approach is customer-oriented and reflects the divergent preferences of visitors.

TIP: If you have a site with a lot of content, be sure to index content with keywords, topics and other means that will provide visitors easy access. The easier you make it to find valuable content, the more likely it will be read.

4. Navigation Menus Can Vary in Size

vortex-blog-TED-interface-design-4

Above: Ted.com sub-menu

Larger sub-menus are gaining popularity in website + interface design. Instead of serving solely as links to content, larger sub navs can offer explanations, or engaging offers to highlight content without making it always visible.

TIP: Consider using larger sub-menus when you need to call attention to content without making it a main design feature of the page.

vortex-blog-TED-interface-design-6

Above: Ted Talk specific page

5. Content Should Guide Page Layout

Once a visitor selects a Ted Talk to learn more about, they arrive at a page that gives details of the specific talk. Title, date, language versions available, and summary. Visually, a frame from the talk graphically anchors the page. Without the need to scroll, you can see how many times the talk was viewed and if you like share using popular social media links.

As you navigate down the page, you have access to the speaker’s bio, additional related talks and even register or login to participate in discussions about each talk.

The use of white space between content elements is generous, so as you scroll beyond one content area, another appears without a visual connection to the previous. The absence of distractions makes it easier for visitors to concentrate (and appreciate) what they are reading.

TIP: Make your content easy to digest by placing related topics in close proximity to each other. Instead of crowding content on the page, use graphic + web design principles of white space, borders and padding to focus attention on the content people have in front of them.

6. Reporting Trends Creates Trends

As visitors explore the site and Ted Talks, they’re invited to rate, download, share, or favorite virtually everything. This approach helps spread the word, and allows the visitor to take an active role in Ted’s mission of spreading ideas. Ultimately, Ted.com is the beneficiary by way of traffic to the site, but visitors can feel good in playing their own part in the advancement of ideas.

TIP: Consider creating a sense of community by adding ratings systems, forums or other means of connecting visitors to one another on your site.

7. Convenience Builds Loyalty

vortex-blog-TED-interface-design-2

Above: Ted.com download dialogue screen

Ted.com recognizes that each audience may prefer to have content delivered differently. Instead of forcing one to download a reader or special app, visitors choose the type of download they want. In addition to frequently updated content, this convenience also keeps visitors coming back.

TIP: Make it easy for visitors to download content you share in formats that suit the devices users prefer. If you have to make a choice, conduct a survey with a sub-group of prospects or customers to learn which are the most preferred file types.

8. Community Builds Loyalty

vortex-blog-TED-interface-design-1

Above: Ted.com Discussion forum

The internet has made it easy to connect with people across the world and share ideas. Ted’s discussion forums are a great way to encourage people to stay on the site and learn more. Registering to participate in discussions also helps Ted create a list of interested visitors to build relationships with.

Being able to participate in a conversation through their forum creates a sense of community, and visitors will come back again and again to enjoy the benefits of these connections.

TIP: If your product or service suits itself to having a community, consider creating one where users can connect with each other to exchange ideas about your brand. The content can help build loyalty and provide valuable unfiltered insight about your goals and plans.

Next Steps:

Perform your own design audits of high-ranking websites. See if you can apply the same effective techniques and approaches to your own design work.

When you’re ready to embark on an online design (or redesign) project, make sure you understand the brand’s buyer personas. When your brand online content and design aligns with accurate buyer persona data, you’ll be on your way to improving your site ranking and other important analytical data that translates to achieving business goals.

Need Help Planning Your Creative Strategy or User Interface Design?

Please give us a call, or search for a web + graphic design firm who can assist you with the process. One important factor in the selection process should be whether a creative firm can articulate your product’s key advantages from the customer’s point of view. A demonstration of creative is not as important as being able to interpret your input and translate it into a clear statement of strategy, communication goals, and key performance indicators.

*Copyright © Ted Conferences LLC † As of 10.5.14
About the author: Tom Weinkle is a founder and partner of Vortex Communications, a graphic and website design firm who offers graphic and WordPress web design, build, troubleshooting and training services along with search optimization, social media and inbound marketing services. Based in Miami, Florida, Tom has over 25 years of experience in visual communications for the healthcare, medical, law, accounting, software, financial services and banking industries.

Scroll to Top