ICP SPレイアウトのチェックポイント

Laten we beginnen. Het is Gratis
of registreren met je e-mailadres
ICP SPレイアウトのチェックポイント Door Mind Map: ICP SPレイアウトのチェックポイント

1. PCからSPに置き換わるときの特徴 (ここに羅列した項目がSP改善のヒントになっていくイメージ)

1.1. 説明文はカットされる傾向がある

1.1.1. 説明文はヒントモーダルを使用して補足する

1.1.1.1. 井上さん担当

1.2. 選択肢(ラジオボックス等)はカード化される傾向がある

1.3. 二重になっているボックスはダブらないように調整される

1.4. カードの羅列は横スクロールで対応させる

2. Phase5で実装されたSP用機能 / デザイン (ここに羅列した項目がSP改善の選択肢になっていくイメージ)

2.1. not foundのデザインを大幅変更

2.1.1. 転機済 (ID004)

2.2. check.htmlのモーダル化

2.2.1. 転機済 (ID001)

2.3. 完了 / エラー画面のモーダル化

2.3.1. 転機済 (ID002,003)

2.4. ソートのモーダル化

2.4.1. 転機済 (ID005)

2.5. 注意書きのアコーディオン化

2.5.1. 転機済 (ID007)

2.6. SPで実装できない機能は省略可能

2.6.1. ただしPhase1~Phase4には応用する部分はない

2.6.1.1. スルー

2.7. ページネーションを「もっと表示」に置き換え

2.7.1. 転機済 (ID006)

3. 具体的な改善対象 / 内容 のアイディア

3.1. Phase1

3.1.1. サインアップ画面

3.1.1.1. 基本情報入力画面

3.1.1.1.1. PC側もあわせて調整して良い可能性もあるけれど、メッセージ用の空白を削った方が良いかも知れない。

3.1.1.1.2. placeholderだけで表現するのではなく見出しを付けた方が親切かも知れない。

3.1.1.1.3. Phase2以降と同様、ツールチップでエラーメッセージを表現した方がわかりやすいかも知れない。

3.1.1.1.4. 見出しをつける前提になるが、姓名部分も縦積みにした方が実際のユーザーはわかりやすいはず。

3.1.1.2. 入力情報確認画面

3.1.1.2.1. 表部分がPhase2以降と統一性がない

3.1.1.2.2. そのままでも良いかもしれないが、PC側も含めバランスが悪く、これでユーザーに「察してくれ」と言っている感が強い気がする。バランスも今ひとつ。

3.1.1.3. 完了メール送信画面

3.1.1.3.1. モーダルにした方が良いかも知れないけれど、システムの要件も絡むので現状維持の方が良い?要相談。

3.1.1.4. SMS認証画面

3.1.1.4.1. 「再送する」のボタンを目立つように。

3.1.2. ログイン画面

3.1.2.1. ログイン初期画面

3.1.2.1.1. サインアップ画面と同様、メッセージ用の空白を削った方が良いかも知れない。

3.1.2.2. SMS2ファクタ認証初期画面

3.1.2.2.1. サインアップ画面と同様、メッセージ用の空白を削った方が良いかも知れない。

3.1.2.3. APP2ファクタ認証初期画面

3.1.2.3.1. サインアップ画面と同様、メッセージ用の空白を削った方が良いかも知れない。

3.1.2.4. FraudAlertメッセージ画面

3.1.2.4.1. サインアップ画面の完了メール送信画面と同様、モーダルにした方が良いかも知れないけれど、システムの要件も絡むので現状維持の方が良い?要相談。

3.1.2.5. アカウント凍結メッセージ画面

3.1.2.5.1. サインアップ画面の完了メール送信画面と同様、モーダルにした方が良いかも知れないけれど、システムの要件も絡むので現状維持の方が良い?要相談。

3.1.3. パスリ画面

3.1.3.1. パスリ初期画面

