Graphical User Interface

Web designers and software de­vel­op­ers will stumble upon the term 'user in­ter­face' sooner or later. The ab­bre­vi­a­tions as­so­ci­at­ed with it, such as UI, TUI (Text User Interface) or GUI (Graphical User Interface) can be confusing. The latter is es­pe­cial­ly important for a good user ex­pe­ri­ence — whether on a website or dealing with software. But what exactly is a user interface? And why is a graphical user interface so important for a website’s success? Our guide provides you with the basic info on good UI design and answers the question of what user interface actually means.

A user interface (often ab­bre­vi­at­ed to 'UI') refers to the interface through which people interact with machines. It is the interface that allows you to operate the computer, place an order in an online store, or use an app on your smart­phone. The user interface includes all operating elements that the user sees or interacts with. This can range from simple text-based command lines to elaborate graphical user in­ter­faces. At the same time, the UI enables the machine to send feedback to the user so they can see if their action was suc­cess­ful or not.

The user interface depends very much on how easy it is to operate a piece of software or website. It is no longer simply a question of creating a user-friendly user interface: aesthetic aspects are also gaining im­por­tance. The user interface is necessary for a good user ex­pe­ri­ence — meaning the overall ex­pe­ri­ence a user has with a website or software. The aim of every web designer is, therefore, to lay the foun­da­tions for a good user ex­pe­ri­ence with an intuitive user interface. This works best with a graphical user interface. But other types of UIs are also useful for fa­cil­i­tat­ing in­ter­ac­tion with computers and other devices.

Since the computer was invented, more and more methods of computer in­ter­ac­tion have been developed. There are now several different types of user in­ter­faces. At the beginning of the computer era, there were simple Command Line In­ter­faces (CLI), but many technical in­no­va­tions have led to easier or more direct usability so that Natural User In­ter­faces (NUI) have been used for a long time. Even con­trol­ling devices by measuring and trans­lat­ing brain waves is now possible. Here are the most important UIs and their features at a glance:

At the beginning, the UI was desolate and empty. Only one command line and a prompt to display the current position, or a command prompt, was present on a dark screen — for example, the first MS-DOC computer. After entering a command, a Command Line Interface was used to com­mu­ni­cate with the computer. After this request was processed, the result was displayed — also in text form, of course. This form of user interface is now regarded as obsolete but is still used with cmd.exe in Windows operating systems, where the syntax is largely oriented to the DOS ancestor. Control via CLI takes place ex­clu­sive­ly via the keyboard; a mouse isn’t used.

Text User In­ter­faces are somewhat more con­ve­nient. The in­ter­ac­tion with the computer takes place solely via keyboard here as well. The TUI marks the tran­si­tion from pure Command Line In­ter­faces to graphical user in­ter­faces: the concept was es­tab­lished only after the de­vel­op­ment of graphical user in­ter­faces so that text user in­ter­faces could be defined con­cep­tu­al­ly from CLIs and graphical user in­ter­faces. Therefore, the term is a retronym.

The dif­fer­ence between TUI and CLI is that the interface uses the screen in a two-di­men­sion­al way rather than line-oriented. However, as the name suggests, the interface continues to run in text mode. Pro­gram­mers typically have 256 char­ac­ters. TUIs are still used today — for example, with boot­load­ers or BIOS setup programs.

Graphical user in­ter­faces are now the es­tab­lished standard. Nowadays, software is operated by graphical controls and symbolic images that are often designed to be objects from the 'real world'. It’s normal for a user to employ his or her mouse and keyboard as a control device but touch­screens are now becoming more popular. With the graphical user interface, icons have also moved into the digital world — such as the desktop, in­di­vid­ual windows, and the trash can. The desired elements can be selected using the mouse or by tapping on the touch­screen.

The graphic design is mostly based on the tra­di­tion­al analog office. The result: all elements can be easily iden­ti­fied and the operation is more intuitive than using Command Line In­ter­faces. Even in­ex­pe­ri­enced users can un­der­stand the functions of the icons quite quickly since neither a trash can nor an envelope icon (used to symbolize the mail program) needs any further ex­pla­na­tion. These symbols have now become standard for user in­ter­faces as well as the GUIs them­selves: there aren’t many graphics programs whose tool icons do not symbolize actual objects such as brushes, pens, and erasers.

