A-Z (almost) of User Interface Elements

 

A is for A list of controls…

…gotcha!

So, it’s not quite the ‘A-Z’ list I had hoped for, but it almost is? With the exception of a few letters and a few little cheats here and there, I’ve managed to come up with an A-Z list of controls!

Here are some common controls that apps, websites and games use in their interfaces. Even with screenshots!

B is for button

These appear everywhere – where would we be without them? They’re on websites, desktop apps, mobile apps and even on your washing machine. A world without buttons isn’t a world worth living in.

There are countless buttons and links in this single screenshot of the Windows environment. All different shapes and sizes and some have icons too, but buttons are everywhere!

C is for checkbox

Useful mainly for forms, for example stating that you accept the End-User Licence Agreement (EULA). They can also be used in mobile apps too for example some apps allow you to check a box to remember your sign-in details to the app.

D is for dropdown

A collapsible menu that hides options, generally best used on desktop websites and apps since using these can be tricky on phones, however on phones some dropdown menus adapt to fill the whole screen. Typically these are used in settings menus where there are lots of options to choose from – picking a time zone or a country is usually a good example of their application.

Drop down menus are usually found in settings menus on desktop devices, but here is one found on a mobile device – a Windows 10 smartphone. It works OK but the control isn’t ideal for mobile devices because it’s quite small to touch and doesn’t fit the width of the device screen.

E is for event log

A log of events, great for finding out why errors occurred or diagnosing faults with the app or website. Generally these are best used in desktop apps and websites where there is screen real-estate to display the errors.

F is for file explorer

Used in both mobile and desktop applications, these are essential for browsing through file systems to find files. On desktop operating systems and apps they tend to be a part of the standard daily user experience but on mobile applications they tend to be used only when finding a file (typically a photo or a video) to upload to an app. On some mobile operating systems you can download apps that act as a file explorer.

Although often not used on mobile operating systems, file explorers sometimes have their place on these OSes, for example browsing for pictures stored on the device. Here is the ‘Files’ app running on Windows 10 Mobile.

G is for grid

Not technically a control as such but what the controls sit on in desktop apps, websites and mobile apps, so I guess it counts. If you’ve ever coded in XAML (a design language used a lot for Windows Phone apps – I guess it won’t be needed as much now that Microsoft has officially killed that off though!)

H is for help

In Visual Studio there is a control you can use on your Windows Forms apps called ‘HelpProvider’, which allows you to put very detailed help content directly into your app. In most Microsoft apps if you open the help window it opens an external window with sections that the user can search for information in. This is what the HelpProvider control in Visual Studio does. Most apps and websites have some form of help and support built into the app, even if it’s just a page with some information on it or a link to a support website.

In times gone by many Windows programs would have had help and support that looked like this. This is the HelpProvider control that you can use to add help content to programs made in Visual Studio.

 

These days many programs and apps use online help – Word seems to be an example of this. Online help is accessible from more devices and can often be made to look more attractive and user-friendly.

I is for icon

These are used everywhere and are extremely important to the appearance of the app and also creating an identity. Both desktop and mobile apps use these and websites use them too in the form of favicons.

App icons shown as tiles on the Windows 10 Mobile Start Screen. Icons create brand identity and some are instantly recognisable. Which can you recognise?

J is for a lot of things that aren’t controls and can’t even be passed off as them…

JavaScript, jQuery, JSON… these are just a few of the things that came to mind as I was writing this page, but these are all programming languages and can’t even be passed off as controls in the slightest.

K is for nothing to do with controls

L is for label

An unsung hero, often forgotten about, but extremely important! They are the captions that go beneath pictures, buttons and other controls! Without these, you wouldn’t know what the controls on your app or website were for!

M is for menu bar

These make finding options and controls easier and appear in both desktop and mobile apps, though they appear differently on each of course. On desktops they tend to span the width of the screen whereas on mobile applications they tend to be more compact and sometimes are hiden until a button is tapped, making the best use of the small screen size for other things. There are many different styles, some programs use traditional ‘toolbar’ style menus and others use more modern ‘ribbon’ styles. The toolbar menus place items in menus and sub-menus which are categorised whereas the ribbon menus place items in tabs and groups, also categorised. Toolbar menus tend to expand downwards and across the screen, whereas ribbon menus don’t expand outside of the toolbar area, thus theoretically creating a less-cluttered interface.

