Types of UI Guidelines

There are many different guidelines that can be used that state what needs to be considered in a software project, especially in its interface design.

Style guidelines define how a software is visually expressed. When software is designed by a company or organisation the corporate identity must then be reflected in the software products. Here we can ask the question „What should a logo look like, which colours should be used, which symbols and which typography?“ and the answers must be matched with the corporate identity of the respective company or organisation for which the software is being created.

Layout guidelines define the overall structure of a user interface, i.e. „How should the individual windows, structures and areas be listed in the application?” These are mainly about the grid and list layout questions that need to be answered here and, of course, also when working in the area with different interfaces (desktop/web/mobile), the question „How can it be ensured that the interface always works as intended and how should it then be divided accordingly?”

UI component guidelines include questions such as „Which UI components are used? (How should window dialogues, control panels, menus be designed?)“ All this must be bindingly defined.

Text guidelines ensure that the same text is used everywhere. „What size, font and colour should the text be?“

The type of interaction should also be clearly defined when designing a software interface. Here we ask ourselves the question „When should we work with a click interface, when should it be more of a gesture interface or a corresponding voice interface?” and „What information should be displayed when and what is the behaviour in the respective situations?“.

Accessibility guidelines should be considered early in the designing process, as if they are considered at the beginning, it is much easier to take them into account in the corresponding interface design. Here we ask ourselves „How can the software application be designed to be as accessible as possible?”

Reusable design patterns can also be considered when designing the interface. Here we ask ourselves the question „Are there already user interface guidelines that help to make an informed decision? Are there patterns that help to determine the behaviour of certain controls?”

These UI guidelines and all the many more ensure that the final outcome is of highest possible quality for everyone involved in the software product.

Source: “07-3 HCI User Interface Guidelines” 03:44 – 07:25, Vbrick Rev, uploaded by Claudia Müller-Birn, 3 June 2020, https://fu-berlin.eu.vbrickrev.com/#/videos/5e6f1a27-0cfb-42c6-9366-e806f6b839ae.

Dialog Box

A Dialog box is a type of pop-up menus and is inserted to get a certain information from the user. It is a small window and structured like a form.
We distingiush between a modal and modeless dialog box.

A modal dialog box blocks the whole application and sometimes prevents you from interacting with other applications. You can only get back if you enter the needed information or close the dialog box. It is used when the application needs certain information from the user in order to proceed the process.

I made the picture myself

A modeless dialog box doesn’t restrict the workflow of the user like the model dialog box, so it coexists with the parent application.

Navigation side bar in MS Word
I made the picture myself

Quelle:
Video: Müller-Birn, C., Lecture 7-2, LU #7 – Designing the Interaction between Human and Computer – Human-Computer Interaction I (fu-berlin.de), Start: 9:30 End: 12:13, retrieved 03.06.2021, 12:00
Slides: 07-02_Interaction_Styles (fu-berlin.de), p.7

Unterschied Ausrutscher (Slip) und Irrtum (Mistake)

Ausrutscher/Slip:

Das System ist an sich gut verstanden und sowohl das Ziel, als auch wie es erreicht werden kann ist klar. Aber aufgrund von vertippen/den Druck einer falschen Taste/der Auswahl eines falschen Icons wurde es nicht erreicht.

Wie können Programmierer:innen vorbeugen?
Durch ein besseres Interface-Design (z.B. indem mehr Platz zwischen den Schaltflächen gelassen wird, so dass nicht das falsche Icon angeklickt wird.

Irrtum/Mistake:

Das System ist noch nicht komplett bekannt/verstanden, wodurch der Nutzer/die Nutzerin nicht in der Lage ist das richtige Ziel zu formulieren.
Beispiel: Lupensymbol, was von neuen Nutzer:innen als Sucheingabe interpretiert wird, aber den Bildschirm vergrößert.

Wie können Programmierer:innen vorbeugen?
Besser mit die Denkweise der Nutzer:innen auseindersetzen und dementsprechend das User-Interface so gestalten, dass es möglich einfach/verständlich ist.
Oder die Nutzer:innen bzgl. der Nutzung des Systems schulen, z.B. durch eingebaute Hilfestellungen bei der ersten Nutzung.

Quelle: 07-1 HCI Designing the Interaction between Human and Computer, https://fu-berlin.eu.vbrickrev.com/#/videos/89b4b16e-cd6e-4c0e-9b05-97de076bfe9a (Minute: 11:00-14:50), abgerufen 06.07.2021 um 13:20 Uhr

Principles of Good Design

Damit die “Gräben” zwischen Auswertung und Ausführung verringert werden können, formulierte Norman Prinzipien für gutes Design. Diese sind:

  • Den Nutzer*innen helfen, ein korrektes “Conceptual Model” des Systems zu erlangen
  • Die Richtigen Teile (also Funktionen, die Notwendig sind, um die gewünschten Aufgaben des Systems umzusetzen) sichtbar machen
  • Gedächtnisstützen für die Nutzer*innen bereitstellen, damit diese möglichst einfach auf entsprechende Funktionen zugreifen können
  • gutes Feedback geben
  • Fehler behandeln (z.B. durch Fehlermeldung)

Dieses Model fokussiert sich allerdings nur auf die Nutzer*innensicht und nicht auf die Kommunikation zwischen dem System und den Nutzer*innen.

Quelle: HCI-07-01 Designing the Interaction between Human and Computer, https://blogs.fu-berlin.de/hci1-sose2021/lu-7-designing-the-interaction-between-human-and-computer/, abgerufen 01.06.2021 um 13:00 Uhr

Menu

A menu presented on a computer is a list of options, that can be used be the user of a system. Options can also have suboptions, which can be displayed in a submenu. Menus can be be a part of a complex user interface or be the whole user interface. There can be permanent and pop-up menus. Pop-up menus e.g. are often found in the menu bar of programs which is located at the top of a windows or screen.

Pop-up menu | Texteditor Fedora (own screenshot)
Permanent menu | Settings Fedora (own screenshot)

With a help of an input device, such as a touchscreen or a mice, the user can navigate through the menu and search from a constraint list of choices. Because of this, user don’t need to remember commands and only have to recognize the given choices.

Sources

Müller-Birn, C., Lecture 07-02 | Interaction Styles | Slide 10 & 11

Wikipedia, https://en.wikipedia.org/wiki/Menu_(computing), retrieved on 01. June 2021, 12:00