logo header
logo header
logo header
logo header
  • 2016.12.21
  • UIUXデザイン

使いやすいスマホアプリのUIを設計する6つのポイント

スマートフォン
こんにちは、事業推進室の嶋田と申します。
本日は、スマートフォンアプリのUI設計について書きたいと思います。

その前に、「事業推進室」とは何なのか、少しご紹介をさせていただきます。

「事業推進室」という部署は「見積り」や「提案」を作る専門部署です。お客様から様々な案件の概要を伺い、それを実現するための企画提案を行っています。

ご提案する中で、現在動作している実サービスのUI再設計なども作ることがあるため、その際に意識している基本的なUIチェックポイントを、本日はご紹介しようと思います。


※ここでご紹介するチェックリストは「スマートフォンアプリ」のUI設計をする際に用いることを想定としています。
※iOSやAndroidのOS固有の文化や動作を含みませんのでご了承ください。

はじめに。デスクトップとスマホのUIの違い

デスクトップとスマホ
本題に入る前に、前提条件として抑えておくべきポイントがあります。

それは、デスクトップ用アプリやWEB画面の設計/デザインをした経験者が、スマホアプリの画面を設計すると必ず陥る罠が、無意識に「マウス」の使用を想定してしまうことです。

マウスはとても繊細な矢印で、細かな部分をピンポイントで示すことができたり、右クリックなんていうとても便利な使い方を兼ね備えています。

しかしスマホアプリでは、操作するのは単なる「指」。指が太い人は細かなボタンを押せなかったりします。(体験談)

そのことをふまえると、まずスマホアプリのUI設計においては

1)WEB画面のようになっていないか?
2)指で操作することを考慮した設計になっているか?

この2点を前提条件として最低限意識すべきです。

 
さて、いよいよ本題の、【使いやすいスマートフォンUIを設計する6つのポイント】 です。

1. シンプルか?

ムダな要素をそぎ落として、端的に

やりたいことを、どこまでもシンプルに。これが使いやすさの第一歩です。

情報(伝えたいこと)と、機能(やらせたいこと)を直観で理解させること。
1画面に情報(伝えたいこと)と、機能(やらせたいこと)を複数混在してはいけません。

具体的には、「1画面内で求めるユーザーへの動作は1つ」くらいのペースで設計することが好ましいと考えられます。

またそのペースで画面を作った結果、画面数が100を超えるようだったら、それは「アプリ」の機能として役割を持たせすぎの可能性が高いです。

2. 触りやすいか?

大原則として、OSで推奨されているサイズを守りましょう。

ユーザが操作する要素は、扱いやすいよう適切な間隔を置いて配置する。
タップ可能なコントロール部品には、約44×44ポイントの領域を与えてください。
引用元:iOS ヒューマンインターフェイスガイドラインより

想像も出来ないほどガタイの良い指を持つ人が世の中にいることを、忘れてはいけません。

デザインをしていく中で「あと少しここを切り詰めたらこの要素も入るのに」という場合、つい要素を小さくしてしまいたくなる気持ちもわかりますが、その結果、タップができなかったり、読めないコンテンツを作り出しては、意味がありません。

3. 目的達成までの手順は少ないか?

スマホの小さな画面上で何かを操作することは、多くの人にとってストレスで、できれば行いたくないものです。無駄な操作が増えるほど、ユーザーがそのアプリの使用を止めてしまうことは明白です。

「とにかく、ユーザーに操作させる」という前提をやめるべきと念頭に置くことが大事です。

技術や設計の工夫によって以下を実現し、目的達成までの最少手順を生み出しましょう。

・ステップ数を減らす
・タップ回数を減らす
・入力を減らす
・選択を減らす

例えば入力フォームではデフォルトで過半数が選択するであろう項目を選択済みの状態にしておいたり、あってもなくても良いような選択をさせるものを排除します。

4. 操作やコントロール要素に一貫性があるか?

普段スマートフォンを活用するシーンからいかに違和感をなくすかが、アプリの使いやすさに繋がるポイントです。

「これをタップするとこうなるだろう」その想像を超える動作を促すUIの場合、ユーザー側に学習コストが発生し、「操作がわからない」という状況を生み出します。

アプリの学習コストを下げるのに最も有効なのは、アプリの動作に各OSの推奨する基本動作の導入を行い、AppleやGoogleの提供する純正アプリの操作性と近づけることです。

その範囲を超えるオリジナルの動作が必要な部分については「操作の基本方針を持ち、ブレないこと」。
設計に携わる全メンバーが基本方針を共有して進めます。

また「コントロール要素に複数の意味を持たせないこと」も大切です。

例えば当初の設計では「会員情報の閲覧」だけを意味するアイコンだったものが、開発途中の機能追加などで「お問い合わせ」など他の目的まで追加されてしまうケースがあります。

しかも別の画面では、別の「お問い合わせ」ボタンが存在していたり・・・

UI設計においては、アプリ全体を俯瞰で見て一貫性があるかを常に意識するようにしましょう。

5. ユーザーを待たせてないか?

時計
・ロード時間を考慮すること
・待たせるときには状態を認識させる
・ロードしているときもユーザーを飽きさせないこと
(インジケータデザインや背景にロゴを置くなど)
  

6. やりたい動作を妨げていないか?

・時間の経過での動作を意識する(スクロール中はタブバーを隠すなど)

常に状態を表示しておく必要のないものは、操作している間は隠すなど、ユーザーの状態を詳細に切り分けて画面に配置するものをシンプルに選抜していくと、とても使い心地が快適になります。
 

まとめ

最後に、スマートフォンアプリの設計は、スマートフォンの画面の小ささ、操作性を考慮する必要があると思いますが、何より大事なのは「ユーザーの使いやすさ」を追求し、リリース後もユーザーの反応を見ながら最善を判断することが一番重要なことだと思います。

参考

スマホアプリのUI設計の基本は、こちらを熟読するところから!

Apple Developer
・ユーザインターフェイスのデザインのヒント
・iOS ヒューマンインターフェイスガイドライン

Google Developers JAPAN
Android アプリ品質ガイドライン

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!