Implementing the clickable Order level key

by Chelsea Cui, CMU undergraduate researcher

Hi, I'm Chelsea, a third-year undergraduate in Information Systems with a double major in Statistics and Machine Learning. I started on the macroinvertebrates.org project last fall because I was interested in building platform that assists people with online learning. Since I started, I have worked on a few different parts of the project, including log file analysis and development of the mobile app. Right now, I'm working with Jamie to build an interactive Order level key. 
 
We want something to help new users who don't know the insects very well. I took the initial layout by Jamie and made clickable versions. With HTML and CSS, I added hyperlink sections to the couplets in the key, and also implemented pop-up windows on each of them to show the corresponding diagnostic characters.  This version is just a quick prototype. I am doing usability tests right now to get feedback before making the final design.
 
In the first round of tests, I found out that our current key design doesn’t look interactive enough to many users. Users may not think the key is clickable because the buttons are kind of simple and plain. For the next step, I’m planning to focus on the interactive design and create several different versions of the key to do more usability tests.
 
The initial version of this key is live on the new site now. Check it out here! (http://macroinvertebrates.org/key).