スマカクアプリ 年間サイクルUI 第9案

ボタンの「要対応」をやめて期限表示に置き換えました。これで「要対応」は進捗行の1か所だけになります。右上からも期限を外したので、期限の表示もボタン1か所です。
要対応は進捗行だけ・期限はボタンだけ 第8案 第7案 第6案 第1案
直したところ
ボタンのバッジを「要対応」から期限表示に変えました。これで画面の中で「要対応」は進捗行の工程1か所だけになり、重複がなくなります。あわせて右上の〆7/31も削除したので、期限が出るのはボタンの1か所だけです。バッジの左余白も広げています。
D

ボタンのバッジ=期限表示

バッジの文言を5通り作りました。右上のセグメントはどれも期限なし(グループ+P1/P2+対象月/P3)です。
D-17月31日まで推奨
日付をそのまま出した案。いつまでに出すのかが略さず読めるので、迷いが出ません。時計のアイコンを添えて、何の日付かを一目で分かるようにしています。
D-2〜7/31(短縮)
日付を短縮した案。バッジが小さくなるぶん、文言が中央でゆったり見えます。年をまたぐ時期は何年の7/31か分かりにくくなります。
D-3あと7日
残り日数で出した案。急ぐ理由が数字で伝わるので、提出遅延を減らしたい場面では一番効きます。ただし日付そのものは画面から消えます。
D-4日付+残り日数
バッジに日付、右端に残り日数を置いた案。両方出せますが、ボタンの中の情報が3つになります。
D-5期限が近いとき(明滅)
通常は静止しているバッジを、期限が近づいたときだけ明滅させる案(この画面では動いています)。ふだんは静かで、急ぐときだけ動くので、慣れによる無視が起きにくくなります。
D-6バッジなし・右端だけ
バッジを置かず、右端に期限を小さく添えただけの案。ボタンの文言がいちばん目立ちます。
S

バッジの左余白

左に寄りすぎていたので、余白を3段階で作りました。D-1の文言で比較しています。
S-114px(前回)
ボタンの角にバッジが近く、窮屈に見えていた状態です。
S-218px推奨
左右のバランスが取れる位置。右端の矢印との余白ともほぼ揃います。
S-323px
さらに内側に寄せた案。ゆったりしますが、文言の中央位置がやや右に押されます。
M

推奨の組み合わせで工程1〜5

D-1の期限バッジ、S-2の余白、W-cのグレー塗り(確定)、C-3のペン風チェック(確定)で組みました。5枚を横に並べるため端末は実寸の8割です。