web-dev-qa-db-ja.com

テーブルのデータがタッチデバイスでクリック可能であることを示す方法は?

タッチデバイスを使用しているユーザーの場合、各図(セル)が、図の発生場所に関する情報を含むページをクリックできることを示すための規則は何ですか?

Example of financial data table

デスクトップでは、ツールチップなどを用意するのは簡単ですが、タッチしてもホバーしません。

各セルの隅にあるExcelスタイルの赤い三角形は、より多くの情報を明確に示しますが、すべてのセルにそれがあることは、圧倒的で見栄えが悪いので望ましくありません。また、ホバーツールのヒントのように、図をクリックしたときにユーザーが何を取得するかについての補足的な手掛かりも許可されません。

各図とリンクスタイル(青または青と下線)を一致させることも明確ですが、このアプローチではデータの読みやすさが低下します。また、ホバーツールのヒントのように、図をクリックしたときにユーザーが何を取得するかについての補足的な手掛かりも許可されません。

各図の横に(i)または(?)アイコンがあると、より多くの情報が明確に示されますが、インターフェイスが乱雑になり、読みにくくなります。

これに対する典型的な規則に失敗した場合、これらのセルがクリック可能であることを視覚的に示す最良の方法は何でしょうか?

5
Walden

個人的に私はあなたがあなたの質問に基づいてこれを過度に設計しているかもしれないと思います、それはあなたがデータポイントがクリック可能であり、ユーザーがそのデータポイントをクリックしたときに受け取る情報を知らないことを懸念しているようです。

この質問の簡単な答えは、それらをリンクとしてスタイル付けすることです(本質的にそれがそうであるように)。あなたの質問であなたが提起した懸念の前提に基づいて、私は私の答えを2つの部分に分けます。

データポイントがクリック可能であることを示します

アクセシビリティの観点

「この方法ではデータの読みやすさが低下する」とおっしゃっていましたが、そうではありません。まず、W3Cテクニカルドキュメントを参照して、リンクのスタイル設定におけるアクセシビリティの重要性を強調します。 ガイドライン1.3-選択、キーボードフォーカス、有効な要素、アクセスしたリンクの強調表示を提供する ガイドラインは次のように述べています。

ユーザーは、選択され、フォーカスされ、有効になっているアイテムを視覚的に区別できます。そして最近訪れたリンク(1.3.1);少なくとも前景色と背景色、および境界線の色と太さを含む強調表示オプションを選択できます(1.3.2)。

特に、ガイドライン1.3.1の意図を参照します。

1.3.1-ユーザーは、やり取りできるWebコンテンツを簡単に発見できる必要があります。これを行う1つの効果的な方法は、有効になっている要素とリンク(最近アクセスしたリンクを含む)を強調表示することです。ハイライトされた選択とコンテンツのフォーカスにより、キーボード、ジェスチャー、および音声入力を使用する人々は、自分がどこで働いているかを知ることができます。一部のページでは、他のコンテンツが大量にある中でコントロールを識別しにくい場合や、スタイルを設定して他のコンテンツと区別しにくい場合があります。微妙な視覚的な違いを区別できないかもしれない視覚障害を持つ人々にとって、これは特に難しい場合があります。いくつかの認知機能障害のある人は、外観が似ているまたは標準的でないアイテムを区別することが困難な場合があります。これらのアイテムを視覚的に区別すると、これらのグループがページを調べるのに必要な時間またはコマンドの数が減ります。

これらのデータポイントをリンクとしてスタイル設定することにより、視覚障害のあるユーザー(および視覚障害のないユーザー)が実際に選択できるもの、現在注目しているもの、および既にアクセスしたものを識別するのに役立ちます。

確立された慣習を利用する

リンクのスタイリングは、確立された慣例であり、その中に 知覚されたアフォーダンス がすでに関連付けられています。この確立された規則を利用して、大多数のユーザーはデータポイントがクリック可能であることをすぐに理解します。この Nielsen Norman Group の記事では、リンクをスタイル設定して青いテキスト/下線付きの標準を超えることができることについて説明していますが、「クリック可能性を伝える」ことの重要性を強調しています( signifiers =失われません)。

