Web Tracking – Why is it done?

Web tracking is the ability of a website to keep tab on website visitor. [1] Well you search for a flight lets assume from Chicago to Pittsburgh (something I do very often!). You are done with your search you don’t buy a ticket and you go on to Facebook. While you are surfing through Facebook, you see an advertisement for flights from Chicago to Pittsburgh from the website you were viewing your tickets earlier. All this and much more is possible due to web tracking.

 

Some people argue that this is against personal privacy, some may argue this is unethical but companies on the other end advocate that they do web tracking to improve the online experience for users. We as users get better online experience and companies get better sales. WIN – WIN situation is what it sounds like. Let us look at few reasons as to why web tracking is done:[2]

  1. Web tracking for advertisements – Tracking individual web surfing patterns enables companies to provide better advertisements.
    1. Personalized Advertisements: In the above example, I much more likely to be interested in the Chicago to Pittsburgh flight ticket ad than an advertisement for some body deodorant. As a user, I get better experience and the airline website is more likely to increase its sales.
    2. Contextual Advertisements: In contextual advertisements, advertisements are displayed on a page depending on certain words. If the page does contain certain keywords then certain advertisements are displayed on the page.
    3. Behavioral advertisements: Advertisements displayed can also vary depending on the age, gender and geographic location of the user.
    4. Semantic advertisements: While contextual advertisements depend on certain keywords, semantic keywords understand the context in the page and then provide relevant advertisements. This is a very sophisticated form of advertising.
  2. Web Analytics – Web tracking can also be used to get a sense of the overall performance of a website. It can be used to track the number of visitors to a page over a period of time. Companies and web owners can track the source that is diverting traffic to their website. They can analyze from where their users landed and can also customize their website depending on the results. This can track the geographic dispersion of the visitors.
  3.  Clickstream Analytics[3] – Clickstream analytics is used to analyze which pages the visitors visit in what order and also result of successive mouse clicks that each visitor makes. There are 2 types of clickstream analysis – Traffic analysis and e-commerce analysis.
    1. Traffic analysis is performed at the server level where the path taken by the users through the site is examined. It also determined how many pages were served to a user, time taken to serve each page and also activities such as how many times user pressed back button, how many users refreshed a page and so on.
    2. E-commerce based analysis is used to determine the pages that a user lingers on, the items user puts into a cart and removes. It tracks all the way up to final purchase made by the user.

References:

  1. http://whatismyipaddress.com/web-tracking
  2. http://resources.infosecinstitute.com/means-and-methods-of-web-tracking-its-effects-on-privacy-and-ways-to-avoid-getting-tracked/
  3. http://searchcrm.techtarget.com/definition/clickstream-analysis

COOKIES – How is web tracking done?

Cookies are small files stored in the users computer. Cookies are used for session management, authentication of visitors.

Basic Information:
Standard cookies cannot be more than 255 characters and not more than 4k in disk space. Cookies have 2 mandatory fields: name and value. Expiration time, requirements of secure connection, domain name and path for cookie are generally included in the cookie although they are not mandatory.

Zombie Cookies:Zombie cookies are a huge threat to security. They can create themselves via backup after being created. They can be stored online and as cookie on the machine. Standard cookies are confined to one particular website while Zombie cookies can track activities of multiple websites. They are also browser independent and can track the activities of multiple web browsers.

In terms of space, Zombie cookies can occupy 25 times more space as a standard cookie. Cookies are created using Adobe Local Shared Objects (LSOs). These cookies are managed by the flash plug-in.

Third party Cookies:

Suppose we visit a webpage and that webpage contains images/information from a third party website (some other website), then the cookies created for that third party website is called “third party cookies”. These cookies are sent to the third party sites during the next visit regardless of the context/ page as long as there is information being retrieved from 3 party.

Third parties can insert dummy undetectable images called “web bug” in web pages. So every time a user visits this page, third party cookie is sent back to the third party.

Other Cookies:

Persistent cookies (Tracking cookies): These are used to determine how a user reached a particular website. these cookies can be made permanent using the maxAge option. They are in charge of a lot of useful functionalities such as authentication, language, theme-preferences, in-site bookmarks and favorites.

Session cookies: These cookies expire at the end of each session and do not have any potential negative effects.

There are other cookies such as secure cookies, HttpOnly cookies.

Thank you reading this article on cookies. I am also learning about them along the way. Please feel free to let me know of any mistakes I may have made in the article. Feedback is most welcome!

Thanks

–R

References:

  1. http://resources.infosecinstitute.com/means-and-methods-of-web-tracking-its-effects-on-privacy-and-ways-to-avoid-getting-tracked/

What happens when you type www.example.com – Intro to Web 101

We visit so many websites each day, there is a lot that happens under the hood just for us to reach the website and get a response.

