Integration

A 3D photo can be embeddeded directly into a website so it becomes a part of the design. This allows you to create an eye catcher and guarantees that the 3D photo is seen by the visitor. Stepfo especially recommends direct integration into product pages, which is the last page that is seen just before it is possible to put the product in the online shopping cart. In some cases you do not want the extra load-time on a page that the 3D photo causes, and that is why we can make the 3D photo be displayed in a popup or a "box". Html code for copy-paste configuration is included as standard.

If you're the one who writes html to your page, you can paste the following code to embed the same the 3D photo as seen on the right. (remember to select all the code in the box)

In some cases it can be an advantage to load the the 3D photos via a popup. This means that web browser opens the the 3D photo in a new window. This is a good option if there are many products on one page, but you still want direct access to the 3D photo. Popup 3D photos can be accessed through text links or image links. Html code for copy-paste configuration is included.

Another option to display 3D photos and put all attention on them is to use a "box". It is possible to darken out the background in order to increase the attention towards the 3D photo. It takes a little longer to setup 3D photos into a box, but in many cases this time will be well spent, as it gives the user the impression of a exclusive product.

Loading 3D photos

When loading a 3D photo it is possible to choose whether a speciel loading image will be displayed or a standard loading bar. It takes about a second on modern internet connections to load a 3D photo, but it might be a good idea to include a loading image if the 3D photo is for customers in less developed countries, or if an unusually large resolution has been chosen.

It is an opportunity to get a play button that must be activated before a 3D photo is loaded. That is how it works on YouTube, where the user must press a video before it starts. Youtube has done it this way to avoid unnecessary waiting time on the page and 3D photos can also be utilized that way. It is particularly useful on pages, where many products are displayed simultaneously.

To draw make it clear to the user that the 3D photo is not just an ordinary photograpy, it is possible to rotate the 3D photo once when it is loaded. It can also rotate at a constant rate until the user interacts with the photo.

The number of photos in a 3D photo rotation can be varied. The more images, the smoother the rotation, but also the longer loading time. Stepfo's studies show that people browsing the web are willing to wait 3-5 seconds for a 3D photo to load before they terminate the loading. The loading time on an ordinary broadband connection is about 1-1,5 seconds for a 3D photo with 50 pictures in the 3D rotation. This is why Stepfo recommends 36 pictures of products that uses much of the screen space, and 50 photos of products that require a smaller part of the screen. We can of course deliver rotations with more or less photos as needed, but unless specificly told a number of required pictures in a rotation, we will deliver what we find reasonable for the specific case.

Control panel

There is a number of customization options in the navigation panel for 3D photos. The options are explained below:

Play/Pause button

In some cases it may be desirable to have a play/pause button on 3D photos, which can make the object in 3D photo rotate constantly at a certain speed. This could for example be suitable for display at trade show booths, touchscreens or homepage settings where you want the 3D photo to be an eye-catcher.

Zoombar

The zoombar allows to adjust how close the user wants to see the product. The zoombar works the same way as on map services, such as google maps, the yellowpages and krak.dk

Rotation/Panning

When zooming, 3D photos shift as a standard to mouse-controlled panning of the photo, in order to make the user able to choose which parts of the photo to be zoomed in on. However, there have been requests for being able to rotate products with the mouse while the zoom mode is engaged, and we have therefore developed this feature even though Stepfo normally recommend to use rotation arrows for this purpose.

Rotation arrows

Make it possible to turn the product and view it from all possible angles. The speed of the rotation when the arrows are pressed can be adjusted as desired.

Fullscreen

The fullscreen function makes it possible to remove all disturbing information from the screen when the product is viewed. The product jumps out of the screen, and straight into the face of the user viewing it.

Navigation in general

The speed which a 3D photo is turned when you pull the photo with the cursor can be adjusted. There is a slight difference in how fast different age groups prefer to rotate the products.

The zoom function can be customized as needed. It usually doesn't make much sense to zoom closer on a 3D photo than to the face of a person, where as in other situations it is critical that the zoom is completely sharp on a photo of the newest laptop, smartphone or bag. The amount of depth levels in the zoom function can also be customized.

The navigation panel can be designed to fit perfectly into the website the 3D photo is to be displayed on. It is also possible to have special functionality developed. Below are a few examples of customized navigation panels:

Hotspots

Stepfo's hotspot feature allows you to display details with a close-up photo. This gives the user a good experience because he or she can easily see where on the product the detail is. There are some different customization options, which ensures that your companys hotspots become precisely what they should be. You can click on the red animated icons on the 3D photo below.

The icon for opening close-ups can be styled as desired, or one of Stepfo's standard icons can be chosen. Icons are always designed as vector graphics in order to secure maximum scalability and sharpness. That is why regular imagefiles can't be used for this purpose. The icons can be animated if desired. Animated hopspot icons makes sure that the user doesn't think they are part of the product.

It is possible to insert text in hotspots that describe the shown detail.

The size of hotspots can be adjusted as needed.

The background of hotspots which cover the rest of the 3D photo while a hotspot is active can be adjusted. It can for example be a semitransparent black color that gives the user a more exclusive feel of the product, as it takes the focus from the background away.

The possibilities don't end with a photo in a hotspot. It is also possible to insert video or flash-animation that explains the shown detail. Another possibility is to insert a link, for example a buy button, affiliate link or a link to a page with more information about the detail.