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:
Comments are closed.
|
Project TeamAn interdisciplinary team Categories
All
Archives
June 2023
|