その先へ

setohの色々殴り書き

FloatingActionButtonはなぜ画面右下か

mixiグループ Advent Calendar 2017 4日目の記事です。

Qiitaに書こうかと思っていましたが、完全にポエムになったので自分のブログに書きます。長いです。

 

時間がない人向けに結論だけ

・人間の目線は画面左上から右下に動く

・なので、左上→右下に目線が流れる動線にした方が自然

・FABには次の画面に繋がったりするようなアクションしか置いてはいけない

・FABを画面右下に配置すれば画面全部を見た後に次の画面に行けて自然な動線になる

 

自己紹介

@seto_hi です。株式会社ノハナでAndroidエンジニアをやりつつアプリのUIデザインを考えたりしています。

Material Designが好きで、DroidKaigi2017でMaterial Designに関する発表をしたり、知り合いからはMaterial Design警察と呼ばれたりしています。

 前提

僕は「Material Designはプラットホームである」という考え方に賛同しています。Material Designのガイドラインに書いてあることがすべてではなく、背景を理解してガイドラインに書いていないことを行ってもいい(もっと言えばガイドラインを破ってもいい)という考えです。

 

本題

FloatingActionButton(以下FAB)がなぜ画面右下にあるかについて本気出して考えます。厳密に言うとLTR言語ではFABが右下にあり、RTL言語ではFABが左下にある理由を考えます。

なお、今回はAnchorありFABについては言及しません。

右利きが操作しやすいから右下？

世界に右利きの人が多く、画面の右下にボタンを置けば一番操作しやすいからという考え方はあると思います。

しかし、RTL言語の方向けの画面ではFABは左下に配置されます。RTL言語を使う国でも右利きの人が多いらしく、FABを左下に配置することは操作性の低下に繋がります。

RTL向けのUIでは左右反転するものとしないものがあります。操作性だけを考えるならFABの位置も反転しなくても良かったのではないでしょうか？

これを考えると操作性のため「だけ」に右下に配置しているのではないような気がします。

(ユーザーの大半を占めるLTR言語の人に操作しやすいという観点も当然入っていると思います)

Androidの世界と右と左

Androidの世界では画面の左右の配置に意味があります。

右は未来・肯定などを表し、左は過去・否定などを表します(RTLの場合は逆)。

例を挙げるとBackボタンやHomeAsUpは画面左にあり、ダイアログのボタンは右側に肯定アクション、左側に否定アクションを置くことになっています。 

なぜ右が未来・肯定、左が過去・否定

これは人間の目線の動きに由来していると考えています。

人間の目は文章を読むときにZ字型に目線が動くと言われています。アイコン付きリストの場合には逆N字型と言われています。

画面の最右に次の画面への動線を置くと、目線が左から右に進んだ先で動線にたどり着くので自然な体験になります。

肯定的な内容は次の画面へ進む動線になることが多く、否定的な内容は前の画面に戻る動線になることが多いです。

このような理由から、「右が未来・肯定、左が過去・否定」という世界になったのだと思います。

FABのガイドライン

 FABのガイドラインには、ボタンに置くべき操作についての記載があります。

雑にまとめると、

・ポジティブなアクション(新規作成、お気に入り、共有、Navigate、Exploreなど)は置いて良い

・マイナーだったり破壊的なアクション(削除、エラー、具体的でないアクション、操作系)は避けるべき

となっています。

これとAndroidの左右の話を合わせると、FABは画面右に配置することが正しいという気持ちになりました。

 

結論

・人間の目線は画面左上から右下に動く

・なので、左上→右下に目線が流れるUIにした方が自然

・FABには次の画面に繋がったりするようなアクションしか置いてはいけない

・FABを画面右下に配置すれば画面全部を見た後に次の画面に行けて自然な動線になる

 

記事は以上です。

 

蛇足

色々とUIを考えていくと、UIに関する疑問が湧いてきました。

・NavigationDrawerの呼び出しボタンは画面左上だが否定的な内容ではない

　・左上にバーガーメニューを置くのは慣習になっていますが、実はMaterial Design的ではないのでは？

・Toolbarの右部分に表示されるActionMenuに操作アクションを入れることは、FABのアクションの制約と同じ理論で考えると良くないことでは

・メールなどの一時保存ボタンはメールの作成画面を閉じることになるので、画面左側に配置すべき？

このあたりの議論をしたい方、答えを知っている方、是非お声がけいただきたいです。

 

