I met with Alberto Ruiz at the recent GNOME Summit in Boston, and we talked a bit about making some improvements to the GTK font chooser dialog. He had a cool prototype he shared with me and wanted to try to iterate to a good design trying a usability-based approach. (Yay! :) ) I promised him some work by the end of this week, so here it is. :)
Here’s the current GTK font selector UI:
Here’s the prototype Alberto coded up:
I started off by conducting a heuristic evaluation of both the current GTK font selector UI and Alberto’s prototype. The full heuristic evaluation is available on the GNOME wiki. What is a heuristic evaluation? It’s basically an usability expert walkthrough of an interface to compare it to a general set of heuristics, which are basically just best practices for interfaces. Honestly, it’s really just a fancy word for sanity-checking. :)
Next, I played around with some mockups that addressed some of the issues identified in the evaluation. I also added some ideas that Alberto and I had while discussing the project. Here’s one of the mockups; click it to see the full set:
There’s at least a couple issues still outstanding that the mockups don’t really address so well:
- The fonts are all presented in a flat list. I have several hundred if not over a thousand or so fonts installed on my machine. There are fonts of all different styles, character sets, intended usages, etc. It’s a lot to sift through. It’d be nice to see fonts by category or type instead. I have a really rough dumb mockup at the very bottom of the page as a first attempt to think of a way to address this, but, it’s terrible and has tons of problems. :)
- A lot of times multiple fonts in the font chooser show up exactly the same for me. It gets confusing because then I don’t know what the ‘true’ name of the font is that I’m seeing in the preview. While it isn’t mocked up, one idea I had for this is that a little foot note: “This font is an alias of foofont” could appear in small type below the preview text box.
- To the point the text previews aren’t relevant to real-world type usage – we also had an idea for auto-generated phrases that, if you couldn’t think of what to type in the preview, it would fill in for you. Maybe phrases that would show off common character combinations. Not sure. I didn’t mock that up, though.
Anyway, probably the next step is for me and Alberto to haggle over the feasibility of this first cut at mocking things up and come up with a design he could then implement as a testable prototype. One thing we talked about at the summit is that he could write a toy text editor that uses the new font chooser prototype. Then, I could run some usability tests on it. I had a cool idea for the usability test – I could hand the users a poster design that used a few different fonts in different sizes and ask the users to reproduce the poster to their best ability. Based on the test, we could discover any lingering issues with the design and hopefully iterate to make it better.
These mockups aren’t pixel-perfect of course; they’re exploratory to try to convey some new ideas. (for example, I know the slider tickmarks are ugly right now.) What do you think?