Author Topic: Usability Improvement Login Screen  (Read 8811 times)

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Usability Improvement Login Screen
« on: May 25, 2010, 06:06:49 am »
Hi,

i found FO some days ago and i like it. It is the only pure open source system regarding project management.

i like the user interface a lot but as a am an UI designer i want to contribute to the project in those parts i think the UI needs an improvement.

i begin with the login screen.

i will post a screen which shows the login screen which is used right now and in that screen i have comments why i think there needs to be some optimization made.

improvements should be easily adopted by the FO team i think, its only some css

greetings

« Last Edit: May 25, 2010, 06:19:16 am by Snoozer »

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #1 on: May 25, 2010, 06:39:03 am »
okay the first screens shows my approach to let the formular elements "username" and "password" to be positioned at the same place and put the other elements in different places...

but to say it right now, thats not my favorite one, i just wanted to show these screens too...

if you cant see the language selector the interface is better (screen1). but if you click the "options" button the interface isnt good anymore. because the login button is above the language selector....and because again the user sees to much information. focus should be - as i mentioned before, one the username and password formular element and on the login button...

i attached two screens, first one without the language selector, second one with it, when the user clicks the "options" link


« Last Edit: May 25, 2010, 06:48:26 am by Snoozer »

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #2 on: May 25, 2010, 08:12:50 am »
okay these are the screens i developed.

sorry that always one is black and white, color information was left out while optimzing the pngs, but you get the impression anyway

here is what i did:

1. put the form field below each other, so the mouse doesnt need to be moved that much, also using the Tab key is now better ; align the form fields vertically is often better than horizontallay...

2. changed the wording from "Forget password" to "Lost your password?" (the same like in the Worpress login screen

3. changed the wording of the button from "Login" to "Log In" (but thats not necessary - it is used this way also in the wordpress login screen). of couse the button is now better "visible" because there are two words

4. changed the wording from "options" to "Show languagues" respectivly "Hide languages". I mean there arent more options, so why not telling the user what is behind the link...so now he doesnt need to click it for getting to know what is behind

5. put the links "options" and "forgot password" out of the box und put it below. now the focus is on the 3 elements which are most important

6. If someone klicks the link "Show languages" the form field is shown above the "Log In" Button. besides the link then will be named "Hide Languages". If someone klicks the link "Hide languages" the form field for languages will of cource go away

7. i changed the fonts for these two link...i like the black bold one most...
 
thats it...


it shouldnt be difficult to implement it.

What do u think?

greetings




Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #3 on: May 25, 2010, 08:14:12 am »
here are the screens

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #4 on: May 25, 2010, 08:15:14 am »
changed the fonts of the link, rest is the same

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #5 on: May 25, 2010, 08:16:33 am »
i would take this version (or the one before)

again, just made the fonts bold, rest is the same...


any comments?


selyay

  • Freshman
  • *
  • Posts: 20
    • View Profile
Re: Usability Improvement Login Screen
« Reply #6 on: May 26, 2010, 05:12:07 am »
i like the last one but isnt it too clean.May be a tip tracker can be put bottom of the page

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #7 on: May 26, 2010, 05:23:02 am »
What do u mean with a "tip tracker"?

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #8 on: May 26, 2010, 06:17:12 am »
for "guest readers": you can see the screens only if you are logged in.


cabeza

  • Administrator
  • Hero Member
  • *****
  • Posts: 1004
    • View Profile
    • Feng Office
Re: Usability Improvement Login Screen
« Reply #9 on: May 26, 2010, 05:39:57 pm »
I like the improvements.
Didn't get the "tip tracker" suggestion either.

selyay

  • Freshman
  • *
  • Posts: 20
    • View Profile
Re: Usability Improvement Login Screen
« Reply #10 on: May 27, 2010, 04:05:41 am »
it display random tips like
"you can view Freemind mindmaps(*.mm) documents inside file details window"

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #11 on: May 27, 2010, 05:51:05 am »
Hi Selyay,

now i got it....you mean something that gives you tips / hints about the features respectivly how they work in fengoffice.

thanks for your suggestion, but i think the login screen should be as clean as possible and these tips would irritate the user. besides, IMHO these tips arent often used...

you mentioned that the login screen isnt too clean. what do you mean in detail? any suggestions how to improve it, to make it even more cleaner?


thanks o lot for your feedback,
greetings

selyay

  • Freshman
  • *
  • Posts: 20
    • View Profile
Re: Usability Improvement Login Screen
« Reply #12 on: May 27, 2010, 06:55:21 am »
no  i mean it is too clean and  it is very simple
@cabeza cant we change feng office logo with our company's.
because of it is a splited image it is too hard for me to change
but i change the one next to workspace names very easy

Snoozer

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Usability Improvement Login Screen
« Reply #13 on: May 27, 2010, 08:27:51 am »
Hi selyay,

ah okay, than i misunderstood you.

Nice that it is so easy. That was my intention.  i tried to follow this KISS rule:

Keep It Stupid Simple

Keep in mind: that is the first screen everybody (especially new users) do see. i dont want people to ask for their passwords, how they can change their language and so on.

it should just work out, and simplicity helps there a lot.

Other suggestions from other users?

I hope the FengOffice team will include it in the core.

I would do some more optimizations in the system inself afterwards..

greetings

cabeza

  • Administrator
  • Hero Member
  • *****
  • Posts: 1004
    • View Profile
    • Feng Office
Re: Usability Improvement Login Screen
« Reply #14 on: May 27, 2010, 11:15:57 am »
We'll take a deeper look at this for 1.7.1.