以上！いいポエムが書けました！

DroidKaigiの発表についてつらつらと

日曜の昼下がり、みなさんどこでどのようにお過ごしでしょうか？

僕は自宅でConstraintLayoutについてひらすらに調べ続けています。

 

先週会社のブログで書いたとおり、DroidKaigi2018に採択されました。

「詳解 ViewGroupのレイアウト内部実装」を話します。

blog.nohana.co.jp

会社のブログにエモいことは書きたくなかったので、自分のブログで色々書きます。

CfP投稿

DroidKaigi2017では50分枠で登壇したので、今年は30分枠*2で計60分話すぞ！と思っていました。

4月くらいから何で登壇するかなーと考えつつ、CfP応募が開始された日からガッっと文章にしていきました。ちょうどiOSDCの日だったので、休憩時間はずっとCfPを書いていた気がします。

最終的には4本書き上がったのですが

・自分が発表したい内容

・自分の得意分野

・採択されそう

という軸で考えて、2つだけを応募しました。せっかく頑張って書いた文章を捨て駒にするのは悲しいかなと。

ちなみにボツにしたのはStyleとThemeまわりの話とCanvasの話です。不採択になったMaterial Designの話も含めてどっかで消化したいですね。

発表のタイトルはかなり大事だと思っているのですが、ボツにしたやつはいいタイトルが浮かばなかったこともボツにした一因です。本当にCfPの内容について理解していればいいタイトルも浮かぶはずなので。

採択/不採択

朝起きてTwitterを見ていたら採択不採択の話があったので急いでメール見ました。

不採択のメールから読んで、「クソが！！！」って叫びました。悔しかったです。今でも悔しいです。

その後に採択のメールも読みましたが、とにかく不採択の方が悔しかったのであんまり覚えてないです。

完璧なCfPを出したつもりではいましたが、見返してみるともっと書けたのではという気持ちがあります。来年はもっと実力をつけて完璧に採択されたいですね。

ちなみにその日は夢でもDroidKaigiに不採択になる夢を見てました。正夢ですね。

発表準備

気持ちを切り替え、採択になった日の夜から始めました。

今回はまず調査から始めるので、今はそのフェーズです。

FrameLayoutとLinearLayoutのコードは昔を読んだことがあったのでスッと終わりました。今はConstraintLayoutと戦っています。かれこれ10時間くら戦ってますが、あと50時間くらい戦いそうです。

 正直DroidKaigiじゃなくて今すぐ内部実装について聞きたい気持ちです。ソース公開して欲しいです。

調査内容のメモが既に1万文字くらいになってしまい、さすがにDroidKaigiでは話しきれないのでこれもどこかで消化したいです。

 

11月中に調査を終えて、12月中にスライドに落とし込んで、1月に発表練習＋ブラッシュアップという流れでいきたいと思っています。

普通に話すと50分かかることを30分に凝縮して発表することが今回の目標です。スライドは前回は50分で41枚でしたが、今回は30分で80枚くらいになるんじゃないかと思ってます。話す内容が違うので伝え方も前回と変わってくると思います。ご期待ください。

あんまり対外発表に慣れていないので、工数を使うことによってプレゼンの質を上げていきたいと思っています。手を抜いて質の低い発表をするのはお金を払ってカンファレンスに来てくださる聴衆の方々に失礼だと思うので。

さいごに

発表内容に興味がある方は、勉強会などでお目にかかった際にでも「興味あるよ！」と言っていただけると嬉しいです。みなさんのご意見によって発表の対象ユーザーが変わっていくと思います。

やっていくぞ！！！

UIデザイン勉強のために読んだ本

 ということなので、アプリのUIデザインを勉強するために読んだ本を紹介します。

もう少し多くの本を読みましたが、今回はオススメのものだけを。文庫本から分厚い本から色々あります。

 アフィリエイトとかはないので安心してお読みください。

心理学(インターフェース系)

・インターフェースデザインの心理学

・続・インターフェースデザインの心理学

・UIデザインの心理学

題名には心理学とありますが、人間の行動特性についてよく学べます

心理学(学問系)

・脳は、なぜあたなをだますのか - 知覚心理学入門

・色彩心理学入門 - ニュートンとゲーテの流れを追って

人間の視野特性や色をどう認識してるかなどがよくわかります

デザイン系 

・ノンデザイナーズ・デザインブック

