web-dev-qa-db-ja.com

CardViewがクリック可能であることをユーザーは知っていますか?

モバイル開発とUXスキルを磨くための個人プロジェクトに取り組んでおり、小さなUXジレンマに遭遇しました。

各CardViewには、いくつかのデータと開始ボタンが含まれています。これらのボタンを押すと、ユーザーはワークアウトの開始を示す新しい画面に移動します。ただし、ユーザーは、ルーチンを表示して、必要に応じて編集することもできます。

カード全体をクリック可能にしたので、ユーザーが他の場所をタップすると、ルーチンが表示される別の画面に移動します。これは良い設計決定ですか?

ユーザーがワークアウトの詳細を表示したい場合に、カードをクリックするかどうかはわかりません。スタートボタンの横にVIEWボタンを追加することを考えましたが、画面が小さいと、スタートボタンとアイコンの間に収まりません。

Enter image description here

23
krabinowitz

ワークアウトのタイトルをアクティブなクリックの色と同じにして、タイトルをクリックするようユーザーに促します。カード全体がアクティブな場合でも、ユーザーが注目することができます。

enter image description here

35
Roger Attrill

私は最近、カードをタップできない同様のデザインでいくつかのテストを行いました。「スタート」のようなボタンのみです。参加者は、アクションが1つしかない場合、ほとんどの場合、カードとタイルがタップ可能であることを期待しています。彼らはまた、ヘッダーをクリックする傾向がありました。あなたのデザインでは、カードをタップするとトレーニングが開始されると思います。そのため、カードに2つの別々の機能を持たせたい場合は、2つのボタンが必要で、カードを無効にします。

13
Ling

クリック可能なカードを持つことは何の問題もありません。その一例がYouTubeです。動画のリストを閲覧しているとき、各動画はカードで表されます。

Example of clickable card, screenshot from Google Play

カードには「もっと見る」ボタンもあり、追加のアクションを含むドロップダウンメニューが表示されることに注意してください。ただし、ほとんどの場合、ユーザーはビデオを見たいだけなので、カードをクリックするだけです。カード自体は「プライマリアクション」を表し、カード内の他のインタラクティブな要素はセカンダリです。

あなたの場合、「主なアクション」がワークアウトを開始することになると思いますので、カード自体を開始ボタンとして機能させる方が直感的です。編集や削除などの他のアクションは、[もっと見る]ボタン内に非表示にすることができます。

8
gardenapple

大きなチャンクオブジェクトが直接操作することでアクションを表す場合(クリック、タップ、ホバリングなど)は、明示的な視覚的ヒントがあるはずです(特に、マテリアルデザインで指定された「カード」は通常、直接インタラクティブではありません)。

大まかなモックアップは許しますが、カードにシェブロンを追加しました。これにより、余計なスペースを使用せずにクリック可能であることは明らかです。ユーザーはシェブロンを直接クリックまたはタップすることもできます。

enter image description here

7
Dai