2

I'm designing an interface for a financial company and am not crazy about the placement of our buttons in some of our wireframes.

Current Wireframe

Essentially, the links in the left sidebar are for "smaller" actions: email the company CEO, set my status with the company, view contacts with company...

The dark grey buttons are giving me some heartburn. These are the buttons which should afford a more "ultimate" action on the entirety of the company they are looking at. While the smaller actions are about changing minor settings, the grey buttons determine how the user will ultimately act upon the business. It's as heavy a commitment as clicking "finalize purchase" on an ecommerce site.

Anyway, I'm thinking they need a more strategic location, just like how Google Apps have a brightly saturated button in the upper right corner. However, I can't decide the best place to put this so the user doesn't miss it.

4
  • Could you make the wireframe a bit more specific? - It is a bit hard to visualize the impact of the various actions this way. Mar 28, 2012 at 18:32
  • Understandable. Let me see what I can do.
    – Adam Grant
    Mar 28, 2012 at 18:50
  • Could you add a few of the actions too? (Of both types) Mar 28, 2012 at 18:59
  • Unfortunately I'm constrained by an NDA from doing that, but I can tell you generally what they do, which is described in the original question.
    – Adam Grant
    Mar 28, 2012 at 19:01

1 Answer 1

3

My current issue with this design is that when I first saw this layout I thought the grey parts were table headings or styling's to just act as differentiators. They dont really grab the eye since most of the time my eye would be focused on the content on the right. My recommendation would be to have these heavy buttons or call to action buttons to be located at the right of the screen in strategic locations such that the content leads the user on to them.

I had posted a similar response in this question

Which of the following options best draws attention to the “buy tickets” action without detracting from the surrounding visual hierarchy?

If you had just one major heavy button then I would recommended putting it on the right since it would stand out and the person would read from left to right and his eye would rest on the right most area last but since you have three buttons you could stagger them out with relation to the content like this mockup here

mockup

download bmml source – Wireframes created with Balsamiq Mockups

However if you have only single action buttons,then check out these articles on insights on best practices for call to action buttons

  1. Call to Action Buttons: A Survey of Best Practices

  2. “Call To Action” Buttons: Guidelines, Best Practices And Examples

If you must use the layout you specified,move your button to enter image description here

The reason being that your logo will most likely be colorful and having a colorful logo and button in the same line will cause the eye to jump around. Having it lower in the second column will make it easier for the person to notice as he scans from left to right and you dont have distracting elements on the left

4
  • Thanks for this detailed answer! I think I've read about every CTA document on the planet, there are just a lot of tradeoffs with this particular problem. For example, the button will likely be far from the "golden triangle" so I don't want users to miss it.
    – Adam Grant
    Mar 28, 2012 at 18:56
  • I'm thinking the grey area outlined here might serve as a useful area. cdn.dropmark.com/24776/8a83af69acc31ee0aab601bdc4ba75d112b6821f/… I don't want it to be too low, as I fear that would fall out of the user's focus.
    – Adam Grant
    Mar 28, 2012 at 19:00
  • hongkiat.com seems to be down. Google does have a cached version of the day before yesterday. Mar 28, 2012 at 19:01
  • @ajkochanowicz see my updated response to the layout you suggested
    – Mervin
    Mar 28, 2012 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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