インジケーターがクリック可能であることを伝える方法
私たちはあなたの運転行動を分析し、そのスコアを生成するアプリを作りました：
青、オレンジ、緑、赤のスコアサークルが表示される画面の1つ（クリックして拡大）：
いずれかをクリックすると、特定のスコアに関する詳細を示すポップアップが表示されます。
私たちが理解しようとしているのは、円がクリック可能であることをユーザーにグラフィックで明確にする方法です。これまでは、ベベル/シャドウ付きの3Dタイプのアイコンを見てきましたが、適切なものを見つけることができませんでした。
私たちは特定の方法で結婚しているわけではありません。円を描く必要はまったくありません。アプリのクリーンでミニマリストな外観とジャイブするソリューションを探すだけです。
問題は、平らに見えても触りやすいように目立つものを持っていることです。
タッチ可能な手がかりを追加するには、それぞれ独立してタッチ可能なものの周囲に何らかの種類の境界線を配置する必要があります-隣接するタッチ可能なものから分離し、 図を地面から目立たせる にします。
Googleの 材料設計の原則 は、ヘビーウェイトの設計要素を追加せずにこれを非常にうまく実行するためのインスピレーションを提供します。影を追加して、レイヤー化された要素を背後のサーフェスから浮き上がらせます。このように、影actsは境界線としてbeing境界線はありません。代わりに、それは物理的または空間的な分離のように見え、現時点で大流行しているように見える「カードのような」外観を与えます！
次に例を示します。
注：同じフォントを使用することはできませんでした。単語の数を減らして最小の外観を増やし、合計を実際に大きくするのではなく、最初の3つの測定値と合計の間の「式」の関係を強調しました。
アプリのUIはマテリアルデザインの原則に従っているようです。 Googleのマテリアルデザインからの重要な洞察の1つは、特定の画面での操作を1つのボタンに減らし、目立たせることです。
画面に表示される情報を減らす必要があります。ある程度の好奇心を持ち込むことができるので、これはユーザーから体験するインタラクションの量を増やす可能性があります（ここで推測するだけで、ここで測定基準を見ることができます）。
スペースがユーザーに合計スコアを与えるために使用されている場合、それはクリアボタンのような形をしていて、さらに内訳が別の画面に表示されますか？いくつかのA/Bテストを実行する必要があるかもしれませんが、これはインターフェースを単純化します。
観察
インタラクティブな要素を見分けるのが難しいため、フラットUIは問題があります。
これは、ビジュアルウィジェット/ゲージで特に当てはまります。これは、ウィジェットに複数の関数をオーバーロードしているためです。
- ユーザーはゲージを見て、その目的が情報提供であると想定し、（正しい）複数の目的があるとは考えないでください。
コントラストの高いボーダー、フォント、複数の色がたくさんある雑然としたインターフェースがあります。その上で、あなたは地図を持っています（それ自体は本質的に複雑です）。したがって、これはユーザーの認知負荷と注意散漫のロットです。
- これは、コンソールの周りに非常に多くのノイズがあるため、ユーザーがゲージをインタラクティブであると考えるのをさらに困難にします。
何をすべきか？
ここでの解決策は /の両方が必要だと思います：
インターフェースを落ち着かせる。重要でない要素のコントラストを下げ、カラーパレットを減らし、画面上のフォントとフォントサイズを減らすことで、複雑さを軽減します。これは、ユーザーがインタラクティブなコントロールをよりよく認識するのに役立ちます（また、全体的にストレスの少ないエクスペリエンスを実現します）。
ゲージがボタンであることを伝えるために追加のアフォーダンスを提供します。複数の関数でオーバーロードしているため、ここで overcompensate を実行する必要があります。ドロップシャドウまたはベベルを追加すると、その効果があります。
例えば...
