Design: First sketch

First sketch Script

    Hello, I'm Lorenz and I welcome you to design practice!


    Finally, it's time to talk about designing our prototype. Keep in mind, design is more than just visual aesthetics. But before we come to the tools and methods, let me remind you of some theoretical basics.


    Here you see the interaction model we have already talked about. The blue circle highlights the process step we now work on: the human machine interface where users make their input into the machine. Here is a list of basic elements needed for designing an interaction.


    Basic elements for or used in interaction essentially often boil down to what is perceivable or can be manipulated by your users. Differences in motion, space, time, appearance, texture or sound can be used to convey meaning and guide users through your interface. For allowing our users to make their input we can give them different devices such as joysticks, buttons or trackpads. The input devices can be both physical and virtual. They are virtual if we for example implement a joystick into a touchscreen device which is the case in some mobile games. Furthermore, users can make inputs by speaking or gesturing. Of course, they can only do this if we design our human machine interface in a way that it reacts to such kind of input. Gestures that are very common are swiping and shaking. Another very elaborate way of communication are brain commands, but those have not yet become part of everyday life.


    When it comes to user input regarding forms, so essentially gathering information from the user, we can use nearly all of the mentioned input controls such as virtual or physical keyboards or handwriting recognition. Depending on the kind of information that you want to gather, drop down menus or toolbars might be the better choice. As you can see, we have many different possibilities for allowing our users to make inputs into the system.


    There are a lot of things to consider while designing the interaction and for this purpose, we have a few standards at our hands that can help us decide which way of interaction is adequate for which system in which case. Here are a few more standards. We recommend that you click on the links below this video and browse in these standards a little bit so that you can get an overview.

Further reading

ISO/DIN Norm Catalog (access through TUM Login) by Perinorm, website

Contrast Checker by WebAIM, website

Mobile Web Best Practices 1.0 by W3C, website

Web Content Accessibility Guidelines 1.0 by W3C, website

HTML 5 Standard by W3C, website