Published on <a href="https://blog.prototypr.io/how-user-testing-improved-my-website-2950e86aed99?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nikhil Yadav <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lrC4qXrljwmEKMOCBrh5tw.png">
With beautiful crafted illustrator interface, ability to create vectors, interactive profile picture and stories loading in tabs, I was confident enough that I’m gonna outshine every designer. With this bright hope, I started applying for freelance projects. At some places, It helped me to get projects whereas at other places, I got rejected too. I was unable to find out where’s the problem and why the portfolio is not effective until I realized that I’ve skipped one important stage of design, User Testing.
In this article, I will give a brief about user testing and different tools that are used for user testing. Then I will go in detail to tell how I used Google Analytics API and History API to track virtual loaded pages in my website and how Heatmap helped me to get better insights of user interactions in my website.
<h3>Design, an iterative process</h3>
Every design problem statement consists of following steps: Problem Definition, Data Collection, Data Analysis, Development, Pre-Testing, Optimizing and Launch.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*hUaywRTIFj7lQqNQ.png">Source: Chicago Architecture Foundation
Whole of this design process is a close knitted process where every stage interacts with other stages, collects the feedback and process is continued again from the start. Think of design process as an infinite and never ending loop instead of a uni-directional process. You need to be constantly working to take feedback and improve your design. Now the question arises how to take the feedback. There are multiple tools available which can help to take the feedback of user interactions with our product. This process is called User testing.
<blockquote>Think of design process as an infinite and never ending loop instead of a uni-directional process.</blockquote>
<h3>What is User testing?</h3>
User testing or Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. User testing focuses on measuring a product’s capacity to meet its intended purpose.
<h3>Different tools used for User testing</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*H3MjgNpGd7L4EA_e.">Google Analytics Dashboard
Google Analytics&#8211; It is a freemium web analytics service offered by Google that tracks and reports website traffic. Google Analytics analysis can identify poorly performing pages with techniques such as funnel visualization, where visitors came from (referrers), how long they stayed on the website and their geographical position. It also provides more advanced features, including custom visitor segmentation.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5JLzvn9fqF5VjEGu.jpg">Click Heatmap
Heatmaps- Google Analytics is able to give us holistic view of users visiting our website but does not give us in-depth details of what part of the page the user interacts with. Here, Heatmap comes in handy. A heatmap is a graphical representation of data that uses a system of color-coding to represent different values. Heatmaps are used in various forms of analytics but are most commonly used to show user behavior on specific webpages or webpage templates. Heatmaps can be used to show where users have clicked on a page, how far they have scrolled down a page, or used to display the results of eye-tracking tests.
<img alt="" src="https://cdn-images-1.medium.com/max/520/0*ZlPgXATPPE2WcIXT.jpg">Lady taking personal interview. Source: Usability.gov
Personal Interviews- If you want to observe the users more closely and understand their psychological behavior, One can conduct personal interview by selecting a user at random and recording their behavior and response while they uses our product. This will help to understand which clicks are ambiguous and confusing and thus, takes time to click.
<img alt="" src="https://cdn-images-1.medium.com/max/486/0*Hi581_dIvSC9tFej.png">A/B testing
A/B testing- A/B testing or split testing is an experimental approach to web design which aims to identify changes to web pages that increase or maximize an outcome of interest (e.g., click-through rate for a banner advertisement). As the name implies, two versions (A and B) are compared, which are identical except for one variation that might impact a user’s behavior. Version A might be the one currently used, while version B is modified in some respect.
There are other user testing tools and methods also. I will focus on Google analytics and Heatmap only and explain what problems I faced with Google Analytics, how I used it in my website to track visitors for my case studies/projects and how Heatmap proved a useful tool for improving the performance of my website.
<h3>Google Analytics</h3>
Google Analytics is very easy to setup. Follow the simple steps below:
<ol>
<li>Create or sign in to account on <a href="https://www.google.com/analytics/">google.com/analytics</a></li>
<li><a href="https://support.google.com/analytics/answer/1042508">Set up a property in your Analytics account</a>. A property represents your website or app, and is the collection point in Analytics for the data from your site or app.</li>
<li><a href="https://support.google.com/analytics/answer/1009714">Set up a reporting view in your property</a>. Views let you create filtered perspectives of your data; for example, all data except from your company’s internal IP addresses, or all data associated with a specific sales region.</li>
<li>Follow the instructions to add the tracking code to your <a href="https://support.google.com/analytics/answer/1008080">website</a> or <a href="https://support.google.com/analytics/answer/2587086">mobile app</a> so that you can collect data in your Analytics property.</li>
</ol>
But there is one problem with Google Analytics tracking which I faced with my portfolio. My portfolio is a one-page website where projects are loaded asynchronously. Google Analytics was not able to track these asynchronous loads, also known as Virtual loaded pages. Therefore, I was missing on a major information about the no. of visitors visiting each project respectively. I wanted to measure the effectiveness of each project and take decisions like which project to drop in the near future. This dragged me to a conversation with one of my friend, <a href="https://medium.com/@utkarshgupta_32711">Utkarsh Gupta</a> who told me about <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">History API</a> with which I was able to fake the URL and track the virtual pages. I will not go in detail about how to implement it. Folks at Google have already compiled it in <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications">this beautiful article</a>.
<blockquote>Google Analytics is not able to track the asynchronous loads unless forced to do so.</blockquote>
There is one more important thing that I would like to share in regards with the History API. The pushState() function take three parameters: state object, title and URL. The state object and title can be passed as null and URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This was the line that I ignored and it wasted my 3–4 hrs.
<blockquote>URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.</blockquote>
What this means? The URL needs to be the pathname of the content that you are loading asynchronously. Suppose the discussion.html is to be loaded, the new URL should be <a href="http://nikhilyadav.com/work/discussion.html">nikhilyadav.com/work/discussion.html</a> not <a href="http://nikhilyadav.com/discussion.html">nikhilyadav.com/discussion.html</a>(if the discussion.html exist inside work folder).
Using history.pushState() on a successful load of the project, history.back() while returning back to home tab and then finally using Google Analytics API to send page-views made it possible to track the virtual pages.
<blockquote>Fake it till you make it</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/706/1*C6ofECKCd5Q85CopScp0gg.png">Raw HTML of project loaded
Even if I was able to fake the url, The faked url created another set of problems. What if the user accidentally refreshed the url or user visits the url directly? then the website will load raw HTML of the projects without any CSS and interaction which I didn’t want. Thanks to Google again which has answer to my every question, I found the solution to my problem on stackoverflow. This is the beauty of the internet, most of the problem which we face in our daily lives have already been faced by many and solutions to them exists. Only one needs keen eyes to find it.
<blockquote>This is the beauty of the internet, most of the problem which we face in our daily lives have already been faced by many and solutions to them exists. Only one needs keen eyes to find it.</blockquote>
Whenever the user visits the url of a project directly, I only need to run the script to direct the user to the home page with a hash of the name of the project. Then finally I used that hash to open the respective tab containing the required project on the home page(This involves checking during the load of the home page if there is any hash in the url and then running the function to open the respective tab by passing that hash as a parameter). This helped me to make the fake url work like a real url.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Bx06v8CTH3ozIHs1LPb05w.png">Results of Google Analytics(before)<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*57aNz45kAaZGDsS2RD7tew.png">Results of Google Analytics(after)
<h3>Heatmap</h3>
With Google Analytics and History API, I was able to track each projects individually but I wanted to add another layer to it. Testing with which part of the page, user interacts the most. For this, I setup Heatmap in my website.
I made a account on <a href="https://heatmap.me/">Heatmap.me</a> and added a small js script in my website(I had to copy the script given by Heatmap.me and paste into the body before closing &lt;/body&gt; tag. No rocket science involved!). Then 7 days of recording data and voila! I saw colorful patches of green, yellow and red colors scattered all over my website.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lrC4qXrljwmEKMOCBrh5tw.png">Heatmap results for my website
The data obtained from Heatmap helped me to explore the hidden areas of my website which I never thought users would ever interact. For example, People tried to click on Home tab out of curiosity(or whatever 😛) when they were on Home page itself. I found that it redirects the user to the website from which they originally came from(This was due to the history.back() function, I added whenever user tries to click on home tab when he was on other tab). This helped me to take into consideration the use case which I ignored initially. Similarly, Heatmap also helped me to fix other development related bugs.
<img alt="" src="https://cdn-images-1.medium.com/max/610/1*8kHJap8Ppj5wuECy4ltBYg.png">The scattered blue patches that you see are places where people tried to create shapes.
With the use of Heatmap, I am glad to know that there are large number of users who play with tools and profile picture(I also had fun implementing them). This also made me realize that there is large user retention on the landing screen than any other part of the home page. Therefore, I added a small popup message for recruiters at the bottom of screen that calls for mailing me in case if any user need help with their design projects which is the main objective of my website and this was initially missing in the landing screen. How bad it was for my website if user come and go away after playing with tools.
<img alt="" src="https://cdn-images-1.medium.com/max/106/1*x_Fw5F7_DMf2anXYW9x1-w.jpeg">Inactive Clicks on Toolbar
There was another problem which I will call now as Zombie buttons which happened to be some of my toolbar buttons. Imagine how frustrating it was to click a button which actually does nothing. Yeah, It was frustrating indeed.
<blockquote>Zombie Buttons are the buttons which looks like real button but are actually dead/inactive.</blockquote>
I was shocked to see the response of users that how dearly they wanted to use the tools other than selection tool, rectangle tool, ellipse tool and eraser tool(which are currently working). The highest number of clicks being on pen tool(which is inactive, currently). Therefore, I immediately removed the hover effect on these buttons which made them look real to better the experience of users.
<blockquote>For the users who wanted to use pen tool in my website but couldn’t use it, I am sorry and will surely work on it. I am beginner currently learning things on my own, please oblige me. I will update this blog whenever it is implemented.</blockquote>
<h3>Summing it up</h3>
The Google Analytics and Heatmap proved to be useful tools for me and I hope that these tools will also help you in improving the performance of your website. Apart from these changes, I also did some other changes too like adding “mail me” button and comments plugin in each case study. Let me know in comments what you feel about these changes and feel free to message me if you found any bug in the <a href="http://nikhilyadav.com">website</a>, I will debug it immediately if possible. If you like, You can share your user testing story as well.
Thanks for reading this so far. If you like this article, please hit the 👏 button and let others too know about this. Keep following me for such updates on <a href="https://dribbble.com/yadavnikhil012">Dribbble</a>, <a href="http://medium.com/@yadavnikhil012/">Medium</a> and <a href="https://twitter.com/yadavnikhil012">twitter</a>. 🔥 🔥 🔥
I am also available for some freelance projects, feel free to shoot me a mail at <a href="mailto:yadavnikhil012@gmail.com">yadavnikhil012@gmail.com</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2950e86aed99" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-user-testing-improved-my-website-2950e86aed99">How user testing improved my website?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How user testing improved my website?

Top Stories