Adding more interactivity to the key

by Chelsea Cui, undergraduate research assistant, CMU

​Hi, it’s Chelsea again! This spring I have been working with Jaclyn, our new designer, on a revision of the Order level key. Based on our previous usability test results, this time we decided to focus on the improvement of interactivity and element affordance. We wondered if making the key clickable and having paths highlight would make the key easier to follow. Here’s Jaclyn’s rough prototype:

​Since the new key has more interactive features, it requires more customized HTML and JavaScript components. To implement the design, I first tried to use SVG (Scalable Vector Graphics) techniques that I learned from my web development class to draw the key  within HTML manually, but the outcome did not resemble the design well since it is hard to control the exact location of the endpoints of the lines.
 
In order to find a better solution, I did some research and found that Adobe XD, the design tool used by Jaclyn, can export graphic designs to SVG images. By loading the SVG image in a browser, I was able to get the code version of the design and move it to the html file. However, since all components in the image, including lines, dots, and rectangles, are represented as separate vectors in the code and there is no meaningful order, it is necessary to label all the components with meaningful names and group them into different classes before further implementing the JavaScript part.
 
At this point, I have added all the popup windows and labeled most order pictures, but I will not be in CMU during the summer, so this project is on hold. For future developers, I would suggest to follow these steps:
 

1. Inspect the page source.
2. Group components related to each couplet, including the rectangle and texts, into a <g> group and give it an id that can describe the couplet well.
3. Group the line vectors by path name and give them class = “path”.
4. Group the paths related to each couplet and give them a class based on the entities connected.
5. Use JavaScript to track the currently active couplets and paths, and change enable color change if a new option is clicked.