web-dev-qa-db-ja.com

在学モバイルWebアプリに最適なUI

これまでにユーザーインターフェイスを設計したことがありません。そして、私はフロントエンド技術についてほとんど経験がありません。これは、特定のクラスの特定の日に出席および不在の学生について、ユーザーが入力できるモビーWebアプリのインターフェイスを作成する必要がある最初の機会です(学生数は30未満です)。

HTMLとCSSだけを使い、ライブラリは避けたいです。私が提供できる最高のインターフェースは何ですか?

これは私が考えていたものです:

最初のアイデアはもちろん、すべての生徒のリストとチェックボックスを提供することでしたが、それは非常に退屈で人的ミスが発生しやすいように見えました。

2番目のアイデアは、学生名のリストをブロックで作成することでした。ユーザーは学生名をタップして、存在するものとしてマークを付けることができ、残りは存在しません。それは私にはよく見えましたが、それでもヒューマンエラーが発生しやすい傾向があります。

3番目のアイデアは、変更された2番目のアイデアです。私はまだ生徒の名前をブロックしていますが、ユーザーは右にスワイプして現在のマークを付け、左にスワイプして不在のマークを付ける必要があります。 (それを実装する方法がわからない)。私は考えすぎですか?

4
GrSrv

私があなたを正しく理解しているなら、これは先生のためのアプリで、各レッスンでの生徒の出席を記録します。

自分のことを先生の立場にして(またはもっと良いことは、数人の先生にインタビューして)、プロセス全体について考えます。

  1. 先生のやる気は?学校の要件は?出席を採点に含める必要はありますか?動機を高める機会を特定することができます(学校システムへの自動アップロード、または評価に役立つ要約情報など)。
  2. 先生は教室に入り、誰がいるかを見ます。彼は名前で学生を知っていますか?彼はリストのすべての名前を呼び出さなければなりませんか?
  3. 出席のパターンはありますか? (ここで教師の経験が重要になります!)最後のレッスンからの出席リスト(または平均出席)を提案して、変更のみを行う必要があるようにすると便利ですか?
  4. 教師はクラスをいくつ持っていますか?アプリでスケジュールを使用できるので、セッション中のクラスを発表できます(教師が選択する必要はありません)。教師はクラスの前に出席したいと思いますか(教師の動機)?
  5. 生徒は常に同じ場所に座っていますか(これも教師の経験が必要です)。記録に役立ちますか(出席リストに場所の配置を表すなど)?
  6. 登録済みの生徒数をカウントして、すべてが登録されているかどうかを確認する必要がありますか?
  7. 遅刻した人や早退した人はどうですか?教師は出席情報を変更する必要がありますか? (たぶん「出席」とみなされる学校の規制があるのでしょうか?)
  8. どのデバイス用に設計していますか? 30人のリストはスマートフォンでは見づらいですが、タブレットで整理するのは簡単です。

この情報を入手したら、設計を開始する準備が整います。

私はそう思います-このすべての情報なしで、良いデザインで偶然にしか得られない可能性があります-出席者の提案とともに、出席の頻度順に並べられた学生のリストに行きます(許可するため)今日再び出席する可能性が高い人々の簡単なスキミング)。

スワイプのアイデアとグスタフの答えへのメモとして:タップはとても簡単なので、スワイプのアイデアは良いと思います:間違った生徒をタップしたり、2回タップしたりするのは簡単です(エントリが再び選択解除されていると仮定します)。親指でスワイプするのは簡単で(スマートフォンを想定しています!)、簡単な修正が可能です(教師は間違った生徒の動きを認識し、完了する前にスワイプを停止します)。

さらに情報を追加すると、より具体的なアドバイスを提供できる場合があります。

5
virtualnobi

あなたの初めは良い方法だと思います。

ユーザー中心のデザインの簡単な紹介を読むことをお勧めします。最初に、ユーザーの要件(誰が何を、なぜ行うのか、環境、ライフサイクルなどは何か)を取得する必要があります。あなたはすでに始めましたが、あなたの投稿では要件が一般的すぎ、形式的すぎます-人間がアプリを使用するのではないでしょうか?ニーズを十分に理解している場合は、アイデアを作成できます。そして、ユーザーと一緒に、早い段階で頻繁にアイデアをテストしてください。各反復(2〜5日)の大まかなルールとして、2〜5人のユーザーにUIを示し、状況にあるときの感想を尋ね、それを理解し、最終的に短いタスクを提供します。

3番目のアイデアは、ユーザーインタラクションコストが単純なタップよりも高いため、少し負担になります(その場合、スワイプの方が直感的になるのはなぜですか?)。

2
Gustav