1. Elements Joanna Roguska 4/19/2010

2. Project Goal The goal of this project is to provide a learning aid for chemistry students who are challenged to memorize element properties. It will take a form of online interactive flash cards. Objectives The objective of the project is to create a collection of elements symbols that will reveal elements name on mouseover and open a window with more properties when clicked. The interactivity will be build in Javascript. I will solicit feedback from chemistry students to modify and improve this learning tool.

3. Scope Estimated time: 10 hours Actual time: 8 hours Assets: Canon 40D digital camera, Photoshop, Notepad, Text Wrangler, FileZilla, PowerPoint Production Guide The look and feel of the project is clean, bright, organized, fun, and scientific. For imagery I chose my photographs of a mineral rock and a shiny bottle to connect them with what usually can be found in the chemistry laboratory. The color palette will be based on greens of the bottle and purples and pinks of the rock. For actual elements symbols I will go with yellow and orange which are usually associated with learning, energy and optimism. Visual Specifics Greens: #0d705e, #054d40 Teal: #07a3ac Pink: #ff0099 Yellow: #ffba00 Orange: #ff7200 Black: #000000 Fonts: Title: Giddyup at 112 points Tagline: Swatch it at 21 points Instructions: Swatch it at 17 points Element symbols, name and properties: Verdana because of its good legibility at small sizes

4. First Mockup

5. User Interface Design The students will be interviewed and asked the questions below: Questions: Do you need to memorize elements properties? Do you ever use flash cards to study? How do you review for exams? Do you prefer to study from textbooks or online materials? Do you think that the project is a valuable study aid? Do you have any suggestions to modify it or improve it? They will be asked to interact with the site and their feedback will be requested.

6. Persona 1: Steven

7. Persona 2: John

8. Persona 3: Monica

9. Second Mockup First round of comments suggested using a grid structure for elements. The previous random arrangement was supposed to make users aware that they are tested at random and that there is no particular order to elements because a student is supposed to know an element even if it is taken out of context. I modified the layout but I kept a random order of elements. I presented them in a grid structure that aligned them visually.

10. Feedback Yue: Perhaps it may be obvious to scientists. As I am not one, - I have changed by legions long ago - it took me a while to understand what the word 'elements' is. Perhaps it may be beneficial to have an intro on what elements are? That is all from my input. P.S. Why can I not click on the rock? Best, Yue Dorota: is there any key in this order? like e.g. Mendeleev's table? if no, I think I would prefer an alphabetic one P.S Yue, the rock has got too many elements to display:) Olga: The colors get on my nerves. Maybe too strong or maybe mismatched. I agree with the order. User 4: Nice... took me a minute to figure out the popup when I clicked on an element....it showed up on a different screen on my multi-screen setup... it would be nice if that info could appear right on the same screen... maybe in place of the rock pic. User 5: Like the look, the ease of use, and wish I had had this in Physics class! Gives the useful info on each element.

11. Feedback Continued User 6: I like the features but wish it was modeled in the sequence of the original Periodic Table of Elements, because 1) that flows in order, left to right, from smallest to highest, based on Atomic number; and 2) when you memorize the original Periodic Table of Elements, it throws you off to see them in a different order. Conclusions The most common suggestion was to use the order of Periodic Table but my intention is for students to be able to recall the information even when an element is taken out of context. Users who are not recent chemistry students seemed confused but since this learning aid is meant for chemistry students, I believe that they will be able to quickly understand the goal of this exercise. I changed the background color from yellow to brown to keep it more subdued and less distracting from the page’s content.

12. URL http://iam.colum.edu/students/joanna.roguska/html/chemistry.html chemistry.html chemistry.css chemistry.js Credits Photography and page design by Joanna Roguska