Slack is everyone’s favorite project/team communication tool at the moment.
It does a very good job at what it’s been designed for and especially makes registration, setup and sign-on processes an easy job.
This is a modal screen of the initial signup with a new e-mail address (or in my case, adding a new team). I like the generous and error-free design that has been applied here:
- No unnecessary UI elements or information
- Explanation on what has been done and what’s the task at hand
- Additional information on how to continue
- Focus state is already set to the first input field so I can start entering text immediately
- Field focus automatically jumps to the next field once I’ve entered a number
- Pasting the code is also possible
- Only digits can be entered
InVision is my favorite tool when it comes to prototyping user flows, reviewing designs with clients or collaborating on design projects with a big number of coworkers and stakeholders.
It has got some limitations and I’m still waiting for a couple of sorely needed updates (Silverflows! Prototyping! Please!), but it still is my web platform of choice.
To a good extent that’s because the overall user experience of the web application is very nice: Generous design, just the right amounts of white space, clever shortcuts and keyboard support, well-designed process flows and lots of lovely details to discover make it joyful to use.
One example is this dialogue for starting a new project.
Sure, there would be more „efficient“ ways to achieve this, using more conventional and „learned“ UI elements and less screen space. But in the way, InVision presents these initial options, it dedicates full attention to this important step, removes all unnecessary clutter and enables a clean and beautiful entry to a new project.
Considering the fact that creating a new project is a decision that is (or should be) really intentional, since these initial settings affect the whole project and are not so easily to be changed later, the fullscreen modal is the right UI choice.
- Only relevant UI elements at the time are shown
- It’s easy and fool-proof to cancel and go back
- All available options are being shown and illustrated nicely
- The most common option is preselected, allowing for a very quick start
- Error-free design by toggling the CTA’s active state only when text has been entered