Tuesday, May 10, 2016

Tax Deduction at Source – Usability Test Report

This submission constitutes usability test report for the interface: Form26QB form submission tool provided by Income Tax Department of India. This form is filled up to submit Tax Deduction at Source (TDS) when a buyer is involved in property purchase of more than 50,00,000 Indian Rupee (INR).

Keywords: Usability Test Report, Form26QB, Tax Deduction at Source

Usability Test Report for Tax Deduction at Source Form Submission
As a general rule, most of the people involved in property purchase are happy with this online system, but a Usability Test for this interface was required as per author.
Section I: Introduction
Interface Description
When a home buyer goes for a reputed registered property purchase in India, as per Indian government regulation, 1% of the total purchase amount must be paid as tax deduction at source (TDS) to Taxation Department of India. The property sellers do not include this TDS in quoted price of the property and as per widely accepted terminology; buyer himself is responsible to pay this tax to Indian Government.
Until recently, it was a tedious job to visit bank branches and pay this tax manually over the counters. But now, Indian Tax Department has introduced the facility to pay this via an online system. This online Form 26QB submission is much better than visiting bank branches out of busy schedule, but need a usability analysis badly, the author feels.
Interface Goals
Form26QB submission contains mandatory details about buyer and seller of the property. After this form submission, end user is directed to online payment system of the bank and the final receipt generated by online payment system of bank is used as a proof which may be submitted to the property sellers and Income Tax Department.
Scope of this usability test is up to the point, where user has filled up Form26QB. This filled up form can either be printed for manual submission in the bank, or the end user may continue to submit the payment online.
Research Questions
Over all, below mentioned areas were to be felt with eyes of participants:
§     How much comfortable participant looks like with home page layout and structure? Was he seeking some help to understand very much taxation specific terms?
§     How much difficult was it for user to figure out, where to go after home page?
§     What is the user’s first reaction when he looks at enormous input fields in one go on the form?
§     How much comfortable the user seems to be when the PAN number validation pop up come on each blur of the input box?
§     Did the user wanted verification of both parties’ names immediately after entering PAN number or he seemed comfortable to wait till confirmation screen?
§     Was the reconfirm of PAN number too annoying for the participant?
§     Session time out is set as five minutes and one minute is given for user confirmation in popup, how much participant is able to get comfortable with this design?
§     The address is divided into logical entities, does the user like it? Is he OK with the max length of the input fields here?
§     Did the participant felt happy about the way amount paid is input?
§     Did the participant made a mistake while calculating TDS based on % ? Was he able to understand what Interest and fee structure is?
§     Was the user able to correlate date of payment with date of tax deduction?
§     In case of errors was the error message sufficient to fix wrong input?

Section II: Methodology
Think Aloud Method
As facilitator, author had to make sure candidates involved in this usability test know exactly what they were doing, and keep them moving. He made sure to verbalize their thoughts, means encouraging the candidates think aloud and make the running narration of what was going on in their mind – what they were trying to do, what they were looking at and what they wanted to do next.
Test Plan
Equipment/software. A Dell Laptop with inbuilt microphones and Blueberry FlashBack software installed was used to record the responses.
Recruitment. None of the participants was given any kind of incentives for this usability test. Total five candidates had to be reached. One refused due to unavailability (Dxxxxx Mxxxx). Another was dropped after starting the session, because he had used this interface heavily in the past, so he seemed very much comfortable with everything (Kxxxx Sxxxxx). Contact details of the three participants are included as a part of Recording Consent Form in Appendix A.
Location. All the candidates were recorded at their own home. Since there were no incentives involved, none of them was ready to travel. So the observer visited their home whenever they got available.
Time. All the three participants were available on the weekend of 30 April 2016 and 01 May 2016. Duration of this test for each participant varied between 50 minutes and 80 minutes, of this recorded session varied between 32 minutes and 47 minutes. This also included other interactions like demographic questionnaire, probing, wrapping up and additional cross questioning.
Scenario. You purchased an apartment from the builder, Ixxxxxx Sxxxxxxxxxx Ltd, Gurgaon, Haryana, India on 28 April 2012 on installments. Recently Income tax Department of India mandates you to pay 1% Tax Deduction at Source, since total value of your apartment at the time of purchase was  53,36,400 INR which is more than 50,00,000 INR. Today morning, you paid 2,65,531 INR as an installment towards your apartment to the builder. Now, your next job is to pay Income tax Department of India, 1% of the installment value.
 Your task is to use online interface available as bookmark in your browser and fill Form26QB. Please note, this tool allows you to visit bank website in same flow and pay online, your task ends when your reach the point where you have to click to visit bank website. At that point save the form filled as a pdf for future reference.
