Reimagining User Experience of Markdown Link
Tags: ux, uxdesign, markdown
Published: 2024-05-20 04:52:41

## Introduction

Zuunote aims to make [writing in Markdown enjoyable to everyone](https://zuunote.com). This includes technical and non-technical people - and everyone in between. This means crafting a writing experience that feels right to everyone. And this posts documents my balancing act in achieving that when creating and editing links in Markdown.

## How to create a link in Markdown

Let's get this out of the way first. This is how a link looks like in Markdown: `[Contact us](https://example.com/contact-us)`

There are two parts to it:

1. Brackets `[]`: The **text** of your link goes in there, in this case _Contact us_. And,
2. Parentheses `()`: The **URL** goes in there, in this case `https://example.com/contact-us`.

The brackets `[]` part comes first, followed by the parentheses `()` part.

## Advantages of creating Markdown links with plain-text characters

The brackets and parentheses can be intimidating and a turn off to a lot of people. But I believe that once you get past that, you are going to experience something in your writing that you never did before.

For example, this is how you would create a link in [Google Doc](https://www.google.com/docs/about/):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7ygrmuhccu4c6mbljt2.gif)

Compare to Markdown editors such as [Typora](https://typora.io/):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb2eud8r67hokl7ek15w.gif)

[Confluence](https://www.atlassian.com/software/confluence) can do that too:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zodbiecocq1kqpuz7md9.gif)

Again, I believe once you get past having to enter brackets and parentheses, writing in Markdown will become extremely _ergonomic_ for you.

And one positive side effect is: editing becomes _precise_ too.

I mean, for example, you will run into troubles in Google Doc and Confluence if you want to edit in the beginning of a link's text:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fy05w6xhx9fdykyr1vs.gif)

even though you can edit it anywhere in between:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50h0q9slaoiyht3zp0t4.gif)

That's a little confusing, right?

This is the fool-proof way to edit link's text in Google Doc:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h21huqfc5tgnci8yqnsm.gif)

and in Confluence:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35uf0tcvtxwkuqx3ueoe.gif)

(Note: in Confluence, link creation and modification flows are different. [See more](https://zuunote.com/blog/markdown-headings-wysiwyg-ux-studies/))

and in [Notion](https://www.notion.so/):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9of33s8mddvfcwqr6r1j.gif)

But you don't have to struggle like that in Markdown Editors:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm8k3vcnoqqvyrbraqvp.gif)

(But notice the exploded long url and the inconvenience to copy and select. More on this below.)

No surprises there! Once we knew that brackets `[]` encloses link's text, we can precisely edit the texts anywhere within them.

However, even with this added ergonomics and precision from Markdown, I believe there are still areas we can improve.

## UX issues of Markdown links

Markdown editors such as Typora that offers live-preview without split-pane offer an ergonomic way to create links. However, when it comes to editing them, it's not as ergonomic and pleasant as it's precise.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u729exv67ieqmfkxzr20.gif)

Notice the _jarring shift_ in your content when you focus on a link with a super long URL.

[Nota](https://nota.md/), a Markdown editor for Mac, solves it by initially showing an icon as a placeholder:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkw459k95aoc81sge56f.gif)

But still doesn't avoid the content shift when cursor enters the parentheses:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz64kvnfbzxqauw9tr4m.gif)

Additional to the content shift, copying and editing the long URL are not easy to everyone:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad2ad4gl58sq7c31oqyt.gif)

## Zuunote

[Zuunote's](https://zuunote.com) guiding principle is to meet everyone halfway - everyone who is using Google Docs and Microsoft Words, and everyone who is using Notion, Confluence, Typora, and Obsidian.

Below is how I meet Markdown links halfway for everyone.

### Creating links

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmrqroc8znfjtbia3tyo.gif)

Everything is just plain-texts. Boring but good and accessible.

### Entering links

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeyj4s8sgpkdqbtml6aw.gif)

Here, I adopt the action buttons that you see in Google Docs and Notion, and enclose them with parentheses as seen in a vanilla Markdown link, which means link's Markdown syntax is still being enforced:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r8kqy6xhlpppb5nb4by.gif)

This implementation not only avoids the jarring content shift, but most importantly it's functional and delightful to everyone.

### Edit link's URL

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnw1rncucjdzsdawxrgn.gif)

Clicking the edit button displays an input field, in which you can use familiar keyboard shortcuts(or mouse clicks) to quickly select all, copy, or paste.

Things still flow and act like plain-text but now with added niceties you see in places like Google Doc and Notion.

### Copy link's URL

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qa6h59ay3yagtpcn72y.gif)

Copy URL by clicking a button rather than carefully selecting the text.

### Remove links

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd8tmlzzpbezzaw0mbq1.gif)

## Conclusion

It seems to me that every text editor caters solely to a particular group of people. What if there's a text editor that all groups of people can equally enjoy? That's the goal of Zuunote. And I hope it shows here through the way it implements links. But I'm way in over my head. So please send me feedbacks at [hello@zuunote.com](mailto:hello@zuunote.com) if you want. Or just [join the waitlist](https://zuunote.com/#waitlist).

Thank you for your attention and time. Take care.