web-dev-qa-db-ja.com

ホバー時だけでなくインライン編集にユーザーを招待しますか?

カーソルを合わせたときに編集可能なコンテンツのスタイルを変更することで、ユーザーに「その場で編集」できることをユーザーに示すことは非常に一般的です(たとえば、黄色の背景の追加、「クリックして編集」ツールチップ、鉛筆アイコンの表示など)。これは、編集可能なものにカーソルを合わせるまで、ユーザーは機能を発見できないことを意味します。

私のWebアプリケーションには、25以上の編集可能なフィールドがあるページがあります。 ユーザーがページを見て、編集できることをユーザーに知らせたい。さらに、ホバーを介して機能を示すことは、追加のボーナスにすぎません。

編集可能な各コンテンツに点線の下線を引くことについて考えました。これは通常、「ヒント」または「私の上に置く」(下の画像のように)を意味するためです。

enter image description here

ただし、これには「編集可能」を意味するのではなく、ホバーするように促すだけで(理由がわからないまま)、ホバーにインジケーターが表示されます。多分これは大丈夫ですか?少なくとも彼らはそれをより早く発見するでしょう。しかし、もっと良い方法はありますか?

注:
ページが永続的な編集フォームではない理由は、ユーザーが情報を編集したいのと同じ頻度で情報のみを表示したいためです。ただし、編集したい場合は、通常、1つのフィールドをすばやく編集したいだけです。また、ユーザーはデスクトップのみを使用しているため、モバイルについては心配していません。

6
LoveGal8

私は個人的にeditアイコンを次のように使用します

http://catalogus-professorum.org/extensions/themes/silverblue/images/icon-edit-grey.pngを編集 これはあなたのテキストです

アイコンを使用することにより、ユーザーはマウスカーソルを操作しなくても、それらのコンテンツに関連付けられたアクションがあることを知ることができます。

このソリューションは、カーソルがないとこの機能を発見できなくなるタッチデバイスでも機能します。

アイコンをテキストの前ではなくの前に置くことをお勧めします。これにより、常に同じ場所に常に配置されていることがすぐにわかります。

目を惹き付けない色の薄いアイコン(つまり、薄い灰色)を使用できる場合、ページのクイックスキャンではほとんど気付かれませんが、検索すると十分に表示されます。

3
Luca De Angelis

これは、彼らが頻繁に使用するフォームですか、それとも1つの取引状況のようですか?

彼らが一度それを見ると、二度とそれを見ることがないか、ほとんどないので、認識可能であり、ユーザビリティの脅威を示さないフォームフィールドに固執するだけです。

ただし、これを頻繁に使用し、かなりのUIが有効な懸念事項である場合は、状況に応じたヘルプが必要な場合は、おそらく機能を説明するアニメーションGIFを使用しますか? (Macのタッ​​チパッドまたはマジックマウスの設定と、説明用のビデオを横に並べて考えてください)。

私の(過酷な)推奨は、特にミッションクリティカルなタスクでは、美学と革新性よりも使いやすさを優先することです。

1
Luis

インラインテキストボックスを使用できますか?編集可能として簡単に認識されます。必要に応じて、マスクや日付ピッカーのような入力を組み込むこともできます。

0
Bobwise