見出し画像

【アウトプット】UI/UXデザイナーへの道!3

※こちらの記事はスクールに了承いただいて書いているものです。

こんにちは〜!今回はオンラインスクールPLAY THE DESIGNERの3回目と4回目の授業を振り返っていきたいと思います!

まずは3回目の授業から!今回のテーマは「アクセシビリティ」についてです!

課題:ビジネススキルが学べる動画視聴アプリ
・動画一覧
・動画詳細
・全画面視聴モードの画面
の3つの画面を課題として提出しました。

今回は、まずはじめに似たようなアプリを3、4個ほど見て、「いいな!」と思ったものを参考に、前回の反省も踏まえてガイドラインに沿うように気をつけながら作成しました。

アクセシビリティ

アクセシビリティとは、情報やサービスのアクセスのしやすさのこと。
サービスをデザインするにあたって、高齢者やハンディキャップを持つ人などあらゆる人が、どのような状況においても情報にアクセスできるようにしなくてはいけません。

アクセシビリティには、W3C(Web技術の標準化を行っている団体)が定めている4つの原則があります。

アクセシビリティ:4つの原則

1.知覚可能 - 情報及びユーザインタフェースコンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
これは、利用者が提示されている情報を知覚できなければならないことを意味する (利用者の感覚すべてに対して知覚できないものであってはならない)。
2.操作可能 - ユーザインタフェースコンポーネント及びナビゲーションは操作可能でなければならない。
これは、利用者がインタフェースを操作できなければならないことを意味する (インタフェースが、利用者の実行できないインタラクションを要求してはならない)。
3.理解可能 - 情報及びユーザインタフェースの操作は理解可能でなければならない。
これは、利用者がユーザインタフェースの操作と情報とを理解できなければならないことを意味する (コンテンツ又は操作が、理解できないものであってはならない)。
4.堅牢性 - コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢でなければならない。
これは、利用者が技術の進歩に応じてコンテンツにアクセスできなければならないことを意味する (技術やユーザエージェントの進化していったとしても、コンテンツはアクセシブルなままであるべきである)。

色の見え方の違い

今回勉強になったのは、この「色の見え方の違い」です。
画面下部のタブバーですが、今自分がアクセスしているところがどのタブなのかを色をつけて表現すると思います。
でも、色だけで表現すると、色弱の人は認識できない色があるので、今自分がどこにいるのかわからなくなってしまう人もいます。

画像1

なので、色だけに意味付けを頼ることはせずに、
→ 画面上部にタイトルを入れて、今どこにいるのか分かるようにする
→ 目印をつける
などの工夫をして、アクセシビリティに配慮していきます!

画像2

また、色の見え方の違いを可視化できるStarkというプラグインをメンターに教えてもらいました。
これを使えば、どんなふうに見えているのかがわかります!

Figmaをこのスクールを始めてから使い始めたのですが、プラグインがたくさんあって、とっても便利なことを知りました〜!!

ユーザーにどういう体験をして欲しいか?

課題を制作していて悩む時は大体「これってこの表現の仕方であっているのかな…?」というところです。

例えば今回の課題では、音声と映像のオンオフが切り替えられるようにして欲しい、という要望があったので、動画詳細画面で再生を一時停止した時にオプション設定ボタンを押して、モーダルで表示するようにしたけれど、
「一時停止時にアイコンで切り替えられる方が良かった?」とか、
「全画面表示の時に、戻るの表現の仕方っていっぱいある(<とか、🔽とか、×とか)けど、どれがいいのかな?」とか、悩む場面がいっぱいありました。

画像3

でもそれは逆に「ユーザーにどういう体験をして欲しいの?」という自分への問いになる、ということもわかりました。
いろいろな表現があるのは、どんな体験をして欲しいか、それぞれの意図がそこにはあるからで、それを読み取れるようになれば、さらに成長できるな!!と思いました。

なので、自分がよく使うアプリをただ「使う」だけでなく、「これってなんでこういう動きなんだろう?」という視点で見てみるようにすると何か分かることがありそうです!そういったことも今後アウトプットしていきたいとおもいます!

ユーザビリティ

ここからは第4回目の授業内容の振り返りです。

課題:フード宅配サービスアプリのクレジットカード登録
・クレジットカード一覧(カードは2枚登録されている状態)
・クレジットカード登録画面(画像認識)
・クレジットカード登録画面(手動入力)
これらをつなげて動くよう、プロトタイプも作成しました!

