Tuesday, June 12, 2012

Developing Your Flipped Website: Hypertext


Most social studies teachers applying the flipped model are using some type of online course management system or online platform.  Some "flippers" are even building websites from the ground up.  After using a combination of wikispaces and edmodo, I am embarking upon designing a new site starting from scratch using Dreamweaver.  Luckily, I am enrolled in a class through Teachers College that is helping me with the task, both practically and theoretically.

The next few posts, therefore, will provide some insight into the design of websites as I develop my new site over the summer.   We will start with what most people consider the most basic element of web design: hypertext

We are all familiar with the many perceived advantages of hypertext and hypermedia.  A website can include interactive graphics, links to other sites, videos, poll questions, slideshows, and more.  All of this is aimed at providing the user with a variety of sources in an interactive environment.  There is something to be said, however, with the simplicity of traditional text.

Should web pages be designed based upon 19th century textbooks?  Of course not.  But too often users, particularly those with difficulty with comprehension, have a difficult time navigating through today’s hypermedia.    As DeStefano and LeFevre’s study suggests, the strain that hypermedia places on cognitive load may actually hinder a user’s comprehension of material.  Therefore, I propose the following suggestions when creating hypertext on your flipped class website:
  • Try to avoid excessive embedding of links within a text.  If your goal is to have the reader complete whatever text is composed, consider how these links may lead the reader astray and possibly never back to your original piece. 
  • Visuals and interactive graphics are helpful, but consider placing them at the beginning or end of the article or important textual element.  Similar to the pitfalls of embedding links everywhere, try to limit the degree of distractions.
  • This concept also applies to the sidebars.  If your site is loaded with colorful animated widgets, imagine how that will play out with your "easily distracted" students?  Consider the goal of the webpage and try not to stray too far from whatever it is you are trying to get across. 
  • Get to the point.  As much as Twitter is mistakenly neglected by many educators, it is a great way to practice making your point in a clear and concise way.  Although 140 characters may seem extreme, consider this when designing hypertext.  How long do you actually expect the reader to scroll down the page or keep clicking “next.”  I suggest making your point, and then adding additional links for further reading at the end of the page if necessary.
Of course much of this depends upon the goal of the hypertext and hypermedia that you are creating, but the concepts of limiting distractions and presenting material in a concise manner may help reduce cognitive load and increase reading comprehension among users.