NFC tapping user experience

[andmironov]

The problem

The Card-to phone interaction is not intuitive. A few specific examples illustrating that point are given below:

Hold card to the back of your phone to start screen

• We never mention that if you are already holding your Keycard to your phone you need to put it away and hold again for the connection to be established Design work needed;
• We ask to maintain "card to phone" connection even though it's not necessary all the time. It's necessary only when we specifically ask for it and show the image Design work needed ;
• No indication that the phone is "looking for a card". I suggest some animation + a hint "try moving the card around the phone to find the best spot with the connection " and a timeout "No cards found, try again?" Design work needed ;

Enter your pairing code screen

• There's no need to hold the card to your phone here, but it's never mentioned. I instinctively continue holding it and it becomes really frustrating to look for the pairing code and enter the code, while my phone is laying on the card on my desk Design work needed ;

The Solution

Step 1 (in progress)
Identify and address all the edge cases. Improve the copy.

Step 2
Visually explain and illustrate all the required interactions by creating animated imagery

[hesterbruikman]

Design: https://dribbble.com/shots/8379578-NFC-card-interaction

[andmironov]

sorry, already created a more complete issue #9365 forgot about this one

[andmironov]

check out https://github.com/status-im/status-react/labels/keycard_UX for more! :-)