Excuse me - How do I get to the entrance?

Meanwhile, there are libraries with graphical elements that make the application experience of users goal-oriented and time-saving. These elements can be adapted according to needs and used in different scenarios. Designers of user interfaces combine technical requirements and human requirements for the respective system. In most cases, the wheel does not always have to be reinvented. A button that says "Login" is usually quickly found and understood.

The fastest way to create wireframes is with paper and pencil. Like a kind of brainstorming, several solution approaches and variants can be tried out and discussed. They visualize site maps that do not immediately make the functional scope clear to everyone involved. To give the team a more precise idea of the interactive behavior, simple prototypes can be created at any time from the wireframes on paper. The team members can conduct initial user tests in the form and, through the haptic impression, recognize at which points of the user guidance interactions with the interface could possibly be misunderstood. It is not worthwhile to elaborate wireframes elaborately, ideally they are created within an hour, they are discussed in the process and a common technical understanding is developed. Prototypes, on the other hand, can be built with more detailed work, as they can be tested several times with different target groups.

There are different types of prototypes. The simplest prototype is a paper prototype, which with a little skill, can suggest simple interactions such as pushing or pulling. If the team decides on a digital prototype, in the form of a click dummy, then graphics programs such as Invision Studio, Figma or Sketch can be used for this early on. If the team already has a more precise idea of the individual components and their design, then user interface symbols can be used to enable initial design work.

Interactions can then be created in the form of links between individual screens and the user interface elements such as input fields or buttons. Functions are always at the forefront of prototyping and the design either follows an already developed corporate design or evolves in iterative steps. In the design guidebook The Human Interface, Jef Raskin describes what human-centric interfaces are:

The car manufacturer Audi has published a detailed digital style guide for its designers and developers, which ensures that different teams are able to develop a consistent language that recognizes the Audi brand. Consistency plays a very decisive role in the design of interfaces, because if different styles are used, such as rounded corners and angular corners for buttons or colors that cannot be found repeatedly, users will find it difficult to find their way around an application in a familiar way and to carry out actions in a targeted manner. The distribution of interface elements, as well as text and images, is also crucial for the overall structure and recognition of digital applications.

Component libraries come standard with most interface frameworks such as Angular JS or React JS, and are very similar in structure and information content. These libraries support developers in implementing application scenarios together with the appropriate interface, so that not all requirements have to be fundamentally redeveloped. In addition, the components take into account the responsive behavior on different output media by orienting themselves to the cleavage of the layout.

Consistency of interface elements is a given with component libraries, but interfaces need to be extended over time. New functions require new application patterns. At this point, it can help to work with a design system that ensures that, on the one hand, an overview of already developed interface elements is available and, on the other hand, that they are derived from each other in their appearance and convey a visual coherence to the user. Interactive animations can also be communicated, maintained and extended with the help of a design system.

Graphics programs such as Adobe XD, Figma, or Sketch allow project teams and designers to store the specifications for components in a library of symbols. Working with symbols makes it easier for designers to make adjustments to mockups. Designers don't have to make time-consuming changes to each component in the designs individually. If an adjustment is to be made globally, it happens at the master level.

The information architecture is determined in the development of the user experience. Navigation points and subsections are planned hierarchically and easily findable. In terms of design, there are a few rules to follow in connection with navigation. If the navigation is horizontal, then not too many main menu items should be offered. Submenu items can be clearly listed via hover and on-click. Responsive behavior on mobile devices must also be taken into account. Vertical navigation systems are best developed according to the mobile-first principle; what works on narrow screen formats will also work on desktop. What should happen when the user clicks on a subcategory?

The interface also includes short messages that inform the user about what is going on at the moment and why an application might not run. These messages can be displayed discreetly or provide the user with assistance from within an application. Also popular are short introductions to a system, the so-called user onboarding, which can be called optionally. The user should be able to interrupt an application at any time without any losses.

White space in the interface helps the user to perceive essential elements in a concentrated way. A balance between free space and content gives the visitor a calm image. If an interface is too cluttered, it is increasingly prone to errors. For example, if buttons are placed too close together or under each other, the wrong processes may be triggered inadvertently. Sufficient spacing and also the size of the elements help to make applications pleasant to use.

User experience and user interface are developed together. In both areas, there are respective laws that must be in harmony with each other. Wireframes and prototypes help to give all participants a common understanding of the planned interactions, especially in the beginning. The elaboration begins in the mockups, which contain visual information and consistently communicate the interactive brand image. An application becomes easy to use when visual orientation aids such as clear navigation or discreet hints guide the user through the interface.