UX Subtleties
A collection examining user interface design, that seeks to illustrate the subtle problem of providing a good user experience.
Adding Link on Paste
Feature: If the user clipboard contains a URL, and they paste while some text is selected, the selected text should be turned into a link with that destination URL. (By default, pasting text replaces selected text.)
Supporting this feature makes it easy for your users to add links to their text.
In this UX case study, a user first copies a link URL from somewhere, most commonly a browser address bar:
There are several possible action sequences to apply the copied link to some text.
When link pasting is supported, minimal user actions are required:
This avoids either a mouse movement or a key command that the other link entry methods require.
The most obvious (but slower) UX in most text input fields requires a button press:
For users familiar with common shortcuts, Cmd + K (on macOS) can be used to insert a link. This is slightly less work than clicking a button, but more than direct link pasting.
Notion:
Linear:
By far the easiest is the ‘Link Paste’ method.
Pasting a link works in Notion:
And in Slack:
And in Linear:
Return Key: ‘Enter’ vs New Line
The behavior of the ‘Return’ key in a text entry field varies a lot between different programs.
Google Sheets
In Google Sheets, typing ‘Return’ alone moves the cursor out of the current cell and selects the one below:
To enter a literal newline in a spreadsheet cell, you must type Cmd + Return:
Shift + Return seems to instead select the current cell:
ChatGPT
The ChatGPT web interface has the interesting behavior that ‘Return’ performs differently depending on the window width.
In narrow windows (likely considered a proxy for mobile devices), typing 'Return' inserts a literal newline:
But in wide windows, typing 'Return' sends the message:
Rich Text Editing: Bullets
When building a rich text editor, take care not to accidentally make editing text harder than if you’d done nothing at all.
One nice thing about plain text is that you can always achieve pretty much any visual arrangement by careful spacing and newline placement (e.g. ASCII art at the extreme end). However, some rich text editing environments accidentally make text harder to form and harder to navigate, through awkward integration of custom formatting.
For example, many text editing programs that support numbered/bulleted lists as a special formatting construct make it hard to have blank lines between the numbered items, as in:
1. Item one 2. Item two
vs:
1. Item one 2. Item two
(CommonMark distinguishes these as “tight” vs “loose” formats for lists.)
In plain text, this is as easy as inserting a new line between the numbered bullet markers.
But in Apple Notes, you can easily have two “tight” bullets:
But if you try to write “loose” bullets in the obvious way, it’s fragile. It initially looks correct, but then suddenly the (2) bullet changes to (3) and then (1) when you edit it:
If you instead try writing two “tight” bullets and then inserting a newline manually, you end up with two separate bulleted lists, each starting with (1):
These examples illustrate the complexity of getting UI state right when implementing a rich text editor.
There is a way to do this, but it wasn’t obvious to me in the beginning, and I’m partly writing this post simply to remind myself the way to do it: Shift+Return when your cursor is at the end of bullet (1). Compare:
Typing ‘Return’ at the end of a bullet (1) ends current bullet and begins the (2), and typing Return a second time returns the cursor to the document body root:
This is desirable behavior, and without it navigating between bullets and their outer context would be a UX problem of its own.
Shift+Return inserts a “literal” newline, instead of treating ‘Return’ as ending formatting constructs. A second, normal Return starts the (2) bullet marker, with the desired whitespace in between:
Even though this achieves the desired visual effect, it isn’t really semantically exactly right, because it’s a newline in the “body” of (1), not a top-level newline between the bullets. It’s the best I’ve been able to figure out though in Apple Notes.