As an interactive agency that specializes in SAP UIs, we work with companies to design the best possible user interfaces we can. In my SAP UI Design Patterns - Forms post I focused on forms, an SAP UI staple. But what's a great form without proper button design? In fact some may argue that buttons are the most common if not important digital UI element in existence today. And it's not so much about aesthetics as it is about context and placement. A great looking button does no good if its in the wrong place or says the wrong thing.
So today, let's focus on those little UI elements that mean so much in the SAP UI world - buttons.
Many designers take buttons for granted. They just exist - purely just a clickable means to an end. But I say we need to dig deeper.
If you take a look more closely, you'll see there are some design points or guidelines to follow that can allow your buttons to communicate context to your users when and where needed. Have you ever clicked a button that didn't do anything? You probably scratched your head and clicked it again. Same result. Frustrating right? How about the button maze? You know that situation you find yourself in when you are presented with a litany of buttons that apparently do so many things but all you really want is just the one button you need?
Don't worry. Today we set the button road straight. Here are some design points to consider when creating best practice buttons for SAP UIs.
1. Show or Hide Judiciously
Aside from the fact that I just used the word judicious in a technology blog about buttons, this is an interesting point. Consider this - people click what they see. If they do not see it, they will not click. It may be tempting to show buttons that are disabled just because you can. Or maybe to show state. But this creates confusion. Ever get confused when an edit button is disabled? You may have muttered under your breath - "Really? Why is there a button I can't use?". Here the point is show edit when you need to, and don't when you don't. People want to click buttons. And they will no matter if they are disabled or not. So take the high road and avoid the confusion. (btw - I have nothing against edit buttons, literally, it's just the word I used to prove the point/concept 🙂 )
2. Don't "Overbutton" it
Yes, overbutton it. Referred to as the button maze, this is where we find ourselves in the midst of a world of buttons, trying to find which one we need - just to escape! When it comes to buttons in the world of SAP UIs, strength does not lie in numbers. The more buttons you have, the more choices are there, the more confusion sets in. If you find your design presents more than a few key buttons, strongly reconsider the design. You don't want to start asking yourself - "Wait - what does this one do?". If you say it, your users will say it. So, think less is more and don't "overbutton" it.
Here' an example.
3. Use Levels of Emphasis
Quick - raise your hand if you know what this means! For those who do - kudos. For those who don't - dont worry I'll explain. You see, with buttons you may want to indicate different levels of importance. For example, primary and secondary actions. You may want to draw notice to a particular button which is prominent on a page, while de-emphasizing others. This is the primary / secondary rule. For instance, on a cart or order screen, "Submit" is most likely primary while "Back" might be secondary. Using this principle will allow you to draw attention quickly to exactly where you want your users to go first, reducing error rates and increasing efficiency. And let me state lest we get carried away, I'm not talking a different color for every button. Two is max and more than sufficient to differentiate emphasis levels.
Here's an example.
4. Use Proper Placement
Top right? Bottom left? Neither? Clients always ask which one to use. But there really is no right answer here as long as you stay consistent and keep your buttons in sight. In SAP UI Design Patterns - Forms i talked about forms and staying above the fold. With buttons, you most certainly want to stay consistent in your placement, screen after screen after screen.
Repetition breeds familiarity and familiarity is a user's friend. I am not big on "it has to go on the left or it has to go on the right". I just think you need to be consistent. I do think though that if you have a large form, you should offer top and bottom placement - aside from the fact you should consider a shorter form design. So with placement - consistency is key.
5. No Mega Buttons
Ok so I had to throw this one in there. I am not a fan of buttons with more than a few words -MAXIMUM. When you find a button you are designing has this issue, you should rethink the button caption. Don't use more than one or two words. If more description is needed, use contextual descriptions above or beside the button that tells the user what to expect. Don't try to stuff all those words in the button itself. It looks a bit messy and is unaligned with those buttons which stick to the standard, making it stand out like a sore thumb even more.
Here's an example.
Lets take a deep breath now. Bet you didn't realize buttons were so deep right? :-). And here we are, one whole blog later, and we can begin to see there is indeed a method to the madness. It's not about using buttons just because they're there.
Its about using them in the right way - better use if you will.
It's key to design for ease of use with SAP UIs, and buttons are at the top of that list.
Heck - buttons are even important in kids movies...
( here's the url in case the embed doesn't play - http://www.youtube.com/watch?v=L1CxlyMoFRs)
Trust me - it pays to think through all of these things. Little things mean a lot to today's digital users - and these are some easy points I hope you can start using today.
1 Comment
