EdTech 506: Contrast, Alignment, Repetition, & Proximity

plusportal 1.fw

  • Users & Assumptions – The users of this graphic will be students in grades 6th -10th, parents, and teachers.  This particular graphic is going to be used as a quick reference guide for students, parents, and staff to outline the various features.  This past year we ran a hands on training and created a video tutorial, however, we still have members of our community that are having difficulty understanding the portal system.  As this is The Founders Academy main communication to students and parents about assignments, grades, and course announcements it is imperative that they understand how to navigate the system.  Most returning students and parents have experience using the portal system and are proficient at using it.  While those that will be new in the 2016-2017 academic year to our school don’t have the same experiences using a learning management system.  In addition, we have a large population of students coming from home school environments and their experience with digital environments for learning is not as varied as those in a traditional public school setting.


  • Rationale for Selection – My selection will work because it uses colors to create clearly sectioned off content from the main screen to the more detailed progress view.  The numbers on the screenshot of the Learning Management System (LMS)have a bold contrasting color that has them stand out from the rest of the image (p. 195).  The numbers correspond with descriptions to the right of the image that give more detail about the function of each feature.  These have been aligned in such a way that their proximity is close to the elements in the screenshot (p. 195).    I didn’t want to distract from the screenshot of the LMS and wanted to use this more as quick reference for a refresher that could be printed, posted on a website, and be part of lesson tutorials.  In order to maximize the flexibility of the image, I felt that using numbers worked better than arrows to text boxes that would visually overwhelm users that may get distracted by a design that was more complicated.


  • User Test Results – My daughter test drove the image. Her initial comment was wow that’s cool.  I’m taking that as I’m getting better at creating graphics using Fireworks.  As she read through the elements, I noticed she was confused on the “Detailed Progress” image as to which arrow to click on.  She also didn’t know where the video link was when asked.  I used my daughter as the test subject because she is younger than a 6th grader.  Based upon this, even a struggling learner should be able to understand the graphic with its elements.


  • Revisions – Based upon the user test, I made the following revision: 1) added the word up for description 1 of the detailed progress view to make it clear which arrow to select.  2) added film strips on either side of the video url to access the video tutorial.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s