3.1.3.1.1. placeholderだけで表現するのではなく見出しを付けた方が親切かも知れない。

3.1.3.2. 完了メール送信画面

3.1.3.2.1. サインアップ画面の完了メール送信画面と同様、モーダルにした方が良いかも知れないけれど、システムの要件も絡むので現状維持の方が良い?要相談。

3.1.3.3. パスワード再入力画面

3.1.3.3.1. 他画面でも共通して言えることだが、パスワード強度が最初から出ているのが違和感。

3.1.3.3.2. サインアップ画面と同様、メッセージ用の空白を削った方が良いかも知れない。

3.1.4. 共通

3.1.4.1. フッタの規約等を消す

3.1.4.1.1. C

3.2. Phase2

3.2.1. セキュリティ画面

3.2.1.1. 情報の変更はモーダル上で行う

3.2.1.1.1. C

3.2.1.2. Email・パスワード・電話番号部分はカード状にする

3.2.1.2.1. C

3.2.2. メール・表示設定

3.2.2.1. メールの受信設定をヒントモーダルにする

3.2.2.1.1. イラスト追加するなどしても良いかも?

3.2.2.2. 受取人名の設定

3.2.2.2.1. ここもカードにしてモーダル上で各種入力の方が良い?

3.2.2.3. 言語と日時・タイムゾーン設定

3.2.2.3.1. 枠線が重複していて野暮ったいかも?

3.2.2.3.2. 日時の形式もプルダウンで統一した方が良い?

3.2.3. 各種履歴

3.2.3.1. 表をボックス式にする(添付はボックス式の表の例だけど、、もしかしたら微妙かも?)

3.2.3.1.1. B

3.2.3.2. Phase5同様、ソートをモーダルにする

3.2.3.2.1. A

3.2.3.3. 「情報の登録・設定変更の履歴」と「ログインの履歴」をタブメニューなどにして横スライド化

3.2.3.3.1. B

3.2.3.4. PC側のソートデザインを取引履歴にあわせる

3.2.3.4.1. A(コーディングチーム側で対応)

3.2.4. メンバーシップ

3.2.4.1. アカウントの管理

3.2.4.1.1. セキュリティ画面の調整方法に合わせて修正する

3.3. Phase3

3.3.1. 個人

3.3.1.1. 登録区分変更メッセージウインドウ

3.3.1.1.1. ラジオボックスからランプを消す

3.3.1.2. プロフィール初期画面など

3.3.1.2.1. テーブル部分調整を検討

3.3.1.3. 情報入力画面など

3.3.1.3.1. テーブル部分調整を検討

3.3.2. 法人

3.3.2.1. プロフィール初期画面(サインアップ直後)など

3.3.2.1.1. PC時は気にならないがSP時は変更ボタンのデザインの違いが気になる

3.3.2.1.2. 個人と同じく表は要調整。それに加えて変更ボタンのデザイン/配置も検討したい

3.3.2.1.3. 見出し+表が一行の組み合わせの繰り返しが見た目的には微妙。統一を考えると仕方ないところなのが悩みどころ。

3.3.2.1.4. 見出しとボタンの雰囲気が近すぎて分かりづらい

3.3.2.1.5. 表について、そもそもPC時も「任意セルのデザイン」が分かりづらい。SP時もその点を留意する必要がある。

3.3.2.2. 法人情報入力画面(step1)

3.3.2.2.1. フロー部分について、このままでも良いかもしれないが、新アイディアがあっても良いかも?

3.3.2.2.2. 住所検索箇所のボタンの配置方法を表デザイン次第では再検討

3.3.2.2.3. カードのラジオボックスに変更した方が良い

3.3.2.2.4. カレンダーのアイコンの種類が多い気がするので整理が必要?

3.3.2.3. 代表者情報入力画面(step2)

3.3.2.3.1. step1と同様の箇所

3.3.2.3.2. 取引担当者の情報について、ヒントモーダル化をすると良いかも?

