UX process, part 2 of 4: Mapping, Testing & Envisioning
This article is the second part of the “UX PROCESS” series. It is the direct follow-up to PART 1, so I recommend reading it first before continuing.
In this part, I will talk about mapping, envisioning, and testing as the second step in the UX process.
So, Once you have the idea for an app that you have developed & articulated, we’re going to take those ideas and start to give them a form and plan them out. Firstly, how your content map should look and work is entirely up to you. But some basic common things will help you keep your map in the proper structure. There are some qualities of good mapping which you should ensure. i.e.,
1. Clarity — So that everyone can understand quickly.
2. Hierarchy — For knowing what’s important and whatnot.
3. Modularity — To know similar items should have equal representation.
4. Growth Potential — Should have potential to grow and expand.
Now, where should you start your mapping from? Of course, the logical place to start would be the “homepage” or maybe splash screen or Login ID page. So, let’s say there are four things that you can do from your main page. We can use the same shape and color-coding for those four primary events to describe them, and it should be connected to our home page using lines and arrows. Arrows solve the question of from where to where? Like in our example, we know the splash screen will take us to the home page and so on. You need to maintain consistency to be precise. Lines, arrows, colors, and shapes help you keep the same, but it depends on how you visually present your map. The main events will lead you to some sub-events, which will probably take you to more significant events, so you also use the scale to show the hierarchy of events. Color-coding will help us keep the hierarchy and modularity of events, which adds up to clarity.
You can map for different pages separately and then join them together, or you can keep them individually as well. It depends on you how you want to present them. In mapping, we’re looking at organizing for what goes where. Once you plan that out, you might get an idea of how our users will experience the content, which might also affect our mapping content. Content map and user interaction flowchart are almost the same things. They possess the same qualities, but representation is very different. The motive of the flow chart is to map out all the possible decisions that a user could make. As you’re mapping how the user travels through your content, you also have to make sure that you have the right content in the right places. But all of these mappings do not include any design decisions. Only the structure of the app is considered in this stage. We are not making any form or look now. We are not making any form or look now. We are just thinking creatively and inventively & shaping the structure that our form will eventually take. Now after developing a content map and user interaction map. We want to see if we are correct or not. We want to try and stimulate an interactive experience with a user. We are going to do this by developing a paper prototype.
Developing a paper prototype is something that can be done on our own. We won’t show the whole map to the user for this basic user test. Still, we would be giving one option at a time, so we will take our map apart, dismantle it into single sheets of paper, and put enough information on each piece of paper to get the user to the next stage before making a decision.
After my splash screen, a user would get to a screen where they have to choose between 4 options. Women; Men; Kids; Infants. Suppose if the user selected the women option, I’d give them another piece of paper where they could go through many options for what they want to buy — Summer wear; Winter wear; Party wear. If they wished to select the Summer wear option, they would go to the product page and then do the same with other categories. We’re really trying to stimulate back and forth between the user and the app. It’s helpful to do this in a very rough and ready visual way. It helps to make you less attached to each piece of paper. So you can change or alter things easily. Also, using words helps your way out of design content. This way of the test is quick and convenient. Avoid graphics as we don’t want the user to get distracted in any manner. We just want a user to focus on decision-making. These interactions with the user will help you understand if the content in the map is placed correctly. Laying things out like this might make you come up with new ideas. This test will help you in using your first user feedback.
When we do this kind of testing, we’re trying to figure out more significant problems that we encounter with the user and maybe things you didn’t anticipate as a designer, and you only get to see when somebody is experiencing your app and options for the first time. So your familiarity with your content and your idea can sometimes leave blindspots for some errors or issues for you to notice. So that’s why the second opinion is essential. Try it with your friends. Family, colleagues, or anyone. Sit across the table and hand over one paper at a time and let them choose the option and then give another piece of paper according to the choice they make. Imagine as if you’re playing the role of an app. The user’s job is to choose options and interact with your app. It’s beneficial when a user finds something that doesn’t work. Because then you can observe the problem that needs to be fixed quietly. Do with as many users as you see, to clarify your issues and solutions. One more thing is called sitemap. it is a more advanced version of our content map. The next step is concerned with the more visual area rather than words.
[To be continued…]
This concludes the second part of this article. In the next one, I’ll talk about Wireframing and UI design as a part of the UX Process.
