Project

General

Profile

Feature #1441

login page improvements

Added by cpg about 7 years ago. Updated about 7 years ago.

Status:
Closed
Priority:
Low
Assignee:
Category:
UI/UX
Target version:
-
Start date:
06/13/2014
Due date:
% Done:

0%


Description

the login page is a little plain. here are the things we did to help the user in the iOS app:
  • the username used last to successfully login is remembered in the username field
  • tapping next takes one to the next field (this is done already - nice!)
  • there is an explanatory pop up on login errors. In iOS, the head-up-their-butt attitude from apple does not allow to link to www.amahi.org (or /signup to sign up or /forgot to reset the password!)
  • for the rest of the page there is an icon and a very slight gradient in the background color. It's simple and it makes it more personable.

one can imagine quite a few changes in the login page. lots of varieties, but we like simple.

History

#1 Updated by ming about 7 years ago

About login errors—I had a plan of showing it as a message below the sign in button if you don’t mind. It is possible to place sign up and reset password links, just tell be how to show it—as links or as buttons.

About the background—I still wish to save the action bar at the sign in screen to avoid flickering between the main screen with the drawer and files after showing the sign in screen on the first launch, but I’ll try to show it fullscreen first.

#2 Updated by ming about 7 years ago

I fixed the layout Bogdan pushed a bit to be less hacky (no offence), but I have a notice. The EditText and Button styling you applied is actually from Gingerbread and lower, so it is kind of deprecated. That’s why you see the orange feedback while pressing the button. For the same reason I didn’t implement it immediately—Ice Cream Sandwich uses blue underline styling for the EditText so it becomes invisible on the blue background. My idea was to use a fancy button instead of blue background to make the screen more personable and use default view styling at the same time. Does it make sense?

#3 Updated by megabitdragon about 7 years ago

No offense taken. We just wanted a blue gradient background. The rest of the hacks were just side effects of the background change. I personally like the fancy button but let's wait on Carlos for that.

#4 Updated by cpg about 7 years ago

  • Priority changed from Low to Medium

The button as it is in master/efcdbd6e is great.

I was not sure what was the error message that was introduced, however, i just checked and it just says "Authentication failed."

Predictably, people are confused about credentials, so I requested that a more explanatory message and a link to the password reset page be placed in the error message. Obviously, if we can

  1. make the link to the password reset page clickable, and
  2. leave the message long enough for people to read it comfortably and click it if the need to

that would be best.

#5 Updated by ming about 7 years ago

Mmm, sorry, but I don’t get your position of supporting guidelines and using resources from the Android 2.+ at the same time. For me it looks like outdated resources + custom background vs. up-to-date resources + custom button. I don’t want to provoke any conflict here grown from the button, so I’m just saying from the perspective of the current Android state and best practices (don’t use resources from previous versions explicitly). Basically it is like “do not use textured background” in iOS words :-)

About the text. If I change the error message to appear just below the form and saying “Username or password is not correct. You can reset it if you wish.”—will it be OK?

#6 Updated by cpg about 7 years ago

  1. about the android 2+ resources, etc., i have no idea what you are talking about. for me the login page has to have the logo, some subtle styling to it. i have no idea about button issues or backgrounds, etc. however this is done, i don't really have a say or opinion. if i look at some screens i see that dropbox has a little video (that is nice, but we do not need that), facebook has a slight gradient, etc. i think we should aim for something nice and simple with some branding and some slight styling
  1. about the login error message, this may be better: "The username/email or password are not correct. Please try again. Forgot your password?"

(There is no need to ask people to sign up from the app, because it takes an amahi HDA installed to get things going for now anyway)

#7 Updated by ming about 7 years ago

If you want to take a look at the app better install it, because images you found are outdated, i. e. from pre-4.0 era. The current button and edits are now as well. The current design: buttons, text.

#8 Updated by megabitdragon about 7 years ago

I totally agree with Artur we should use UI elements from android >4. I used the old ones as a quick hack to get the gradient background. I didn't look at any of the new commits so I can't comment on that.

#9 Updated by ming about 7 years ago

Another possible point against the background—the URL is blue.

#10 Updated by cpg about 7 years ago

I did not really concern myself with the API calls or elements used. I listed what parts we care about: what affects the users (a nice-looking login page with some identity, rather than an aseptic bland one). New style controls are nice.

i have said multiple times what we aim for. aiming for usability is important. aiming for perfect adherence to guidelines is definitely not a goal with the highest priority. it's only a nice thing to do.

this is the way the login error shows https://dl.dropboxusercontent.com/u/364883/Screenshots/ss99.png
I think it's not great, but not horrible. If the link color cannot be changed to be stronger (darker) blue, what is a decent background to use?

#11 Updated by ming about 7 years ago

I pushed my suggestion as a branch.

#12 Updated by megabitdragon about 7 years ago

I like the way edit boxes look and I like the button as well. Still a little plain I would say. I know you said you don't want to remove the action bar but let's try to remove it, keep the white background, and add the amahi dice in the center above the sign in icon.

#13 Updated by ming about 7 years ago

Done, I also put screenshots to the Dropbox directory for easy comparison.

Bogdan pointed out my English issue. Carlos, sorry if I was rude about outdated screenshots. I was trying to say that screenshots from Google Search results are mostly outdated, I suggest to install the app if you want examples. Newer versions have different design.

#14 Updated by cpg about 7 years ago

  • Priority changed from Medium to Low

low priority. let's not address this and leave things in a branch. let's wait to settle on this after google i/o in case there are new guidelines.

#15 Updated by ming about 7 years ago

Text fields remain the same.

#16 Updated by ming about 7 years ago

  • Status changed from New to Feedback
  • Assignee set to cpg

#17 Updated by megabitdragon about 7 years ago

I know this is low but can you please provide some feedback. Thank you.

#18 Updated by cpg about 7 years ago

  • Assignee changed from cpg to ming

please go ahead and merge it.

this was not my cup of tea, design wise. but i can live with it.

#19 Updated by ming about 7 years ago

  • Assignee changed from ming to megabitdragon

#20 Updated by cpg about 7 years ago

  • Status changed from Feedback to Closed

Also available in: Atom