17

This is a question I have been thinking about in the past few days. I'm making a social app(Similar to Facebook or Instagram etc). As I started working on the design and I though of a question.

The question is as follows, **Do different kind of shapes alter or possibly damage the look and the experience of an app? **

Here is an example from my app : It's only a sketch please refer only to the buttons for the Sign In i have decided use this :

enter image description here

And for the Table View inside the app use this :

enter image description here

What do you think?

29

The style of shapes can alter the look and feel of the application and thus change the user experience.

Apple got praise with their rounded corner movement showing that a different style shape can lead to a better User Experience. Lets look at examples

Which image is easier to follow?

enter image description here

Which Image would you prefer to look at (aka is easier on the eyes) enter image description here

This is one of the best examples of how rounded corners or a different style shape can lead to a better user experience.

enter image description here

Those were taken from This article explaining why rounded corners are easier on the eyes The following are some highlights of that article.

Lets compare rounded shapes to ones with Angular edges

Objects with pointed features, elicited stronger activations in the region of the brain related to associative processing, meaning that although angular objects were less liked they elicited a deeper level of processing than did the contoured objects - they were in effect, more interesting and more thought-provoking to look at

Angular objects are more effective at attracting attention and engaging thought; contoured objects are more effective at making a positive emotional and aesthetic impression.

The following two examples came from this similar question.

In regards to different types of shapes when they serve as buttons see the following

This [Article] provided some interesting insight.

  • Make buttons look like buttons (ie the shapes people are used to seeing)

These

enter image description here

seem to be more button like than image below. (notice the shape difference)

enter image description here

6

How significant the shapes of objects are on altering the experience is much more difficult to measure though. I personally would do A/B tests with shape designs on amazon mechanical turk for a cheap and dirty way to see what people prefer.

Reading more about Contour Bias further describes some of these topics Below are two images from that article

Contour bias is a tendency to favor objects with curved contours over objects with sharp angles or points. If you think about it on a subconscious level this makes a lot of sense. Sharp and pointed objects can be used to stab and cut. They are potential threats to us physically. They lead to an subconscious processing of fear in a region of the brain called the amygdala.

enter image description here

vs

enter image description here

  • Thank you bob! i really appreciate this. I will take you advice and look for an answer :) – Roi Mulia Apr 23 '15 at 18:55
  • I cant upvote . i promise i will ! – Roi Mulia Apr 23 '15 at 18:55
  • your welcome good luck, also if your stuck between 2 themes amazon mechnical turk can give you some data for a small amount of money. mockup one VS mockup two. which one do you prefer and why. hint keep mechnical turk tasks simple because the effort turkers spend is minimal. – Frank Visaggio Apr 23 '15 at 18:57
  • Your welcome I always try to put links in or give credit because the people who came up with the ideas and thoughts the first time did the bulk of the work. – Frank Visaggio Apr 23 '15 at 19:11
  • Yup. This is called contour bias. But, I am unsure if this will be the case as humans evolve along with interfaces. Even today, Microsoft's design guides suggest rectangular buttons (Metro/Modern theme) – Gautham Raja Jul 2 '15 at 22:51
7

Bob has, I think the correct answer.

I'd add two considerations specifically for your site:

  • If it's a new, consumer-facing site, then the consumer will already have a learning curve to climb with understanding your site. Making that curve more difficult by introducing non-standard/unusual control designs makes for a worse learning experience (and therefore lower stickiness, which is presumably what you want from a social network).

  • There are some exceptions to this guideline. For example, if you are using the hexagonal shape for broader site branding, then the hexagonal button may present an acceptable tradeoff between usability and the benefits of using a shape that is sympathetic with or reinforces your brand.

1

Introducing new shapes and forms increases the cognitive load and puts the user off.
Rounded appearance - always good because perception is driven by law of continuity and rounded'ness helps enormously
'Real world button' like button images are better - because the mind is able to map it with the image of button which it has in itself (one will recognise why traditional icons become immediate hit)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.