デカスマホで使いづらいアプリにありがちなデザインと対処法

  • author satomi
  • X
  • Facebook
  • LINE
  • はてな
  • クリップボードにコピー
  • ×
デカスマホで使いづらいアプリにありがちなデザインと対処法

スマートフォンはデカくなっても手は元のまんまです。親指で快適に素早く使うにはデザインはどう工夫すればいいの? 注意すべきポイントをまとめてみました。

親指操作をベースにデザインする

デザインの専門家Steven Hooberさんが携帯1,333台の使用状況を調べてみた結果では親指操作の人は全体の75%、片手操作の人は49%でした。

日本でも片手の人が多いですけど、大型画面(4インチ以上)だと一番上にコントロールバーがあったりすると親指が届かなくて大変ですよね。

141029Designing_for_HugeSmartphones_b
親指で快適に届く範囲(緑)、まあまあ届く範囲(黄緑)、片手持ちや親指操作では届きづらい部分(黄)

たとえば自分もアマゾンのMusicアプリで每日苦しんでます。選曲のメインコントロール(頻繁に使う)が左上の隅(たぶん最悪の配置)にあるので、デカスマホは真ん中でいったん持ち直すか、両手操作に持ち替えないと指が届かないんですね。でもこれはちょっとした工夫で解決できるんですよ。

141029Designing_for_HugeSmartphones_c
片手の自然な構え方。これだと左上のメインコントロールは届かない。

OSレベルの解決策

Amazon Musicのような既存アプリのために、画面トップに配したコントロールまで指が届くようにできるシステムレベルの機能がモバイルOSには備わっています。アップルでいう「Reachability」ですかね。

Reachabilityでは、ホームボタン2度押しで画面の半分までストンと落ちてくるので上まで親指が届きます。リーチできないところはなくなる、全部リーチャブル…という神機能。

よくできてる機能なので、それを使えば済む話ですが、これだと1回のタップで済む操作が3回タップになってしまうんですよね…。

141029Designing_for_HugeSmartphones_d
(左)ココのボタンをタタンとダブルタップすると…(右)コントロールにも楽に指が届く

それにReachabilityは自動タイムアウトもあるし。ダブルタップで上半分が指先にきますよね。で、次の操作をモタモタ考えてるうちにシュルルル~と元位置に戻ってしまうんです。しょうがないのでまたホーム画面をダブルタップ。シュルルル~。タタン、シュルルル~…と指ダンスを続ける虚しさが。もっとほかに方法があるんじゃないかなあって思ってしまうのです。

エッジスワイプのジェスチャーを活用する

左上の隅まで親指を動かすのはひと苦労ですが、画面の下の方を左からスワイプするのはそんなに大変じゃありませんよね? この「エッジスワイプ」のジェスチャーにコマンド割り当ててしまえばいいんです。その方が親指圏外のコントロールに指を伸ばすより、ずっと操作は簡単です。

141029Designing_for_HugeSmartphones_e
左からスワイプでメニューを表示(左)。まだ大事なオプションは上にあって押しづらい(右)

ただ、こういうメニューの開き方は目に見えないので、意識的に探さないと気づかないところが難点です(ジェスチャーコントロールはなんでもそうだけど)。つまりジェスチャーで操作できることがわかっていて、いざ必要な時にそれを思い出せないと使えません。なのでやっぱり画面トップの目に見えるメニューを押しのけて代役というのはムリ。ですが、プラスアルファで使えば主役を補うことはできます。

このエッジスワイプで改善できるのは、片手もちでメニューを呼び出す部分だけです。残る課題はメニューの中のコンテンツへのアクセスですが、それは次の対処があります。

大事なものはボトムに置け

よく使う機能を片手持ちや親指操作で楽に操作できるようにしたい。そのためにはボトムのコントロールの配置も再考ポイントですよ。なんてったって指が届きまくりな領域ですからね。ここを改善すればリーチャビリティ(指の届きやすさ)のみならず、他の大事なメトリックスも改善できます。

フェイスブックが最近実験的に、iOSアプリでボトムにタブバーを置いてみたところ、ユーザーのエンゲージメント、満足度が改善し、なんとスピードまで速く感じられるようになったんだそうですよ?

141029Designing_for_HugeSmartphones_f

141029Designing_for_HugeSmartphones_g
これだとメニューコントロールも楽に親指が届く(左)。大事なオプションはボトムに!(右)

Amazon Musicアプリの場合、メニューを画面のボトムに置いて、尚且つメニューの中のオプションも並べ替えて、一番よく使う選択肢がボトムにくるようにすればいいんです。これでメニューもコンテンツも素早くアクセスできます。

アクションボタンはフロートさせよう

複数のOSで通用するデザインのソリューションもたくさんありますが、現場ではOSごとの違いを念頭に置いてデザインする局面もあります。

たとえばグーグルのAndroid OSでは画面のボトムはシステムのナビゲーションバーにとられてますよね。つまりボトムにコントロールボタンを置くと、システム全体のアクション実行ボタンとすごく近いので、押すとこ間違えちゃう問題があります。Androidのガイドラインでも「ボトムにはタブバーを置くな」って明記してるぐらいです。

でもグーグルが最近出したマテリアルデザインでは、アクション実行ボタンをフロート表示できるソリューションが加わりました。フロート表示のアクションボタンは、特殊タイプのアクション誘導機能で、残りのUIから飛び出て見えます。ふつうはナビゲーションコントロールで使うことはあんまりないんですが、Amazon Musicアプリの場合は、ナビは本当によく使う機能なので目立たせてもいいと思いますよ。

141029Designing_for_HugeSmartphones_h
(左)フロート表示のメニューコントロール。(右)タップするとこんな風にメニューが展開する

*本稿はグーグルのプロダクト・ディレクター、Luke Wroblewskiさんのブログから許可を得て再掲しました。Lukeさんはツイッターが2011年に買収したBagcheckの共同創業者兼CPO、グーグルが2014年に買収したPolarの共同創業者兼CEO。その前はベンチマークキャピタルのEIR、米ヤフーのチーフデザインアーキテクト、eBayのUIデザイナー総括、世界初の汎用ブラウザMOSAICを生んだ米国立スーパーコンピュータ応用研究所(NCSA)上級インターフェイスデザイナーを歴任しました。

Luke Wroblewski - Gizmodo US[原文

(satomi)