I made a minimalist webapp for public-key encryption. How can these problems with its UI/UX be addressed? [closed]

Question

chausies.xyz/encrypt

I probably don't know the first thing about UI design, so I wanted to get some more expert input. Forgive me if this is an inappropriate question to ask here.

Half of my feedback has people praising the minimal design of the app, and how it's simple without a hundred options overwhelming them. They use the site quickly and easily without a hitch. The other half of the feedback is people just saying "the UI is shit", with no one giving anything concrete I could change or fix. So does anyone have any idea about what these people find "shit" about the UI?

Also, one problem in particular that has come up too often is they use the webapp wrong and get confused, even though the exact 3 uses are written explicitly at the top in simple language as the first thing. For example, users will enter both a Password and a Message (probably expecting the Message to be encrypted with the password as the key), but that's not one of the uses of the app written right at the top. How can I make it any more obvious how to use the app? I'd very much like to avoid making separate tabs for the 3 uses, to keep the app minimal and simple, but am I just wrong to have that sentiment?

Finally, the idea was that the site could be understood and used by a complete layman unaware of cryptography, but seen by a crypto expert and quickly found to be legit. So my last three questions are:

1. Is the language simple and intuitive enough to be grasped by a layman? If not, how could I improve it? One of the big things you'll notice I did was to call a public key an ID, a term much more familiar to people.
2. Is the CAUTION placed optimally? And should it be made more concise?
3. Is the security jargon placed optimally? The big points I tried to place at the top so even the laymen can feel secure seeing it (the webapp uses only client-side JavaScript, doesn't interact with any server, and runs perfectly offline). The more technical points that I felt were still necessary to put in a crypto expert's face, I put at the bottom (the website is fully open source, served by GitHub, and the files are guaranteed to be delivered via TLS from the GitHub repo for the webapp). Finally, the actual in-depth security overview is linked to as a separate webpage, in case a crypto expert wishes to see that. Is this done alright? Is it too much/overwhelming the simplicity of the main webapp?

Lastly, if there are any general pointers about the overall look of the website, and how to make it more pleasant to look at (if that's what it needs), that would be welcome.

Answer 1

It took me some time to understand what you were asking for, so I am going to try my best with what I understood.

I checked the website, and for what functionality you are providing, I find that the UI is fine. It is minimal, and it does what it's supposed to. Of course, you can make it look more "pretty" or "fancy" but that is NOT THE MOST IMPORTANT aspect of UI/UX design. However, there can be some improvements made in your app's usability.

When keeping usability of a product/app in mind, I have the following suggestions -

Reduce friction as much as possible

Get to the ‘Aha’ moment ASAP. Don’t make the user take time out for reading long text explanations. They have signed up for a service, not for a tutorial. Your main aim is for people to start using your product immediately.

You have this explanation on your app - "No one can decrypt an Encrypted Message except for the person to whom the ID belongs. Everything uses secure client-side javascript, so no information leaves your device, making the entire webapp run perfectly offline. Your device has already generated a secure random password for you by default, if you want to use it."

I think it's a lot of text. What if you replace it with something like "Safe, secure and no information leaves your device". It's the same message, with a lot of fewer words.

And secondly,

Providing guidance is not only a way to ease the users into the product, but it also provides a golden opportunity to add value to their experience, and enhance their perspective of the service

Guiding users is important. But it doesn't need so much text or explanation. You should consider some separation of your 3 uses. Right now, it looks a little misguiding. Use tabs to alternate between views within the same context. Example below -

This helps to reduce cognitive load. Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.

Hide your technical explanation from the general users. You can consider providing a link to another page where you explain all the technical aspects and In-depth explanations; that way, those who are interested in finding out more, have the chance to do so by clicking on the link.