Additional information required to fill this form is on the back of this card.
Below mentioned are the inputs required to fill the form:
§  Tax Applicable: Other than Companies
§  Date of Payment ( To decide Assessment and Financial Year): Today
§  Your Permanent Account Number: Axxxxxxxxx ( Sole buyer)
§  Permanent Account No. seller: Axxxxxxxxx (Sole seller)
§  Your Address: xxxx/xx xxx xxxxxxx xxxxxx, xxxxxx -124001, Haryana, India
§  Address of seller: Ixxxxxx Sxxxxxxxxxx Ltd., X-xx, xxxxx xx-xxxxxxxxxxxxxxxxxxx xxxx, New Delhi – 110044
§  Your Email Id: xxxxxxxx@xxxxx.xxx
§  Email Id of seller : XXXX@xxxxxxxxxxxxxxxxx.xxx
§  Your Mobile Number: +91-XXXXXXXXXX
§  Mobile Number of seller: +91-XXXXXXXXXX
§  Type of Property: Apartment
§  Address of Property: Ixxxxxx Exxxxx, Apartment No. XXXX, Sector XXX, Gurgaon- 122011, Haryana, India
§  Rate of Tax deduction at Source: 1%
§  Current Installment in Indian Currency: 265531
§  Total registered value of the apartment at the time of booking in Indian currency: 5336400
§  Mode of Tax payment: Online
§  Bank name via which you will be paying : State Bank of India
Pilot Test
The Pilot Test greatly helped to improve the task sheet for final usability test sessions. This was not an actual test but listeners (others than actual three participants,) gave valuable feedback on how to interact with actual participants. With previous version of task sheet submitted in test plan, the first pilot listener was not able to understand, if there were more than one buyers or sellers. Also, the total assumed value of the property was pointed out to be very low. She also mentioned that, contact details should be included in Consent Form itself.
The second pilot listener pointed that the recording should start in the beginning of the session itself, but since I had to follow the script, so I ignored this observation and started recording while taking sign on the form, during first actual participant’s session. But first participant also, mentioned this later, after the session.
The third pilot listener mentioned that observer should ask for overall feedback and summary from the participants before ending the session. This was not part of original script in usability plan submitted earlier.
Overall, the participants enjoyed the usability test session. They didn’t expect it to be so entertaining and stress free, as the third participant mentioned specifically. Overall, more advanced users, who spend more time on the web didn’t like much the interface, but the new bees mentioned this interface as a good one.
Participant 1
The first participant Vxxxx Dxxxx, was not aware of TDS system in India, but he was getting it confused with regular tax on income. He paid Income Tax on the extra income in past, and he thought TDS and Income Tax is the same thing. He had been involved in buying and selling of residential properties in past, but value of these assets were less than 50,00,000 INR. So, he never used the interface under consideration in past on actuals. Since he never used this interface in the past, he qualified to be a participant in this usability test.
Below mentioned are the observations from Vxxxx:
§  Home page is less informative than he expected it to be. He wanted some visuals like images on the home page.
§  Financial year and assessment year drop downs were disabled. He wanted to be taken to date of payment input field once he tried to edit these disabled dropdowns.
§  He was getting puzzled b/w the terms payer/buyer/transferee all over the form. He wanted the form to use same term all across.
§  He tried to copy paste PAN number in confirmation box from main input form. If the input was not exactly 10 digits, it gave an ugly popup, he seemed to be getting annoyed with that kind of popups.
§  Participant was extremely unhappy with timeout message box coming every five minutes. He mentioned that form should record him being active and filling fields, so that timeout is reset. At another place he mentioned that timeout should be reasonably longer for the user to input such a large page in one go. It also suggested that he would have liked a wizard kind of structure with next buttons.
§  User was getting annoyed with character limits of some input fields like the one in address area. He wanted at least a message about character limits, if nothing less.
§  Even though information in task card specifically mentioned, he is the sole buyer and the builder is sole seller, he overlooked this information and wanted the input fields named "whether more than one buyer" and “whether more than one seller" to be non-mandatory as an escape route.
§  Also, the task sheet mentioned date of agreement specifically, but participant missed this information and tried to play around with this input field. Just to see what will happen, he also tried putting a future date. The form didn’t alert about future date immediately, but on submit he got an error.
§  The task sheet specifically mentioned asset value, but participant assumed it to be 52,00,000 INR, which didn’t affect output of the test, but he made a good point that, if property value is in 7 digits, installment value input field should not allow entering 8th digit.
§  He mentioned that when installment value is being filled, it should on the fly display what is the outcome of inputs on combined label, since installment value was being recorded in separate input boxes for lakhs, thousands, hundreds, tens and ones.
§  He was not happy that total amount paid/credited is asked again in Tax deposit details head. He wanted to say that it should be prefilled based on inputs in amount paid/credited head filled already by him.
§  He gave suggestion that rate at which TDS is calculated should not be input field, since end user has not the rights to decide this rate; this value is decided by Income Tax Department of India.
§   The tax amount should be calculated by form based on inputs, he mentioned. He feared that users may do calculation mistake and it made form more tedious.
§  While filling date of tax deduction, user mentioned that these fields are not very informative.
§  While clicking submit, user got the message that date of agreement cannot be future date. User wanted to be taken to field directly along with this message. He didn't want to search for that field in clumsy form.
§  Information in popup should show information sign along with it, if it is a warning it should also include warning sign in the popup, he mentioned.
§  User was not happy that acknowledgement number is there is in popup and he couldn’t copy it from there.
§  User didn't understand what does minor head code term means (in the final submitted form) nor was he able to understand information marked in red on the top very much comfortably, the language may be simplified for normal users, he mentioned.
§  User mentioned that UI should be improved; it was very raw kind of screen.
§  User mentioned that page was too long to fill.
§  User was not happy with popups coming again and again.
§  User mentioned that, there has to be something where he can save this information for future use online and bring it up later if required, including payment while next installment comes for the apartment.
§  He rated this site 5 on the scale of 10.
Participant 2
The second participant Dxxxxxx Bxxx, turned out to be very patient participant. Despite so many hiccups he continued. Even though he was not able to submit form successfully, but he gave much valuable inputs on extreme scenarios which real users would have been facing too.
Below mentioned are the observations from Dxxxxxx:
§  Unlike Vxxxx, Dxxxxxx didn't find home page of the website very convincing as a Government website. He mentioned the need of a logo or some disclaimers or similar stuff. He seemed concerned about authenticity of the website and was reluctant to fill information if it would have been his own personal details.
§  The system allowed instructing browser that, do not show such popups in future. And the site uses to show important validation messages in popup. The result was at many important places throughout the form, he would not get validation messages.
§  He mentioned that mobile number of buyer should be allowed to be more than 10 digits. Form assumed that user is always in India and mobile number will always be 10 digits. He mentioned what if buyer is sitting abroad and wants to include ISD code along with contact number.
§  Like Vxxxx, he was also not happy with character limit of the input fields, specifically in Address areas.
§  Authenticity of session timeout message was found to be questionable by me. The first time session timeout message came when he was filling PAN numbers. He clicked cancel at that time on timeout popup, still form continued to accept inputs, rather than throwing him out of the form. As a patient observer, I didn't disturb the user and let continue.
§  Now, when he was filling address of seller - second row, this session timeout confirmation came again. So, I got the impression that, even if he clicked cancel first time, his session didn't timeout. This time he clicked OK submit.
§  While filling email id of seller, user mentioned that ideally website should take care of upper and lower inputs by itself; this conversion is easy in code. He wanted to point out towards message he got earlier while filling PAN number. 
§  While filling city of the property purchased, user mentioned that name of this city had changed recently, it raised a good point of address validation while filling it. Even user filled city as per task sheet and city is located in state Haryana. Form allowed selecting state as Delhi. Later user observed it himself and fixed it.
§  User was confusing date of agreement with date of payment while filling Date of agreement field.
§  User did mistake in calculating 1% of the installment amount. Had the Basic Tax field been auto populated, this user error could have been avoided.
§  The interest and fee is payable if the TDS is not paid to Government within one month of actual payment. Rather than giving this simple message to the end user, website confused Dxxxxxx with section 234E and Rule 31A(4A) kind of terms which are difficult to understand. So he just skipped it and continued letting it to be zero. Had he been doing late payment, he would have never known, he is doing late payment of TDS, so he owed something more to Income Tax Department of India. He thought Interest and fee fields are redundant.
§  When he clicked on submit I found that he had entered wrong PAN number, but since he had prevented default popup messages of browser in past, he didn't get exact error message, so he was stuck and verifying information in each input field one by one. Mode of error message delivery was not good on submit.
§  He mentioned (while he was verifying fields one by one), if the name of buyer and seller is populated based on PAN number, while filling form itself, it would have been helpful and would have made him more confident.
§  Even after fixing error in PAN number he was not being taken to confirmation page. He again got session continue confirmation message at this time and he did the right thing. But still Proceed was not working.
§  Since proceed was not working he started playing around with Date of Tax deduction field for no reason. He switched Mode of Payment and bank name was lost. So he assumed that he didn't selected bank name, that's why he was not able to submit. Bank name should have been retained, just in case user switches the radio button and come back to previous selection. If the mode of payment doesn't require Bank Name, this field should have been hidden rather than resetting the value.
§  He tried giving very old date as date of agreement, but it didn't help. After many verification of inputs, he thought he entered wrong captcha, the moment he hit refresh captcha, to my surprise he was taken to error_session.asp which said session had expired, even though he was hitting sessions continue submit diligently all the time. He was totally confused what happened and had a mix of guilty feeling and anger that he will have to fill all the information again.
§  This participant was under impression that before coming to this site to fill this form, user must do diligent ground work to avoid errors and he gave a rating of 6.5 out of 10 to this website.
Participant 3
The third participant Cxxxx Sxxxxxxxx, felt not so confident at the start of session, but she was able to submit Form26QB using this interface successfully.
Below mentioned are the observations from Cxxxx:
§  She didn't like colors used on the home page and layout of navigations. She pointed; terms used on home page are too much technical to understand.
§  Like other two participants, she also got confused with disabled dropdowns for Financial Year and Assessment Year. The message in red didn't help her but she continued further.
§  Transferee/Transferor were difficult terms for her as compared to buyer/seller on the main form spread across everywhere.
§  Category of buyer/seller were input boxes but disabled. She was trying to edit these values. This could have been labels to avoid confusion or at least different style sheet could have been applied similar to Financial Year to mark it as disabled input boxes.
§  Since there was Full Name of buyer/seller input label mentioned with *, she thought if she clicks in front of it, she may be able to enter something here. Either this head should not have been marked as mandatory by * or removed altogether to avoid confusion.
§  After trying to click full names, probably by mistake she hit back button, rather than giving a confirmation message before going to back page it simply went to home page of website and she lost the information filled till now. So, she started filling the form again now.
§  Like other two participants, she was also not happy with session expiration design. She specifically mentioned why so early?
§  As Dxxxxxx also mentioned, she was not able to enter ISD code of mobile number.
§  Like other two participants, she also got stuck while filling seller's address due to max length limit of input fields.
§  Under Amount Paid/Credited, for  Crores/Lakhs/Thousands/Hundreds/Tens/Ones, both dropdowns and textboxes were given on the form, she thought she can use any, but she later figured out textboxes are disabled. There should have been labels instead of disabled input boxes here. She also mentioned that dividing whole installment amount in pieces like this is also a pain at first place.
§  Like other two participants, she was wondering why to enter installment amount again under Tax Deposit details header.
§  Under TDS % input box, she was not able to type % sign, she kept wondering why.
§  While filling TDS actual amount after 1% calculation, she got session timeout message, but since this input field was not fully filled, on blur of this input field, validation error came, and for validation message this site uses default browser popups, so she got confused which one to click first. This gives a suggestion that, session timeout should not have come when she was active also that, default browser popups are wrong choice to show validation message by developer.
§  Like other participants, red information message regarding Interest and fee field under Tax Deposit details header, was not sufficient for her to understand what it means.
§  On the end of page, there was information, what user do and what  should not, e.g. the characters prohibited, she was almost laughing, why this information is here now. I guess, she wanted this information earlier before starting filling the form.
§  At the end of session she gave suggestion that, at least address fields may have been auto filled after typing few characters. For example, if she type few characters of city, form should have been smart to start giving Google like autocomplete suggestions.
§  She specifically mentioned at the end of session, she found site as very user friendly, with not much difficultly, she was able to correlate information/task cards well with the form. She gave a rating of 9 out 10 to this interface.
All in all, end user needs lots of homework to fill TDS using the interface provided, but this is definitely better than giving a visit to the bank, filling form manually and waiting in long queues. Definitely, with usability perspective there are lots of improvement areas as suggested by the participants.
All the feedbacks and observations in result section above must be fixed, but three things which must be done right away are mentioned below:
§  Session timeout must be increased. There are major flaws in this session timeout logic but, at minimum right away, with no development efforts, with just the configuration changes, timeout may be increased.
§  Do not use browser default popups for error messages. This change might be low effort change but gives maximum results. And that is why it is part of top three recommendations to be implemented today itself without any delay.
§  When the user clicks on Form26QB, he should be taken to an information page, where he should be made knowledgeable about what all he needs to fill in this form. And then click on next to the form. This is low effort change and can be implemented right away. This resolves many Usability issues reported by the participants where they were not aware of the terms and how form behaves. Probably, on this introduction page, putting a video will also be very helpful. For example, after going through even a single recorded session mentioned in Appendix D, end user may fill TDS just in five minutes.
Apart from above mentioned low risk, low effort, high gain in usability changes, observations mentioned in the Result sectioned must be planned for future releases and deployments.
With the help of diligent participants, observer was able to record a good number of usability issues in the interface. Definitely more sessions like this will be helpful for the ongoing development, observer hopes that Income Tax Department of India will take above mentioned issues on top priority. Observer agrees that no interface is perfect in this world and Usability Test sessions like this are important, not only in the interface under consideration but everywhere else too.

