Please leave this field empty.

Thanks! We'll send you Awesome Tips.
X

Learn

from our mind to yours

Using Parallax Effect to Improve User Experience

September 14, 2015Payman Taei

parralax_effect

The web is evolving faster than ever before, and with hundreds of new websites going live each hour something has to set a web presence apart from another.  This is particularly true for small businesses and organizatoins who do not have a strong brand strength in comparison to say Coke or Apple. We all know content is king, at least in the eyes of google and importantly your audience.  If your web presence does not portray the right message and have the right content geared towards your target audience, then it will affect engagement. But let’s assume you have the content portion down and you have a fairly clean site layout in place; what else can you do to make a tiny but noticeable difference with how the user engages with your site and stays around a bit longer? (enough so you could sub-subconsciously capture them as a lead, as a returning user or whatever purpose your site is serving). When it comes to today’s web, long gone are the super-animated websites and flash animations;  Today it’s about flat design, and subtle movements and gestures your site sends across the screen.   One such effect is the Parrallax effect. Parallax effect. what is it exactly? Even though most iOS7 users may not know the parallax effect by name, they experience it on a regular basis when interacting with their device.  It is the result of displacement between the viewer and the viewed object. The term is derived from the Greek word parallaxis, meaning alteration. Parallax was developed by ancient astronomers as a method for measuring distances between celestial objects. Even today it is used in astronomy; parallax is a geometric triangulation method used to measure distances based on the angle or semi-angle of the inclination between two lines. The solar parallax was used for calculating the distance between the Earth and the Sun. Various parallaxes exist such as the Venus Parallax and the Mercury Parallax. The term “parallax” is also used in various other fields, including psychology, in which parallax is used to define the change in the subjective reality. It is also used in photography to refer to the difference in framing. In web design’s UI (User Interface) parallax is a method of using a combination of images with different scrolling speeds and layering of those images.  Basically, when you move your cursor or interact with your mobile device, you will see a perspective effect, which when coupled with speed will mimick a 3D visual effect. This is not new. Parallax effect itself has been around for a while, mainly in the video game industry, but lately it is becoming more widely used. Perspective and parallax Parallax effect is possible because of the basic principle of human perceptions of sizes. When we look at an object, our eyes are forcing light through a single point. Indeed, our brains have learned to analyze and measure the object’s sizes by their extremities based on the apparent angle between these two points. That is why when the farther away the object, the smaller it appears, and vice versa. Parallax is the result of our perception of different speeds of objects in motion relative to ourselves. For example, when you are in a fast-travelling car, you perceive that objects outside of your care are moving at different speeds – objects closer to you will seem to move faster than farther objects. But in reality, these various objects outside of your car move at just the same speed. Parallax effect in iOS7: Parallax effect is a new feature introduced in iOS 7, which was created to disrupt the way people physically interact with their mobile electronics. When users navigate their iPhone, iPad or iPod, the background and icons move on the screen as well. This gives almost a 3D effect and adds depth, but some people prefer to use their devices without this effect. There are certainly opposing opinions concerning this new feature on mobile devices. The primary complaint is that  the near-3D effect can result in a “dizzying” optical illusion. iOS7_parralax_effect   1. http://www.macworld.com/article/2042808/inside-the-technology-behind-ios-7s-parallax-effect.html However, this method is often used in the presentation of products, events, vitrines, websites, story telling and so forth. Used wisely, the result can be awesome! (See at the bottom 5 websites with nice parallax effects). How it can improve user experience. Parallax effect allows you to highlight specific elements and improves Internet browsing. It directly gives a nice artistic effect and users are immersed in the world of branding, association or any other entity. It stimulates the depth perception of the viewer which is “the ability to perceive the world in 3D and the distance of an object”. You can easily animate your picture, background and other graphics elements and create effective and attractive parallax illustration. The dynamic aspect keeps your audience engaged and also provides a narrative dimension to your content. However, when overused, this effect can quickly complicate the navigation and in turn lose the viewer. How does one create this kind of effect? Due to new technologies like HTML5 and CSS3, it becomes possible to create fairly advanced effects with parallax which can allow for improved interaction with the user.  However this often comes at a cost. Creating a parallax effect is more development and coding versus design.  In other words to create such effects it requires a deep understanding of Javascript, and HTML5 and thus mostly professional designers and developers are able to create it. However new tools such as EWC presenter allow users to realise this type of interactivity by using the timeline and animation effects allowing virtually anyone without coding experience to create it. To Learn how to add animations and interactivity to your website or blogs in seconds click here.

Payman Taei
Payman Taei is the Founder of HindSite Interactive (he doesn't like using the word "CEO" it's way too Formal), an award winning web design and web development company. He's also the Founder of Easy WebContent, Do It Yourself platform allowing everyone to easily create, manage professional websites, presentations & infographics.

Leave a Reply

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

Since 2001 we have helped 500+ companies
build a better online presence.

We can do the same for you. Get a free consult.