<![CDATA[Login screen/Code input Design]]>Hello everyone, first of all I want to say that I am not a designer and dont know how to turn the following into reality, but its something that bothered me since I started using UT.

The design of the code/login screen seems outdated and old. Especially in comparison to the SIM Unlock screen it seems weird that this design was chosen as the first thing you see as you start your phone.

This is the current design:

photo_2021-04-12_22-15-45.jpg

It seems like there are a lot of symbols that are not really needed such as the + or . in a classical login code.

Now let us take a look at the SIM unlock:

photo_2021-04-12_22-18-04.jpg

In comparison to the login screen this design seem much more modern, clean and simple. It covers all the buttons you need to input a regular code consisting of only numbers. In addition an extra button could be added to trigger the regular keyboard.

let's also take a look at other Mobile operating systems such as Ios:

ioss.jpeg

While the goal obviously is not to replicate the ios look it shows that a simpler login screen might be more fitting for a mobile OS.

What do you think about this?

Edit:
There are currently two ideas on how to improve the Login screen:

1.
screns2-resized.jpg

A drastic redesign of the entire login

pros:

  • modern aesthetics
  • intuitive

cons:

  • probably more work (more research needed)
  • potentially doesnt follow UT design standards for convergence (more research needed)
  • length of pin is visible

pro/con:

  • closer to android and iOS

A click dummy has been created to try out this design: https://aaron.place:8018/index.php/s/ot9SEG5FWfH2nJE

2021-04-15_20-28.png

A redesign of the input field and other Improvements

pros:

  • might be easier to implement (more research needed)
  • closer to the rest of UT
  • no compromises in terms of convergence

cons:

  • still looks somewhat outdated

pro/con:

  • less close to android or iOS

@mateo_salta created some notes that provide information on what should be done:

I think we can improve just by removing the background behind the keyboard and allowing the password box to theme, maybe transparancy on that a bit.
I disagree with going back to the fullscreen dialer:

  • harder to type with one hand
  • too much like 'other os', we want to be diffrent, but also consistant and more usable, making things look like another os just for familiarity is not good
  • showing password length isnt good for security (true we only have 4pin right now, but hopefully will change)

Current notes:

  • matches system keyboard
  • nice to type with one hand
  • needs transparancy( i have wip pull request)
  • needs theme and removal of hardcoded background color
  • do we need 'cancel', user can back out other ways
  • theme 'emergancy' in a better way, bottom bar buttons are an artifact from old designs, word buttkns could be better as icons
]]>https://forums.ubports.com/topic/6022/login-screen-code-input-designRSS for NodeSun, 14 Jun 2026 00:36:36 GMTMon, 12 Apr 2021 20:29:15 GMT60<![CDATA[Reply to Login screen/Code input Design on Fri, 26 May 2023 09:49:55 GMT]]>@carrabelloy Please don't necro this thread for a comment that will earn you another warning to use English on the forum.

I will lock this thread now, as it has served its purpose by now.

]]>https://forums.ubports.com/post/73354https://forums.ubports.com/post/73354Fri, 26 May 2023 09:49:55 GMT<![CDATA[Reply to Login screen/Code input Design on Fri, 26 May 2023 05:19:39 GMT]]>@Keneda finde das immer noch am nesten schon im Darkmode

]]>https://forums.ubports.com/post/73342https://forums.ubports.com/post/73342Fri, 26 May 2023 05:19:39 GMT<![CDATA[Reply to Login screen/Code input Design on Wed, 29 Sep 2021 18:37:46 GMT]]>@messayisto It will be in the dev channel when the request for changes gets merged ( you can check on this link: https://github.com/ubports/unity8/pull/401 )

]]>https://forums.ubports.com/post/55789https://forums.ubports.com/post/55789Wed, 29 Sep 2021 18:37:46 GMT<![CDATA[Reply to Login screen/Code input Design on Mon, 27 Sep 2021 20:50:54 GMT]]>@capsia ah, forgot to ask; will the changes be included in devel-channel?

]]>https://forums.ubports.com/post/55698https://forums.ubports.com/post/55698Mon, 27 Sep 2021 20:50:54 GMT<![CDATA[Reply to Login screen/Code input Design on Mon, 27 Sep 2021 19:05:45 GMT]]>@capsia really looking forward to this!! thnks for your efforts.

]]>https://forums.ubports.com/post/55692https://forums.ubports.com/post/55692Mon, 27 Sep 2021 19:05:45 GMT<![CDATA[Reply to Login screen/Code input Design on Sat, 25 Sep 2021 20:07:59 GMT]]>@capsia
Thanks for the update and provided link. Your work is highly appreciated.

]]>https://forums.ubports.com/post/55605https://forums.ubports.com/post/55605Sat, 25 Sep 2021 20:07:59 GMT<![CDATA[Reply to Login screen/Code input Design on Sat, 25 Sep 2021 19:15:03 GMT]]>@3t_ed Hello! The first changes are targeting OTA20. You can check them here:
https://github.com/ubports/unity8/pull/401