Income Tax Department of India. (n.d.). E-TAX Payment System. Retrieved April 17, 2016, from https://onlineservices.tin.egov-nsdl.com/etaxnew/tdsnontds.jsp
Krug, S. (2010). Rocket surgery made easy the do-it-yourself guide to finding and fixing usability problems. Berkeley, CA: New Riders. 

Appendix A
Recording Consent Forms

Image Removed
Figure 1. Recording Consent Form signed by Participant 1: Vxxxx Dxxxx

Image Removed

Figure 2. Recording Consent Form signed by Participant 2: Dxxxxxx Bxxx.

Image Removed
Figure 3. Recording Consent Form signed by Participant 3: Cxxxx Sxxxxxxxxx.

Appendix B
Usability Test Script
Modified from Rocket Surgery Made Easy
© 2010 Steve Krug
o        Web browser should be open to Google or some other “neutral” page.
Hi, ___________. My name is Hemant Kumar, and I’m going to be walking you through this session today.
Before we begin, I have some information for you, and I’m going to read it to make sure that I cover everything.
You probably already have a good idea of why we asked you here, but let me go over it again briefly. We’re asking people to try using a Web site that has been developed by Income Tax Department of India and we want to see whether it works as intended. The session should take about an hour.
The first thing I want to make clear right away is that we’re testing the site, not you. You can’t do anything wrong here. In fact, this is probably the one place today where you don’t have to worry about making mistakes.
As you use the site, I’m going to ask you as much as possible to try to think out loud: to say what you’re looking at, what you’re trying to do, and what you’re thinking. This will be a big help to us.
Also, please don’t worry that you’re going to hurt our feelings. We’re doing this to give valuable improvement suggestions for the site, so we need to hear your honest reactions.
If you have any questions as we go along, just ask them. I may not be able to answer them right away, since we’re interested in how people do when they don’t have someone sitting next to them to help. But if you still have any questions when we’re done I’ll try to answer them then. And if you need to take a break at any point, just let me know.
We have the ability to use internal microphone of this laptop to record your voice. With your permission, we’re going to record what happens on the screen and our conversation. The recording will only be used to help us figure out how to improve the site, and it won’t be seen by anyone except the people of Income Tax Department of India and Students/Staff members of Fxxx Hxxx University. And it helps me, because I don’t have to take as many notes.
If you would, I’m going to ask you to sign a simple permission form for us. It just says that we have your permission to record you, and that the recording will only be seen by limited audience as I just explained.
o   Give them a recording permission form and a pen
o   While they sign it, START the SCREEN RECORDER
Do you have any questions so far?
OK. Before we look at the site, I’d like to ask you just a few quick questions. (This includes Demographic Questions also.)
§  First, what’s your occupation? What do you do all day?
§  Now, roughly how many hours a week altogether—just a ballpark estimate— would you say you spend using the Internet, including Web browsing and email, at work and at home?
§  And what’s the split between email and browsing—a rough percentage?
§  What kinds of sites are you looking at when you browse the Web?
§  Do you have any favorite Web sites?
§  Have you ever been involved in buying and selling of residential properties in India value of which was more than 50,00,000 INR ? ( This form is submitted on purchase of every immovable property , value exceeding 50,00,000 INR; but end user might not be able to understand meaning of word immovable, so better is restrict to live example of residential property for the candidate to understand, what is being asked.)
§  Did you ever visit a bank to submit Tax Deduction at Source (TDS) when you purchased this property?
§  Are you aware that Indian Tax Department now gives the facility to submit TDS online? Have you ever used this system?
OK, great. We’re done with the questions, and we can start looking at things.
o        Click on the bookmark for the site’s Home page.
First, I’m going to ask you to look at this page and tell me what you make of it: what strikes you about it, whose site you think it is, what you can do here, and what it’s for. Just look around and do a little narrative.
You can scroll if you want to, but don’t click on anything yet.
o        Allow this to continue for three or four minutes, at most.
Thanks. Now I’m going to ask you to try doing some specific tasks. I’m going to read each one out loud and give you a printed copy.
And again, as much as possible, it will help us if you can try to think out loud as you go along.
o        Hand the participant the task sheet, and read it aloud.
o        Allow the user to proceed until you don’t feel like it’s producing any value or the user becomes very frustrated.
Thanks, that was very helpful.
§  Would you like to summarize your experience with this interface?
§  On the scale of 10 how much do you want to rate this website ?
§  Do you have any questions for me, now that we’re done?
o        Stop the screen recorder and save the file.
o        Thank them and escort them out.

