【インターンレポート】LINEのiOSアプリのアプリ内ブラウザのUI・UXの改善

こんにちは。8/2から6週間、LINEの技術職就業型コースのインターンシップに参加した石井です。私は期間中、LINEサービスプラットフォーム開発チームに配属され、主にLINEのiOSアプリで使われているアプリ内ブラウザのUI・UXの改善を行いました。本記事では、期間中に実際に取り組んだことについて書きたいと思います。

概要

アプリ内ブラウザのUI・UXの改善では、主に以下のことを行いました。

  • シェア体験の向上のためのヘッダーとフッターのUI改善
  • 新規UIの評価を計測するためのログの実装
  • 既存UIとのABテストの実施
  • アプリ内ブラウザの閲覧状態のキャッシュ

アプリ内ブラウザのUIの現状について

LINEアプリにおけるアプリ内ブラウザとは、webリンクを押した時に開かれるwebビューのことです。トーク画面で何かしらのリンクを押したときや、広告をタップした時など、様々な場面で使われています。

既存のUI

既存のアプリ内ブラウザのUIは以下の画像のようになっています。画面上部のヘッダーにはブラウザの戻るボタンと進むボタン、メニューボタンと閉じるボタンが配置されており、画面下部のフッターは存在していません。

問題点


このUIには、以下の問題点があると考えられました。

  • 他の人へのシェアがしづらい →  メニューを開いて、シェアを押すという二つのアクションが求められる
  • ヘッダーに機能が集まりすぎている → ヘッダーは画面上部にあり、手から遠く、押しづらい
  • フッターがない → 手からの距離が近い位置にメニューがないため、ページを進める、戻すなどのブラウザの操作がしづらい
  • ブラウザのリロードボタンがない → メニューボタンを開くことでアクセスできるが、手間がかかる、かつ発見しづらい

改善の目的

以上の問題点から、今回の改善の目的を設定しました。

主目的

  • LINE内のコミュニュケーション改善のためのアプリ内ブラウザのシェア動線の活性化

シェア動線の活性化には、ユーザがシェアをする際に感じるストレスを最小限にする必要があります。既存のアプリ内ブラウザでは、ユーザがシェアをするまでの流れは以下の画像のように2段階のアクション(メニューボタンを押す、シェアボタンを押す)を行う必要があります。さらに、ユーザがこの操作を行う際には、一度画面上部をタップしてから、画面下部に視点を移す必要があるため、視点の移動が大きくなり、ストレスを感じることにつながります。

改善では、以下の画像のようにワンアクションでシェア画面を開けるようにします。これにより、ユーザの負担を減らし、シェア回数の向上に結びつけようとしています。

副目的

  • フッターの追加によるブラウジング体験の向上

ページのリロードや、閲覧履歴の行き来に用いるボタンがヘッダーにあると、ユーザの指から遠く、ブラウジングに不自由が生じます。新たにフッターを作成し、これらの機能のボタンを移すことで、ブラウジング体験の向上を目指します。

  • デザインの刷新

カラーテーマを以前のものから変更し、よりはっきりとした背景色やボタンの色を使用します。

改善の実施

上記の目的を達成するために、以下のUIに変更することになりました。

問題点の改善

新しいUIを導入することで、問題点を以下のように改善することができました。

  • 他の人へのシェアがしづらい → フッターに独立したシェアボタンを配置し、一回のアクションでシェア画面を開けるように
  • ヘッダーに機能が集まりすぎている、フッターがない → 新たにフッターを作成し、webビューの操作に用いるボタンや、メニューを開く機能をフッターに移動
  • ブラウザのリロードボタンがない → フッターに配置

フッターのボタンの配置について

デザインを決める過程で、フッターのボタンの配置にはいくつかの案が出ていました。最終的に採用されたのは、以下の画像の配置でした。

この配置の目的は、ブラウザの操作に関連するボタンと、シェア機能のボタンのグルーピングにあります。ページを進める、戻す、リロードするの3つのボタンと、シェア、メニューの2つのボタンを左右に分けて配置することで、目線の移動が少なくなるというメリットがあります。こうしたボタンの配置にも、注意深く検討が行われていることを学びました。

