DES 501

Activity 6.1

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.

TradeMe Register Form:


6.1 elements

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

6.1 Text fields

This allows the user to into text into these boxes. In this example the user would be enter:

  • Email –
  • Password – Password123
  • Username – Name1998

2. Radio Button

6.1 Radio button.PNG

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

6.1 Dropbox

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

6.1 Checkbox.PNG

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.

5. Button

6.1 Button.PNG

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.


Hierarchy Photo

Example:Stuff Homepage

6.1 typo.PNG

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.





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s