We all have experience using free online tools. Many of them don’t have a very friendly user experience, which can be frustrating at times. It can also be hard to trust them, since their source code isn’t publicly available.
As a recent project, I took it upon myself to create several fresh, online tools that bring first-class UX practices to this space, with open source code and no ads. My goal here is to demonstrate what can be achieved by applying high quality design principles to existing problems, and I think the difference is quite amazing.
Today, I am happy to announce the first of these tools, which is a secure password generator. A screenshot is below, you can also try out the password generator here.
Here, I am applying several important user experience concepts. I hope that this software is useful, both by applying these concepts well, and also providing an example of how to use them practically.
- Chunking — With chunking, a more complicated sequence of information is divided into smaller, digestible pieces. This is frequenly done with phone numbers, for example, the following phone number is formatted in three chunks: (206) 555-1234. Wholesome:Passwords applies this to passwords, formatting them with hyphens, like so. This will make it easier to copy or read:
2vE-*!i-hIs-17C - Hidden Complexity — Many password generators present the user with all of the options upfront. Instead, I give the user two options. They can either use the simple slider bar to choose from a number of pre-prepared formats, or they can click the advanced button to see all options. This can save the user a lot of time, while still giving them access to more controls if they need it.
- Immediate results — The user sees, and can copy a password immediately. They don’t need to click a “generate” button. In fact, the password is one of the first things they see when the page loads. This helps them get to what they’re looking for very quickly.
Those are only a few of the principles that I applied when designing this app. Keep reading to see more of the feature that are currently built in — I will be excited to expand the functionality in future as well.
Responsive Design
Desktop and mobile devices each make up a significant fraction of modern web traffic. Software should be designed to work well on both. That is why Wholesome:Passwords implements a responsive design, which we can see in action by comparing the desktop screenshot above and the mobile view on the right.
This is done primarily using media queries, which adjust the layout to fit better onto a smaller, mobile screen. The interactions, too, are significant: when the user taps on the password, they will immediately see an option to “copy” on the iPhone.
Multiple passwords
If someone is creating multiple accounts, they may need a large number of passwords fast. To help facilitate this, Wholesome:Passwords includes a button that will give the user a list of several passwords. Could be 5, could be 100.
Advanced options
Some websites have very specific password requirements. If none of the default options work (which should be fairly rare, as the defaults are designed to work with most sites), then help is just a button click away.
The wrench icon pulls up an advanced menu which allows for a specific policy to be entered. These options are designed to be both simple, and to also match the types of checks that password policies typically enforce.
Share links
When using the tool, the browser link updates to save some of the current generator configuration. This makes it easy to bookmark one view, or to embed it into documentation. Below are some examples of these share links, which we can use to pull up specific views in the tool:
Conclusion
There are a lot of password generators available. This one, I hope, will help demonstrate some valuable UX concepts, while also providing a faster, more friendly experience to those who are interested.
The source code for this project can be found on Github, with the user interface in the project Wholesome Tools Web, and some of the password generation functionality available in an NPM module @wholesome/passwords. This project is licensed under GPL v3.