We’ve been hard at work here at CouchCommerce so that you may rest assured that your customers get a great shopping experience on their touch devices. Today I want to share with you some insights about what we have been working on recently.

Using animation to make you feel right home

One thing a web app can do that a tradition website can not is using an animation effect when a user navigates between views. This is usually called a page transition effect. We can use those effects to just bring a little fun and fancyness into our app. If that’s all you want it’s probably the best to just use a fade effect for the transition between pages.

However, you can go one step further and use animations to support the visual thinking for the user when being on his shopping tour. How that, you ask?

One can think of the app as views that sit next to each other. Pretty much like in this simplified picture.

Now to support the visual thinking it would actually make sense to slide from one view to another. But it’s important to always have the new view slide in from the correct direction. For instance, when the user is on the screen that shows the root category (category level one on the picture) and now taps on one of the categories, the view with the subcategory (category level two on the picture) should slide in from the right.

If the user then decides to go one step back to the root category, the view with the root category should slide in from the left.

We can extend this example to screens that are not so much related to each other as well. For instance, when the user is on the shopping cart screen and taps on a product, the app brings the user back to that product. Of course the product view should then slide in from the left!

So what happens when the user navigates from custom page one to custom page five in our example shop? Exactly, custom page five slides in from the right. Notice that this directly relates to the position of the links to those pages in the footer.

So as it turns out animations are not only useful to bring fancyness into an app but also to make it easier to navigate through the app.

Please visit the referenced meilenstein shop and try it out for yourself.

A thumbnail bar for better picture discoverability

What’s also new is how we present multiple product pictures to the user.

Previously, we used an image carousel with little indicators that were hard to spot for the product images. There were two main issues about that:

1. We wanted the user to be able to swipe from one product to another as mentioned in the previous blog post. But with the images being displayed as a carousel as well we would end up with two swipe gestures on one view that fight each other.

2. Multiple images were hardly discoverable

Both issues are now adressed with the new beautiful thumbnail bar.

A splash screen for instant feedback and a higher conversion

We all get mad when we click on something and have to wait. It’s even worse when we click on something and have to wait without any feedback of progress.

We know that. That’s why we added a splash screen to our app that instantly is available while the actual app is still being loaded.

Enjoy shopping!