ksux / ks-design-guide

Live pattern library for Kuali Student.
http://ksux.github.io/ks-design-guide/
9 stars 1 forks source link

Align button groups in light boxes and dialogs to the left #11

Open basham opened 10 years ago

basham commented 10 years ago

The following Skype conversation discusses rationale.

[11/15/13, 7:59:39 AM] Oliver Ng: In light boxes or confirmation dialogs, what are everyone's thoughts on the placement of buttons? Should they be on the right to match the sticky footer or placed on the left side?

[11/15/13, 8:12:56 AM] Oliver Ng: Confirmation dialogs - I prefer the buttons on the left side to follow conventions. Light boxes - I'm not sure about.

[11/15/13, 8:14:09 AM] George Wendal: My feeling is that they should both probably be consistent with the sticky footer. With that said, I've never been a big fan of the way the sticky footer right aligns the buttons. On a big monitor those buttons are waaayyy out there, and I could definitely see that having an impact on users. Here's a link to an article by Luke Wroblewski advocating for buttons on the left side of the page: http://www.lukew.com/ff/entry.asp?571

[11/15/13, 8:23:54 AM] Oliver Ng: I'm not clear what the rationale was but perhaps it was to have the items clearly stand out. I agree with you that on a large screen - the buttons are far out - they tend to look orphaned. Great article. The last diagram about the heat map is excellent "illuminate a clear path to completion."

There was a test run & users didn't have a problem conducting the task required from a sticky footer. https://docs.google.com/a/kuali.org/document/d/1Pl1ArmEv4Kagwqs3zZW0ZVwg4D25YQ7cICG7-Ev9TTc/edit#heading=h.pg7n38ysbte7

What probably wasn't recorded was a heat map.

[11/15/13, 11:52:46 AM] Erik Rath: On 11/15/13, at 5:13 AM, George Wendal wrote:

...With that said, I've never been a big fan of the way the sticky footer right aligns the buttons. On a big monitor those buttons are waaayyy out there, and I could definitely see that having an impact on users.

(y)