Skip to content
Repro logo 72af329cc2da823ab70072e0c875dae3c655cb5a65a02e3e7a8a6e3d23c7152b
トレンド
iOS10のロック画面のUXを徹底分析!
2016/11/2
ホーム > トレンド > iOS10のロック画面のUXを徹底分析!
このエントリーをはてなブックマークに追加
Tweet
follow us in feedly

Contents

  • 1 新しいロック画面
  • 2 スワイプ地獄
  • 3 ロック画面でカメラを起動する-そして閉じる
  • 4 どうやったらウィジェットを起動できるのか-第1段階と第2段階
  • 5 ホームボタン押下によるロック解除 vs スライドによるロック解除
  • 6 まとめ

まるでiOSが「もう見やすくなくてもいいよね」と我々に言っているようです。

2007年の登場以来iOSのロック画面はとてもわかりやすいものでしたが、今では以前ほど見やすくはなくなってしまいました。そうなってしまったのはいくつか理由があります。

 

詳細を述べる前に本記事の概要について簡単にご紹介します。

 

  • この記事はAppleにいるデザインの匠たちを批判するのが目的ではありません。Appleのデザインチームの内部決定や制限事項について知っているわけではないのでデザインチームへの批判と受け取られかねない箇所もありますが、デザイナーやチームの批判ではなくデザインそのものの分析を目的とした記事です。
  • iOS10のロック画面は使いにくいので、その理由を分析した記事です。
  • (iOSのロック画面のわかりにくさは、)機能や目的が増えるほどユーザー体験をデザインするのは難しくなり、インターフェースはわかりにくいものになってしまうことが理解できる好例です。

 

新しいロック画面

ロック画面の変化は(たくさんの記事で書かれている)「ロックを解除する」仕様の変化だけにとどまらず、最新の通知、ウィジェット、そしてその他ロック画面上の使用方法も含みます。

スワイプ地獄

これを見てください。
image03

左:iOS10にはスワイプするものがたくさんある。右:iOS6のロック画面はシンプル

iOS10のロック画面にはユーザーがまだ確認していない各アプリの最新情報が小さく角の丸いダイアログとして並びます。

 

      1. 通知を右にスワイプする

iPhoneを起動して、その通知に対応したアプリを起動します。(過去のiOSとほぼ同じ)

      2. 通知を左にスワイプする

その通知のオプションを見ます。(”View”や”Clear”など)

      3. 通知以外の部分を右にスワイプする

ウィジェットに遷移します。

      4. 通知以外の部分を左にスワイプする

標準搭載のカメラアプリに遷移します。

      5. カメラアプリを右にスワイプする

ビデオ撮影モードに切り替わります 🙁

 

例えば、ユーザーがただロック画面のウィジェットを確認したいだけの時にこのようにスワイプのオプションが沢山あるとUXを低下させることにつながります。次のような状況は珍しくないはずです。

 
もし、ユーザーがロック画面のウィジェットを確認しようと思っても、ロック画面が通知で埋まっていると間違えて通知をスワイプしてしまう。

 

image01

カメラやウィジェットに行くためには、ユーザーは通知をスワイプしないように気をつけないといけない。

この事例からわかること:左右にスクロールする画面で左右のスクロールする要素を組み合わせるべきではない。

 

ロック画面でカメラを起動する-そして閉じる

先ほどにイラストにあったように、ロック画面を左にスワイプすることで素早くカメラを起動することができます。この方法でカメラを起動するにはとても簡単です。(もしかしたらカメラアイコンを引き出すiOS9以前の仕様より簡単かも知れません。)ロック画面の下部にある小さな「〇」やカメラのアイコンが、ロック画面を行き来できることを示しています。見かけと異なり、そんなにシンプルな操作ではありません。例えば下記のような場合です。

 

もし、あるユーザーがカメラ画面までスクロールした時に気分が変わってもう一度ロック画面に戻りたいと思い直したらどうやって戻ればいいのでしょうか?逆方向にスワイプするのではありません。ホームボタンを押すのです。ホームボタンはiOS10の新しいロック解除方法ですが、カメラ画面ではロック解除ではなく違う仕組みになっているのです。

