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: Selection

Selection is the “cognitive process of attending to particular visual and auditory stimuli” (Lohr 2008, p. 100). We select things we want to remember from other stimuli and then we organize it into a mental model and integrate it into long term memory. One of the jobs of the instructional designer is to help learners to select what is important. We can help our learners select by using contrast, alignment, repetition, and proximity (CARP). We use tools like type, color, shape, design, and space to accomplish CARP. I helped you pay attention to “selection” by having it contrast with the surrounding text by making it blue (color) and bold (type). These same principles can be used in graphics.

I am designing a blended course on arthrocentesis (inserting a needle into a joint to either remove fluid or inject medication). The graphic demonstrates two bony landmarks that guide the location of insertion of the needle for arthrocentesis of the shoulder joint. This graphic will be used in the “Shoulder” 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 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. Initially I was going to use drawings of the shoulder to demonstrate the anatomy and landmarks but as noted in our text “in areas such as medical education and engineering, realistic images are considered more effective” (Lohr 2008, p. 101). Also, my learners are advanced and familiar with shoulder anatomy. As such, their visual cognitive processing will not be overloaded by the realistic image as might a novice’s visual processing. While this is not an elaborate graphic I think the use of a bright, contrasting color (blue) to outline the bony landmarks serves the role of selection (Lohr 2008, p. 108). I also made the text in a different color than the bony outline to serve the role of contrast. In this image the landmarks are the figure and the rest of the image is the ground.

In the second image, I use a black circle to note the point of needle insertion. The use of shape (circle) guides the learner and the black color contrasts with the skin and blue outlines of the bony landmarks. I removed the labels of the landmarks so that the focus becomes the point of insertion and not the labels. In this image I wanted the circle to be the figure and the shoulder with the landmarks to be the ground.

  • 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. They thought the images easily demonstrated the anatomic landmarks and where to insert the needle. They didn’t feel the syringe gave enough information about the intricacies of the angles and directions of needle insertion. I use the syringe with an arrow just to convey the idea that the black circle is where you stick the needle.
  • The changes you will make based on user comments (or create a revised image). I didn’t make any changes.

 

EDTECH 506 Assignment: The Functional Use of Shape

General Arthrocentesis Procedure

General Arthrocentesis Procedure

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 general process for performing arthrocentesis. It might be used in the introduction section of the course. Each of the images was found by searching Google images and was labelled for reuse with no attribution.

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. This graphic will be used in the introduction section of the course. They know the anatomy of all the joints they would have to perform this procedure on.
  • 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 it demonstrates the procedure graphically and the arrows between images show a process or steps (Lohr 2008, Figure 10-2, pg. 251). I think it also works because the overall semicircular layout of the graphic will help learners perceive it as a whole. “A shape can be an effective way of presenting related but distinct information as a unit” (Lohr 2008, pg. 250). Each of the steps is distinct but related to the whole unit.
  • What you learned from a “user-test” (have someone look at the image and verbalize their thoughts while looking at the image). I asked a physician colleague if the graphic adequately displayed the basic procedure of arthrocentesis. He felt it was easy to understand and conveyed the main steps in arthrocentesis. He didn’t feel any changes were needed.
  • The changes you will make based on user comments (or create a revised image). I made no changes to the image. I considered trying to create animation of the syringe and needle going in and out in the 4th and 6th images, respectively. My skills aren’t good enough to do that and I didn’t know how well it would work on a webpage so I didn’t want to dedicate the time to something I might not use. I also considered a small thin arrow positioned just above each of the syringes showing the direction of movement of the syringe but I figured the positioning of the syringe and needle (in the joint and outside the joint) conveyed the information adequately and I was worried having too many arrows on the graphic would make it look less professional and possibly be more confusing.

I look forward to your feedback.

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