それは、人生が複雑だからだ。
機能を減らして複雑を減らすのは容易だが、シンプルを切望する一方、複雑を必要とするのが心理。
実際、モノをシンプルにすると売れなくなる。
選択できるときは、より多くのことをやれるものを選ぶ。その機能が複雑さの元になることを知っていても、シンプルより機能を取るのが心理。シンプルを望むが、すばらしい機能のどれ一つも失いたくはない。
生活の中では「複雑」は必要。
「分かりにくい」ことは、悪いことだが、「複雑である」ことは、良くも悪くもない。
「複雑」を減らして「分かりやすく」ではなく、「複雑」を管理して扱いやすくするのがデザイン。
デザインを表現する前に理解しておくこと。
テクノロジーを扱いやすくするのは身体的タスクではなく、心理的なものである。
シンプルは、理解と強く結びついた心的状態である。
モノはその動き、選択肢、外見が知覚する人の概念モデルに合っているとき、シンプルと知覚される。
ぱっと見、複雑そうでも、操作のシンプルが最適化されれば、知覚されるシンプルも増す。
これは、誰の視点でシンプルであるかを測るかよって異なる。
結局、シンプルであるかは心の問題。
複雑なものも、それに熟達し、操作法とインタラクションの規則を理解すれば、シンプルになる。
ユーザーと開発者のパートナーシップを通して、複雑さを扱えるようにできる。
「概念モデル」とは、複雑な物理的実体を、利用可能な理解できる頭の中の概念に変換する助け。
ただし、良い概念モデルがなくても、簡単な説明や他の真似をすることで、機器を使うことができる。
「分かりにくい」とは、適切な概念モデルがないこと。
この適切な概念モデルを与えることが良いデザインと成り得る。
エラーメッセージを避ける。
どのように動くかに関する充分な情報を提示して、何かがうまくいかないとき、問題の証拠が知覚で、可能な代替案(過去の情報、現在の情報、未来の 情報)があることを示す必要がある。
どのように動くかに関する情報が不足し、何かがうまくいかないとき、間違いだと警告する代わりに、その場で直ちに修復するために必要なツールと共に問題の説明を示す。
これでよりシンプルになる。
デザインへの強力な含意を持つ昔からの戦略「分割して統治せよ」。
グループ化して分類することにより複雑さを理解できる構造を得られる。
ただし、デザインの基本的要件は、モノを理解可能にすることだが、そうした優れた概念モデルだけではダメ。適切にコミュニケーションが 行われないと役に立たない。
機会もサービスも、デザインは社会的な活動と捉えるべきで、その活動がうまく完了するように、インタラクションの社会的性質に充分配慮されるべき。
(意図的であるかは関係なく)適切な行動への知覚可能なサインのこと。
似た概念に「アフォーダンス(生体の持つ可能性とモノの持つ可能性との間の関係性であり、実世界に存在し、行動を可能にする世界の一部)」という 概念がある。
×「製品にアフォーダンスを追加した」
○「製品のアフォーダンスを明確にするため、シグニファイアを追加した」
シンプルにする方法
実際の要求をモデル化したため、適切にモジュール化されシンプル。
シンプルにするにはもっとも有効だが、頑健で信頼できるシステムによって、機能が完全に自動化された場合に限る。
自動化が破綻すると、自動化されなかったときより、タスクは複雑になる。
部分的な自動化も完全な自動化や自動化なしに比べて、切り替える際の混乱と複雑さから問題が多い。
マニュアルは、ほとんどの人が「ジャストインタイム」の学びを望んでいる。
マニュアルはすばやく効率的な教示素材として用意する。
短いデモにチュートリアル、そして最後に、より進んだ知識を求める人のために、すべての機能とオプションの趣旨に関する完璧な記述をできるだけイ ラスト付きで用意する。
対処しているという確証と安心感を与えることによって、不安を最小限にする。
そのためには、良い概念モデル(これから何が起こるのかを示し、今何が起こっているのかを理解する助け)が必要。
そのためには、充分なフィードバックが必要。たとえ原因不明でも「原因が分からない」という説明で適切な人が問題を認識し、対処しているところだ ということが分かり、安心を与える。
なにが起こっているのかの情報と概念モデルの組み合わせがうまくいくとき、適切だと受け止められる。
適切な行動を提案し、時間はつねに長く見積もらなければならない。
嫌なものだという事実は、それをより良いものにする何かを見つけようとするきっかけになる。
物理量と心理量の違いを理解する。
そのときに知覚された時間や距離と、後で記憶に残っているものと間には大きな差異がある。
何かの経験をしているときには、何もすることがない時間はやることが詰まった時間よりも長いと知覚される。しかし後で思い出す と、やることがなかった時間はあった時間よりも短かったと知覚される。
待つことが理にかなっているように見え、誰に対しても不満がない状態が、無秩序だったり、不公平だと感じた瞬間、強い負の情動 がわき起こる。
常に前向きな終わり方をすること。心理学の研究「系列位置効果」によれば、列の終わりに来たとき、列に付いたとき、中ごろにい るとき、という順番で記憶に影響を与える。
終わりと始まりを強調し、避けられない不愉快な場面を中ごろに埋め込むことが、基本的デザイン原則を強化する。
顧客に提供する新機能を加えたい誘惑があり、それは複雑さが増すコストもある。
間違ったことをきちんと正した会社は、間違いをまったく犯したことのない会社よりも好まれる(現在の研究ではあまり支持されていないが実例とし て)。いずれにせよ、いかに顧客のことを気にかけ、行動することが重要。
誠意、正直さ、個人的な配慮は大きい影響力を持つ。
人の振る舞いは、一見簡単そうに見えて複雑(社会的な振る舞いはなおさら)。
人の振る舞いに合うようにデザインするべきであって、思い通りに振る舞わせるようにではない。
使っているモノが、可視性、ナッジ(軽いひと押し)、シグニファイア、機能の強制、フィードバックを備えたときに、うまく機能する。
現状のままでは、私たちがテクノロジーに合わせなければならない。
今こそテクノロジーが我々に合わせるように変革するとき。
デザインのコンセプト。それは、人間の立場に立ち戻り、従順なシステム、寛容なシステムを目指すことを求めることだ。
(Norman 2009a)
この考えを適用したクライアントは、これを「エモーショナルデザイン」と呼んだ。
複雑さに対する強烈な反対派であり、シンプルを強く主張してきた。
しかし、問題は複雑さでなく、分かりにくさとその結果生まれる矛盾。
その解決方法は、制御・表示・機能を少なくするのではなく、一貫性と理解である。
あえて言おう。
これからは、エモーショナルデザイン、だ。
この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・
この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・
これを知ったときはマジか!と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・
試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・
プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・
Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・
requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・
6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・
この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・
もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・
たとえば、白文字が混じった画像を透明GIFにする場合、背景だけでなく白文字までが透明化されてしまう。 ずっと悩んでいたがようやく解決できたので覚え書き。 形・・・
jQurey Mobile。まもなくβ版がリリースされるそうですが、現状のα版3を見てみました。 最低限必要なソースまで削り落として、ちょっとjQuery Mo・・・
変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・
sassファイルを保存すると、cssファイルが自動生成されるという症状でしばらくの間、ストレスだったがようやく解決。 例えば、var.scssを修正して保存す・・・
記述方法は間違いないのに、文字化けしてしまう。 xhtmlはutf-8で宣言していたのだが、Javascriptで記述された日本語がブラウザで確認すると文字化け・・・
変数bnにhtmlファイルのファイル名を拡張子なしで取得するサンプル var bn = location.href.split("/"); bn = bn[b・・・
ローカル環境はMAMPを使いました。 データベースを作成する MAMPを起動し、「サーバを起動」後、「オープンWebStartの」をクリックします。 「ツ・・・
xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />・・・
Webサイトに動画を利用する際には、2017年8月時点では、webmとmp4とどちらにも対応していない場合の静止画像を用意して置くことにしている。 動画を違う拡・・・
正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い(バグ)が原因であるが、IE5や古いブラウザにバグが見られる。・・・
「test」
「>ころころさん コメントありがとうございます! 確かに、APIドキュメント見ましたが、ライブに関する情報は今のところ取得できないようですね。 インスタライ・・・」
「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました!」
「>名無しさん ご指摘、ありがとうございます! 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」
「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります(・・・」
「アバターを取得する「get_avatar」についても追記しました!」
「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」
「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」
「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」
「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」