Make the upfront deliverables of the user experience design more visible

"Editor's note" the author of this article Barnabas Nagy, translator @c7210. Barnabas is a http://www.aliyun.com/zixun/aggregation/10821.html ">ux designer and information architect with more than six years of experience in the delivery of user experience Design:" Your partner may not be able to read your delivery.

Delivering an excellent visualization is a good choice to make your design easier to understand.

In the actual user experience design work, as a designer, some of our output in the information presentation and communication effect, etc. do not really ideal, especially those involved in user role definition, information structure analysis, functional process planning documents. It's also a question of what we have to think about how to make these deliverables intuitively understandable and to be able to communicate more effectively.

words and simple shapes are not enough

People have different ways of visualizing and thinking about words. For the phrase "an apple fell from a tree", some people would imagine a red apple, and some would think of green. Only by passing the concept of "green" directly in the message can we ensure that we do not create a red apple image in our minds. Simple truth.

People have different ways of understanding shapes. If we show a rectangle to a group of people, some of them simply interpret it as a rectangle, and some people think it's a piece of paper or a brick. If we show a brick directly, then everyone knows what it is. Therefore, even the simplest visual image, different display methods will create a different way of understanding.

Therefore, in the work, we really can not expect colleagues in the cooperation Department to accurately understand those documents or by the various boxes and arrows composed of flowcharts, wireframe prototypes and so on. Moreover, in many cases, it is not intentional to read these things seriously.

The importance of

visualization

Our observation and understanding of the real world is primarily based on vision, and visual communication means that people can receive information more effectively. As designers, we share concepts and ideas with people downstream of our products every day, and the media that carry them need good design as well. Excellent visual information media can not only help people understand concepts and ideas better, but also help to trigger their empathy for the information itself and make the design output more powerful and persuasive.

Some visual information cases in

user experience design

I (English original author) individual has a piece of creative design work background, therefore, in the later user experience design related work, whenever sees the ordinary not to have the good Polish document, in the mind always feels not comfortable, this is I began to think and attempts the visualization presentation way the reason. In the meantime, I have also seen a lot of examples from other designers, including Userinsight and the user roles created by Jason Travis, as well as the user process designed by Hochschule Luzern.

user role settings from Userinsight

user role settings from Jason Travis

user process settings from Hochschule Luzern

I am fascinated by these beautiful "design documents" at the same time, also found that some of them too messy, auxiliary graphic elements will be distracting, and some lack the necessary text description. I wanted to find a better, more useful way, so I tried a few different ideas in the actual work, especially in creating user roles, planning information structures and processes, and making wireframe prototypes. My goal is simply to let the demand side and the relevant collaborators understand what the designer wants to express more quickly and accurately.

create user roles in the form of a dialog bubble

Compared to ordinary content statements, the form of dialogue can give readers a stronger sense of interaction, resulting in a deeper impression. Based on this idea, I try to use the dialog bubbles in user role settings to show the content, as if the character (Jamie) is telling his story. Jamie "tells" some important information about himself, including his worldview, what he needs, what he doesn't need, what he experiences, what motivates him, and so on.

Not only did I let Jamie talk to himself, but also added an "interviewer" to further enhance the information interaction through their interactions. Inspired by Jason Travis's case (see the second picture in the previous article), I think the things that the user character has can really give him more information, so I also add something that Jamie has or wants to do with the settings, such as record, House, dog, dream vacation, etc. In addition, I added some questions that Jamie might ask. The full user role is set here.

Related reading: A differentiated strategy of user experience

Sitemap with annotations

I have a lot of ideas about how this document should look, how it should be rendered, and what visual elements to use when creating a site map. I have written these ideas down, on the one hand for the actual operation to give themselves a hint, on the one hand also hope that they will not forget the future design plan behind the train of thought.

I also used the dialog bubbles to annotate the information structure, so that others could read the document not only for structural information, but also for more details through comments. The complete site map is this way.

dialog form user process settings

Finally, I combined the previous user role settings with the site map to create a more humane user process setting that enables readers to feel the context. In this document, Jamie carries out "audible thinking" throughout the process, describing his goals and ideas in each step. This is a very powerful way for readers to understand the design of products and the ideas behind them. The complete site map is this way.

Big Brother Model

When I created the wireframe prototype, I was tempted to ignore the user roles I had created before, and in order to solve the problem, I did some life-size cardboard models and used them to represent the user role, reminding me on the side like Big Brother to remember to consider the previous settings.

This approach has a certain effect, but I always feel that the Big Brother model and screen of the world is not a latitude, psychological distance is still very far. So I simply try to throw the image of the user role directly into the prototype.

Related readings: 10 ways to make your wireframe prototype more communicative

Summary

I sincerely hope that these small methods can help you to better present your ideas in practical work, so that the relevant people can be more efficient and accurate access to information.

Translator Blog: Beforweb