So let’s say we get on to our browser and type ‘www.example.com’, this could be http://www.google.com, http://www.facebook.com or any of our favorite website. Computers as we know are identified through numbers of the form ‘1.2.3.4’ (IPv4), which are called IP (Internet Protocol) addresses. So ‘www.example.com’ needs to be translated to an address of the form ‘1.2.3.4’ i.e. the address of the web server hosting the website (or webpage). The Domain Name System (DNS), translates the address http://www.example.com to 1.2.3.4 (Refer to my blog on DNS for more information about DNS)

Once the DNS translates the request and sends it back to the browser, the browser send a request to the server located at 1.2.3.4; The server sends the response back in HTML or some programming/ scripting/ markup language that can be interpreted on the screen as response which is then rendered to us as a result.

While, the whole process looks overwhelming, all of this happens in a time faster than a blink of an human eye 🙂

 

 

 

ConcurrentModificationExcption

Iterators is a very powerful programming construct. As the name implies, an iterate lets you iterate i.e. run over a list. The iterator can be used to perform various functions on the list.

However, when one thread is iterating over the list, if another thread tries to concurrently modify the underlying list, it results in ConcurrentModificationException. The following code snippets showcases the concept of ConcurrentModificationException.

Screen Shot 2016-07-20 at 12.43.40 AM.png

Screen Shot 2016-07-20 at 12.44.24 AM.png

If we try to add an element to the list while the list is being iterated, it can result in ConucurrentModificationException. There is an integer variable called ‘modCount’ which keeps track of the number of times the list size has been changed. This modCount is used in every next() call.

The ConcurrentModificationException can be avoided by locking the list.

Similarly, the for-each loops also use the Iterator in the background to iterate through the entire collection/ list.  Since the for-each loop hides the iterator, it cannot be used to remove/ replace the items belonging to the list/ collection. Trying to remove/ replace the list using for-each loop also creates a ConcurrentModificationException.

Thanks                                                                                                                                                                   — R

 

 

Search all the way

Screen Shot 2016-06-19 at 12.01.03 PM

Search has been an integral part of most of the computer operations. Even companies whose core feature is not search either build or adopt state of the art search engine to provide the best user experience. In this blog post, I will try to reason out the look, feel and functionality of a search engine and reason why some are more successful than others.

Given the advancement in technology and the revolution in browsers, the address bar can be used as a great search engine. Let us assume a more conventional path where a user goes on to “www.examplesearch.com”

Once a user goes to “www.examplesearch.com”, the intent of the user is clear : the user wants to search for something. Placing a prominent search bar in the page is very critical since it serves the basic intent of the user visiting the page. So now that we need a prominent search bar, where do we place the search bar?

  1. Search bar at top of the page: Placing a search bar at top of the page laves a lot of room for recommendations drop down but might cause the following 2 issues:

Screen Shot 2016-06-19 at 12.04.47 PM

a. The top of the page gets very cluttered and leaves a lot of real estate in the page                           free. If the name of the company and the branding is  at the center then the focus                       shifts from the intent of the user (search) to the company/ branding.

b. Another potential issue is that the user can mistype in the address bar of the  web                       browser instead of the search bar. If address bar does not have search capabilities                       or if the browser is set to another default search engine, the user experience is  is                         lost.

2. Search bar at bottom of the page: Placing a search bar at bottom of the page takes the                place away for the drop down recommendation. Further the footer generally contains                links to the subsequent pages and might make the appearance very cluttered.

Screen Shot 2016-06-19 at 12.17.08 PM

3. Search bar at middle of the page: Placing a search bar at the middle of the page provides          the right mix of branding and capturing the main intent of the user. So perhaps placing            the search bar in the middle of the page to start with is a good idea.

Screen Shot 2016-06-19 at 12.27.09 PM

Now, exploring the top right corner of the page, the sign-in/sign-out option has conventionally been on the top-right corner and might be the best fit place for the account options given the traditional user preferences. Search is integrated with many other products and if search is the flagship default page of the company, providing links to other products on the search page can help create product awareness and also provide an integrated user experience.

Screen Shot 2016-06-19 at 2.56.47 PM

The four squares at the top right corner when clicked, expands to provide links to a list of other products that belong to the company. This may not be as intuitive as it Pseudo violates Don Norman’s design principles. The consistency factor is missing out since all the other aspects are visible and spelt out while the rectangle boxes constitute a shape and do not provide a verbal description.

The cicl at the top right corner can be termed as “account button” and provides functionality to sign in, sign out and modify account setting which needs to be largely consistent across the products delivered by the same company. If the user has a profile picture, then the profile picture can be fit inside the circle to visually illustrate that some details about the user will be obtained upon clicking on it.

Now, with digitalization on the increase, image search can be a deal breaker. While image search is already prevalent, it may be a good idea to provide link to image search for the user. in the landing page itself. If the user does not obtain the necessary result through rudimentary web search and feels that image search is a better option then an option to image search would be pivotal.

