A is for A list of controls…
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.
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.
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.
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.
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.
J is for a lot of things that aren’t controls and can’t even be passed off as them…
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.
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.
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.
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.
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!
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.
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.
Y is for nothing to do with controls
Z is also for nothing to do with controls