Looks fancy - but does it work?
Design has not only the task to fulfill aesthetic expectations of viewers, with the regular use of apps, software or websites, the user should above all be offered added value and an experience by making interactions as acceptable and pleasant as possible.
Behind every digital application experience is a dynamic blueprint that is examined and developed from the perspective of the product owner, the designer, the programmer and the customer in joint collaboration. Accordingly, What-You-See-Is-What-You-Get doesn't just look fancy, but includes various thought processes and solution approaches that have been tried out in advance and ideally tested with real users.
Strategic Development
Before implementation can begin, the team works with the customer to get an overview of the planned requirements and asks as many questions as possible at the beginning to draw attention to problems in development at an early stage. Ideally, the product owner, designer, programmer and customer are in regular consultation with each other at all times.
It is important that all team members involved develop a common understanding and decide on a strategy for implementation. To ensure that a future application is pleasant to use, it is described interactively by definition, ideally in the form of a requirements list in a ticket system such as Github, Jira or Trello. This also includes the location of basic functions and prioritized accessibility. A user story contains several relevant pieces of information: where will the user execute an application, when and how, and what technical conditions must be in place for this to happen.
User story structure
Flow charts are particularly effective in helping to visualize this interactive user journey in advance, both technically and in a user-friendly way. It quickly becomes apparent where the user clicks and which processes are triggered or aborted in the system. A flow chart thus maps the complexity and interrelationships between individual functions so that the team can maintain an overview and development can meet initial system requirements if necessary.
Flow chart
Partial functions from the flow charts are then translated into wireframes. Wireframes give the team and the customer an initial common understanding of how the functions will be arranged on the planned output medium. In principle, a simple representation in the form of sketches on paper or drawings on a whiteboard is sufficient to document adjustments and comments. Of course, wireframes can just as well already be created in a layout program, but here it can happen that the team thinks about the design too early.
Wireframe sketches
Mockups and prototypes
Once the team has agreed on one or more versions, the designer creates initial visualizations in the form of mockups. Graphics programs such as Adobe XD, Sketch or Figma support the design process by helping the designer develop a visual language. With the help of style guide templates and symbols, the designer can document his or her design decisions in a relatively short time, which has the major advantage of not having to invest an unnecessary amount of time in maintaining style templates. A change to a symbol, such as the header component, takes place automatically everywhere in the mockups in which this component is used.
Style guide, symbols and component libraries
The layout should take into account the respective planned output media. The designer must be aware of what related limitations might occur. Modern graphics programs support designers with a choice of artboards from mobile views to large screen formats and the various resolutions. The designer can then make the division of the columns to which the components are oriented, e.g. whether an area should be filled 75% or only one third.
Layout Columns and distribution of components
The detailed elaboration of the UI elements then begins. If a style sheet is already available, then the designer can transfer the specifications to the individual elements, such as input fields or buttons. However, the designer can also use icons to develop a different visual language and, for example, change color values and contrasts. In doing so, the designer must determine the style templates for the individual interaction situations. An input field changes as soon as the user makes an input and confirms it. If the user makes an incorrect entry, a small message appears to draw attention to the error.
Status behavior input fields
Most graphics programs allow the designer to create prototypes from the mockups. In doing so, the designer links click paths in the artboards and can even add further specifications, such as what exactly should happen when the user hovers the mouse cursor over an element or when the user confirms a command. Animations also play a role at this stage and they can give the developer a common idea for the effort in the implementation.
Prototype links, click paths and animations
Invision Studio and Principle focused primarily on motion design combined with prototyping. Linking click paths in artboards can also be created as quickly and easily as in Adobe XD or Figma. As a relatively streamlined file format, the prototype with its animations can be exported as an HTML page and shared with colleagues for feedback.
Feedback rounds
Internal team feedback should be used regularly to identify and improve as many weak points in the user interface as possible in advance. It is particularly helpful to obtain feedback from employees who are not working on the project and do not have direct background knowledge of the development. The hints that can be obtained from different perspectives can enable an improvement before a line of code has been written, thus avoiding the extra effort required to change an implementation.
Feedback from the customer should also be obtained and incorporated as early as possible. The customer then also has the opportunity to review his originally planned applications for their added business value. It may be that the priorities of the functions change again because the customer has been able to develop a better understanding or because new insights into the behavior of the target groups have become known in the meantime. User studies can be used to test interim results from the collaboration between the customer and the product team for their real added value. Providers such as Hotjar can provide valuable insight into the actual user experience based on data from various recordings. In a test lab, more precise information on understanding and behavior can be determined as users are observed using an application and asked about their processes in interviews.
User test with A/B versions and questionnaires
Conclusion
Behind an app or a website that is pleasant to use and attractively designed, there is usually an interdisciplinary team that has spent months dealing with detailed questions and suitable application patterns. Experienced teams do not completely reinvent the wheel with each new development, but rather they draw on systems that have already been developed to form a technical foundation. The user interface can also be developed on the basis of a component library that can be adapted and extended. What-you-see-is-what-you-get combines strategic collaboration within the team and their exchange of experience and knowledge regarding technical innovations. If the customer follows an innovative approach, then it is worthwhile to check new interactions for their acceptance with the help of user studies.