How to combine clickprototyps with customised haptical Feedback (IOS) For non developer

Since IOS 13 haptical Feedback can be customised what give us as an UX Designer the possibilty to design haptical feedback for our concepts. But here you are — made a fancy clickprototyp for example in principle where you can simulate much IOS interaction but no haptical feedback. Unfortunately there is no other way talking with feedback without code but there is a simple possibility for non developer to combine clickprototyps with self-designed haptical feedback.

Understand how the haptic works

First of all you need to understand how haptic works. Therefore you can download the XCode project from apple If you don’t have Xcode please also download this in your AppStore If it is your first time in Xcode don’t worry I will explain it step by step.

1. Connect your phone with your MacBook. Select it as source in the top

XCode 11

2. Press run/play. The app will be transfer to your phone. Please notice that you have to agree the developer. The app is now on your phone and you can try out all buttons with different haptic feedback. (cool!)

3. So now its time to make your own haptic. On the right side in Xcode you will see an folder with AHAP files. Name of the files belongs to the buttons. You can write an AHAP file by yourself. But wait… there is a simpler way. Go to http://ahap.fancypixel.it and design your haptic graphically.

Captain AHAP for creating your own haptic

Just try it out, copy the code and replace it with one of the AHAP files in Xcode. This is a way you can get a feeling for the different haptic possibilities .

Adding the prototyp video to your app

Next thing you need in the app is a video from your prototyp and import it to XCode. Click on “HapticSmapler” in the top of the right side > Build Phases > open Copy bundle Resources > add Video

Now you have to write a litte bit of code. Go to the ViewController.swift on the right side and scroll down until you finde the code line “@IBAction func playAHAP1( sender: UIButton)” Here you have to add following code:

@IBAction func playAHAP1( sender: UIButton) {

playHapticsFile(named: “AHAP/anja”)

//video

if let path = Bundle.main.path(forResource: “example”, ofType: “mp4”)

{

let video = AVPlayer(url: URL(fileURLWithPath: path))

let videoPlayer = AVPlayerViewController()

videoPlayer.player = video

present(videoPlayer, animated: true, completion: {video.play()})

}

}

Make sure the data name of your imported video is the same as my “example”. What does the code? When you run the app the video should be played if you press the first button.

How the magic happens

Probably you already know how it goes on? Now you have your prototyp video playing at the same time as the AHAP file. Go to a cutting programm and import your prototyp video. I am using Premiere. Tag the frames where feedback should be appear.

at 00:02:08 seconds

Then go to the Captain AHAP and tag at the same time position your feedback.

If you are ready copy the AHAP code and replace it in the AHAP file in your Xcode project. Now you you have your prototyping video in an app combined with your own designed haptic feedback.

And now?

I was looking for an easy way to show my costumers how haptic feedback could work in the app. This methode is not that much scalable but in combination with captain AHAP you can easy try many different haptic feedbacks . Unfortunality also the experience is lost because you can’t press any Button in your prototyp by yourself. I would’nt recoment it for user testings but it is a really cool way for your prototyping phase :)