hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

UI上のラベルや説明文をどこにどれくらい書くべきか

インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。
こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。
アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。

ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。

ブログのサイドバーから、説明文を消し去ると、フォームに入力する情報としては変わらなくても、その情報が何で、いつ使われるのか、利用者にとってはわからなくなるであろうことがイメージできると思う。標準状態がどうなっていて、何をするとどうなるのか、という説明は、ヘルプをじっくり読むとわかるかもしれないけど、その場に書いてあると、迷わず使える。

f:id:hitode909:20220113231218p:plain:w300f:id:hitode909:20220113232638p:plain:w300
編集画面のサイドバーと、説明文を取り去ったもの

あとは、ブログチームで一緒に仕事してたデザイナとは、ここにこれくらいの説明を盛り込まないと、使う人が混乱しそう、みたいなことを一緒に考えたり、ここの仕様は、これかこれなら実現できるけど、こっちの仕様は複雑すぎるよね、みたいなことを話したりできていた。おもてなしをどこまで作るかという観点を学べたので、良い経験だった。

追記

デザイナ氏に、どうやって習得しましたか、って聞いたのでメモ。

  • 仕事しながら習得していった
    • 上記編集メンバーと一緒に仕事したことで鍛えられた
  • 文量はスマホの画面サイズを基準にして考えるとうまくいきやすくて、iOSやAndroidの設定画面を見ると参考になる
  • 挙動が難しいときに説明を書くのはできているけど、何に使うと便利か想像しづらい設定にも説明がほしいと考えている


何に使うと便利、という説明がほしいのはたしかに、と思って、無印良品の商品説明とか読んでると、こう使えって書いてあるのでイメージしやすい。裁断ラインつきタオル!、じゃなくて、足ふきマットなどに再利用すると便利であるって書いてある。

使い古した後は、足ふきマットなど別の用途に再利用しやすいよう、長辺が3等分される裁断用のラインを2本入れました。

パイル織りその次があるバスタオル 70×140cm・オフ白 | バスタオル 通販 | 無印良品