How Web Apps Handle Layout…

GMAIL: Email Web Application

Gmail: Login Page

Gmail has used 2 text boxes for users to sign in. The input password textbox value will be hidden with black dots to increase security and the possibility of someone accessing a password. A checkbox is used to signify if the user wants to be remembered on a particular computer. The ‘Sign In’ Button is a submit button which onclick will access the XML document and check if username and password are true. If false “The username or password you entered is incorrect. [?] ” is displayed and the password box is cleared.

gmail-log-in4

Gmail: When Logged In

Before this page is displayed a page is displayed showing the progress of how long it will take for your computer to load data from the server. This is displayed after the computer is connected to the Gmail server.  The top right shows ‘lkierath@gmail.com’ indicating that I am signed in. Also the ‘Sign Out’ button is displayed. The left bar shows a green symbol and ‘Louisa Kierath’ also indicating that I am signed in.

gmail-inside3

WORD PRESS: Blogging Web Application

Word press: Login Page

This login in box is very similar to Gmails in that it provides a user name and password textbox. It also has a “remember me” checkbox. The ‘Login’ button is the ‘submit button’.  WordPress also displays a small padlock above the username textbox. I thought this was a nice touch to indicate or even give the impression that the site was safe.

wordpress-login

When password or username weren’t returned as true

wordpress-wrong

WordPress: When Logged In

When logged into wordpress the user knows they are logged in as their blog(s) are displayed on the left hand side of the page. It also welcomes users by “welcome back, (username here)”.

wordpress-inside

DEL.ICIO.US: Bookmark Organiser Web Application

Del.icio.us: Login Page

The final investigation which was into Del.icio.us was again similar to the last two web applications.  If the username and password did not return true then a red warning message appears on the same page

Invalid username or password.
Please try again

The password textbox clears…


delicious-login

Del.icio.us: When Logged In

When the user is logged into Del.icio.us their username is used to personalise the whole page. All of the users bookmarks are displayed on the right hand side bar and also in the centre of the page. The ‘sign out’ button is displayed in the top right corner.

delicious-insideOverall, there are small differences in the layout that various web applications use. It is very common for websites to personalise based on what a users log in name is. However, there were differences when it came to users not entering the correct password. Page refreshes, new pages and even AJAX elements were used.

2 Comments

Filed under Uncategorized

2 responses to “How Web Apps Handle Layout…

  1. GregC

    Good. Having text centered makes it difficult to read

  2. Great site this sqlhtml.wordpress.com and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

Leave a comment