Module+2.1+Scavenger+Hunt+and+Analysis



Coursework for Ed Tech 709, Applications of Learning Principles, Spring Semester, 2011 Marianne Rose

= Module 2.1 Scavenger Hunt and Analysis =

Table of Contents
A. Web Screen Example of Violations B. Web Screen Example of Appropriate Applications



**Web Screen Source**
The following screen is the home page for the U.S. Internal Revenue Service (www.irs.gov) as of March 1, 2011.

**Violations**
__Purpose statement:__ Space is needed to add a visual element that contains a summary notation to clarify the overall purpose of the site. Such a statement could tie the varied visual elements together conceptually for learners and could establish a hierarchy of visual elements for the page design.

__Alignment, color, and symmetrical layout:__ The predictable vertical alignment of visual elements usually gives order to the overall design of a site, but in this case it adds to the monotony. The text color is mainly limited to blue that seems to flatten the screen. A little green and various colors show up in isolated places (i.e., slides, graphic links) but don't seem in harmony with the overall page. It is a static and boring screen, with a traditional symmetrical layout consisting of one wide column in the middle and a narrow column on each side.

__Graphically lead the learner's eye through the content:__ Although the color slides located in the center column are distinctive and serve as a focal point, there's no clear graphic strategy that leads the learner's eye through a planned visual hierarchy of elements on the screen.

__Contrast:__ Each grouping displays the list of links against a white background (higher contrast). This higher contrast of the text links causes them to draw too much attention away from the headings. The heading of each list shows in blue displayed over a blue rectangle shape (lower contrast). The shape looks a little like a button but the darker bottom edge covers the bottom part of the letters.

__White space:__ Most of the visual elements run together with no extra white space that could separate them and add a sense of simplicity to the layout. The white space that does show up is not used purposefully to support the graphic presentation (i.e., white space to the right of the Forms and Publications list of links, around the Special Interest area, around the Filing and Payments graphics, and to the right of More Information list of links). If anything, the white space causes confusion about the hierarchy of visual priorities on the page.

__Clutter:__ This cluttered screen contains few distinctive visual elements. The list of each group of links are so numerous and similar that after a few seconds they fade into the background. The learner tries to focus but sees lined hyper text links everywhere, with no dominant visuals to lead the eye, and becomes visually fatigued.

__List of links is too long:__ The list of items under "Online Services" either needs to be alphabetized or organized into sub-groups (of related topics) to make it easier for the learner to visually identify any useful links.

__Lists with numbers vs. bullets:__ Of the numerous lists, some are numbered while others are bulleted with no clear reason for the difference. (If numbered items are steps, they should have been identified as "steps.") The bullets in the "Filing and Payments" provide a lead-in for a linked graphics list look unnecessary. These extra bullets add to the cluttered effect. (It makes us question why one would put bullets next to graphics with no linked text.)

__Feature of "Twitter" as a dominant visual element:__ The graphic image that's provided to access the latest social networking and gimmick "twitter" is featured rather prominently with a graphic and white space around it. This extra visual attention is inappropriately placed (drawing attention away from other valuable links on the web page, especially those higher on the screen), since the use of the currently popular "twitter" networking can only allow for quick distribution of very brief IRS news bites. I can't imagine anything substantive being communicated over "twitter" for most learners (why would anyone follow the IRS on "twitter"). The IRS already provides an e-mail subscription service that better serves the purpose of providing quick notification with brief but substantive content. The site includes a graphic for "twitter" in an effort to be trendy, while omitting links like IRS filing deadlines.

Top of page 

**Web Screen Source**
The following screen is the home page for Quizlet (www.Quizlet.com), an online study aid that's based on instructional flash cards, as of March 1, 2011.

**Appropriate Applications**
__Purpose statement__: A brief note to clarify the overall purpose of the site is prominently positioned as a visual element in the upper left of the screen, displaying the text, "The best way to study languages, vocabulary, or almost anything" and "P.S. It's fun, it's free, and you can share with friends." This statement establishes assumptions about the contents of the page for the learner.

__Asymmetrical layout and vertical alignment__: This home page is dynamic in its asymmetrical layout that locates the main information in the left and center areas of the screen. On the right side a tall narrow box displays various flashcard sets for the learner to explore by subject. The alignment of the boxed elements tends to be vertical and gives the site an orderly feel.

__Clutter:__ The feeling of a cluttered screen is avoided by presenting a limited number of features, with each one briefly presented in its own box, surrounded by a comfortable amount of white space.

__Proximity:__ The collection of similar elements are contained in separate boxes with very faint blue outlines. The contents of each box are placed in close proximity so learners can quickly tell they belong together, even if learners don't notice the faint outline of each box.

__Dissimilar box shapes and contents:__ Part of the dynamic design of this page comes from the visual elements in each box. The box shapes and content are not identical but created based on what seems to make sense for each feature (i.e., "Quizlet blog" shows text links, "Try it out: U.S. State Capitals" demonstrates the basic flash card functions). The unique visual character of each box leads the learner around the screen through a discovery experience of the site's main features. For example, the use of numbered items works for a list of "Hot sets today" that starts with a count of 17,629 flashcard sets created today. In comparison, the use of bulleted items works with the "Quizlet blog" because its more narrative in nature. The uniqueness and brief contents makes each box look like an introduction to a learning module.

__White space and simplicity:__ The boxed shapes are presented as a distinctly separated but harmonious group, surrounded by a noticeable (but not dominating) amount of white space. The use of white space gives a casual feeling of simplicity to the overall layout.

__Color:__ The background is predominately white. The visual elements displaying the most color are located in a secondary position below the dominate "purpose" statement (in the top left of the screen). Background shading shows behind some boxed elements to graphically lead the learner's eye to that content located toward the upper right area of the screen (i.e., "See how it works," and "Browse by subject"). The planned visual hierarchy of elements for this screen design uses color as one visual element that leads the learner's eye through the screen.

__Font attributes:__ A larger font size (with some italics) is used to draw the learner's attention to the "purpose" statement first (i.e., the "purpose" statement in the upper left screen with "best" italicized). The font for the subheading in each box is consistently smaller than the "purpose" statement so it doesn't compete for attention. Each subheading of a box is set in boldface to differentiate it from the contents (shown in an even smaller font) that follow the subheading.

Top of page