見出し画像

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

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

第2回目の授業は、「フォント、ラベル設計」でした!

今回の課題は、「今日何の薬を飲めば良いかわかるアプリ」ということで、
・今日のお薬が見れるページ
・お薬を登録するページ
・登録時にキャンセルしたときの動作
の3つの画面を課題として提出しました。

普段アプリを使っている側だと特に意識したことがなかったけれど、実際に作ってみると、「この時のテキストはどういう表現がいいんだ?」ってなりました。
それでは、授業内容を振り返っていきたいと思います!!

ラベル設計

Appleのデザインガイドライン(Human Interface Guidelines)には、「アプリ内のテキストは短く簡潔に」と書いてあります。

●ACBレンズ

その他にもラベル設計の考え方として、「ACBレンズ」をメンターに教えてもらいました。

Accuracy: システムの挙動を「正確」に書き出す
Clarity: 「明確」に書き直す(直接的にシンプルに)
Brevity: ACができた上で「簡潔」に洗練させる

とにかく「簡潔に」が大事。

●ユーザーの言葉で喋る

当たり前かもしれませんが、単語や言い回しなど、ユーザーが分かるように設定することが大切。アプリを使うのはユーザですものね。専門的な用語がないか確認する。

アラートとアクションシート**

**

今回の課題で、登録時のキャンセルページの作成もあったのですが、その時にどういう見せ方にするのか、なんとなく私は↓画像のイメージで作りました。

これは、「アラート」という見せ方で、実際にガイドラインに書いてある使い方はちょっと違いました。

アラート:ユーザーが意図せずに発生したイベントに対してユーザーがどう対処するのか判断を仰ぐためのもの

ということなので、今回の場合、キャンセルボタンはユーザーが押しているのだから、意図せずに発生したイベントではないからアラートを使用するのは間違い、ということが分かりました。

なんとなく、ダメ、絶対。

また、アラートのキャンセルの位置は選択肢の左側というのもガイドラインできちんと決まっているんですよ。

なんとなく、ダメ、絶対!(大事だから2回言う)

今回の場合は、↓画像の「アクションシート」で作るのが適切なようです。

アクションシート:ユーザーに2つ以上のアクションを提示して、判断を仰ぐもの。必ずキャンセルに相当するボタンを一つ持っていて、選択肢はキャンセルを含め二択以上になる。ユーザーはいつでもアクションの実行を中断できる。危険なアクションを実行するボタンには赤を使用し、アクションシートの上部にこれらのボタンを表示させる。

名詞→動詞の操作手順
私たちがモノを買うときは、「商品を選ぶ→お金を払う」が基本的な流れになっている。
アプリの操作順序もこれにならって、「名詞」→「動詞」が基本的な操作手順になる。
ユーザーが何かしらを「選択」する→それに対してのアクションを選ぶようにすることで、ユーザーは自分の思っていた通りに操作できていると感じる。

動詞→名詞の順番だと、操作がスムーズにいかなかったり、複雑化したりする。

コレクション(一覧)とシングル(詳細)

コレクション:一つのビューの中に同等のオブジェクトが並んでいる状態
シングル:一つのビューで一つのオブジェクトを表示する

多くのアプリケーションは、このコレクションとシングルの画面を行き来して成り立っている。
自分が今作ろうとしているものが「コレクション」なのか、「シングル」なのか。
コレクションに必要な情報は何か、シングルに必要な情報は何か…など、情報を一つ一つ整理していくことでUIが出来上がっていくのだな、と感じたし、やはりデザインは「なんとなく」でできるものではないのだな、と再認識しました。

まとめ

UI/UXを知るには、まずはデザインガイドラインをものにしなければ、と強く感じました。。。
Human Interface Guidelines英語なんですよね。それで最初躊躇していたのですが、Google翻訳で一発で翻訳できますからね。あんまり関係なかったし、実際めちゃくちゃ大事だなーと。これが頭に入っていないと、お話にならないと言いますか。。。ここに大体の答えが詰まってると感じました。
全部をすぐに覚えるのは難しいので、迷ったり、悩んだりしたときにまずここに戻ってくることにします。

私はHuman Interface Guidelinesを「ふるさと」と呼びたいと思います。(ちょっと意味違う笑)

1回1回の内容が濃すぎるので、今回も長くなってしまいました…
引き続きアウトプットしていきますので、よろしくお願いします!!!

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

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

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

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

コメント (2)
Google 翻訳よりもDeepL翻訳というサービスの方がだいぶ精度がいいらしいです。

https://www.deepl.com/translator

HIG自分も翻訳して読もうと思いました。
そうなんですね!!情報ありがとうございますー!!
Google翻訳、確かにところどころ「ん?」とはなりました。笑
こちらも使ってみますね★
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。