🎭

アカウントを複数扱うアプリのUIを考える

2023/12/02に公開

iOS

Swift

tech

マルチアカウントアプリのUIを考える

こんにちは、noppeです。
この記事はFediverse (3) Advent Calendar 2023 の記事になります。
https://adventar.org/calendars/8730

この記事では、複数のアカウントを扱うアプリのUI設計についてnoppeの開発しているDAWNを参考に解説していきます。

DAWNはmastodonのアカウントを使ってmastodonへ投稿やポストの閲覧をすることができるmastodonクライアントアプリです。
mastodonは𝕏のような、短文投稿SNSで誰でもサーバーを建てることが出来て、それぞれのサーバーの投稿を一つのタイムラインで閲覧することができます。

fediverseと複数のアカウントを使い分ける必要性

mastodonのように分散されたサーバーによって構築される空間をfediverseと言います。
https://ja.wikipedia.org/wiki/Fediverse

fediverseでは好きなユーザーの投稿を購読できますが、実際は話題ごとにサーバーが異なったり、非収載という仕組みによってサーバー内部でしか見れないポストが生まれます。

これによって、最大勾配数のポストを１つのアカウントで見ることは出来ず自然とユーザーはアカウントを複数所持することになります。

マルチアカウントを束ねるクライアントの存在

このような背景もあり、サードパーティのほとんどのmastodonアプリが複数のアカウントが扱える仕組みを持っています。
また、アカウントをUI上でどう表現するかがアプリの重要なファクターであることも分かるかと思います。

https://joinmastodon.org/apps

マルチアカウントが抱えるアプリの問題

一般的なアプリでは、アカウントはそのアプリが扱うサービスの１つに限定されます。
そのため、一般的なユーザーはアカウントの切り替えそのものに慣れていないと言えます。
普段𝕏などをヘビーに使っていると気が付きませんが、マルチアカウントのアプリはそれだけで複雑であり、理解されにくいということです。

fediverseを一般に普及するにあたって、この問題を出来るだけ分かりやすく解決する必要があると考えました。
マルチアカウントアプリにおけるストレスの一つは、今自分が誰であるのかを意識しながら使う必要があるということです。
誤爆しないように気にし続けるストレスをどうすれば感じにくくなるのか、これを解消できないか考えてみました。

mastodon特有の問題

画面にユーザー名を明示することで、自分が誰であるかを意識するストレスを軽減することができます。
しかし、mastodon(厳密にはActivityPub)特有の問題として、ホストを含めたユーザー名が非常に長く画面の情報量が増えてしまうという問題があります。
例えば、次の文字列はそれぞれ別のユニークなアカウント名(acct)を表します。

@noppe@mstdn.jp
@noppe@fedibird.com
@noppefoxwolf@noppe.hostdon.jp

アイコンやユーザー名が重複する可能性があるため、正しくユーザーにアカウントを伝えるにはこれらacctを表示する必要がありますが、これらの文字列が常にアプリに表示されるのは冗長です。

アカウント名だけを表示したり、別名を設定する事で解決できるかも知れませんが、それらが脳内で置換されるコストも見過ごせません。

ナビゲーションコンテキストで解決する

DAWNはこのマルチアカウントの問題をUIで解決することにしました。
ナビゲーションコンテキストとは、画面を遷移する時に引き継がれるコンテキストです。
DAWNでは、このコンテキストにアカウントを乗せることで基本的には前後のアカウントが同じであることを大前提としました。

つまり、どの操作をしても常に選択されたアカウントによる操作がされます。
勝手に他のアカウントでいいねをしたり、メンションするアカウントを自動で切り替えることはしない方針にしました。
こうすることで、ユーザーは操作していたアカウントが常に引き継がれるため現在のアカウントが何か迷いにくくなります。

しかし、これでは複数のアカウントを切り替えて使うことができません。
DAWNではいくつかの工夫をして、ナビゲーションの途中でコンテキストを変更できるようにしています。

1. アカウントの変更はナビゲーションの根本で行う

１つ目の工夫は、アカウント変更をナビゲーションの根本で行うということです。

DAWNのホーム画面には、タイムラインと通知タブの２つのタブがありますが、アカウントを切り替えるとこれらのタブは作り直されます。

つまり、全てのタブには同じアカウントが並ぶようになります。

こうすることで、ユーザーがアカウントの変更をする＝アプリの中身が全てそのアカウントになるというシンプルな構造にすることができます。

DAWNの前身となるTwitterクライアントの夜狐八重奏では、タブに複数のアカウントのタイムラインを埋め込めるようにしていました。
しかし、fediverseの複雑で冗長なアカウント表現の為にDAWNではこの機能を見直し、より分かりやすい機能にデザインしました。

2. アカウントの変更はアカウントピッカーを介して行う

２つ目の工夫は、アカウントを変更する という行為は、アカウントピッカーを介して行うようにした点です。

アカウントピッカーは画面下から現れるモーダル画面です。コンテキストメニューよりも重めの操作と表示領域を要求します。

DAWNでは、アカウントを変更する という行為に対して一貫した見た目のアカウントピッカーと、重めの操作でユーザーにアカウントの変更をしたという認識を持ってもらう狙いがあります。

3.ナビゲーションの途中のアカウント変更は警告する

最後の工夫は、fediverseならではの工夫です。

mastodonでは、misskeyのような絵文字リアクションがありませんが、fedibird や kmy.blue のような一部のサーバーでは絵文字リアクションを独自に実装しています。

絵文字リアクションに対応していないサーバーで投稿を見ているときに、一時的に対応サーバーのアカウントに切り替えて絵文字リアクションをしたいというユースケースがあります。

このような、ルールから外れているケースや、例外的なケースでは次のように強めの警告を表示するようにしました。

これは、意図的にアカウントが変更されていることを意識させるために表示しています。
アイコンのマスクは、一時的に利用しているアカウントが仮面を被っている様子を表しています。
ちなみに内部的にこの機能はペルソナと呼んでいます。

まとめ

このように、機能自体は提供しつつそれぞれの操作に重みや意図的なストレスを設計することで快適な操作を中心にした利用を促しつつ、高機能なアプリケーションを提供することが出来ています。
気になった方は是非DAWNを使ってみてください。