悪魔は細部に宿る：インタラクティブなウェブボタンのサイズ

製品がコア要件を満たしたら、詳細の作業をゆっくりと開始できます。

製品のほぼすべてのレベルで、表面上見えるものも見えないものも含め、議論すべき詳細事項があります。表面上に見える細部はシンプルです。時間をかけてやってみて、試してみて、間違いを犯して、それを修正するだけです。製品の位置付けやユーザーエクスペリエンスなどの目に見えない詳細は、長期にわたる経験、研究、ユーザーからのフィードバックの蓄積に依存することが多く、どのように作成し修正すればよいかを明確に理解することは困難です。

著者はグラフィックデザインの経験があり、「人に持たせて細部まで見てもらうものなら、各パーツの細部まで丁寧に追求しなければならない」という深い理解を持っています。ポスターやチラシは一度印刷されると、何百、何千部も簡単にコピーされ、何千、何万人もの人に見られる可能性があります。このことを念頭に置いて、画像の細部まで注意する必要があります。そのため、デザイナーは、画面上の原稿を何の理由もなくじっと見つめ、各タイトルや画面上の各単語のフォントや色、サイズや間隔、文字間隔や行間隔などをゆっくりと微調整しながら、午後中ずっと過ごすことがよくあります。

筆者もいくつかのアニメーション制作に参加したことがあり、「ものを動かすには、アニメーションの 10 の法則、物体が地面に落ちたときの変形 (異なる材質の物体や異なるアニメーション スタイルも変形の度合いに影響します)、アニメーション キャラクターが演技するときの準備動作など、さらに細かい点を考慮する必要がある」ということを深く実感しました。これらを行わなくても全体的なパフォーマンスには影響しませんが、それがないと視聴者は何かが欠けていると感じます。

そしてユーザーインターフェースの制作に参加しました。 「ユーザーとインタラクションできるものであれば、考慮すべき細部も増える」ということを改めて痛感しました。なぜなら、ユーザーがどの時点で予想を超える行動を取るかを予測することはできないからです。

細部を追求するのは非常に時間のかかる仕事ですが、細部を追求する姿勢が必要です

ボタン操作の詳細

Web ページ上で最も一般的なインタラクティブ要素であるボタンを例に挙げてみましょう。Web ページ上のボタンには通常、通常、ホバー、アクティブ (押下) の 3 つのインタラクティブ効果が含まれます。通常、Web デザイナーは、この効果を実現するために、3 つの画像を互いに置き換えて使用します (3 つの独立した画像を使用する場合でも、CSS スプライトを使用する場合でも)。

Flash SWF がインターネットで人気を博した時代がありました。その視覚的な作成インターフェースは多くのクリエイターの拒否感を軽減し、多くの Web デザイナーにとって必須のソフトウェアの 1 つになりました。 Flash のデフォルトのボタン コンポーネントも、上、オーバー、下 (4 番目のヒットは感知領域) という同じインタラクティブ効果を提供します。 Flash のアニメーション特性により、ユーザーは各状態にアニメーション コンポーネントを追加して、ボタンとのインタラクションに動的な効果を追加できます。

さて、これで、次のような状況で、ボタンに動的な効果を追加できます。Over に黒いブロックのアニメーション クリップを配置します。ユーザーがボタンの上にマウスを移動すると、次のアニメーション効果がトリガーされます。

インタラクティブな体験ははるかに生き生きしていますが、何かが欠けています。Over ブロックは「マウスがブロックの上に移動したとき」を検出してアニメーション効果をトリガーしますが、「マウスがブロックを離れたとき」に対応するフレームがないため、アニメーション効果全体が突然中断されます。 悪魔は細部に潜んでいます。完全な体験を得たいなら、この見落とされがちな部分を考慮する必要があります。つまり、カーソルがボタンの上部に移動するアニメーション効果だけでなく、カーソルがボタンから離れる効果も、デザインで考慮すべき詳細の 1 つです。理想的な状態を下の図に示します。

この効果を実現したい場合は、目的を達成するためのプログラミング（Flash や CSS/JavaScript など）を使用する必要があります。プログラミング言語で制御すると、確かに効果的に目的の効果を達成でき、デザイナーはより創造的な想像力を発揮できます。しかし、画像をうまく活用できず、創造的な柔軟性が低下するという問題もあります。また、ブラウザとプラットフォームのサポートという別の問題もあります。

詳細情報

「何かがユーザーと対話できる場合、詳細は倍増します。」 同じ例で、アニメーション効果を遅くすると、別の問題が見つかります。「アニメーションの途中のときに、ユーザーがマウスを別の場所に移動するとどうなるでしょうか？」 下のボタン コンポーネントを例にとると、アニメーションは突然中断されます (フレームが次のフレームにジャンプするように強制されるため)。

相対的に言えば、これはより安全なアプローチです。なぜなら、ユーザーの「カーソルが感知領域を離れるとアニメーションのパフォーマンスが強制的に中断される」場合、アニメーションのスケジュール設定に問題は発生しないからです。カーソルが離れてもアニメーションがまだゆっくりと実行され、ユーザーがカーソルの進入、離脱、進入、離脱のアクションをすばやく繰り返した場合、それは別の災害になるでしょうか? この問題を考慮すると、プログラム制御を使用する場合は、この部分の詳細を慎重に考慮する必要があります。

シンプルなアニメーションを備えた小さなボタンには、ユーザーとのやり取りが含まれるため、非常に多くの「詳細」が含まれます。細部まで追求するのは時間がかかりますが、ほとんどの場合は「この部分は製品機能に影響しない」「製品の核心ではない」などと判断されて、急いでスルーされてしまうでしょう。しかし、有名なデザイナー、チャールズ・イームズが言ったように、「ディテール自体はディテールではなく、製品の本質です。」 洗練され、慎重に調整された彼らの椅子のスタイルは、今日でも素晴らしいデザインです。

元のタイトル: 悪魔は細部に宿る: ウェブページ上のインタラクティブボタンのサイズ

キーワード: 悪魔、詳細、ウェブページ、インタラクティブ、ボタン、サイズ、1、製品、完成、コア、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化