Button design in UI

Walden Systems Geeks Corner Button design in UI tutorial how to programming Rutherford NJ New Jersey NYC New York North Bergen County

Designing a user interface should be like a carefully planned tour and we as designers, should guide the users accordingly. The user interface should be engaging, beautiful and easy to use. When we look at the user interface as a journey, we can emphasize different areas of the application where we want the users to go. A well designed user interface is a journey for user attention.

As humans, our eyes tend to be drawn first the biggest and bolding images. Next, our eyes get drawn to rounded shapes and then smaller and lighter shades. The design of the page or application becomes a journey for the user's eyes as we guide them to where we want them to focus on first, second, etc. A good example for good UI design is Apple's website. They use large, bold letters for the title, then add pictures in rounded frames with rounded buttons to entice the user to click through. The legal disclaimers and other items are in small, light colored fonts and shapes and many users aren't drawn to them. The designer(s) of Apple's site are carefully guiding the users through the whole website.


One of the main things that users interact with are buttons. A carefully designed button can invite or discourage a user to click it. To encourage users to click on a button, we can add gradients where it goes from light on top to darker on the bottom. We can add a darker border around the bottom edge of the button. We can give it rounded edges and maybe add a small icon to give the user a visual clue to what the button does. What designers want to do is mimic the real world to make the user more comfortable.

If we want to discourage users from going to certain areas, we can use flat buttons. We can make the button more ominous by putting a dark border on the top of the button. We can hide buttons in plain site by not having borders or background colors and use fonts that have similar shade to the background. Designers will uses such techniques to guide the user away from certain areas of the application or website.

The main point of user interface design is that function comes before form. We want want to guide the user to certain areas of our application or web and we do that with a carefully planned design. One example of a confusing design, in my opinion, is the new Apple password screen, There are no borders or anything to differentiate the "Enter passcode" with the "emergency" and "enter" button. Users who are not familiar with the screen has to make an effort to read the words to tell that the Emergency and Enter are buttons and the Enter passcode is not. This is not to say that Apple's designers are bad, just that they are catering to their intended audience.