MissFARMにおける快適なタイムライン体験のための取り組み

本記事はMisskey Advent Calendar 2023の11日目の記事です。

昨日の記事はtaichanさんの「Misskey体験の改善やカスタム:手段のヒント」でした。

クライアントを開発している自分としてはとても興味深い記事でした。特に1章のやりたいことを考えるは自分がクライアントを開発するときに意識していることとの共通点があったので、非常に共感できました。(記事の本題ではないですが....)


こんにちは、高橋ちゃんです。普段はMissFARMというMisskeyクライアントを開発しています。 本記事では、MissFARMの体験をより良くするために最近行った取り組みについて書きます。

MissFARMってなに?

MissFARMはMisskeyをX(旧Twitter)ライクに使うことができるiOS用Misskeyクライアントです。

私、高橋牧場が頑張って作っています。今後も新機能をガンガン追加していく予定なので、ぜひダウンロードをして使ってみてくださいね!

タイムライン / ユーザー詳細 / 検索

apps.apple.com

MissFARMのTL

MissFARMのタイムライン(以降TL)は非常にシンプルです。

TLには以下のような機能があります

  • アプリ起動時のノート読み込み
  • 画面を下に引っ張ってTLの更新(リフレッシュ)
  • TLを最下までスクロールした際の追加読み込み

これに加えて上記のいずれかでエラーが発生した場合に、その旨を伝えるテキストが表示されます。

追加読み込み/リフレッシュ/エラー表示

現状のTLには課題があります

課題点: 読み込まれたノートがエラーで消える!?

現状の仕様では、アプリを起動した時の初回読み込みの際は、特に違和感なく動作します。一方で、リフレッシュと追加読み込みの際には、読み込まれたノートの表示をエラー表示で上書きしてしまうので、読み進めていたTLが全てリセットされてしまいます。

また、ユーザーにはエラーが発生したことしか伝わらないので、復帰のためにどのようなアクションを取れば良いかがわかりにくくなっています。

現状のエラー発生時の動作

各状況に応じて、ユーザーが自然に復帰できるような体験を考える

上記の課題に対して、リフレッシュ、初回読み込み、追加読み込みの各状況に応じて解決策を考えていきます。

いずれの状況でも、MissFARMでは以下を満たすことを意識してアプローチを考えました。

  • どの通信でエラーが発生したかが直感的にわかること
  • どうすれば正常に復帰することができるかが明確にわかること
  • ユーザーに無駄なストレスを与えないこと(読み込んだノートを破棄するなど)

リフレッシュに失敗した時の表示

まずはリフレッシュに失敗した時の動作を修正します。 リフレッシュが失敗した時は読み込んだTLの上部にエラーを表示します。

通信のリトライは再度TLを下に引っ張ることで行えます。その旨をユーザーに伝えるためのメッセージも追加しました。

改良版: リフレッシュでエラーが起きた時

初回読み込みに失敗した時の表示

次に、初回読み込みが失敗した際の動作を修正します。 初回読み込みはリフレッシュや追加読み込みとは異なり、読み込み済みのノートが存在しないため、エラーのみを表示します。

さらに初回読み込みはリフレッシュと異なり、ユーザーの特定のアクションによって発火されるイベントではないので、リトライを行うための導線を新たに追加する必要があります。 よって、エラーに加えて、リトライボタンを表示しました。

改良版: 初回読み込みでエラーが起きた時

追加の読み込みに失敗した時の表示

最後に、追加読み込みが失敗した際の動作を修正します。 追加読み込みが失敗した時は読み込んだTLの下部にエラーを表示します。

このケースも初回読み込みと同様に、リトライボタンを表示します。

改良版: 追加読み込みでエラーが起きた時

まとめ

今回はTLのエラー表示を改良していきました、地味なアップデートで実装もめんどくさいですが、ユーザーが快適に使用するためには大切な機能です。

今後もMissFARMをより良くするために機能追加や改良をしていくのでよろしくお願いします。

なお今回の修正はMissFARMバージョン1.5.1以降で導入されています。

さいごに

ここまで読んでいただきありがとうございました😊

私、高橋ちゃんはMisskeyを初めて9ヶ月が経ちました👏

Misskey.ioで主に活動をしていますが、毎日のように誰かが描いたイラストやアレンジ楽曲がTLに流れてきて、見ているだけでとても楽しいです。

イラストレーターが推しのファンアートを投稿したり、DTMerが好きなBGMのアレンジを投稿するように、プログラマーがMisskeyAPIを使って、いろんなクライアントを生み出してくれるといいなーと思って、本記事を執筆しました。

MissFARM以外にもMisskeyユーザーを対象としたクライアントはたくさんあるので、試してみると自分と合ったものが見つかるかもしれません。

Misskeyクライアントで自分が観測できたものをここに列挙して締めようと思います。

play.google.com

apps.apple.com

apps.apple.com

MissCat - Misskey クライアント -

MissCat - Misskey クライアント -

  • Yuiga Wada
  • Social Networking
  • Free
apps.apple.com

apps.apple.com

以上となります。明日はAyumu Nekozukiさんの記事です!