Still More Button Redesigns

Edited to add: The buttons displayed in this post have changed, due to issues raised in the comments. 

When your customers are not the technically sharpest knives in the drawer, sometimes I think a little redundancy can be a good thing. Working from Oliver’s quite helpful comment on my download page redesign I decided to make some adjustments to my buttons.

My old Download Free Trial buttons:

Download Bingo Card Creator Free Trial

My new buttons:

What has changed? Well, the buttons are actually the same size now (did you catch that? Eight pixels is hard to see!), I have gone to freaky lengths to make sure the common text is in the exact same places* (took about an hour of per-pixel adjustments… grrrr, it would be better to have layers in the icon editor), and I’ve added some explanatory text to make it absolutely obvious to everyone that the image is, indeed, a button. The little embossed cursor was a little finishing touch. I guarantee you 25% of the clicks on the button will hit the cursor.

* Edit to add: back to the drawing board. I didn’t realize I had flopped this up until I saw them laid out vertically.

**Edit the second: Fixed, by taking three constituent images in Axialis, exporting them as GIFs, and using layers in Paint.NET to compose them by hand. That was overkill but it saved quite a bit of time since I was using a hammer to drive a nail rather than a screwdriver — when you need images to line up perfectly, you need layers. Sorry, I sometimes get tunnel vision for little details.

Advertisements
Explore posts in the same categories: Uncategorized

7 Comments on “Still More Button Redesigns”

  1. Magnus Says:

    Patrick,
    on both of these new buttons, the “F” in “Free” is very close to the border without any margins. The text looks cramped in there. Maybe you can have the “Free Trial” centered on the first row and “for Windows” and “for Mac” on the second row?

    /M

  2. Oliver Says:

    Hi Patrick, I’m glad you found my comment helpful!
    I agree with Magnus. On big spacy buttons like that it is important to keep text and graphics away from the edges, and from each-other. Shrink the font size if necessary. You’ll get more impact from smaller-text-with-space-around-it than from large-text-crammed-in-small-space. You may consider changing the text to: “Windows/Free trial” and “Mac/Free Trial” That will take less space and has fewer words to read. “Click to download” could go down in size, and could be a different color to set it off (blue and underlined?). If the text gets fuzzy as the size goes down, turn antialiasing off for that text. Take the mouse pointer away from the corner too.
    I use inkscape to do my graphics. It’s not Corel-anything, but it’s free and it works well for making exactly these things. The downside is there is a learning curve…

  3. dionea Says:

    Patrick,

    I don’t think your use of the Windows logo is kosher. I say this because we’ve gone to great lengths to certify our product for Windows. As a signed and certified member of a Windows logo program, we’re very restricted on how and where we can use the logo. As I read the rules, you’re not allowed to use it at all. See the Logos section on http://www.microsoft.com/about/legal/intellectualproperty/trademarks/usage/windows.mspx and follow the link to the logo programs to learn more.

    I’d love to be able to use the logo as you have done, but I won’t put my partnership with Microsoft in jeopardy. It makes my job harder when other ISVs flaunt the rules 😦

  4. Patrick Says:

    Thank you for pointing that out. While I think that is a frankly stupid policy which actively damages the user experience for Windows users vis-a-vis Mac users on my site, I will edit the logo for compliance with their wishes when I get a minute or ten to do so.

  5. dionea Says:

    I’m sure Apple feels the same way:
    http://www.apple.com/legal/trademark/guidelinesfor3rdparties.html
    “Apple Logo and Apple-owned Graphic Symbols: You may not use the Apple Logo or any other Apple-owned graphic symbol, logo, or icon on or in connection with web sites, products, packaging, manuals, promotional/advertising materials, or for any other purpose except pursuant to an express written trademark license from Apple, such as a reseller agreement.”

    I agree it makes web site design harder. But trademarks are intellectual property. Just as I’m sure you wouldn’t intentionally violate someone else’s software IP…

  6. Patrick Says:

    Well, on the plus side, that makes the decision of “So do I leave the icons asymetrical or not?” easier.

    If you’ll allow me one pointy-headed objection: I was not violating their trademark, I was violating their guidelines for using their trademarks. Respecting those is a matter of professional courtesy, not a matter of them being capable of convincing a court to coerce me to comply — I can licitly use their logo to identify their own products in the same way as I can licitly use their trademarked product names to identify their own products.

  7. Dan Says:

    Are we all commenting on the same post? I’m confused.

    Anyway, from what I see, you need a graphic designer 😉 White text on a light orange background doesn’t have enough contrast and makes the text hard to read.

    I would suggest to move the mac/windows text off to the right side and make the buttons two columns. Then I would make the background of the right side white with small black text saying Mac or Windows. This brings attention to the differences in the two buttons.

    I would then make the text on the right say “Download\nFree Trial” – In black or dark blue or some colour that is high contrast with orange. Then to get the explaination in there about the clicking thing, I would place a link (standard blue colour) underneath the button saying the same thing, then, you’re covered.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: