ユーザーの負担を下げる会員登録画面

はじめに

この記事は、 Kyash Advent Calendar 2023 の6日目の記事です。

adventar.org

KyashでiOSアプリを開発しているtamadonです。

自分が所属しているチームでは、「会員登録完了率(アプリのインストールから会員登録を完了させるまで)の最大化」を目標の一つとして取り組んでいます。

先日リリースした施策の一つとして、会員登録画面の改善を行ったので紹介します。

画面表示時にTextFieldにフォーカスをセットする

TextFieldがある画面を表示する場合、画面表示時にTextFieldにフォーカスがセットされているとすぐに入力を開始出来るので会員登録率の改善が見込めるかも知れないということになり対応しました。

今回はiOS15以降で利用可能なFocusStateを使用することにします。

以下のようにSwiftUIのonAppearでBool型のFocusStateにtrueをセットすることで実現可能です。

struct ContentView: View {
    @State private var text: String = ""
    @FocusState private var isFocused: Bool

    var body: some View {
        TextField("", text: $text)
    .focused$isFocused)
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                    isFocused = true
                }
            }
    }
}

実際の挙動はこのように、画面表示のタイミングでメールアドレスのTextFieldにフォーカスがセットされていることが確認できました。

アカウント作成画面

キーボードの改行ボタンを押した時に次のTextFieldにフォーカスを移動する

また、複数の入力項目がある画面では次のTextFieldをタップせず、キーボードの改行ボタンをタップすると次のTextFieldにフォーカスがセットされるとユーザー登録時の負担が軽減できそうです。

こちらもFocusStateを使用することで実現可能です。

以下のようにEnum型のFocusStateを用意して、TextFieldのonSubmitでfocusStateに値をセットすることで実現しました。

struct ContentView: View {
    @State private var text1: String = ""
    @State private var text2: String = ""

    enum Field: Hashable {
        case textField1
        case textField2
    }

    @FocusState private var focusedField: Field

    var body: some View {
        TextField("", text: $text1)
            .focused($focusedField, equals: .textField1)
            .onSubmit {
                focusedField = .textField2
            }

        TextField("", text: $text2)
            .focused($focusedField, equals: .textField1)
            .onSubmit {
                focusedField = .textField2
            }
    }
}

実際の挙動はこのように、改行ボタンを押すことで次のTextFieldにフォーカスがセットされている事がわかるかと思います。

ユーザー情報入力画面

まとめ

SwiftUIのFocusStateを利用することで、結構簡単にフォーカスの制御が行えることがご理解いただけたかと思います。

現在はこちらの施策をリリースしてABテストによりデータを分析しているフェーズですが、これからもより良いユーザー体験を実現するために改善を行っていきます。