Scott Hanselman

URLs are UI

July 7, '17 Comments [50] Posted in Musings
Sponsored By

imageWhat a great title. "URLs are UI." Pithy, clear, crisp. Very true. I've been saying it for years. Someone on Twitter said "this is the professional quote of 2017" because they agreed with it.

Except Jakob Nielsen said it in 1999. And Tim Berners-Lee said "Cool URIs don't change" in 1998.

So many folks spend time on their CSS and their UX/UI but still come up with URLs that are at best, comically long, and at worst, user hostile.

Search Results that aren't GETs - Make it easy to share

Even non-technical parent or partner things URLs are UI? How do I know? How many times has a relative emailed you something like this:

"Check out this house we found!
https://www.somerealestatesite.com/
homes/for_sale/
search_results.asp"

That's not meant to tease non-technical relative! It's not their fault! The URL is the UI for them. It's totally reasonable for them to copy-paste from the box that represents where they are and give it to you so you can go there too!

Make it a priority that your website supports shareable URLs.

URLs that are easy to shorten - Can you easily shorten a URL?

I love Stack Overflow's URLs. Here's an example: https://stackoverflow.com/users/6380/scott-hanselman 

The only thing that matters there is the 6380. Try it https://stackoverflow.com/users/6380 or https://stackoverflow.com/users/6380/fancy-pants also works. SO will even support this! http://stackoverflow.com/u/6380.

Genius. Why? Because they decided it matters.

Here's another https://stackoverflow.com/questions/701030/whats-the-significance-of-oct-12-1999 again, the text after the ID doesn't matter. https://stackoverflow.com/questions/701030/

This is a great model for URLs where you want a to use a unique ID but the text/title in the URL may change. I use this for my podcasts so https://hanselminutes.com/587/brandon-bouier-on-the-defense-digital-service-and-deploying-code-in-a-war-zone is the same as https://hanselminutes.com/587.

Unnecessarily long or unintuitive URLs - Human Readable and Human Guessable

Sometimes if you want context to be carried in the URL you have to, well, carry it along. There was a little debate  on Twitter recently about URLs like this https://fabrikam.visualstudio.com/_projects. What's wrong with it? The _ is not intuitive at all. Why not https://fabrikam.visualstudio.com/projects? Because obscure technical reason. In fact, all the top level menu items for doing stuff in VSTS start with _. Not /menu/ or /action or whatever. My code is https://fabrikam.visualstudio.com/_git/FabrikamVSO and I clone from here https://fabrikam.visualstudio.com/DefaultCollection/_git/FabrikamVSO. That's weird. Where did Default Collection come from? Why can't I just add a ".git" extension to my project's URL and clone that? Well, maybe they want the paths to be nice in the URL.

Nope. https://fabrikam.visualstudio.com/_git/FabrikamVSO?path=%2Fsrc%2Fsetup%2Fcleanup.local.ps1&version=GBmaster&_a=contents is a file. Compare that to https://github.com/shanselman/TinyOS/blob/master/readme.md at GitHub. Again, I am sure there is a good, and perhaps very valid technical reason. But another valid reason is very frank. URLs weren't a UX priority.

Same with OneDrive https://onedrive.live.com/?id=CD0633A7367371152C%21172&cid=CD06A73371152C vs. DropBox https://www.dropbox.com/home/Games

As a programmer, I am sympathetic. As a user, I have zero sympathy. Now I have to remember that there is a _ and it's a thing.

I proposed this. URLs are rarely a tech problem They are an organizational willpower problem. You care a lot about the evocative 2meg jpg hero image on your website. You change fonts, move CSS around ad infinitum, and agonize over single pixels. You should also care about your URLs.

SIDE NOTE: Yes, I am fully aware of my own hypocrisy with this issue. My blog software was written by a bunch of us in 2002 and our URLs are close to OK, but their age is showing. I need to find a balance between "Cool URLs don't change" and "should I change totally uncool URLs." Ideally I'd change my blog's URLs to be all lowercase, use hyphens for spaces instead of CamelCase, and I'd hide the technology. No need (other than 17 year old historical technical ones) to have .aspx or .php at the end of your URL. It's on my list.

What is your advice, Dear Reader for good URLs?


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Friday, 07 July 2017 23:55:21 UTC
Good article, I've always worried about making sure users can copy URLs to share them for things like search results or other semi-dynamic content, but I've never thought about it to this degree.

