{"id":672,"date":"2010-05-20T16:34:40","date_gmt":"2010-05-20T14:34:40","guid":{"rendered":"http:\/\/www.centigrade.de\/de\/blog\/?p=672"},"modified":"2020-02-13T16:25:17","modified_gmt":"2020-02-13T15:25:17","slug":"resurrecting-user-interface-prototypes-without-creating-zombies-part-1-prototyping-natural-user-interfaces","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/resurrecting-user-interface-prototypes-without-creating-zombies-part-1-prototyping-natural-user-interfaces\/","title":{"rendered":"Resurrecting User Interface Prototypes (Without Creating Zombies) \u2013 Part 1: Prototyping Natural User Interfaces"},"content":{"rendered":"

Every user interface designer is familiar with the procedure to some extent: To find out what a user interface needs to look and behave like it\u2019s certainly a good idea to create a prototype and evaluate it with potential users. Users will tell you what\u2019s still nagging them and therefore should be improved before coding starts. So, in the beginning of any UI design process everything is about change \u2013 you create a prototype and already expect it to require modifications in order to work alright. As you \u2013 and most likely your client, too \u2013 want changes to be as cost-efficient as possible, you are better off taking a change-friendly prototyping method or tool. This is especially true in early stages of the project your ideas of potential solutions are rather vague. In this early phase, most often you don\u2019t even know the exact problem for which you are in hunt of a solution. You are still analyzing more than you are designing.<\/strong><\/p>\n

<\/p>\n

In this respect, to work change-friendly and cheap, it\u2019s wise to start your prototype roughly (maybe as a paper pencil sketch) and make it more sophisticated the more you understand the requirements, that is what users need (or what they know they don\u2019t need) and to what extent your client wants to give them what they need (yes, this is not always in line). Finally, when a prototype has reached a certain level of expressiveness, it can even serve as a \u201cliving specification\u201d for developers to tell them how the front end should look and feel like. These prototypes are sometimes referred to as high-fidelity prototypes. As soon as developers know what exactly to code, your high-fidelity prototype can die in dignity. It has no future. But wait\u2026 or has it?<\/strong><\/p>\n

Though the described approach sounds perfectly plausible and indeed makes sense in many situations, it needs to be slightly reconsidered in the context of new UI paradigms.<\/p>\n

A new challenge<\/h3>\n

Think of what in these days is commonly called \u201cnatural\u201d user interface (NUI). These fancy multi-touch and alike playgrounds that are on their way to replace \u2013 or at least augment \u2013 our \u201cgood old\u201d graphical user interfaces (GUIs), just like GUIs once replaced command line interfaces (CLIs), surely lower the burden for users to interact with a system as everything is more direct than with a mouse and a pointer.<\/p>\n

UIs become natural \u2013 well, almost<\/h3>\n

Regarding multi-touch apps, you just directly tap on what you like to manipulate or perform a gesture on it and there you go. And NUIs are not solely about multi-touch: a speech recognition system is a NUI, too. You just say what you want and the system does it for you. And let\u2019s forget for a while that though being called \u201cnatural\u201d user interfaces they are still far away from being really natural \u2013 they just feel more natural than before. With multi-touch systems most gestures are rather implicit and you don\u2019t get any convincing tactile feedback so far. And talking to a machine as with speech recognition systems can be pretty embarrassing. Nonetheless, NUIs are brilliant stuff and they will conquer the world.<\/strong><\/p>\n

A nightmare (to come) for developers<\/h3>\n

Unfortunately, what is a brilliant thing for the user is a nightmare for the developer. Admittedly, we are still ramping up the hype cycle (especially regarding multi-touch technologies) so that even programmers are so fascinated by what\u2019s possible that they willingly take the extra effort and burn the (extra) midnight oil to get the job done. However, this enthusiasm won\u2018t last forever \u2013 NUIs will become common and so will be their implementation. What seems to be a problem exclusively affecting developers, in fact is a problem for the UI designers, too: what\u2019s hard to develop on the frontend most often is hard to design, prototype and specify, too.<\/strong><\/p>\n

Especially multi-touch UIs are delicate: There are so many nifty details influencing the user experience that it takes a lot of effort to capture them comprehensively. Which gesture triggers what action? How many fingers should be used to perform a certain gesture? How fast do these fingers have to be moved? How does the object or scene being manipulated behave along time to keep up a proper cause-effect interplay?<\/p>\n

Prototyping becomes more expensive…<\/h3>\n

As long as you concentrate your design efforts on a simple photo sorting application, you don\u2019t run into problems. You can easily prototype this experience by \u2013 well \u2013 sorting real photos. However, multi-touch applications will grow more complex, gestures will occur in greater variety and (hopefully) help to solve more realistic problems. For the UI designer, this means being faced with an unfamiliar challenge. It\u2019s almost impossible for a UI designer to cheaply prototype and this way learn about the experience of solving a complex problem using gestures if there\u2019s no suitable analogy in real life.<\/strong><\/p>\n

Of course, you can prototype parts and this way approximate to a decent design, but you will always have that nagging feeling of having missed something, uncertain that you really transport what you actually intended. So, as a UI designer in order to design amazing interaction experiences for NUIs, you have to be prepared for even more racking your brain, performing more and smaller prototyping-feedback cycles and requiring more time and expertise to create an expressive prototype. Christopher Alexander once said:<\/p>\n

\u201cThings that are good have a certain kind of structure. You can\u2019t get that structure except dynamically. Period. In nature you\u2019ve got continuous very-small-feedback-loop adaptation going on, which is why things get to be harmonious. That\u2019s why they have the qualities we value. If it wasn\u2019t for the time dimension, it wouldn\u2019t happen. Yet here we are playing the major role creating the world, and we haven\u2019t figured this out. That is a very serious matter.” <\/cite><\/p>\n

Alexander, as a building architect, has nothing to do with GUIs or NUIs or the like. Still there is so much universal truth in his words that they can smoothly be transferred to the domain of user interface architecture: the more natural and harmonious a UI designer wants a user interface to be, the more time and the more iterations it will take him to arrive there. Good designers may require less iterations than poor ones but still they won\u2019t make it without any (unless they make a one-to-one copy of what nature itself already offers). Getting back to prototyping this leads to a simple deductive reasoning: creating good UI designs in the future will require more feedback loops, more feedback loops result in prototyping becoming more expensive and the more expensive prototyping is, the higher the burden is to throw prototypes away.<\/strong><\/p>\n

…too expensive to throw things away<\/h3>\n

So rather than throw it away, what else can you do with your prototype? Of course, you can evolve it over time, which means that you always tie on what you already have and just add or modify the differences that \u2013 by receiving feedback \u2013 you learned are missing or in need for a change. Even after development has finished, you can put the prototype on hold and get back to it later, whenever it\u2019s necessary. And let us not deceive ourselves: even when development has finished realizing the right requirements \u2013 the day will come when one of them will become invalid so that you need to dig up your almost-forgotten creation and make the changes. <\/strong><\/p>\n

But how effective is it really to evolve prototypes as described and is it enough to face the challenges that modern UI paradigms provoke? To answer this question, it is a good idea to illuminate what a modern prototyping tool is capable of supporting the UI designer with. After all, what cannot be realized through a prototyping tool can hardly be an ingredient of an effective practical approach.<\/p>\n

In the second part of this two-part article, I will shed light on how this works using Expression Blend<\/strong>, as \u2013 at this time \u2013 Blend offers the largest set of possibilities we have faced so far in order to squeeze out the most of a prototype.<\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[42,119,118,16,36,34,44],"class_list":["post-672","blog","type-blog","status-publish","hentry","tag-blend","tag-multi-touch","tag-natural-user-interfaces","tag-prototyping","tag-silverlight","tag-user-interface-tools","tag-wpf"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":1,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/672\/revisions"}],"predecessor-version":[{"id":11290,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/672\/revisions\/11290"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=672"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}