【ABC】誰のためのデザイン？ 第四章 何をするのかを知る

Automagic Book Club @AutomagicBC

本日から「誰のためのデザイン」第四章 ( #abk1_4 ) です。制約・可視化から生まれるアフォーダンスについて。私たちはいかに知り、行動に移しているのでしょうか。

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

書見。D.A.ノーマン『誰のためのデザイン？』第4章「何をするかを知る」読みはじめ。 #abk1_4

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

「あなたを見かけて気分がよくなったので、お金をあげます」 #abk1_4

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

13ピースのレゴのオートバイが説明書なしに組立てられる件で、 @orcajump 先生の科学ライティング課題を思い出した。「ブロックを適当に組立てる→手順を説明書に落とす→読者は手順を再現できるか？」。説明書は、デザインに制約が反映されていないとき必要になるのか。 #abk1_4

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

「ドアの取っ手に「押・引」のマークが必要だとしたら、おそらくそのデザインには何か問題があるのである」。Web制作の現場で「ボタンのラベリング」はしばしば問題になりますが、「どうラベリングするか」の前に「なぜラベルが必要になっているのか」省みる必要も時にはあるかも。#abk1_4

ヤスヒサ 🗑 @yhassy

RT @AutomagicBC: 本日から「誰のためのデザイン」第四章 ( #abk1_4 ) です。制約・可視化から生まれるアフォーダンスについて。私たちはいかに知り、行動に移しているのでしょうか。

ヤスヒサ 🗑 @yhassy

皆覚えようと思ったら出来る。じっくり取扱説明書を読めば出来るかもしれない。けど使うかどうか分からないようなことを学習するのは面倒だし、使いたいと思った時にわざわざ調べたり学習しようとも思えない。 #abk1_4

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

「音によるフィードバック」といえば、電気自動車の走行音の話を思い出す。ガソリン車より駆動音が小さく、歩行者が車の存在に気づかず危険なので走行中に何か音を鳴らそうという話。 #abk1_4

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

道具の音というと、平成仮面ライダーなんかも興味深い。効果的なサウンドエフェクトによって、こどもまでもが架空のガジェットに強烈なメンタルモデルを抱く。音によるUIデザインのお手本だと常々思っている（いや真剣に！）。#abk1_4

ヤスヒサ 🗑 @yhassy

取扱説明書=Twitterみたいな Q&A は企業にぜひしてもらいたいね。検索より正確で早そうだし、コンパクトに知ることが出来たら覚えることが出来そう #abk1_4

稲本浩介 #イナチャンネル という名義でnoteやポッドキャスト @sevenina

どれだけ新しいものであっても、人はそれまでの経験でしか判断できないという当たり前の感覚を持った上で「斬新」を作らなくてはいけない。 #abk1_4

稲本浩介 #イナチャンネル という名義でnoteやポッドキャスト @sevenina

最近の色んな物に、マニュアルとか手掛かりなどが多く記載されているのは、「デザインが悪いから」か、「考えるという能力が落ちている」のか、どっちだろう。免責的に載せてる傾向が強いと感じるが、いかに？ #abk1_4

稲本浩介 #イナチャンネル という名義でnoteやポッドキャスト @sevenina

音に関する記載のときに、思わずケータイのボタンを押し、音を感じてみる。なるほど〜と実感。 #abk1_4

Automagic Book Club @AutomagicBC

@sevenina そういえば、電話のテンキーではスマホでもしっかり音を出して押した感を演出していますが、同じようなことを実践しているアプリは少ないですね。カメラアプリかゲームくらいかな #abk1_4

Kaz Tsuchiya @caztcha

「アフォーダンス」と「制約」をデザインに盛り込む。前者はユーザーに可能性を示してくれる。後者はユーザー行動の選択肢を狭めてくれる。 #abk1_4

Kaz Tsuchiya @caztcha

「グルーピング」と「対応づけ」 #abk1_4

Kaz Tsuchiya @caztcha

「可視性」と「フィードバック」 #abk1_4

Kaz Tsuchiya @caztcha

複数のステップの操作が必要な場合、あるステップで得られるフィードバックは、即ち次ステップを可視化したものである必要がありそうですね。 #abk1_4

カガタ・ユースケ kann brauchen, was er gelernt hat @_heartyfluid

@kaz_wui 確かにそうですね。 #abk1_1 で言及された「知覚されたアフォーダンス」 http://bit.ly/p32Th7 を踏まえれば、 関係性としての「アフォーダンス」と、それを伝達する「可視性」とをうまく区別することができると思います。 #abk1_4

ヤスヒサ 🗑 @yhassy

選択肢の少なさという意味ではモバイルは設計しやすい。そうせざるを得ないから。PC向けサイトの選択肢が多いのは、スクリーンサイズが大きいことが一つの要因だろうね。 #abk1_4

Automagic Book Club @AutomagicBC

RT @kaz_wui: 複数のステップの操作が必要な場合、あるステップで得られるフィードバックは、即ち次ステップを可視化したものである必要がありそうですね。 #abk1_4

Kaz Tsuchiya @caztcha

RT @_heartyfluid: 道具の音というと、平成仮面ライダーなんかも興味深い。効果的なサウンドエフェクトによって、こどもまでもが架空のガジェットに強烈なメンタルモデルを抱く。音によるUIデザインのお手本だと常々思っている（いや真剣に！）。#abk1_4

Kaz Tsuchiya @caztcha

RT @yhassy: 選択肢の少なさという意味ではモバイルは設計しやすい。そうせざるを得ないから。PC向けサイトの選択肢が多いのは、スクリーンサイズが大きいことが一つの要因だろうね。 #abk1_4

ヤスヒサ 🗑 @yhassy

Webにおける物理的制約は二種類ありそう。ひとつは、ハードウェアのもつ制約。そしてもうひとつは GUI というデジタルな物体がつくりだす制約。 #abk1_4

ヤスヒサ 🗑 @yhassy

ただし、GUI といっても、OS のレイヤー、Web ブラウザというソフトウェアのレイヤー、Webサイトはそのもののレイヤーの三階層ある。 #abk1_4