Services

Dictionary

Adaptive

Modern user interfaces need to be able to display on screens with different sizes and resolutions. To achieve this, we combine adaptive behavior with responsive behavior. Adaptive behavior involves adjusting the content based on the available space. Depending on the screen size, information is either displayed permanently or accessed through interactions. For example, a navigation menu can be expanded or reduced to a burger menu button for accessing the content. On larger screens, widgets can display detailed information or large KPIs that are still readable from a distance. If there is less space, the content is progressively reduced to the essential elements.

Backlog

When we refer to the backlog, we are talking about tasks that have not been processed yet. During the analysis phase, we compile a prioritized list of requirements that are subsequently addressed during the design and development process. At regular intervals, we check to ensure that all essential tasks have been completed.

User survey

What do the users need? How can we best support their work? To answer these questions, we conduct semi-structured interviews with them. The goal is for the interviewees to share information about their work environment, tasks, problems, and needs. This allows us to analyze individual experiences, needs, and application knowledge, and identify potential for optimizing the software's operation.

Additionally, we ask users to evaluate the application using standardized DIN ISO multiple-choice questionnaires. The statistical evaluation of these evaluations provides important information about the current weaknesses of the software.

User

Users are individuals who utilize software. Human Machine Interfaces typically accommodate multiple users with varying requirements and permissions (refer to user roles). Our work centers around addressing the needs of these users. Modern user interface design is always user-centered.

User role

The users of an interface can be categorized into groups based on their tasks, qualifications, and authorizations. A modern authorization system follows a two-level structure, where individual users are assigned predefined roles. Our job is to define the tasks and authorizations of the corresponding user roles as part of the the usage requirements. This ensures that each user has access to the specific information and functions relevant to their role. For instance, a service technician has the authorization to make changes in the software, while a shift supervisor is only allowed to view certain parameters without the ability to modify them. On the other hand, a simple operator is not even presented with parameters that are unnecessary for their tasks. This approach reduces the complexity of each application and prevents users from being overwhelmed with excessive information.

Design System

In the design system, we describe the basic properties of design components. This ensures consistent software development and serves as a basis for collaboration between our designers and developers. Design systems ensure efficient teamwork and enable the creation of sustainable and scalable designs. In terms of content, a design system includes basic definitions, such as grids, colors, styles..., as well as the building blocks, such as icons, components, patterns, templates, ... and the rules for using them. Design systems are not limited to the pure documentation of the design but form the long-term framework of a product. During the design process and the subsequent review phase, we continuously optimize the product, changing the appearance, behavior, and patterns of the design components. Accordingly, the development of a design system is always in flux.

Design Tokens

A key component of design systems is the documentation of design properties such as colours, distances and sizes as variables called design tokens. These are managed in a global list and can then be referenced in both the design and the code at the corresponding object properties. The aim is to bring the design description as close to the implementation as possible, while ensuring platform and technology independence. Changes to the design can then be transferred to development in a standardised way, without having to be 'translated' by the developer - ideally, this can be done fully automatically.

Expert evaluation

In contrast to the user survey, this is where our expertise comes into play. As usability experts, our role is to evaluate the software in terms of its user-friendliness. With our trained eye, we identify weaknesses, problems, and any deviations from established usage habits or empirical values that we have gathered from our experience in numerous projects. Our evaluation is always based on the standardized dialog principles of DIN EN ISO 9241-10 or Nielsen's usability heuristics.

Information architecture

Information architecture refers to the design of a software product's structure and the relationship between its contents. It forms the basis for the UI outline. Creating the information architecture is one of the initial steps in the process of structuring user requirements, occurring during the conception phase. In this phase, we determine where in the UI the content will be presented to the user. It is important to categorize information based on factors such as context of use or user role, and establish meaningful relationships that were not previously easily accessible in the software. By identifying these relationships, we can then derive a logical navigation structure in the later stages.

Intuitive

We design our interfaces with consideration for users' previous knowledge and navigation habits. Users develop familiarity with navigation schemes through their daily use of digital applications and approach any software with certain expectations. The more a user interface aligns with these expectations, the more intuitive the user experience becomes, making it easier for users to operate the software. Intuitive operation is always the outcome of a successfully implemented, user-centered development process.

Context of use analysis

Users may not always be able to articulate all the weaknesses of a software or all the requirements. To gain further insights into their work environment and needs, we conduct on-site visits to their workplace.

On-site with the machine operators, we observe users while they work on a machine and interact with the HMI. In addition, user surveys are conducted during such visits. With sensitivity and empathy, we are able to uncover problems and needs.

