The Elements of User Experience: Shape and Line
In regards to space in design, it’s often thought of more in architecture than more digitally focused designing. How a person perceives the space of a room, building, or park around them is at the forefront of an architects mind when designing buildings for people to inhabit. Similar to any design made for people, the psychological impacts of space and how it’s used greatly affect what types of space are used for certain areas.
Space Psychology
Every time we walk into a new room, we often have an initial reaction to the space around us. This is the psychology of space and as said by Dave Alan Kopec, it can be described as “the study of human relations and behaviors within the context of the built and natural environments”. More specifically, there’s a few key aspects of space design that affect a person’s perception the most
Open-space - Tranquility and rest Complexity - Challenge and purpose Consistency - Comfort Texture - The softer it is, the more pleasant it becomes Identification - Lack of knowledge brings agitation Color - Emotional triggers Social criterion - Certain spaces are designed to be shared Temperature - The thermal sensation a space brings
Beyond just how the space is laid out, our relation to objects and sensations in the space effect are psychological views of said space. For example, if we can’t properly identify an item, we’ll question what it is and why it’s there. Since we don’t know what it is, we don’t know what it does either. This causes a conflict, as you feel the item is wasting space due to it seeming useless, but you can’t be sure as you don’t know what the item does. If you were then told the item was a chair, even if it was in a terrible spot you’d still gain comfort, as you at least know what the item does now and can adjust its position accordingly.
Despite having a lot going on, MLB.com uses it's space effectively, properly spreading each item out and making sure essential items like scores and headlines are at the forefront
Digital Space
When creating work digitally, the concept of space is similar, though how it’s described is adjusted for what a digital space entails. More specifically, as described by Ishan Manandhar, there’s four main types
Micro Space - Space between the small elements like letters, lines, icons, forms, paragraph, buttons and graphical element Macro Space - The term given to larger volumes of white space. The space between bigger elements like text columns and graphics. It also refers to paddings and margins. Active White Space - This is the space that you make a conscious effort to add to your design for emphasis and structure...often asymmetrical Passive White Space - The space between small objects that goes unnoticed. The designers use it to create texts or arrange paragraphs or icons. It generally occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element
Macro and micro spaces describe the size of the space, while active and passive describe how the space is used. Often, macro spaces have active white space, as it was carefully designed along with the rest of the page. On the other hand, micro spaces tend to have more passive white space, as they come in more naturally, such as the leading and tracking of font’s.
Going deeper into micro spaces, they often utilize other elements of design, such as line. On many different apps and sites, seemingly meaningless lines are often present as a sort of guide. Due to their simplicity, they’re both easy to implement in these micro spaces, as well as a way to break up certain claustrophobic areas. With proper utilization, lines can help lead a user through a design, empathizing what needs focus and separating the design into more focusable areas.
By using lines, google is able to separate content to allow easy viewing and selecting for the user
Altering a user’s experience
When lining up the concepts of space psychology and digital space, it becomes clearer on how it affects a user’s experience. As an example, I’ll use the CMS site Squarespace. As probably the most well-known CMS now, Squarespace wants to give their user a sense of customization and professionalism. The idea is that by using Squarespace, you can build a website that is both personal and professional.
A sample of Squarespace's header. Like other similar sites with a hero image, the text is aligned so that it takes up minimal space, as well as being positioned to where a user's eyes first go
When you first open the site, you have a header image and nav bar. In the image, the text starts at the top left since that’s how most read, then the rest of the header is the macro space of the image. This makes the space feel more open, presenting an initial calmness to a somewhat complex system. Afterward, as you scroll down, you slowly work your way through many different colored divs. Each of the divs has a combination of a header, image, and some sort of colored background. This gives both a sense of consistency throughout the site, as well as a good use of texture to help show how unique your website designs could get.
A sample of one of Squarespace's divs. Throughout the site, most divs are aligned like this, with clear separation of content and proper spacing to make it easy for a user to read
In terms of color, it enhances the site’s sense of space as well. Once you begin scrolling, the navigation bar transitions to black. The footer of the site is all black as well. When compared to much of the other white space of the site, this specifically stands out due to the contrast. Since the black is so much darker than every other aspect of the site, you’ll always know when you’re in that part of the website, making it easy to identify where you are and what you can do on the site.
This is just a small sample of how space can affect a design. For every digital space we use, we have to be aware of all the space. Even if most of the pixels aren’t technically being used, how they present themselves to us will have an effect on how we view the rest of the space that’s actually being used, whether we realize it or not.
