EDTECH 506 Assignment: White space

Wrist - Arthrocentesis 101- An Online Course for UAB Internal Medicine Residents 2016-03-31 17-12-29

The above page is a screen capture of a blended course I am developing on arthrocentesis. This week we learned about white space. White space is the area between visual elements whether that be text, graphics, or elements within a graphic. Its the background color. It is used to separate elements and to direct the eye to important information. It can be used to clarify information.

Write a justification paper for the activity you select. Describe the following:

  • Your users and the assumptions you make about them (such as age, reading level, and assumed skills). My users are internal medicine residents who have graduated from medical school.
  • 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 use white space to chunk and organize the information (Lohr 2008, p. 272).       Chunking is grouping of information in meaningful or related clusters (Lohr 2008, p. 125). I also use white space to evenly distribute the graphics/pictures in each information cluster.The site is simplistic in design but has symmetry. I wanted to project professionalism since it’s a site to educate medical professionals (Lohr 2008, p. 275). According to Lohr, symmetry can be boring but I think the graphics and color scheme of the template help with that some.
  • What you learned from a “user-test” (have someone look at the image and verbalize their thoughts while looking at the image). I asked 2 faculty to evaluate the page. They felt the spacing was good. Information was broken into meaningful chunks. It was visually appealing.
  • The changes you will make based on user comments (or create a revised image). My colleagues had no suggestions for improvement.

 

Advertisements

EDTECH 506 Assignment: Organization

Week 6 Graphic_ Fluid Analysis-3

Organizing information (or at least helping our learners organize information) is one of the most important roles of a teacher in my opinion. Chunking, using visual cues, and hierarchy are all ways to organize information.

I am designing a blended course on arthrocentesis. The graphic describes the types of fluid that can be obtained from a joint and its diagnostic characteristics. I created the image using Google Drawings. The cells are labelled for reuse from Wikimedia.

Write a justification paper for the activity you select. Describe the following:

  • Your users and the assumptions you make about them (such as age, reading level, and assumed skills). My users are internal medicine residents who have graduated from medical school. They would recognize the cells in the graphic and understand all the terms.
  • 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 use chunking to help organize the information. Chunking is grouping of information in meaningful or related clusters (Lohr 2008, p. 125). Shape (the circles) facilitates chunking and comparison of the types of fluid (Lohr 2008, p. 252). Each circle is a chunk of information that is related. I also limited the amount of information (5 pieces) in each chunk so as not to overload working memory. I don’t have a lot of white space between my chunks but the circle outlines help delineate the chunked information (Lohr 2008, p. 126). I depict hierarchy (as you go left to right the diagnoses get worse) in this image in 2 ways: increasing WBC from left to right and darkening of syringes from left to right. Also using the horizontal makes the most important information standout (Lohr 2008, p.128).
  • What you learned from a “user-test” (have someone look at the image and verbalize their thoughts while looking at the image). I asked 4 learners to evaluate the image. I asked for their overall gestalt about what the image was depicting and then specifically about what each of the circles was depicting. I also asked them what stood out in the graphic (ie what drew their vision).

Learners understood that the graphic was depicting the possible types of joint fluid and what the testing of the fluid would reveal. They said they noticed the circles in the middle of the graphic mainly.

  • The changes you will make based on user comments (or create a revised image). Learners had no suggestions for improvement.

 

EDTECH 506 Assignment: CARP

Week 7 Graphic_ Gout-3

CARP stands for contrast, alignment, repetition and proximity. These actions are used in a graphic to help learners select, organize, and integrate information.

I am designing a blended course on arthrocentesis (inserting a needle into a joint to either remove fluid or inject medication). The graphic I designed how to differentiate two types of crystals that can be found in joint fluid which are commonly confused with each other. Again, the circles (I chose circles because when you look in a microscope the visual field is circular) indicate what would be seen under a microscope. I chose the purple color because the background in a polarized microscope is purple. This graphic will be used in the “Basic Principles” section of the course. I created the image using Google Drawings.