Based on the results of the usage context analysis, we then derive the usage requirements for the interface operation. These requirements are crucial for optimizing the application to the specific field and the users' needs.

Usability test

During the qualitative usability test, a small number of users are observed while operating the interface. They are asked to think aloud in order to provide insights into their steps and reactions. This allows us to identify any problems or needs they may have, and make improvements to the interface accordingly.

Usage tests can be conducted using low fidelitiy prototypes in the early stages of development, but they can also serve as an evaluation after the project is completed.

Paper Prototype

Paper prototypes can be created quickly and without a computer, making them ideal for documenting ideas and facilitating agile discussions within the team. The primary objective is to conduct rapid evaluations of the fundamental structure and basic functionality of the future interface.

After defining the initial ideas, the next step is to transition to the computer and digitize the developed concepts through the use of wireframes. These wireframes can then be further refined and detailed.

Persona

Creating personas is a design thinking method that makes the needs of users more tangible. It involves creating a profile of a fictional person based on stereotypical characteristics of a user group. The purpose is to empathize with this fictional person and gain a better understanding of usability from their perspective.

Prototyping

Prototyping brings our designs to life. In low fidelity prototypes, we simulate the application and make it operable without any programming. This can involve linking individual screens or incorporating animated page changes and micro animations. By doing so, we achieve a realistic user experience early on in the project and create optimal conditions for conducting initial usage tests. As the design project progresses, it is also possible to create high fidelity prototypes based on the final interface design. This results in a software simulation that closely resembles the final product.

Responsive

Modern user interfaces are designed by us to be compatible with various screen sizes and resolutions. We establish a flexible grid system from the beginning and create optimized design variations to accommodate specific space requirements. Using breakpoints, the system determines which variation should be displayed. The database remains unchanged throughout this process. As a result, the system only needs to be maintained once and can still perform optimally on multiple output devices. Ideally, responsive behavior is combined with adaptive behavior.

Sitemap

Sitemaps allow us to ensure a clear structure of the software and maintain a consistent information architecture. They visually represent navigation options and content relationships through tree diagrams. This logical and simplified representation helps organize the structure of a system. Typically, sitemaps are created during the initial conceptual design phase and can be adjusted as needed during further development.

Style guide

The style guide is a specification created during the design process that acts as a bridge between design and development. It provides the development team with the necessary information to implement the design concept, including all specifications and rules of the design concept, graphical as well as functional design patterns.

We utilize Living Styleguides, which allow for ongoing extensions and additions to the style guide beyond the initial design phase. This approach ensures optimal software development and maintenance by promoting close collaboration between the design and development teams.

Styling

While the wireframe focuses on usability, the global design phase is where we concentrate on the visual design of the user interface. Here, we establish a suitable color palette and define styles for icons, controls, infographics, and illustrations. This is where decisions are made, such as whether elements should have shadows and/or rounded corners. We ensure that the final user interface aligns with the manufacturer's corporate design and the industrial design of the machines. The graphic specifications are then documented in the style guide.

Scenario

Closely related to the personas, a scenario is a design thinking method that aims to make a specific application situation as tangible as possible. Our main focus is understanding the contexts in which users operate. We utilize scenarios in the form of narrative descriptions of exemplary scenes. These assist us in verifying a usage requirement or testing a workflow.

Thinking Aloud

As part of our usage tests, we employ the Thinking Aloud method. We request that users vocalize their thoughts and observations while using the software. This enables us to better comprehend user reactions and promptly identify any software issues.

Usability

Usability can be defined as the degree of user-friendliness. It measures the effectiveness and efficiency of product use, as well as the satisfaction of the users during the process.

To optimize usability, we follow the standards outlined in the DIN ISO 9241 norm, using an interactive process. It is measurable using scientific methods and can be statistically evaluated.

For us, achieving a high level of usability is a fundamental requirement for every project. Only when software can be operated optimally does it make sense to design the user interface with graphical appeal.

User Experience

An important aspect of usability is that the usage process is also satisfactory. To achieve this, it is necessary to consider not only the interaction with the HMI, but also the user's entire work process and, most importantly, the context before and after using the HMI. This is known as a holistic user experience.

Wireframe

A wireframe refers to an initial rough study of the user interface design. We focus on creating a purely functional representation of the interface using our standardized wireframe library, which has an abstract and sketchy style.

The wireframe includes the positions, sizes, and contents of the elements, but specific design elements are intentionally omitted. This allows us to fully concentrate on the functions during the tuning process and avoid being distracted by subjective design preferences during the evaluation.