Jennifer A. Polk,
Nicholas Woolridge,
Linda Wilson-Pauwels,
Jodie Jenkinson,
Margot Mackay
© Copyright by Jennifer Polk, 2002A prototype Web site, "HeadStart: a craniosynostosis and positional plagiocephaly resource," was developed to help parents of children with cranial abnormalities access information about their child's condition. An on-line survey of 30 parents confirmed the need for information regarding the early diagnosis and treatment of cranial abnormalities. Three methods of creating the illusion of 3-D in a 2-D interactive animation were investigated. The final prototype Web site was developed using a novel approach to rendering 3-D models for use on the Web using a non-photorealistic rendering technique which emulated a hand-drawn appearance. Many advantages were found when creating 2-D animations based on 3-D files. A formative evaluation with parents revealed that the 3-D feature added to their understanding of cranial structures and led to a more complete understanding of their child’s condition. Although the small sample size limits the ability to generalize about the success of including 3-D elements in educational programs, the research demonstrated that involving parents in the development process was successful in prioritizing the program content to fit with their needs.
http://www.medvisuals.com/medvisuals/headstart/
A Masters’ Research Paper
Submitted in conformity with the requirements for the degree of
Master of Science in Biomedical Communications M.Sc.BMC
offered through the Institute of Medical Sciences and School of Graduate Studies
in collaboration with the Division of Biomedical Communications
Department of Surgery
Faculty of Medicine
University of Toronto
With the growth of the Internet as a vehicle for health information, the challenge of effectively communicating this information to patients increases. Interactivity in educational programs has been shown to enhance the user experience by directly engaging the user in the content (Kreuter et al., 2000). Animation has also proven to be successful in making medical concepts easier to understand (Firby et al., 1991). The use of 3-Dimensional (3-D) technologies on the Internet may also be an appropriate tool for engaging and informing patients. However, user interactivity in a traditional web-based 3-D environment such as QuickTime Virtual Reality (QTVR) is somewhat limited when compared to the interactive potential of a vector based 2-Dimensional (2-D) program developed in Macromedia Flash™ (Macromedia, Inc., 2000). Flash is becoming an Internet standard for producing interactive animations that are optimized for viewing over restricted bandwidth. Flash, however, is a 2-D software program that doesn’t support 3-D models. A new approach was therefore required in order to incorporate 3-D renderings in Flash.
Conveying concepts about infant cranial abnormalities to parents presents an opportunity to research methods of conveying 3-D structures in a 2-D format. Parents must be able to visualize the infant’s skull from varying perspectives in order to effectively learn about skull anatomy and to recognize cranial abnormalities in their child.
Craniosynostosis
It is estimated that about four in every ten thousand children develop a form of craniosynostosis (Cohen, 1986). Craniosynostosis can be present at birth or can develop gradually in the first few months of a child’s life. In most cases, a family member is the first to notice that the infant’s head is misshapen or asymmetric (Marion, 1995). Occasionally the signs of craniosynostosis go unrecognized until the child is too old to undergo surgical procedures that depend on continued growth of the skull for success (Hudgins et al., 1993). Parents who can determine that their child has a form of craniosynostosis in its early stages will seek out medical attention sooner and their children will be in a better position to have surgery at an early age when the corrective procedures are less extensive and have better results (Hudgins et al., 1993; Hudgins and Francel, 1995). It is also very important for parents of children with positional flattening of the skull (an extremely common, self-correcting condition) to better understand that their child’s condition will correct itself over time without neurosurgical intervention. Positional flattening has increased dramatically since parents have been encouraged to place children on their back when sleeping to avoid sudden infant death syndrome, and is often mistaken by parents as a form of craniosynostosis (American Association of Neurological Surgeons, 2001).
Use above controls to play video.
After the birth of a child with any congenital abnormality, parents and family members must undergo a kind of mourning process as they adjust to the loss of the idealized image of a perfect child and accept the child that has been born to them (Marion, 1995). At the same time, these parents must endure more stress as their child is evaluated for what might be perceived as a frightening surgical procedure (Marion, 1995). While under this great stress, parents can also have difficulty understanding their child’s condition and the nature of the surgical treatment that their child will likely undergo.
The structure and development of the skull can be difficult to comprehend spatially from static 2-D diagrams. Spatial comprehension is important in understanding the development of craniosynostosis, since abnormal bone growth can occur in various directions around the dimensions of the skull. Parents need comprehensive and sensitively designed visual aids to help them understand skull anatomy and recognize head shape abnormalities. The information currently available does not meet their needs since it is largely text-based and written at a level often unsuitable for the general public. Many experts agree that patient education material is often written above the reading level of the general population (Hugo, 1996; Street et al., 1997). The few existing diagrams for parents show a lack of sensitivity, context, detail, and didactic presentation, and generally present skull anatomy from only one or two viewpoints.
The purpose of this project was to explore methods of conveying 3-D structures using an interactive web-based program restricted by bandwidth. It was hypothesized that a 3-D animation could be rendered using a method that would allow it to be incorporated into a 2-D interactive animation. Three different methods of communicating 3-D information in a 2-D space were investigated. Final file size and rendering quality was evaluated in each method.
DEVELOPMENT OF THE PROTOTYPE WEBSITE
This project was divided into 3 stages: 1) determining the information needs of parents whose children have craniosynostosis, 2) program content development including an exploration of ways to convey 3-D concepts in a web program, 3) formative evaluation of the prototype by parents.
Stage 1 - Needs Assessment
There were two main sources of information used to determine appropriate content for the website: health professionals and parents. Dr. Robin Humphreys, a pediatric neurosurgeon at the Hospital for Sick Children who regularly counsels parents about craniosynostosis was consulted. Mr. Jeff Pekar, a parent of two children with sagittal craniosynostosis was also consulted. In addition to having personal experience with craniosynostosis, Mr. Pekar has corresponded with hundreds of parents about their child’s condition via the Sagittal Synostosis Homepage website that he maintains (Pekar, 2000). Thirty parents of children with craniosynostosis were consulted using an online needs assessment.
Needs Assessment -Health Professional
Dr. Humphreys outlined several areas where information for parents is currently lacking. He emphasized that diagrams would help parents to recognize cranial abnormalities earlier, which would allow their children to receive treatment sooner (Humphreys pers. comm., 2001). He also emphasized that there is a need for parents to be able to distinguish between common cranial abnormalities that correct themselves over time, and craniosynostosis, which usually requires surgical correction. In particular, he suggested that there is a need for parents to recognize "positional flattening of the skull" (or positional plagiocephaly) that mimics single suture lambdoid synostosis.
Needs Assessment - Parents
An online questionnaire was developed to survey parents of children with craniosynostosis. The questionnaire was approved by the Ethics Review Office at the University of Toronto. Two-hundred parents who corresponded with Mr. Pekar in the last year via the Sagittal Synostosis Homepage were sent an email inviting them to participate in the online survey. Thirty parents completed the survey. Eighty percent had children with sagittal synostosis, two of which had multiple synostoses, and twenty percent had children with other synosotoses or didn’t know the type that their child had. On average, their children were diagnosed within the last 22 months before taking the survey. The purpose of the first online evaluation was to prioritize concepts for content development by determining the types of information parents felt were most significant in understanding their child’s condition, and what information was lacking or difficult to understand in their child’s diagnosis. The organization and layout of the website was then modified to include concepts that parents found particularly difficult or important determined from their responses.
The survey results show that in most cases (57%), parents were the ones who first suspected that their child may have a head shape abnormality. On average, parents first suspected head shape abnormalities around three months of age, however diagnoses were not made until six months of age on average. Six months is a critical time in the development of craniosynostosis since the treatment may become more complicated due to the increased hardening of the skull bones. This confirmed that parents need information about the early signs of the condition in order to take their children to a doctor sooner. Parents indicated that they wanted more information on how to recognize these features, and they outlined the need to know about basic skull anatomy. When asked to rate the importance of learning about certain aspects of their child’s condition, parents gave high importance to all aspects listed (the bones of the skull, what a suture is, the names of the different skull sutures, skull growth and development, brain growth and development, and the relationship between the brain and the skull).
The two needs assessments determined that the prototype website should focus on single suture synostoses that are non-syndromic: sagittal, coronal, lambdoid, metopic, and "positional flattening" which mimics lambdoid synostosis. The sagittal synostosis portion of the website should be the most highly developed since it is the most common form of single suture synostosis (Jimenez and Barone, 1998; Hudgins, 1993), and is relevant for the majority of parents participating in the evaluation; it should emphasize specific visual characteristics that allow for early recognition of craniosynostosis; and the site should provide parents with an understanding of normal skull anatomy and development.
Figure 1. All animations begin with the infant in the arms of a caregiver.
Stage 2 - Content Development
Character Development
There were many considerations in the development of the infant character. In keeping with the calming environment of the website, the infant was created in a non-photorealistic illustrative style. In order to make the information accessible to every parent, the infant character was created using simple outlines thereby avoiding features that could be recognized as male or female or belonging to a particular ethnic group that would be noticeable in a fully rendered character. The head was outlined in cool blue so that it would recede, while the skull was created in fully shaded warm colours to attract more attention. In an attempt to keep the environment of the website reassuring, the opening frame in all animations begins with the infant in the arms of a caregiver (Figure 1).
Another consideration for the style of the infant character was that it needed to be easily translated to a vector image from a bitmap image. Vector images are often preferable for Web graphics since a smaller file size translates to faster loading time. The non-photorealistic outline style translated into vectors for minimal file size. Eighty-two percent of parents felt very comfortable with the degree of realism in the illustrations, and eighteen percent felt somewhat comfortable. No parents reported feeling uncomfortable with the degree of realism shown.
Animation - Conveying 3-D concepts in 2-D interactive animations for the Web
The infant head was modeled in Cinema 4D® XL7 (Maxon Computer, 2000) and the infant skull was modified from an existing model of an adult skull (Viewpoint, 2000). Three different strategies were employed in developing an efficient method of rotating the infant head for use on the Web. Table 1 outlines the file sizes and output quality derived from the three methods explored.
In the first strategy, the head rotation was animated in Cinema 4D. Low-resolution bitmap images of individual frames were rendered separately using a non-photorealistic rendering technique based on work by Hooimeijer (2000). Each individual bitmap image was sequenced in Flash to create the illusion of rotation. The resulting file size was too large to effectively use on the Web. Further removing frames from the sequence still did not reduce the file size enough for the animation to be used effectively on the Web. It became evident that the bitmap images needed to be converted to vectors to reduce the final file size of the head rotation.
In a second strategy, the 3-D head model was brought into Swift 3D ® 1.0 (Electric Rain, Inc., 2000) and the head rotation was animated. Swift 3D is a program that renders out 3-D animations as vector keyframes for use in Flash. Although the 3-D animation was now in vector form and the file sizes were small enough for Web use, the aesthetic standard of the images were compromised when the head was rendered as an outline. This program also did not provide very precise animation tools for positioning the head for the rotation.
Table 1. File size comparisons and output results in three strategies for displaying 3-D in Flash. All file sizes are based on a 45 frame animation (45 degrees of a rotation), published as 320 x 240 pixel .swf file.
Figure 2A.
Figure 2B.
Figure 2C. Experiment 3: Method of converting bitmap images to vector images for use in Flash. a) the infant head and skull were modeled and animated in 3D. b) Each frame of animation rendered out as a high-resolution bitmap image using a non-photorealistic rendering technique. c) Each bitmap was converted into a vector image in Adobe Streamline, and sequenced in Flash, and internal structures were added.
In the final strategy, the head rotation was animated in Cinema 4D and each frame of the 45 degree rotation was rendered separately as a high resolution bitmap image, again using Hooimeijer's (2000) non-photorealistic rendering technique. The bitmap images were then converted to vectors using Adobe Streamline ™ 4.0, and each frame of the animation was brought into Flash 5.0 and sequenced as a frame-by-frame animation. Figure 2 outlines the major steps in this process. This method of converting the bitmap images into vectors was efficient because it reduced the size of the file significantly for use on the Web (see Table 1), and the aesthetic quality of the artwork was maintained. Interactive elements and additional artwork were added to the rotation sequence in Flash.
Stage 3 - Formative Evaluation of Prototype
The same group of thirty parents were asked to view the prototype website and complete an online survey consisting of multiple choice and open-ended questions to determine the effectiveness of the website in meeting their needs. Seventeen parents responded and completed the survey. In general, participants gave positive feedback about the site and ninety-four percent said they would recommend the site to other parents.
Many parents requested more specific information on the types of surgical procedures currently available, however it was decided that the physician was probably the best means of conveying more detailed information about surgical options to the parents.
This prototype website is a potentially useful tool for parents to learn about the early signs of craniosynostosis before they visit their physicians. Most (88%) respondents indicated that the animations enhanced their understanding of early signs of sagittal synostosis. This prototype is also a useful tool for parents to learn about general cranial anatomy in order for them to further understand their child’s condition post-diagnosis. Survey results indicate that the illustrations and animations were very successful in enhancing parents’ understanding of basic skull anatomy.
DISCUSSION
3-D visualization has traditionally had limited applications for use on the Web. QTVR and other 3-D authoring tools are limited in the amount of interactivity that they can provide users. In this project, interactive 3-D visualization has been proven to be is an effective tool for visualizing anatomical relationships. All of the participants that viewed the program felt that the ability to rotate the head in 3-D increased their understanding of the anatomical relationships of the skull.
The first method of using bitmaps in frame-by-frame animation is not feasible for web-based projects due to the enormous file size that would require a long time to load on the Web. In the second method using Swift 3D, file sizes were small enough for use on the Web, but the quality of the artwork was not acceptable. Swift 3D and other programs that convert 3-D data to vector form are still in early stages of development, and the quality of output is likely to improve in the near future. Swift 3D may be useful for many other types of visualization modules particularly in cases where a model contains simplified geometry, such as animating text and logos. However in this case, due to the organic and complex rounded geometry in the infant head and skull, results from this software were not aesthetically acceptable, especially considering the sensitive nature of the subject matter. Swift 3D also does not offer precise control of the position and rotation of objects during the process of animation, and has difficulty handling large file sizes.
The third method was very successful in terms of small file size and high quality of output that remained faithful to the original bitmap renderings. This method was somewhat more labor intensive than using Swift 3D, but had far superior results. In addition, the artwork maintains a sense of 3-D consistency and solidity as the structures rotate. Since the artwork is vector based, it can be easily tweaked to communicate the specific content of each section. File sizes in this case were low enough that the head rotation could be incorporated into a longer and more in-depth animation sequence including narration and additional content. The time spent building and animating 3-D models of the head and skull were worthwhile for this particular project because the model can be used numerous times as a basis for creating artwork for the entire site.
The online style of evaluation was beneficial in this case since it is such a rare condition and a sizeable group of parents were able to participate from around the world. One drawback of the online evaluation was that compliance was low for the second evaluation (17 participated out of 30). This research is significant as the data meet the needs of three target groups. For biomedical communicators, this new technique allows for the inclusion of 3-D information in an interactive program where the inclusion of 3-D information was previously limited. This information will be beneficial when creating educational tools to communicate structural anatomy. The prototype may also save time for neurosurgeons who need to continually explain the developmental characteristics of craniofacial abnormalities to parents. The information available to parents on this prototype website may result in parents bringing their child to a physician sooner, and thereby having surgical treatment sooner when procedures are less complicated and generally have more successful outcomes. Future development of other sections of this prototype website may reduce the number of children with positional flattening in neurosurgery clinics, as parents will be able to visually differentiate between lambdoid synostosis and positional flattening. Finally, the HeadStart website may empower parents by providing them with knowledge that may alleviate feelings of anxiety, and enable them to assume a greater role in maintaining their child’s health.
Indications for future research
Vector- based 3-D animations for the Web
As the importance of computer based-patient education increases, biomedical communicators must keep abreast new techniques for effectively communicating information to patients over the Web. The discussion of 3-D use in Flash has drastically increased on developer websites over the last few years. Depending on the desired 3-D effect, and the complexity of the objects and animation, there are various approaches that artists can take to achieve the illusion of 3-D for the Web. New programs that can translate 3-D models and animations into vector animations are still in the early stages of development and warrant continued investigation as they may be of great future significance (eg. Swift 3D, Vecta 3D, MindAvenue Axel, Rhino3D).
Patient education
The parents who participated in this study had children who had already been diagnosed with a form of craniosynostosis, and had most likely already undergone treatment to correct the condition. In order to test the true value of the animations it would be beneficial for future studies to include parents who are not previously familiar with craniosynostosis or skull anatomy and development. It would also be beneficial in future evaluations to develop pre- and post- tests to compare the knowledge retention of participants learning from static planar views as compared to 3-D modules.
REFERENCES
Adobe Systems Incorporated. 1997. Adobe Streamline ™. San Jose California, USA: Adobe Systems Incorporated.
American Association of Neurological Surgeons. 2001. Health resources: Neurosurgery://on call [online]. June 11, 2001. http://www.neurosurgery.org
Cohen, M. M., ed. 1986. Craniosynostosis: Diagnosis, evaluation, and management. New York: Raven Press.
Electric Rain, Inc. 2000. Swift 3D®. Boulder Colorado, USA: Electric Rain Corporation.
Firby, P.A, K.A. Luker, and A. Caress. 1991. Nurses' opinions of the introduction of computer-assisted learning for use in patient education. Journal of Advanced Nursing 16:987-995.
Hooimeijer, B. 2000. An alternative cartoon render technique [on-line]. July 29, 2002. http://www.xs4all.nl/~naam/cartoonrender.html
Hudgins, R. J., F. D. Burstein, and W. R. Boydston. 1993. Total calvarial reconstruction for sagittal synostosis in older infants and children. Journal of Neurosurgery 78:199-204.
Hugo, J. 1996. Prioritizing guidelines for health education message design. Journal of Audiovisual Media in Medicine 19(4):171-174.
Humphreys, R. personal communication, July 8th, 2001. Hospital for Sick Children, Toronto.
Jane, J.A., and P.C. Francel. 1995. The evolution of treatment for sagittal synostosis: a personal record. In Craniofacial anomalies: growth and development from a surgical perspective. New York: Thieme Medical Publishers.
Jimenez, D.F., and C.M. Barone. 1998. Endoscopic craniectomy for early surgical correction of sagittal synostosis. Journal of Neurosurgery, 88:77-81.
Kreuter, M. D., Farrell, L. Olevitch, and L. Brennan. 2000. Tailoring health messages: Customizing communication with computer technology. Mahwah, N. J.: Lawernce Erlbaum Associates.
Macromedia, Inc. 2000. Macromedia Flash™ 5. San Francisco California, USA: Macromedia Incorporated.
Marion, R. W. 1995. Syndromes, genetics, and the craniofacial complex. In Craniofacial anomalies: Growth and development from a surgical perspective. New York: Thieme Medical Publishers.
Maxon Computer. 2000. Cinema 4D XL® R7. Friedrichsdorf, Germany: Maxon Computer GmbH.
Pekar, J. 2000. Sagittal synostosis homepage [online]. June 11, 2001. http://www.geocities.com/HotSprings/6751/
Street, R.L., W.R. Gold, and T. Manning. 1997. Health promotion and interactive technology: theoretical applications and future directions. Mahwah, New Jersey: Lawerence Erlbaum.
Viewpoint. Corporation. 2000. Adult skull (3-D model). New York: Viewpoint Corporation.
Authors:
Jennifer Polk, B.Sc, M.Sc.BMC
Graduate, Division of Biomedical Communications
Department of Surgery, Faculty of Medicine, University of Toronto
Nicholas Woolridge BFA, B.Sc.BMC, M.Sc.
Associate Professor, Division of Biomedical Communications
Department of Surgery, Faculty of Medicine, University of Toronto
Linda Wilson-Pauwels, AOCA, B.Sc.AAM, M.Ed., Ed.D
Professor and Chair, Division of Biomedical Communications
Department of Surgery, Faculty of Medicine, University of Toronto
Jodie Jenkinson, B.A., M.Sc.BMC
Assistant Professor, Division of Biomedical Communications
Department of Surgery, Faculty of Medicine, University of Toronto
Margot B. Mackay A.N.S.C.A., B.Sc.AAM
Professor, Division of Biomedical Communications
Department of Surgery, Faculty of Medicine, University of Toronto
Robin Humphreys. M.D., FRCSC, FACS, FAAP
Senior Staff Neurosurgeon,
Division Chief and Associate Surgeon-in-Chief
Hospital for Sick Children,
Department of Surgery, Faculty of Medicine, University of Toronto
I would also like to thank:
Mr. Jeff Pekar and his family for sharing their personal experiences with sagittal synostosis.
This study was funded in part by Bell University Laboratories and the Vesalius Trust.
Jennifer Polk, M.Sc.BMC, graduated from the Biomedical Communications program at the University of Toronto in 2002. She currently freelances as a new media project manager and is developing animations for a patient education website at the Hospital for Sick Children in Toronto.