Desktop app design was in the spotlight for almost three decades. However, with the rise of mobile devices, mobile apps have taken the place of desktop apps. Nowadays, the design industry is focused on mobile design and desktop design has become a secondary skill for many designers. But product creators can’t ignore design for desktop. Why? Because the desktop is still a primary platform for business and people use desktop apps every day to solve business problems.  

In this article, I want to review the main concepts of desktop app design. Many of the concepts that you will read below are universal and applicable for both mobile and web design.

Prevent feature creep

All too often, in order to make the app more powerful, product teams add as many features as possible. It leads to the phenomenon known as feature creep—the excessive ongoing addition of new features in a product. Feature creep not only increases the time required to build a product, but also makes a product more complex. A great desktop application is powerful and, at the same time, simple.

Productivity, not to be confused with the number of features, is the ultimate measure of power. That’s why it’s so important to carefully balance feature selection. Understand your target users’ goals and craft a feature set that enables them to achieve those goals with ease. You also need to remember to remove all features that aren’t likely to be used.

Design a familiar experience

One of Jakob Nielsen’s usability heuristics says, “The system should speak the users’ language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms.” The best design is predictable for users. It doesn’t require too much onboarding because people know how to use the app right from the start. That’s why, before starting to design your product, you need to conduct user research and competitor analysis. Research how people who represent your target audience use products and compare existing solutions in your product niche.

Here are a few practical tips that you need to keep in mind when working on a desktop design.

Make important elements visible or easily discoverable

Menus or any critical actions should be readily discoverable within the user interface. The user shouldn’t have to search for them or rely on their memory in order to find proper UI control.

When working on a desktop UI, you need to remove visual clutter and put the elements in the right place within a window. Generally, an element’s location should follow its utility. For example, users expect to see navigation options and important actions at the top of the window.

Clear iconography

The meaning of the icons in your UI should be crystal clear for your users. They should understand the meaning of an icon just by looking at it. Some designers think that it’s possible to use a tooltip for the icons and other interactive elements to convey the meaning. But tooltips aren’t the best solution because they increase the interaction cost—the user needs to wait for a second to see the meaning of the element. Each time the user sees an icon, they should know its meaning before hovering a cursor over it. If you have doubts that users will have trouble understanding the meaning of your icon, it’s better to replace it with a clearer alternative or use a label along with it.

Use components provided by the system

Desktop platforms come with their collection of components. System color pickers, calendars, contextual menus— people use all those elements daily without giving it much thought. When you need to show a calendar for users, it’s better to use a calendar provided by the system rather than designing your own UI element.

Consistent desktop app design

Almost any mobile guide says that product design should be consistent among all platforms. So the Android users should not have any problems switching to iOS, and vice versa. The same rule applies to desktop apps. We have two major desktop platforms—Windows and Mac. Your goal is to ensure that product design allows users to switch from one platform to another when needed.

Consider platform specifics

Any platform has its own design standards. Did you notice that Windows modal dialogs have the action confirmation button on the left side, while Mac modal dialogs place this button on the right?

Windows dialog box asking the user if he wants to move a file to the recycle bin.
A Windows dialog box.
MacOS dialog box that is asking the user if they want to save changes to the new file.
A macOS dialog box.

It may seem like a small difference, but if you change a default order, you will make users think. Every time they press a button, they will have to read the label. Imagine that you have dozens of dialogs in your software. The user will need to think every time when they interact with them.

Design the right information density

Information density is the amount of information in a unit of screen real estate. Mobile design was largely about fitting content on the small screen. The small screen of mobile devices made us split the information between multiple screens and place a limited amount of information on each one. But desktop screens have much more real estate. When it comes to desktop design, it means a lot more than the opportunity to add more stuff. Screen size affects all aspects of design, including information density and navigation.

Here are two things to remember when designing for desktop:

  • Reduce the total number of steps required to achieve a goal by providing more information on every step.
  • Minimize the user’s memory load by making objects, actions, and options visible. It’s especially important to focus on making a good navigation experience—desktop apps can support fixed navigation bars, for example.

Tip: If you’re designing an app that’s for both desktop and mobile, start with the mobile version first and prioritize all elements—from most to least important. It’s easier to add elements as you increase the screen size.

Provide visual feedback

Desktop apps can make full use of cursor interactivity. On-hover visual feedback simplifies the process of interaction with a product. The user can hover the cursor over the element and see whether this element is interactive or not. It also allows designers to use animation to make interaction with a product more engaging.

Gif of a visual feedback button that users can interact with on a website
Visual feedback on button click. Image by codemyui.

Always allow “Undo”

As was mentioned above, good productivity is one of the goals for desktop design. It’s vital to make users feel safe when they interact with your product. People in a hazardous environment make no more mistakes than people in a supportive and more visually obvious environment, but they work a lot slower. It happens because they try to avoid making errors. The result has a huge hit in productivity.

“User content is sacred and should not be lost,” says Jef Raskin. That’s why your desktop UI should always have a quick way to undo an action. Design an Undo option in the main menu and as a shortcut (such as Ctrl + Z).

Design for a grid

In comparison with mobile devices that primarily support one-column layouts, the large screen desktop allows using a grid for content organization. Any content on desktop can appear in a multi-column format—content is placed in the areas of the screen that contain columns. The breakpoint range determines the number of columns displayed in the grid, and column width is defined using percentages, rather than fixed values, to allow content to adapt to any screen size.

Gif depicting the scaling of a piece of content when designing a website.
Adapting content to grid. Image by Adobe XD.

Multi-column layouts enable options like a left or right-sided navigation menu, sidebars for widgets, and other functional and decorative structures.

Provide shortcuts

Mobile and desktop devices have different input controls. The touch screen is a primary way of data input on mobile, while for desktop, we have mouse and keyboard. Keyboard shortcuts allow users to work more efficiently. For example, to copy something, we use Ctrl + C instead of clicking on the mouse button and selecting the Copy option from the contextual menu.

It’s essential not only to bake shortcuts into desktop UI, but it’s also important to tell the user that those shortcuts exist. Hopefully, there is a simple way to do that—add a textual reminder next to the menu item.

Microsoft Word uses icons for shortcuts in its dropdown menus to let users know about keyboard shortcuts.
Shortcuts next to the navigation options.

Design for longer user sessions

Users prefer desktop apps for longer, more involved tasks. When longer tasks come up, it’s especially important to consider user comfort. Ensure that users feel comfortable when working with a product. For example, long sessions of reading shouldn’t cause eye strain, or long sessions of interactions shouldn’t cause physical pain in the user’s body.

Allow users to switch from mobile to desktop

Most of the time, users use both desktop and mobile devices, even for different areas of the same task. Take online shopping, for example. A typical user journey starts on mobile where users browse products, and when they find a relevant product, users will want to switch to desktop (because it’s much easier to fill in forms using a physical keyboard and validate data on a large screen).

Simulate interactions with the app

Testing is an essential part of product design, and desktop design isn’t an exception. Present your work with a real desktop environment, and you will see what things work and don’t work for your users.

Prototyping tools like Adobe XD made it simple for designers to see their designs in a believable macOS or Windows desktop environment. All designers have to do is to select an appropriate frame and create connections between screens.

Conclusion

No matter what product you design, whether it’s a mobile app or desktop software, your primary goal is to create a great user experience for people who will use your product. It only happens when designers focus on user wants and needs and constantly validate the design hypothesis.