A button is a UI element that leads a user to complete an action. Button design has a heavy influence on the overall interactive design of a website, form, or app, and assists the user in the fundamental steps of navigating through a process or processes. Buttons allow for a user to take an action with a single click.
Remember to always consider button design and user action - buttons guide a user to action. Maybe there is one primary function on the page? Design that button to grab users' focus.
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a button should automatically get focus when the page loads |
| disabled | disabled | Specifies that a button should be disabled |
| form | form_id | Specifies which form the button belongs to |
| formaction | URL | Specifies where to send the form-data when a form is submitted. Only for type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how form-data should be encoded before sending it to a server. Only for type="submit" |
| formmethod | get post |
Specifies how to send the form-data (which HTTP method to use). Only for type="submit" |
| formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission. Only for type="submit" |
| formtarget | _blank _self _parent _top framename |
Specifies where to display the response after submitting the form. Only for type="submit" |
| name | name | Specifies a name for the button |
| type | button reset submit |
Specifies the type of button |
| value | text | Specifies an initial value for the button |
Design choices in complex systems will always impact users for better or worse. Questions like, "where do we click to move next through a complex form?", "Is there a quick indicator of the primary focus of the page?" will be asked during the design process.
As a designer, we must always ask if there is something that we would like or need the user to do, like save a form, or login, or in more complex interfaces, share the page they are working on, or make multiple changes to settings before saving? Buttons and the use of button hierarchy are how designers achieve this.
A button is a UI element that leads a user to complete an action. Button design has a heavy influence on the overall interactive design of a website,
form, or app, and assists the user in the fundamental steps of navigating through a process or processes. Buttons allow for a user to take an action with a
single click.
First look at the purpose of the button in relation with the overall page's purpose, or further, with site level actions like Open or Close or Cancel, consider if this will be applied and used everywhere else this same button is found. Consistency is important. Buttons need to be simple and offer at a quick glance their purpose. For example, there are three buttons. One says, "Click here to create a User," another says, "Create User" and the third has a User Icon with a Plus. The second and third options satisfy the quick glance understanding of the button's purpose.
Buttons suggest an action - they might:
There is also the order of the buttons and how they are displayed on the page. Is this a simple modal with a Save and Close button?
Is this a larger form with multiple options, toggles, sorts, and more?
And last is how the buttons relate to one another and how is that relationship conveyed? Is there one button on a page to Share?
Material - Google's design group - says, An app can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. When using multiple buttons, ensure the available state of one button doesn't look like the disabled state of another.
Do we use solid color high contrast buttons? Only these? A combination of these with other button types and maybe links?
The design decision here must always be based on the hierarchy of the buttons on the page, or what you would like a user to do.
Emphasis has to be provided to specific buttons in order to convey that this is the primary choice of a page. Not having this approach will
leave a user guessing. A well planned button design removes the guess, saves time, and speeds user knowledge retention.
A simple solution to this is to have the primary button on a page - the button a user is most likely to click or is the affirmative and positive
action, like Save, Share, Go, Login, be designed in such a way to be highlighted, like being slightly larger, having an icon and text, being offset
or alone in its own space. Other buttons on this page would be designed with decreasing visibility, where they are inherently second to the primary
task of the page.
Always review other areas of the application for what already exists if looking to update or use new button styles or use cases. There might be cases
where other pages need to be updated with the new styling or button order. Remember that not having a formal design standard across your application or
website leads to at least an "its unfinished" feeling with your users, and when reviewed by a prospective client, something as simple as not having a
standard button choice, order, use, and text could be disastrous to a sale.