Appendix C
Scenario card
Figure 4. Scenario card, front side.
 Figure 5. Scenario card, back side.

Appendix D
Links to Video Recordings
Participant1 (Vxxxx Dxxxx):
Participant 2 (Dxxxxxx Bxxx):
Participant 3 (Cxxxx Sxxxxxxxxx):

Create/Edit/Delete a Post Sample in PHP MYSQL ANGULARJS

Code available at:

How to make a user admin:
Register any user in the deployed version of your application, and in the DB mark isadmin to 1 for that user in users table.

1. Admin can do view edit and delete to all posts. He can also create new post.
2. Non admin user can view all posts. He can edit and delete his own post. He can create new post.
3. Anonymous user can view all posts , he can not do create edit or delete.

Known issues:
1. In the post title description and body only a-z, A-Z, 0-9, . and space are allowed.
2. If user is on one post, to navigate to next post, he must click all posts tab and go to the desired post.
3. Password is not encrypted in DB.
4. Password is visible on register page unlike login page.
5. In firstname, lastname and password only a-z, A-Z, 0-9 allowed.
6. Password length is 5 to 50 characters.
7. Email is standard 254 characters.
8. Firstname and last name are 3 to 100 characters
9. Register doesn't implement captcha like the first project.

1. When user login, only then links like create post are available. Otherwise he gets register link instead of create post.
2. Angular is used to achieve single page structure.

