What is an Interface Element?
Interface Element’s are user based interactions with the site, this can include:
- Input controls – buttons and text fields
- Navigation controls – breadcrumb links and search bars
- Information controls – help boxes and notifications
Over the years of websites and website design, almost all if not most of the interface elements have an affordance attached to them, so within UI Design it is a must to follow these affordances’ associated with each interface element. Here is an example of multiply elements being used in one form.
How many can you see in this form?
Before we dive into the details on the different interface elements and what they do, how many can you spot on the TradeMe register form? (let’s keep it simple and only look for User Input Controls)
Got your answer? let’s go through what elements there are!
1. Text Fields
This allows the user to into text into these boxes. In this example the user would be enter:
- Email – Name@hotmail.com
- Password – Password123
- Username – Name1998
2. Radio Button
This allows the user to select ONLY ONE of the options shown. This is asking if the user is male or female
3. Dropdown List
This one allows the user to select one of the multiply answers provided by the website. this is asking the users birth date, another example:
- First Dropdown list – Days: 1-31
- Second Dropdown list – Months: January – December
4. Check Boxes
This allows the user to select one or more options provided by the website. this example is asking: if the user is over 18 and has read the T & C to check this box.
Here is the last one, a button, which allows the user to continue to the next part of the website
Here is some more details information about all the different interface elements
Example of an User Interface typography hierarchy
well what is typography hierarchy?
This is when the UI designer uses different fonts, font sizes, colors, italics, bold, and etc to catch the users attention in the correct order.
What is the FIRST thing you seen when looking at this picture? it was either the “Fired for 310k payout” or “CON-DIMENT” headings, this is because they have the BIGGEST font size; they are located at the top; they have Bold Formatting and they also are a different color to the information. almost every news website uses typography hierarchy so users can easily find the different news articles with big bold headers, then a small sentence about the article to intrigue the users more into clicking.