Differences Between Designing a Web App and a Desktop App

Shan Shen
Muzli - Design Inspiration
4 min readFeb 5, 2018

--

What is the last time that you downloaded a Desktop App? Probably it’s been a while. It seems that if we can find things we need and get stuff done in a browser, there’s no need to download an App to our desktop.

On the flipping side, you may still have a few Desktop Apps lined up on your deck, let me take a guess here:
Slack — to keep in touch with your work colleagues on a daily basis;
Sketch or any design software — if you’re a designer;
Evernote — if you like taking notes and documenting thoughts.

We use Web Apps for quick tasks VS use Desktop Apps for time-consuming tasks

Intriguingly, patterns reveal behind the action of downloading a Desktop App. First and foremost, users who downloaded Desktop Apps are more likely to be converted to active users of those Apps. Also, some Desktop Apps can support full features even when they’re offline. Last but least, in general, Desktop Apps are more stable and reliable.

The above patterns lead to a shared expectation for both Web and Desktop App users: an App should look and behave the same way no matter it is within a web browser or on a desktop screen.

User expect the same UX on both Web and Desktop Apps

However, when it comes to aligning designs and maintaining a consistent user experience across web and desktop platforms, a couple of things need to be considered in its designing phase. It calls for not only UI adjustments but also a thorough understanding of the affordances of each platform where the App runs.

1. Understand platform guidelines

Most Web Apps look identical on both Mac and Windows, but Desktop Apps might look and feel different on Mac and Windows. It is because Desktop Apps on Mac are subject to MacOS Human Interface Guidelines and Apple already specified what UI elements designers should use for specific user interactions. For example, standard UI elements like dialogs, popovers, and tooltips(help tags) are not entirely customizable on Mac.

However, on Windows, UI elements are entirely customizable hence designers have more freedom playing around with styles like when they are designing Web Apps. It’s still better to double check and make sure the UIs are following standard UI patterns from UWP(Universal Windows Platform) guidelines to avoid confusing users.

The same UI but different styling on Mac and Windows

2. Multi-task user interactions

In a Web App, users can create multiple tabs in the browser to do several tasks. All the tab windows line up in a horizontal order to make it easy for eye-scanning. Whereas in a Desktop App, users will face either several windows or several overlay modals in one window to do tasks. The challenge here for designing on Desktop Apps is to help users find the window they need and bring the right window foreground during multi-tasking.

Multi-tasking on a Web App and a Desktop App

3. Platform-specific touch interactions

MacBook Pro(2016) supports a touch bar as the extension of the current keyboard, and Windows Surface Book(2015) makes the main screen touchable. The capabilities on the hardware side of Mac and Windows have enriched screen-based interactions in both Web and Desktop Apps. Our Web Apps could become more like mobile Apps, and our Desktop Apps could be more tangible when we interact with the UI elements on a screen.

Touch interactions for future Web and Desktop Apps

Summary

Personally, I see the merging trend of unified designs on both Web and Desktop Apps. It’s interesting to see how screen interactions become more diverse with touchable desktop screens like Windows 10 and voice-driven interfaces like Amazon Show. I guess that’s also the fun part of picturing a new world of future software products!

--

--

Principal product designer at Custom Ink. I lead digital experiences in tech to empower communities and lifelong relationships. shanshenux.com