UI / UX デザイン
食品サービス業iPad業務アプリデザイン
プロジェクト内容
企業や学校向けフードサービス企業のiPad業務アプリのUI設計。
業務内容
一覧画面・入力画面デザイン
担当フェーズ
UIデザイン / HTMLモック作成 / 操作方法の検討 / 開発チームとの仕様調整
課題と設計方針
iPadの操作性を考慮したUI設計
本案件において最も重要かつ苦心した画面は、テーブルを利用した納品食材の検品登録画面でした。
対象画面では、多数の列を持つテーブルをiPadの横画面で扱う必要があり、縦方向だけでなく横方向へのスクロールも不可欠でした。
一般的なタッチ操作で上下左右の両方向へスクロールできる構成では、ユーザーが縦に動かしたいのか横に動かしたいのかが操作時に曖昧になり、意図しない方向へ画面が動く可能性があります。
そこで、縦方向と横方向の操作をできるだけ分離し、ユーザーが意図した方向へ安定して移動できることを設計方針としました。
考えたこと・工夫した点
水平操作を独立させるシークバー案
当初は、縦方向は通常のスクロール操作とし、横方向のみテーブル下部に固定したシークバーで操作する案を提案しました。
水平・垂直の操作を明確に分けることで、タッチ操作時に意図しない方向へスクロールすることを防ぐ狙いがありました。
この案は操作方法が一般的なテーブルとは異なること、少しでも多くの項目を見たいという前提などから採用には至らず、別の方法を検討することになりました。
指の移動方向からスクロール方向を判定する案
タッチ開始時の指の移動方向を判定し、その後のスクロール方向を固定する方法も検討しました。
しかし、方向判定が入ることで、ユーザーが指を動かした瞬間と実際に画面が動き始めるタイミングにわずかなずれが生じる可能性があります。日常的に繰り返し操作する業務アプリでは、この小さな違和感も操作ストレスにつながると考えました。
固定ヘッダーを水平操作領域として利用
開発チームとの検討の中で、「テーブルヘッダーを固定しヘッダー上を水平方向にドラッグした場合のみ横スクロールさせる」という案が出されました。
縦方向は従来通りテーブル本体をスクロールし、横方向は固定されたヘッダーを操作します。
クライアントから「列名を固定で確認したい」という希望が出るはずという予測もあり、まずヘッダー固定を提案。そこに水平方向の操作領域を持たせることでスクロールの課題も解決できます。 この方法であれば、縦・横それぞれの操作領域を分けながら、新たな操作部品を画面に追加する必要がありません。最終的にこの方式を採用する方針としました。
開発チームから提案された方法をもとに検討し、UXと実装の双方から最も適していると判断しました。
本案件では、自身の初期案だけに固執せず、開発チームから出た案も含めて比較し、操作性と実装可能性の双方からより適した方法を選択、クライアントに提案できたことが、自身にとっても大きな収穫となりました。