0

I've created a "Hire Me" card to display on my website and am looking for some feedback.

Live Demo

What I want to know:

  • Is this a place where I can use a 'ghost button'?
  • Is the font readable enough (especially on the 'hire me through fiverr' text)?
  • What can I do to the fiver logo to point out that it's clickable?
  • How would I go about finding a good spacing between elements?

cardclicked card

  • 1
    Hi Sam, welcome to UX.SE. To keep your question on the site, you'll need to change it to focus on a User-Experience topic. For example, "What type of button design works best for ad click-through?" or, "Which color combos attract viewers to ads?" The goal is for other readers to get value from questions, not just the asker. – Alan Aug 28 '17 at 17:22
  • I think your biggest problem is teh person floating and falling back. Also, on teh live version, why do you have 2 steps? the hire me button should go to teh page directly, it's really confusing, And your rounded fiverr element with square shadow is really weird, get rid of the whole second card altogether – Devin Aug 28 '17 at 17:48
  • @SamApostel I think he means the fact that you're standing there leaning back on something that is not there, it creates a sort of disconnect making it look like the person is just walking in a odd way or floating there. – DasBeasto Aug 28 '17 at 18:38
  • @DasBeasto yes thanks, my original design had a slanted “floor” at the bottom, would that help reconnecting the image? – Sam Apostel Aug 28 '17 at 18:45
  • @Devin the second step will include more ways to hire me in the future & the shadow and hitbox of the logo is messed up because its not svg and it’s z-index is too low, I have to fix that :) – Sam Apostel Aug 28 '17 at 18:47
2

I'd say the main things that could use improvement in your design are spacing, size, and affordance. This is not exactly a UX question, but more of a visual design question, but improving on one often means improving the other.

Spacing

The space between items is an important and often overlooked part of design, and becomes an especially interesting balancing act with the ascenders and descenders of the type. With a design as simple as this, you could consider having just one or two spacing units. For instance,

  • Can the spacing above the button be the same as the spacing below the button?
  • You can create visual pauses by doubling the spacing in one or two places.
  • It's also OK to not use all the available space in your layout.

Size Once your spacing has a rhythm to it, this will likely effect your size. You wanna make sure that each item has a proper weight to it so that the items are read in the correct order. Also, if you think your text might be too light or too hard to read, it probably is. It's almost always good to err on the side of legibility for our friends with poorer eyesight.

Affordance I think with a design this simple, your buttons are probably sufficient. But there are a lot ways to make a button seem clickable:

  • Hover state (for desktop design only)
  • Rounded corners (you've already got this)
  • Depth (dropshadow or embossing)
  • So in short, use my 5px spacing all around and sometimes double it. Decrease the size of the link and include extra contrast on the gray text. I have the hover state and the rounded corners, should I add a dropshadow on the regular state? (No hover and not active) – Sam Apostel Aug 28 '17 at 18:51
3

There are a couple of issues with your current design which stand out

1. Your call to action is lost against the other content : The call to action is your primary interaction point for the user. Right now its competing with other text and your photograph. Also the styling of the call to action doesn't stand out and give a visual point of focus. To quote this article

Even if you’ve crafted compelling CTA copy, it won’t matter if nobody sees your button. That’s why you need to make sure your button is impossible to miss. It should be large enough to see from a distance, but not so large that it looks obnoxious on the page.

enter image description here

Also there is a lack of color contrast which makes it easy to miss your call to action. To quote from the same article

The CTA button color that really grabs people’s attention is the one that contrasts from the color scheme of the rest of the page (while still fitting in with the overall color palette).

enter image description here

  1. Your image takes away the primary focus of the call to action : As mentioned before your primary focus should be on the call to action. However having your photograph ( I assume thats you) causes the user's focus to be established on that with the call to action being a secondary item. To quote this article

Faces draw our attention away from a call to action, as you can see in this eye tracking heat map.

enter image description here

  • Call to action is not really needed here because most of the peopl e visiting my sites won’t need to hire a webdesigner. Color contrast: do you mean the gray text and link? The photo is especially a full body shot on a small card so it won’t be too distracting, maybe I should lower the contrast on the image though. This will be something floating at a corner of a webpage an disappeas when scrolled, I want the user to look at it briefly and then look back at the rest of the page. – Sam Apostel Aug 28 '17 at 19:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.