Screen Shot 2016-06-19 at 3.26.52 PM Screen Shot 2016-06-19 at 3.29.41 PM

There can be a link to image search as in the figure shown on the left or it can be placed in the top right corner as shown on the right.The “image search” phrase below the search bar can be replaced by a aesthetic icon or creative text informing the user to go to image search if necessary. On the other hand, image search can also be placed on the right hand top corner proving a link to to the image search page. Perhaps A/B testing could be done to determine which of these is a better option. While the option on the left makes it easily accessible it might prompt the user to use image search when it is not necessary. The user may not notice the option on the top right corner and may go on with traditional search even if image search is a better option if the image search link is placed as shown in the figure on the right.

 

 

 

 

 

Designing a Video Streaming site – Home Page

In this blog post, I will try to reason out why a website has been designed a particular way and if can be optimized further. this post, refers to a desktop version of a video streaming website.

Some video streaming website has been a following way. It depends on where the user lands on your page from.

So 1. Track the source: Is the user coming directly to your website “www.examplevideoandstreaming.com”.  Now let us suppose that the home page looks like this. The rectangle with cross inside denotes a video.

Featured image

Now thinking about the design, there can be a number of questions that arise:

Advertisements:

  1. Should we have advertisement on the page – is our aim to get the user latched on to videos and then slowly kick in advertisements or should we have ads in Page 1?  It is usually one of the 2 scenarios:
    1. As a user, when I go to the website directly, I am sure I want to watch videos but I am not sure what video I want to watch.
    2. As a user, when I go to the website directly, I am sure what video I want to watch. I am going to go to the website and search for the video.

Putting up advertisements on the page, takes up some land scape. Is it worth putting advertisements on the home page considering that we want to provide the user with what the user wants right now. the additional aim is to keep the user in the website for as long as possible.

  1. Let us consider scenario (a) – Suppose the user does not know which video to watch, it is better to provide the user with more options.  If we put up an advertisement on the top half of the page, we may loose out on space where we could provide potential recommendation to the user. Hence putting Advertisements in the top half may not be a good option.
  1. Let us consider scenario (b) – Suppose we put the advertisement in the bottom half, what is the probability that the user is going to scroll down and go to the bottom half.
  2. Even if the user reaches the bottom half, the user would have seen a lot of content and images by then. What is the probability that the user is going to see the advertisement distinctly? The user aim is to decide on a video now.

Considering the above 2 common scenarios, it may not be a good option to have advertisements on home page.

Recommendations:

The next aspect to inspect is: How do we recommend videos? There a few options here. There are 2 types of user – new user (no data on preference) or existing user (data on preference available).

Categories (vs) No-Categories

  1. Do we just put in all the videos without any categorization – This may confuse the user. Combining the videos into categories will make it easier for the user to think and select the video. Data collection will also be easier for us based on categorization.
  2. We have decided that we are going to categorize our videos. Now there are many variables, we decide in the next section.

      New user (no data on preference)

How many categories should we have? How many videos per category? How many times should the user scroll before reaching the end of page?

  1. Number of categories: There are 3 types of user – active clickers, passive clickers and no clicks. The names are self explanatory.
    1. Active clickers – need to present a large collection of videos so that they have multiple options to click at. For these users, we need to present as many videos as possible on the home screen. Considering a standard screen size, we can push in 30-40 videos. This may make it look a little cluttered, let us ball park and fix at 35.
    2. Passive Clickers – need to present some information about the video. We may need to provide details such as number of times it has been viewed, when the video was updated and information such as genre if it is music. So while we provide this information we may have space for only 25 videos at one screen fit.
    3. No clicks – these are the negative personas. We need to provide them a optimize mix of “number of videos and information about video”.  Difficult to ball park a number for these users.

So considering the above scenario, about 30 videos with 2 lines of information about each video may be an ideal number.

On the number of categories, it is important to give enough categories for users to browse and select a video but also make is small enough to make it look uncluttered. It will be beneficial to provide around 5 video per category and a (>) arrow key after the 5 video if users want to browse more videos in this category. 5 videos per category can be accommodated in a single line and hence 5 seems a good number.

So if there are 30 videos and 5 videos per category, we will have 6 categories in one screen frame.

The categories we want to present can be based on a number of factors such as

  1. Trending Topics
  2. Country specific recommendations
  3. Popular categories (Music, sports, cartoon, movies)
  4. Recommendation based on time etc.

     Current user (data preference available)

The preference of the user is available, we can customize the number of recommended videos, the categories based on the historical data available about the user.

Generally it is considered that users should not click more than twice to achieve their action. Hence, it would be ideal to provide one more screen if the user scrolls down. To stretch it further, we can provide a 3 screen.

This is my take on the home screen  of a video streaming page. Please send me your feedback!

Thanks

–R