Proposal 78214: Internet Identity upgrade, it's about to get pretty

[nmattia]

Hi everyone!

Been a bit of a silent month, due to a mix of holidays and very hard work.

As promised a month ago in the August Roadmap Update, we have allocated more resources to making II pretty-as-can-be (and functional, too). Thanks to David A. we’ve been able to restructure most of the styling code which will allow us to easily give II more personality and a more “modern” feel.

Speaking of modern, we’ve submitted a proposal to upgrade II’s UI slightly; the kind of upgrade where you go “I can’t put my finger on what’s changed but I like this more”:

Did you know there was an FAQ?

Please feel free to try it out here before voting! (use this link if you want to authenticate from another dapp)

---

Ok, so what’s next?

Well, now that we’ve cleaned up the code, we’ll be moving fast and trying various new design ideas. As mentioned, this proposal/upgrade is conservative on purpose, but here’s something to whet your appetite…

We’ve got a ton more ideas which we’re looking forward to implementing and putting out here to get your feedback on. Please don’t be gentle, let us know what you think!

[coin_master]

Great update, I like the new UI improvements
I just noticed the margins and paddings are a little off on Mobile “Iphone”

[peterparker]

Good catch . I forwarded the info.

[ysyms]

Replacing rectangles with rounded rectangles may make the circle background color block look more natural

[LucidSamuel]

Very glad to see important UI/UX changes are been made to eliminate the previous classic feels that users get while using ICP tools and embrace a more modern approach.
Great work!

[kejunter.eth]

Nice job. The UI improvements surprise me. It makes the FAQ more clearly.

[Oviareski]

Great work for an Proposal Update!!

[justmythoughts]

Not to be an accessibility downer, but the gradient on dark mode hampers the visibility a bit.

Also, while the gradient is pretty, it’s sort of distracting from a usability perspective.

I’m a big fan of the framing rectangle coloring though and the “!” colors to draw the user’s attention.

Also, on dark mode the “100% on chain…” fades away. You might want to do an image swap for a lighter version

[cryptoisgood]

I love it. Little things make a huge difference. I think we need a footer too.

Something that says icp and links to documentation. Every website has a footer it just make everything feel more natural.

[nmattia]

@coin_master

I just noticed the margins and paddings are a little off on Mobile “Iphone”

Ah, very good catch, thank you! We’ll continue with the current proposal and will submit a follow-up one with more fixes very soon.

Ticket: Fix "Warning" borders on iOS · Issue #856 · dfinity/internet-identity · GitHub

[nmattia]

@ysyms

Replacing rectangles with rounded rectangles may make the circle background color block look more natural

Hi, do you mean that the “future” designs should have rounded corners? Something like this:

I agree that it looks very nice!

[nmattia]

@justmythoughts

Not to be an accessibility downer

Please be! Well, maybe not a downer, but accessibility is important and the point of sharing those upgrades and ideas here is to gather feedback.

@justmythoughts

the gradient on dark mode hampers the visibility a bit.

@justmythoughts

the gradient [is] sort of distracting from a usability perspective.

Cool, noted. We’ll try to find a way to work around that. Just to clarify, the screenshots with the gradients are still work in progress and won’t be released as part of this proposal.

[nmattia]

@cryptoisgood

Something that says icp and links to documentation. Every website has a footer

Yeah that’s a very good point. We’ve been trying to figure out the best way to retrofit a footer in the current design and generally make II look more like a website/app as opposed to just an auth wizard

[ysyms]

yes,Including the identity anchor input box and the authentication button can be changed accordingly

[nmattia]

And it’s live!

Thank you all for your feedback and feel free to report any other issues you might run into. We’ll get started on the known ones asap.

[arifpateldpk]

Great work! The UI improvements are Awesome

[nmattia]

Hi everyone!

We’ve fixed the issues brought up here and some here, and submitted a follow-up proposal: 78551

Note that we went ahead with some of the new design (though a little improved) because some people really, really liked it! We left out the dark mode for now until we figure out the best way to work around the usability and accessibility issues mentioned here.

Cheers!