OurTodo サブタスク関数: シンプルなジェスチャーを使用して複雑なタスク管理の問題を解決する方法

2026-02-11 公開 約 1 分で読めます 約 62 語
OurTodo の開発中に、私たちは興味深い現象に気づきました。ユーザーの大きなタスクは、有効期限が切れるまでリストに残る傾向があります。 なぜ？タスクに 10 以上のステップが含まれる場合、脳は本能的に不安を感じるからです。私たちが必要としているのは、より優れた To Do リストではなく、大きなタスクを実行可能なステップに「分割」できるツールです。 これがサブタスク機能の開発当初の意図です。

私たちが観察したユーザーの問題点

ユーザーのフィードバックとデータ分析を通じて、次の 3 つの典型的なシナリオが見つかりました。
  1. プロジェクト管理シナリオ: 「製品発売の準備」は大きな仕事であり、ユーザーはどこから始めればよいのかわかりません
  2. 学習計画シナリオ: 「React の学習」は手が届かないようで、ユーザーは簡単に諦めてしまいます
  3. 旅行の準備シーン: 「日本への旅行の準備」には詳細が多すぎて、ユーザーは心配していますそれらが欠けている
一般的な問題は次のとおりです: タスクが複雑すぎて、認知負荷が大きすぎます。

私たちの設計アイデア: 認知負荷を軽減します

私たちの中心となる設計コンセプトは次のとおりです: 漠然とした不安を明確な行動ステップに変える。

なぜ「右にスワイプ」を選択するのですか?

iOS の場合 ネイティブ インタラクションでは、スワイプは最も自然な操作の 1 つです。
  • 左スワイプは通常「削除」または「興味がない」を意味します
  • 右スワイプは通常「その他の操作」または「展開」を意味します
私たちは 右スワイプを選択しましたサブタスク「可能性」をトリガーする手として使用する場合、その理由は非常に簡単です:
  • ユーザーの直感的な習慣に従う
  • メインプロセス (タスクの表示) には干渉しません
  • 簡単な操作、学習コストゼロ

技術的な実装の課題

この機能を実装する場合、次のような技術的な課題に直面します。

1.データ構造の設計

Task {
  id: String
  title: String
  isCompleted: Boolean
  subtasks: [Subtask]  // 子任务数组
}

Subtask {
  id: String
  title: String
  isCompleted: Boolean
  parentTaskId: String
}
私たちは ネストされた配列構造を使用します
  • データの関連付けが明確になる
  • UI レンダリングがより直観的になる
  • パフォーマンスが向上する (データベース クエリが減少する)

2。ジェスチャー認識の最適化

iOS UISwipeGestureRecognizer構成: 
let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipe))
swipeRight.direction = .right
taskCell.addGestureRecognizer(swipeRight)
ジェスチャーの トリガーしきい値 を調整しました。
  • 次のことを確認します。
  • 誤ってトリガーされることはありません (スワイプ距離が短すぎます)
  • トリガーはそれほど難しくありません (スワイプ距離が長すぎます)

触覚フィードバックにより即座に確認が可能

3. UI階層表示
  • サブタスクはメイン タスクと視覚的に明確に区別する必要があります。 インデント
  • : サブタスクは右に 20 ポイント | インデントされます。これは次の理由から重要です。 ユーザーは次のことができる
  • 段階的に完了する 大きなタスク

サブタスクが完了するたびに

達成感

メインタスクの進行状況は非常に直感的
  • 2.進行状況の視覚化UI に進行状況表示を実装しました。 完了したサブタスクが表示されます
  • 取り消し線メイン タスクの横に表示
  • 進行状況の完了

(「3/5」など)

すべてのサブタスクが完了したら、メイン タスクを 1 回のクリックで完了できます
  • 3.明確な階層メインタスクとサブタスクは、混乱を避けるために視覚的に明確に区別されています:
  • メインタスク: 大きいフォントサイズ、太字、左側にインデントなしサブタスク: 小さいフォントサイズ、通常のフォントの太さ、左側にインデント使用シナリオの例
  • シナリオ 1: プロジェクト管理

