I am currently working on a app that has to display a mnemonic phrase.

A mnemonic phrase is a list of 12 words that act as a seed for a private key.

Since the mnemonic phrase essentially is the private key, it needs to be displayed in a way that takes into account privacy, security and clarity.

Ideally, the UI of this app should offer some guidance or information, conveyed as simply as possible, about the mnemonic. For example:

  1. Tell the user the mnemonic should not be written on a computer, only on paper and kept securely.

  2. Make the user confirm writing the mnemonic.

  3. Ensure the user understands the importance of the mnemonic.

I am not sure how to design this display mnemonic screen.

Here are some of the thoughts I have relating to this.

  1. Give a lot of danger cues. Make borders or text red, add ! icons, grab the users attention.

  2. If I display information textually, I might run into wall of text issues. No one wants to read a big chunk of text.

  3. The presentation it's self, do I display each word one by one? If so, do I let users go back? If I give them too much freedom, for example to go back or see all the mnemonic at once, will this affect security?

  4. Do I put in a checkbox that says something like I confirm I wrote this down? Is that sufficient?

What are your suggestions for a good UI / UX design of a display mnemonic screen?

  • Have you considered using inline notifications (something like Bootstrap alerts)? You could display these with a warning icon at key points of the page, but be sure not to overdo placement.
    – user68158
    Jun 28 '18 at 13:43
  • Is it about the screen (user settings) where i enter my mnemonic or about the screen where i need the mnemonic? In general, my understanding of a mnemonic is that is not essentially the password.
    – rhauger
    Jun 28 '18 at 13:47
  • @rhauger It is the screen that provides the mnemonic right after the registration. Also, depending what you mean by password, you may or may not be correct. The mnemonic is the private key in a public-private key encryption system. If we think in terms of bitcoin, the mnemonic is the private key of the wallet, which means you can access the wallet and perform transactions. This is why security is paramount.
    – mayk93
    Jun 28 '18 at 14:03

I hope that i got it right and created a small wireframe with my idea. I would definitely make users confirm that they have saved their phrase. Of course you can add a sentence where you say what the phrase is for.

enter image description here

edit: enter image description here

  • 2
    Thank you! Yes, the general idea was something I had in mind as well. My concern is about the details of doing this. For example, the more I think of it, I think I will make a second screen where I will hide the mnemonic and have users type it back it, presumably from the paper. In addition, I'm still not sure wether I should display it all at once ( risking someone taking a photo quickly, for example ) or display it word by word ( risking someone overlooking the user to copy or memorise each word ) Also, still thinking of the UI cues I should give to emphasis this is a important step.
    – mayk93
    Jun 28 '18 at 15:27
  • How about a button to show the phrase like "i'm in a save environment, show my passphrase" and you can only confirm if you clicked that button, i add the image above
    – rhauger
    Jun 28 '18 at 19:20

Some great ideas have already been chatted about above, but I would think of users with visual disabilities and how they would interact with this screen - would the words be read aloud? Saved in a different way? How would they know to reveal the pass codes? (This is a problem inherent with wallets in general.)

Also, if people are prone to taking a photo, they are going to find a way regardless. A screen or messaging beforehand to make sure they are not being overseen could help more - and a quick additional step would reinforce the importance of what a user is doing, especially if they are new to the tech and the space.

Would hesitate to use "danger" cues - it's not dangerous, rather a matter of high security and I think there are subtle ways to distinguish this. Deep blues and whites tend to give a person a sense of security, rather than reds, which is alarming and you don't necessarily want to cause a user to be worried, just aware and secure. Depending on how the rest of the app looks, I would go for a minimal, "Focus on what I'm saying" design. More importance on hierarchy of font, so a user knows what is important, and a sober color scheme, compared to the rest of the app. Make the box with the pass code clear and viable.

Do you have the ability to link to further explanations of what a pass code is and further information to help a user who may be new to the space and the tech? Will you have clear information that this is NOT a password, this is even more important? Depending on your intended audience, this is a new security thing in a new tech space for most people, and a bit of hand-holding clear language never goes amiss.

  • Thanks for the answer! You are spot on about visually impaired people. Having a read feature would be good for them, but also dangerous if done wrong. Hmmm, I'm actually curious if there is a way you can restrict a read aloud feature to only work with headphones. And this too opens up it's own can of worms. In the end, I went with a red / danger design that breaks from the rest. I designed the mnemonic views different from the rest to emphasise importance. And while you make a good point with blue saying security, for this particular application, I want to make sure users don't screw up.
    – mayk93
    Jun 29 '18 at 9:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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