ElementsJoanna Roguska4/19/2010

Project GoalThe 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.

ScopeEstimated time: 10 hours Actual time: 8 hoursAssets: Canon 40D digital camera, Photoshop, Notepad, Text Wrangler, FileZilla, PowerPoint

Production GuideThe 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, #054d40Teal: #07a3acPink: #ff0099Yellow: #ffba00Orange: #ff7200Black: #000000

Fonts:Title: Giddyup at 112 pointsTagline: Swatch it at 21 pointsInstructions: Swatch it at 17 pointsElement symbols, name and properties: Verdana because of its good legibility at small sizes

First Mockup

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.

Persona 1: Steven

Persona 2: John

Persona 3: Monica

Second MockupFirst 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.

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 oneP.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 anelement....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.

Feedback ContinuedUser 6: I like the features but wish it was modeled in the sequence of theoriginal Periodic Table of Elements, because 1) that flows in order, leftto right, from smallest to highest, based on Atomic number; and 2) whenyou memorize the original Periodic Table of Elements, it throws you off tosee them in a different order.

ConclusionsThe most common suggestion was to use the order of Periodic Table butmy intention is for students to be able to recall the information evenwhen an element is taken out of context.

Users who are not recent chemistry students seemed confused butsince this learning aid is meant for chemistry students, I believe thatthey will be able to quickly understand the goal of this exercise.

I changed the background color from yellow to brown to keepit more subdued and less distracting from the page’s content.

URLhttp://iam.colum.edu/students/joanna.roguska/html/chemistry.html

chemistry.html chemistry.csschemistry.js

CreditsPhotography and page design by Joanna Roguska