LogoMarkWhite.png

姚欣艺/先行研究2 の履歴(No.1)


『デザイン、新・100の法則』[7]


 本稿は、『デザイン、新・100の法則』を読み進める中で、Webサイトのインターフェース設計やイラスト学習における情報配置について考察したレポートです。

 今回、本書に網羅されている多様なデザインの法則を精読したことで、ユーザーの認知プロセスを妨げない視覚配置や、インタラクション設計における「全体的な最適解」について、非常に解像度の高い知見を得ることができました。単に見栄えを整えるだけでなく、人間の行動特性をシステム側が先回りしてサポートするための強力なガイドラインとして、本研究(イラスト学習サイト)の実践を大きく前進させる確信へとつながっています。

↑

1. チャンキング(P30)

 前著『インタフェースデザインの心理学』(第19・20章)では、「人間のワーキングメモリの限界は4つである」という認知的な制約が示されていました。これに対し、本作の「チャンキング(p.30)」は、その制約を克服し、情報を効率的に処理させるための具体的な情報設計の手法です。两著の理論を相互に補完させることで、本研究の学術的妥当性をさらに強固にしました。

 視覚的分離効果による認知の疲れを防ぐため、イラスト画面とレイヤー領域が直感的に双方向連動するインタラクションを実装する。

 例えば:
 1:イラスト上のクリック操作: ユーザーがイラストの特定のパーツ(例:影)をクリックすると、対応する右側の「レイヤー3(影)」が自動的にハイライトされ、そのレイヤーの描画構造が視覚的に強調される。

 2:レイヤー領域の操作: 右側の特定のレイヤーを選択すると、左側のイラストがその段階(例:線画のみの状態)に切り替わる。

 チャンキングを取り入れた「4つ程度のステップに最適化されたレイヤー表示」と「双方向連動インタラクション」を実装したプロトタイプを用い、下半期の比較実験において、従来の静的な教程と比較して、NASA-TLXの「精神的要求(Mental Demand)」および「フラストレーション(Frustration)」が有意に軽減されるかを定量的に検証する。これにより、初学者が一度に処理する認知負荷を効果的に軽減する設計基準とします。

↑

2. ヒックの法則(P102)

 本書の102ページにある「ヒックの法則」を読んで、私のイラスト学習サイトに使えるかどうかを考えました。結論として、この法則をサイト全体にそのまま使うのは良くないと判断しました。その理由と気づいたポイントを以下に整理します。
 
 基本のルール: 選択肢が多ければ多いほど、人がどれを選ぶか決めるまでに時間がかかるという法則です。そのため、操作を早くするためには選択肢をできるだけ少なくすることが大切です。

 この本の重要な指摘: 本書には、「難しい問題解決や、文章を読んでじっくり考えるタスクには、この法則は使えない」とはっきり書かれています。
 
 イラストを描くときはじっくり考えることが多いため、この法則を無理に使うと逆効果になります。そのため、サイト内で以下のように分けて考えます。

 1、イラストの構造学習エリア(法則を盲目的に適用しない領域):
 イラストのレイヤー構造(下描き、線画、影、仕上げなど)や複雑な画面構成を分解して学ぶエリアは、深い認知を伴う「学習活動」の場です。教学用イラストは元々、複数の複雑な要素や階層的な情報が有機的に結合して成り立っています。ここでヒックの法則を機械的に適用し、情報量やレイヤーの選択肢を過剰に減らしすぎると、イラストの描き方の本質や全体像が伝わらなくなり、学習効果において逆効果になってしまうと思います。

 2、ウェブサイトの機能操作エリア(法則を厳格に適用する領域):
 「次のステップへ進む」「カテゴリーを選択する」といった、ユーザーを迷わせたくないナビゲーションやシステム操作の領域には、ヒックの法則を厳格に適用します。UI上の選択肢やボタンの数を最小限に絞り込み、直感的に操作できるようにすることで、ユーザーがサイトの操作方法自体に脳のワーキングメモを消費してしまうのを防ぎます。これにより、初学者の余計な認知負荷を徹底的に排除し、イラスト学習そのものに集中できる環境を整えます。