“Build something for yourself”
A designer friend once asked me “Can you identify fonts?”. I thought to myself, “Why? I have a Chrome extension for that.” Well, that question continued to bother me. I didn’t lose sleep over it, but it nagged me enough that I decided to address it with this quiz. For this reason, I think it falls in line with Jason Fried’s advice to make something for yourself.
Why no or little styling?
I’ve chosen to focus on the early steps in the interface design process and reserve styling for later. I’ve tried the opposite approach – focusing on things like color, typography, etc. and trying to make things look great from the start – but that always delayed project completion and left important problems unsolved.
I wanted to build a typography quiz that helped my eyes focus on the anatomy of a specific font. I’ve tried a few other quizzes, but none did this for me.
I won’t cover every step, but I’ll touch on the points that provide a window into my design process and thinking.
A List for Success
I put together a list of things that I felt the quiz needed to achieve or account for in order to be a success. It’s not a list of requirements or implementation details.
Moving through the quiz
I had a general idea of how the quiz taker would flow from choosing a quiz on the home page, to answering questions and ending on the final page where they receive their score. To make sure I had this and other paths imprinted on my mind, I used a shorthand for UI flows.
Sketching the Question Page
After drawing the flows, I began sketching pages. I decided to sketch the question page first:
I started here because this is a screen that quiz takers must succeed at in order to progress to the end. It’s also the simplest screen (fewer elements pointing to other aspects of the domain) that allowed me to think about how the quiz works and where data is coming from.
Starting with the epicenter
I started my design work with the most important part of the screen (the epicenter). This screen seems to be 90% epicenter – the giant word typed in a specific font and the answer choices – but I decided the epicenter was the giant word and more specifically the ‘highlighting’ of that word’s anatomy. I explored a few options before landing on the dashed circles and lines. There are probably more clever ways to do it, but this approach did the job and allowed me to move forward with the design.
Final Score Page
Quiz takers enter through the home page, go through a series of question screens, and end on the final score page. What would I expect to see after I answered the last question? For me, it was the following:
the correct answers
some explanation for each answer
my options for where to go next
some indication of how awesome I am (or not)
I don’t want to travel to other pages to satisfy these points
how I did compared to other quiz takers
The last point seemed beyond the scope of the project (probably good for version 2). Taking the previous points into consideration, I again started with finding the epicenter and working outwards.
The most important part of the screen was the score. I wanted to make it a large number or percentage, but decided against that idea since I think percentages are only good when a large number of various types of question are involved. Using the “5 out of 5″ approach works well because there are only 5 questions and each question is basically asking the same thing: what font is this?
The “review your answers below, replay or take another quiz” sentence addresses the second most important question: “Where do I go from here?”.
The “review your answers” section was the third most important part of the screen and it gave me the most trouble.
In considering the context surrounding this review section, I came up with a list of questions/concerns/forces that I felt the design had to resolve:
What is the correct answer to this question?
What was my answer?
I want to know almost immediately whether my answer was right or wrong
I want some explanation for the answer
The elements and their arrangement on screen form the pattern that I settled on after several iterations. Below are my sketches of those iterations:
Home Screen Copy
I wanted to focus on clarity and making the copy work for it’s place on the screen. I re-wrote the sentence on the home page “Take the System or Web Fonts Quiz” many times. I didn’t want to rely on two big buttons or something ‘graphical’ that was labeled “System Quiz” or “Web Fonts Quiz”. Using a single sentence also allowed me to focus on getting the point across as quickly and clearly as possible. For example, one iteration of the sentence said “Take the System Quiz or Web Fonts Quiz”, from which I cut out the repetitive use of the word “quiz”.