Summary
I. Sites that are becoming standardized and Internet users are getting bored
II. Building a memorable experience through emotional design
III. Re-enchanting the user with 3D
IV. The different applications of 3D
V. Solutions for 3D on the Web
VI. Resources
I. Sites that are becoming standardized and Internet users are getting bored
With the massive arrival of no-code solutions (wix, bubble, landen, shopify etc..), website editors (wordpress, webflow etc..), open source libraries (undraw, icons8 etc..), and the popularization of frameworks such as bootstrap or Foundation, it is now increasingly quick and easy to set up a website using the templates available to us. However, even if the access to web creation is becoming simpler and simpler, it must be recognized that in recent years, too many recourse to standardized templates have made websites more and more similar to each other.
Today, the priority of brands, associations and other companies is to have a functional, ergonomic, responsive and well referenced website in terms of SEO. Unfortunately, many of them do not care about the originality of the user experience they offer to their users. The lack of maturity of companies in the field of web experience design is at the origin of the disenchantment of users, confronted with sites whose interfaces are increasingly common.
In addition, we must take into account that the way of consuming content on the web evolve from year to year. We are more and more hyper-connected and therefore hyper-solicited. The popularization of GAFA, the multiplication of devices or the arrival of new emerging players (tiktok for example) on the web are all factors capable of changing the mode of consumption of users.
Web designers are now facing a new problem. It’s no longer about building websites quickly and cheaply, but about arousing the curiosity of an internet user whose attention span is decreasing year after year. A study conducted in 2017 by Microsoft with Canadian youth revealed that the proliferation of screens, social networks such as Snapchat, and the number of hours spent flipping through the news has decreased our attention span.
According to Microsoft labs, our attention span on the web has become less than that of a goldfish
We would not be able to concentrate for more than 8 seconds. Goldfish can hold their attention for 9 seconds! In order to capture the attention of Internet users, it is important to understand their needs and expectations.
II. Building a memorable experience through emotional design
In his book Aaron Walter draws a parallel between Maslow’s pyramid refocusing the primary and physiological needs of human beings and the needs of Internet users. It appears that even if the majority of sites offer a functional, reliable and usable service, a fourth dimension is often missing, that of a product that is pleasant and enjoyable to use. Internet users need to feel pleasure, surprise and have fun by discovering new browsing experiences capable of arousing positive emotions. The integration of 3D in a world where the majority of interfaces are in 2D is one of the solutions capable of re-enchanting the Internet user thanks to a new navigation experience.
III. Re-enchanting the Internet user with 3D
The integration of 3D within websites today allows to push back the boundaries of interaction with the user. While the user is used to simply scrolling and scrolling, we will offer him the opportunity to move and interact like in a video game. He can browse a site by exploring a navigation built in depth for example, manipulate and customize products in 3D before buying them. This new dimension pushes visitors to invest more in the
navigation. It is then easier for a brand to capture the attention of consumers while facilitating information retention. All this is made possible directly within our browsers without any specific plugin download thanks to the Webgl technology.
WebGL : What is it ?
Handling a product virtually, interacting with 3D animations, playing a game on your browser, WebGL makes it possible to use 3D on a website. WebGL is not a language in its own right, it’s a gateway that uses Javascript to link OpenGL, the programming interface that displays 3D via HTML5 canvas, and the graphics card of a computer that facilitates calculations. Don’t worry, you don’t need to be a computer geek to use this technology, fortunately for us there are various solutions available today to use this technology as a designer (we’ll talk about them in more detail in chapter V of the booklet).
IV. The different applications of 3D
After several researches, it appears that 3D is particularly used in the following 6 domains: storytelling, Big Data visualization, interactive portfolio, video games on browsers, object configurator for e-commerce, and interior design.
1/ Storytelling
3D allows all types of brands to communicate a strong and impactful message to the eyes of Internet users through a storytelling worked. Webgl technology is often used when a brand wants to share the story of a past or future project with its users through a new browsing experience.
2/ Big data visualization
The era of Big Data is shifting into high gear. Visualization plays an increasingly important role in helping us make sense of the billions of lines of data generated every day. 3D, if used properly, can provide an effective and impactful visualization by projecting data into a 3-dimensional universe.
3/ Video games on browsers
One of the key drivers of motivation is the notion of pleasure, a notion that is undeniably found in games in general and video games in particular. Video games are an interactive, participative medium to which we can associate a certain number of pedagogical approaches such as “learning by doing” and the resolution of problem situations, learning by trial and error, the capacity for motivation, social openness and the concretization of the abstract. Video games are becoming one of the favorite leisure activities of children, teenagers and even young adults. According to a study conducted by the GfK research institute in 2010, 28 million French people say they play video games regularly, which represents more than 40% of the French population. According to this same study, the average age of gamers is constantly increasing and is currently 33 years old. Also, the video game is practiced by all populations, without social distinction. Whether it is to serve an educational message, communicate on the values of a brand, or simply to entertain the Internet user, video games allow to encourage the investment of the user and to capture his attention.
4/ Interactive portfolio
The portfolio is the reflection of the designer’s work. In order to stand out from the competition, it can be interesting to use 3D in order to offer an innovative experience to Internet users and to stand out from the competition with a bold artistic direction. 3D design can be simple as long as it tells a story that makes sense in the portfolio’s scripting. Sound designer Chiara Luzzana has understood this with her site and its 3D ball that reacts to variations in music.
5/ Personalization of objects for e-commerce
In the race to optimize an e-commerce site, product visuals have a predominant place: after HD zoom and 360° visuals, 3D modeling opens a new way for e-commerce sites with hundreds, even thousands of products, to push visitors to buy. Improving the conversion rate of e-commerce sites thanks to 3D Visual product staging has always been a major topic because of its direct impact on many performance indicators of an online sales activity such as the conversion rate, the product return rate or the customer solicitation rate (good product visuals help avoid questions addressed to the e-commerce site by e-mail, phone or chat). Numerous feedbacks on the subject, have largely demonstrated the benefits of optimizing the visuals of its product catalog.
In 2010, Darty.com implemented high-definition zoom on its site, and within a few months measured +25% conversion on the 15 product families using HD zoom. In the same year, SprinklerWarehouse.com reduced its return rate from 1.9% to 0.6% on products that offered a 360° view. And sales jumped 34% in the process, all thanks to a $3,000 investment in hardware… DueMaternity.com (3) announced in 2011 that the conversion rate on products that offer a 360° panoramic view is 27% higher than on product sheets offering a 2-dimensional view.
With the integration of 3D modeling, it is now possible to go even further by proposing to visualize the product from all its angles while allowing to set up hyper-customization to the user through 3D configurators. During my research, I noticed that 2 sectors in e-commerce are particularly fond of 3D configurators: the luxury sector and the b2b business-oriented products sector.
6/ Interior design
A true marketing tool, the 3D interior rendering allows the prospect to visualize the real estate concept with precision and to project himself. He can thus evaluate the materials that will be used, appreciate the natural light or imagine the furnished spaces. The 3D interior visual thus allows to arouse emotion in the viewer, a key element to trigger sales. But 3D editors of interior scenes do not only benefit individuals, professionals (real estate developers, architects and interior designers, decorators, bathroom installers, manufacturers of materials for real estate etc…) can also take advantage of it to highlight their services.
V. Solutions to make 3D on the Web
I have selected for you the 5 most known and accessible solutions for designers interested in front-end development. You will find in this table a description of the possibilities offered by each of these technologies along with their strong and weak points.
VI. Resources
Sites using 3D for storytelling :
●fremtidensuddannelser.dk : showcase site featuring the new education concept of the university of denmark.
● s-pri-noir-etat-desprit : interactive interview allowing to discuss with the 3D avatar of the rapper S.Piri Noir about the launch of his new album.
● https://maxmara-bearinggifts.betteringbrands.com/ stages the universe of the brand maxmara
● https://live.vanmoof.com/site e-commerce site presenting the history and characteristics of vanmoof bikes
● https://zen.ly/fr showcase site presenting the services of the zenly app
● https://marmont.gucci.com/ Inspired by Flemish Renaissance paintings, photographer Julia Hetta captures the GG Marmont line
● https://shutdown.gallery/ vitsite of a contemporary museum Web experience, fully interactive, 360 degrees, supporting mobile gyro sensor
● http://www.dreamworkstv.com/she-ra/hordak virtual visit of the she-ra cartoon
● https://aquarium.ru/en immersive 3D visit of a rock band’s universe
● https://www.ciaobellanairobi.com/fr# memorial site to say goodbye to the character of Nairobi in la casa del papel
● https://www.sbs.com.au/storyline/ interactive site featuring the testimonies of Australians during the confinement
Site using data visualization :
● artsexperiments.withgoogle.com : An interactive data visualization that invites the user to dive into the ocean and explore the impact of CO2 and rising temperatures on marine life.
Jeux vidéos sur navigateurs :
● https://gb.loccitane-seeds-of-dreams.com/en/ interactive learning games on biodiversity
● http://letsplay.ouigo.com/ : advertising for the brand ouigo
● https://play.gl/ a fun game to discover the eco-responsible values of Galerie Lafayette
● https://heraclosgame.com/ adventure video game
● https://guccimascarahunt.gucci.com/ mini game featuring gucci brand products
Portfolio intéractifs :
● https://smala.co/ digital agency
● https://www.awwwards.com/sites/bruno-ortolland CG Artist
● https://temrysh.com/ front-end developer
● https://www.tplh.net/ front-end developer
High-end e-commerce configurator for individuals :
●Mydeejo.fr : knife configurator
● lolo-chatenay.com : handbag configurator
● guerlain.com : lipstick configurator
● edenly.com : ring configurator
High-end e-commerce configurator for the B2B sector :
● trilogiq3d.com : storage equipment configurator
● rajapack.it : carton configurator
Aménagement d’intérieur :
● home-design.schmidt.fr : kitchen configurator
● kozikaza : virtual home configurator
● dmag.fr : garden configurator
Les ressources qui m’ont aidés à construire cet article :
●https://eduscol.education.fr/numerique/tout-le-numerique/veille-education-numerique/fevrier_2020/jeux-video-et-education
●https://les-jeux-video-55.webself.net/file/si90555/download/Article3-fi1363184.pdf
●https://www.educavox.fr/accueil/debats/enseigner-avec-les-jeux-video-vers-une-pedagogie-videoludique
●https://www.pedagojeux.fr/comprendre-le-jeu-video/le-jeu-video-et-lecole/
●https://www.awwwards.com/
●https://www.d-booker.fr/content/46-de-la-3d-dans-pages-web ●https://fredcavazza.net/2019/04/03/de-la-3d-dans-les-navigateurs-pour-reenchanter-les-internautes/
●https://www.sweetpunk.com/news/webgl-la-3d-se-democratise-sur-internet/
●https://www.wanadev.fr/134-webgl-usages-et-applications-de-la-3d-sur-le-web-1/
●https://www.journaldunet.com/ebusiness/commerce/1145279-visuels-produits-e-commerce-la-revolution-de-la-3d-arrive/ ●https://www.ledauphine.com/france-monde/2017/10/08/notre-capacite-d-attention-plus-faible-que-celle-du-poisson-rouge ●https://www.tableau.com/fr-fr/learn/articles/data-visualization ●https://www.le-studio3d.com/
● The book emotional design by aaron walter
Thanks for your attention 😁 Feel free to give me feedback on this article.
I am a french Product Designer and I am interested in front-end development in my spare time, to learn more about my work go here https://floriangouloubi.com/
If you want to support my work and offer me a coffee go to https://www.buymeacoffee.com/flopinou ☕
