決済端末向け打刻アプリデザイン

以降の展開を見据えた打刻アプリ設計

決済端末で利用される打刻アプリケーションのUIデザイン案件です。

本案件では、慣れない認証方法や利用環境でも迷わない体験を目指しました。今後ほかの決済端末へ展開される可能性を踏まえ、個別対応を増やすのではなく、差分を整理しながら展開しやすい構成を採用しています。

複数端末への展開を前提とした差分整理

打刻アプリは、今後ほかの決済端末にも展開されることが想定されていました。しかし端末ごとに、認証方法や認証位置、置き式か手持ち式か、といった利用形態に加え、画面サイズが異なります。

利用者が複数の決済端末を横断して使うわけではないため、端末ごとの体験の違いはある程度許容されました。求められたのは、それぞれの端末において無理なく使えることと、端末差分があっても設計や実装を過度に分岐させないことでした。

そのため、個別対応を増やすのではなく、共通化できる部分と端末ごとに調整すべき部分を切り分けながら、展開しやすい構造を考える必要がありました。

重要視されたのは以下の4点です。

◇　視認性　　：利用距離や画面サイズが異なっても認識しやすいこと

◇　情報量　　：説明を増やしすぎず、短時間で判断できること

◇　差分整理　：認証方法や認証位置の違いを適切に扱えること

◇　展開性　　：端末追加時にも破綻しにくい構成であること

共通部分と差分発生箇所の整理

設計ではまず、アプリ機能として端末が変わっても共通で扱える要素と、端末ごとに調整が必要な要素を切り分けました。端末差分は主に、打刻時の認証行為と一部設定項目に集中することが予測され、差分を限定した単位で整理できる見通しを得られました。

端末差分の扱いを局所化

差分を画面全体へ広げず、その部分だけを可変にする構成としました。設計 / 実装として差分を扱いやすい単位で整理できるようにしています。

視認性と操作性

UI表現は Android のベースデザインに沿うことで、ユーザーに慣れない文法を強いることなく、基本的なユーザビリティを保つことを優先しています。初期画面では日時と打刻種別に情報を絞り、出勤 / 退勤などの主要操作を大きく配置することで、最低限の要素を素早く把握できる構成としています。

業務用UIでのアニメーション活用

通常、業務用UIでのアニメーション利用は、そこで経過する時間を懸念し慎重になります。しかしこの案件では、テキスト等による説明よりも、画面を見た瞬間に次の行動を把握できる点から有効な選択であったと考えています。

差分整理と、発展させやすい構成

この案件を通じて、デザインにおいて何を共通化し、何を個別に扱うべきかを見極めることが、あらゆる決め手に繋がることを再認識しました。その後の業務においても、ユーザビリティと両立させる形で、情報や条件を扱いやすい単位へ再編する視点に活かされています。

結果的に統一された製品イメージ

端末を横断して利用する用途が見込まれないことから、統一的な体験という視点は強くありませんでした。しかし、共通 / 差分 の整理から出来上がった成果物は、結果的に多くの部分が統一されました。打刻アプリという、勤怠管理サービスの末端機能ですが、ブランドイメージを保つ貢献ができたものと考えています。