Friday, April 29, 2016

A Sample Project to demonstrate single page application in AngularJS

Download files available at : Final

  • It shows example of how to achieve single page application using ngRoute in AngularJS.

  • How to use ng-Controller. ng-click, ng-show etc etc in AngularJS and change display as per response received from API (error/ success).

  • How to get JSON response with callback.

  • How to use google maps here.

Main Files in the Project

  • index.html

  • parts/introduction.html

  • parts/searchip.html

  • parts/visitorlocation.html

  • scripts/myapp.js

  • scripts/searchip.js

  • scripts/visitorlocation.js

External Resources Files Reffered

  • ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js, ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js, ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js

  • For Mobile Support and external css : SB Admin 2 by Start Bootstrap & maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

  • For location the api by ip-api.com

Wednesday, April 27, 2016

Web Analytics

Web Analytics constitutes the techniques used to collect/analyze usage information of a website or related interfaces to improvise usability and customer satisfaction as a goal. Say, an organization just launched a new product and they want to see how successful there marketing had been to drive users to new product information page, web analytics is the answer to such scenarios. Typically a successful web analytics solutions will be helpful to formulize online strategies with least efforts and cost involved.
Typically, all the web analytics tools available today in market either study the server logs or require special JavaScript tags to be added in each and every page and some service is called on each event. In either case, owner of the application may be interested in location, interest, clicks, flow used to reach target page, time duration of the visit etc. by the visitor of the application. These are the inputs that may be used to improvise the application. An intelligent and successful web analytics solution must go one step ahead and based on above observations, will be giving suggestions to the owner of website, how to use this information in better manner.
A web developer must be keep up to date with available options, which he may suggest while the application is being designed. Based on budget and man power available to monitor application, right strategy must be used and implemented. If the stakeholders go for a different web analytics solution at later stages of development, this might involve a lot of rework and put extra pressure on timelines and budget of the project.
Web Analytics Solutions
Free Analytics Tools
  • Google Analytics
  • Google Website Optimizer
  • Piwik
  • Open Web Analytics
  • Site Meter
  • Stat Counter
  • Webalizer
  • Analog
  • Awstats
  • Prosper 202
