内部設計から見えてくるUI

UI/UX設計にはシンプルさが必要です。そして優秀なプログラマーはシンプルさを追い求めています。なので、画面の意匠は詳しくなくても、UIデザインについてはなんとなくわかることがあります。それを何とか言語化してみました。

Transcript

1. 内部設計から見えてくる UI/UX
2. この話の立ち位置 私はUI/UXについては専門家というわけではないです プログラマーなのでUI/UXについてはいろいろ考えてきました 一つ、UI/UXについて、内部設計を熟知した人以外には伝わり にくいがいねえんがあることに気づきました。 それについて言語化を試みたのがこの資料です。
3. 目指すべきではないUI/UXのイメージ • 百徳ナイフ
4. 目指すべきではないUI/UXのイメージ
5. 目指すべきUI/UX シンプル Appleでも思い出してください（あえてリンクなし）
6. シンプルを追い求めて 数学 物理学 プログ ラミング シンプルな美しさを重視する 分野
7. シンプルとは？ 結構主観が混じ るものでしてね。
8. シンプルとは AとBのどちらがシンプルかについて、 千差万別の意見が出ることはあり得る。 定義を整理してみましょう。
9. 共通部分 プログラ マーが追 い求める シンプルさ 良い製品 のUI/UXが 持つシン プルさ
10. ある一つのシンプルさ ものごとはできるかぎりシンプルにす べきだ。しかし、シンプルすぎてもい けない。 •アルベルト・アインシュタイン
11. 解釈 •同じ現実を、可能な限り 少ない要素で理解する できるかぎり シンプル •要素を削りすぎて、現実と 違ったものになってしまう シンプルすぎ
12. プログラムの内部設計 • できるだけ少ない行数で • 保守拡張の工数に直接影響する できるかぎり シンプル • 要件を満たさない • テストが通らない シンプルすぎ
13. UI/UX •少ないUI部品数、少な い操作数で実現する できるかぎり シンプル •やりたいことができな い シンプルすぎ
14. ある一つのシンプルさ ものごとはできるかぎりシンプルにすべきだ。しかし、シンプルす ぎてもいけない。 プログラマーは直感的に理解できる UI/UXにとっても重要 プログラマー以外の人にどう説明する？
15. プログラムの言葉を使わずに説明する概念 メンタルモデル
16. メンタルモデル メンタルモデルは、外界の現 実を仮説的に説明するべく構 築された内的な記号または 表現であり、認識と意思決定 において重要な役割を果た す。（出典；Wikipedia）
17. アプリケーションのメンタルモデル メンタルモデルをシンプルに 商品やカート（メンタルモデル）を操作したくてアプリケーションを使います ユーザーはボタンを押したくてボタンを押すわけではありません
18. メンタルモデルをシンプルに たくさんの画面のあちこち に商品が表示されていて、 それが全部違うものだと 認識すればそれは複雑 なメンタルモデル。 同じ商品があちこちに見 えているだけと認識すれ ば、シンプルなメンタルモ デル。
19. メンタルモデルをシンプルに シンプルなメンタルモデル 同じものに見える 見た目が同じ 同じ操作ができる
20. シンプルなメンタルモデル UIそのものは多くて、あちこちから操作できて も、それがメンタルモデルとして同じで、同じ ものに同じ操作をしているとユーザーが思え るなら、ユーザーにとってはそれはシンプル メンタルモデルをシンプル に
21. プログラマーが考えていること メンタルモデル をシンプルに オブジェクト指向 プログラマーが、 UIや仕様につい てについて毎日 考えていること
22. なぜそれをプログラマーが指摘できるのか UIもUI以外も同じプログラムだから • 普段から、UI以外に、UIの１００倍ものプログラム部品 をシンプルに整理する必要がある。 • UI以外は整理された状態になっているのに、UI部分だ けがシンプルでない状態だと、一目瞭然で目立つんで すよ。