これまでにユーザーインターフェイスを設計したことがありません。そして、私はフロントエンド技術についてほとんど経験がありません。これは、特定のクラスの特定の日に出席および不在の学生について、ユーザーが入力できるモビーWebアプリのインターフェイスを作成する必要がある最初の機会です(学生数は30未満です)。
HTMLとCSSだけを使い、ライブラリは避けたいです。私が提供できる最高のインターフェースは何ですか?
これは私が考えていたものです:
最初のアイデアはもちろん、すべての生徒のリストとチェックボックスを提供することでしたが、それは非常に退屈で人的ミスが発生しやすいように見えました。
2番目のアイデアは、学生名のリストをブロックで作成することでした。ユーザーは学生名をタップして、存在するものとしてマークを付けることができ、残りは存在しません。それは私にはよく見えましたが、それでもヒューマンエラーが発生しやすい傾向があります。
3番目のアイデアは、変更された2番目のアイデアです。私はまだ生徒の名前をブロックしていますが、ユーザーは右にスワイプして現在のマークを付け、左にスワイプして不在のマークを付ける必要があります。 (それを実装する方法がわからない)。私は考えすぎですか?
私があなたを正しく理解しているなら、これは先生のためのアプリで、各レッスンでの生徒の出席を記録します。
自分のことを先生の立場にして(またはもっと良いことは、数人の先生にインタビューして)、プロセス全体について考えます。
この情報を入手したら、設計を開始する準備が整います。
私はそう思います-このすべての情報なしで、良いデザインで偶然にしか得られない可能性があります-出席者の提案とともに、出席の頻度順に並べられた学生のリストに行きます(許可するため)今日再び出席する可能性が高い人々の簡単なスキミング)。
スワイプのアイデアとグスタフの答えへのメモとして:タップはとても簡単なので、スワイプのアイデアは良いと思います:間違った生徒をタップしたり、2回タップしたりするのは簡単です(エントリが再び選択解除されていると仮定します)。親指でスワイプするのは簡単で(スマートフォンを想定しています!)、簡単な修正が可能です(教師は間違った生徒の動きを認識し、完了する前にスワイプを停止します)。
さらに情報を追加すると、より具体的なアドバイスを提供できる場合があります。
あなたの初めは良い方法だと思います。
ユーザー中心のデザインの簡単な紹介を読むことをお勧めします。最初に、ユーザーの要件(誰が何を、なぜ行うのか、環境、ライフサイクルなどは何か)を取得する必要があります。あなたはすでに始めましたが、あなたの投稿では要件が一般的すぎ、形式的すぎます-人間がアプリを使用するのではないでしょうか?ニーズを十分に理解している場合は、アイデアを作成できます。そして、ユーザーと一緒に、早い段階で頻繁にアイデアをテストしてください。各反復(2〜5日)の大まかなルールとして、2〜5人のユーザーにUIを示し、状況にあるときの感想を尋ね、それを理解し、最終的に短いタスクを提供します。
3番目のアイデアは、ユーザーインタラクションコストが単純なタップよりも高いため、少し負担になります(その場合、スワイプの方が直感的になるのはなぜですか?)。