UX and UI, a.k.a. zero waste designer I.
What exactly is User Interface (UI) and User Experience (UX)? If you type the two abbreviations into a search engine, you will get a lot of hits. But why did we devote three blog posts to this topic right now? On the one hand, because our profile is software development, and as such, the concepts of user interface (UI) and user experience (UX) form the foundation of our everyday work. And we deal with both, and hope that through these posts, you will get to know us better, our attitude towards development and our working methods. Now, let’s get started, I hope we can show you something new.
UX and UI, i.e. aesthetic and logical online interfaces
Whatever we develop, be it a mobile app or a progressive web app (PWA), the goal is always for the visitor to find what they are looking for as fast as possible. To effectively accomplish this, and even to create a sight that is a delight to use (i.e. to make a good overall impression on them during usage), beautiful, intuitive and logically structured interfaces are required.
A good design almost guides the visitor’s hand when they are browsing, and shows the way in a self-explanatory manner. In very simple terms, you can imagine that the UX designer makes up how the product works, and the UI designer is responsible for the visual elements. The two of them together guarantee that the user gets a beautiful and usable interface after (preferably lightning-fast) loading.
UX: without mazes
In this blog post, we will describe the work of the UX designer in more detail. We begin all UX tasks by drawing up the User Flow. In effect, the user flow is a sort of map, which gives us an easily comprehensible picture of the paths users can follow in a given mobile app, for example. Using this map prevents designers from leaving dead ends or missing functions.
Earlier, we outlined these on post-it notes, but we’re in the 21st Century now, and this would not be really zero waste either. So a digital solution was really missing from our lives. We prefer Figma, super user flows can be created using it.
The A4 wires
Once you have successfully navigated the user flow “map,” it is time to draw up the wireframe. As the first step, we usually only make a rough, hand-drawn wireframe, in which nothing must be precise or to scale. These “drafts” are very useful because, in addition to being a very quick method, it also helps clarify quite a few questions, while providing you with more and more new ideas.
No scribble, messed-up drawing, or miscellaneous note is created in vain. We think that they are absolutely necessary for thorough and thought-out work. By now, this also has a digital counterpart, and we have already introduced it into our working processes, since (as mentioned earlier), we like to “zero waste manage” things. They satisfy our conscience.
Egg stands, nuts, demo
There are lots of ways to create a presentable and testable prototype of a product. We have seen a house, a city built of Legos as a visual aid, but we have also built a demo for a dexterity game from freshly fallen nuts and egg stands.
The prototype, i.e. the clickable, demo-ready, testable version is already prepared after the first round of plans. Many believe that these are even better for testing than the completed product because the protype appears early enough in the development process that the tester can uninhibitedly critique it, as opposed to later on when more time and money has been invested in the development. In the early phase of planning, it is also easier for the designer to incorporate feedback and changes into the product. At this point, much less energy has been invested, they are less attached to the product, and modifying is quicker and easier too.
The completed prototype is then subjected to multi-stage testing. This will be discussed in the next post.