Attention-to-detail ’till you bleed

It’s amazing what you can spend half a day on. But in the end it meant bugs got squashed and text in notifications should look more sound now. Now the interaction designers need to make up their mind what’s the best default width for a notification-bubble. So I provide them with a gazillion screenshots. Clicking on any one gives you the full screenshot, so one can see the bubbles size in relation to a typical desktop-screen size. Doing that for other form-factor screens (e.g. netbooks) they can do themselves :)

This entry was posted on Tuesday, June 23rd, 2009 at 9:46 pm and is filed under notifications. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

26 Responses to “Attention-to-detail ’till you bleed”

  1. David Says:
    June 23rd, 2009 at 10:12 pm

    I think it was a half day well spent :)

    +1 for 361px (third to last)

  2. David Says:
    June 23rd, 2009 at 10:16 pm

    I take it back, 361px is TOO WIDE!

  3. hexa- Says:
    June 23rd, 2009 at 10:16 pm

    Actually i prefer the smaller ones, max 300px in width. the larger ones don’t give as much information relative to their size, they even seem kind of empty.

    thanks for your work.

  4. MacSlow Says:
    June 23rd, 2009 at 10:16 pm

    I’ll wait till tomorrow and see what Mat and mpt think. I’ll note you down for 26 EMs.

  5. Mathias Hasselmann Says:
    June 23rd, 2009 at 10:22 pm

    What about screen-width * magic number?

  6. Nathan Samson Says:
    June 23rd, 2009 at 10:23 pm

    22 or 24 em

    Note that I’m totally not a designer.

  7. David Says:
    June 23rd, 2009 at 10:46 pm

    Mirco, put me down for 24 <= x < 26. 26 is too wide!

  8. Ralph Aichinger Says:
    June 23rd, 2009 at 10:54 pm

    Thanks for refining this stuff!

    22ems for me!

  9. MacSlow Says:
    June 23rd, 2009 at 10:55 pm

    @ Nathan: I like 24 EMs best too.

    @ Mathias: That would be problematic. Just think of someone with impaired vision who needs a larger font. Your approach breaks there, as this person would get too much line-breaks for very little text. It has to be based on EMs.

  10. molok Says:
    June 23rd, 2009 at 10:57 pm

    What about something like ~20% of screen-width?

  11. James Says:
    June 23rd, 2009 at 11:05 pm

    @MacSlow: It’s not *that* problematic. Just throw in another variable or two, like so:

    screen-width * magic number 1 + DPI (or font size?) * magic number 2

  12. MacSlow Says:
    June 23rd, 2009 at 11:13 pm

    @ James: notify-osd does it like this actually … pixels_per_em = system_font_height * 1/72 * screen_dpi there are no magic numbers. All measurements in notify-osd are in EMs.

  13. MacSlow Says:
    June 23rd, 2009 at 11:33 pm

    Here are some examples. For a default bubble width of 24 EMs you get…

    font: Candara 9
    dpi: 100
    pixels/EM: 12.5
    bubble-width: 300 px

    font: Sans 10
    dpi: 96
    pixels/EM: 13.33
    bubble-width: 320 px

    font: Candara 9
    dpi: 96
    pixels/EM: 12.0
    bubble-width: 288 px

    font: Candara 8
    dpi: 144
    pixels/EM: 16.0
    bubble-width: 384 px

  14. Andrea Cimitan Says:
    June 23rd, 2009 at 11:46 pm

    20 or 22, NOT 24.

    Please remember that with netbooks (10.1″ widescreen) the correct DPI setting is 117 and not 100.

  15. ethana2 Says:
    June 24th, 2009 at 12:15 am

    25% of screen width or 250 pixels, whichever is greater.

  16. ethana2 Says:
    June 24th, 2009 at 1:00 am

    ..or, make it something the user can change, and after six months, query the most popular settings, figure out why they\\\’re that way, and update the default, while retaining the configurability..

  17. MacSlow Says:
    June 24th, 2009 at 1:19 am

    @ Cimi: Actually it’s not 100 DPI, but 133 DPI. I just measured my Dell Mini 9’s screen (1024×600, 16:9) with a ruler:

    195 mm * 113 mm (~225 mm diagonal)

    in inch that is

    7.67″ * 4.44″ (~ 8.9″ diagonal)

    So 1024 / 7.67 = 133.5 and 600 / 4.44 = 135.1, thus I “average” it at 134 DPI. Also you have to take font size into account. With those 134 DPI and “Candara 9″ 20 EMs bubble width would be 297 pixels wide (22 EMs -> 327 pixels wide). That’s too narrow. 24 EMs are 357 pixels wide and looks much less cramped.

  18. fazil Says:
    June 24th, 2009 at 6:46 am

    Hi Macslow

    I think you should work on gnome themes also. Make the themes in ubuntu slim and perfect. The window borders thick look is so bad and wastes space. Looking at this notification, I feel its so modern and does not match with the existing gnome desktop.

  19. DanRabbit Says:
    June 24th, 2009 at 7:14 am

    I’m going to have to vote 24 EMs as first choice and 22 EMs as second choice. 26 is just too big for me. It looks kind of empty, and anything less than 22 looks kind of squished.

  20. Tim Fuchs Says:
    June 24th, 2009 at 11:37 am

    22 or 24

  21. Adam Says:
    June 24th, 2009 at 12:35 pm

    Could this be a config option somewhere but with a sensible default (26em +1)? People might well want to change the size depending on screen size/resolution.

  22. Daniel Schierbeck Says:
    June 24th, 2009 at 3:48 pm

    +1 for 361px

  23. Ryan Says:
    June 24th, 2009 at 6:43 pm

    24

  24. onox Says:
    June 25th, 2009 at 12:32 am

    22

  25. Greg K Nicholson Says:
    June 25th, 2009 at 6:46 pm

    Oo! *I* want to paint the bikeshed too! It should definitely be 25em.

  26. Karl Lattimer Says:
    June 25th, 2009 at 10:45 pm

    333 for the win :)

Leave a Reply