Chinese Character Website
Project type: Individual
Timeline: Six weeks
An assignment for Mapping & Diagramming, a primarily print-oriented graphic design course at Carnegie Mellon, which I turned into a webpage to help non-Chinese-speakers understand the basics of China's written language.
During my first semester at CMU, I audited a Chinese language class for fun. I’ve always been quite interested in foreign languages as a hobby, but before last fall I knew nothing about Chinese characters. I didn’t realize that each character was made up of different combinations of components (of which there are over 200 in use today).
When I had to choose a topic for a project in my Mapping and Diagramming class, I knew I wanted to do something that could explain something about the complex Chinese character system to non-Chinese-speakers. I chose to design and build a website so that I could create an interactive "diagram" of the Chinese language.
By writing the content, designing and coding the website from scratch, and testing the webpage on inexperienced computer users and non-Chinese speakers as well as professors of Chinese and native Chinese speakers, I learned some valuable lessons about interaction design patterns. Discoverability is key: Some features that were only available on hover or by clicking buttons weren’t apparent to all users. (Of course, relying on hover doesn’t work for tablets and mobile phones very well at all!) Later, in my work at Fitbit over the summer of 2014, these lessons were reinforced in the designing and user testing I did there.
At first I wanted to have a modal or lightbox floating above the content, which would float upwards once the user was done reading it (version 1 and version 4, for instance). I scrapped that idea, because I thought it would be hard to balance the expected time spent on reading for both new users and experienced users.
By placing the Chinese characters along the top of the page flatly on a solid background (as in the two pink background screenshots above), I thought I had designed something elegant and modern, but many users did not see them as clickable. Even having the cursor change to the pointing hand when hovering on the characters didn’t tip them off, because many users didn’t hover on the characters to begin with. I think because of the paragraph below, the characters looked more like a decoration. I experimented with placing the characters inside flat buttons to improve discoverability.
Later I tried multiple color schemes, many of which ran afoul of Prof. Moyer’s eye (version 6, version 7, and version 8, for instance). I wanted to introduce color for visual interest, but at the same time, I wanted to make sure color, layout, typography, and images supported the main goal of the webpage, which is to explain the information.
In my next-to-last iteration, I thought I had a clever way of displaying explanatory text on hover. Unfortunately, it wasn’t so obvious to the people I tested the site on. I solved this problem in the final iteration via CSS animations that begin when the characters appear below. By automatically animating the explanatory sentences when the characters first appear, users will have to see the explanation—the site won’t rely on them hovering long enough (0.3 seconds or so) to trigger the animation, as it did before.