MET:Effective Web Design for a Teenage Audience

From UBC Wiki

This page originally authored by Mike Sherman (2008).

In order to create effective, engaging, and pedagogically sound content, designers of online learning must think carefully about the strengths and weaknesses of the online environment and plan accordingly. Designers must also be cognizant of the fact that different age groups have different interests, skillsets, and attitudes and that these must be carefully considered during the design process. A user-centred design [1], in which careful attention has been paid to the previous points, is essential.

What follows are some basic principles for effective web design for a teenage audience. These principles draw heavily from cognitive learning theory, which states, for our purposes here, that learners process information through different channels such as auditory, and visual. Too much information at once in any channel will overload the system. When designing websites for teens designers should keep cognitive learning theory in mind.

Visual Design

  • Make the site attractive but don't get carried away: Teenagers are less impressed by bright colours, graphics, and blinky things than are younger children, so avoid the temptation to make your design too flashy. The design needs to be appealing but must not overshadow or diminish the importance of the content.
  • Ensure there is adequate white space: It is very important to have the right balance of text and white space on the screen. Too much text and it is hard to process the information and identify what is most important. White space also provides some visual relief on an otherwise busy and crowded page.
  • Include supporting visuals where appropriate: Teenagers are far less tolerant of text-heavy pages than adults. Well designed sites for teens will include visuals to break up the text and make the reading less daunting. Visuals can replace often lengthy and convoluted descriptions of processes, procedures, and the like. According to cognitive theory, though, there is the risk that text and visuals can overload the visual channel with too much simultaneous information (Mayer, 2001). Consider substituting narration for either the text or the visuals to distribute the information over the auditory and visual channels.
  • Avoid extraneous visuals: Extraneous visuals take your attention away from the content and do not help with learning (Mayer, Heiser, & Lonn, 2001). Be sure the visuals are relevant and representative of the content and not merely decorative.
  • Ensure the visuals and the text are adjacent: Research shows that people learn better when associated words and visuals are close to each other on the page (Mayer, 2001, p.81). Try to avoid scrolling screens when text and visuals need to be shown together.

Interaction Design

  • Use a standard graphical user interface: Stick with familiar interface features like scrollbars with up and down arrows, windows, and pull down menus. Your site will be more usable if students can easily recognize and use its key features.
  • Use meaningful icons: Icons should be easily identifiable with clear functions. Users should clearly understand what will happen if they select any icon in the design. Use text if you can't find a meaningful icon.
  • Make it as intuitive as possible: Design your interface to require as few instructions as possible. The fewer the instructions the clearer the interaction design, and the more quickly and effectively the user can interact with your site.

Navigation Design

  • Have a clear and comprehensive navigation structure at the top level: As mentioned before, teenagers can be impatient web surfers. If they cannot see at the outset of the site how the content is structured and where they will find certain information, they will move quickly to the next site. Keep them on your site by providing a clear navigation structure with detailed menus that are accessible at any time.
  • Follow the two-click rule: Teenagers get easily frustrated with sites that are convoluted. Design your site so the user is never more than two clicks away from any page.
  • Minimize scrolling: Teenagers are less likely than adults to scroll web pages. As a result, try to chunk your content into shorter, separate pages. If you must include scrolling, ensure they most important information is above the "fold".
  • Minimize the use of multiple windows: Opening a new window with additional content can be dangerous, especially if the screen is maximized (covers the main window). Teens may not understand how to get back to where they started. Avoid the where am I? scenario by minimizing the number of multiple windows.
  • Keep it consistent: All pages should have the same design elements and navigation structure. Doing so will reduce the chance of user confusion and frustration.


  • Keep it low tech: Not everyone has broadband Internet and state of the art computers. Keep your multimedia (sound, video, animations, etc.) as low tech as possible so those users with more "primitive" technology are not excluded from experiencing your multimedia content.
  • Keep it simple: In an age of cutting edge technology, it's easy to get carried away. Avoid throwing in every bell and whistle. Keep it simple and remember it's the message that's ultimately the most important, not the presentation method. Ubertechnology may also frustrate users when it doesn't work properly.
  • Make it quick: Teen users are less patient than adults. Multimedia clips need to be short and load quickly.
  • Incorporate sound: Sound is an effective way to deliver content in a different modality. Sound helps lessen the cognitive load of just reading text. Sound should complement, not replicate, what appears in print. This is a special example of Mayer's Redundancy Principle, (2001, p. 184) which states that identical content delivered in different modalities should be avoided.
  • Avoid extraneous sounds: Avoid background music and environmental sounds in your multimedia presentations, especially if there is a lot of information being presented and the user will have heavy cognitive demands (Moreno & Mayer, 2000).


A Cognitive Theory of Multimedia Learning: Implications for Design Principles

Clark, R.C., and Mayer, R.E. (2003). e-learning and the science of instruction. Pfeiffer.

Connect for Kids--screenshot with rollovers describing the features of the site that are well designed for teens

Mayer, R. E. (2001). Multimedia learning. New York: Cambridge University Press.

Mayer, R.E., Heiser, J, and Lonn, S. (2001). Cognitive constraints on multimedia learning: when presenting more material results in less understanding. Journal of Educational Psychology, 93, 187-198.

Moreno, R., and Mayer, R.E. (2000). A coherence effect in multimedia learning: The case for minimizing irrelevant sounds in the design of multimedia instructional messages. Journal of Educational Psychology, 92, 117-125.

Shaping Web Usability: Interaction Design in Context,M1

Teenagers on the Web: 61 Guidelines for Creating Compelling Websites for Teens

What Websites Do to Turn on Teens

See also

Cognitive Load [2]

Interaction Design [3]

Multimedia Learning [4]

Usability [5]

User-Centred Design [6]