受け取る情報を知らないユーザー

ユーザーが受け取る情報を理解するために、テーブル内の知覚されたリンクのアフォーダンスとテーブルで使用したラベルの組み合わせを活用できると思います。

まず、行が財務諸表の各項目が何であるかについて明確にラベルが付けられ、値がその行に関連付けられていることが示されます。次に、値が関連付けられている時期を示すために、列にも明確なラベルが付けられます。これは、値が何であるかについてユーザーに最初の指標を提供するはずです。

次に、テーブル内のリンクとしてスタイル設定された値に関連付けられている、認識されているアフォーダンスについて話します。スタイル付きリンクは、リンクをクリックしてアクセスする情報があることをユーザーに示すので、テーブル内のスタイル付きリンクは、関連付けられた値を「ドリルダウン」できる関数があることをユーザーに示します。 [〜#〜] sap [〜#〜]Oracle および Tablea などの主要製品でよく見られます。

要約すると、スタイル付きリンクはこの質問に対する最も刺激的な答えではないかもしれませんが、テーブル内のデータポイントがクリック可能であることをユーザーに示すための最良の方法です。

1
Clint

この問題に取り組む別の方法は、ビューポートがモバイルに切り替えられてアクティブになるたびに、テーブルセルの1つを使用することです。これがユーザーに伝えることは、動作をほのめかすことでテーブルを操作する方法があるということです。

また、ユーザーがテーブルを操作するために使用できる視覚的なヒントもあります。 Smashing Magazineからの視覚的なヒントの記事はこちら https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

0
John

これは携帯からでも見られるウェブページだと思います。通常、ユーザーはあなたが見るすべてがクリック可能な家具で使用されます。私たちが示しているこのようなテーブルでは、アイコンを追加するとインターフェイスの負荷が大きくなると思います。

しかし、代わりに別の方法で問題に取り組んでみましたか?ユーザーがページに入ったときにメッセージで明示的に言った場合はどうなりますか?このようにして、ユーザーができることを非常に明確にし、インターフェースに重みを付けないようにします。

いずれにせよ、各セルの周囲に境界線を描画して、明確に定義された領域になるようにします。

0
MovyMatt

これはアニメーションの良いアプリケーションかもしれません。 pageloadで指カーソルアイコンが短時間表示され、セルを斜めに横切って曲線を描くとどうなるでしょうか。指が各セルの上を通過すると、そのセルが拡大/縮小するか、ドロップシャドウがフェードイン/フェードアウトするか、マウスオーバーでデスクトップ上のクリック可能性を示すために使用するその他のあらゆる状態になります。

アニメーションが十分に微妙な場合は、ページの状態が変化したときにアニメーションを再生したり、スクロールしたりして、ユーザーに思い出させることができます。

0
  • ファブレットやタブレットではない携帯電話のこのような表は、どのようにリンクを示すように選択しても読みにくいです。

  • 上部の明確なメッセージでそれを行うことができますが、これは、指示が必要な場合に使いやすいインターフェースではないというガイドラインに失敗します。ここでは、任意のタイプのチュートリアルまたはメッセージを使用することもでき、同じケースに該当します。クリック後に表示される情報がユーザーのタスクにとって重要である場合、より重い介入を作成し、このガイドラインを確認します。

  • ガイドラインは、リンクを示すためにいくつかの区別が適切であると述べています。私の意見では、下線のない青または他の色の選択は、この状況で差別化を作成するときに行うことができる最小の妥協です。それよりも奇妙なものは、全体の視覚的な重みを増やし、視覚的な過負荷を引き起こす可能性があります(各セルの背景をペイントするなど)。全体的な境界線を作成することはお勧めしません。全体的な視覚的な重みを追加するだけで、追加の意味を伝えないためです。

  • システム/アプリ/ウェブサイトの他のテーブル/ページ/画面でリンクを示すために作成したスタイルまたは規則に従うことを忘れないでください。これにより、ユーザーはリンクがどのように見えるかを認識し、思い出すことができます。

0
Bernardo Doré