SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,528
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Spacing around Icons

    How much white-space should I leave around an Icon that I create?

    For example, let's say that I create a "Star" icon to be used on a webpage that is 10px by 10px.

    I would think you'd want a small amount of white space around it - almost like Margins/Padding in CSS - but I don't know what is "Not Enough" or "Too Much"?!

    (If I had to guess, for a 10px by 10px star icon, I'd say maybe 2-3 pixel white-space margin...)

    Any suggestions?

    And is there maybe a "formula" to use in other situations?

    Sincerely,


    Debbie

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Well, if it are icons just for the design, it doesn't matter too much.

    But if it must be clickable icons, then the usability comes around the corner.
    Try to hover over the different 10x10 icons (they have already 5px space between, not 2-3 pixel), and imagine you have to click on 1 of them:



    That's asking quite a lot of fine motorics.
    Especially if you have a high resolution monitor with small pixels! - And mobile devices with touch screens are another story...

    For the usability for the average mouse user the icons have to be at least 15x15px I think, and have a clickable area of at least 3 4px around them. That is about 7px between 2 icons.



    Here the "Fitts' Law" is playing:

    But proof & pudding: a test page on screen can tell everything.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    is there maybe a "formula" to use in other situations?
    These days we have to consider touch screens (such as tablets and mobiles, where you finger touch the interface rather than point with a mouse). Like it or not, many people access sites via these now. The general guidance is to give the user a clickable area of some 40x40px. Sounds a lot, but you try to click some of the tiny icons you find all over the web (including here) with your finger, and I defy you not to grind your teeth in frustration.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,528
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was wrong in my OP. It looks like the Red Flag I have been using is 20 by 22 pixels. (Not exactly gigantic, but bigger than 10 x 10!)

    What do you think about how Gmail and Yahoo Mail implement the "Important Message" column using a Star?

    Is the Star big enough - at least for desktop users?

    Sincerely,


    Debbie

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,528
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    BTW, Francky...

    When I asked about the margin around an Icon, I was actually more interested in the Top/Bottom Margin, because...

    a.) I think I already have a decent sense that you need "elbow room" between items

    b.) Since this is for a Sprite, and since Sprites can be as big as you want and yet not take up actual space, I would think a person would want to be "generous" with the spacing *between* Icons on a Sprite, right?


    But what about the Top/Bottom Margins?

    One extreme would be to have *No* Top/Bottom Margins, and just have spacing between each Icon Left/Right...

    That would make life easier when it comes to figuring out how big to build things. And I suppose you can always use Margins/Padding in CSS to give you more Top/Bottom room if needed, right?

    See what I mean?

    Sincerely,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •