【iOSアプリのUX向上には必須!】スマホの振動で処理を伝える方法について

こんにちは、iOSアプリのUXを向上するためアップデート時にUIImpactFeedbackGeneratorを使用したので、
今回は、UIImpactFeedbackGeneratorの使用法方法を解説していきます！

【この記事はこんな方におすすめ】
・iOSアプリをリリースしたけど、どのようにUI/UXを磨けばいいかわからない方、または、実装方法に迷っている方
・アプリのリリースを考えているが、アプリの独自性を出したいと考えている方
・普段iOSアプリを使用していて、たまに感じる振動の出し方が気になる方(例えば、QuickPayの支払い時のような振動)

触覚機能を提供しているUIImpactFeedbackGeneratorとは
UIImpactFeedbackGeneratorの使用方法
さいごに

触覚機能を提供しているUIImpactFeedbackGeneratorとは

具体的に触覚機能とは、iPhoneの画面ロック解除をする際、顔認証が取れず失敗した時にiPhoneが「トゥトゥ」と振動するあのような機能のことを言います。
あのような触覚機能を使う場面というのは、ユーザーが考えている挙動が成功した際もしくは、失敗した際に使うべきかと思います！

【触覚機能を効果的に使える場面】
・ユーザーが考えている挙動が成功した場合にユーザーにそのことを知らせる場面
・ユーザーが考えている挙動が失敗した場合にユーザーにそのことを知らせる場面（成功も失敗もどっちもかい）

しかし、触覚機能はユーザーに挙動について伝えてくれる大変便利な機能である一方、何も考えずに多用しまくると一貫性が無くなり、ユーザーがアプリ操作に疲弊してしまいます。

【触覚機能を使用する際の注意点】
・触覚機能をどの動作や機能にも多用して、動作をするごとにiPhoneが振動する。
・ユーザーに行ってほしい挙動に成功と失敗がある場合、他の機能でも同じ強度の振動を設定すること

このような点を十分注意しながら、実装を行うとユーザー体験の向上につながると考えられます！それに加え、アプリを使用していて心地のいい感覚になり、アプリのコンバージョン率も上昇させる大きな要因の一つになるはずです！

UIImpactFeedbackGeneratorの使用方法

ではここから、UIImpactFeedbackGeneratorの実装方法を解説します！
【今回の実装想定】
地図をロングプレスするとピンを立てられる実装


    //マップを長押しでpin設置
    func setPin() {
        let myLongPress: UILongPressGestureRecognizer = UILongPressGestureRecognizer()
        myLongPress.addTarget(self, action: #selector(recognizeLongPress))
        mapView.addGestureRecognizer(myLongPress)
    }
    // 
    @objc func longPressMap(sender: UILongPressGestureRecognizer) {
        // ポイント③
        if sender.state != UIGestureRecognizer.State.began {
            return
        }
        // ポイント②
        generateImpactFeedback(style: .heavy) 

      // 以後割愛...
    }

    // ポイント①
    func  generateImpactFeedback(style: UIImpactFeedbackGenerator.FeedbackStyle) {
        var generator = UIImpactFeedbackGenerator(style: style)
        generator.prepare()
        generator.impactOccurred()
    }

ごちゃごちゃしているので、順を追って説明します！

ポイント①
ポイント①は、今回のメインである『UIImpactFeedbackGenerator』を使用するために作成したヘルパー関数です！
UIImpactFeedbackGeneratorを使用する際は、まずインスタンス化してあげて、FeedbackStyleのenumにある、『light・medium・heavy・soft・rigid』の5つから、どの程度触覚機のを使うかを渡してあげます。
そして、generator.impactOccurred()で実際に振動を発生させます。
※generator.prepare()はgenerator.impactOccurred()を何度を複数回呼んでもバグが出ないようにするためみたいです。(詳しくは、調査中です。)

ポイント②
ポイント①で作成したヘルパー関数を実際に使用しています。ここでは、heavyを選択してユーザーに比較的大きめの振動を伝えています。
これで今回の目的である、『ユーザーに振動を伝える』という目的は達成しました！

ポイント③
こちらは、余談になるのですがポイント③の処理がない場合、一度の画面長押しで数回処理が呼ばれてしまいます。実際僕のアプリでも長いしするとマップにいくつもピンが立てられてしまう状況になりました。しかも、ユーザーへの振動も数回連続でくるので正直UXは最悪の状態でした。(笑)
もし『UILongPressGestureRecognizer』を用いる場合は、長押しされた時は、1つ目しか反応しないように処理を追加してあげてください！

さいごに

いかがでしたか？僕自身の考えではあるのですが、UXの向上にはこのような触覚機能や小さなバイブ等でユーザーが行いたい挙動が成功しているかどうかを知らせることも大事だと考えています！
アプリ開発はこのような目に見えるところ以外もケアすることでUXの向上を計れるので色々考えるのが楽しいです！
では、次回の記事でお会いしましょう！