ぽんぽんぺいんでつらたんなので、おしごとおやすみしまーす

🗣: バイクに乗ったり、ものづくりしたり、ひたすら寝たり。

UI・ユニバーサルデザインについて思う事をメモしておく。

こんにちは!
記事毎にテンションのムラがある人です。無理しないがモットーなので、極力品質を落とさず見に来てくれる方に新たな知見を見出していただけるような記事を書くことにします🐶笑



今回は緩めな内容ですが、個人的に気になっているUIについてのメモです。

グラフィックデザイナーの為のユニバーサルデザイン実践テクニック51
上記の本を読んだので、共感したポイントや、実際に現場で活用していきたいテクニックをまとめます。

UIを気にしている背景

個人的なポイントは主に2つあります。
①その機能の意図は正しくユーザーに伝わっているか
②そのUIは競合よりもユーザーに受け入れられるものか


①その機能の意図は正しくユーザーに伝わっているか


あるシステム会社で目にした案件の例です。卸業者と顧客がチャット機能を介し、注文が完結するようなシステムの改修に携わったことがありました。
UIはFBのmessengerに似ています。下の見た目に設定や注文ボタンがくっついているようなイメージです。

FacebookのチャットUI
FacebookのチャットUI(5年前)
しかし、チャットから注文フローに行く為に少し癖のあるポイントがあって、注文方法が2パターン存在するものになっていました。注文のステータスによってボタンの文言も変わるので、ユーザーは今自分が何をしていて、このフローのゴールまでのどの位置にいるのかがわかりづらかったようでした。
この機能のリリース後、CSチームはユーザーからの仕様説明に追われる事になり、CS側が機能の把握のキャッチアップに追われたり、開発側でもそもそもこの機能は誰の為、何の為にリリースされたの?という話し合いが持たれたりなどしました。


この事実を重く見た上司は、(チャットルームに入室かつ一度もメッセージを送っていない)ユーザーに対してチュートリアルの展開を実施し、視覚的に用途の説明を促したのでした。
これが功を奏してCSチームに別添えの説明書に載っているような問い合わせは激減したわけです。
文字面ベースの説明ではなく、インタラクティブに動くギミックであることが重要です。
それでも直感的な操作に慣れていない人や、ブラウザによって見方が変わってしまうユーザーに対しては別途の対策を取る必要があります。

②そのUIは競合よりもユーザーに受け入れられるものか

この世にはいろんなアプリケーションが溢れかえり、同じ指向性を持った多数のプロダクトが存在しています。
よくレッドオーシャンなどと例えられますが、その中で差別化を図るポイントは、機能性と同格に位置付けられる見た目にあると思います。

①で説明したように、人はわからんものを敬遠してしまうところがあります。年齢を経ると、予測できないものに対する左記の性質がさらに強化されるとも言われています。
書いてあることが同じでも、分厚い辞書と章毎に分けられた英単語の冊子であれば後者の方が手に取りやすいですし、学習の予測も立てやすいです、個人的には。


さらに言えば、ユーザー層によって好まれる装飾や世界観があります。

飲食店のメディアサイトであれば暖色系のUIが好まれるかと思います。一般的に寒色系の色はビジネスや清涼さを表現するものだからです。また赤に近い色は人の食欲を増進すると言われています。食べログさんやRettyさんは基調色がオレンジ色のUIですよね。


上記の例で言えば、飲食店の情報を求めてやってくるユーザーは掲示されている情報の値踏みをします。
webページの見た目の情報はテキストと画像で構成されていて、ユーザーは目視で到達意欲をそそる飲食店の情報を抽出し、これらの内容を素早く直感的に判別し、必要な情報のみ精査する動きをするかと思います。


下記にあげてある画像は世界観に関しての比較画像です。イメージはタイトルの通りですが、文字・画像・付加要素(罫線、スタンプ)により情報が整理されているのがわかります。
やわらかい印象を与えるフォントを使用する事で、幼さや可愛らしさを表現することができます。
ゴシック調のフォントを使用すればリッチな印象、情報の確実さを助長するような表現ができます。

これはこの記事を目にするユーザー層によって使い分ける事で、プロダクトを選定する基準にもなります。


週刊誌の連載グルメコーナーのイメージ
週刊誌の連載グルメコーナーのイメージ

女子向け雑誌のおすすめグルメコーナーのイメージ
女子向け雑誌のおすすめグルメコーナーのイメージ

ユニバーサルデザインを大事だと思う理由

私はもともと福祉系の仕事をしていました。障害のある方と内職をこなしていく仕事でありましたが、情報伝達は言語だけではなく、視覚や聴覚から得られる情報は彼らにとって非常に有用なものであります。(なんなら聴覚ベースよりも箇条書きの文書を見せただけで仕事の工程を一瞬で記憶する人もいます。)


この部分に私は面白さを感じました。自分の思う相手の感じ方をいくつも想像して、その人に合った集中法を考え、実践するのはとてもやりがいがありました。相手の感じ方にうまく寄り添うことができれば、相手にとって苦手意識の克服や、自己強化の良い思い出になりますし、新しい事に挑戦する自信をつけてもらうことができるのです。


少し話が逸れてしまいましたが、専門学校ではユニバーサルデザインというものを学びました。

wikipediaより

世界初のユニバーサルデザインの提唱は、米ノースカロライナ州立大学デザイン学部・デザイン学研究科(College of Design)のロナルド・メイスによるものである。カリフォルニアにあるユニバーサルデザインセンターの長でもあった彼が1985年に公式に提唱した概念[1]とされる。

「できるだけ多くの人が利用可能であるようなデザインにすること」が基本コンセプトである。デザイン対象を障害者に限定していない点が「バリアフリー」とは異なる。

小学校の時に鉛筆の握り方を矯正する器具を使ったことがありますか?あれは治具というものですが、あれもユニバーサルな設計が取り入れられています。指先の発達が未熟な為に、鉛筆の握りが困難な人の為に作られた製品です。

鉛筆を握られなければ昔は文字を書くことができませんでした。しかし、今では発声から文字入力を手伝うデバイスもありますし、パネルから指で書いた文字を推測し、変換してくれるミドルウェアもあるでしょう。


表現方法は多様化し、普及しつつあります。
それでもその高速な進化を遂げたメソッドの扱い方に戸惑いを覚え、人の利益の発展や幸せの為に設計されたプロダクトを使用するところまで行き着かず、
一線を引かれてしまう事例もこれから出てくるのではないかと考えます。


私個人としてはこれが残念に思えて仕方がないのです。
見方や使い方に工夫をする事でアプリをシェアすることが出来、そこから得られる素晴らしい体験を出来ない人たちがいるというのは寂しいことです。

抵抗や偏見を排し、安全に使用できるプロダクトを生み出していくのはエンジニアの使命だと感じる部分があります。

抜粋実践テクニックは次の記事から始めます🙇‍♂️🙇‍♂️🙇‍♂️


引用
www.recode.net