image05

ニールセンの「ユーザーの自由な操作性」に逆らうUI

この事例からわかること:こちらのニールセンのヒューリスティック調査を見てください。

 

良く出来たエラーのメッセージより素晴らしいのはそもそもエラーが起こらないようなデザインです・・・

ユーザーは結局同じことを意味する異なる文言、状況、アクションに惑わされるべきではありません。

 

どうやったらウィジェットを起動できるのか-第1段階と第2段階

iOS10のロック画面には2つの主要なレイヤーがあります。1つめはロック画面そのもので、他のiOSのバージョンと同じように、その上に通知センターが存在します。

 

ロック画面上のウィジェットに到達するには2通りあります。1つ目はロック画面から直接スワイプして遷移する方法。2つ目は(画面最上部から下にスワイプして)通知センタ-に行き、右にスワイプすることでウィジェットにもう一度遷移する方法です。

 

image02

架空のiOSマニュアルより

 

それは1階にいる人に挨拶してから2階にいっても、全く同じ所にいる同じ人にしか会えないといったような感じです。奇妙で笑えますよね。しかしながら、このねじれたUIの一番わかりにくい部分はここではないのです。理論上次のようなシナリオは珍しくありません。

 

あるユーザ-がロック画面のウィジェットを見ています。そのユーザーは左にスワイプしてロック画面に戻るべきか、それとも画面下部にあるアイコンを押せばよいのか、はたまた画面下から上にスワイプすればよいのかとても迷っている様子です・・・そのうちどうすればいいか分るでしょう。

 

下のスクリーンショットを見ればその原因がわかります。

 

image04

左:通知センターのウィジェット。右:ロック画面右のウィジェット

 

Z-index1) CSSなどでボックスの重なりの順序を指定するプロパティのことの異なる階層の画面同士が似ていることが、ユーザーの操作を迷わせ、ウィジェット画面を消すにはどうすればいいのかを考えさせます。

単純に、ロック画面上の違うレイヤーを行き来させられると迷路に入り込んだように感じます。そしてもう1つ、ウィジェットからウィジェットに遷移することはシステム上可能ですが、本当はできてはいけないことです。ユーザーにとってこのUXを理解するのは容易ではありません。これはデザイナー目線のデザインであり、ユーザ-目線ではないことを示しています。

 

この事例からわかること

  1. (通知とウィジェットの両方のレベルにおいて)Z-indexの異なる階層に過剰な情報を載せると矛盾し、ねじれた設計につながる。
  2. ユーザーがどこにいるのかの状況のわかりやすい説明や表示がないとユーザーのエラーにつながる。

 

ホームボタン押下によるロック解除 vs スライドによるロック解除

両方にメリットとデメリットが存在しますが、後者の方が間違いなくわかりやすいです。ユーザーにロックを解除するにはボタンを押すという認識を作らせるのは間違ったことではありません。しかし、通知を確認する際に「スライドでさらに表示」という文言を残したままでは、完全に新しいシステムを作れているとは言えません。

 

image00

「スライドでさらに表示」に従って通知をスライドすることでアクションを選択できる

iPhoneのロック解除の仕組みがこのままであれば、このボタンを押してロックを解除する仕組みは正確性も必要ですし、ユーザーに対して何度も何が起こるのかを示す必要があります(例えば、「ホームボタンを押してロック解除」とか「ホームボタンを押して開く」など)。そして、そのような仕組みはユーザーが最初何回か戸惑うことにつながる上に、何回使っても便利に使えるようになりません。

iOS10は全体としてゲームのような操作性なのに対し、ロック画面にはゲームのデザインにおける良い点(例えば良くデザインされたチュートリアル、オンボーディングとショートカットのヘルプ、そして上級者向けが効率的に使うためのテクニックなど)が何も応用されていません。

まとめ

AppleのiOSはそのわかりやすさと使いやすさにおいて抜き出ていました。しかし、新しい機能が追加されてからは以前と同じように評価されていません。もしかしたら、もっとユーザーにとってわかりやすい成熟したシステムの構成(マテリアルデザインなど)が必要とされているのかもしれません。それが、サービスのコンセプトを完全に見直し、以前のわかりやすさを取り戻すことつながるのです。

 