デザインをよくするために押さえるべきポイントが学べます

Material Design系

・ANDROID USER INTERFACE DESIGN

Material Designの話とカスタムViewの実装について詳しく書いてあります

ユーザー体験系(基礎)

・誰のためのデザイン？

・ユーザビリティエンジニアリング言論

・マイクロインタラクション -UI/UXの神が宿る細部

ユーザー体験についての基礎が学べるような本です

ユーザー体験系(デザイン)

・失敗から学ぶユーザーインターフェイス

・「行為のデザイン」思考法

・融けるデザイン

・心を動かすデザインの秘密

「使いやすさ」とは何かということについて考えさせられる本です

改善系

・インターフェースデザインの実践教室

・UXデザインのやさしい教本

実際のプロダクト改善に使っていけるような本です

 

最近本読んでないなーと気づいたので明日から読書再開します

AndroidエンジニアがiOSDC2017に参加してきた

2017 9/16~9/18に開催されたiOSDC 2017に参加してきました。
iOS経験の浅い僕でもとっても楽しめました。

なぜ参加したか

参加募集の時期にちょうどiOSをやっていたからです。
今年の5月〜8月中旬くらいまでAndroidと兼任でiOSをやっていました。
今はAndroid専任に戻りましたが、たまには違うコミュニティの勉強会に参加するのもいいかなーと思って参加しました。

楽しめたか

楽しめました。間違いないです。
iOSの話でもUIや設計などはAndroidに生かせますし、
Swiftの話はKoltinに生かせますし、
エモい話はそのまま生かせるので十分楽しめました。
Kotlinの話もあったりMaterial Designに触れた話題もあったりしてAndroidの経験も生かせました。
iOSの開発経験が全くなかったらまた違ったのかもしれませんが、
少しでも触れたことがあったことによって楽しめたと思います。

運営の方も盛り上げることを意識されていたようで、
iOSDCではLTの時に無限にビールが出てきたり、懇親会のビールの品揃えが素晴らしかったり、そちらの面でも楽しませていただきました。

DroidKaigiと違うなと思ったこと

OS内部に近い実装の話が少ないなと思いました。
AndroidはAPI仕様が複雑だったり、OSのコードが公開されていることが背景にあるのかなと思いました。

発表の時間もDroidKaigiは30分or50分ですがiOSDCは15分or30分で、しっかり聞くかサクッと聞くかという違いがありました。
LTもかなりの本数があったので、発表はサクッと聞いて詳しいことは登壇者と直接話すスタイルなのかなと思いました。

運営の姿勢(目指しているもの？)が違うなと感じまして、
DroidKaigiはシュッとして大人な運営という印象ですが、iOSDCは祭りだー盛り上げるぞーという勢いを感じました。

何が良い・悪いではなく、みんなちがってみんないいと思います。

最後に

iOS経験の浅い自分でもiOSDCは楽しめました。
今年はどちらかというと楽しませてもらったような気分を感じたので、 来年は登壇するなりスタッフをやるなりで楽しませる側に行けたら良いなと思っています。 あとAndroidエンジニアの人はもっとiOSDCに来たらと良いと思います。

来年の2月にDroidKaigi2018がありますが、 Android経験が少しあるiOSエンジニアの皆さんでもDroidKaigiは楽しめるのではないかと思います。
今年も幅広い内容のセッションがあると思うので是非参加されると良いと思います。
iOSDCの休憩時間はずっとDroidKaigiのCfPを書いていたので、今年も全力で発表したいと思います。

最後になりますが、iOSDCの運営のみなさん、楽しいカンファレンスをありがとうございました！!

今期の勉強

DroidKaigi以降、リフレッシュしていたり体調を崩していたりしてあまり勉強できていなかったのでGWから勉強を再開していく。

Android

JavaっぽいコードをKotlinで書くことはできているけど、Kotlinっぽいコードがまだ書けていない気がするのでひたすら手を動かさねばという状況。 Coroutinesまわりも今のうちに理解しておいて1.2がリリースされたらｶﾞｯとやっていきたい。 Rxは本を買ったのでGWで読んで本質を理解したい。 UIテストは今期こそちゃんとやる。 設計も色々理解が足りないので、とりあえず手を動かしてみる。

iOS

