完了のサインは仕事の大きさに合わせる
タスク完了時のアニメーションやフィードバックは、どの程度の大きさにするのが適切ですか? やること1つはチェックの描画、1日の目標はバッジ、決済・登録・初作品の完成は完了画面、紙吹雪は年に数回の出来事だけと、仕事の大きさに比例させます。
終わったというサインは、仕事の大きさに比例させます。小さなことで紙吹雪を飛ばすと、すぐに騒音になります。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
チェック描画
Checkmark draw
チェックマークが線で描かれる
取り消し線
Strikethrough
やることの上に線が引かれる
バッジ獲得
Badge unlock
新しいバッジが飛び出して獲得する
完了画面
Success screen
画面全体で結果を知らせる
紙吹雪
Confetti
色紙が舞う
使い方
- やること1つはチェックの描画、1日の目標はバッジ、決済・登録・初めてのプロジェクト完成は完了画面。紙吹雪は、年に数回しかない出来事にだけ使います。
- 完了画面には、次にやることのボタンも一緒に置きます。祝うだけで行き止まりになってはいけません。
- 振動(ハプティクス)は、大きな完了のときに1回だけ。毎回鳴らすと、ユーザーに切られてしまいます。
コピーして使うプロンプト
3段階の完了フィードバック
やることアプリの完了フィードバックを3段階で作ってください。 1. 項目1つにチェック: チェック描画(Checkmark draw)200ms + 文字に取り消し線。 2. 今日のやることがすべて完了: 上部に小さなバッジ(Badge unlock)が登場。 3. 7日連続達成: 完了画面(Success screen) + 紙吹雪1回 + [明日のやることを追加]ボタン。 小さな段階ほど静かにしてください。
参考にした投稿: @uxwoodytips