An Accidental Encyclopedia


An Overview of UI elements

From the Web and UX Design Accidental Encyclopedia

Here is an overview of some of the graphic UI elements that can be used on a website to enhance a user experience. Remember, less is more!

 UI elements overview graphic – click to enlarge.



1: Browser title bar: Depending on the browser, the user will be confronted with additional navigational elements
2: Breadcrumbs: Useful in allowing the user to find his way back to the previous section, or the home page.
3: Main Navigation: The main navigation is the most important aspect of the entire site’s taxonomy. Where do you put all the stuff on the site and how does the user find it. Are the sections categorized logically? This is never as easy as it seems.
This can have drop downs and even a mega menu – with text snippets and images.
4: Search: Oh boy, search is a science unto itself. So make it easy for the user to get to what he wants. Even consider excluding content from the search results that will only be considered clutter. Use search tips, smart search and advanced search filters to help the user get to what he wants. Make interactive with type-ahead, that completes the users input as he types it.
5: Lorum ipsum text: fake text used in mock-ups that visually looks like text but is unreadable. This shows the place where the text will go.
6: The carousel: Using large images, called “hero” images, are great tools to create an engagement with the user. The user can almost passively get a great impression of what the site has to offer.
7: Icons in buttons are a help in giving the user confidence in what their function is. Remember, English may not your visitors first language be.
8: Using graphics to demonstrate the functionality of the button is a useful aid.
9: A timeline is useful when the user needs to do something complicated but has no overview of how long it will take, for example filling in a survey.
10: Tool-tips / Pop-overs are useful when some explanation may be necessary but you wish to reduce clutter on the site. And you do! Pop-overs appear on a click.
11: Tabs give a structure to your content within the web page, and helps organize content. Clear labeling  of the tabs is important.
12: Tick-box: Use this when the user wants to select multiple options
13: Radio button: Can be used as the tick-box, but it seems this is used more when only one option can be selected.
14: Pop-up calendars help with the input of consistent date format.
15: Buttons shaped like their function – called affordances – help guide the user along.
Dynamic buttons help inform the user of what to expect, here for example 8 notifications.
16: Drop down selectors help the user to select the appropriate data – for example, days or cities or countries.
17: Error messages with clear icons are crucial for user guidance.
18: Normal – Hover and Active, are states the button have that inform the user what is happening.
19: Video – Becoming more and more important in website design as speeds increase. Small, concise videos can convey a great deal of information and create engagement. Let the user have full control, from volume to rewind.
20: Side menus with sub-menus can be useful when there is a lot of content, but be aware that there are not too many different menu clusters on the web page.
21: Collapsible (concertina) menus help create space on the web page, hiding information that is not required
22: Infographics, when done well, can convey a great deal of information in a glance. It’s an art form, but they can be sexy, and break up long pieces of text.
23: Maps, we all love maps. Great as an illustration and easy to implement, but be aware that they can easily become a distraction, and slow your site down.
24: Tables, like infographics, can help break up text and add a little color.
25: Tools of engagement, like polls, can invite the user in some interaction. Use sparingly, and remember, a poll that languishes for months can indicate that the site is not regularly maintained, and this can work against you.
26: Tools to stop your user from remaining anonymous, for example, a newsletter, will help you engage with the user. Again, this is more of a commitment for you then the user.
27: According to Fitt’s Law, things that are bigger and closer are easier to hit (duh!), So make buttons different sizes to afford different meanings.
28: Social media icons are everywhere, but social engagement is not just putting a button on a site. Make sure that you understand the difference between sharing and just linking. Also, don’t turn your site into a clutter of bright buttons that nobody clicks.
29: Icons with clear labeling will help your menu become more understandable.
30: Pagination gives a clear view of, for example, the total number of pages found, and a way to navigate to these pages.
31: The footer. A great tool to add a mini site map to your page without it stealing valuable real estate. It’s a common tool and deserves consideration.
32: Footer links. Get those boring links to basic utility pages (such as mission statement (urgh) and privacy statement) out of the way.
33: A modal is a dialog prompt that pops up on a click or other user action.

An Accidental Encyclopedia

Leave a comment