As I looked at countless mental health apps on the AppStore, I noticed something in particular. All of them have similar design implications. I noticed almost every app uses soft strokes with no sharp or jagged edges. I decided to look up why this happens, although I did have a very good reason.
I found an article by Yuliana Z. on medium.com she explains the difference in rounded corners and sharp corners and how each act differently under their own influences and what impact this has on the users.
A simple answer would be that rounded corners just look better and are easier to follow because they take less cogitative effort to visually process as the fovea is the fastest at processing circles thus the connection is made. On the other hand, processing edges involve more power going to the brain. A great example of this would be a rounded square (UI element) vs a normal sharp edged square, the rounded square is more easily processed because of the smooth edges.
Scientific researched done on corners (both design and physical) from the Barrow Neurological Institute found that the “perceived salience of a corner varies linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles”. This means, sharper the object is the brighter it is perceived – and the brighter the object is the harder it is to look at and process.
For example, look at this image below:
Another reason we are condition to rounded corners is that they are more organic both through evolution and present day. A look of things we see in the house or in nature are rounded, this can condition us to make us feel more familiar when we see rounded design. However, when we see sharped cornered objects in real life we mostly associate them with danger, e.g. knife, etc. We especially learn these values when we are children as sharp corners hurt e.g. kitchen table and rounded corners are safer. This provokes a response in the brain called the “avoidance response” that connects us with certain responses through experiences both relative and historical.
Relative to the natural human motion, we find that maps and diagrams are easier to follow rounded/ curved lines as our eyes and heads are more adapted to the natural movement these human components. However, whenever follow a line that abruptly changes directions it can throw the person off the path making following the path less transitional and more choppy.
Additionally, an extremely good way to bring attention to content is to put it inside a rounded rectangle as the corners are curved inwards towards the centre of the rectangle putting more emphasis onto the content.
So what are the benefits of rounded design?
- It creates a friendly interaction
- It helps save space and introduce more negative space
- It draws attention to the content and not the component
While all this information is good and benefits the overall design, however, how will this affect the user’s of my design?
Before I answer that question, we need to look at my user’s
1. Parent/Guardian – This User would usually be a concerned parent who is borderline tech savvy. They want to understand their child’s real behaviour.
2. Patient/Child – This would be a socially anxious/mentally-ill pre-teen who is scared to show their real feelings to others.
In this case, sharp edges in both UI/illustrations can evoke a feeling of discomfort and unease, this can be especially apparent in user’s who are dealing with social anxiety and depression. This is one of the reasons why so many mental health apps contain soft edges and curves e.g. calm, etc.
What’s next?
I will continue to dissect and conduct competitive analysis on apps that deal with mental illnesses. It was extremely helpful in know what the architecture of design can do to both user’s and content. However, I want to set a challenge for myself; I want to be able to create my entire app with limited to none jagged or sharped edges, this counts for the typography, illustrations and UI to make it feel like a safe space for my users.
Links:
https://medium.com/@yulianaz/why-rounded-corners-are-easier-on-the-eyes-8fa1d816903d