体験をデザインする: ボタンには何があるか

体験をデザインする: ボタンには何があるか
<br />最近、UCDChina は「インターフェース上のテキストに注意を払う」というテーマで一連の記事を書きました。これは、インターフェース上のテキストの使用において私にとって大きな助けとなりました。その後、ボタン上のコンテンツのパフォーマンスについても要約と分析を行い、それを皆さんと共有して、皆さんの修正を期待しました。
1. ボタンとリンクを区別しないでください。 (ここに挙げた点は、他の人の意見を攻撃するものではなく、あくまでも参考までに述べたものです。)
多くの人がリンクとボタンを区別することを主張しています。ここで、Civic は「マウス クリック オブジェクトについて: どれをボタンにし、どれをリンクにするか」という記事を公開しています。Chouyu の「Web ページ ボタンの機能とパフォーマンス」では、ボタンを実際のボタンと疑似ボタンの 2 つのカテゴリに分類しています。
実際には、ボタンでもリンクでも、ユーザーの目標ガイドに従ってタスクを完了できます。リンクをボタンにして、ユーザーの目標を強調することもできます。さらに、ボタンやリンクの機能を定義できるとは限りません。ボタンが「機能イベント」を引き起こすように設計されている場合、新しいページを開くリンクも機能イベントでしょうか?したがって、ユーザーが完了すべき現在のページの重要な機能を強調するために、それが単なるリンクであっても、視覚的かつ意味的にボタンを通じて実現することができます。もちろん、 1 ページにボタンを多用することはお勧めしません
たとえば、Taobao の商品ページでは、ユーザーが現在の商品の出所や店主に関するその他の関連情報を簡単に見つけられるように、以前のリンクをボタンに変更しました。
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
2. クリックすると何が起こるか
現在、さまざまなウェブサイト上のボタンのテキスト内容には主観的な考えは一切なく、テキストについてあまり考慮せずに思いついた内容がそのまま記載されています。
前述のように、リンクはボタンとして使用できますが、記事のタイトルなど、長いテキスト文字列がリンクになる場合もあります。ボタン上のテキストは、意味がすぐに理解できるように簡潔でわかりやすいものにする必要があります。
比較のためにいくつかの例を見てみましょう。
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
A: これは NOD32 ウイルス対策ソフトウェアがウイルスに遭遇したときに表示されるウィンドウです。ユーザーはウイルスに遭遇すると、少し怖くなり、用心深くなります。ウイルスを早く排除したいのですが、システム自体が脅かされるかどうかはわかりません。このウィンドウがポップアップすると、「停止」ボタンに関して 2 つの疑問が生じます。このボタンをクリックすると、ソフトウェアのブロックは停止しますか?それともウイルスの脅威を阻止しますか?
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
B:この2つのボタンの文字をよく見てください。「日記を書く」はQQスペースから取ったものです。述語と目的語があります。もちろん、主語はユーザーの「私」であり、組み合わせは「私は日記を書く」です。「買う」はTaobaoの商品ページから取ったものですが、述語(アクション)は1つしかなく、完成できる組み合わせは「私は商品を買う」です。しかし、彼らは皆、それぞれの持ち場で職務をきちんと果たしました。なぜ?後で要約します。
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
C: 「クリックして入力」は完全に冗長であり、ユーザーがボタンに費やす時間を増やすだけです。
したがって、通常は、ボタンは、ページ上の他のインタラクションや情報の構成と組み合わせて、「クリックすると何が起こるか」という完全な文に適切に組み合わせることができ、3 つの単語「クリック」はユーザーとマウスの間のものであり、Web ページに表示される必要はありません。したがって、例 C のボタンの「クリックして入力」は冗長です。何がちょうどいいのかというと、述語動詞だけのタオバオでの「購入」がなぜちょうどいいのかというと、これはページのインタラクションと関係があります。私の分析では、ユーザーとページがタスクを完了すると、一連のインタラクティブ イベントが発生し、このオブジェクトはこの一連のイベントに付随します。ここに別のオブジェクトが追加されると、シリーズの先頭に戻るという曖昧さが生じます。逆に、ページに複数の一連のインタラクティブ イベントが含まれている場合は、ユーザーがクリックしたときにどのイベントが発生するかを明確にするために、ボタンにオブジェクトを追加する必要があります
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
一連の出来事
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
1ページあたり複数のイベント
3. 形を使って意味を表現する<br />中国の甲骨文字は形を使って意味を表現しており、その後、多数の文字について合意に達した後、人々は文字の実際の起源にあまり注意を払わなくなりました。ボタンについても同様です
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
合意ボタン
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
合意のないボタンは機能しません。
4. 他のボタンも見てみましょう
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載
デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載デザイン経験:ボタン上のコンテンツ_123WORDPRESS.COMjb51.net転載

<<:  テーブルタグ(TAGS)の詳細な紹介

>>:  MySQL ビューの原則分析

推薦する

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

js 加算、減算、乗算、除算の正確な計算方法のサンプルコード

序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

JavaScriptアップロードファイル制限パラメータケースの詳細な説明

プロジェクトシナリオ: 1. アップロードファイルの制限関数: 1. フロントエンド操作による異常な...

Windows Server のインストール後にワイヤレスとオーディオが機能しない問題を解決する

1. ワイヤレスPowerShell を実行し、次のコマンドを入力します。 install-wind...

内部 IP アクセスのみを許可する Nginx プロキシ設定を追加する方法

位置 / { インデックス index.jsp; proxy_next_upstream http...

this.parentNode.parentNode (親ノードの親ノード) はどういう意味ですか?

親ノードの親ノード、例えば、このような段落がありますHTML:コードをコピーコードは次のとおりです。...

Nodejs 配列キューと forEach アプリケーションの詳細な説明

この記事では、Nodejs 開発プロセスで遭遇する配列の特性によって発生する問題と解決策、および配列...

ReactはExcelファイルのインポートとエクスポートを実装します

目次プレゼンテーション層ビジネスレイヤーコアプラグイン xlsx ExcelインポートExcelエク...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...