見出し画像

読書メモ-Day 10- UIデザインの教科書

本の情報

タイトル:
UIデザインの教科書 マルチデバイス時代のインターフェース設計

著者
原田 秀司

この本を読んだ目的

UI /UXデザインに興味を持ったため
→UI /UXデザインに興味を持ちつつ、詳しく勉強したことが無かったため、基礎から学んでみたいと思った。

この本を読んで学んだこと

・UIとは
→User Interfaceの略でユーザーとシステムやサービスとの接点のことを指す。マウスやキーボード、リモコン等、ユーザーが直接手で触る部分がインターフェースとなる。
ユーザーインターフェースをデザインすること=システムやサービスに付随するインターフェースをより使いやすく設計すること。

・UXとは
→User Experienceのこと。広い意味では、知った瞬間からの全ての体験を指す。実際にサービスを利用してから使わなくなった後も含め、サービスによってうける全ての体験が含まれる。

・UIとUXは分けて考えるべき
→UIはUXに直接的な影響を与えるが、UIをいくら改善したとしてもUXを根本的に改善出来ない場合もある(スマホの個人認証など)

・物理的な制約
→いいデザインを作るにはデバイス固有の特性について理解する必要がある
入力手段の違い、画面の違い、AndroidとiPhone

・ソフトウェアの影響
webとアプリ
→アプリ=専用ツール、専用にインターフェースが設計されるため、操作が軽快で豊富なインタラクションが実現可能
web=凡庸ツール

・人間の認知特性
◎色:人が持つ瞬間的な判断能力
順列的な処理=1つずつ順を追って対応していくこと
探したい情報に色をつけることで、ほぼ一瞬で場所を把握することができる「瞬間的な処理」に変わる
色をむやみに増やすとこの効果が薄れるため注意が必要

◎形:異なるものを見つける力
色と同時に形についても異なるものを瞬間的に見つける能力を持っている

◎動き:変化を見つける力
「動き」や「変化」があると、意識をしなくてもそこに注目してしまう特性がある
【注目のための動き】注目を集める役割を持った動き
【理解のための動き】ユーザー自身が状況を理解するための手助けをするための動き
【装飾のための動き】演出的な役割をする動き

・インタラクションコスト
ユーザーが受ける負担のこと。インタラクションコストを下げること=いいデザインにつながる
【精神的な負荷】見て判断がつきにくい、考える必要がある等
【肉体的な負荷】移動が多い、遠い、同じことを繰り返す、手や指を伸ばす、持ち替える等

・インタラクションコストを下げていいデザインを作るには
【一貫性】サービス内のデザイン要素が全てその基準に従っているか
【シンプルさ】「明快」「簡潔」な状態のこと。意図が明確で理解しやすい状態のこと
【共通概念】誰もが知っている共通ルールをを活用し、新たなルールを学ぶ労力を回避すること

・階層と構造
web、アプリ=立体構造、ページごとの繋がりがきちんとユーザーに伝わるかが大事
前後関係→ビジュアル(見た目)と動き(インタラクション)で表現する
特にインタラクションによる状態変化の表現は有効。ある状態からある状態に移動する時、現実世界では一瞬で移動することが起こり得ないので段階的に変化していくことで人間には自然に感じられる(機械にとっては手間)

・ナビゲーションとインタラクション
画面の広さ、入力手段の違いで設置場所も変わってくる
PC、スマホ、TV 等それぞれで制約が発生し、最適な場所も異なる

・インタラクションの種類
【理解のためのインタラクション】理解を促すための動きで、使いやすさ・分かりやすさに直結する
【演出のためのインタラクション】素敵な体験を通してサービスの魅力を向上させる動き

・デザインを形にする
ミニマルデザイン→シンプルで分かりやすく、洗練されたデザインに仕上げること
スキューモフィズム(実物をメタファーとした現実世界を想起させるデザイン)から平面的でシンプルなデザインに変化してきた
ボタンやリンクの分かりやすさを意識したり、削りすぎて逆に認知負荷を増大させないように注意が必要。

得たこと・感じたこと

・UI=見た目をユーザーが分かりやすく整えるイメージだった「ユーザーとシステムやサービスとの接点のことを指す」というのが意外だった。

・単にクリックする回数を減らす、入力項目を減らす等、工程を削ることが必ずしも認知負荷を軽減することにはならない(削ることで分かりづらくなれば認知負荷は大きくなる)

・現実世界にない動きは、脳の混乱を招く。あえて手間をかけて状態変化の過程を作ることで、理解が早まる。

読み終えて今すぐすること(TO DO)

・様々なアプリやwebを観察しながら使ってみる。

・使いづらいと思ったwebやアプリに関しては、「なぜ使いづらいのか」「どこを改善すれば使いやすくなるか」を分析してみる。

この記事が気に入ったらサポートをしてみませんか?