Visual Design – Simple and Familiar

I started with the idea of looking for a technology website to analyze its visual consistency, as the elements are arranged in the GUI (Graphical User Interface), but when performing this search; I noticed something in particular, technology website have some visual consistency between them.

In order to analyze the visual consistency, I have taken some websites and have generated a general structure of their homepages.

Note. In the tables “WebSite – Homepage Structure”, only the organization of the elements shown in the home page of each site are represented but not the proportion of them.

Let’s see the visual consistency of some technology websites:


Techspot.com

  • WebSite – Homepage

Techspot.com

  • WebSite – Homepage Structure

Techspot - Main Page Structure


Cnet.com

  • WebSite – Homepage

Cnet.com

  • WebSite – Homepage Structure

Cnet Structure


TheVerge.com

  • WebSite – Homepage

Theverge.com

  • WebSite – Homepage Structure

TheVerge Structure


Techradar.com

  • WebSite – Homepage

Techradar.com

  • WebSite – Homepage Structure

Techradar Structure


If we look at the order, position and using, like: logo, social options, menu options, images, trending stories, lastest stories and featured stories;  they are similar or familiar (well known).

But there is a guide for technology websites or convention? In fact, there is patterns or web fundamentals best practices that designers could follow; but no guides or conventions that determine the format or the design when you create a technology website like when you want to develop an application for a mobile platform (Android, iOS and so on).

May depend on a strategy to positively contribute to the user experience? This strategy could have a relationship with the following definitions: Visual Complexity and Prototypicality.

But what is the definition of Visual Complexity and Prototypicality?

Visual Complexity (VC):

Makes only sense when considered relative to a given observer. (Edmonds, 1995).
The amount of detail or intricacy of line in the picture .(Snodgrass and Vanderwart).

Prototypicality (PT):

The amount to which an object is representative
of a class of objects. (Leder et al., 2004, p. 496).

The relation between Visual Complexity and Prototypicality have a big impact in the users, because they prefer websites that look simple (low complexity) and familiar (high prototypicality). Both factor are interrelated, if the website has a high visual complexity and the design is familiar, user perceive it as less beautiful; and in the other hand, if the website has a low visual complexity (simple) and the design is unfamiliar, user perceive it as ugly.

The users create a mental model of how a website must look dependly of the website type, in this case, technology websites.

This phenomenon of “Prototypicality” not only we can see on the technology websites also observed this kind of preferences in facial attractiveness, colors, or paintings.

And also, Simplicity is not a new concept like Plato said “Beauty of style and harmony and grace and good rhythm depend on simplicity”.

Conclusion

In a general view, we could observe that many technology websites have the same visual consistency, that means simple (low visual complexity) and familiar (high prototypicality) to the competitors. It’s not about to copy styles or follow a trending style is related to be familiar to users, increasing the usability of a website in order provide an easy way to remember or learn for the users.

If you want to create a new design that revolutionized the way of organizing the elements of technology websites you should consider being creative, simple and preserve prototypicality.

Finally, the only fact that it is very important is “Provide the best user experience with the objetive to create loyal users to your product”.

References
  1. Why visual consistency can make or break your web design
  2. The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments.
  3. A Standardized Set of 260 Pictures: Norms for Name Agreement, Image Agreement, Familiarity, and Visual Complexity
  4. Google Developers – Build a Great Web Experience

 

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *