ユーザーがアバター画像を操作できることを完全に明確にする方法は？

Question

私はAndroidタブレットサイズのデバイス用のアプリケーションを開発しています。このアプリケーションの目的は、インフォグラフィック履歴書を作成することです。したがって、適切な結果を得るには、ユーザーはフォームのようなビューを処理する必要があります。

ユーザーがアバター画像を選択する必要があるセクションがあり、これは後でインフォグラフィック画像に表示されます。しかし、あなた自身を見てみましょう：

ご覧のとおり、アバター画像自体が円形の画像ビューに配置されています。ユーザーが画像を操作できることを強調するために、画像の前にアイコンを描画しています。丸みを帯びた形状のため、アイコンの最適な位置を見つけるのは困難です。さらに、ページにはすでに「Floating-Action」ボタンが2つ表示されているので、もう1つ追加することは避けたいと思います。私の意見では、イメージコンテナーも全体的にクリーンで一貫したルックアンドフィールを実現するために円形である必要があります。

私の質問は次のとおりです：このデザインで十分であり、ユーザーが円形の画像ビューをクリックして新しいアバター画像を選択できることは明らかです？追加ボタンを追加する必要がありますか？

あるいは、一般的に、以下の例のデザインが私のデザインよりも優れていると感じているのはなぜですか？

Cody Brantley · Accepted Answer

現在のデザインはいくつかの領域で不足している可能性があります。一般的に、アイコンを単独で使用すると、写真のアイコンや鉛筆のアイコンと同じくらいグローバルに認識できる場合でも、ユーザーの解釈と個人的な経験に大きく影響します。

NN Group on Icon Usability ;からの抜粋です。

アイコンにはテキストラベルが必要

ほとんどすべてのアイコンが直面するあいまいさを克服するには、特定のコンテキストでの意味を明確にするために、アイコンの横にテキストラベルを表示する必要があります。（そして、標準のアイコンを使用している場合でも、特に美的設定や制約に合わせてアイコンをわずかに変更した場合は、ラベルを含める方が安全です。）...アイコンラベルは常に表示され、ユーザーからの相互作用。ナビゲーションアイコンの場合、ラベルは特に重要です。ホバーに依存してテキストラベルを表示しないでください。インタラクションコストが増加するだけでなく、タッチデバイスでもうまく翻訳できません。

鉛筆アイコンを使用する他のアプリケーションの例から、ここでそれについての私の懸念があります。これは、画像ではなく編集テキストを表すのに理想的なアイコンである可能性があります。アイコンを一般的な意味に分解して使用する場合、鉛筆は書き込みまたは描画用の道具ですが、主にテキストに関連付けられているため、テキストフィールドや領域、しかしそれが画像に関係するとき、それは見当違いであり、一般的には画像を書いたり描画したりしない（この場合）ので、経験の浅いユーザーは混乱してしまうかもしれません。

この場合、ユーザー入力を表す理想的なアイコンは何でしょうか？

カメラアイコンが最善の策かもしれません。理由はいくつかあります。

予想される入力と一致します。—ユーザーが入力している情報を考慮してください。これは、カメラで撮影された可能性が高い自分の写真です。実際のもの、またはスマートフォンからのもの。
これは、新しい入力ユースケースに準拠しています—また、アプリケーションのユーザーが進歩する場所を考慮してください。始めたばかりで、フォームに初めて入力する場合、鉛筆のアイコンが示すように何も「編集」することはありません。
これは入力ソースに添付されます—これはモバイルアプリケーションであるため、最後に1つの考慮事項は、ユーザーが新しい写真を正しく撮ることを選択できるようにすることです。そこでデバイスのカメラを使用すると、アイコンがデバイスのカメラアプリケーションに移動するアクションを表すので、アイコンに意味が追加されます。または、写真を追加すると、カメラロールに移動します。

アプリケーションの使用例

FacebookとTwitterもプロフィール写真の入力でこの方法を使用しているようですが、確かに、またはなぜ彼らが何をしたのかについてコメントすることはできませんが、それでも存在し、私が何をしているのかの素晴らしい例です行きます。

ここに変更が加えられたデザインがあります

フローティングボタンと同じ色の半透明の背景が含まれていることにお気づきかもしれません。これは、テキストとアイコンをより目立たせるだけでなく、ゲシュタルトのフォーム知覚の原理における類似性の法則に従って要素を色分けすることにより、他のボタンに関連付けられます。同じ形ではありませんが、色が似ているため、同様の機能があります。つまり、クリック可能、またはこの場合はタップ可能で、テキストとは別に視覚的な意味を与えます。