A Standard Login Screen & Best Practices

April 14, 2012 . Web Design .



Topic buzz

What others are thinking. Add to the conversation and generate some chatter.


Read later

Save this blog post for a later read or point of reference.


When designing a standard Web Portal / Application for business use, there should be at least three main considerations that should be observed in order for the Application to be considered successful:

  • Stability
  • Straightforwardness of use
  • Security

While the first one is mighty obvious (if the web application doesn’t work, what purpose does it serve?) and may be discussed in future posts in further detail, the purpose of this post is to discuss the two other S’s one should consider in Web Form design; Straightforwardness & Security, and how by giving these priority ensure the former as well.


For a practical example, I chose to look at a regularly found screen on a web page designed for business use: the Login Screen. Look below at a login screen, which I designed currently for my employer's Facilities Management System.


Login Screen

There we go… this page is laid out pretty simple, doesn’t it? For a login screen, this is as straight to the point as you can really get without causing the user unnecessary confusion, while at the same time, providing a basic standard of access into a web application. Notice there are really 3 main elements of this web form;

  1. A User Name textbox
  2. A Password Textbox
  3. A Confirm Button


Straightforwardness


The limiting of page elements to a select few to page area helps give the web form a feel of proper organization, while at the same time, effectively simplifying the website for the user. This concept of less on the website being more is very convenient to both the user and developer as this minimalistic approach will make the web app simple and easy to understand for the user, as well as help reduce the amount of data requested from the website to the browser, thus increasing page load times



Security*

*This is the consideration that really makes or breaks a functional web app in the long run IMO. So Please forgive my rambling


The main function of a login screen on a web app is to provide a form of user authentication to regulate access to other parts of the web app. By providing a ‘Username’ and a ‘Password’ that match, the page will validate the user with the data provided and grant them continued access to the web app’s pages (which will be different dependent on the level of access for the user).


Besides making the overall web application secure from unauthorized intrusion by hackers and other unwanted persons, Security also encompasses fortifying the code used to create the web page itself and other server side scripting which is run which is necessary for the end usage of the site.


As this Login page is already minimal in nature (Fortunately) , there is not much work to be done in order to harden the page from the ‘usual exploits’, such as the ones listed below.

  1. SQL Injection
  2. Cross Site Scripting (XSS)

N.B.: No definition for these exploits will be given on this post (check related articles below or your friendly neighborhood Google if you are interested in more information).


But one fact to note about the ‘usual exploits’ is that these attacks require the injection of harmful code into the web page, resulting in an adverse effect to the page’s functionality.


Because of this, responsibility is really on the developer to prevent these exploits from occurring, by ensuring proper form validation is carry out on the user input before moving to another page, as well as ‘escaping’ any user entered characters, so that the user input is not treated as an operator in the web site’s scripting.


Related Articles / Sources


Innovated Techniques to Simplify Sign Ups & Login Pages

XSS Cheat Sheet

SQL Injection Cheat Sheet
 

 

Comments Section

Leave your thoughts and opinions on security in the comment section.

blog comments powered by Disqus