この記事は、Medium上の記事 “A critical analysis of the iOS 10 lockscreen experience” を著者の了解を得て日本語に抄訳し掲載するものです。 Repro published the Japanese translation of this original article on Medium in English under the permission from the author.

注釈   [ + ]

1. ↑ CSSなどでボックスの重なりの順序を指定するプロパティのこと

repro

運営会社情報

Growth Hack Journal(グロースハックジャーナル)は、モバイルアプリのマーケティングツールを提供しているReproが運営するメディアです。モバイルマーケティングに関する海外の事例やノウハウなどをどこよりもわかりやすく発信しています。
Reproに関してのお問い合わせはこちらからお願いいたします。

もっと詳しく

このエントリーをはてなブックマークに追加
Tweet
follow us in feedly

関連記事

トレンド

TwitterにおけるKPIツリーの考え方について徹底解説!

Contents1 はじめに2 効果的にTwitterを運用するための3つのステップ2.1 1. 運…

トレンド

スマホwebのデザイン!UI/UX/ユーザビリティの違いを徹底解説

Contents1 「マイムービー」機能はユーザーにエンゲージメントする気にさせ、アカウントに登録し…

トレンド

モバイルマーケティングにおけるEメール最適化のポイント

Contents1 はじめに2 リテンションマーケティングとは2.1 リテンションマーケティングにお…

トレンド

開封率を上げるプッシュ通知運用の重要なポイント

Contents1 はじめに2 プッシュ通知の最適化を行う2.1 最適化①プッシュ通知の承認率をあげ…

トレンド

アプリの新規ユーザー定着に欠かせない配色とレイアウトの最適化とは?

Contents1 はじめに2 ユーザーが使いやすい配置を目指す2.1 縦並びのレイアウトにする2.…

トレンド

マーケター必見!Slackをもっと便利に活用するヒント

Contents1 Slackを始める2 チームをオーガナイズする3 アプリマーケティングのコミュニ…



Growth Hack Journalについて

Growth Hack Journal (グロースハックジャーナル)は、モバイルアプリのマーケティングツールを提供しているReproが運営するメディアです。モバイルマーケティングに関する海外の事例やノウハウなどをどこよりもわかりやすく発信しています。Reproに関してのお問い合わせはこちらからお願いいたします。

 

もっと詳しく
カテゴリー
  • アプリマーケティング用語集
  • サービス事例
  • トレンド
  • マネタイズ
  • ユーザー獲得
  • 定着、エンゲージメント
人気
  • 【決定版】アプリ事業のKPIツリー!
  • アプリ成長の鍵は継続率!(リテンション分析を用いたアプリのグロースハック①)
  • ROIを考慮してアプリの新規ユーザー獲得施策を考えよう(リテンション分析を用いたアプリのグロース② )
  • アプリにおけるROIとは? ROASとの違いも解説!
  • iOS10の新機能「リッチ通知」についてメリットや実装方法などを徹底解説!
タグ
  • ARPU
  • ARPPU
  • SEO
  • Yelp
  • instagram
  • ディープリンク
  • ゲーム
  • 寄稿
  • ctr
  • cvr
  • オリジナルコンテンツ
  • Product Hunt
  • Airbnb
  • ソーシャルメディア
  • チュートリアル
  • tinder
  • Uber
  • sns
  • リテンション
  • Twitter
Growth Hack Journal をフォローして最新情報をチェック
Follow @GrowthHackJnl
Reproを使ったグロースハックをはじめる
もっと詳しく

Repro logo 72af329cc2da823ab70072e0c875dae3c655cb5a65a02e3e7a8a6e3d23c7152b
Growth Hack Journal
アプリのグロースハックについて
最新事例やノウハウをお届けするメディア
  • カテゴリー
    • アプリマーケティング用語集
    • サービス事例
    • トレンド
    • マネタイズ
    • ユーザー獲得
    • 定着、エンゲージメント
  • Growth Hack Journal
    • このサイトについて
  • Reproについて
    • 会社概要
    • 採用情報
    • 会社ブログ
    • プレス・メディア掲載
© 2016 Repro Inc.