Even though graphical user in­ter­faces are found almost every­where, the de­vel­op­ment of the user interface with GUIs is still ongoing: when it comes to Voice User Interface, you can also interact with machines using voice commands. Every current operating system now offers UI in one way or another: Apple has Siri, Microsoft has Cortana, and Google has its own search form with voice input. Since ap­pli­ca­tions are opened by voice commands and spoken text is au­to­mat­i­cal­ly coded, it means that users can work more ef­fec­tive­ly. A further advantage: voice commands provide more ac­ces­si­bil­i­ty.

Com­mu­ni­ca­tion with the machine is even more intuitive when a Natural User Interface is used: the NUI is con­sid­ered as a further de­vel­op­ment of the graphical user interface and the Voice User Interface: the in­ter­ac­tive user interface reacts to gestures as well as movements and speech. In addition, it also focuses on facial and object recog­ni­tion. Various sensors, cameras, and mi­cro­phones are used to com­mu­ni­cate with the machine. Many current smart­phones and tablets are becoming in­creas­ing­ly based on NUI tech­nolo­gies but Nintendo’s Wii console also makes the most of gesture, face, and speech recog­ni­tion.

In 2011, a project presented by Microsoft created a stir: tech­nol­o­gy was developed under the name OmniTouch that made it possible to project touch­screens onto every con­ceiv­able surface. OmniTouch is based on Microsoft’s motion control, Kinect, which was put on the market to compete against Nintendo’s Wii. In addition, a laser-based projector and a special camera were used. This par­tic­u­lar form of Natural User Interface is also developed for using on the go — the hardware is worn on the shoulder.

In addition to these common UIs, there are some that haven’t yet reached the mass market: such as the Tangible User Interface, which is also ab­bre­vi­at­ed to TUI, the Per­cep­tu­al User Interface (PUI) or the Brain Computer Interface (BCI).

• Tangible User Interface (TUI) are user in­ter­faces that you can touch. In other words, the in­ter­ac­tion with the machine happens via physical objects: dice, spheres, or other objects are ma­nip­u­lat­ed (rotated, pressed, etc.) by humans, which causes mech­a­nisms to be triggered or digital in­for­ma­tion to be received. Tangible user in­ter­faces are often used in museums or at trade fairs.

• The de­vel­op­ment of Per­cep­tu­al User Interface (PUI) is still in its infancy but is becoming more and more developed. This is a per­cep­tion-driven user interface — a con­nec­tion between VUI, GUI, and elec­tron­ic gesture recog­ni­tion.

• Brain-Computer In­ter­faces (BCI) are no longer science fiction: using elec­trodes, brain currents are measured and trans­lat­ed into commands using al­go­rithms. The research has already had many successes and enabled a paralyzed patient in the USA to control a robotic arm with her thoughts. BCIs could rev­o­lu­tion­ize the way computers and other machines are operated.

Every web designer or software developer should deal ex­ten­sive­ly with the subject of UI: because if you want to impress your app’s users, the visitors to your website, or be suc­cess­ful with your online store, you need to work out how to make your project as intuitive and easy to use as possible. For this reason, you should first consider who your target group is. The UI design should be ap­pro­pri­ate for your target group. As a rule, you first need to con­cen­trate on the graphical user interface: func­tion­al­i­ty, ease of use, and aes­thet­ics are crucial criteria for a good user ex­pe­ri­ence. When working on the graphical user interface, you must always keep usability in mind: if an app or a website is difficult to use, it won’t matter how good your offer looks aes­thet­i­cal­ly. In order to optimize the website or app, extensive tests are usually required. Studies with users can provide results that are just as helpful as technical readings from heatmap analyses. This way the usability is vi­su­al­ized: user behavior is tracked through color, gra­da­tions, clicks, scrolls, and eye tracking. The next step is when the aes­thet­ics comes into play. The following is almost always true: less is more. The design should support the func­tion­al­i­ty of the graphical user interface and should be struc­tured ac­cord­ing­ly, as well as clearly. It doesn’t mean that you can’t go crazy as a designer, but you need to ensure that you un­der­stand the usage habits of the target group and make sure the design doesn’t limit the func­tion­al­i­ty.