Fyi, there are a couple spelling mistakes in the first few paragraphs.
Kevin Hahn
Saturday, 08 July 2017 00:01:27 UTC
Ehh I think your reaching here Scott. I get the real estate search result issue b/c the exact url when copied and pasted won't take you to an exact house. However no matter how long a URL is to a regular non-tech user as long as it works, and they know how to copy and paste I don't think too many people care. People aren't writing out many URL's to a search result within a domain on printed media very often where someone would need to then literally type it in. IF anything it is usually landing pages like seeing an ad for www.cnn.com (not an exact article).
Al
Saturday, 08 July 2017 01:27:05 UTC
Great post. I agree, as a user I hate when sites don't consider their URLs as part of their UI.

Like you Scott, I have a Synology NAS that I love. Almost everything about it is great, but there is one thing that has always bugged me. The Photo Station application has terrible URLs. I use Photo Station as my family picture site and have a custom domain pointing to it. But I really wish I could more easily share links to specific albums with sane URLs.

If anyone from Synology happens to come across this post, hopefully they can raise the issue internally to get that fixed. :-)
Kevin Kuebler
Saturday, 08 July 2017 03:37:03 UTC
This is great timing... we are dealing with a hashbang fiasco where it's whatever.com/#/blah... who is ever going to remember to put a hashbang after the URL... unless it points to an anchor, i have no clue why it's still a thing...
ElAndyG
Saturday, 08 July 2017 03:48:54 UTC
good points... but SEO and the SEO people put other pressures on URL structure... Google and friends do place value on terms found in the URL.
casey
Saturday, 08 July 2017 06:24:52 UTC
SEO Friendly URL’s for ASP.NET Core is a blog post I wrote to show how to get the StackOverflow style URL's in ASP.NET Core. One additional benefit you didn't mention is that keywords appearing in your URL can actually give you a boost in your search engine rankings.
Saturday, 08 July 2017 07:13:28 UTC
How often are you feeling the need to hack a URL? Wouldn't the desire to hack a URL stem from avoiding a poorly designed site? A paper cut can be more pleasant than having to tweak a URL on a phone. If URLs are UI, then I question your concept of UX.

People who are fed up with the "hashbang fiasco" must not appreciate how a framework (AngularJS for example) can dramatically speed up dev time while easily facilitate desirable UI/UX.

What's next? 'View source' must yield a Magic Eye of the Statue of Liberty?
Adam
Saturday, 08 July 2017 07:21:54 UTC
I came to same conclusion in 2011 and applied it to Wikipedia. The result of this thinking was the creation of Wikipedia:Manual of Style/Computing § Website addresses.

Later that year, I created an editing tool called {{Section link}} that inserted links to desired parts of articles but used the academy-standard section link (§) in its display text. Fellow Wikipedians later developed the {{format link}} tool that accepted a raw link and formatted its display text to contain §. This was after the introduction of the Lua programming to Wikipedia.
Fleet Command
Saturday, 08 July 2017 13:40:45 UTC
Good perspective. I always noticed and liked ebay URLs. Easy to share, short or descriptive as user wants.
John Joseph
Saturday, 08 July 2017 15:10:39 UTC
Right on Scott!

Slightly off topic...but the URLs for charity fundraising pages are also crazy.


http://main.diabetes.org/site/TR/TourdeCure/TourAdmin?px=3992664&pg=personal&fr_id=11747


After my first year of sending this out, hoping for donations - I bought a domain name. And since we need four links, each member of the family gets a subdomain.

<a herf="http://brian.teamtegan.com>http://brian.teamtegan.com<\a>

This is much easier for the user. Since the URLs change each year, I simply update the domains when a new event comes around.

So - a permanent URL for a sorta permanent page.
Saturday, 08 July 2017 15:18:56 UTC
And my own URL/HTML typing skills are horrible on an iPod Touch screen...drop a quotation mark, flip a slash or autocorrect an anchor text....arg.

http://main.diabetes.org/site/TR/TourdeCure/TourAdmin?px=3992664&pg=personal&fr_id=11747

vs

http://brian.teamtegan.com
Saturday, 08 July 2017 15:24:30 UTC
Scott, just because you took a decision early on that didn't prove so wise doesn't mean you cannot have new ideas and talk about them in strong terms.

It's definitely not hypocrisy to point out the situation or URLs and your opinion of them. Specially since your opinion in this case, is almaost objectively the right thing to do. And your URL does seem simple to me, at least on this page.

