Day 5: Fluent Windows Hello

Today is day five of my 30 Fluent Designs in 30 Days Challenge, for today I decided to focus on the “Windows Hello” authentication window for logging into Windows and Apps.

Windows Hello Concepts

Current Windows Hello Modal

As you can see below, here is an example of a Windows Hello modal. There are actually a few variations but this seems to be pretty common…

Example Windows Hello Modal

There are a couple things I don’t like about this current design…

1. It’s a bit difficult to see what app you are actually trying to verify, as you can see “Enpass” is squeezed into one of the sentences but you almost miss it if you aren’t looking for it.
2. There is no user profile image, only the name of the user. I don’t know about you but I look for my profile image before I look at my name, it’s so much easier to see quickly.
3. There is a lot of text just kind of dropped on the screen.
4. What happens when you click “Ok”? I have never really tried it that I can remember. Wonder if there is a better label for it?

New Windows Hello Design

Let’s take those issues and see if we can improve the situation, as you can see below I have two versions…

Closeup of Modal Concepts

1. In my design I make it very clear which app is requesting additional permissions, in this example I’m using the cool app “Coini” by Timo Partl
2. I reduce the amount of text on the modal, by merging a couple key elements of two sentences together and by removing the modal title.
3. I dropped in the user profile image for quick recognition
4. “Sign-in Options” sits nicely under the user’s name, my one issue I have with that though is it’s a bit difficult to tell it’s a link. Could do a nice reveal on mouse hover though.
5. The modal on the left the entire content pane has a colored acrylic applied which might be a bit much for some people’s tastes.
6. On the right, I added a border and drop shadowy glow to the profile photo, the main content area is much less transparent and includes a slight gradient and the action buttons are in their own section with much more transparency to it.

Modals with Coini Background

Wrapping Up

That’s really about it for this design, quick and easy design but fairly large emotional change between the old design and new ones.

Which modal version do you like better? Left or Right?

Source Adobe XD File: Download (.zip)

Thanks for following along, leave your feedback and suggestions.

Micah

http://www.krazier.com