今回も、まずはじめにアプリを何個かみて、動きや、表現の仕方などを探ってから作成しました。
【今回参考にしたアプリ】
・Walletアプリ
・PayPay
・UberEats

ユーザビリティの定義(ISO 9241-11)

ユーザビリティとは、“特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い”。と定義されています。

有効さ(effectiveness): ユーザが指定された目標を達成する上での正確さ、完全性。
効率 (efficiency): ユーザが目標を達成する際に、正確さと完全性に費やした資源。
満足度 (satisfaction): 製品を使用する際の、不快感のなさ、および肯定的な態度。
利用状況 (context of use): ユーザ、仕事、装置(ハードウェア、ソフトウェア及び資材)、並びに製品が使用される物理的及び社会的環境。

ユーザーが、簡単に迷わず操作ができるようにするにはどうすれば良いのか、目的地までにどういう経路を辿るのか、それがわかりやすくなっているかを考慮して画面を作っていきましょう!っていう感じに捉えました!私は!!

ナビゲーション

今回授業を受けていて感じたことは、ユーザビリティを考える上で(というか、UIデザインを考えるにあたって)アプリのナビゲーションについてもう少し理解を深めていかないといけないな、と思いました。

・階層的ナビゲーション
目的地に到着するまでに画面ごとに一つの選択を行っていく。
別の目的地へいくには、一番上まで戻って選択し直す。
今自分がどこにいるのかがわかりやすい。
【このナビゲーションが採用されているもの】
設定、メール

画像4

・フラットナビゲーション
タブバーなどを使って、複数のカテゴリを切り替える。
途中で別の目的地へいくこともできるし、また元の場所に戻ってくることができる。
【このナビゲーションが採用されているもの】
AppStore、音楽アプリなど。
下部のタブを切り替えてそれぞれのカテゴリへ移動できる。
音楽の再生中も、別のカテゴリの操作が可能。

画像5

・コンテンツ主導またはエクスペリエンス主導のナビゲーション
コンテンツ内を自由に移動するか、コンテンツ自体がナビゲーションを定義する。
【このナビゲーションが採用されているもの】
ゲーム、Book、没入型アプリという。

画像6

このナビゲーションの構造が複数混ざり合ってアプリはできている。
ユーザーが求めている情報へたどり着くためには、どのナビゲーションを使用すればわかりやすいか、迷わないかを考える。

アプリを見る時、今度からはどういう構造になっているのかをみてみると、もっと深くそのアプリを理解できるのかな!と思いました。


どこまで作り込むか

今回の授業で確かに!!と思った所は、クレジットカード一覧画面の見せ方です。
私は、Walletアプリの表現の仕方が良いな!!と思ったので、それに似せて作ったのですが、他のデリバリーアプリなどはもっとシンプルな表現なんですよね。

画像7

私は「クレジットカード登録画面」を様々なアプリをみて良いところを真似てみたけど、アプリ本来の利用目的によっては、クレジットの一覧画面が重要なものと、それが本来のサービスの目的では無いのとで、見せ方が違うのがわかりました!

どこまで作り込むか、の問題は、きっと実務になったらいろいろな制約事項が出てくるのだと思いますが、メンターに「迷ったら、複数パターン作ってみるといい」と教えてもらいました。今は勉強中なので、次からは迷っていた案も出せるだけ出してみようと思いました!そのほうが勉強にもなる!

1ヶ月を振り返って

受講をはじめて1ヶ月が過ぎました…あっという間です。
授業は毎回内容が濃く、まとめるのが長くなってしまうのですが、自分自身の振り返りも含めて、noteでこうしてアウトプットすることはとてもいい勉強になっています。

もっとたくさんのアプリを見て、そのデザインの「意図」が少しでも分かるようになりたいです!
そういうアウトプットも今後はしていこうと思っています!

それでは、長くなりましたが、また次回もよろしくお願いします!!!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!励みになります!
14
デザインを仕事にしたい。お笑いが好き。デザインでお笑いに関わる仕事をしたい。

こちらでもピックアップされています

アウトプット
アウトプット
  • 518本

ゆめみの【勉強し放題制度】を活用したアウトプット、その他に、メンバーが自分自身で学んだことをまとめています。 ゆめみの独自制度である「勉強し放題制度」は、あらゆる学習費用を100%会社が負担します。書籍、社外セミナー、実験機材、認定資格の受験など、成長のためのコストは会社が全て負担。また、業務時間の10%は自由な活動に使うことができます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。