しゃけろぐ

デザインに関すること、生活に関することなどなど。

【レポート】UX DAYS TOKYO「わかりやすいデザインとは？」に参加しました！

こんにちは、さーもん（@mgmgshake）です。

1/21にUX DAYS TOKYO主催の勉強会「わかりやすいデザインとは？」に参加してきました。

uxdt.connpass.com

UI/UXに関する話なだけあって、すっと頭に入ってくる内容が多く勉強になりました。

今日はその内容についてレポートします！

 

今回の会場はFringe81さんでした。

初めて入ったけどすごく綺麗…ノベルティもいただきました。

  Visibility of system status

まずは、菊池 聡（Web Directions East, LLC.）さんのセッション「ビジビリティ・オブ・システムステータス」です。

UI/UXデザインを学び始めの頃に散見される質問として、

・どの本を読んだらいいですか？

・どうしたらUX設計できますか？

・どうしたらUI設計できますか？

・ベストUI集を読んでみました

というものがとっても多いらしいです。

 

本を読み、ベストUIを収集するのも良いことですが、ベストUIはいわゆる「レシピ」。

本質を理解していなければ、さらなるものを生み出せません。

本質を学ぶ、ということがテーマのセッションでした。

 

ノーマンとニールセンの研究の一つである、「10 Usability Heuristics for User Interface Design」の１つ目の方法「Visibility of system status」についての解説が主な内容でした。

https://www.nngroup.com/articles/ten-usability-heuristics/

 

Visibility of system status とは？

 The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

和訳すると”システムはユーザーに対して、何が起こっているのかを適切な時間内に適切なフィードバックを与えなければならない”ということになります。

 

抽象的で一瞬「？」ってなりますよね。

 

菊池さんは信号機の例を挙げていました。

信号機って、赤と青の２つのフードバックがありますよね。

人間は、青信号だと「渡ろう」となって、赤信号だと「止まろう」となります。

この評価と実行のサイクルをスムーズに行うために、このルールがあるわけです。

 

このサイクルについて、詳しくはこちらに記載されています。

（と言いつつ、読めていないので、備忘録も兼ねて…）

www.nngroup.com

 

一見当たり前のことのように感じますが、世の中を見渡すと理にかなっていないことが多くあります。

菊池さんは飛行機の座席の小物入れについてお話ししていました。

 

日常の中の違和感

 

私はこのタイプの飛行機に乗ったことがないのですが、菊池さんが乗った機にはこのように小物収納が付いていたみたいです。

収納にはロックがついているのですが、左右に動かすとそれぞれ緑、赤のマークが出てきます。

経験を踏まえると、緑は開いている、赤はロックがかかっているように思いますよね。（トイレの鍵など）

 

しかし、予想に反して赤の時にロックが解除されて、収納を開けることができました。

 

これはなぜか？

実は、このロックの色はそもそもお客さん用ではなくCAさんの確認用にあるものだったのです。

ロックが赤（＝開いている時）の座席があると危険のため飛行機は離陸・着陸できません。

一目で危険の元を察知するために、開いているときが赤だったのです。

 

この話を聞くとなるほどという感じですが、ユーザにととっては戸惑いの種ですよね。

 

UX力を高める

こんな風に、UI/UXといえど画面の中だけの話だけではなく、日常生活の中におや？と思うタネはたくさんあります。

本質を知り、世の中をVisibility of system statusの色眼鏡をかけてのぞいてみる。

もしおかしいと思うとことがあったら、それはなぜか考え、解決策を導く。

このような日常の訓練が引き出しとしてストックされていくのですね。

 

HCI＆インタラクションデザインとUX

続いては大本あかねさんのセッション「HCI＆インタラクションデザインとUX」でした。

こちらは時間が押していた事もあり、かなり駆け足な内容でした。

 

最近、UIデザインの基礎として、整列や近接などのいわゆるweb、グラフィックの基礎が取り上げられていることが多いそうです。

もちろんその基礎も大切なのですが、UIデザインは「操作の設計」なしには語れません。

 

操作の設計の第一歩

ただ見た目がいいもの作るだけではなく、

・ユーザに考えさせない

・空目させない

ということを常に意識するのが大切です！

 

こちらもいくつか実例を用いてお話ししていました。

 

 

上記の気をつけることを考えると、このフォームには改善点が２つあります。

 

答えは…

 

 

・文字読み上げの方もいるので、重要な注意文言などはボタンの前に設置する

・小人数が「少人数」と空目してしまうので、子供などわかりやすい表現に置き換える

 

という２つでした。

言われてみると、確かに…。特に少人数のくだりなどは頭のどこかで違和感を抱いているけれど、ちゃんと気がつくのは難しいなぁと感じました。

 

今仕事でフォーム案件を多く取り扱っているので、この辺気をつけなくちゃですね。

 

ちなみに…

このクイズの話を会社の先輩方にしたところ、

楽○トラベルの予約フォームでは、予約ボタンの下にある「このホテルのメルマガを登録」がデフォルトチェックになっており、

気づいた頃にはもう予約ボタンを押しているので、ちょっとイライラするという話が出てきました。

 

社内やデザイナー仲間の間で、どうなのこのUIみたいな小話ができたら発見もあって楽しそうですね～。

 

レポートは以上になります！

 

あと半年ほどでデザイナー2年目が終わる私にとって今年の課題は、人とのつながりを増やすこと。

今年は積極的に勉強会に参加していきます！