28

I have a list that contains long, in terms of character count, links and I am wondering if my solution is a good solution in terms of UX.

My solution is that if the link is over 80 characters, then truncate it and after the 80 characters add a '...'. Clicking on the link still navigates to the full, original link.

What are you guys' thoughts on that UX ?

Improve this question
  • 3
    Is there some reason you're showing the raw text of the links instead of hyperlinking text that describes what the link points to? For example <a href="really-long-link">description of what the user will find on that page</a>. I can't think of any good reason to show the actual text of the link. You could pull the page title if you don't have a description. – Graham Herrli May 30 '13 at 15:33
  • 3
    I don't know what OP's intent is but an example of where you would display the full URL is if you were showing a list of source code files where the path IS the description. – Charles Wesley May 30 '13 at 15:38
  • @3nafish The description of the page / URL is earlier in the interface. The link exists to be the last piece of information to identify the page if the title of the page and the description has not already. – irfan mir May 30 '13 at 20:48
  • @CharlesWesley Yes, in this instance, the URL ( specifically the domain name ) acts as a description. – irfan mir May 30 '13 at 20:49
  • @irfanmir Oh. Does that mean this is in a SERP? If so, you might want to edit the question to make that context clearer. – Graham Herrli May 30 '13 at 23:39
41

This is a good approach, however I would recommend putting the ellipses in the middle of the shortened string rather than at the end. It is commonly the last portion of the URL that distinguishes it from others, so by putting the ellipses in the middle you are not truncating the useful part of the URL.

Example:

www.thisisalongdomain.com/section/category/really-long-page-one/
www.thisisalongdomain.com/section/category/really-long-page-two/
www.thisisalongdomain.com/section/category/really-long-page-three/

Ellipses at end:

www.thisisalongdomain.com/section/cate...
www.thisisalongdomain.com/section/cate...
www.thisisalongdomain.com/section/cate...

Ellipses in middle:

www.thisisalong.../really-long-page-one/
www.thisisalong.../really-long-page-two/
www.thisisalong.../really-long-page-three/

Edited to add example of how Xcode handles this:

XCode ellipses example

Improve this answer
  • 1
    Do you think it's better to do this based solely on a pre-set number of characters, a percentage of characters, or instead to do it based on portions of the URL? My immediate thought would be to show the domain name(ideally the full 'www.example.com/'), follow it with the ellipsis, and end with the full page name. It seems like that could be problematic if the domain or page name is particularly long, but that style would be more useful in the case of a descriptive domain and page name combination, which isn't all that uncommon. – Mono May 30 '13 at 15:40
  • 2
    I don't know, that is an interesting question. I suppose it would depend on the properties of the links in the collection. If they all have the same base URL then that information wouldn't be very useful and could be truncated first. If the domains could vary, then trying to keep the domain intact would have value. It would be interesting to test it and see what users actually prefer. The key is to identify what portions of the URL help the user to identify and compare, and make sure any truncation emphases those elements. – Charles Wesley May 30 '13 at 15:44
  • In reflection, the full domain and page method would likely be overly problematic for websites like Youtube, where it's only a domain and a page for a video, instead of having a long directory path. I suppose an alternative method could be present in the code as supplementary for special use cases, but that would likely over-complicate what should be a relatively simple matter. The use of this method would greatly depend on if it's user submitted or admin posted links, and the variability of the websites in use. Thanks. – Mono May 30 '13 at 15:48
  • 1
    Suggest also trimming off any "www." to save chars. – Steve Bennett Jun 5 '13 at 1:14
16

I would trim in the middle, because in most situations the start (domain name) and end (page) of a link are the most interesting parts.

Compare, for example:

http://ux.stackexchange.com/questions/40326/best-way-to-handle-l... ...exchange.com/questions/40326/best-way-to-handle-long-links/40328 http://ux.stackexchange.com/q...best-way-to-handle-long-links/40328

Improve this answer
5

An alternative to the ellipsed URL as @CharlesWesley and others suggested is to provide groupings or associations:

Using the @CharlesWesley's examples:

www.thisisalongdomain.com/section/category/really-long-page-one/
www.thisisalongdomain.com/section/category/really-long-page-two/
www.thisisalongdomain.com/section/category/really-long-page-three/

Provide only a grouping of the segment that is in common:

www.thisisalongdomain.com/section/category/really-long-page-
       one/
       two/
       three/

Or add variations and mix in the other strategies:

www.thisisalongdomain.com/.../really-long-page-
       one/
       two/
       three/

www.thisisalongdomain.com/.../category/
       really-long-page-one/
       really-long-page-two/
       really-long-page-three/

www.thisisalongdomain.com
       /section/category/
              really-long-page-one/
              really-long-page-two/
              really-long-page-three/
Improve this answer
4

If the URL could be of anything, you could probably best chose to strip the middle part (as others have noted). If a URL has been properly constructed, the end will have the title of the page. The first part is important because it indicates the source. This would be a good reason to try and get the entire domain in. Also be sure to show the full URL (or as much of it as possible) in a tooltip!

Addittionaly, you could tweak the URL even further.

  • lose the http://. Users shouldn't usually be concerned with the differences between http, https, ftp and what not. Also, other aspects of the representation will make it clear this is a web address.

  • lose the www.. It is not a differentiating aspect of an address and saves space for 4 more interesting characters.

http://www.smashingmagazine.com/2013/05/28/open-device-labs-why-should-we-care/

... becomes

smashingmagazine.com...why-should-we-care/

I would take it one step further and retrieve the title of the referenced pages. This a more humanly readable indicator of what the page is about. Google primarily lists page titles for a reason ;). Do add the url as secondary information of course. Titles can be long too (I've seen people put the entire first paragrph of a page in the title, presumably in an attempt at SEO), so truncate these at the end.

Open Device Labs: Why Should We Care?... (smashingmagazine.com...ould-we-care/)

Improve this answer
1

Make sure to keep the first and second level of the domain intact.

https://ux.stackexchange.com/questions/40326/best-way-to-handle-long-urls
           ^^^^^^^^^^^^^^^^^
           this part

If you don't, you may cause a security issue with attackers able to fake domains:

original url:
https://ux.stackexchange.com.notlegitstackexchange.com/questions/40326/best-way-to-handle-long-urls
shortened versions:
https://ux.stackexcha.../questions/40326/best-way-to-handle-long-urls
https://...ackexchange.com/questions/40326/best-way-to-handle-long-urls
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.