Great designs are a mixture of research, strategy, architecture, and aesthetics. Miss any one of these crucial factors and you risk missing the mark in developing a great application that wows your users.
This article will explore some application design principles which guide many great designers’ work. Keep in mind that what we discuss here are not hard and fast rules that apply to every scenario. Instead, you should be able to figure out what works best for your particular scenario.
Treat these principles as a starting point for informing your design process, benchmarking against common best practices, and validating that your design is efficient as well as impactful for your target audience.
Design research & process
Understanding business, users, and tech perspectives
Having a multidimensional, holistic approach to your work requires that you include multiple team members that represent business, technology, as well as design, to ensure that every perspective is represented. This is essential because you want to build an appealing product that is also financially viable, as well as having a cutting-edge design that is also technically feasible.
Once you have a team together, you’re much better equipped to understand what problems and opportunities you have for your project. Then you can continue the discovery phase or start working on the product.
- business perspective:
- What makes money and what doesn’t?
- Where is the business going and how is it changing?
- What insights do you have about your users?
- user perspective:
- Who are your users and what are their goals?
- What works well with your existing system and what doesn’t?
- What user needs are you currently not meeting?
- What issues do users have?
- technology perspective:
- What’s hard to change and what isn’t?
- What are big additions and what are small ones?
- What is the platform built with and what changes are needed?
- What constraints does your current system have that you should be aware of?
Develop your process with timeline, budgets, and ROI in mind
Not every client has the same constraints, which is why it is very important that you identify what unique requirements you have to work with for your specific project. This will allow you to develop an optimal process for your unique timeline, budget, and ROI.
As a holistic process, UX requires time and significant resources. The more you can spend on iterating, testing, and researching, the more likely you are to build a top-notch product.
- timeline – you may have month to build the product, or you may have a year
- budget – depending on the specific business, the budget can vary significantly
- ROI – you shouldn’t spend time and money just because you have it. More of time and money could lead to a better profitability ratio, or more iterations could results in a low-level ROI, which means you’d be better off spending your resources elsewhere
Create empathy with meaningful personas
There’s a significant difference between trying to understand your audience as a whole and trying to understand specific users on a more empathetic and personal level. Understanding this difference requires that you first understand how important personas are.
It’s easy to make the mistake of assuming you know who your users are but creating personas can significantly increase your ability to develop a product which serves your users and creates meaningful and memorable experiences.
Personas are low-cost and high-value tools you can use to foster empathy and influence decision-making. They have specific traits, clearly defined goals, and they can influence decisions relating to device preferences, font size, colors, and accessibility. They are great for evaluating the data you have from user research, guiding your design decisions, and communicating requirements to everyone on the team.
Build user stories and drive user flows
It’s easy to get lost in all the innovative features you want your product to have, and while that is important to figure out how you will situate your product in a unique context, creating lasting buy-in means identifying the type of journey your users will have with your product and who the main protagonists are.
ConversionXL describes how user flows are directly related to conversions: “In order to maximize your conversions, you have to get the user flow right – build one that matches users’ needs […] Your primary aim is to fulfill the business objectives (either your own or the one set by your client). Business objectives might be getting users to sign up for something, getting people to purchase products or join an email list […] People don’t just come to your site, and right away do what you want them to do. In most cases, they need to go through a set of steps leading up to the action.”
There are many ways of building user stories, but they are best when there is an actual user involved in the story. Adding the action, the perceived result, benefits, and frequency can also help with creating the narrative.
User stories are meant to help you understand your users’ goals and needs. The focus is on how the product reacts to the user input. The process itself, the cost in time spent by the user as well as money spend by the company to build the system, and the system’s complexity are all analyzed as well to discern whether certain design propositions are feasible or not.
Prioritize what content to include and where
Using your customers’ input to prioritize your product’s features is important because it can lead you to simplifying the product. Designers may often stuff a product’s first iteration with numerous features that overwhelm users and obscure the product’s value. If you don’t conduct user research to see which features are the most essential for the product’s release, you may end up creating a product that no one likes to use.
When prioritizing, consider:
- what to put in the navigation
- what your audience values most
- tailor your marketing messaging
- decide where to focus your efforts, both in design and in development
If you jump head-first into UX design without first understanding process and workflows, you risk building a product which people can’t use to accomplish their goals. You have to build the right product before you build the product right.
Ask yourself how your design will solve users’ problems, based on what you know about their goals and needs.
Here are some examples of documenting process and observing workflows:
- understanding the process of finishing a task
- understanding your stakeholders as well as your users, what their relationships are, as well as their touch points
- identifying user pain points, bottlenecks, and areas that could benefit from automation
- defining a strategy to frame solutions to your problems
Wireframes, mockups, and prototypes
A key factor of UX design is correctly identifying users’ needs and building a well-designed solution that allows them to accomplish their goals. Nielsen Norman Group says “Wireframes and prototypes […] are used to communicate (and perform usability tests on) page layouts, information hierarchy, and, in the case of interactive prototypes, interactions.”
To communicate design intent as well as conduct usability testing, consider:
- wireframes – low-fidelity blueprints which serve as foundations for efficient iterations in designs, used to illustrate how users may consume information and interact with the product
- mockups – high-fidelity visualizations which allow designers to instill the brand, use imagery, add messaging, and include artistic elements to create something close to what the final design might look like
- prototypes – interactive versions of mockups which allow designers to illustrate how a website or application will look like
The affinity diagram method is used to identify patterns in qualitative and quantitative data. It can be implemented at different points in the design cycle and in various ways, such as:
- asking for ideas on how to organize a body of information
- usability testing a product
- analyzing and grouping the data acquired during research
Here are four steps for conducting affinity diagramming:
- everyone on the team commits their data points to post-it notes
- the notes are placed on a large board where they can be moved around
- give your team time – say 20 minutes – to organize the data based on logical connections and groupings
- continue organizing and reorganizing all your insights and reach a consensus on what the most important recurring themes in your affinity diagram are
Addition by subtraction
The best creative solutions are often also often the simplest ones. While it may seem counterintuitive, simplicity can actually be very sophisticated and crafting designs which are simple, clear, and usable is an artform in itself.
When focusing on simplicity it’s important that you:
- understand your users, their mental model, and the specific use cases they are facing
- understand your web app’s technical constraints
- understand which features and functionality really matter to users
Also remember to:
- help users focus on important UI elements – CTAs can route users to their specific goals without requiring them to see every bit of information available. Research what matters most to your users and prioritize their most common actions and needs.
- create layered complexity – an example would be breaking down a complex form into multiple “bit-sized” steps.
- focus on what drives value – ask your users what they would most like to see in your app.
- remove any unnecessary features – great experiences are mindful of details and to simplify an experience you need to scrutinize every little details.
Use the appropriate technology
Understanding your users is key; you need to know what their preferred digital environments are and which of your product’s features work well in those environments.
Gil Edelman of the Silicon Valley Software Group writes “More than 60% of web traffic now comes from mobile devices, and 25% of Americans use only mobile devices to access the internet. These trends will continue to accelerate […] Refer to the key constituents you identified when designing your MVP and the value proposition your product will offer them. Are users more likely to engage with your product on their phone while on the go, or while sitting at a desk in their office?”
You can and should apply the same logic to devices and apps. If most of your users are using Android devices, this will obviously impact some key design decisions. When you know your users’ habits and preferences, you can address their needs by building the right product with the right technology.
Simplicity and clarity
When creating an engaging experience, there are several challenges you need to face: the importance of simplicity and clarity, the competition that is inherent when creating and launching a product to market, as well as the fact that people are busier than ever. Keep in mind that there are hundreds of high-quality web apps and potentially dozens of competing products which are fighting for your users’ attention.
That is why simplicity and clarity are so important – your users want speed, intuitive usability, and great functionality. You increase the chances of satisfying your users’ demands by keeping your designs simple, clear, and straightforward.
Enhance your creativity by understanding your constraints
Having a clear frame for your solution will allow you to develop a strategy that works. You need to set the stage for design work that is efficient, productive, and results oriented. Don’t think of constraints as obstacles that hinder your creativity, but instead see them as starting points for focus and clarity which actually push your creativity to its limits.
Creativity always thrives off of the constraints and challenges we face. As designers or developers, we are always faced with multiple constraints, and because we understand that they are unavoidable, our design process always starts with understanding. Constraints frame our challenges in a way which allows us to focus on and understand how to creatively overcome them.
Jakob Nielsen wrote in 1995 about 10 Usability Heuristics for User Interface Design, and the first one on his list is visibility of system status: “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
When users interact with a system, they should always be aware of what is happening behind the scenes and how the system is processing their interactions.
Here are some examples of how you can communicate with users and confirm the actions they’re taking within your system:
- use subtle microinteractions accompanied by motion
- use modals with visuals and clear messages
- use hover state messages
- use notification messages
- use progress steps, highlighting the current step, to let users know what’s going on as they are interacting with your system
According to the Nielsen Norman Group, “chunking is a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and remember it better.”
Modern websites tend to be longer partly because of chunking, as designers split content into multiple shorter sections to make it more digestible and not overwhelm users.
Brand consistency across screens and platforms
We spend a lot of time and effort developing websites and experiences for monitors, often forgetting that the majority of web traffic actually comes from mobile devices, which is why you need to ensure consistency between desktop experiences and mobile experiences.
At the same time, remember that users don’t interact with your brand solely though your website. They are likely also interacting with it through social media and the pages on those platforms could also be seen as alternatives to your website.
That is why it is essential firstly to optimize your website for multiple devices, and secondly to see your social media pages as homepages as well, ensuring a consistent brand experience across all of these channels.
People don’t read information, they scan it
Users don’t typically read copy on an interface the way they would on other reading materials. Instead, they scan it quickly for the information they’re interested in. A study by Jakob Nielsen revealed that only around 20% of content on a page is actually read.
People scan content because it’s quicker and more efficient, especially when the behavior is aided by text, imagery, colors, and interactivity. Instead of forcing your users to make unnecessary cognitive efforts to read all your text won’t create a good user experience. Instead, help them scan your content easier by writing as clearly and concisely as possible, using white space, colors, different font sizes, and images to break up your text.
Horizontal and vertical real estate
As mentioned earlier, you should make full use of the horizontal real estate you have on larger monitors, potentially stretching your content to fit the entire width of the screen. Look at your website’s analytics, see what screen sizes your users have, and optimize your website accordingly.
Vertical real estate encourages your visitors to scroll. This real estate is free as long as the content on your page captures users’ interest and connects them to the rest of the experience. Instead of trying to squeeze everything above the fold, try making your content vertical and encouraging users to scroll.
Flat navigation vs deep navigation
The two main classes of navigation are flat navigation and deep navigation.
Flat navigation tends to have fewer layers in the information hierarchy, typically between one and three, as well as fewer navigation points overall. Conversely, deep navigation tends to have over 4 layers in the information hierarchy.
While deep navigation may be unavoidable for more complex websites, it does have certain downsides. Flat navigation would generally be preferable since users tend to find it faster and easier to use.
Using mega menus may reduce users’ cognitive load when they are looking for a certain page. Mega menus are dropdown interfaces which allow users to navigate through the website’s hierarchy by simply hovering over page titles.
Putting related information on the same page
An important aspect of any high-quality website is its information architecture, or IA. This refers to which information is present on which pages, creating an intuitive navigation which users can easily understand and use, and organizing content in a way that draws users into the experience you’ve designed.
There are several things to consider when dealing with your website’s IA. Crafting an attractive and enjoyable experience which encourages people to continue exploring your website is crucial, and this involves every aspect of UX design, from content and graphics to motion and interactivity.
Here are some tips for grouping related information on your website:
- sections – create sections which are clearly demarcated so your users can easily find their way across them
- longer pages – try to lengthen your pages instead of splitting information across multiple pages since modern users usually scroll to find more information
- wider pages – digital experiences should be optimized for all screen sizes so make use of the extra real estate your users have on larger monitors
- tabs – while not always necessary, tabs could be a quick and easy way for you users to move from one section to another
- modals – modals are great because they can show users extra information on the same page, without forcing them to navigate somewhere else
- videos – you can use videos to compress your message into a short and engaging video which tells users what you want to tell them without requiring them to click or tap on anything
Links and buttons
To quote again from Steve Krug, “since a large part of what people are doing on the web is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not.”
That’s why you need to ensure that all your links look like links and all your buttons look like buttons. While branding does have a significant impact on your website’s final aesthetics, clickability is an essential factor for user navigation and conversion.
Icons are absolutely everywhere, from our computer desktops to our smartphones, smartwatches, car dashboards, smart fridges, and so on. While they are often accompanied by labels, icons don’t rely on words to communicate meaning to users and inform them about what they should click or tap on, how they can navigate, as well as generally interact with a system.
Here are some tips for using icons on your website:
- be conventional – all common icons should be easily recognizable, such as the print or the save icon
- be consistent – icons that serve the same purpose across systems should have a consistent look and feel, even if there are small differences between them
- label icons – while labels aren’t always necessary, they can still help
Tabs are navigational elements which allow users to easily access different areas of a website or different parts of a single page. While they can be great for easier navigation and grouping related content, sometimes a page may benefit from not having any tabs.
Tabs are intuitive because of their commonality and can be used to save space, connect related information, and group content.
Here are some tips for using tabs on your website:
- make them symmetrical and interactive – tabs should be organized in a logical manner, inform users which tab they are on, and click or tap animations should let users know if they’ve selected something
- use clear and concise copy – labels should be short, use plain language, and include consistent typography
- indicate interaction – highlight the current tab and clearly tie tabs to different content areas
Guide your users to CTAs
You should always have a clear objective when a user visits your website or uses your application. CTAs encourage users to respond to that objective, either by signing up for a newsletter, downloading a whitepaper, buying something, and so on.
CTAs typically appear in the form of buttons, enabling users to accomplish theirs and the company’s goals.
Direct your users to CTAs by:
- providing clear visual guidance
- conveying clear and simple value propositions
- using good copy that encourages them to act
White space, also referred to as negative space, simply means the absence of something. This negative space is in fact an active composition element which serves to direct users’ attention to what we deem is most important on a page. Designers use white space strategically to increase user focus and improve readability on pages.
A page that is packed with text, visuals, and other elements can easily become overwhelming. Using strong headlines and clear and scannable interfaces will significantly improve users’ ability to identify, focus, and comprehend important content on a page. Strategically using white space together with these elements will increase comprehension even further.
Animating for usability
You shouldn’t necessarily implement animations just for the sake of flair. While looks are important too, also consider usability and how well your page works.
If you want to add usability and flair to your design, consider animating with motion that makes a seamless experience for users. It can span the entire page, capitalizing on both horizontal and vertical real estate. Keep in mind that motion is scalable, meaning it can be something as small and simple as a hover interaction or as large as an entire page morph that reveals a whole different screen.
Testing and feedback
Use analytics to improve UI
In order for you to get granular with your metrics and really home in on ways to improve your designs, you need to ask questions which focus on potential issues. You can then use the data to find a solution.
It’s difficult to argue with numbers and hard data. Allocating time to analysis can provide you with great insights which inform the design process. Before diving in, however, you need to figure out which particular analytics are most important and what questions you are trying to answer.
Analysis feeds the design process and with the data gained from it, you can craft better wireframes, mockups, prototypes, and in the end, final products. Keep in mind that this whole process requires you to carefully review your research and investigate all the quantitative figures that are influencing your designs.
Test early on
Digital product development is hardly ever a perfect process. Digital products have multiple features, they are developed for multiple devices with varying screen sizes and resolutions, and are catered to a wide variety of users, each of them with different needs and expectations.
As you can imagine, getting everything right on your first go is almost impossible, with some features sometimes not working like they are supposed to and simply discovering that the entire system you built is just not well-liked or even sustainable when it’s way too late.
Uncovering what doesn’t work early on is essential to your long-term success. Fortunately, you can test as early as the UX design stage, which is long before any actual development. You can also test existing products to inform or validate redesign efforts, combining insights from your users and stakeholders, as well as strategy.
Testing early on during the design and even development process is always recommended. This will allow you to see what works well and what doesn’t and change your design trajectory, mapping out a successful course of action.
Usability testing can easily be overlooked amidst all the excitement of creating a new product, but its importance is essential to the design process. After you’ve conducted preliminary research and you’ve created detailed blueprints which outline your product’s design, it may look like any potential issues would have already been encountered and resolved. However, that’s not necessarily true.
While a product may sometimes make perfect sense to the people designing it, users may find the experience of using it filled with frustration. Regardless of the amount of forethought that went into the design process, some details can still be lost in a design’s rapid process of ideation, iteration, and execution. Paying attention to details is key to creating amazing user experiences and this requires consistent testing before releasing the product.
Analyze feedback and design for root problems
Conducting research and testing to get user feedback is very important for the design process. How to use and analyze the feedback, however, isn’t always straightforward.
Users are typically not UX designers, but as testers, they can provide you with valuable insights that can help you home in on great design solutions. Every complaint or suggestion they make during testing is valuable information, just be sure not to treat subjective feedback as absolute truth. You shouldn’t implement every change they suggest as they don’t necessarily understand your technology, overarching strategy, or business constraints.
Design is a process
Approaching design in an iterative manner is important because products evolve with time. Repeating the design process will ensure that your product offers better experiences by addressing changes in your users’ needs and behaviors, as well as technology shifts.
It may be tempting to see the released product as the final iteration in its design, but you should actually see it as a living artifact which learns from its users and responds to their needs. Most designers would argue that it’s a good idea to repeat your design process both during your initial major design cycle and long after that as well. Not conducting ongoing testing and design may hinder your ability to learn from your users and improve your product.
All the advice we’ve mentioned above should help you design your web apps so that you always offer users the best possible experience.
For tips on designing websites, check out UX Principles for a Great Website Design.