Font selection mockup: Proposal #2

After collecting some feedback and following some of the threads that have been started up, I've decided to do a second thought about my first proposal.

It had too much uncovered use cases, and still it didn't solved some major problems from the current one. To save some time and try to focus on the UI design issue, I decided to just do an inkscape mockup instead of a working solution.

This proposal tries to solve a few problems, and it's somehow inspired by gnome-specimen from uws. First, it gives an overview on how each style would  look like without the need to click on each of them, and it grants more space for the preview. It also adds a way to search for certain typeface classes, monospaced, language specific using a thunderbird like search box.

Some problems that I'm not sure how to solve here is, how to properly let people edit the preview text, I think that the entry box on top is fine, but I have the gut feeling that it could have problems. Also, I'm not sure how hard to implement the search box would be.

Anyway, feedback, again, is welcome.

Comments

[Chris Jones]

I wonder if grouping the fonts in the list by family or (if possible) their primary codeset focus would be a good idea (e.g. showing fonts focussing on international character sets in sections, so a "Latin" section, a "Hindi" section, "Arabic", whatever).

However, my main suggestion is the font size - could this not be a textbox with up/down arrows next to it? I think it looks a bit ugly to have 16.0, and a dropdown is never going to give a good range of fractional sizes. I'd prefer to default to an integer value, but be able to type in a fractional one (which I do, because I am very boring about tweaking my fonts ;)

[Patrys (Patryk Zawadzki)]

How about "Search for fonts containing these characters"?

[David]

I don't like the idea of having a drop down within what is essentially a modal dialog. I opened the font dialog to select a font, and now I have to open the search drop down to find the correct type of font... Makes more sense to me to increase the size of the font dialog (it is modal so who cares how big it is), and make the search area multi-column with the attributes. Then make the search a smart search so "cyrillic" finds all fonts which are named "cyrillic" or have the "cyrillic" attribute.

Also why the preview text box, just make the display widget an entry box.

[Patrys (Patryk Zawadzki)]

Also:

I'd move the filter selection to the left (and make it change the icon according to the selected mode) and add a "clear" icon to the right. See Firefox's search box next to the address bar for an example.

Other than that: a huge improvement.

[Sandy]

As already mentioned here:

http://blog.squidy.info/2008/08/14/a-new-font-dialog/en/

You don't need a search field; gtk+ treeview already has searching built-in.

I like this version a lot better than your first one, good work!

[Frederick von hugo]

Looks great.

Out of curiosity, are there even any programs that use the Gnome font selector?

[Wouter]

Don't let them edit the preview text. Don't make things more complicated than necessary. It is for a quick preview and if you want more you can just apply the font.

[Walther]

Patrys said:
> How about "Search for fonts containing these characters"?

I don't know much about non-latin fonts and languages, but that sounds like an excellent idea. Just input some text and get all the fonts that support that.

[Jerome Haltom]

I'm sure you've seen Window's desktop theme font selection dialog. It shows actual samples of how the desktop will look. You know, it's 'usable'. We should just copy it.

[Kevin Lange]

Little something I'm working on:
http://random.ogunderground.com/gtk-font-select.png
Look familiar?
Haven't implemented search yet, but everything else there works. Too lazy to fix the font list sorting at the moment.

[dpierce]

I agree with Wouter: no need for the vast majority of users to edit the preview text. If you want, implement an "extended preview" or "character map" button that pops up something which lets users go into greater depth. Or create a preferences thing which lets the user persistently set the preview text.

Another idea might be to do a simplified dialog, with a button for "expert mode" which lets advanced or picky users fiddle with all the bells and whistles.

I think what's really missing in all of this is that in a real type catalog you might have a human editor who sorts typefaces in a useful way-- "Standard Typefaces" "Fanciful Typefaces" "Domain Specific Faces", "Interoperable Typefaces" "OCR Compatible Typefaces" etc. Having to sift through a giant list of typefaces of varying levels of usefulness is annoying.

This is a very hard problem. If you haven't looked at it already, I would highly recommend "The Elements of Typographic Style" by Robert Bringhurst. It might inspire you. And it's a very beautiful book to own.

[Matt]

Hi,

I did a quick search of the net to see what other OS's/Applications had come up with.

I found this site:
http://www.unifont.org/fontdialog/

This persons analysis is quite good but i do not agree with "the solution" which strikes me as very messy.

Apple's selector seems the nicest and exposes more settings then most basic font selectors (which i think is a good thing).

Here is a link to a screenshot of Apples font selector:
http://www.unifont.org/fontdialog/images/TexEditPlusUsingMacOSXFontDialogComponent-WebVersion.png

I also like the collections/categories that Apple has to help sort fonts.

Anyways hopefully this provides some more food for thought.

[MaTT]

Hi again,

