Larry Osterman's WebLog

Confessions of an Old Fogey
Blog - Title

When you do UX work, sometimes you have to worry about the strangest things…

When you do UX work, sometimes you have to worry about the strangest things…

  • Comments 31

I recently got a bug reported to me about the visuals in the sound control panel applet not being aligned properly (this is from the UI for a new Windows 7 feature):


The problem as reported was that the microphone was aligned incorrectly w.r.t. the down arrow. – the microphone was too far to the right.


But if you look carefully, you’ll see that that isn’t the case – drawing a box around the controls makes it clearer:

imageNitpickers Corner: For those of you that love to count pixels, it’s entirely possible that the arrow might be off by a couple of pixels but fixing it wouldn’t fix the problem, because then the arrow would be off-center with respect to the speakers.  The real problem is that the microphone icon is visually weighted to the right – the actual icon resource was lined up with the arrow, but because the visual weight was to the right, it displayed poorly. 


It turns out that there’s really no good way of fixing this – if we were to adjust the location of the icons, it wouldn’t help, because a different device would have a different visual center (as the speaker icon does)…


Instead, we looked at the visuals and realized that there was an alternative solution: Adjust the layout for the dialog and the problem more-or-less goes away:


The problem still exists at some level because the arrow is centered with the icons but some icons (like the stalk microphone above) are bottom heavy.  But for whatever reason, the visuals aren’t as disconcerting when laid out horizontally.

As I said in the title – sometimes you need to worry about the strangest things.

  • I do a lot of typography work, and I run into the same problem. Even when character bounding boxes are aligned on a margin, their visual weights might create a ragged impression. Fixing this problem automatically is... non-trivial.

  • While you are it:

    Can you explain why the font used in these dialogs is Segoe UI 8 points instead of 9 points like in other UI new to Vista? :)

  • Mike: Beats me.  All the volume UI uses 8 point Segoe UI.  

    Looking through the Windows code, there doesn't appear to be any standardization of the font size in dialogs.  Some are 8 point, some are 9 point, some are even 10 point.

    And the sounds control panel is NOT "new to vista".  Even though the UX did go through a major rewrite in Vista, it still has its basis in the old Windows XP sounds control panel.

  • Why not use an icon of a handheld microphone?  

  • Why didn't you just leave the images bounding-box aligned and leave the problem of "visual weighting" up to the people who draw the pictures?  They could nudge the microphone image so it has less whitespace on the left and more on the right (and similar changes for any other device images that are visually off-balance).  Aren't you going to end up with a similar problem if there are device images that are off-balance top vs bottom?

  • File as:  Not a bug, will not fix.

    It's impressive that someone else noticed it and took the time to file a bug and more impressive that you guys invested that much effort to fix it.

    In another company I think that would have been filed as:  Will not fix.

  • FYI - you can get rid of the red border in the snipping tool.  Go to options and clear the "show selection ink..." checkbox.

  • Mark Sowul: THanks for the suggestion.  

    Ryan: In this case, we wanted to rework the location of the arrows anyway and this kind of thing bugs the heck out of me.

    nt: The image can come from the audio device manufacturer, we don't control it.

    Slackmaster K: Beats me why the artists drew a stalk microphone, my guess is that it was easier than a handheld microphone (but I don't know).

  • I'm not a doctor but I have a hunch that being really bothered by things like this is diagnosable as something.  Heck, there's probably already meds that will make it all ok.

  • Clearly icons need to have a "center of mass" property. :)

  • "Some are 8 point, some are 9 point, some are even 10 point."

    Maybe the question should be, why is it so difficult to make font-sensitive dialogs in Windows? IMO it is an error -- though an incredibly common one! -- for a window not to pick up the system font. I had to write my own layout code which was a giant pain -- especially as there are no APIs to "get the size of this control with this label using this font" -- so I can see why not many people do it, but it's something the OS could really improve on.

    I suppose the solution is C# but there still seems to be an awful lot of code that isn't using that stuff, and the C# GUI toolkits have problems of their own.

  • I'm curious: from a process POV it was easier to re-layout the dialog, test that in n languages than to get some more icons drawn up by someone who isn't a rather senior technical guy? Seems a curious one. Although it's possibly a good sign for Win7 if those are the only bugs you've got left to finish (or this was one of those "lessee, 30 minutes to EOD" ones).

    Perhaps rather than 3 separate icons, write a brief to the artist for a vertical image (or is the dialog fancy and use different depth icons depending on the screen?).

  • (sorry to double post) Another solution is to delete the icons entirely. Not sure they add much value.

  • This is the kind of bug which should be solved because otherwise you give the impression of not caring about the product. Beside, it's the typical bug you risk the CEO (or some other powerful entity) passing by and saying "you still haven't fix those icons ?!".

    Top to bottom is less a problem because the world we live in is full of left-right simmetries (starting from the human body) but lacks in top to bottom ones (thanks gravity).

  • @DanT Although I also would think that this almost is a kind of ocd :-), @Michael G raises a valid point: My first thought also was to say: Well, why doesn't a specific image attribute exist, that tells us the visual center.

    But next thought was: There must be a statistical approach to calculate the visual center. And after a short search I stumpled upon:

    So I guess one could really solve this automatically (but it would be a little too much programming for such a tiny (still annoying) problem - at least for me (but maybe not for microsoft)) :-)

Page 1 of 3 (31 items) 123