Cheap Paid Analytics Tools
  • Clicky
  • Mint
  • WordTracker's Strategizer
  • Adblock Analytics
  • Screaming Frog
Affordable Business Analytics Tools
  • Weblog Expert
  • Clicktale
  • Crazy Egg
  • Visual Website Optimizer
SEO Update Tracking
  • Not Provided Count
  • Chart Intelligence
  • Panguin Tool
  • Sistrix Google Updates
  • Algo update history
General Search Marketshare Stats
  • StatCounter
  • Clicky
  • Experian / Hitwise
  • NetMarketshare
  • comScore & Compete.com also offer marketshare stats
Usability Feedback
  • User Testing
  • Feedback Army
  • Silverback
  • Users Think
  • UX Project Checklist
Expensive / Enterprise Premium Tools
  • Google Analytics Premium
  • Adobe Marketing Cloud
  • WebTrends
  • comScore's Digital Analytix Suite
  • IBM's Coremetrics
Recent Advancements
  • Google Accelerated Mobile Pages (AMP):  In October 2015, Google introduced AMP, which may help better serve the mobile users and improve Google ranking.
  • Instant Articles by Facebook: This allows content owners to upload entire stories, and users to read them, without leaving the Facebook site.
  • Transparency by Government in the Analytics: Government online practices are improving now and they are releasing even more behind the scene data using analytics tools.
  • NewsLynx: With launch of this tool, burden of manually collecting and aggregating analytics may be off loaded to this tools and faster growth & innovation is expected.
  •  Google Calculated Metrics: Rather than downloading offline usage data and manipulating using custom formulas, with improvements in Google analytics, this may be done with less efforts using Calculated Metrics.
  • Need to track social platforms: There was a time when Google was the only giant being considered to drive traffic, but these day various social platforms are being equally important. So the need to improve and track traffic from social platforms is ever increasing since last few years.
  • Single page Applications: There was a time when visiting one page to another was the only way to fetch content from server in a website, but with advancement like angularJS, single page applications are becoming more popular, so the way page visits are recorded have changed with time.
  • Video Analytics: With better bandwidth and internet speed, now more ideas may be floated around the web using video content, so the need and ability to track video content has grown these days.