The ribbon menu bar as seen in Microsoft Word 2016. It was first introduced in the Office 2007 programs.

 

Most programs use tool bar menus, as shown here in Adobe Photoshop CC 2017. Some people find this interface easier and more logical to use than the ribbon interface.

N is for notifications

Notifications can be annoying but can also be useful. For a long time their only real application on desktop platforms was to alert users of new emails or calendar appointments – programs like Microsoft Outlook have used them for years for this purpose. However, with the launch of the ‘desktop-orientated yet still mobile-friendly’ Windows 8 and 10 operating systems, more desktop apps are starting to use notifications to alert the user of information (for example new messages) and even web browsers like Google Chrome are starting to use push notifications to notify users of information, a good example being a channel you’ve subscribed to on YouTube uploading a new video. Notifications and especially push notifications are used mostly on mobile platforms to alert users of new text messages, direct messages on social media platforms, low battery life and update availability. On a mobile device they have the advantage of being able to make the device vibrate to alert the user of their presence, whereas on a desktop or laptop they best they can do is play a sound.

Notifications from Facebook and Facebook Messenger as shown on Windows 10 Mobile. Most smartphone operating systems show notifications and a number of other settings such as Wi-Fi settings, rotation lock settings and Bluetooth settings if you swipe down from the top of the display.

O is for open file dialogue

Like the file explorer, this tends to be used on both platforms however the application is often different. On desktop applications the open file dialogue tends to be used for importing files into an app or a program or uploading them to a website, on mobile applications they tend to be used only for uploading files (usually photos or videos) to apps – typically social media apps.

P is for pagination

This is the act of splitting data across several pages, for example when you search on eBay you’ll find pages of auctions, or search on Autotrader for cars for sales you’ll see the results spread across many pages. This is really the only good application of pagination, the other application tends to be to split news or opinion articles across several pages to keep the user clicking. In my opinion this is incredibly annoying because you have to keep clicking to move onto the next page. For mobile applications, pagination is a pretty poor idea as you should just be able to keep scrolling to see more content and small buttons at the bottom of pages can be fiddly to touch. On a desktop, it makes more sense, but only when dealing with large search results (for example search results from Google or eBay or any site that will render masses of results from a search) to keep the interface tidy and make relevant searches easier to find.

This type of pagination is acceptable because it doesn’t actually change the page, rather change an image on a slideshow (by the way, the Note 7 was a truly hot phone!)

 

This type of pagination is just annoying because the user has to move onto a new page to continue reading the article – you can see the page number at the end of the page URL. There’s usually some lovely ads underneath the page links, too.

Q is for query

Not really a control but it begins with Q. These are used in databases when trying to find or sort information so generally they are used on desktop applications but any app, game or website that requires logging in will use these somewhere in their databases, so actually it’s applicable to all! Every time you search for a tag on Twitter, a friend on Facebook or a location on Instagram, a database is queried and your search results pop up!

R is for radio buttons

Like checkboxes, but they tend to be circular and the user just clicks inside the circle to select the option. They tend to be not so great for mobile use because they’re quite small and fiddly to tap on a touchscreen, but sometimes they are used. Toggle and slider buttons tend to be a more popular choice for mobile designs because they work better on small touchscreens.

S is for save file dialogue

On a desktop app the good old ‘Ctrl+S’ (or ‘Cmd+S’ if Apple is your fruit) keyboard shortcut or clicking on the good old Diskette save icon, typically in the top left of the interface will usually bring up a window asking you where you’d like to save a file to. These tend to be used more in desktop apps again since it’s rare that you work on documents that you need to save on your phone – and if you ever do save anything on your phone, it’s often not possible to specify where to save the file to. These days most people tend to start work on a desktop or laptop, save it to the cloud, continue working on the document on a mobile device like a phone or a tablet later and then finish it off on a desktop later. Whilst you are working on your mobile device, you often don’t need to even worry about saving because often changes are saved with every keystroke made in mobile office apps.

In Windows the Save As Dialogue is an in-built control that brings up a save window that looks like this. The document type to save as by default is often specified in code and the default location is nearly always the Documents folder.

T is for tab

