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.
Click to be taken to the webpage in its final form.
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.
My initial plan was to hang a larger poster in the humanities building, as the class was mainly focused on print design
Over the course of six weeks, I decided that a screen would provide a much more appropriate environment for this information. I was excited about the opportunities that progressive disclosure and animation could provide for explaining about the Chinese language. Once I developed my content (which wasn’t easy to do without making misleading claims about the language), I spent most of the project time iterating on my web design.
My multiple iterations
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.
The final version, shown here as it would appear after the user chooses a character to learn about. Click the image above to go to the actual webpage.
Credits: audio by Jessica Wang. Some content comes from a draft of a book by Prof. Huiwen Li. Special thanks to Profs. Sue-mei Wu and Yueming Yu for their advice.