usability. gov
Being consistent in the choice of interface elements is important as users are familiar with elements acting in certain ways. Using them in the way the user understand them to work allows the design to work more efficiently and makes the experience more satisfying.
Interface Elements are broken down into :
Input Controls
- Checkboxes mean a user can select multiple options from a set and are usually listed in columns.
- Radio Buttons mean users can select options one at a time e.g. Yes / No questions
- Dropdown lists allow for the selection of one answer but are compact and space saving. Adding a comment such as 'Select One' guides the user.
- List Boxes allow for multiple items to be selected like checkboxes, however are more compact and are good for long lists.
- Buttons are activated after clicking e.g. social media and are labelled with text or an icon.
- Dropdown Buttons when clicked have a drop down of different items e.g. sign out, settings etc
- Toggles allow change between two states and are best when they are distinctly different states e.g. on / off
- Text Fields means text can be entered, either single or multiple lines
- Date and Time Pickers mean that when chosen, the information is consistently formatted and input into the system
Navigational Controls
- Search Field means keywords or phrases can be entered, then it will show relevant results. These are usually single line boxes and have a search button alongside.
- Breadcrumbs show the location the user is at within the website, listing the pages navigated through to get to where they are.
- Pagination shows the number of pages of content allowing users to move between content without having to look at it all.
- Tags make it easy for users to find content in the same category. Tags can be entered by users as well in certain types of sites e.g. ecommerce
- Sliders or track bars allow the setting or adjustment of values without changing the format of the interface e.g. price range
- Icons are simple images that help users to move around the system usually through hyperlinks
- Image Carousels mean sets of items can be browsed through and a selection can be made and a hyperlink will take you to the next screen.
Informational Controls
- Notifications are update messages telling the user there is something new to see e.g. message received, warning etc
- Progress Bars show the place the user is at in a series of steps e.g. paying for an item
- Tool Tips give the user hints as to what certain aspects of the system do
- Message Boxes pop up to let the user know an action needs to be taken before progression
- Modal Windows (pop - ups) need to be interacted with before they go back to the main site e.g. sign in
Containers
- Accordians are vertically stacked lists with the ability to show and hide information, expaning when clicked. Default states can be set to allow the user to see certain section without the user clicking anything.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.