フロントエンド技術を学ぼう 2-8.ユーザーインターフェース/インタラクションデザインについて学ぶ

2020年7月24日金曜日

Design Front-end Developer Handbook

t f B! P L

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。

ユーザーインターフェース/インタラクションデザインについて学ぶの説明です。


ユーザーインターフェース/インタラクションデザインについて学ぶ

ユーザーインターフェースデザイン

ユーザーインターフェイスデザイン(UI)またはユーザーインターフェイスエンジニアリングは、コンピューター、家電、モバイルデバイス、およびその他の電子デバイスなどの機械とソフトウェアのユーザーインターフェイスを設計し、ユーザーエクスペリエンスを最大限に高めることに重点を置いています。

ユーザインタフェースの設計の目標は、ユーザの目的(ユーザ中心の設計)を達成する観点から、ユーザとインターフェース間の体験を可能な限り簡単かつ効率的にすることです。

参照元:英語版Wikipedia


インタラクションデザインパターン

インタラクションデザインパターンとは、一般的なデザインの問題に対する解決策をドキュメント化する、正規の方法です。

このアイデアは、建築家のクリストファー・アレクサンダー(Christopher Alexander)が都市計画や建築で使用するために導入されたもので、教授法、開発組織とプロセス、ソフトウェアアーキテクチャーやデザインなど、さまざまな分野に適用されています。

参照元:英語版Wikipedia


ユーザーエクスペリエンスデザイン

ユーザーエクスペリエンスデザイン(UXDまたはUEDまたはXD)は、ユーザーと製品の間のやりとりで提供される使いやすさ、アクセシビリティ、および楽しさを向上させることによって、ユーザー満足度を向上させるプロセスです。

ユーザーエクスペリエンスデザインには、従来のヒューマン・コンピュータ・インタラクション(HCI)デザインが含まれ、ユーザーが認識している製品やサービスのすべての側面に対応することで拡張されています。

参照元:英語版Wikipedia


ヒューマン - コンピュータ インタラクション

ヒューマンコンピュータインタラクション(HCI)は、特に人(ユーザ)とコンピュータとの間のインタフェースに焦点を当てて、デザインを研究し、コンピュータ技術を駆使します。
HCIの分野の研究者は、人間がコンピュータと新しいやり方で交流できるよう、人間とコンピュータ、人間とデザイン、両方の相互作用について観察しています。

参照元:英語版Wikipedia


ユーザインターフェースの教科書

最低限以下にリストアップしているテキストを読むことで、必要に応じたユーザインターフェースを構築できる様にしておくことをお勧めします。

Design for Non-Designers(デザイナーではない人の為のデザイン)


Design for Hackers: Reverse Engineering Beauty
(ハッカーのためのデザイン:リバースエンジニアリングビューティー)


Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability
(考えさせないで)


About Face 3 インタラクションデザインの極意


デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン




デザイニング・ウェブインターフェース ―リッチなウェブアプリケーションを実現する原則とパターン


QooQ