While Dropbox and others do it right, I'm a big fan of the SO model, specially with it's compacting and shortening. In fact, just like some sites have sitemaps, I'd go so far as to say that each site publish a URL navigation guide- in their own interest. If I'm more likely to remember your URL pattern, I'm more likely to find something when I want to come back.
Saturday, 08 July 2017 15:27:48 UTC
In fact, to continue with my earlier comment- specially since not only your own post but the comments are informative, would you mind doing a post on something similar- User IDs and User names?

Personally I'm not a fan of user ids as a login-device so only use gmail but when there is content that has to be attributed to users, user-ids are the way to go but I don't like that people squat on them and leave them unused.
Saturday, 08 July 2017 15:31:05 UTC
Good article .... BUT ...
It totally misses any argumentation regarding SEO/SEM.
Yes, human-readable URLs are very good for search engines too ... so whats my point?!
My point is that in this article there are example URLs written to be "good" because the latter part of the URL doesnt matter.
Well ... and that' not true if it becomes to be relevant to SEO/SEM.
Because, it results in multiple URLs returning the same content - the so called "double content" in SEO terms ...and you guess it, this is BAD.

For sure this only matters if we talsk about any web content that needs or wants very good rankings in search results, or pays for search engines advertisings (because than it gets an price issue).

Heiko
Saturday, 08 July 2017 18:31:38 UTC
Heiko, this shouldn't hurt SEO, and may actually improve it. If we take Stack Overflow for example: they use 301's for anything other than the current valid 'slug'. Furthermore the canonical url is specified with that slug, so the server dictates which url is the 'right' one.
This way 404's are impossible, and there's always a 'non-breaking URL' reflecting the actual content.

So the current 'valid' URL is specified as the canonical one:

<link rel="canonical" href="https://stackoverflow.com/questions/701030/whats-the-significance-of-oct-12-1999" />


And any request with another slug (or without one), gets a 301:


| =› curl -I https://stackoverflow.com/questions/701030/
HTTP/1.1 301 Moved Permanently
Location: /questions/701030/whats-the-significance-of-oct-12-1999
...
Koen
Saturday, 08 July 2017 19:16:34 UTC
Totally agree.

I recently had a non-technical relative try to send me a link to a wonderful graduation video they made on YouTube for a family member. The URL was to their account's admin page, so there was no way to actually see the video. How do you explain that to them?

One shout out to smugmug.com for doing this right for photos. Has saved me a lot of time sharing photos.