iOS8の頃に3ヶ月くらいやっていたが、またやることになった。 当時は強制的にやらされたしあまり覚える気がなかったが、今回は自主的にやるししっかりと理解するつもりでやる。 社内のSwiftの読書会に出ていたので最低限はSwiftのコードも読めるし、Xcodeと仲良く出来ればなんとかなるんじゃないと軽い気持ちでいる。 昨年度はMaterial DesignをやったのでHuman Interface Guidelinesも読み込んでみようと思う。 両OSのアプリが作れてデザインもできるエンジニアになったらしばらくは食いっぱぐれないでしょう。

英語

元々得意だったので読むだけなら苦労していなかったが、もっとちゃんとやろうという気持ちになった。 読めるが聞けないしゃべれないという状態なので、なんとか聞けるしゃべれる状態まで持って行きたい。 単語力が全くないのでまずは単語を勉強しつつ、podcastを聞きながらぶつぶつしゃべる方法を実践してみる。 来年の3月あたりにどういう状況になっているか楽しみ。

日本語

人よりも日本語に触れる機会が多かったので理解は深い方だと思っていたが、 文言を考えるときに軟らかくて一意で冗長でなくて..みたいな日本語をすぐに思いつかなくて苦労している。 相手にどう受け取られるのかを体系的に学びたいと思っているが、勉強法が全くわからない。 あと使いさばき辞典みたいなのも読み込んでみたい。

DroidKaigi2017で登壇しました

皆様DroidKaigi2017お疲れ様でした。 @seto_hiです。ブログはじめました。
「エンジニアが武器にするMaterial Design」という内容で登壇をしました。

speakerdeck.com

感想

  • ポジティブなフィードバックが多くて嬉しかったです
    • 聞いててつまらなかった層も一定数いるとは理解していますが、エモい話なので全員に受けるとは思っていません
    • 自社の悩みを相談してくださる方も多くて、何かしら参考になる情報を提供できていたら嬉しいです
    • もっと良いデザインの広め方などあったら教えていただきたいです
  • かなりはてブもしていただいたようでありがたい限りです
  • DroidKaigiはやっぱり最高だった！！
  • 登壇は最高だったので来年も絶対登壇したい！！！！

反省点

  • エンジニアの勉強会なんだからもう少し実装の話入れればよかった
    • エモいデザイン野郎という印象の人が多かったかと思いますが、エンジニアです
    • Viewまわりとかアニメーションまわりは多分そこそこ知見を持ってます
  • 心理学とか認知工学とかもかなり勉強したので、そのあたりの知見をもっと入れたかった
    • 100msの話とかそういう系の話
  • 最後の2週間で追い込み過ぎて体調を崩したは最悪だった
  • 断酒したけどあんまり意味なかった
  • オフィスアワーやアフターパーティーでちょっと上から目線な回答をしてしまった気がして反省しています

どんな感じで進めたか

忘れそうなので書き残します。
あまり登壇に慣れていないので、他の登壇者よりもかなり練習したのではないかと思います。

  • DroidKaigi2016に参加して、2017は絶対に登壇しようと決意する
  • 9月くらいにMaterial Designの話で出そうと決める
  • 10月のどこかでCFPを出す
    • 期限ギリギリじゃなくてやや早めに出した記憶
    • 内容の再編集の仕方がわからなくて焦った
  • 11/15 採択される
    • 講演希望のメールを即日返信する

ということで登壇が決まりました。
その直後に会社のPCが起動しなくなってデータが飛んだので色々と忙しくなりましたが、年末には落ち着きました。

  • 年末年始でプレゼンの流れを書き始める
    • スライド作る前に流れを書き出すと客観視できて良い気がします
  • 1月半ばからスライドを作り始め、1月末には初稿が完成
  • 手直しをしつつ、2月半ばから発表練習をはじめる
  • 2月末の時点でまぁ発表できるレベルになる
  • 3月一週目に体調を崩し、最後の木金土日をほぼ棒に振る
  • 3/7に社内で発表をするが、結構指摘を受ける
    • 2月半ばくらいで社内発表しておけばよかった
  • 3/8 スピーカーズディナーで喉を潰す
    • 当日もお聞き苦しい声で申し訳ありませんでした
    • まだ声が枯れてます
  • 3/9 初日参加後にスライド修正
  • 3/10 本番

という感じです。
本番はそんなに緊張することもなくできました。
このくらいの日程でやっていれば失敗することはないのかなと思ってます。

来年はMaterial DesignをMateiral Deisngにtypoしないように気をつけたいと思います。