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?
A Windows dialog box.
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.
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.
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.
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. Thus, choosing the right app design software can be critical to the success of the project. It only happens when designers focus on user wants and needs and constantly validate the design hypothesis.