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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

この話の立ち位置私はUI/UXについては専門家というわけではないですプログラマーなのでUI/UXについてはいろいろ考えてきました一つ、UI/UXについて、内部設計を熟知した人以外には伝わりにくいがいねえんがあることに気づきました。それについて言語化を試みたのがこの資料です。

Slide 3

Slide 3 text

目指すべきではないUI/UXのイメージ • 百徳ナイフ

Slide 4

Slide 4 text

目指すべきではないUI/UXのイメージ

Slide 5

Slide 5 text

目指すべきUI/UX シンプル Appleでも思い出してください（あえてリンクなし）

Slide 6

Slide 6 text

シンプルを追い求めて数学物理学プログラミングシンプルな美しさを重視する分野

Slide 7

Slide 7 text

シンプルとは？結構主観が混じるものでしてね。

Slide 8

Slide 8 text

シンプルとは AとBのどちらがシンプルかについて、千差万別の意見が出ることはあり得る。定義を整理してみましょう。

Slide 9

Slide 9 text

共通部分プログラマーが追い求めるシンプルさ良い製品のUI/UXが持つシンプルさ

Slide 10

Slide 10 text

ある一つのシンプルさものごとはできるかぎりシンプルにすべきだ。しかし、シンプルすぎてもいけない。 •アルベルト・アインシュタイン

Slide 11

Slide 11 text

解釈 •同じ現実を、可能な限り少ない要素で理解するできるかぎりシンプル •要素を削りすぎて、現実と違ったものになってしまうシンプルすぎ

Slide 12

Slide 12 text

プログラムの内部設計 • できるだけ少ない行数で • 保守拡張の工数に直接影響するできるかぎりシンプル • 要件を満たさない • テストが通らないシンプルすぎ

Slide 13

Slide 13 text

UI/UX •少ないUI部品数、少ない操作数で実現するできるかぎりシンプル •やりたいことができないシンプルすぎ

Slide 14

Slide 14 text

ある一つのシンプルさものごとはできるかぎりシンプルにすべきだ。しかし、シンプルすぎてもいけない。プログラマーは直感的に理解できる UI/UXにとっても重要プログラマー以外の人にどう説明する？

Slide 15

Slide 15 text

プログラムの言葉を使わずに説明する概念メンタルモデル

Slide 16

Slide 16 text

メンタルモデルメンタルモデルは、外界の現実を仮説的に説明するべく構築された内的な記号または表現であり、認識と意思決定において重要な役割を果たす。（出典；Wikipedia）

Slide 17

Slide 17 text

アプリケーションのメンタルモデルメンタルモデルをシンプルに商品やカート（メンタルモデル）を操作したくてアプリケーションを使いますユーザーはボタンを押したくてボタンを押すわけではありません

Slide 18

Slide 18 text

メンタルモデルをシンプルにたくさんの画面のあちこちに商品が表示されていて、それが全部違うものだと認識すればそれは複雑なメンタルモデル。同じ商品があちこちに見えているだけと認識すれば、シンプルなメンタルモデル。

Slide 19

Slide 19 text

メンタルモデルをシンプルにシンプルなメンタルモデル同じものに見える見た目が同じ同じ操作ができる

Slide 20

Slide 20 text

シンプルなメンタルモデル UIそのものは多くて、あちこちから操作できても、それがメンタルモデルとして同じで、同じものに同じ操作をしているとユーザーが思えるなら、ユーザーにとってはそれはシンプルメンタルモデルをシンプルに

Slide 21

Slide 21 text

プログラマーが考えていることメンタルモデルをシンプルにオブジェクト指向プログラマーが、 UIや仕様についてについて毎日考えていること

Slide 22

Slide 22 text

なぜそれをプログラマーが指摘できるのか UIもUI以外も同じプログラムだから • 普段から、UI以外に、UIの１００倍ものプログラム部品をシンプルに整理する必要がある。 • UI以外は整理された状態になっているのに、UI部分だけがシンプルでない状態だと、一目瞭然で目立つんですよ。