Following on from my previous post, here is a little mockup of my own:
http://picasaweb.google.com/matthew.joseph.mcgowan/DropBox/photo?authkey=EH0mZfIVF_g#5236472821817427266

(Hope the link works for people)

[Kieran]

I think that if fonts are grouped into categories, both:
1) Fonts need to be able to be in multiple categories. This is fairly obvious.
2) The categories must be objective, not subjective. As an example, fixed-width is objective, while "fun" is subjective. I think Apple has got this wrong. If people really want to be able to classify fonts like that, there could be an option for users to create a new category and add fonts to it (that persist across applications). [For example, a user could right-click on some selection of fonts and choose "Create new category" or "Add to category -> [submenu]".] Users searching for fonts can then put in category or font names, and both can be found.

Other things:
- It might be good if the most recently used fonts were displayed first. Could a persistent list be kept across applications? Or should only the recently used fonts for that application or document be shown? (or some combination of these)

[bisho]

The hidden category selector for filtering by category (chinesse, bold, script, fun...) is really nice.

Right click on a font should let you add it to a user defined category, right?

Some suggestions:

The list of fonts will be nicer if has two columns:

[ font name (in regular font) | font preview (the text to be previewed) ]

When you select one, the list hides the preview column, and the typeface selector appears showing samples of bold, italica, condensed... A < mark in the divisor let you return to the list with previews.

If you could manage how to add a comparison tool to this font selector will be amazing. I talk about this in the previous post. When you are looking for a font for a project, you usually have to compare several typefaces. I have to do it by cloning the text, and applying diferent fonts.

If the selector itself allow me to add several fonts to a "selected for comparison" list when you are scanning through your font collection, and let you compare a them at the end, will be simply amazing.

[Jeremy]

Looking at your first proposal, I see that you originally thought to display the name of each font listed in its respective font. While I agree with the comments others made that font names should be listed in the system font, to ensure visual consistency and readability, I fell that a quick preview of each font is nice to have, so that one doesn't have to select the font to see what it looks like.

One way to accomplish this might be with a tooltip containing a "Normal" style font preview that pops up immediately to the right of the font list, aligned with the edge of the list and the top of the font being hovered over -- not with the cursor -- so as to avoid obscuring the list (something like http://msdn.microsoft.com/en-us/library/ms228282.CompletionList(en-us,VS.90).png is what I have in mind, with regard to alignment). This tooltip would ideally pop up without any delay when the cursor hovers over the font name, as I don't feel a delay would serve any genuine purpose here (the point is to have an immediate, no-click preview, after all).

Anyway, assuming that all makes sense, I think that would be a reasonable solution. I like what I'm seeing so far with your proposals and hope that something like these actually gets committed, as font selection is definitely a week point in Gnome.

[Matt]

Quote:
"The list of fonts will be nicer if has two columns:

[ font name (in regular font) | font preview (the text to be previewed) ]"

This is similar to what Adobe does:
http://onlinephotoshop.lakcas.com/img4.jpg

[Patrys (Patryk Zawadzki)]

Sandy:

It's not a "find" type of box, it's a "filter" one. It's by no means the same thing.

[dave]

Have you looked at the Pencil Project for doing GUI mockups?

http://www.evolus.vn/Pencil/Home.html

Not used it myself but it looks good.

[Matt]

I Updated my mockup based on some ideas in the comments.

http://picasaweb.google.com/matthew.joseph.mcgowan/DropBox/photo?authkey=EH0mZfIVF_g#5236539148305986962

[Gen Zhang]

You could make the preview text editable. It would be a simple case of discoverable interface.

[Bookkeeper]

First, the preview area is taking up too much space, and takes the attention from "selecting" a font (which would be the most used purpose of the dialog) to previewing it. As someone who deals with fonts a lot, using this dialog would be very tiresome, since I'm already familiar with how fonts looks like - there is no need to show entire previews each font set. Why not make a box that shows the preview set, instead of implementing it in the selection dialog? It would be very tiresome when I have to select a font and I know font I want to use. For example, if I want to use Sans Bold Italic, I'd process less information by simply clicking on "Bold Italic" than scrolling through slabs of placeholder("a quick fox..." text.

I think the hierarchal views used on OSX's dialog is ideal. Personally, I prefer the use of the "Miller's Column" type UI where ever sorting of information and data is needed, and for fonts, which have extended families, subsets, branched font files and whatnot - this would work great.

[Cyril]

I think another problem is that the font namesa should be written in their own font... I don't know the names of all the fonts, but I do know -visually- what I'm looking for most of the time. Having to select each font at random to see what it looks like is a huge pain.

[bill]

To all the people wanting even faster previews: what if he kept it the way it it, but in the list on the left, you can click and drag down the list, seeing all the fonts you pass over without releasing the mouse button?

[Daniele]

Think about a listbox for "library". A concept usefull to load groups of fonts already present in Adobe Type Manager.

Obviously, this kind of things need more work on X side.