At this stage, you will need to create a basic structure that highlights what elements will be on the page, which UI element will go where, what tabs will be included, where the text boxes will go, and where the multimedia elements will be placed. It is now that you need to put pen to paper and start pouring your layout ideas. Make sure to keep the user flow logical and to include all possible needs of a user while navigating.Ĭreate a minimalistic layout for the wireframe Map user needs by asking yourself: What goal are the website/app visitors trying to achieve? What features are they looking for? What initial questions could they have? What information might they need to navigate smoothly?Ĭreate a flow outline that includes a user’s entry point into the website/app and all the steps they may take until the final transaction. User flows are the foundation of your wireframe, so be sure to cut out some time for this. The immediate impact in such a case would be dissatisfied or frustrated customers, which would also mean reduced conversions and increased abandonments. Lacking such elements could confuse website/app visitors, requiring them to contact customer support to seek help with even the basic navigation. This journey needs to be mapped in a user flow so that you don’t miss out on crucial design elements such as the shopping cart, price filter, or specifications checklist. Sample user flow for an eCommerce website visitor ( Source ) These are the sorts of interactions within your website/app that put together make up the user flow. After landing on your website, the person may want to filter the shoes by price, size, brand, etc he/she may want to zoom in on one or more of the shoes, check their specifications, add one of the items to the cart, and eventually, make the payment and complete the transaction. One simple example of a user flow could be: a user enters your eCommerce website after clicking on an ad about, say, grey derby shoes.
This journey includes the point where they entered your website/app, all the points where they interacted with the website/app (like the pages they visited and the buttons they clicked on till their final transaction), and where they exited the website/app. User flow refers to the path or journey of a user during a website or app session. This will ensure the hard work you put into your research reflects in your wireframe and doesn’t go to waste.īe sure to document all the key pieces of information you come across.Īrrange the research based on macro and micro categories, using folders and subfolders.Ĭreate cheat sheets to capture key concepts such as buyer use cases, buying behaviors, or any intriguing user feedback you may have come across in your research. Therefore, before you dive in, make sure to document and organize all your research information in a way that you don’t waste too much time and effort accessing them. At various points in your wireframing process, you will need to keep coming back to this research.
You are going to collect a lot of data, including use cases, buyer profiles, market research data, and project requirements, during your research.
Make it easy to refer back to the research data
Research about the end users, their preferences, and buying behaviors so that you can address their needs with the wireframe.īased on your end user research, define common use cases to better understand the scenarios you are designing for.Ĭonduct market research and competitor analysis to identify design trends and best practices. Getting this clarity is foundational to the wireframe design. Your design should not only help the business deliver its message or products to customers but more importantly make it easy for customers to navigate the page and find what they need without much hard work.Ĭheck in with stakeholders to understand key project needs. And to do that, you will need to gauge the requirements of your design project and the expectations of your stakeholders and end users. It may be tempting to start pouring out your wireframe ideas immediately, but before you do that, think of the larger goal: designing a compelling user interface (UI). Conduct research to get clarity and direction With that covered, let’s look at the steps involved in creating a wireframe. Sample wireframe being designed in MockFlow WireframePro (Source)
0 kommentar(er)