Kanik, A. (2015, December 23). A look back at this year's biggest advances in analytics. Retrieved April 24, 2016, from https://ijnet.org/en/blog/look-back-years-biggest-advances-analytics
Losowsky, A. (2015, October 16). What makes us different. Retrieved April 24, 2016, from https://coralproject.net/makes-us-different/
SEO Book. (2013). Web Analytics Tools. Retrieved April 24, 2016, from http://tools.seobook.com/analytics-tools/
Zheng, J. G., & Peltsverger, S. (2015). Web Analytics Overview. Retrieved April 24, 2016, from https://www.researchgate.net/publication/272815693_Web_Analytics_Overview

Tuesday, April 26, 2016

a simple PHP mySQL example

Important: All the bulleted points’ headings are hyperlink to code) Common code link
1.      .htaccess :   This is used to set home page of site something else than index.* Also, any page opened like *.htm is interpreted as *.php  This is done do hide that its  a php site
2.     img Folder:   files in this folder serve as random backgrounds for captcha.
3.     connect.php :  This code loads db details and creates a connection to db.
4.     dbHandler.php: This code provides common methods which are intermediate functionalities specific to application and use connect.php to talk to DB.
5.     dbdetails.php:  When code is deployed at new server, these DB details will change.
6.     captcha.php: This is the code to generate captcha as an image output to browser. Treat this file as an image . As per config in htaccess , you can refer it as captcha.htm also. This will generate two random numbers and save the output in session for future input verification. Captcha puzzle is printed on random location in a random image chosen.
7.     hkproject1.sql : This is to generate a table in db with required fields to save opt ins.
8.     register.php : This is the main input form where user registers. Major php code for this form is in registersubmit.php
9.     sale.php: This is the basic landing page with link to signup ( register.htm /register.php)
10.  thankyou.php: This page is opened after successful submission on register.php and simply shows a success message based on query string parameters.