シナリオ 2: 学習計画

シナリオ 3: 旅行の準備
  • パフォーマンスの最適化
  • Inサブタスク関数をスムーズに操作できるように、いくつかのパフォーマンスの最適化を行いました。

1.遅延ロード

サブタスク データは、ユーザーが 

📦 准备产品发布会
  ├─ 确定发布会日期和场地 ✅
  ├─ 准备演示 PPT（第 1 版）✅
  ├─ 录制产品演示视频
  ├─ 邀请媒体和 KOL
  ├─ 准备发布会后的社交媒体内容
  └─ 跟进参会者反馈

サブタスクを展開した場合にのみデータベースからロードされます

📚 学习 React
  ├─ 学习 JSX 基础 ✅
  ├─ 掌握 State 和 Props ✅
  ├─ 理解 Hooks
  ├─ 实战小项目
  └─ 阅读官方文档

。これにより、初期ロード時間が大幅に短縮されます。 

✈️ 准备日本旅行
  ├─ 办理签证 ✅
  ├─ 预订机票 ✅
  ├─ 预订酒店 ✅
  ├─ 规划行程
  ├─ 购买 JR Pass
  └─ 准备随身 WiFi

2.ローカル キャッシュ

サブタスク データは

ローカル SQLite データベース

にキャッシュされ、オフラインでも表示および管理できます。 3.増分更新ユーザーがサブタスクをチェック/キャンセルすると、

このサブタスクのステータスのみ

タスクリスト全体を再ロードするのではなく、更新されます。 ユーザーからのフィードバックサブタスク機能のリリース後、多くの肯定的なフィードバックを受け取りました。

「ようやく大きなタスクを細分化できるようになりました。以前は『旅行の準備』を見ると圧倒されてしまいましたが、今では段階的に実行できるようになり、精神的な負担が大幅に減りました。」 —— ユーザーA

「サブタスクの進捗表示がとても充実していて、項目がバツ印されていくのがとても新鮮です。」 —— ユーザー B「右にスワイプするジェスチャはとても自然で、学習コストはまったくありません。」 —— ユーザー C次のステップ

ユーザーのフィードバックに基づいて、将来のバージョンに追加する予定です:

マルチレベルのサブタスク

: サブタスクのサブタスクのサポート (最大 3 レイヤー)

ドラッグ アンド ドロップの並べ替え

: サブタスクの順序を調整するためのドラッグ アンド ドロップのサポート

サブタスク テンプレート

: 一般的なシナリオ (旅行の準備など) のプリセット テンプレートを提供
  1. スマートリマインダー: サブタスクの優先順位に基づいてリマインダー時間を自動的に設定します
  2. 最後に記載サブタスク機能は派手なブラックテクノロジーではありませんが、実際に大きな問題を解決します:
  3. 「やりたい」を「できる」、そして「やっている」に変える方法 私たちは、最良のツールは
  4. 鈍感であるべきであると信じています - それはあなたにその存在を感じさせませんが、ただ静かにあなたが複雑なことを単純にするのを助けるだけです。 「大きなタスクに対する不安」がある場合は、OurTodo のサブタスク機能を試してください:

大きなタスクを書き留めます

右にスワイプして 3 ～ 5 つのサブタスクを追加します最初のサブタスクだけに集中します1 つを完了し、1 つをチェックし、次のサブタスクに進みます次のことがわかります:それらの一見不可能に見えるタスクは、段階的に解決されます。
  1. OurTodo サブタスク機能: 複雑なタスクをシンプルにします。まず右にスワイプします。
  2. 向右滑动，添加 3-5 个子任务
  3. 只专注于第一个子任务
  4. 完成一个，勾选一个，继续下一个
  • 你会发现：那些看起来不可能完成的任务，就这样一步步被搞定了。
OurTodo 子任务功能：把复杂任务变简单，从向右滑动开始。
シェア
Twitter Facebook