ログの実装

アプリ内ブラウザの使用状況を把握するために、イベントログを新たに実装しました。ユーザがアプリ内ブラウザで行ったアクションに対し、そのイベントをサーバーに送り、その頻度などを分析することで、問題点を見つけ出すことができます。今後アプリ内ブラウザをさらに改善させていくための分析のための土台づくりを行ないました。

ABテストの実施

新しいUIによってどれほどシェア回数が改善されたかを計測するためにABテストを実施しました。グループAとグループBによって表示するUIを切り替える処理を実装し、各グループでシェアされた回数をイベントログによって収集し、その結果によって新しいUIの評価を行います。

アプリ内ブラウザの閲覧状態のキャッシュ

トーク画面などでリンクを押して閲覧している途中で、誤って閉じてしまったり、閉じた後でもう一度見たくなったことがあると思います。そのような時に、今まではもう一度リンクを押しても、閲覧状態が復元されることはなく、最初のページにアクセスすることしかできませんでした。特に複雑な登録処理など、webの深い階層に入っていた時にこれが起こった時の体験は良いものではありません。

このような事例に対処するために、リンクを閉じた後に、一定時間閲覧状態を保持する機能を実装しました。

閲覧状態を維持する時間

この機能を実装する上で、アプリ内ブラウザの閲覧状態が復元された時にユーザがどのように感じるか、困惑が生じないかという懸念点があります。例えば、アプリ内ブラウザ内でページ遷移を繰り返し、リンクのページと全く違うサイトを見ていた状態で閉じたとします。その後、もう一度リンクを開くと、表示されているリンクのURLと全く異なるサイトの閲覧状態が復元されることになり、これはユーザに混乱が生じることが予想できます。

これを解決するために、キャッシュする時間を短く設定することにしました。これにより、この機能が適用されるユーザを、誤ってアプリ内ブラウザを閉じてしまい、もう一度その状態を復元したいと思ってリンクをタップしているユーザのみにすることができます。かといって、キャッシュされる時間が短すぎても、キャッシュのクリアが早々に行われ、この機能が効果的に使われることにつながりません。つまり、閲覧状態を維持する時間は、短すぎても長すぎても問題があることになります。

適切なキャッシュの維持時間の設定の検討には、主に以下のことを行いました。

  • 他サービスでのユーザの再訪時間のデータの分析
  • 実機で動かし、各担当者の体感での確認

以上の検討を経て、今回はキャッシュの継続時間を5秒に設定しました。

動作動画

実際に機能を実装し、動いている様子です。少しわかりづらいですが、他のページに遷移した状態を維持できていることがわかると思います。

まとめ

今回のインターンでは、主にLINEのiOSアプリ内のアプリ内ブラウザの改善プロジェクトに携わりました。

LINEアプリにおけるアプリ内ブラウザは、アプリ内で様々な動線から利用される、ユーザの目に触れる機会が多い機能であり、その改善を行うことは非常にやりがいを感じるタスクでした。UIの改善に関してはABテストの結果によって採用されるかどうかが決まりますが、シェア回数が増え、採用されればいいなー、と思っています。閲覧状態のキャッシュに関しては、あっても損をしない便利な機能だと思うので、ユーザ体験の向上につながっていると嬉しいです。

おわりに

今回のインターンでは、人々の生活を支えるインフラと呼べるほど大規模なサービスがどのような人によって、どのように開発されているのかを学ぶことができました。様々な人と連携をとりながら作業を進めるという、大規模な組織ならではの開発フローを経験することもできました。

インターン期間中には、開発の業務だけでなく、定例のミーティングにも参加しました。iOS開発に関する技術的なトピックについてLINEのエンジニアが発表するセッションや、LINE AppのClient開発者全体が参加するマンスリーのミーティングなどにも参加させていただき、LINEで実際に働くということがどのようなものなのかを体験することができました。

作業が思うように進まない時があり、締め切り間際まで作業が続くことがありましたが、マネージャーのジミーさん、メンターの森久保さん、開発チームの方々のサポートもあり、無事に6週間終えることができました。期間中関わってくださった全ての方々、本当にありがとうございました。