The art of having multiple things, whether it be websites or documents, open at once in the same instance (or put simply, window). Many people think that only modern web browsers have tabbed interfaces, and whilst they are the best example of the perfect use of tabbed interface, did you know other programs have tabbed interfaces too? Another great example is the modern Adobe suite. When Adobe Creative Suite 4 came out back in 2008 it was terrible on the whole (especially looking back at how poorly it performs almost a decade later), but one of the better things about it was that for a lot of the programs in the suite, notably Photoshop, Illustrator, InDesign, DreamWeaver, Fireworks, Flash Professional and probably other programs too (basically all of them apart from the video editing apps), Adobe introduced tabbed interfaces meaning that users could work on multiple documents whilst only having one window open. It made the programs easier and less cumbersome to use when working with multiple documents, which is the whole idea of using tabs to contain documents or webpages rather than individual windows. Technically, sheets in Microsoft Excel are also like ‘tabs’ – and they’ve been around for far longer than tabbed browsing and Adobe CS4! Ribbon menu bars also use tabbed interfaces as explained earlier. See, tabs are in more places than you thought!

A tabbed interface as shown in Adobe Photoshop CC 2017. The tabs are shown above the open document. There are several documents open, but only one Photoshop window.

 

A more common use of tabs is in web browsers. Here in Google Chrome several pages are open in one browser window. Opera was the first web browser to support tabbed browsing and eventually all major browsers supported tabbed browsing by 2008.

U is for user experience

Not a control, but it begins with U and it’s the most important one! At the end of the day, it’s what all of these controls contribute to! Choosing controls appropriately depending on how you intend your product to be viewed is critical to providing your user with a great experience – a great user experience.

V is for video

A growing part of the modern web, especially with the introduction of HTML 5 which makes embedding this so easy, it could be argued that this is now a control. Video can be viewed on all platforms and popular video-sharing websites like YouTube, DailyMotion and those websites of more… adult(?) nature… have helped to make video a control that many users depend on today.

Video is increasingly becoming an important part of the web. Initially, external plugins like Adobe Flash Player would have to been used to play video on the web, but recently to improve performance and device compatibility, HTML 5 is usually used instead.

W is for web browser

Technically a control, I mean it’s in Visual Studio, right? If you’re creating a project in Visual Studio you can actually drag a web browser into your project and it will act as a web browser in your project. The only reason I can see why you’d want to do this is if you want to have a go at coding your own browser, but remember that the browser control in Visual Studio is actually just an Internet Explorer control, so it doesn’t matter if you want to create the next Mozilla Firefox or Google Chrome using Visual Studio, by using the web browser control you’ll just be making another version of IE. Let’s not forget that the performance and security of a ‘real’ browser is better too, though that being some social media platforms, notably Steam, Instagram and even SnapChat have their own browsers in their apps which open links sent in direct messages. I can understand the appeal of the Steam Browser because you can easily open it whilst playing a game (it’s good for Googling cheats!), but whilst Instagram and SnapChat will tell you that opening links in their browser is more secure than opening them in any other browser, it’s a usually a lot slower and in reality no more secure.

X is for eXperience

Another cheat, this one doesn’t even begin with X. If Microsoft can get away with calling a whole range of products ‘XP’ based on the letters ‘X’ and ‘P’ being in the word ‘eXPerience’ and make millions and millions off it, then I can use ‘eXperience’ as my control beginning with the letter X. Actually, Windows XP (Office XP not so much), was praised a lot for the way it worked and how well it performed in its later days (especially when Windows Vista came out) but in its early days it’s interface was criticsed for looking too ‘fisher price’ and what a lot of people wearing rose-tinted glasses forgot when Vista came out was that in its infancy, XP was a royal mess! It didn’t work with anything, it was slow, required high-end hardware to work properly and it was expensive. Hmmm… when did we next hear those criticisms being made about a release of Windows? At least Office XP got rid of Clippy and that stupid wizard though – but unfortunately that, and a £300 price tag, was all it brought to the table.

Coming from the ‘greyness’ of Windows 2000, Windows 98 and other previous versions of Windows, XP’s default blue and green interface dubbed ‘Luna’ shocked the world when it was launched in 2001, some even calling it ‘fisher-priced’!

Y is for nothing to do with controls

Z is also for nothing to do with controls