DEV Community 👩‍💻👨‍💻

Cover image for 5 differences you might not have noticed between desktop and web UIs

Posted on

5 differences you might not have noticed between desktop and web UIs

If you're developing a desktop app in Electron, NW.js, or a similar tool, it's tempting to just create a "website for the desktop" and leave it at that. But there are a few different UI conventions that you may not have noticed between websites and desktop applications!

The cursor does not change to a pointer (finger) from the default (arrow) on buttons

On websites, if you mouse over actionable elements, your cursor generally turns into a pointer. This includes both hyperlinks and buttons that control the UI. Interestingly, by default when using the <button> tag, the cursor acts just as a desktop UI does and stays an arrow. But when using a stylized <a> or <div> tag that looks like a button, or perhaps by intentionally changing the behavior of a <button>, the cursor changes to pointer.

On desktop applications the pointer is used exclusively for hyperlinks and not for the UI actions. For example, your desktop browser's bookmarks and buttons don't change your cursor into the finger pointer, it stays as the default arrow. Chrome's Dev Tools actually has inconsistent behavior for this - the Elements, Console, Sources, Network, etc tabs use a pointer cursor like a browser, but if you're in the Elements tab and select an element, the second set of tabs for Styles, Event Listeners, DOM Breakpoints, Properties, etc follow the desktop convention of leaving your cursor as the default arrow.

You can't highlight/select/copy any text

On websites, mousing over any non-link will generally give you the text-selection (caret) cursor and allow you to select and copy that text.

On desktop applications, you are generally not allowed to select text nor does your cursor change; text that is supposed to be selectable generally resides in a text field.

You can't select nor drag images

On websites, you can select and copy an image, or straight up drag the image around. An easy way to save an image, for example, is to just drag it from a site directly to your desktop.

On desktop applications, images are handled like text; you can't interact with them.

Right clicking is a thing that people do on the desktop

The right-click context menu may need to be handled in a desktop application, either by disabling right-click in most contexts or populating it with sensible actions. For example, Electron by default doesn't do anything when right-clicking, while right-clicking a text field should allow you to cut/copy/paste/undo/select-all.

Be sure to catch random hotkeys that shouldn't work on desktop

Does ctrl+r do something in your app that it shouldn't on a desktop? How about ctrl+-/+? Does ctrl+w kill your program when it shouldn't on the desktop? Refreshing and zooming might be allowable behavior, but it also might not be, depending on your app.

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.