Thanks, Scott.
John Bennett
Saturday, 08 July 2017 19:51:45 UTC
How come no one ever brings up Amazon's URLs in discussions like these? Ever copy/paste a product URL? Good golly...makes that offensive single underscore seem a whole lot less offensive.
Todd Menier
Sunday, 09 July 2017 05:06:25 UTC
The URL should tell the story, the same way you write a unit test title that will tell's you right away what the test is doing - instead of reading and understanding the code. to my opinion same goes for URL - showing user id, question numbers is pretty but less effective and doesn't tell the story and you require to open the URL just to understand what it is (for marketing it's great), as a developer I want to know where I'm going to.
There is no question here - of course short URL are easier but as every site / app has a simple share button - is it really that important?
Shai Raiten
Sunday, 09 July 2017 08:34:01 UTC
Dear Hanselman, could you please make it, that I can share your blog post easily in chats?

https://www.hanselman.com/blog/URLsAreUI.aspx doesn't have that ring to it,

As a user, let me make sugget: https://www.hanselman.com/urls-are-ui or https://urlsareuis.com/ would be even better.
Richard Metzler
Sunday, 09 July 2017 10:41:37 UTC
Nice article, so true!
Patrick
Sunday, 09 July 2017 11:10:16 UTC
@Koen
Thanks for clarifying.
If(!) its done that way, its fine - as you describe.
Actually what you wrote should have been mentioned in the article - thats what I meant.
Heiko
Sunday, 09 July 2017 13:20:38 UTC
Scott, I agree that concise URLs are nice- but even though you believe you're thinking of this from a user's point of view, you're really still thinking of it from a programmer's point of view.

Users don't care about URL length or complexity. Only the domain and TLD are important for end users. As long as the website has deep-linking, copy and paste works whether the URL is 5 characters or 500 characters. You only need look at the most big websites on the internet- there's probably zero correlation between URL niceness and success or user experience ratings.
Sam
Sunday, 09 July 2017 14:10:03 UTC
Adam said:

"People who are fed up with the "hashbang fiasco" must not appreciate how a framework (AngularJS for example) can dramatically speed up dev time while easily facilitate desirable UI/UX."

Well, actually Adam... They probably just don't appreciate that anything after the hash is never sent to a server, makes it impossible to pre-render the content before loading the JS, and exposes the limitations of an implementation that favours dev time over function.
John Askew
Sunday, 09 July 2017 17:05:32 UTC
Regarding the comments that copy/paste make the URL length/structure unimportant: that's only true if you assume the sharing medium is both electronic and has no length limit. I have friends who will text me links to Amazon products, which are long enough that the arrive as 3 independent messages. After I stich them back together, they work fine, but any time it happens to my mother I have to straighten it out for her. At the very least, services like that should offer their own shortened URL service (like what Google does when you share a map). It doesn't necessarily make the URL human readable, but it does make it easily sharable. And it doesn't require a "normal" user to think about how they could manually hack the URL to shorten it. Services that allow you to do custom shortened URLs can help with this, but it's often much better to optimize your URL to contain only the information that is truly pertinent to identifying the page's content to the user and/or search engine.
hvacengi
Sunday, 09 July 2017 18:31:46 UTC
John Askew, I was merely trying to point out that there are functions associated with symbols like the '#' and that there can be tradeoffs worth considering.

Why are we discussing pre-rendering now? Is this relevant to prioritizing the URL as part of the UI?
Adam
Monday, 10 July 2017 00:57:13 UTC
I loved the Dropbox v.s Onedrive comparison. Booyah!
Great points made in this post.
Dave
Monday, 10 July 2017 03:57:43 UTC
Partially agree. IMO "private urls" should not be human readable/guessable. So I don't agree with your comparison between OneDrive and DropBox. Private urls will neither be seen by search engines, nor be shared to others. A man prefers an encrypted document with its url "https://onedrive.live.com?id=A0B1C2D3E4F5G6", instead of "https://onedrive.live.com/photos/sexycandy" which by chance seen by his wife.
Danny Chen
Monday, 10 July 2017 04:16:09 UTC
i thought that the underscore in vsts "visualstudio.com/_projects" meant that the dev team was saying that it is "private" and could change at any time so don't hard code it anywhere
aaron
Monday, 10 July 2017 10:43:07 UTC
And then you want to send the url from a google search result:

[let's not get blocked as spam].com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiR4J7Fw_7UAhUJL1AKHSNBBJIQFggkMAA&url=http%3A%2F%2Fwww.dictionary.com%2Fbrowse%2Fsomething&usg=AFQjCNEbVA5JIKdRtoCynte1F48P9tT0Ow
BorisCallens
Monday, 10 July 2017 17:01:23 UTC
Great post, though there are some possible black hat issues with allowing any arbitrary text in your URLs, probably won't matter to most:

https://hanselminutes.com/587
https://hanselminutes.com/587/i-stole-your-wallet
https://hanselminutes.com/587/scott-hanselman-hates-cats

Gene
Monday, 10 July 2017 17:12:31 UTC
SharePoint is another great example. There are multiple URLs to arrive at the same functionality, and all of them are insanely long.
shankar
Monday, 10 July 2017 19:27:13 UTC
This is something that really bothers me. I also try to not break URLs, which sometimes frustrates me =/
Erick Mendonça
Monday, 10 July 2017 20:37:56 UTC
Richard - Did you happen to read the last paragraph of the post under "Side Note" ;)
Scott Hanselman
Monday, 10 July 2017 21:00:38 UTC
I figured out how to make shortenable URLs for Rails 5 - https://stackoverflow.com/questions/45017971/urls-are-ui-in-rails-5
James
Tuesday, 11 July 2017 18:16:52 UTC
The more I think about it, the more I realize this is such an important thing. Once/If URLs were shorter and understandable, people would be more inclined to understand them and not click/visit phishing/other malicious sites which rely on user misunderstanding URLs or not caring about long urls.

Scott, how would you propose a OneNote web URL UI? Surely they have to use ids/numbers since names could be unwieldy? (I still hate that there is no deep-linking to notebook pages, but if there were)
Wednesday, 12 July 2017 00:27:42 UTC
URL's are UI, true. The printed copy image in your post reminded me of the brilliant site, hugeurl.com, which unfortunately is no longer around. archive: https://web.archive.org/web/20130815101934/http://hugeurl.com/

^ not a great url, lol
Brett Slaski
Wednesday, 12 July 2017 09:25:52 UTC
Agreed with this technique also apply this strategy every new url.
Wednesday, 12 July 2017 19:17:32 UTC
For a project, we faced issues with URL being a big pile of key, value properties (we needed to save state of the application in the url (so it could be shared)).

A colleague of mine came up with https://github.com/ananthakumaran/u/ to solve the problem of long ugly URLs.

The approach is to encode the URL based on schema. The added advantage, is that as long as the schema is backward compatible, URL is also. And application gets a decent way to manage state.

Example from the repo:
Without μ:

http://app.com/url#%7B%22lookingFor%22:%22bride%22,%22age%22:%5B25,30%5D,%22religion%22:%22Hindu%22,%22motherTongue%22:%22Bengali%22,%22onlyProfileWithPhoto%22:true%7D


With μ:
http://app.com/url#bHhc9I-aqa



ciju
Thursday, 13 July 2017 01:43:12 UTC
how about this

https://hanselminutes.com/587/fdsfdsfdsfd

?
Thursday, 13 July 2017 16:24:06 UTC
Rand @MOZ retweeted your article, and I cannot agree more with prior comments about nonprofits.

Take the American Heart Association's page about Cholesterol:

http://www.heart.org/HEARTORG/Conditions/Cholesterol/AboutCholesterol/About-Cholesterol_UCM_001220_Article.jsp

Friday, 14 July 2017 00:40:57 UTC
We built a text messaging service for our youth sports CMS and we had to figure out a way to 1) include links in the text messages back to the originating website, while also 2) making it obvious to the recipient where the text message was coming from. Point #2 made it so that we couldn't use a standard URL shortening service - we had to use the actual domain name of the originating site because the sending phone number was just some random one from our pool of numbers in Twilio.

