Design: From LoFi to HiFi

From LoFi to HiFi Script

    Now that we've got the basics covered, how do we get from a lo-fi prototype to a hi-fi prototype? The goals of design patterns are reducing time and effort for new projects and improving the quality of our design. Furthermore, they help facilitate the communication between the designers and programmers.


    Patterns are considered a design solution for specific problems in specific contexts. On the next slides, we will give you an example. But before we get to the example, we should know what a design pattern consists of. It should have a name, a context, a problem and a solution. As you can see, the action bar from material design covers this in a small overview. It additionally mentions another key aspect that design patterns can cover: consistency. If something is tried and true, why not stick to it? Now here we see the bar in action: The action bar, which is also the name of the pattern. The context of this design pattern might be within a mobile app, which is designed for performing multiple actions. Now, due to the fact that the app is capable of multiple actions, the users have to be able to switch between those actions and, moreover, every action should be accessible on every app screen. Our solution here is the action bar, which is permanent at the top of the screen allowing access to different actions on every single page.


    An additional concept that might be worth a thought when implementing human machine interaction is gamification. Lazzaro identified four fun keys, those are: hard and easy fun, serious and people fun. The different types of fun consist of different elements fulfilling different purposes. Hard fun for example consists of goals, challenges, obstacles, scores and levels, which all help creating a challenge for the user. The elements of serious fun such as learning, simulation or collection have another purpose. They can create something of value outside the game, for example knowledge that helps in the real world. An important point however when designing your prototype is: don't go for all of them. Even when you're developing a game, one or maybe two fun keys done right is much better than all four done haphazardly.


    Gamification is not the same as game design. In gamification we have game-like elements in a non-gaming environment, but there is one thing that is important to both and that is the user, or we might say, the player. If we understand our players, well, it is easier to meet their needs. There are four player types of MUD (=multi-user dungeon) as identified by Bartle in 1996. He not only focuses on the individual type but also how the player types perceive each other. He also suggests that there are dynamics that cause the proportion of player types to vary within a game, for example, to decrease the amount of explorers you increase the number of killers. To steer the players that are attracted to your game Bartle identifies how you can emphasize one extreme of an axis over the other. For example, if you wanted to highlight players over the world, you could make it easier for players to communicate with each other or maximize the number of simultaneous players. To instead highlight the world, you could make it simply bigger or make it possible for many players to build something within the world.


Apply your knowledge gained from analyzing UML, usability requirements and goals, as well as the principles: Put to the side your paper prototype from the first iteration and redraw it using what you have learned (e.g., principles). Do not fear fear - just do it; "the chance of you hitting the bulls eye with you first shot is very slim" (Pereyra). Also use the findings from your evaluation of the first iteration. To see why this is important, see "Paper prototyping" according to the Nielson Norman Group.

Further reading

User Interface Design patterns by UI Patterns, website

Little Big Details by Floris Dekker, blog

App Dissection by Brian Lovin, blog

Design Details by Brian Lovin & Marshall Bock, podcast

Task 7

Upload your screens iteration-2/design in the GitHub master branch.