web-dev-qa-db-ja.com

リンクに関連するアクションを妨げることなく表示するための正しいUIは何ですか?

ユーザーが統計情報を表示したり、ウェブサイトのリンクにタグを追加したりできるようにしたいのですが、ほとんどのユーザーはリンクをクリックして目的地に行く以外にリンクを操作することはないため、非常にまれなユースケースです。主要なユースケースを混乱させることなくアクションを提示する控えめな方法は何ですか?

例:

ページにUXスタック交換へのリンクがあるとします。ほとんどのユーザーはリンクをクリックして http://ux.stackexchange.com に移動しますが、また、ユーザーが http://mydomain.com/link/1/ にアクセスして、リンクに関連付けられている統計とタグを表示するか、 httpをクリックすることもできます://mydomain.com/link/1/edit リンクにタグを追加します。 1は、データベース内のそのリンクの一意のIDを表します。私は現在、ホバーのリンクの下に2つの小さなアイコンを表示することでそれを処理していますが、もっとエレガントな方法があるかどうか疑問に思っていました。

3
shinzui

結局、パワーユーザーがメニューを表示するためにリンクにカーソルを合わせたときにそれを押すことができる、状況依存のキーボードショートカットを実装することになりました。パワーユーザーがリンクを簡単に操作できるようにする一方で、リンクの重いページが乱雑にならないため、このソリューションが気に入っています。

1
shinzui

分割ボタンの操作と変更されたスタイルを組み込むことをお勧めします。ビジュアルデザインのボタンの側面を削除して、リンクが正常に表示されるようにします。リンク(分割の左側)はhrefに移動します。プルダウン(スプリットの右側)はリンクホバーに表示され、ホバーすると暗くなり、クリックするとオプションの小さなメニューが表示されます。これらの要素をマウスアウトすると、それらは消えます。

enter image description here

オプションは、リンク、またはアイコン、またはアイコンとリンクにすることができます。この例ではアイコンを作成するのが面倒だった。

4
Itumac

リンクの横に小さな(鉛筆?)アイコンを表示してみませんか?クリックすると、2つのアクション(統計とタグの表示、タグの追加)を含むインラインポップアップが表示されます。これにより、タッチスクリーンに対応しやすくなります。

また、これらのアクションがサイトの編集者とメンテナーにのみ適用される場合は、他のユーザータイプからアイコンを非表示にします。

1
Calvin Chong

リンクの下の2つの小さなアイコンが主な使用法を混乱させていると思うなら、私はこれが役立つかもしれないと思います:たとえば、ユーザーがリンク上でカーソルを一定時間(たとえば5秒)ハングした場合は、それを表示します別の使用法を示す小さなアイコン。

0
zinking

あなたはあなたの現在のUIで正しいことをしていると思います。レイアウトに表示される追加のアイコンや情報を検討するスペースがある場合は、これが邪魔にならない方法です。ホバリングは非常に一般的な方法になっていますが、親しみやすさを実現するには、ページのさまざまな部分でホバリングを使用して強化することをお勧めします。このようにホバリングすると、「より多くのアクション/情報を表示」と同等になり、ユーザーにとって自然になります。常にアイコン(たとえば編集用)を表示することは悪い習慣ではありませんが、それほど複雑ではありません。そして、この振る舞いはより特定の用途のため、常に存在させる必要はないと思います。

0
Yisela

ユーザーがリンクを挿入するために操作できるツールチップを検討しましたか?唯一の注意点は、できるだけ簡単に使用できるようにすることです。ユーザーがカーソルをリンクからツールチップに移動しても、ツールチップがトリガー解除されて消えないようにするのは簡単です。

以下の例:上部の状態は、下部の状態がツールチップとリンクしている

Example tooltip

0
TJH