見出し画像

【DailyUI】002：Check out

ocha

作成したもの

架空アプリ（toC向け）の決済画面（クレジットカード）
※WEBのSP、PC2画面

モックアップも作ってみました！

完成Figmaファイル

お題における必要機能/コンポーネント

  • 使用できるクレジットカード会社の提示

  • カード番号

  • 有効期限(MM/YY)

  • 名前

  • セキュリティコード(CVV)

    • セキュリティコードの場所を知らせるもの

  • カード情報の登録有無チェックボックス

    • 選択肢を「登録する」「登録しない」の場合はラジオボタン

  • 次ページへの遷移ボタン

  • （高額な商品を取り扱っている場合は）支払い回数の選択


取り組んだこと、意識したこと

  • 使用できるクレジット会社が一番はじめに分かるよう、コンテンツの最上部に配置しました。
    こうすることで、「自分が持つクレジットカードが使えない」となった人は、早々に別の決済手段を選択出来るようになると考えたためです。

  • テキストフィールドの順番を意識しました。
    「人は、ぼんやりではあるがカードに記載されている情報の順番（番号→期限→名前）を頭にインプットしているのではないか」
    という仮説から、入力するテキストフィールドもカードに記載されている順番を踏襲したほうが、認知的負荷が減るのではないかと考えたためです。

    • その上で、セキュリティコードに（以下CVV）ついては、下記の理由から記載場所がうろ覚えになっているユーザーが一定存在すると仮説を持ちました。うろ覚え程度であれば、CVVの在り処についてはアイコンで示すだけで気づくことが出来ると考え、デザインに反映させました。

      • CVVは、オフラインの店舗で支払いをする際に使用しないこと

      • カード番号や期限が記載されている表面ではなく、裏面に記載されており気づきにくいこと

  • 次のページへ遷移させるボタンのラベルをいくつか考えました。
    前提として、決済画面は「誤って決済されてしまわないか」といった不安を抱えやすい画面であると想像します。
    その前提に立った時、ボタンのラベルが「購入」「確定」などとなっている場合、ボタンを押すことに心理的なハードルがあるのではないかと考えました。
    動線としては、購入内容の確認を含め最終的に確認→購入、のフローを踏んだほうが良いと考えたため、今回のボタンのラベルを「購入内容を確認」としました。

  • 前日取り組んだ会員登録画面と同様、決済画面はタスクベースの画面であるため、華美な装飾は避けあえて簡素な画面設計にしました。
    実装面のことも想定し、PC/SPそれぞれの両画面で大きな差異を出さずメディアクエリ1つ設定するだけで実装出来るレベル感の画面にしました。

所感、学び

  • 昨日ヘッダーを作成した際、コンテンツよりも大きく目立っていることが気になったため、修正をいれました。全体的にバランスが改善されたように思います。

  • 昨日よりもかなりオートレイアウトを使いこなせるようになってきました！

  • 画面を組んでいく際は「テキストボックス」「フィールドエリア」…など、実際にHTMLを記述する場合の構造を想像しながらフレーム化/アウトレイアウトを設定しているのですが、昨日と違い1px単位のズレにもすぐ気づき、修正が容易にできました。

  • レスポンシブデザインを作成する際、SPの画面を先に設計していますが、今回はSP→PCに変更する際、テキストフィールドのバランスがやや気持ち悪いように感じます。（有効期限のフィールドと、CVVの右辺が合わない。ただし、右辺を無理やり揃えようとした場合、CVVのフィールドが入力される文字数に対して間延びしてしまう。）
    CVVの場所を示すアイコンを置いてバランスを取りましたが、もう少し微修正しても良いように感じました。

次へのアクション

  • 画面を作成する際、上記に書いたこと以外にも考えたりしたものが多々あるのですが、テキストにまとめるだけだと読みにくい&振り返りしにくいですね…。せっかくなので、もう少し視覚的に気づきなども分かりやすくまとめられるように善処します。

  • 明日は上記に記載した有効期限とCVVのフィールドのバランスを微修正してみます。

  • 本来であればDay03はLP制作ですが、すでに別で制作済みのためスキップしたいと思います。（架空アプリを想定しているので、そのアプリに必要な画面をピックアップする予定です）

  • もう少し短時間で制作したい&もっと集中力あげて別のポートフォリオ制作も進めたい…。

  • （10月18日追記）
    時間を置いて見返した際に、カード情報の登録を「登録する」「登録しない」いずれかを選択させる場合は、チェックボックスではなくラジオボタンでなければいけないのを、すっかり気づかずに制作してしまっていました…。
    修正方針としては下記の2点あるかと思いますが、今回は後者にします。

    • チェックボックス＋「登録する」のラベルのものに変更する

    • ラジオボタンに変更する
      後者のものにする理由ですが、先述の通りこの決済画面は前提として不安を感じやすいタスクであると想定した際に、カード情報を登録したくないユーザーは、明確に「登録しない」を選択したほうが安心感があると考えたためです。
      （チェックボックスを外すだけでは、本当に登録されないの？と疑問に感じてしまう可能性が残ると考えました）


この記事が気に入ったらサポートをしてみませんか？