1. kkeethのエンジニア雑談チャンネル
  2. No.148 朝活「Applying the 8 ..
2022-12-02 27:32

No.148 朝活「Applying the 8 Golden Rules of User-Interface Design」をダラダラ読む回

はい.第148回は


Applying the 8 Golden Rules of User-Interface Design
https://www.uxmatters.com/mt/archives/2022/10/applying-the-8-golden-rules-of-user-interface-design.php


を読みました💁

8 golden rules をちゃんと触れたことがなかったので本記事でしたのですが,とても素晴らしいルールだなと唸りました.作られたのは1985年(俺生まれてない!)ですが,現代でも通用するなと感じました.是非皆さんも読んでみてください!


ではでは(=゚ω゚)ノ


  • 8 Golden Rules
  • User-Interface Design
  • Strive for Consistency
  • style guide
  • pattern library
  • component library
  • Seek Universal Usability
  • Offer Informative Feedback
  • Design Dialogue to Yield Closure
  • Prevent Errors
  • Permit Easy Reversal of Actions
  • Keep the User in Control
  • Reduce Short-term Memory Load
  • User Interface Design
  • Principles

See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.

00:04
はい、11月28日、月曜日ですね。
時刻は朝9時を回りました。
今日はまた曇り始めていて、天気が悪くなる気がしますね。
はい、おはようございます。ひめみんのkeethことくわはらです。
じゃあ、本日も朝活を始めていきたいなと思います。
今日はですね、昨日読んでいた記事ではないんですけど、
すいません、また全然違う記事なんですけど、
気になったやつが見つかってしまったので、
今日はそっちを読んでいこうかなと思っています。
Applying the 8 Golden Rules of User-Interface Designということで、
ユーザーインターフェースの設計に8つの黄金率みたいなところですね、
ゴールデンルールっていうのを使ったので、
これは今日ちょっと読んでみたくなりました。
大きく8つあって、
日常業務にこれらの原則を適用するには役立つ実用的な例っていうんですね。
具体的な例が出てくるので、すごくありがたいなと思ってますけども。
ざっくり先に言っておくと、8つっていうのは、
1つ、一貫性を保つこと。
1つ、普遍的な使いやすさを求める。
1つ、有益なフィードバックを提供する。
1つ、タスクの完了時に報酬を与える。
1つ、エラーを防ぐ。
1つ、アクションの簡単な取り消しを可能にする。
1つ、ユーザーがコントロールできるようにする。
ラスト、短期的記憶の負荷を減らすというところですね。
この8つについても具体的に語られているということでしたので、
ちょっとそれを読んでいこうかなと思っております。
じゃあ、早速今日から入っていきたいなと思います。
Kさんですね。おはようございます。ご参加いただきありがとうございます。
今日もタイトルある記事を読んでいこうかなと思っております。
ユーザーインターフェース、UIですね。
デザインだったりとかウェブデザインというのは、
創造性や革新的なアイディアを求めることだけに
頼っている仕事だと思われる方もいらっしゃるかもしれません。
しかし、デザインプロセス全体を最適化するいくつかのルール。
例えば、ベン・シュナイダーマンによる
ユーザーインターフェースデザインの8つの黄金率に基づいて
デザインソリューションは常に構築されるべきなんですよ
というふうにおっしゃっています。
シュナイダーマンは、人間とコンピューターのインタラクションの分野で
基礎研究を行った後、8つの黄金率の背後にある概念というのを開拓しました。
シュナイダーマンが8つの黄金率を定義したのは、
1985年のことですが、結構最近ですね。
その時代性は、世界中のアプリケーションデザイナーやウェブデザイナーに
今も使われ続けているということを保証します。
この記事では、シュナイダーマンの8つの黄金率について説明して
そのUXデザイナーとして、日々の仕事にこれらの普遍的な原則を適用するための
実践的なヒントや例点を補足していきますということでした。
というわけで、1個1個いきたいと思います。
まず1つ目ですね。
1つ目がStrive for Consistencyですね。
一貫性の確保というところでした。
一貫性とは、アプリケーションユーザーのワークフロー全体を通じて
同じデザインパターンと同じような状況での一連の動作というのを
03:02
使用することであり、色取ったり、タイプグラフィーだったり、
用語の適切な使用というのも含まれます。
シュナイダーマンの最初の原則というのは、まさにこれです。
一貫性の確保です。
アプリケーションユーザーのワークフローを通じて
同じデザインパターンと同じような状況でほげほげと。
さらにアプリケーションというのは、
孤立して存在するものでないことを忘れてはいけません。
ユーザーが知っているのはそのアプリケーションだけではありません。
ユーザーはその他の多くのアプリケーションから
アイデアや期待というのを引き出して、
それに応じてメンタルモデルというのを構築します。
ユーザーがより簡単にアプリケーションを操作し、
より早く目的を達成できるようにするためには、
やはり一貫性があり、予測可能性なユーザーインターフェースを
作成することが重要になります。
同じ方法で動作し、同じように見え、
同じ語彙を使用するユーザーインターフェースの使用というのは、
使用するユーザーインターフェースの要素というのは
どこでも予測可能であり、
良い情報というのをもたらしますよということでした。
ここまではそりゃそうだよねって感じはしますね。
ページとかコンテンツによって
UIだったりというのが全然バラバラだったりすると、
正直見づらかったり探しづらかったり、
認知負荷が上がりますからね。
そんなユーザーに負荷をもたらすようなアプリというのは
大体敬遠されると思うので。
では続いて、
このデザインルールをどのように適用すればよいでしょうかという問いですね。
How can you apply this design rule? というセクションですね。
はい、いきます。
ユーザーインターフェースのデザインを一貫させる最善の方法というのは、
ブラインドのグラフィックユーザーインターフェースと
デザインのガイドラインを全て収集し、
一貫して使用できるようにするデザインシステムを作成することになります。
デザインシステムには次のようなものが必要です。
主に3つあります。
1つ目はスタイルガイドですね。
色とかフォントとかロゴの使い方だったりとか、
組織がユーザーとコミュニケーションを取る方法に関する知識の源になります。
まずはスタイルガイドが1つです。
2つ目はパターンライブラリーですね。
ユーザーインターフェースの要素の具体例と
動作、コンタクトフォームなどを記録しておいて、
アプリケーションの使用方法を説明したものがパターンライブラリーだそうです。
3つ目がコンポーネントライブラリーです。
アプリケーションの各要素をコーディングする際に
開発者が使用するコードで実装されたコンポーネントと
テンプレートのライブラリーです。
これはストーリーブック的なやつかな。
デザインシステムはこれらの情報全てを
ユーザーが理解し使用できるように整理したものです。
さらにデザインを作成する際に
使用できる明確なガイドラインを提供することで
一貫性という黄金率を維持することができます。
一応下に一枚バッと画像が貼られているんですけど、
この図1っていうのはあるブランドのデザインシステムにおける
スタイルガイドの一例になります。
これはデザイナーが特定の企業のユーザーインターフェースを
作成する際に使用する色とかボタンとかロゴ、アイコンなどの
構成要素のパレットを書いたものです。
これはよくあるスタイルガイドですね。
06:02
いろんなデザイナーさんがよく使われているもの。
普通にインターネットでグルっと出てくるようなスタイルガイドですね。
このようなお決まりなものを作りましょうというところです。
これを真っ先に出してくるということは
割と重要なんだなというのはすごくわかりますね。
一貫性というところで。
その一貫性を保つためにもまずはそのガイドラインを
作りましょうというところですね。
スタイルガイドは本当に大事ですよね。
あるなしで、僕もフロントエンドエンジニアとして
仕事をする中で全然変わったのでね。
これあるとありがたいなと本当に思いましたね。
逆にそのスタイルガイドの中で
こっちとこっちの要素で1ピクセル若干ずれたりしてるんですけど
みたいなこともたまにあったりするので。
もちろんそのデザイナーさんも人間ですので
ずれはあると思いますけど。
そういうことをコミュニケーションを取りながら
ちゃんとクオリティを上げていくということも
いいのかなと思ったりしました。
これが1つ目でした。
では2つ目ですね。
2つ目はSeek Universal Usabilityの追求です。
ユーザーインターフェースのデザインというのは
初めて使う人が迷うことなく操作でき
素早く目的を達成できて初めて良いもの
というふうに言えます。
2つ目の普遍的な使いやすさを追求するという原則というのは
アプリケーションを設計する際に
あるターゲットユーザーグループのニーズだけを
考えてはいけないということを意味しています。
新しいユーザーが問題なくアプリケーションを使いこなし
素早く目的を達成することができて
初めてユーザーインターフェースのデザインは
優れていると言えるのです。
何か2回言っているな。
ウェブサイトでは新規ユーザーとリピーターの
両方が利用することを念頭に置いてください。
これらのユーザーというのは年齢も文化も
異なるかもしれません。
このデザインルールをどのように適用すれば
よいでしょうかというところですけど
ユーザーインターフェースにツールチップというのを
追加するのが良い方法だと言っています。
このグラフィックUIコンポーネント
このと言っているのはまた一枚下に画像が
貼られていますけど
この画像はですね
スラックを今回例に出してみます。
スラックの左のサイドバーのところで
たまにツールチップでぺって
説明が出てくると思います。
分かりましたみたいなところが最後ボタンが
ついている感じですね。
よく見るやつですけどこれも。
こんなような感じのグラフィックUIコンポーネント
というのがユーザーがアプリケーションの要素に
表示されて特定のUI要素に関する
説明だったりとか
解説というのを提供しています。
このような状況依存のヘルプ
というのは新しいユーザーが
アプリケーションやサイト内で
自分のやり方を見つけるのを容易にします。
今言った例のように
スラックアプリケーションのツールチップ
というのはこういう情報
というのは初めてスラックを使用する
人に対してこれらのチャンネルが何であるか
とかどのようにそれを使用するか
というのを正確に知らせることができるので
お勧めです。
ツールチップが多すぎたりすると
どうなの?というのもありますし
最近のアプリケーションを初めて
使う人にとってのチュートリアルって
ツールチップを1,2,3,4
くらい順番に表示していって
ここを使って、ここを使ってみたいな感じの
09:01
そういうチュートリアルもあったりするので
いろんなユーザーに対応することがあるなというのは
最近思いますね。
昔のチュートリアルというと
いきなりデカいモデルがボーンと入ってきて
それぞれのアプリケーションの
キャプチャーだったりとか
っていうのを3,4枚くらい
ペッと貼ってやって次に次に
じゃあ始めましょうみたいな感じで
モーダルが閉じるっていう流れもあると思うんですけど
最近はもうアプリケーションないで
そのツールチップを一度バーッと表示する
っていう感じになったりしますね。
そのモーダルよりもそっちの方が認知負荷が低かったりとか
具体的に使ってるような感じが出せるから
っていうのもいろんな理由がありますけどね。
まだそのツールチップは結構おすすめですよ
ということでした。
ユーザビリティを追求していった結果
今ツールチップが一つの
アイディアとしていいですよ
っていうお話ですね。
今後まだそれはどんどん変わっていくと思いますけど
今現代ではそういう感じだそうです。
じゃあ続いて3つ目ですね。
3つ目はその有益なフィードバックを提供する
ということです。
オファーインフォーマーティブフィードバック
そんなことだそうですね。
じゃあ3つ目いきましょう。
優れたデザインのユーザーインターフェースっていうのは
ユーザーが行った操作の結果について
情報を提供するものでなければなりません。
フィードバックというのは
一見些細なあるいは頻度の低いアクションも
考慮に入れなければなりません。
ユーザーはあるアクションを
実行した時に何が起こったのか
確実に理解したいと思うものです。
そりゃそうだよね。
このデザインルールはどのように
適応すればいいでしょうかというところですけど
ユーザーが行うすべてのアクションに対して
システムはユーザーが
理解できる方法で応答する必要があります。
ユーザーが何かを持つ
待つ必要がある場合は
その時間と理由をちゃんと通知しましょう。
ユーザーが何か
間違った操作をした場合というのは
さらっと表示しましょう。
サイトマップが複雑な場合は
PUNKSナビゲーションを置いて
ユーザーがサイト内を移動できるように回しましょう。
またいつものように
下に画像が一枚貼られて
これはどこかの
IKEAのECサイトのところの
PUNKSにフォーカスを置いたような画像が
貼ってまして
PUNKSナビゲーションの良い例です。
次の要素でカテゴリーを絞り込んでいることに注目してください。
商品
ベッドルーム・家具
照明・テーブル・ランプ
商品名
このような感じのPUNKSですけど
IKEAのウェブサイトは非常に精巧にできているため
ユーザーがどこにいるかを正確に伝えることは
確かに価値があります。
さらにPUNKSナビゲーションの各要素というのは
ユーザーが簡単にその場所に
移動できるようなリンクであるべきですよ
という風に言っています。
PUNKSナビゲーションの
よくあるPUNKSナビゲーションなんですけど
PUNKSリストのところだけ
背景がグレーになっていて
視認性も良かったりするし
今現在アクセスしている商品詳細ページの
ところだけ太字になっていて
今ここにアクセスしていますよ
というのが分かるようになっていると
というところですね
PUNKSナビゲーションは
ECサイトとかウェブサイトを作るときに
土定番ではあるんですけど
その定番を忘れずに作りましょう
終わりましたよ、完了したよというところを
12:01
認識させるアプローチは
すごい大事だなと思いました
このデザインルールを
どのように適用すれば良いのでしょうかという話ですけど
このグループに含めることのできる
メッセージはいわゆる
お礼のメッセージだったり検証のメッセージだったり
まとめのメッセージですね
みたいなものがあります。これらのメッセージを
グループ化して表示することで
ユーザーは自分がプロセスの最初、途中
最後にいることを認識することができますよ
良いメッセージというのは
短く、専門用語も使わず
明瞭であるべきですよ
またユーザーのミスを責めたり
否定的な言葉を使ったりしないことも重要です
You entered the wrong address
違ったアドレスを入力してますよ
とかではなくてPlease enter the correct address
というように正確なアドレスを
入力してくださいみたいなメッセージですね
意味合いとしては結局一緒なんですけどね
あなたの入力したアドレスはやっぱ間違っているので
正しい方に入力してねということなんですけど
間違っているという人と否定的な言葉を
使うとやっぱり悪い印象を与えてしまうので
そういうのを使わないで
あなたの正しいメールアドレスを
入力してねというような
促し系のメッセージの方がいいなという話ですね
また一枚下に別途画像が貼られていて
トタンゴというサイトですね
これは僕がどういうサイトか
よく分かっていないんですけど
これはアカウント接続の
画面なんですけど
そのアカウント接続に成功したことと
その登録を完了する方法を
ユーザーに知らせるメッセージの例ですよというところでしたね
メッセージとしては
You successfully connected
to your Google account
グーグルアカウント接続がとりあえず完了したよと
Click below to complete your registration
下のボタンを押せば
君の
アカウント登録が完了しますよという風に
言われてますね
分かりやすいメッセージですね
こんな感じのものをちゃんと表示するのが
大事ですよということですね
以上今のは4つ目でした
では5つ目ですね
5つ目はPrevent Errors
このセクションですね
ちゃんとエラーを
防ぐというところですね
ユーザーにとって
作業が簡単になるようにする
つまりそもそもエラーが発生するリスクを
最小限にするというのがそもそもの
UXに対していい話ですよ
理想的なアプリケーションの
ユーザーインターフェースというのは
ユーザーがミスをしないようにするものです
ユーザーにミスをさせないようにする
というシステムが重要だと
ユーザーをスムーズかつシームレスに
導くことがやっぱり必要ですよね
ユーザーの多様性だったり
時に何千人何百万人もの人が使うような
ウェブアプリケーションの場合
これを実現するのは非常に困難になります
でもやってみるしかないんですよというところですね
日本みたいに閉じられたコミュニティの
ウェブサイトだったり
CAサイトだったりすると
使うユーザーのほとんどは
多分日本人だからそんなに意識しなくてもいいですけど
本当に海外全世界のところまで
展開しているものだと
文化とか
観衆だったり全部バラバラだったり
その国独自の当たり前とかがあったりするので
そんないろんな人たちに対して
エラーをしないように
かつシームレスに使わせるのは
かなり大変だと思いますね
Amazonとか本当に大変だと思いますけど
15:01
そういうのをしっかり追求し続ける必要はやっぱりあると
万年に共通するような素晴らしいもの
というのを多分見つけるのは
ほぼ不可能なんですけど
常に追求し続けるというのが大事ですよ
ということですね
このデザインルールをどのように
適用すればよいんでしょうかというとこですけど
ユーザーが入力したデータを
検証して間違って入力した情報を
メッセージで表示するだけではなくて
ユーザーにとって作業がしやすいようにすることで
そもそもエラーが発生するリスクは
最小化することができますと
例えばユーザーが日付を入力しなければならない場合ですね
2月30日という
存在しない日付を入力させ
エラーメッセージを表示させるようなことはしないようにします
そもそも2月30日で
表示をしなければいいだけなんですからね
代わりに正確なカレンダーの
日付をクリックすることで
ユーザーが日付を選択できるようにしますと
また1枚下に
画像が貼られてるんですけど
下の画像はユーザーが
実際の日付を選択できるようにした
カレンダーの例ですよということですね
例のデートピッカーカレンダー的なやつですね
でやってます
もちろん手入力もできはするんですけど
基本的には
入力ボックスをクリックすると
そのカレンダーが下から出てくる
そのカレンダーから日付をクリックで
入力するというのがいいですよねというお話です
手入力すると結構人は
間違いやすいのでね
またカレンダー系とか
日付の入力ボックスって
スラッシュ区切りなのかハイフン区切りなのかって
地味にめんどくさかったりするので
だいたいデータベースに
登録するときはハイフンだったり
タイムスタンプに変換して登録することもありますけど
というのがあるので
例えばこういうことですねということでした
これはそうですね
皆さんが
その認識を持っていれば別にいいんですけど
意外と相手リテラシー低い
ユーザーさんという場合は
全然僕らが予想しない
というか僕らにとって当たり前すぎるような操作を
することって結構あり得るので
こういうところはやっぱり意識していかなきゃ
やっぱりいけないよねというところはありますね
なのでそのユーザー操作というところの
デモだったりとか
テストをするのであれば
あんまりウェブとか
インターネットに触れていない人に対して
触ってもらうというのがむしろいいかもしれないですね
僕のちょっと鉄板ネタであれなんですけど
だいぶ前にですね
デザイナーさんが
いろんなユーザーインターフェースに対して
分析を行っていて
とあるユーザーさんに
このECサイトの
左上ですね
左上にロゴの画像があるじゃないですか
って言った時に
このロゴ画像をクリックしたら何が起きると思いますか
っていう風に問うてみたんですよ
そのユーザーさんにですね
するとそもそもそれがクリックできることを
知りませんでしたって言ったんですよ
かつクリックしても何が起こるかは
想像ができませんって言われたので
僕らって左上にまずロゴがある
っていうのは知っていて
左上にロゴを押すとだいたいトップページに戻るよね
っていうのを僕らは知ってるんですよ経験値から
でもこのITリリアシーって
意外とユーザー
ウェブに慣れていない人たちだと
当たり前じゃないらしいんですよね
結構僕はこれ衝撃を受けたんですよ
なのでそういうことがあったりするので
18:01
しっかり当たり前を疑うっていうのはすごく大事で
そういうことをしないと
こうやってエラーを防ぐことは
多分難しいんだろうなってすごく感じました
まずちょっと思い出したので言いたくなりました
以上今のが5つ目でしたね
続いて6つ目です
6つ目はですけど
Permit Easy
Reversal of Actions
操作の取り消しを容易にしましょうと
はははははなるほどですね
アプリケーションやウェブサイトを
使うときユーザーは安心して
自分の行動をコントロールできる必要があります
これには現在行っている操作を
キャンセルしたり過去に遡って
操作を取り消したりやり直しをしたり
ということができる機会というのは含まれます
元に戻せないアクションというのは
ユーザーにとって非常にフラストレーションがたまるものであり
時にはアプリケーションや
サイトの利用を止めてしまうことにもなりますと
ただそのECとか
お買い物をしているときに
途中でカートの中身を
変えたりすることができませんとか言われたら
それはフラストレーションがたまりますし
使わないとやっぱりなりますよね
このデザインルールを
どのように適用すればよいでしょうか
ここではユーザーが
自分の行動をコントロールできるようにするために
使用する実績のあるリンクやボタンの
セットを紹介します
合計5個の
例を紹介します
1つ目はバックですね
戻るボタンですね
前のページや画面に戻ります
2つ目はキャンセルですね
タスクだったりとかマルチステッププロセスは
途中で終了させることができます
3つ目はクローズ
ユーザーが現在のビューを
閉じることができます
場合によっては
プロセスを終了させるのと一緒の意味かもしれません
キャンセルじゃなくて
クローズボタンの場合もあるでしょう
4つ目はアンドゥボタンですね
直近の操作を取り消します
直前の操作を止めるという感じですね
アンドゥ
最後リドゥですね
リドゥボタンやり直しボタンですね
該当するアクションをやり直します
やり直しを併用することで
ユーザーは変更点を順次元に戻して
行き過ぎた場合はやり直しをすることができます
アンドゥとかリドゥとか
これが複合すると
サイトとして
状態を正確に保つのは難しい気がするので
この辺は乱立させたりとか
複合させるときは
結構注意が必要なと感じましたけどね
例えば
また具体例を出されていて
pretias.comの
ブログっていうのは
ツールの良い例だそうですね
また下に一枚画像があるんですけど
すべてのブログ記事っていうのは
その訪問者をブログのメインページに導く
バックリンクっていうのを提供しています
ソフトウェア開発のチュートリアルとか
ケーススタリングに興味があれば
その当社のブログを自由にチェックしてみてくださいと
さっき見せた
pretias.comのブログですけど
ちゃんとトップに戻るというか
バックという何たらみたいなリンクが常に
画面に表示されたりするとか
そういう具体的な工夫をしてますよってことでした
よく見る話だし
お決まりではあるんですけど
ちゃんとそのお決まりをやっていきましょうね
というお話ですね
では続いて7個目ですね
21:01
7個目ですけど
ユーザーをコントロールするってやつですね
Keep the user in control
っていうルールだそうです
ユーザーが自分の好きなように
サイトやアプリケーションを利用できるようにして
ユーザーインターフェースを自分のニーズに合わせて
カスタマイズすらできるようにします
ユーザーがウェブサイトやアプリケーションを
自分の意思で使っていることを意識して
コントロールできるようにすることです
ユーザーが自分の好きなように
サイトやアプリケーションで
利用してさらに
カスタマイズできるということが重要ですよと
じゃあこのルールをどのように適用すれば
良いでしょうかというところですが
ユーザーインターフェースの要素が
アプリケーションの使用に絶対必要ではない場合
ユーザーが一時的にそれを無効にしたりとか
完全に削除したりできるようにします
例えばその
ポップアップを消したりとか
削除したりとかいうこともできますよと
インターネットはどこからでも現れますけど
必ずしも私たちに関係のないメッセージが
飽和状態になっていますよね
今はみたいなところですね
でまた一枚
具体的な画像の例が貼られていて
ちょっとどこのサイトかわからないですけど
その右上の方に
ノーティフィケーションのところのメニューがありますね
この図7は
YouTubeですねこれ
YouTubeのアプリケーションが提供する
通知を制御するためのオプションですと
ユーザーは自分が見ているチャンネルに新しいビデオが
登場した時に通知を受け取るかどうか
というのを決めることができます
その場合通知の範囲を指定することもできますよと
あれですねノーティフィケーションですね
そのお気に入りしていたチャンネル登録していた
ユーザーさんが
新しい動画を投稿したよって時に
アラートを出さないとかを
僕らの方で制御できますもんね
これ結構ありがたいんですよね
このユーザーの通知は欲しいけど
そういうようなユーザーに対して
少しでもコントローラブルなものを
伝えるというのはすごく大事だよという話でした
じゃあラストですね8つ目です
8つ目のルールは
Reduce Short Term Memory Load
短期記憶の負荷というのを軽減しましょう
そうです
人は短期記憶で情報処理する能力が
あまり高くはないので
過度に長い一連の動作というのを
要求することはやっぱり避けましょうと
必要な情報以外は記憶させないようにしましょう
その代わり
必要な情報や選択肢を表示するようにしましょうと
選択肢を表示するのはすごく大事なことですね
ユーザーに何をすべきかを
指示することを恐れず
ユーザーの情報を大皿に乗せて提供しましょうと
じゃあこのデザインルールをどのように
適用すればよいでしょうかというので
合計4つのルールが書かれてますね
ユーザーの記憶負荷を
軽減するには次のようなテキストや
ビジュアルで特定のコードを流すのが
一応効果的ですと
1つ目はProvide Implicit Help
暗黙の了解を得ましょうと
例えば
あるフィールドに何を入力すればよいのかというのを
示すプロンプトを表示しましょうと
入力フィールドであれば
プレスホルダーをつけるのも大事ですけど
プロンプトを表示するのも結構大事ですね
多すぎると
うざかったりするのであれですけど
24:01
要法要領は守らないといけないとありますけど
今のが1つ目でした
2つ目はUse Visual Aidsですね
視覚的な補助というのを
使用しましょうと
矢印だったりとかその他の記号を使用して
ユーザーの目を惹きつけてユーザーが
所定のアクションを実行するのを
助けましょうということですね
続いて3つ目は
Fill out form fields for the user
ユーザーのためにそのフォームのフィールドを
埋めましょうと
同じデータを別のフォームに2度入力させないように
しましょうすでにデータがある場合は
ユーザーに代わって該当するフィールドに
自動的に入力しますと
今はAuto Fillというのがあって
ブラウザーがキャッシュとかで記憶をしていたものを
そのままパッと入力することもあるので
ブラウザーに依存してもいいですけども
Auto Fillの属性をつけておくと
その辺やってくれるのでいいかもしれないですね
やりすぎると
違う情報を入力されたりするので
Auto Fillだけに頼るのは
それはそれでよろしくはないと思うので
ただその入力を自動で埋めるような
仕組みを入れておくのは結構大事な話かなと思いました
最後4つ目ですね
Rely on recognition of over
recallですね
記憶よりも
認識を重視しましょうと言っています
ログインするたびにパスワードを
入力させるのはやめましょう
Remember meですね
チェックボックスを設けましょうということですね
また同じような画像がぺったられていて
これはあれですね
ログインするときのステイログインという話ですね
ログイン状態を保存しておきますか
というチェックボックスがありますね
ログインするたびにユーザー名とパスワードを
入力するのはさすがに煩わしいので
クッキーとかどっかに保存しておいて
それを選択すれば良いだけにしておけば
楽ですよねということで
以上8つの
ルールでした
最後結論ですね
さくっと終わらせます
インターフェースデザイン8つの黄金率の活用ですけど
このように
なんたらまんのゴールデンルール
というのは何十年経っても
その価値を失ってはいません
これらを活用することはユーザーインターフェースデザインの
ユーザビリティと品質を向上させ
多くのユーザーエラーを排除するための
良い出発点となります
ただしこれらのルールを一般的かつ
理論的な原則として策定しているため
これらは適切に解釈をして
あなたの仕事の状況に
適応させる必要があります
これも重要ですね
この記事で紹介した実践例がユーザーインターフェースや
ウェブデザインの日々の実践において
この原則を適用する良い
一助となれば幸いですということで
この記事は締められておりました
とても本当に分かりやすくて
かつ当たり前のことを
ちゃんと当たり前にできるというのは
すごく大事なことだったりするんですよね
僕らも別に
それは当たり前だよねって言ってるけど
じゃあ自分できてますかって言うと
うってなることはやっぱりしょっちゅうあるので
こういうことをきっちりやっていきましょうということでした
逆に言うとこの八つのルールってやっぱり
今でもよく見るし
デザイナーさんがこういうのを大事にしてるっていう話の中で
よく聞く話題だったので
本当1985年にこの八つのルールっていうのは
表されているんですけど
今もすごい
生きているなっていうのがすごく感じましたので
この記事はぜひぜひ
27:01
みなさんもまた改めて読んでみてください
あとは一応ツイッターでもシェアしますので
興味ある方は見てみてくださいってことです
ではでは長くなりましたけど
今日の朝活は以上で終了したいなと思います
はい
sのひとさんとプテラノさんですね
ご参加いただき大変にありがとうございました
また今日から1週間ですね月曜日
頑張っていけたらなと思いますし
あと3日ですね
今月も早いですね
また頑張っていけたらなと思います
じゃあ朝活終了したいと思います
お疲れ様でした
27:32

コメント

スクロール