[モバイルUIデザイン]ふるまいって何

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイナーの たなか ゆきこ です。

モバイルUIデザインについて、今度は『ふるまい』に迫ろうと思います。

ふるまい

初めて聞いた時、謎単語だと思いました。 ふるまい【振(る)舞い】: 1. ふるまうこと。動作。行動。挙動。 2. もてなし。接待。饗応。 引用元:http://www.weblio.jp/ モバイルでの『ふるまい』とは動作、挙動ですね。教養が試されますね。

『いつもの』は読んどきましょう

iOS、 Android それぞれの特徴が記載してあります。iOSのアプリを触っている、Androidを触っているというというユーザーの無意識についてお勉強するため、標準アプリを触りまくってみるというのもおすすめ。

同じ意味をなすもの

気をつけるのは、ガイドラインの他に、同じ意味になるものを違う挙動にするのは、ユーザーが混乱するので、やめた方がいい。
というユーザー目線です。『デザイナーはユーザーの代弁者』と言われるように、開発者側ではなく、ユーザーがいかに使いやすいかを求めることに意識を持っていくのが良いと思う。

例えば「閉じる」

同じアプリ内で、ある画面は右上に文字「閉じる」をタップで閉じるのに、別画面が左上に×マークで書かれている場合は、『ふるまい』が違います。

ui_design_behavior01

使う人(=エンドユーザー)は、最初に「右上で閉じる」で閉じると無意識に学習している。
次に「左上に×」が出ると「閉じる」を探してしまい「使いにくい」と思うのではないかな。

Android のBACKボタン

ui_design_behavior02

iOS にはないので iOS ばかり製作していると忘れがちになる Android の BACK の挙動も考える必要がある。
ついででUPについても勉強しとくと、情報の最適な配置などに対してものすごく考えたくなります。多分情報設計の領域です。

https://developer.android.com/design/patterns/navigation.html

基本の振る舞い

  • 画面遷移
  • フローティング ウィンドウ(ダイアログ、ポップアップ)を閉じる
  • コンテキスト アクションバーを閉じて、選択したアイテムのハイライト表示を解除する
  • 画面上のキーボード(IME)を非表示にする

基本にのっとって遷移を考えるのが、ユーザーにはやさいしいです。 公式アプリが上記にのっとって製作されているので、その仕様を学習しているからですね。

まとめ

デザイナーは、おそらく視覚優位の人(聞いたほうがわかる人、文書を読んだほうがわかる人、絵で見たほうがわかる人、触ったほうがわかる人など優位の感覚がある)が多いので、意外と文書アレルギーが多いイメージですが、基本は読んだがいいと思います。
また、わからない場合、協働するエンジニアさんにこの挙動は存在するか?という問いを投げるのもありかなと。
できたら、直接ユーザーになる人に触ってもらって観察してみると、どこで困っているのか観察できるかもしれないですね。