Creating Wireframes for Mobile

Creating good wireframes requires a combination of research analysis and intuition. You must first understand who you are designing for and what problem you are trying to solve.

To get started, try to answer these questions:

1. Who will be using this feature?
2. What's the users' goal? What problem does this feature solve for them?
3. What are some of the actions users are likely to perform?^[1]

If you can't answer these, you'll need to do more research. Common methods that can help you gather this data are user and stakeholder interviews and surveys, focus groups, contextual inquiry, and field studies.^[2] When you are satisfied with your responses to these questions, you are ready for the next step.

Before you start wireframing, you need to know how many screens need to be designed and how users will interact with them. Creating a user flow is one of the best ways to determine that.

A user flow shows the steps a user takes to achieve a specific goal.^[3] Mapping it out will help you understand what wireframes you'll need to create and how they should be connected.

User flows aren't always linear because users might take different paths to achieve the same goal. Considering different approaches will help you make sure you didn't miss any screens.

After you have defined the user flow, it's time to get sketching. This is the stage when you want to generate as many ideas as possible and not worry about the quality. You can use pen and paper or digital tools — depending on what works better for you. However, avoid jumping into prototyping right away. It requires more effort and doesn't allow you to explore many approaches quickly.

When creating sketches, always keep users' goals in mind. For every design screen, ask yourself:

• What's the purpose of this page?
• How does this page help users achieve their goals?

Try to approach the problem from different angles. Create several versions of each screen, get feedback, and iterate upon them until you have a couple of working ideas.

After you have created and tested low-fidelity sketches, it's time to move to medium-fidelity wireframes. The sketches from the previous step will form a foundation for this one.

Start by setting up a mobile frame. This will create the illusion of an actual design but also prevent you from putting too many elements on the screen.

Which dimensions should you use if you need to design for a range of devices? The best practice is to start with the device with a mid-sized screen. For instance, if you developed an app for iOS in 2019, you could use an iPhone 7 frame.

In the early stages of the wireframing process, your goal is to create a clear visual hierarchy. For now, don't focus on the content. Instead, focus on the way you want to present it — namely, the layout and structure.

When planning the layout, think about how you want users to process the information and in what order. Draw content boxes on the canvas and arrange them based on their priority. Place important information where users are more likely to look. The F-shaped pattern works for both desktop and mobile screens, but there are also other common scanning patterns you can try out.^[4] Generally, though, the top and left sides of the screen get more attention.

Familiarity is one of the most important properties of good UX design. When encountering a new product, users base their expectations on their previous experience. Both Android and iOS have native design patterns users of these platforms are used to.^[5] This really simplifies designers' work. We can use these design patterns as reusable content blocks.

For example, the bottom tab bar, the side drawer, and the Floating Action Button (FAB) are the most used patterns for top-level mobile navigation. If you want to design clear and simple navigation paths, use one of these patterns in your app.

After you've established a visual hierarchy, start replacing placeholder text and images with real content. At this stage, it's important to communicate how the page supports users in reaching their goals.

Content should influence your design. Using actual copy and images will help you understand:

• If the layout works
• If all UI elements are necessary and at the right place
• If the page flows for users

If something doesn't work, this is the perfect moment to reorganize the content and improve the composition.

After you have added real images and copy, you need to check how your design scales. It can look great on a medium-size phone screen like iPhone XS but distorted on bigger and smaller screens. Even if you started with a medium-sized screen, check how the content looks on different screen sizes and adjust it if necessary.

It's possible to ship your design as a collection of individual screens. But a better option is to create a wireflow.^[6]

There are several benefits of creating a wireflow:

• Flows are easier for the team to understand as they show interactions. Arrows as visual instruments work better than lengthy descriptions.
• Creating flows makes you think about the app's functionality as a whole. For example, you might realize that it takes a few seconds to fetch search results, and you'd need to design an extra state or loading screen.

Testing wireframes helps validate ideas, discover functionality issues, and explore user flows. It also saves a lot of time and money. Studies show that it can cost 10 times more to fix something later in development.^[7]

Testing methods vary from observation sessions to full-on eye-tracking, depending on the budget. NNG recommends regularly testing in small groups of up to 5 people — anything more elaborate is a waste of time and resources.^[8] So all you need is your wireframes, a small meeting room, and 2-3 colleagues.

When planning the testing session, decide which parts of the flow to test and write a short script. Think of the task and goals to complete that you can give to participants. It’s best to stick to a single task to maintain focus.

After the testing session, analyze the results and iterate on these findings. Then rinse and repeat until you find the best solutions.