I'm working on an app so user can ensure the products they are going to buy is not counterfeit and tracks its shipping.


To do so, we went for a form where people input a product's security code and submit to check its authenticity against our database.

First version was quite naked so I tried to add a shield to the background, but It doesn't feel right.


  • How can my interface express its part of a authenticity process?
  • extra: Would a chat interface give more confidence in the process?

default form form with background shield

3 Answers 3


I am not quite sure I understood the term "product security code". Do you mean the shipping "tracking code" provided by a postal service?

I am asking because the question is "do people have to trust you and your service?". If YES, so if the service you provide handles data of the customer that can be abused, you have to build TRUST.

The biggest levers in building trust are:

  • Trust labels (certified connection, certified data handling, etc. Downside: Possibly expensive)
  • Customer reviews (not only the positive ones)
  • Transparency (users want to understand what's happening)
  • Personal contact (so yes, I think giving out a telephone number is great. Chat is nice, yet expensive). People want to see "There is a person out there I can talk to" - even if they decide not to.

"Secure connection" is also a trust indicator and can usually be seen in green and with a lock-icon (take a look at random e-commerce shops, you will find it).

  • product security code refers to a code present on the product that user input to control the authenticity of the product Commented Oct 21, 2015 at 13:44
  • My question aimed to the direction, if the "security status" is en pair with "credit card credentials", for example. I tried to measure the generated friction for the user: "would she give you the data without feeling unsafe?" Maybe you can answer that better.
    – Jan
    Commented Oct 22, 2015 at 7:30

There are many ways to approach this. Instead of a shield I would simply use a green lock icon above Secure Authentication and I would change the wording to just simply Authentication.

You can also use a progress bar similar to this, where you can show stages including the authentication stage.

enter image description here


  • What happens when you click authenticate?
  • What's the next screen?
  • Have you thought of just texting the authentication code to the user and they can copy and paste to complete transaction?

If you want to make this form look more reliable than you should use green color somewhere, whether as a badge or in button & if you are using badge then try to put that badge in the bottom with some information that how it is secure.

  • what do you mean by a badge? Also why the green color? Commented Oct 21, 2015 at 13:34
  • @edouard Lopez The badge is something like an icon, but contain text, for example you can check ebay as they have the triangular badge of payment security. For reference go to the [link] (thumbs.dreamstime.com/z/…) Also green & blue is the easiest color for eyes to process the symbol of reliability. Commented Oct 27, 2015 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.