"Like this site" and the dot product

“Like this site” has always been an interesting construct—one that is well-known to the web design community. But what does it really mean? Does the client like only a specific feature, a unique combination of features, a subset of a given functionality or a decorative element? This needs to be more clearly communicated to the designer, but it's also important that the designer is able to listen for the unexpressed.

It someone wants a complete copy of a website, this should be a warning sign. Copying at scale is bound with ethical and legal problems, which can quickly sink someone who is just starting in the field. That said, not only is a 1:1 copy very hard to achieve (no two sites are alike), but it would mean that the designer would need to compromise their creative freedom and create something that already exists in the marketplace. But as almost everyone knows, me-too sites are rarely as successful as their original counterparts. So they may become costly without providing a lot of benefit to the client or the designer. Multiplying the sites, their functionality or even user base contributes to making the web look as a distasteful assembly line—the one we were trying so hard to avoid in the past.

Partial copies of websites also aren't much better, but this is not obvious at first. Until we see how duplicating one functionality from one site and another one from another site leads to websites that are mashups of services. Services which can fail at any time without giving warning signs and for which we may have no useful fallback when this happens. Moreover these services are often inconsistent with each other in the way they are implemented and designed and in the assumptions they make. If the brand colors should have been only black and red, now the site needs to introduce buttons of various colors belonging to each service. Before we know it, we suddenly have the full mix of colors on our site. Moreover, few services would change their elements according to the color palette of a given brand. While using external services (which is a form of partial copy) gives us a sense of control, the reality is that we are not left with much. Every foreign element we insert starts to gather information from our sites, making us someone else's product. And it starts to weight too. And we need to always agree with the service limits and policy changes without asking too many questions.

“Like this site” could also be a symptom that the client doesn't have enough clarity of what they want. Working on any project with no clear goal is not much better than working on no project at all. Without enough clarity about the details, a project will lead to failure and this will hurt both the designer and the client. A designer who could foresee the failure in advance should not agree to work on this project (even when paid to do so) until most of the issues get resolved. We are sometimes paid to shut up and work until the project's failure. But this is detrimental to our psychology and our further ability to work. Therefore, it is often said that a professional should know when to say “No!”.

The goal of web design has never been to merely create a website, but to support a business, to introduce new revenue channels, to find a way to increase sales, to simplify and enhance communication with the client's clients. To say that “web design is dead” would mean that businesses either acknowledged their death or simply no longer need more customers. It would be hard to believe that. We see how every day new startups enter the market with interesting new ideas and a burning desire to realize them. Sometimes they succeed in partially displacing either other startups or even well-established companies. The marketplace works 24hours/day and this is how many hours web designers are needed. What is no longer seen as sufficient are template-ready sites serving as placeholders for design, but providing no business value. Or sites with “agents” sounding like robots.

This is why “like this site” would rarely if ever work. But we could at least try to understand the reasoning behind it and the factors that lead the client to believe that this is the right solution for them.

A site can be seen as a collection of features evaluated from the client's perspective. If the client has site A, the features that might be interesting to them could be usability, accessibility, aesthetics, functionality, maintainability of both code and content, performance, standards-compliance, SEO or anything else. So if they score these features from 0 to 100, they give us a vague understanding of the current state of the site as they see it. “Like this site” means evaluation of B according to the same criteria and by the same person. This gives us two vectors with equal number of features. Then we could compute the dot product, which is used in the cosine similarity. For vectors with 3 features this is defined in the following way (although it works similarly for any number of features).

After all multiplications and additions, we get a number. If we wanted another vector, we would need to use the cross product. Here is the dot product expressed as a sum

and as a JavaScript code

The cosine similarity is then

We compute the norms, using the sample vectors defined by program code

So we get

The result here is approximate. If the angle between the two vectors is 0 deg, then they point in the same direction (in a 3D space, from the origin), so they would be similar. If the angle is 90 deg, that is, the vectors are orthogonal to each other, they would be unrelated (it is not possible to say whether they are similar or dissimilar). And if the angle between them is 180 deg, they would have opposite directions, which would signify the highest degree of dissimilarity. In this case, the angle 27.8171° shows some similarity, but we have chosen a very simplified example here with very small numbers and a very small number of dimensions, which normally doesn't hold in reality and may somewhat distort the results. Usually vectors can have hundreds of features and they may contain entries which differ orders of magnitude.

The next time a client comes and says that they want a quick fix, we could examine what this fix could achieve in terms of reducing dissimilarity. If from their perspective (which is most helpful when honest), the differences between A and B are small (angle < 45°) and we also see it this way, then that wouldn't require a big time investment on both sides and can be done relatively cheaply. If on the other side we both agree that the degree of dissimilarity is too high (angle > 135°), then considerably more effort may be needed, which would increase costs. Note that this is only a model and it depends on you how you will choose to implement it in your own context.

The dot product is seen in many other cases. If we take two matrices and multiply them

each entry in the new matrix will be a dot product from a row vector of the first matrix and the column vector of the second matrix. (For the multiplication to be possible, the number of columns of the first matrix should be equal to the number of rows of the second matrix).

What if we have a neural network with some input values that are weighted differently and a neuron which produces an output from them? Looks like the dot product.

What if we have a small 3x3pixels image segment, whose pixels are represented through numeric values (possibly the red, green or blue channel) and we want to convolve it with a kernel of size 3x3? We compute a11*b11 + a12*b12 + a13*b13 + a21*b21 + a22*b22 + a23*b23 + a31*b31 + a32*b32 + a33*b33, and then replace the pixel value at the center of the original image with the normalized result of this sum. This looks again very similarly to the dot product.

If we have an evaluation method with many criteria and we would like to assign a different weight to each to understand how various options compare to each other, we could use again something similar to the dot product, without even realizing it. Our clients would be happy to learn about it.

bit.ly/1fTXxTG