Currently I'm working on some new improvements for the devices website, after that I'll add more features here 🙂

]]>https://forums.ubports.com/post/55602https://forums.ubports.com/post/55602Sat, 25 Sep 2021 19:15:03 GMT<![CDATA[Reply to Login screen/Code input Design on Sat, 25 Sep 2021 12:55:42 GMT]]>Just wondering how this project is doing. Being well aware devs have much on their plates, unfortunately not capable of adding anything prog involved, so not intending to push here. I am looking forward to seeing this project evolving and be implemented, especially an integrated ICE feature.

]]>https://forums.ubports.com/post/55580https://forums.ubports.com/post/55580Sat, 25 Sep 2021 12:55:42 GMT<![CDATA[Reply to Login screen/Code input Design on Tue, 13 Jul 2021 11:38:46 GMT]]>@capsia I just saw the latest QA. You guys are doing great work!

]]>https://forums.ubports.com/post/53036https://forums.ubports.com/post/53036Tue, 13 Jul 2021 11:38:46 GMT<![CDATA[Reply to Login screen/Code input Design on Tue, 29 Jun 2021 14:37:02 GMT]]>@rocky58 last time the old notification design on the welcome screen was brought up (i assume the media play back stuff would act as a notification bubble on the welcome screne) florian said it woud take a huge rewrite, and you might have to break thjngs beforwe they worked properly.

If its something you have the skills to do then Ill happily try and find the old canonical design documentation for you.

]]>https://forums.ubports.com/post/52617https://forums.ubports.com/post/52617Tue, 29 Jun 2021 14:37:02 GMT<![CDATA[Reply to Login screen/Code input Design on Tue, 29 Jun 2021 08:45:58 GMT]]>Hi @rocky58

You already have them in the drop down menu under the speaker icon...
There is a parameter in the settings to allow notification and quick settings...

]]>https://forums.ubports.com/post/52616https://forums.ubports.com/post/52616Tue, 29 Jun 2021 08:45:58 GMT<![CDATA[Reply to Login screen/Code input Design on Tue, 29 Jun 2021 07:27:21 GMT]]>Hi all,
I'm looking for a way to get multimedia controls on Lock/Login Screen. It's possible? It would be very convenient

]]>https://forums.ubports.com/post/52611https://forums.ubports.com/post/52611Tue, 29 Jun 2021 07:27:21 GMT<![CDATA[Reply to Login screen/Code input Design on Tue, 22 Jun 2021 09:16:24 GMT]]>@capsia cool, there was a draft pr that unblocked rotation i had - it just needs the animations applied to it - lomiri already has a layer that makes sure the apps underneath the lock screen are the proper rotation before unlocking, then @CiberSheep had some work on moving some elements too 🙂 hopefully some pieces to the puzzle to help

]]>https://forums.ubports.com/post/52361https://forums.ubports.com/post/52361Tue, 22 Jun 2021 09:16:24 GMT<![CDATA[Reply to Login screen/Code input Design on Mon, 21 Jun 2021 17:47:09 GMT]]>@capsia said in Login screen/Code input Design:

The accounts icon was already circular when I started, I've just used the one from the Suru theme

That icon is used through out the system such as in system settings, idk where else it's used, but I think when you have a profile picture, it should use the same shape as the people in the contact/messaging app, rather than a circle, I dont think its as big of an issue if someone doesn't set a image for there account, I think that the Ubuntu Shape would make the login screen fit with the system a bit better.

Youre welcome for the suggestion, and thank you for all your work! 🙂

]]>https://forums.ubports.com/post/52330https://forums.ubports.com/post/52330Mon, 21 Jun 2021 17:47:09 GMT<![CDATA[Reply to Login screen/Code input Design on Mon, 21 Jun 2021 17:36:48 GMT]]>Hello,

@mateo_salta Thank you! Having a greeter that is able to rotate would be great, so, yes, that's part of the plan. I just need to do one step at the time and I'll be there. 🙂

Working with @UniSuperBox is awesome! Thank you very much, I've learned a lot with you!

@PhoenixLandPirat Thank you for the suggestion! The accounts icon was already circular when I started, I've just used the one from the Suru theme :upside-down_face:

https://docs.ubports.com/projects/icons/en/latest/

]]>https://forums.ubports.com/post/52329https://forums.ubports.com/post/52329Mon, 21 Jun 2021 17:36:48 GMT<![CDATA[Reply to Login screen/Code input Design on Mon, 21 Jun 2021 16:46:22 GMT]]>@capsia I love the login page with your picture, however, maybe it should be the Ubuntu Shape rather than a circle? bit more Suru styled?

]]>https://forums.ubports.com/post/52327https://forums.ubports.com/post/52327Mon, 21 Jun 2021 16:46:22 GMT<![CDATA[Reply to Login screen/Code input Design on Mon, 21 Jun 2021 13:19:44 GMT]]>Nice! @Capsia did you see the new qa - that is looking awesome! Are you merging the narrow view greeter and wide view? ultimately we are wanting the greeter to rotate 🙂 Very awesome to see your work on this with @UniSuperBox

]]>https://forums.ubports.com/post/52321https://forums.ubports.com/post/52321Mon, 21 Jun 2021 13:19:44 GMT<![CDATA[Reply to Login screen/Code input Design on Fri, 28 May 2021 03:35:22 GMT]]>@capsia well, the code is there for multi user, just not enabled yet, so we do want to be careful to theme/move existing things. eventually we will need some way of making a fake extra account to test.

]]>https://forums.ubports.com/post/51234https://forums.ubports.com/post/51234Fri, 28 May 2021 03:35:22 GMT<![CDATA[Reply to Login screen/Code input Design on Sat, 01 May 2021 19:39:13 GMT]]>@cibersheep Thank you for the explaination. Now it's clear, if we can hide it when external keyboard is not detected as @mateo_salta suggested would be better.

Sure, we can use the back icon. Initially I've thought it more as a switch between screens than a button to go back, but since we currently have only 2 screens (greeter and login) and no multi-user or guest apps the back button makes more sense. I took the idea of the swipes from scopes. I liked scopes very much 🙂

]]>https://forums.ubports.com/post/50263https://forums.ubports.com/post/50263Sat, 01 May 2021 19:39:13 GMT<![CDATA[Reply to Login screen/Code input Design on Sat, 01 May 2021 10:58:33 GMT]]>yeah, the keyboard is for external keyboard/mouse set-up, but for some reason there is not a check to see if one is not connected, if we can fix that it should not show on touch only.

]]>https://forums.ubports.com/post/50255https://forums.ubports.com/post/50255Sat, 01 May 2021 10:58:33 GMT<![CDATA[Reply to Login screen/Code input Design on Fri, 30 Apr 2021 21:14:14 GMT]]>@capsia said in Login screen/Code input Design:

I don't understand the function of the keyboard icon. Can't I just tap on the input field to open keyboard and swipe down to hide it?

When you connect an external keyboard, the OSK doesn't show. If you tap on the icon, it will.

My idea for the back button is to use a left to right swipe to go back.

I think is better to use top left arrow than swipe, as is the general way to go back in the system (Camera is an exception, is ones of our divas)

]]>https://forums.ubports.com/post/50248https://forums.ubports.com/post/50248Fri, 30 Apr 2021 21:14:14 GMT<![CDATA[Reply to Login screen/Code input Design on Fri, 30 Apr 2021 20:12:30 GMT]]>@purplevvay Hi, your designs look great!
The icons look awesome, the only thing I would keep as full text is the emergency text, because it would be more visible. Also the arrow at the bottom is inverted, in the system apps ( contacts, weather, calculator... ) the arrow is oriented the other way.

Sure also the mobile landscape mode should be designed. I've put the user icon on the left of the username in my designs to fit also this need. Otherwise the keyboard might overlap the login field. Making it look the same on all screen sizes would be better for convergence. On my phone the space available is less than half of the screen height (other phones with different screen ratio might have less space).
screenshot20210430_215742063.png

I don't understand the function of the keyboard icon. Can't I just tap on the input field to open keyboard and swipe down to hide it?

My idea for the back button is to use a left to right swipe to go back. I've thought the login as a succession of screen displaying all users and quick app access. Swiping left/right would allow you to switch screens.

Schermata da 2021-04-30 22-01-58.png

@mateo_salta said in Login screen/Code input Design:

so, interesting, if we get rid of the box background completely, error text is not really visible. It is looking good replacing the text with white to match. here are screens, one no background, one with .3 opacity

Maybe we can change the way we display errors:
Schermata da 2021-04-30 22-07-58.png

]]>https://forums.ubports.com/post/50246https://forums.ubports.com/post/50246Fri, 30 Apr 2021 20:12:30 GMT<![CDATA[Reply to Login screen/Code input Design on Fri, 30 Apr 2021 10:11:44 GMT]]>so, interesting, if we get rid of the box background completely, error text is not really visible. It is looking good replacing the text with white to match. here are screens, one no background, one with .3 opacity
screenshot20210430_050432558.png screenshot20210430_050857603.png

]]>https://forums.ubports.com/post/50228https://forums.ubports.com/post/50228Fri, 30 Apr 2021 10:11:44 GMT<![CDATA[Reply to Login screen/Code input Design on Wed, 28 Apr 2021 21:29:39 GMT]]>@purplevvay try placing it top left crner. As in the rest of the system 😉

]]>https://forums.ubports.com/post/50203https://forums.ubports.com/post/50203Wed, 28 Apr 2021 21:29:39 GMT