As a student of UX design, I’ve found it helpful to analyze successful websites to find out how they implement various universal design principles. Seeing how other designers tackle potential design problems has been an essential tool in furthering my own understanding of how to do so myself. It doesn’t take much to see that many innovative design solutions are actually rooted in the core principles of design. In pursuit of better understanding of what Squarespace does so well, I have identified 20 universal design principles (in no particular order) that are currently helping shape the appearance, structure and usability of their website.
1. 80/20 Rule
The 80/20 rule dictates that 80% of the usage of a system typically comes from 20% of its capabilities. If a website is successfully implementing this rule, the 20% of the system that is most frequently used should be the most easily accessible. In this case (as well as with many other websites), the most frequently used features are put in the header, while the remaining 80% of the sites features are placed in the footer. Those less-used features are still important to include, but by eliminating them from the header, the experience for most users is significantly streamlined.
2. Hick’s Law
The header and footer organization as seen above also plays a major role with Hick’s law. This law states that the time it takes to make a decision directly correlates to the number of alternatives. The more options, the longer it takes to make a decision.
Since the main menu only offers 5–6 options at a time and features only one menu item with a sub menu, the time required to make a decision is substantially less than if they were to have all of the pages of the site at their disposal to choose from at any given time. By reducing the initial choices, Squarespace has made it easier for site visitors to quickly decide where they want to go.
3. Depth of Processing
Today’s web users are constantly bombarded with new information. Depth of processing allows users to more readily recall information that they have studied more in depth than something they have only analyzed superficially (think: reading a textbook about something vs. writing an essay on the same subject). Since not all website visitors will want the same level of depth of processing, it is helpful to offer a sample of what they might learn before fully delving into the subject.
To enhance depth of processing, Squarespace engages users with articles and other ways to more thoroughly understand tools that could help enhance their website. By making the summaries brief, however, they enable the customer to decide how deeply they need to understand something.
Adding highlighting to a body of text can add intrigue and complexity to a design. Highlighting can come in many forms, including color, inversion, italicized or bold text, and more. In Squarespace’s case, they frequently utilize underlining (as seen above) as a form of highlighting important text or buttons. Highlighting can be a very effective tool when used appropriately but excessive highlighting (especially underlining) can add unnecessary noise to a design and impact readability. Squarespace seems to be toeing the line with the amount of underlining they have implemented into their designs.
5. Flexibility-Usability Tradeoff
When creating a new product, every designer has to ask themselves how much flexibility a product should have and at what cost. The more complex a product becomes, the less usable it becomes, so while having new features available can be helpful, it should not come at the cost of the usability of the product. It’s a balancing act.
As a business centered around customizing websites for everyone, it is important to keep in check what features are available so as to keep the product simple to use. By creating templates for their customers to choose from, Squarespace has significantly reduced the flexibility of their designs, but has made the process for designing websites much simpler overall.
6. Biophilia Effect
Humans are drawn to environments that feature nature imagery and views. These features have been shown to reduce stress and improve focus- both of which can help website visitors and customers to feel more confident about their decision to create their own website using Squarespace.
Squarespace chose to implement the biophilia effect rather subtly, but the images they chose still play a part in impacting potential customers’ decisions.
7. Cathedral Effect
The cathedral effect dictates that the height of ceilings impact our ways of thinking, particularly that high ceilings help promote creative, abstract thinking. By including images of buildings with high ceilings, Squarespace is subconsciously impacting the way their website visitors perceive the space of the website itself. Take note that the image does not have anything to do with the text alongside it (except perhaps it implies that that is where your team resides). The connection is abstract at best, but the impact of the image on the subconscious is powerful.
Immersion is another principle that impacts our thoughts and emotions. When an individual becomes immersed in a design, they frequently lose awareness of the “real” world and become heavily engaged with the subject of their focus, which can lead to significant satisfaction and joy. In the case of Squarespace, immersion is achieved via engaging videos that showcase the impact Squarespace websites can have on individuals and their goals and dreams. Check out Keanu Reeve’s Squarespace ad, which is available on the website, as a strong example.
The alignment of elements can significantly impact the overall appearance of a design. A website looks cleaner, more organized, and more easily accessible when created using alignment, which is typically achieved by using a basic grid. A strong example of this principle can be found on Squarespace’s template page, where the template options are aligned in two columns.
10. Golden Ratio
The golden ratio has been found throughout nature, biology, art, architecture, design and more. Elements with this ratio (or at least very close to this ratio) have been found to be particularly aesthetically pleasing. Squarespace’s template designs are displayed in rectangles that very closely mirror the golden ratio- yet another reason the template page is so appealing.
11. Aesthetic-Usability Effect
This principle is fairly simple- designs that are aesthetically pleasing are perceived as being easier to use than designs that are not. Squarespace has done an excellent job creating an attractive work environment with aesthetic examples that imply that the process of building a website with them is very simple.
12. Attractiveness Bias
Squarespace was wise in taking heed to this principle in their design. In order to bolster up their image, Squarespace allocated one of their few main menu options to showcasing their customers. Luckily, they are an attractive bunch. According to the attractiveness bias, attractive people are typically seen as more intelligent, competent and moral than unattractive people. By creating profiles about their most attractive customers, Squarespace actually improves the way they are perceived in the eyes of potential customers.
13. Face-ism Ratio
How a photograph is taken or where it is cropped can also have a major influence on how the subject of the photograph is perceived. Photos that are more closely cropped, focused more on the subject’s face, tend to draw attention the the individual’s intellect or personality. On the other hand, images that display more of the subject’s body focus more on the subject’s sensual or physical attributes.
As seen under Attractiveness Bias, Squarespace used images that were more closely cropped when attempting to focus on the subject’s character and intellect (they did choose to use Squarespace, after all!). On the other hand, however, the website also includes images that display more of the body of the subject as a whole when it suits their purposes.
Note: face-ism ratio is a term that originated from the media’s gender bias. When portrayed in the media, images of women have historically focused more on their figures and sensuality, while images of men have been more cropped to evoke the appearance of intellect. Stay tuned for my upcoming article on how companies (like Squarespace) are changing this.
14. Expectation Effect
The expectation effect is a long-established design principle that has been used over the decades to influence how people perceive a product. By setting certain expectations, customers and consumers expect certain results, which can, in turn, be a self-fulfilling prophecy. In the case of Squarespace, they have chosen to use emphatic quotes from their customers about how their service has impacted their lives, in hopes of influencing new customers to feel the same way.
15. Advance Organizer
Learning to build your own website can be very intimidating for individuals who have little to no knowledge of web design or development. Taking on the task of doing it yourself can be overwhelming. Advance organizing is a technique that can make the process seem simpler by first addressing what the audience already knows before introducing more information.
In the below example, the site prefaces the website building process by introducing itself: “Squarespace is the all-in-one platform to build a beautiful online presence.” After that, it invites the audience to “Get Started”. Instead of assuming the potential customer knows what Squarespace does (which they likely do know), they acknowledge this basic fact, thus assuaging some of the fear and apprehension the future customer is feeling.
Closure is considered one of the Gestalt principles of perception. Essentially, human minds can close existing gaps to create a complete image. When this principle is implemented into a design it can add complexity and intrigue, or adversely, reduce complexity to create a more minimalist aesthetic. Squarespace has implemented the principle of closure in their logo.
Because of the lack of connection between the curved lines of the logo, it leaves the design up to interpretation, making it more intriguing, yet not excessively cluttered or detailed.
Comparison is a frequently implemented principle when it comes to product pricing. This principle helps potential customers weigh their options in order to make the best decision according to their needs. Humans inherently want to compare their options before making a decision, so by abiding by the principle of comparison, the user experience is improved and the decision-making process is streamlined.
18. Five Hat Racks
The principle of the five hat racks refers to five organization tactics: category, time, location, alphabet, and continuum. These forms of organization are helpful for quickly locating information and are universally recognized.
Squarespace chose to organize their website templates according to various categories of interest, such as Online Stores, Music, and Weddings. This helps their customers more readily locate designs that might suit their needs. The categories have also been placed in alphabetical order, to make locating each option intuitive.
19. Error Prevention
Humans are prone to error. Due to this simple fact, good design includes error prevention. A common form of error prevention comes in the form of pop-ups that alert users to problems that have occurred, or serve as reminders when something irreversible is about to occur.
On Squarespace’s pricing plan page, an error prevention pop-up appears after selecting a plan to ensure that the customer understands how selecting that plan might change their current account.
Accessibility is a crucial part of UX design- one that is often overlooked. In order to create the most inclusive, optimal design possible, a designer must ensure that the website is accessible to people of all abilities and disabilities, including hearing, vision and motor impairment.
In order to promote this, Squarespace has guides regarding accessibility available on their site. Not only does this serve their website, it helps create a more inclusive internet experience for all.