3.3.2.4. 実質的支配者情報入力画面(step3)

3.3.2.4.1. 下記の色々をやった後で最後にもう一度チェック

3.3.2.4.2. 画面上部のはい/いいえ選択肢・水色のメッセージなどの箇所はつくりなおした方が良いかも?

3.3.2.4.3. 見出しを中央寄せにしたい

3.3.2.4.4. メニューパーツの改善が必要

3.3.2.4.5. inputが含まれる箇所は改善案がないか要検討

3.3.2.5. 入力情報確認画面

3.3.2.5.1. コメント箇所をわかりやすくする必要がありそう

3.3.2.5.2. 実質的支配者の情報部分の表で、見出しよりも本文の方がテキストが短い箇所がある。

3.4. Phase4

3.4.1. プロフィール写真登録画面

3.4.1.1. アイコンサイズ等の塩梅を調整した方が良いかも?

3.4.1.1.1. B

3.4.1.2. 「ここにプロフィール画像をドロップ」という文言を調整した方が良いかも?

3.4.1.2.1. 井上さんにお任せ

3.5. eKYCユーザインターフェイス 行程2

3.5.1. 証明書アップロード初期画面など全般

3.5.1.1. PC時も含めた見出しのサイズ感を統一すべき?

3.5.1.1.1. B(スマホだけ調整。PCはそのまま)

3.5.1.2. ラジオボックスからランプを消して良いと思われる。

3.5.1.2.1. B

3.5.1.3. 説明とスライドする部分はヒントモーダルに格納する

3.5.1.3.1. B

3.5.1.4. 申込者の箇所もラジオボックスからランプを消して良いと思われる。

3.5.1.4.1. B

3.5.1.5. 表部分は永山さんアイディア箇所なのでスルーでも良い?ただし、改善の余地がないということもないと思うので要検討。

3.5.1.5.1. C

3.5.1.5.2. 「操作」の見出しは消して良いかも?

3.5.1.5.3. ステータスは文言いらずアイコンだけで良いかも?

3.5.1.6. ボタン下のborderはappデザイン採用後の表調整によるものなのでPhase3とあわせてコーディング側で調整

3.5.1.6.1. 左記でFIX

3.5.1.7. SP時のレイアウトを新提案して縦積みにした方が収まりが良い気がする。

3.5.1.7.1. B

3.5.1.8. SP時崩れている部分があるのでコーディングチームで別軸修正

3.5.1.8.1. A

3.6. eKYCユーザインターフェイス 行程3

3.6.1. eKYCユーザインターフェイス 行程2と同じポイントの修正のみでOKそう。

3.7. その他

3.7.1. 戻るボタンを取り、画面上側に配置する

3.7.1.1. C

3.7.1.1.1. 留意点

3.7.2. トグルボタンのSP時サイズアップ

3.7.2.1. A

3.7.2.1.1. シートで候補ページを洗い出し、都合が悪いところが出てきたら後ほど相談

3.7.3. コメント部分の表示方法・位置・文字サイズ・テキスト量

3.7.3.1. B

3.7.3.2. 井上さん担当

3.7.3.3. 対象

3.7.3.3.1. 基本レイアウト

3.7.3.3.2. Phase3

3.7.3.3.3. eKYCユーザインターフェイス 行程2

3.7.4. 文字サイズをSP時全体に大きく?

3.7.4.1. D(後日)

3.7.4.1.1. 本当に全部大きく?

3.7.4.1.2. それとも対象は10~12px?

3.7.5. 見出しデザインの変更で解決されたらスルーで良いけれど、セクションの区切りが分かりづらい

3.7.5.1. D(後日)

3.7.5.1.1. 転記済:303

3.7.6. オンページメッセージはすべてモーダルにする??

3.7.6.1. D

3.7.6.1.1. 転記済:304

3.7.7. Phase3については全体にスクロール量が多いので、その対策を考える必要がある

3.7.7.1. D

3.7.7.1.1. 転記済:305