But why is an intuitive UI so important? Here’s a simple example: a butterfly icon might look pretty, but it makes no sense to use it to symbolize saving documents since no-one as­so­ciates a butterfly with saving work. On the other hand, if you use a floppy disk icon, it’s obvious what this sym­bol­izes. Users expect this icon and usually search for those that they are familiar with. Ac­cord­ing­ly, you should take common symbols into account and not try to change what is viewed as a global norm. Stick with the familiar symbols to ensure a good user ex­pe­ri­ence and provide your visitors with an intuitive graphical user interface.

The example shows that, as a web designer or software developer, you always have to find the balance between aes­thet­ics and func­tion­al­i­ty in order to make a product suc­cess­ful. Op­ti­miz­ing the UI is important in order to offer the best possible ex­pe­ri­ence to your users. This ul­ti­mate­ly results in more con­ver­sions, rec­om­men­da­tions, and maybe even users making your product go viral, depending on the focus of the website or software.

It is also worth­while to integrate ad­di­tion­al user in­ter­faces via the GUI: if an app can be voice con­trolled, or a notebook can be operated via touch­screen, this ensures more ac­ces­si­bil­i­ty and leads to a better user ex­pe­ri­ence. Users have more options to choose from when using products. This provides greater flex­i­bil­i­ty and increases an app’s or product’s reach.

A good graphical user interface also has a positive effect on search engine op­ti­miza­tion (SEO). If users can get their bearings on your website, they will feel at ease and spend more time there — this is important since search engines are now able to recognize how relevant a page is for the re­spec­tive search query by how long a user stays on the page. Therefore, when designing the GUI of your site, you should always place yourself in the user’s shoes as if they’re visiting for the first time. If a user becomes dis­ori­ent­ed on their first visit, they will quickly leave the site and look for better al­ter­na­tives. Intuitive nav­i­ga­tion is the key here. One way to enable easy nav­i­ga­tion is through mean­ing­ful internal links that visitors can click on to find their way through your website. Search engine web crawlers also follow these links. A path should always be clear and not too long. A useful method is, for example, bread­crumb nav­i­ga­tion: it makes the UI much more user-friendly because the user can see which path they’ve taken and it’s easier for them to return to the start. The path on the website is displayed in addition to the menu bar. In an online store for clothing, it could look something like this: home — women’s fashion — pants — jeans. Bread­crumb nav­i­ga­tion is usually located centrally above the content — just like in our Digital Guide. Further in­for­ma­tion on internal linking from an SEO per­spec­tive and a good website structure can be found in our Digital Guide article on SEO basics.

Because there are numerous types of user interface, it would be im­pos­si­ble to list the best examples for each par­tic­u­lar genre. The following examples il­lus­trate basic guide­lines for an intuitive UI and il­lus­trate how the im­ple­men­ta­tion of good web design can look in practice.

Reg­is­tra­tion is simple: only an e-mail address and password are required. This is much more user-friendly than in­cred­i­bly long reg­is­tra­tion forms. Even more practical is the fact that you can log in via Google without needing to create a separate account. One of the most important USPs (Unique Selling Points) is im­me­di­ate­ly clear to the user: access to all devices at all times. The video back­ground shows various users in different scenarios — on their desktop or using their laptop in the garden. This un­der­lines the core features without affecting the site’s usability.

Evernote is available as a native app for almost any platform. The graphical user interface of the web ap­pli­ca­tion is re­spon­sive and can perfectly adapt itself to any screen size. The UI design decisions ul­ti­mate­ly result in a better user ex­pe­ri­ence since the ap­pli­ca­tion can be used anywhere at any time and with any device.

The app icons for YouTube, News, Maps, etc., fold out with one click and are easy to un­der­stand. They are logical and underline the function of the re­spec­tive in­di­vid­ual ap­pli­ca­tions. In­te­grat­ing a VUI interface is also a good idea: this is how Google is able to un­der­stand voice search using the mobile app. By saying 'OK, Google' you can start searching.

Whether you choose the general guide or the one for ad­min­is­tra­tors, you will be provided with the ap­pro­pri­ate support. Further nav­i­ga­tion is also clear: the more one clicks through the su­per­or­di­nate cat­e­gories to the specific topics, the further the page scrolls to the right. Arrows enable you to navigate back and forth with ease. The list of contents is always just a click away. The graphical user interface combines aes­thet­ics and usability thanks to the appealing il­lus­tra­tions in pastel shades along with its practical nav­i­ga­tion.