1. MySQL : One mistake I did here was, I didn’t pay much attention to environment I used for dev and production. I developed on local using latest xampp ( Windows based)  and deployed on goDaddy linux based  localhost MySQL.  On dev box root was used as user and blank as password, lucky me that I kept configurations in separate file, so edits while deployment were easy.  One more thing, after creation of new DB on goDaddy, it takes a while , before you could actually connect to the DB, for me connection started working after 3 hrs, during these three hrs I was doing a lot of hook and crook to connect to db on production. Obviously, turned a waste of time after three hrs, since it was only first time issue to be faced after DB creation.

One more thing here, in the table we store opt ins, I created an extra column of type timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP , so that it may be tracked when user actually signed up, just in case, this info is required in future. Also , ALTER TABLE `signups`  ADD PRIMARY KEY (`email`(256)); The email was kept primary key here, to avoid multiple signups by same user again and again at DB level itself.

2. DB access:  In PHP , which methods I use to connect to MySQL greatly depend on what version of PHP I am using on both devand production environment. So be extra careful here to use similar dev box as production.  For some fields, I wanted to allow deliberately some characters like  in the field, so I had to do $firstname = $this->conn->real_escape_string($firstname);  before putting value in the query.
3. General :
·         At many places, while development, I actually wanted to see errors and warning which were being suppressed by framework, so  had to use : error_reporting(E_ALL);
·         At one place session start code was required to be moved to top of the php file, before any kind of html even, this seems to be weird behavior of php
·         I thought, before actually starting session, it was always wise to check existing one like :

if ((function_exists('session_status') && session_status() !== PHP_SESSION_ACTIVE) || !session_id()) {



·          On PHP side, it was easier to validate email format like :

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {

        $email = strtolower($email);

        $emailValid = true;


Here I specifically converted email to lower, because I wanted to keep this field as primary, and you never know end users behaving as monkeys who sometime use same email with some characters upper case.

·         On success of submission of data, I took user to thankyou page with variables in query string. But since I was trying to use query string I made sure to use urlencode  and decode  on sender and consumer side.
·         It is always advisable to hide page extensions to make it difficult to hackers, so all my pages in my deployed version look like *.htm  This I achieved using .htaccess   entry : RewriteRule ^(.*)\.htm$ $1.php [NC]
·         Default page in my application was different than index.*, so I used RewriteEngine on  ( enter) DirectoryIndex brrr.php in .htaccess

4. Custom Captcha:  For mathematical captcha, I used sessions to validate user input. I had thousands of images in a fixed folder. I picked a random image from this folder using scandir($dir);  $randomImage  =  $dir . "/" . $images[rand(2, sizeof($images)-1)];

On the top of this image , using imagestring, I printed the string, whose answer is saved in session. $im =imagecreatefrompng($randomImage); $textcolor = imagecolorallocate($im, 0, 0, 0); $randX = rand(0,100); $randY = rand(0,200); imagestring($im, 5, $randX, $randY , $displayText , $textcolor);

header('Content-Type: image/png'); imagepng($im); imagedestroy($im);

Please note that text is also printed at random location on image.

On UI I also gave a refresh button, using Jquery code above mentioned php was reloaded and new answer is saved in session with altogether new captcha to display:

  $(document).ready(function () { $("#reloadCaptcha").click(function () {                $("#myCaptchaImage").attr("src", "captcha.htm?randomToRefresh=" + (Math.random() * 10));

                $("#answer").val("");                ApplycssValidation()



Please don’t get puzzled with Math.random in javascript code, which is just to avoid caching of captcha image content on client side.

5. CSS / html / UI / look and feel and validations on client side:   Even though this assignment was specifically concentrated on PHP / MySQL, but moral responsibility of a developer is to make sure, it is usable.  So I reverse engineered manywordpress templates to make something good looking , jquery/javascript validation obviously had to be form specific, but styles are easy to copy paste , so I did .