vincentdnl

UX of URLs

June 18th, 2020

    When building a web site or app, the first thing a visitor might see is the URL. Maybe a friend or coworker shared it? Maybe it was in the signature of an email?

    If the first URL your users see is a pile of nonsensical long numbers, they will turn their back on your website and go away. You lost a potential user.

    In this article, we will talk about how URLs are part of the user experience and may impact how your URLs are shared. It is not about choosing a domain name but how you should construct your URLs after the first slash.

    Entities like users, group or companies must have great URLs

    I recently came across a website where the user profile had URLs like this:

    https://example.com/profile/78928729-john-doe.html

    I think it is a bad example

    Drop the .html

    .html is a piece of technical information that your user doesn't need. The general public doesn't know what HTML is so what's the point of adding it? No one is gonna be like:

    "oh, this website uses HyperText Markup Language, how great!"

    Every website uses HTML.

    Long URLs are intimidating. You don't want to add up unnecessary technical information, especially when it makes the URL longer.

    Drop the numerical ID

    IDs are intimidating. Long URLs with IDs makes you wonder if you are sharing the right thing.

    Have you ever received scam mails? Their links usually contain large numerical IDs as an attempt to seem legit. That's because, for years, successions of large IDs have been used on plenty of websites.

    Now, people have become suspicious of these. They might not click on your link if it contains one.

    We are also exposed to more and more information every day. We have grown weary of long meaningless numbers. Keep that in mind!

    Drop the profile/ part

    This kind of URL, as a user, makes me feel like I'm a second class citizen. With the number and the profile/, I feel like I'm just a number in a big database. No one wants to share that!

    Why not use a slug for users?

    Why not for example use a slug of the first and last names? A slug is a URL safe version of a string. For example A simple sentence. becomes a-simple-sentence.

    So why not use john-doe as an identifier for your users?

    Simple: namesakes. If there are multiple John Doe, you'll end up with a collision in identifiers. That's why a number was added in the previous example.

    Handles are better

    A better solution is to let the user use a display name or a handle.

    Twitter is a good example in this case:

    https://twitter.com/vincentdnl

    This URL is good, simple, and sharable. Keep in mind that people have multiple accounts on multiple platforms. When they create signatures (for an email for example), they link to their accounts on these platforms. If user URLs are not elegantly formed, your URL is not gonna be displayed or shared.

    Would you rather share this message:

    Do you like planes? Join us at example.com/custom-user-group/2020/145277957854354887595433547

    Or:

    Do you like planes? Join us at example.com/we-love-planes

    The second one seems much less shady!

    But how do I represent random IDs?

    Sometimes you are in a case where you need to display random IDs. You will need it for content you can create on the flight, like Trello cards or boards, a Tweet, etc. What to do?

    Keep them short

    As we want short URLs and avoid IDs, we especially want to avoid large IDs. There are two things you can do to reduce the size of this IDs:

    Reduce their size

    You limit the number of available IDs but you have a shorter ID in the end. What's the point of having billions of available IDs when you know that you'll have a maximum of 100k different URLs?

    Change the representation of that number

    A bit of maths here but I'll make it short and simple.

    If you take for example 123456789123456789 (it is called base10 representation because it uses 10 symbols from 0 to 9) and convert it to a different format called hexadecimal (base16) it becomes 1B69B4BACD05F15. It is shorter by 3 characters and represents the same number!

    How do we achieve this? Instead of numbers from 0 to 10, we additionally use letters from A to F to represent the number so 15 becomes just "F".

    We can generalize this to 0-9 plus a-z plus A-Z, etc. and obtain a representation called base64 which can be used to represent numbers in an extremely condensed way.

    Examples

    Twitter is a bad example in my opinion in this case:

    https://twitter.com/vincentdnl/status/1250863316819415046

    This number could be represented differently so that it takes less space in the URL.

    Also "status" might be better called "tweet", because it is what everyone calls it, a tweet.

    So why not something like this:

    https://twitter.com/vincentdnl/tweet/1aXc21E

    Trello uses this kind of shortened ID here is the URL of a board for example:

    https://trello.com/b/<8 characters board ID>/<board title>

    I think they added the board title so that when you have a collection of links you know which is which. This is however not necessary and you can share the URL without the board title in it.

    Here is another example, Youtube:

    https://www.youtube.com/watch?v=dQw4w9WgXcQ

    If Youtube with billions (maybe even trillions) of videos can manage a short ID like this, so do you. You probably don't have as much content.

    Represent them with words

    Here is an example URL on gfycat, a gif hosting service:

    https://gfycat.com/abandonedshorttermdungenesscrab

    Here, the words abandonedshorttermdungenesscrab (or abandoned short-term dungeness-crab when unpacked) represent the ID. To keep it simple, it's another way to represent a number (like we just saw with base64).

    In my opinion, it would be better to avoid hyphenated words for this kind of representation. I also think that adding dashes in between the words or capital letters, in the beginning, would make it more readable. Usually, you want to avoid sticking words together because sometimes it doesn't work out well. The website experts-exchange had this wisdom. Just look at what can happen if you stick the two words together: expertsexchange. What do you read first? 🤔

    This thing is used for representing seeds for cryptocurrencies wallet. If you had to remember this number: 16107253210189746418104142711095171610 you would be in trouble. Remembering this army van defense carry jealous true garbage claim echo media make crunch is easier. Ok, it's still hard but imagine for shorter numbers? Three words in an URL seem manageable. If you are a more technical person, you can check this link to learn more about mnemonic codes.

    But words have meaning. It can be confusing to have many random words clustered together like this. How does an "abandoned short-term dungeness-crab" look like anyway? That's what your users might think. And you want to avoid insulting words! If you go for a word-based number representation, make sure to keep swear words out!

    Crazier idea: represent them with emojis!

    Emojis are valid URL caracters! So this:

    🏹.to

    Yes, it is a valid domain name. It is a URL shortener that uses emojis!

    Too bad that domains with non-ASCII characters will end up looking like this https://xn--kn8h.to/ sometimes... Support for UTF-8 URLs should be better.

    🏹.to/❄️⚔👑

    This URL for example is related to Game of Throne. You can guess by looking at the emojis that are used!

    You could think of an ID represented with emojis instead of numbers or even numbers and letters.

    Beware, it might not work on older browsers!

    Also, keep in mind that emojis especially chained together can have meaning. You don't want to chain eggplant with droplets for example... 🤔

    Wrapping up!

    You should keep your URLs as short as possible and avoid alphanumerical IDs as much as possible. People share links. They won't share links that make them look like scammers. They will share links that are so simple that they can easily be written on a piece of paper. Why did we need URLs shorteners in the first place? Because URLs were too long!

    Make users, groups, and companies using your product feel like they belong here. Remove the unnecessary subsections of your URLs and make them clean and simple. If your product is good and your URLs are short your website might be shared way more often!