With variable length of the domain name itself we had to make sure to create short-cut URLs to be used in the text messages which were also still descriptive enough for people to know what they were clicking on in the message. But they had to be short enough to allow some basic text content to be included as part of the message before the link for more information.

Saturday, 15 July 2017 09:40:06 UTC
Lovely post. I couldn't agree more.

I've worked on many web projects, often for large companies. It's disappointing to see how frequently URLs are not considered at all, or are at best peripheral to the design and build work. Playing the "SEO card" sometimes helps persuade stakeholders to care about URLs. However, it really ought to be part of the process, regardless of whether it was an explicit requirement from the client or not.

I'd especially like to see more UX and UI design folk be considerate of URLs in their work.

I even wrote a post about it on our company's blog, in the hope it might raise awareness: http://wiprodigital.com/2015/08/20/whats-your-url-strategy/

Perhas its time I wrote another one on the topic and chuck in a link to your post! :-)
Monday, 17 July 2017 03:28:51 UTC
This time, it's real I lay my love on you It's all I wanna do Every time I breathe I feel brand new You open up my heart Show me all your love and walk right through As I lay my love on you.
Monday, 17 July 2017 03:29:35 UTC
Just a smile and the rain is gone Can hardly believe it, yeah. There's an angel standing next to me.
Monday, 17 July 2017 10:06:36 UTC
Great post and perfect as breakfast reading! Keep up the good work and you got yourself a new reader! :)
Monday, 17 July 2017 15:58:04 UTC
test
test
Wednesday, 19 July 2017 11:04:07 UTC
I created a Chrome extension because I hate shorten urls (bit.ly or truncated urls by Twitter) on Twitter, as they are unreadable. It's open source, give it a try, there is good examples of what it does inside the README : https://github.com/polomarcus/faster-links
Paul Leclercq
Thursday, 20 July 2017 10:10:43 UTC
very nice and inspirative blog which attracts me.
Thankyou for giving me such a blog to understandable.
Thursday, 20 July 2017 19:19:27 UTC
Oh a million times yes!

My biggest gripe is with services like Shopify. Don't get me wrong, 99% of the stuff that Shopify does is amazing and it gets you up and selling online quickly.... but if I want to run a landing page or a promotion page I have to stick it behind /pages/ . I get that the actual products site behind the /products/ but at least that makes sense.

Same goes for their blog on the site, it's behind /blogs/ and then it has a default name so you end up with /blogs/news/name-of-article

Saturday, 22 July 2017 16:54:23 UTC
hihi j'aime la capture du journal et encore plus le lien :-p
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.