In a hypothetical study, the Interaction Design and Information Architecture (IDIA) department at the University of Baltimore decided to promote their Humans Computers and Cognition (IDIA 640) course to prospective students already enrolled in the program and to those interested in the field. In order to foster interest in the program, it was decided that a banner or ticker should be deployed within the department website, providing news updates and information about the program to interest visitors. This paper documents the development of a ticker prototype intended to serve this purpose. Discussion of the chosen content, rationale for design from a human centered computing and cognitive standpoint follows in the paper. The prototype has been designed with an emphasis on addressing memory, forgetting, learning and mood.
In order for the ticker to be effective, the design had to encompass each of the cognitive areas described above as well as being aesthetically pleasing to design students. In addition to this, the technology used to implement the ticker had be accessible and integrate well into the existing departmental web site. The framework used to develop this prototype is discussed in more detail and the rationale for design decisions has been provided. While the prototype has been designed to accommodate the department’s requirements, it does not include all the functionality that the final version would deliver, which is outlined here.
- Finished prototype is available to view at http://www.carnaghan.net/ticker
- Source files are downloadable from http://www.carnaghan.net/ticker.zip
Initial Prototype Decisions
Before creating the prototype, a decision had to be made on what technology should be used. The basic requirements specified a ticker design including movable or transitional text. In the past traditionally Adobe Flash has been used to generate animated banners, advertisements and anything that required moving content. In the last few years however concerns over accessibility have arisen in the web development world and many are adapting their work to the newer HTML 5 and jQuery specifications. jQuery, unlike Flash, does not require any additional software on the user’s computer in order to view content. It is a JavaScript library that has matured greatly over the last few years and is used commonly in today’s typical web application. It was decided due to the advantages listed, that jQuery would be the technology used to develop the ticker prototype. Already there are several jQuery ticker frameworks available and rather than re-inventing the wheel it made sense to choose one of these and customize it to meet requirements.
The main prototype uses the jQuery library, which is freely available for download at jQuery.com and builds on the jQuery News Ticker framework which is available at http://www.jquerynewsticker.com. The prototype used this as a baseline for developing the ticker, however overall style and functionality has been customized in order to meet the requirements of this project. Customization involved re-writing the Cascading Style Sheets (CSS), creating the HTML placeholder and developing contents and imagery for the final design. Since the focus of this exercise was on attracting students to IDIA 640, it was important to spend time developing content and style conducive to learning and areas of memory. The jQuery library and ticker framework provided some of the coding ‘heavy lifting’ allowing more time to focus on an effective human centered design.
Human Cognition Factors
The purpose of the ticker was to provide information to potential students about the Humans Cognition and Computing program. In order to provide a meaningful and effective message to get attention it was important to understand the target audience. Many IDIA students are seeking to advance their knowledge in areas of information architecture, design and usability. Therefore in order to excite this target group enough to increase enrollments in a class about human cognition, it was vital to emphasize the relevance of this topic in their design and development field. The content developed for the prototype has attempted to bring this relevance to the forefront and to garner interest in the small tidbits of information displayed.
Information about human memory was compiled to serve the format of the ticker. More specifically tips to improve memory in relation to user experiences in the area of web design have been used in the ticker. The design stage of the prototype focused facilitating learning, improving memory, manipulating mood and circumventing forgetting.
Facilitating Learning
Baddeley et al (2009) discusses learning in terms of various key elements that are important to consider for effective comprehension and retention of information. One of these important elements includes motivation, which they point out determines the amount of time and degree of attention devoted to the material to be learned. Graduate students of the IDIA program no doubt have various intrinsic as well as extrinsic motivational reasons for completing their program. If a banner ad or ticker is to be effective in educating these users about the benefits of taking IDIA 640 as one of their classes, the message needs to be motivating enough to capture their attention. The ticker begins animating content in the form of a question to those interested in web design about the importance of human cognition theories. This is elaborated in the following ticker messages in terms of how the class could potentially improve design skills by being aware of these theories.
Most informational tickers are heavily text driven with updated information given in smaller slices of information to the user. Hermann (2006) in his discussion of learning talks about the benefits of using visual graphics to improve overall comprehension. He points out that visual representations teach us by presenting considerable information efficiently. Unfortunately in a ticker-based format, there isn’t a lot of room for graphics, however the prototype displays various visual cues, where possible, throughout its content to enhance learning of the material. Hermann goes on to discuss learning in terms of advertising, which is relevant to the prototype as a marketing device. He talks about placement of the advertisement in order to capitalize on its effectiveness. Appendix 1 shows a screenshot of where the proposed ticker would be placed on the IDIA homepage. It has been designed to fit into the web page in terms of design and placement in terms of exposure. The background coloring used matches the rest of the page; however the images and text stand out to deliver the message well.
Improving Memory
An effective way of improving memory is to simply limit the amount of information to be processed. The human brain can recall up to 100% of information it receives for only 500 milliseconds, Kohl (2011). After that time it is up to working and long term memory to process and retain the knowledge made available. The ticker that was developed for IDIA 640 contains small parts of information during each slide or rotation of content. ‘Key words’ have been specifically highlighted in red to draw attention in order to help retain the important concepts of the message. During the design phase of the prototype, the use of audio was considered as research shows that visual information is not remembered as well as audio. Due to the nature of the ticker, it was decided to not include audio as it may have caused confusion in terms of control, and since there was already a lot of information being presented it seemed better to let the user focus attention on the information displayed. Controls were however added to allow for control of the speed of the information being displayed, including a pause button and forward and reverse links. Additional interaction was included in the form of various hyperlinks displayed in the red ‘key word’ text. While these links are non-functional in the prototype, the end product would contain links to various parts of an IDIA 640 web page with more information about the concepts displayed for interested users.
It was mentioned earlier that relevant information can have an effect on motivation and therefore on learning. Information with rich context that is relevant to an end-user can also be advantages to memory recall. The target user is either an IDIA student or someone interested in the field. By tailoring the information to this field and by highlighting the benefits of the program in this way, the effectiveness of the overall message is greater.
Manipulating Mood
Research suggests that people who are anxious don’t learn or remember as well as those in a non-anxious state, Kohl (2011). The Yerkes-Dawson law shows that physiological arousal can improve learning to a point, however too much anxiety can lead to poorer retention and overall learning. Therefore in order to promote learning, it is better to present material in a positive way and to avoid unpleasant situations. Internet advertising is almost as old as the Internet itself and many of us have faced frustrations in the past with annoying pop-up alert ads, flashing banner, intrusive audio or video interrupting us expectantly. The ticker will in a way be considered as an advertisement for the IDIA 640 class, therefore it is important to avoid an unpleasant experience or the overall message will be lost. In the design of the ticker it was decided early on not to use a ‘noisy’ approach in terms of coloring and design. The ticker’s background color deliberately blends with the IDIA department web page, while more emphasis has been placed on the text, and subtle imaging used. It is meant to promote a feeling of interest and possible motivation with the content revealing benefits to students who may be interested in learning more.
The speed and animation of the content displayed has been formatted in a way to blend smoothly and slow enough to read, but transitioning often enough to draw attention. The added navigation buttons as mentioned earlier allow for some additional control to help improve the users overall experience. The small images used throughout are there as cues to promote flash-bulb memory. Finally the size of the ticker is wide enough to publish the content, but not too large to cause obtrusive annoyance with other content on the page.
Circumventing Forgetting
Forgetting is a problem that many of us face and it is an important thing to consider when trying to communicate a message in the form of promotion or advertisement. Baddley et al (2009) reminds us that if something is learned well to begin with, forgetting is much less likely, or it takes a much longer time to happen. In developing the message for the ticker prototype, it was important to design it in such a way that key parts of information were served in easily readable and consumable sections. To decrease the likeliness of forgetting the message, subtle cues, highlighted links and a clear and easy to read typeface were all implemented. For those users interested in learning more, there was a way of quickly getting to more information as needed. The ticker was designed to continually rotate and repeat the message, which in itself would serve as a way of circumventing forgetting for those that were watching.
Research suggests that individual attitudes and beliefs are difficult to change. While people can behave differently, their underlying attitudes and beliefs tend to remain consistent. This brings us back to the importance of understanding who the target users are. It is important to understand how their biases and attitudes will affect how we need to reach out to them in terms of messaging. A constant theme thought out this paper has been relevance of information. Information in the ticker needed to be fashioned in such a way that it would appeal to the ‘average’ design or information architecture student and therefore promote IDIA 640 as effectively as possible.
Conclusion
The Human Computers and Cognition ticker prototype was designed to promote IDIA 640 by displaying a small amount of information relevant to its users about the class. Different strategies were used to promote effective learning, improved memory, manipulation of mood and preventing forgetting. The goal was to design a technically feasible prototype that could eventually be enhanced and deployed on the IDIA department web page.
Various improvements could be made to the banner for future revisions. For example in terms of usability, the control links could be larger. In terms of design, better graphics and imagery could be implemented. In terms of development, better style coding could be used (while the ticker looks fine in Chrome and Firefox, it doesn’t render as nicely in Internet Explorer 9). These are all technical concerns that should be addressed, however the purpose of this exercise was to develop a prototype from a human centered approach rather than from a technical one. In terms of human cognition, more research should be carried out to refine this ticker in the above areas. The prototype is available online at http://www.carnaghan.net/ticker. Information about the source code and a link to the source files can be found under in Appendix 3.
References
Baddeley, A., Eysenck, M. W., Anderson, M. C. (2009). Memory. New York: NY.
Kohl, D. (2011). IDIA 640 Human Computers and Cognition (2011). Class Notes from Dr. Kohl Ph.D.
Herrmann, D., J., Yoder, C., Y., Gruneberg, M., & Payne, D., G. (2006). Applied Cognitive Psychology A Textbook. New York: NY. Psychology Press.
Cover page image by Sebastiaan ter Burg