Write a justification paper for the activity you select. Describe the following:

  • Your users and the assumptions you make about them (such as age, reading level, and assumed skills). My users are internal medicine residents who have graduated from medical school. They know all the terms used in the graphic.
  • 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 use shape to facilitate comparison of the types of fluid (Lohr 2008, p. 252). I use a sans serif font (trebuchet) to improve legibility of the title of the graphic and the text inside the circles. I am more concerned with legibility than readability as there are only short bursts of text instead of long passages of text (Lohr 2008, p. 227). I use repetition of the circles to tie this graphic to the one I made last week as they will be located on the same web page. I wanted to create a sense of unity (Lohr 2008, p. 203). I also use repetition in the design (same lay out of each half and same reminder at the bottom of the page). I also tried to use repetition of an important letter (N and P) in each half of the graphic to help the learner remember the most important characteristics. I use color to approximate the color of the crystals and the color is used for all text of each of the crystal types. All “body” text is left aligned and horizontally aligned across the graphic (Lohr 2008, p. 201).
  • What you learned from a “user-test” (have someone look at the image and verbalize their thoughts while looking at the image). I asked 2 faculty to evaluate the image. I asked for their overall gestalt about what the image was depicting and then specifically about the color scheme and scripting of the text. They commented that they liked the color scheme and scripted reminders at the bottom.
  • The changes you will make based on user comments (or create a revised image). I didn’t make any changes.

 

EDTECH 506 Assignment: Designing Words to Express Their Meaning

506 w4 final grahic

For this week’s assignment, I chose to do the challenge activity that involved designing four words that express the meaning of those words. I am designing a blended course on arthrocentesis (inserting a needle into a joint to either remove fluid or inject medication). The graphic I designed describes the indications for performing arthrocentesis. I made the warmth word in Photoshop (following a 30 step process) but the others were made in Fireworks. The background was made in Google Drawings (thanks Norm for the inspiration to use something I didn’t even know existed). I think it captures the essence of each of the indications.

Write a justification paper for the activity you select. Describe the following:

  • Your users and the assumptions you make about them (such as age, reading level, and assumed skills). My users are internal medicine residents who have graduated from medical school. They know the meaning of each of these words but may not know all the indications for arthrocentesis. This graphic will be used in the introduction section of the course. I hope the design of the words will help them remember the indications.
  • 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 believe my design will work because they are representative visuals which are “used to convey information quickly and easily” (Lohr 2008, pg. 17). They are words that convey their meaning. I think the learners will “notice the important information” (Lohr 2008, pg. 56) because of the design of the words themselves. Pain has an expletive after it (#*@!) which often gets said when we hurt ourselves. Erythema (redness of anything that’s inflamed) has redness around the word. Warmth has flames coming out of it. Finally, swelling has part of the word that is larger (or swollen) compared to the rest of the word.
  • What you learned from a “user-test” (have someone look at the image and verbalize their thoughts while looking at the image). I asked two physician colleagues if the words expressed their meaning. My initial design of warmth (red glow around it) and erythema (red font only) weren’t as representative as I thought they were. They felt the other two words (pain, swelling) adequately represented their meaning, especially with the expletive behind pain. Interestingly, both felt that designing words this way was not needed to teach residents the indications for arthrocentesis. They felt advanced learners likely wouldn’t need this extra cue to remember the indications. They also felt the words would be better around a joint or showing a joint demonstrating all these features. I agree that would be better but wouldn’t meet the needs of this assignment.
  • The changes you will make based on user comments (or create a revised image). I initially wanted to have fire or steam rising from the warmth word but couldn’t do that with Fireworks. I then decided to use Photoshop to redesign the word to its current format. I added red glow to the erythema word to actually make it erythematous. After my alterations I think all the words better represent their meanings.

EDTECH 506 Universal Design Performance Graphic Example

How to tie a half-windsor knot

With permission from http://www.tiefighter.net

This week we were asked to locate an example of universal design that addresses a performance issue in an instructional context and that relates to visual literacy. A performance graphic helps people perform a task and it not necessarily designed to be memorable.

Universal design is “the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design” (http://universaldesign.ie/What-is-Universal-Design/). This definition can be adapted to educational settings and products such that they can be used by all students.(Burgstahler, 2005)

The graphic above is visual because the ties provide visual cues of how to tie a half-Windsor knot. The design meets several of the 7 principles of universal design. It is flexible enough to be used by a wide variety of people except for those who are blind. It is simple and intuitive. Necessary information is included and communicated effectively.  The visual cue of the ties allows communication that cuts across language barriers. Those who find the tie diagrams confusing or just prefer words can read the descriptions of each step.

Reference:

Burgstahler, S. Universal Design of Instruction (UDI): Definition, Principles, Guidelines, and Examples. Retrieved from: www.smith.edu/deanoffaculty/Burgstahler.pdf