web-dev-qa-db-ja.com

長いURLを処理する最良の方法

文字数の点で長いリンクを含むリストがあり、私の解決策がUXの点で優れた解決策であるかどうか疑問に思っています。

私の解決策は、リンクが80文字を超える場合はリンクを切り捨て、80文字の後に「...」を追加することです。リンクをクリックしても、元の完全なリンクに移動します。

そのUXについて皆さんはどう思いますか?

28
irfan mir

これは良い方法ですが、楕円を文字列の最後ではなく中央に置くことをお勧めします。通常、他のURLと区別するのはURLの最後の部分であるため、省略記号を中央に置くことで、URLの有用な部分を切り捨てることはありません。

例:

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/

末尾の楕円:

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

真ん中の楕円:

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

Xcodeがこれを処理する方法の例を追加するために編集:

XCode ellipses example

41
Charles Wesley

ほとんどの状況でリンクの開始(ドメイン名)と終了(ページ)が最も興味深い部分であるため、私は真ん中でトリミングします。

たとえば、次のように比較します。

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

16

@CharlesWesleyや他の人が提案する省略されたURLの代替は、グループ化または関連付けを提供することです。

@CharlesWesleyの例を使用:

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/

共通するセグメントのグループのみを提供します。

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

または、バリエーションを追加して、他の戦略を組み合わせる:

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/
5
JustinC

URLが何かである可能性がある場合、おそらく他の人が指摘したように、中央部分を削除することを選択するのが最善でしょう。 URLが適切に構成されている場合、末尾にはページのタイトルが付けられます。ソースを示すため、最初の部分は重要です。これは、ドメイン全体を取得するのに十分な理由です。また、ツールチップに完全なURL(または可能な限り多くのURL)を表示してください。

さらに、URLをさらに微調整することもできます。

  • http://を失う。ユーザーは通常、http、https、ftpの違いなどを気にする必要はありません。また、表現の他の側面により、これがWebアドレスであることが明確になります。

  • www ..を失います。これは住所の差別化要素ではなく、さらに4つの興味深い文字のためのスペースを節約します。

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

...になる

_smashingmagazine.com...why-should-we-care/_

さらに一歩進んで、参照されているページのtitleを取得します。これは、ページが何であるかを示す、より人間が読みやすいインジケータです。グーグルは主に理由のためにページタイトルをリストします;)。もちろん、URLを2次情報として追加してください。タイトルも長くなる可能性があります(おそらく、SEOの試みで、ページの最初のパラグラフ全体をタイトルに入れるのを見てきました)。したがって、最後に切り捨てます。

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

4
Koen Lageveen

ドメインの第1レベルと第2レベルをそのままにしてください。

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

そうしないと、攻撃者がドメインを偽装できるというセキュリティ問題が発生する可能性があります。

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
1
usernumber