タッチ/モバイルWebおよびネイティブアプリでのUIボタンのラベル付け
懸念事項は、タッチアプリケーション（ネイティブとWeb SPAの両方）での私自身のエンドユーザーエクスペリエンスに基づいています。スリムでクリーンなUIでも同じ問題が発生する可能性があります。学習曲線はデスクトップより緩やかです。ホバーするマウスがないので、それは常に試行錯誤です。
希望的な考えにもかかわらず、グラフィックUI要素は期待に応えません-いいえアイコンがどれほど優れているかは関係ありませんが、それだけでは十分ではありません。正直に言うと、派手なフォントフェイスの、レイジーボトムのフラットアイコンは、物事を説明するのがあまり得意ではありません。
この問題は主に、ラベル用の余分なスペースがない小さなタッチスクリーンに影響します。しかし、大画面であっても、すべてにi18zedラベルを説明する余裕はありません。
タッチスクリーンUIのUXを改善する2つの可能性を検討しています。
長押し（すべて）/強制タッチ（iOS）
これは、UI要素を明確にするためにユーザーとして最初に試みていることです。これは、望ましくないアクションを実行しない可能性のある立派な携帯所有者が利用できる唯一のことだからです。
実際には、この振る舞いはveryは（少なくとも3Dタッチを実行しないデバイスでは）十分にサポートされておらず、カウンターと見なすことができます。 -直感的。
ヘルプモードスイッチ
大きな赤い「wth ?!」で「ヘルプ」モードがトリガーされたときボタンを押すと、特に大きなアプリでは、エントリの障壁が大幅に低くなります（私の経験では、ウェルカムツアーよりもはるかに優れています）。
主な問題は、バーに余分なスペースがないことです。ボタンをオーバーフローメニュー（Android）に移動すると、アクセシビリティが損なわれ、「ヘルプ」モードスイッチを設定に移動すると、実質的に役に立たなくなります。
別の問題はレイアウトです。モード用に別のものを維持することは、困難な場合があります。
説明が、ベルを鳴らすのに十分具体的であることを願っています。
UX/UIガイドラインはこの問題をどのようにカバーしていますか？
言及された概念の高い評価を受けているWebまたはアプリの実装はありますか？他の解決策はありますか？
3D Touchは、登場以来、このコンテキストでUXの傾向とユーザーの習慣に影響を与えましたか？
いくつかの例題も役立つかもしれません（技術的な側面では、これを一般的なWeb UIでどのように処理できるかに特に興味があります-Ionic＆Material実装、Bootstrapプラグイン）。
AndroidおよびiOSデバイスをターゲットにしていると仮定すると、ユーザーがすでに知っていて、Android/iOSエコシステムで人気のあるアイコンを使用するようにしてください。Webの場合は、Material Design LiteまたはPolymer同じことをします。
Android here のマテリアルデザインに続くアイコンのリストを表示できます。
上記のアイコンで正確に表されていないアイコンがある場合は、自分で作成してみてください。システムアイコンを作成するときは、必ず ガイドライン に従ってください。これは、OS全体の一貫性を維持するためです。
ユーザーがデザインの説明を必要とする場合、それは主に悪いデザインです。
他のほとんどのアプリが持っているシステムアイコンの近くにアイコンを接地しておくことができる限り、問題はありません。
それとは別に、プライマリアクションのみがToolbar自体に到達する必要があります。それを2-3個のアイコンに制限します。これらには、破壊的なアクションは含まれていません。まず、ユーザーがアイコンの機能を理解するのが難しい場合、モックアップに示されているように爆弾をクリックすると、ユーザーにとって望ましくない否定的なアクションが発生します。
二次的なアクションと破壊的なアクションはOverflowメニューに移動する必要があります。
あなたの投稿は、ヘルプボタンがウェルカムチュートリアルよりもはるかに優れていると感じていると示唆していますが、違います。
優れたオンボーディングエクスペリエンスを作成し、ユーザーがアプリに関する重要なことを理解できるようにするため、ユーザー向けのウェルカムチュートリアルを初めて紹介することをお勧めします。上記の例では、新しいアイコンが導入されています：結び目のある指。理解しやすいですか？いいえ。ただし、チュートリアルでは、それをリマインダーとして参照し、アイコンの意味に関するヒントをユーザーに提供することで、このチュートリアルを簡単にしています。
ただし、アイコンが複雑すぎると感じた場合は、オーバーフローメニューに[ヘルプ]セクションを配置して、画像とテキストのキーと値のペアを持つ別のアクティビティ/ページにアイコンのリストビューを表示できます。
個人的には、それらが主要なアクションではないときに多くのアイコンを詰め込むことにより、UIが複雑になりすぎていると感じています。一般に、モバイルでは、アイコンを表示するためのテキストの必要性はほとんどなくなり、理由もなくUIの魅力が低下するだけです。
モックアップのアイコンに関する限り、アクションを示すためにより良いものを見つけることができると思います。私はビッグバン理論のリファレンスが好きですが、アイコンが何を意味するのかまだわかりません。したがって、OSのガイドラインに従って、かなりシンプルで一貫性を保つようにしてください。
アイコンの使いやすさについては、Aurora Bedfordの非常に優れた読み物があります。 https://www.nngroup.com/articles/icon-usability/
「アイコンにはテキストラベルが必要」と主張するセクションがあります。
ほとんどすべてのアイコンが直面するあいまいさを克服するには、特定のコンテキストでの意味を明確にするために、アイコンの横にテキストラベルを表示する必要があります。 （また、標準のアイコンを使用している場合でも、特にアイコンをわずかに変更して美的な好みや制約に合わせる場合は、ラベルを含める方が安全です。）
一部のシステムアイコンや普遍的に使用されるアイコンは、ハンバーガーメニューアイコンなど、テキストラベルなしで自分自身を表現できることは事実ですが、そのようなアイコンはまれです-特に混乱を避けるために、特に最初にそれらにテキストラベルを付けることは合理的です時間ユーザー。
そして、私は本当にテキストラベルを常にオンにすべきだと思います-申し訳ありませんが、提案されたアプローチの両方がうまく機能しない可能性があります：ユーザーはアイコン/ボタンを長押しできることを知らないかもしれませんし、当然2つのモードがあることも知らないでしょう。
最後に、テキストラベルに対応することはそれほど難しくありません。 Facebookや他のアプリは、比較的小さな領域でも、アイコン付きのテキストラベルを表示しても問題ないことを示しています。
私はリードuxテスターにあなたの質問をしました、そして彼女は次のように答えました：
それは非常に良いアイデアです-また、証明されたが役立つことがわかっています-ユーザーをオンにするテキストコントロールまたは機能タイトル希望のアイコンと一緒に表示されます。 'スイッチはすべてのページで一貫して同じ場所で使用できますが、設定に入れれば問題なく動作します。
実行Dタッチ/長押しを使用しないボタンまたはその他のコントロールにローカルツールヒントを表示します。これらは他のアプリまたはアプリで実際の機能をトリガーする可能性があり、これは自然/一貫性を感じませんユーザー。
ユーザーインターフェイス関数をフィット部分（ "pages"）とdoすべてのページにウェルカムツアーを提供します。
状況に応じたヘルプを提供しない場合に、あなたができる最悪のこと。
私は、特定のオペレーティングシステムの発行元の適切なガイドラインに常に従うべきであると彼女の回答に付け加えます。
1つの解決策は、すべてのアクションに元に戻すボタンを追加することです。そうすれば、ユーザーはボタンを押すだけで十分に理解できなくなり、快適な実験ができるようになります。ユーザーが何かをタップすると、アプリはそのアクションの効果を示し、ユーザーにツールチップよりも理解を深めます。その時点で、ボタンが希望どおりに機能した場合、何が起こるかわかっているかのように、ビートをスキップせずに続行できます。予期しないことが起こった場合は、[元に戻す]ボタンをタップして、すべてを通常の状態に戻します。
このような[元に戻す]ボタンは、さまざまな形をとることができます。アクションが何かを作成した場合は削除ボタン、アクションがそれらをどこかに持ってきた場合は戻るボタンを使用できます。ボタンが戻るボタンの場合、元に戻すボタンは進むボタンになります。ボタンが削除ボタンだった場合、削除すると元に戻すのが難しいため、これは問題になります。この場合、何かを削除する前にダイアログを表示する必要があります。
フォースタッチや他のそのようなソリューションの問題は、タッチする1つのアクションが多くの類似したアクションに変わることです。これは、誤って指を長すぎたり、硬すぎたりして誤ったアクションを実行する可能性があるため、実行が困難になる可能性があります。
ツールチップベースのソリューションの問題は、ツールチップが提供する情報が少なすぎるか、ユーザーが探していた情報が提供されないことが多いことです。アクションが不可逆的である可能性がある場合、ユーザーは、アクションを完全に理解することを確認する必要があります。
アクションのラベルを表示するためにさらにスペースが必要な場合は、一度に表示されるアクションを少なくして、それぞれに十分なスペースを与えるのが最善だと思います。
これは、2つの点で非常に賢いことを意味します
ユーザーがアクションを表示するために使用する可能性が最も高いアクションを知る（これはユーザーによって異なる場合があり、ユーザーがアプリの使用方法に関する好みを表示するにつれて、時間の経過とともに変化する場合もあります）。
追加のアクションが存在し、その知識を提供するのに多くのスペースを取ることなく、また必要に応じてユーザーがそれらにアクセスするのを難しくしすぎることなく使用できることをユーザーに知らせます。これがハンバーガーアイコンの機能です。 Googleのマテリアルデザインがこれに取り組んだもう1つの方法は、一連のアクションをフローティングアクションボタンにまとめることです。そのため、そのボタンがタッチ（またはホバー）されると、追加のアクションがロールアウトされます。
私が言いたいもう1つのことは、あなたの懸念は誰かが初めてアプリを使用するときに関係があるということですが、彼らが数回それを使用した後、私は彼らがアクションに慣れ、テキストの助けを必要としないと思います-それからほとんどのユースケースでは、テキストヘルプは不要なものです。そのため、チュートリアルスタイルのヘルプは素晴らしいアイデアだと思います。ユーザーに新しいコントロールが提示されると、何かがポップアップしてその機能を説明し、その後再び表示されることも邪魔されることもありません。
Mobile-os標準に固執するようにしてください。 Androidでは、ActionBar/Toolbarアイコンを長押しすると、デフォルトのActionBar/Toolbarを使用するすべてのアプリで小さなポップアップとしてラベルが表示されます。 iOSには対応していませんが、iOSのほとんどのアプリでは、アイコンの下に永続的に表示されるラベルを使用しています。デバイスを操作しているユーザーに自然に感じさせたい場合は、異なるOSに適合するレイアウトを作成しないでください。
help-mode switchを使用するのがよいと思います。多くのユーザーは迷子になったときにそれを使用し、より優れたユーザーはアイコンが最も長いのでアイコンを理解するためです。
人々がいつもそれらをスキップすることが証明されているので、最初の画面のチュートリアルに依存しないでください。追加したアニメーションがいくつあっても機能しない
フォースタッチは良いアイデアですが、残念ながらフォースタッチの使い方を知っているのはほんの数人です。私は小さな研究をしました、そして、私は多くの人々がそれを決して使わないか、彼らが彼らがそれを持っていることさえ知らないことを発見しました。
それは私の謙虚な意見です
申し訳ありませんが、アイコンはここの主要なコンテンツではありません。アイコンはいいです。ラベルは良いです。適切なラベルは重要です。
非常に多くのボタンやコントロールがあり、付随するテキストを含めるのが難しい場合は、ラベルを含めるのではなく、レイアウトの構造に問題があります。
下がってください。ラベルは交渉できないとしましょう-それがユーザーに明確かつ簡潔に通信する唯一の方法だからです。長押しは無関係になり、iconsをオン/オフにするトグルボタンを持つことは意味がありません。
したがって、唯一のオプションは、一度に表示されるコンテンツを削減または再構築することです。
Susan Weinschenkがすべてのデザイナーが人々について知る必要がある100の事柄で述べているように、
クリック数と思考数のトレードオフを行う必要がある場合は、クリック数を増やし、思考数を減らす