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.

EdTech 506:


Key To Success.fw

Your users and the assumptions you make about them (such as age, reading level, and assumed skills).

The initial content for the unit being created is mostly geared towards students entering the 6th grade.  Although, it will be used with all new students entering the school.  As a result, the reading level of the student population varies given the fact that the students will be ranging from those entering 6th – 10th grade.  The secondary users will be parents, however, given the diverse population of that our public charter school draws our parents also range in reading level as we have several families where English is the second language.


Why you think your solution will work. Include at least two ideas from the book, including page numbers, and your interpretation of the passage used.

I was not satisfied with the images created from the prior chapters.  As a result, I decided to create a new image that would work for laying the groundwork of the Digital Basics unit.  All of the tools students will learn through the unit if used consistently and correctly will help them achieve a passing grade by the schools standards.  This standard is drastically different for many students in their first year at the school.  As a result, it is imperative that they understand its importance from the start of the year.  I believe this graphic will work because it combines the use of color to indicate a positive result and a negative result or less desired result.  For those that may be struggling readers the image of the smile and the face that is less than happy is universal regardless of language barriers (pg. 78, Lohr).  The arrows clearly indicate scores above or below the base numbers are within the desired range or the less than desired range.  The arrow also indicates a rise in grade = mastery versus a fall in grade = not making mastery (pg. 79, Lohr).  For many students and parents, in prior learning situations students get just letter or numeric grades.  We don’t not let students move on unless they get 80% or higher.  As it is the belief that scores in this range demonstrate mastery of the content.


The changes you will make based on user comments (or create a revised image).

The revisions I made as a result of discussion with my interviewee were to increase the font size to make it easier to read and less blurry when the image was larger.  It was suggested to adjust the blue in the eyes and maybe add a pupil.  This adjustment was played with but neither the interviewee nor myself like the desired effects.  To make the eyes seem better formed I added a more transparent blue around to give more of a rounded effect to the blue eye colors.  Initially the title was not boxed out and it was lost in the overall image.  I added the rounded corner rectangle behind to allow for this to pop better.  Slight shading was added to give the image more dimension which was appreciated by the interviewee to make if feel less cartoon or elementary like.


The interview I selected was chosen because of ease of access, as she is my daughter, but also for her age.  I felt that having a student entering the 5th grade evaluate the image for understanding the message given that most students entering our school next year will be 6th grade students made the most sense.  Hannah is a typical student and therefor would be representative of the


User Test

A SET UP YOUR TESTING ENVIRONMENT Setup learning environment (load software, assemble any other instructional artifacts) Set your chair at a 45 degree angle to users. (This way the users won’t feel like you are staring at them, but you will be able to see what they are doing and what they are looking at.)



Name of interviewer: Joanna Marcotte

Name of interviewee: Hannah Marcotte

Time completed: 6:35 pm

Date: 2/21/2016

Time started: 6:00 pm



The image explains what a passing grade is at Founders and what a failing grade is.  Hannah liked how you used the green to show a good grade and the red to show a poor grade.  Hannah also liked the use of the arrows to demonstrate scores above or below the mark being either passing or failing to master the content.  The smile and sad face make the image easy to understand.  The interviewee suggested making the font size bigger and adjusting some of the font styles.  Based upon the interviewees suggestion the image above has been refined to reflect the visual improvements that were suggested.

EdTech 506 -Shape Tools

Google Drive Organization.fwFolder Organization.fw

    • Users & Assumptions – The initial users of this image will be 6th-grade students in an introductory computer course. Many incoming students have not had a formal computer course before.  If they have used electronics it has been primarily for entertainment and not for productivity and organization.  The age of these students ranges from 6th-8th-grade students primarily.  The reading ability of these students ranges from just below grade level to above grade level in a mixed ability class.
    • Rationale for Selection – My selection will work because in designing i
      t I considered that primarily I would be using digital pages but I wanted the flexibility to also print the image on standard paper for those students that benefit from having a hard copy when working rather than splitting a screen for navigating multiple tabs (pg. 250).  In creating the shape elements of the folders, I used simple rectangular shapes that were drawn in Fireworks using the vector line tools.  The folder images are placed at different levels from each other to indicate the folder hierarchy that exists in Google Drive.  This format mimics that of the image located on the Google Drive sidebar.  
    • User Test Results – My daughter test drove the image.  Her deduction was that the top was what you call the folder system and the bottom was actual labels you would apply to a folder system.  This is exactly what I was going for so I believe that the image will be successful with students in an academic setting.
    • Possible Revisions – I was considering adding more color to the folders, however, I didn’t want this to detract from the content.  I’m still mulling this feature over a bit and may revise to have the colors applied.