Monday, August 29, 2016

gui design - Best way to handle long URLs


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 ?



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...