投稿画面のUI整理（2.0.33）
2.0.33から投稿画面のUIデザインを変更しました。
動機
Mastodon 4.5.0から引用許可の設定が追加されたが、旧UIでは公開範囲の領域を大きく取っており、収まらない懸念があった。
レガシーUI
LiquidGlassを踏襲し、キーボード上に大きめのツールバーを配置している。
編集ツール部分は左右にスワイプすることができ、拡張性がある。
編集ツールではない、ポスト自体に関するものは上の列に表示している。
リファレンス１
意図せず、Ivolyの設計思想に近付いていることに気が付く。
この画面での違和感をDAWNでも解消するべきと思った。
- ENボタンが目立つ。ポストを書くときに言語のことを意識したいだろうか。
- Publicを変更したときに、言語ボタンの横位置が変わってしまう。
- ツールバーの外側にアイテムを配置すると、スクロール時に文字と被ってしまい、背景をつけるなどある程度の視認性を確保する必要がある。
フィードバック２
matsujiさんが「自分が1から作るならこんな感じですかね」とシェアしてくれた画像。
ここで、@,#ボタンが他のツールと性質が違うことに気が付く。
また、iOSのデザイン思想に沿って送信ボタンが右上にあるが、これは下のままにしたいと思った。Xも上にあるが、送信ボタンを押すまでの手軽さこそサードパーティアプリのアイデンティティたり得ると思ったから。
プロトタイプ２
編集ツールを「公開範囲」「編集ツール」「擬似キーボード」でカテゴライズした。
公開範囲
公開範囲はXのアプリをリファレンスに、本文上に控えめに配置した。
このスタイルはXで採用されているためユーザーに必要以上に負荷をかけないことが証明されている。
編集ツール
基本的には全て左下の+ボタンに押し込んだ。
擬似キーボード
「絵文字」「ハッシュタグ」「メンション」を分離することで、キーボードのキーと同列のアクセシビリティを与えた。
この時点で、文字数カウントの置き場所が無くなってしまったが、バランスが良かったので一旦無しにしてみた。
実際Xの140文字と違い、mastodonは500文字などが上限なことが多いので、文字数カウントは非表示でも良いことに気がついた。
ブラッシュアップ１
プロトタイプで大まかな方向性が決まったので、ブラッシュアップを始めた。
ボタンサイズと余白
キーボード上のボタン群のサイズや余白を、Safariなどの標準アプリに準拠した。
送信ボタン
横長だったものを円形にした。これもAppleの標準アプリ準拠。
擬似キーボード
位置を左寄せにした。＠ボタンが送信ボタンに近く、触るのが怖かったので。
公開範囲ボタン
「公開」から「全員」に文言を変更。Xと同様に、公開範囲を具体的に伝えるようにした。
「公」が与えるプレッシャーを調整する作用もある。
ブラッシュアップ２
編集ツールがラベルになったことで、機能が分かりやすくなった。
メディア挿入やnowplayingは、メッセージアプリに倣ってアプリアイコンを表示するようにした。
ここで感じた懸念点
- メニューがなんとなく大きい気がする
- 警告文ボタンの威圧感がある。
- 正直Image Playgroundとか作文ツールをここから呼び出す必要性は薄いが、表示領域を潤沢に使っている。
ブラッシュアップ３
- Image Playgroundと作文ツールをサブメニューに押し込めた。
- 警告文をメニューから外して後述するポスト設定のメニューに移動した。
- 投票と#きつねかわいいのSFSymbolsを自作した。
ブラッシュアップ４
- 右上にポストメニューを追加し、いくつかの機能を移動。
- 文字数表示は、現在の文字数や残り記入可能な文字数を表示する機能。
- コメント追加は、警告文機能をリネームしたもの。メニュー表示時のプレッシャーが調整できたと思う。
ブラッシュアップ５
デフォルトでは文字数は非表示にした。
また、文字数表示部分をタップすることで、表示方法を選べるようにした。
ただし、非表示設定時でも残り文字数が少なくなった場合は文字数が表示される。
これによって、初心者と上級ユーザーの双方にとって快適なUIとなった。
ブラッシュアップ６
公開範囲ボタンを押した時に「公開範囲の設定」がこれまで開かれていたが、ポストのメタデータを設定する「投稿オプション」画面として拡張した。
言語設定もこの画面に移動。今後、引用範囲の設定もこの画面で扱えるようになった。
Recap
このようなUI調整を経て、投稿作成画面をより広く扱えるようになり、さらに機能の拡張性や、新しい機能を盛り込むことに成功しました。
各ツールの配置もカテゴライズされ、ユーザーが予測可能な動作を提供することができるようになったはずです。
ツール群を直置きする場合に比べ、機能へのアクセスが最大２タップ増加しましたが、一般的なアプリケーションが提供するアクセシビリティの範囲に収まっており、先述のカテゴライズも包括すると十分なアクセシビリティが保たれていると考えています。