Designing Effective Screens

Back to Blog

A lot of thought goes into designing a website, building screens and user flows. What often gets missed out is a feedback loop. Designing screens involves a lot of effort both before, during and after the process. Most screens are part of a process. For example, a screen where users’ credit card information is entered is a step in the checkout process. Understanding where a screen (or page) fits in an overall flow helps us define goals and metrics that will help us measure the effectiveness of a screen. Asking questions like the below help us gain an understanding of how we can begin to measure a page’s success.

  • What is the primary purpose of this screen?
  • What is the user expected to know and do
  • How do you define the success of this screen?

In effect, we are trying to identify key performance indicators or KPIs for particular features. Identifying this helps us solve problems more effectively. How do you identify them though? Sure a client knows fully well from their perspective of what success is. Our jobs is to convert that and align it with user needs. In order to achieve that, we can use a variety of tools.

User Research

Understanding how users use your application or existing solutions gives a lot of insight into how we can tailor screens to their needs. User centered design is a methodology that puts the focus on the end user or the consumer. Effective user research will give us an insight into understand what problems users face. Knowing this makes it easier to align user goals with business goals. Let’s say a user wants to buy a product. In their head, they already have a model of how this process works.

  • Go to website
  • Drill down to category
  • Browse
  • Add to cart
  • Checkout

By following the user’s mental model while building screens, you reduce the cognitive load on the users. If you try to deviate, then a lot of effort needs to be put into helping the users understand the difference. User research provides us with critical insight into users’ needs and perceptions. Critical information that feeds screen design. It is a key step prior to coming up with solutions because it helps us define the problem.

Analytics

Success for a page can be quantitative. Like a bounce rate of 20% or a signup rate of 70%. These can be measured effectively by setting up your analytics. Most analytics software like Google analytics or KISSmetrics allow you to capture this kind of data. Some of them also help you visualize funnels. This way you can analyze which screen is the most problematic and try to optimize it. The below image shows how you can drill down into KISSmetrics analytics and look up details. Of all the users that visited my site, how many people signed up. Of those people who signed up, how many used a particular feature? Using tools like inspectlet will allow you to visually see how users interacted with the website. It captures their entire session so you know how long they paused before clicking a button. It also opens up the possibility of seeing how users tend to use a product much different than how we envisioned it. This kind of feedback is huge for designers, who can then tweak it to match the average consumers’ mental model.  Visualizing a user’s session on the website helps understand things like

  • Where do users spend most of their time in?
  • What parts of the app are they skipping entirely?
  • Which section gets maximum interaction from the user?

Knowing this helps you decide where you want to place important copy or how you can change the information architecture to ensure that users are not missing key information. There is nothing more painful to a designer than watching users skip over beautifully crafted interface elements. It is important to note that these metrics are measured after we have built the solution and released it in the wild.

Qualitative metrics

At the end of a purchase, I want my users to feel ecstatic. Browsing products on the website should be a happy and breeze experience. These are metrics that cannot be measured through analytics. In such cases, you start by defining the user experience goals for your product and different flows within the product. Then, while designing screens, we can test it with users and ask them how they feel after using the product mocks. By getting these qualitative metrics, we can iterate over a few design concepts before finalizing. The key is to test early and test often so that you haven’t spent too much time perfecting the wrong concept. Sketching and low fidelity prototypes are the best tools for this stage. A longitudinal study records data from the same subject over a period of time. Like asking users to journal their feelings while interacting with your website design regularly for a month. This helps you decipher how a user’s experience changes over their lifetime in the application.

  • What does a regular user of the app feel like when using it?
  • How does the initial perception differ from the experience a week later?

These studies help with user retention and understanding patterns of user behavior over longer periods of time. It takes the focus away from a brand new user and focuses more on recurring users and how we can design effectively for them as well.

User Surveys

User surveys are tricky. By recruiting a select few users to provide feedback, we can understand what users think they need. Emphasis on what they think they need because most user surveys should not directly be converted in a feature requirement. Analyzing common patterns, as problem solvers, we may identify a better solution to a host of common user problems. User surveys are best used in tandem with analytics data, to corroborate if what the users feel really affects the business goals.

Triangulate

Sometimes data acquired from a single source is not sufficient. The results of a user survey alone does not demand that we reprioritize our efforts. Backing up this information with metrics and analytics data goes a long way in identifying key issues. Using a combination of both qualitative and quantitative research techniques, we can build a tight feedback loop that works with design team. The launch of a website is usually the beginning, not the end.

Back to Blog