So we have this bookstore which sells language related literature. Many times you will have a book, or collection of books, which is available in a range of different languages. A good example of this would be The Adventures of Tintin where several translations exists of the same titles.

This creates a complicated matrix of items which share properties but variations exists. We want to encourage the user to add more items from the same collection to cart by making that process easier.

For instance The Adventures of Tintin have over 20 individual titles, and when translated into say 6 different languages you have 120 items. To add these to cart one-by-one would be a tedious and time consuming process.

The solution we came up with was to allow the user to select a range of items across a certain dimension of the language matrix into a list before adding them to cart:

The user lands on the collection page

enter image description here

Then selects a title to get the available languages of that title

enter image description here

Then selects one or all of this items onto a list which could be added to cart

enter image description here

Now while we believe that this process makes the navigation easier, it also feels very unintuitive to add products to a list which is later added once again into the cart.

The reason why we are considering this additional step is because add to cart kind of prompts a decision from the user that they may not be ready to make. We want to make it into more of a experimental experience where the user can try different options before committing to the purchase, although we are not entirely sold on that idea yet.

Amazon provides two options: add to cart, and the slightly softer add to list. In principal this is also what we are after.

How can we make this unconventional shopping experience feel more intuitive? We don't want to confuse the user out of a potential purchase.

The site itself is available in several different languages, so we cannot be to language specific, as every language has different nuances to it.

  • Do you need or want to show the cover of the same book for every language individually? – jazZRo May 24 '17 at 7:33
  • It's definitely not required, but I think it is a nice feature to have book covers in a lot of different languages. It conveys a message of what the website is about, but if it gets in the way of usability it will have to go. – unitario May 24 '17 at 12:31
  • Why would a user need to purchase multiple copies of a title in various languages? Is this a common scenario for you? – Hynes May 24 '17 at 15:50
  • It do indeed happen. Usually schools and libraries that does that. – unitario May 24 '17 at 16:00
  • But it is more common to order different titles of the same language. – unitario May 24 '17 at 16:01
up vote 2 down vote accepted
+100

You can simplify the process like this:

  • Let them pick the language for all books from the top panel.

  • Have a language dropdown under all individual books to change on the fly

  • Have a quick and easy, one click Add to Cart button

  • The floating (you can put it on the top right or anywhere you feel comfortable) cart notifier keeps track of the added books

cart redesign

Hope this is what you were looking for

  • Yes, I think this is more intuitive that you select (or unselect) to cart. What I am thinking is that if you select several language variations from one item, then this will not be visually any different than if you select just one. Also, if "English" is selected in the language menu then "Danish" ought to be disabled in my mind. Anyways, I like this suggestion. – unitario May 24 '17 at 12:46
  • I understand why you want to show that. You could use an extended Add to cart button (after clicking it, a dropdown gives you the option to 'Add a different language' or a multi-select dropdown in place of th language selector for individual books. The "Danish" option was an example to show that you can pick the universal language from the top but if you wish to add a particular book with a different language then you can do that using the selector under each book – Shreyas Tripathy May 24 '17 at 12:54
  • Yes, there could also be multiple check marks ✓✓ on the add to cart button to illustrate multiple language variations has been selected. My concern would be if multiple languages has been select in the top menu, then if all items should be added to the cart or not - that could be confusing. - but this is usually not the case. – unitario May 24 '17 at 13:14
  • There's a solution to that as well. Just show "Not available in the selected language" on the thumbnail (like Amazon shows Out of Stock and disable the "Add to Cart" button. Have the user click the individual language dropdown to change to an available language. – Shreyas Tripathy May 24 '17 at 13:18

I would do this way:

User would see an icon next to the title when that book has several languages available

enter image description here

When seeing the product page, the user would see a button to Select Language when a language selection is necessary before putting an item on the cart

enter image description here

User would select which languages he wants (or all of them)

enter image description here

User selected 2 languages. Buy button is active

enter image description here

The reason for this layout is that it helps eliminate the cluttering that your proposal could generate when having the image of the same book on various languages and also reinforce the language selection before buying the book, prevent errors or bad selections from the user.

Without a little bit more context and information, I think a number of assumptions will need to be regarding the potential solution, especially around the type of users and their expected behaviour with this type of interaction.

I think one of the keys to making the experience more intuitive is to have a standard reference point, because when you introduce more than one context to a behaviour or action, there is a multiplicative effect on the resulting complexity of the interface interactions.

Context A - Language reference point

So firstly you have the context of the language, and it needs to be indicated very clearly that you have a standard reference point of the language. On your site design there are a number of buttons that I assume you use to switch to different languages (or maybe this is a tag/filter?). This needs to be consistent to display (and select) English, along with the other languages because when a user changes to a different language then they still have a clear reference point. Once you have established this reference point, I think you can simply allow the user to select the title and in addition to this provide the additional languages (so by default English might be selected) to be purchased without showing them all the images. If you prefer a thumbnail that expands on hover-over or on-click can be provided.

Context B - Product selection/purchase reference point

Secondly you have the context of the selection and purchase intent, and I think one of the assumptions is that there might be different prices for editions in different languages, and therefore a shopper might want to consider which editions to buy. Another assumption might be that a person is required to make purchases of books in many different languages and want to know the availability for different languages. If you want to accommodate this behaviour before purchasing, then create a different type of interaction that supports the best way for the user to process and interact with these information.

Consideration - maximizing purchase potential

If you want to make sure that you are not missing out on a potential purchase opportunity (also being mindful that you don't want them to jump to a purchase if the selection is incorrect), it is simple enough to provide reference points between selection and purchasing modes, so that when they are selecting titles it is possible to have call-to-actions like add to cart or checkout. Similarly, if they progress to the cart then they can also go back to make selection or confirm the purchase. In the end it is just about providing a clear reference point so they don't have to guess or click to try and find out what happens.

I have made some assumptions here so I don't want to jump to the immediate solution, but hopefully this helps you to break the problem down to smaller chunks that you can solve separately.

I have worked with a similar use-case several years ago, which was based around using picture books in teaching languages and/or linguistics to children. Having multiple translations of the same book can be very useful in teaching situations - particularly books where the text is in short, easily distinguishable sections (speech bubbles) and can be easily compared from one language to the next as the same sections text will always be in similar locations on the page.

Given the phrasing of your question, I'm going to make the assumption that you're aiming at a similar market for my response. If you're not, the response should still hold up, but you might be better served by answers from other users.

If you are in a similar field, then there are two considerations to take into account: the language familiar to the user (which I will refer to as language from here on) and the languages of book which they are interested in acquiring (which I will refer to as translations from here on).

By allowing the user to specify their language, you can present your basic list of books using the titles the user will be familiar with. If a translation doesn't exist to match that language then you can fall back to the original publication title, or the most common title if there is such a thing.

By allowing the user to specify the translations they are looking for, you can present a list of books with titles in the user's language, with a prominent count indicating how many of the requested translations are available. That count can then be a primary sorting criteria, so books with the desired translations are always listed first, followed by books with only one translation missing, then books with two translations missing.

Where not all of the requested translations are available, you can supplement that listing with a tag to indicate which of the requested translations are NOT available.

This would support a flow as follows:

  1. User specifies their language (if it is not the default language of the site), which translations they desire and any other search terms they may have.
  2. User is presented with a set of covers & titles in their familiar language (falling back to the site's default language OR the original publication language if necessary). Each item in that set has an indicator of how many of the desired translations are available, and tags (with either strikethrough text or a big "X") to indicate which of the desired translations are not available for that book.
  3. The user picks the books they want and adds them to their basket, and all of the requested translations go into the basket too.

This means that the user only has to specify desired translations once, and can then search for books which have all of those available, and will automatically add the full set of translations to their basket as a single action.

As I say - this is not a solution which suits a generic multi-lingual shop situation, but if the context you are facing is similar to the one I have described then it may help.

  • Yes, this is the exact use case. More often then not, the client language would not be the user is after though. The language menu in my example has buttons which filters out the users languages of interest and disable items where no translations exists. What we want is for the user to select multiple items across two different dimensions: language variations of one singe item, or multiple items of a collection in a single language. In some cases we would have 15 language variations and we don't want the user to add all of these thinking they will get only the topmost item. – unitario May 24 '17 at 13:03
  • I agree that the client language won't be what they want, but they're still the person who is looking. Where book titles are wildly different across languages, they're more likely to be able to find the book they are thinking of if it's listed by the title they know. By putting it first, I probably over-emphasized that part. The main part of what I'm thinking of is the user saying "these are the languages I'm looking for books in", and then getting a list of books available in those languages, followed by books available in most of those languages, then some of those languages. – Adrian Long May 24 '17 at 13:42

I would say you are introducing a peripheral use case, unless your research suggests otherwise.

If a user is likely to order in one language only then the language selector just gets in the way of the shopping experience and could - as someone above said - be relegated to somewhere unobtrusive in the header section. This way the user who is most likely to order in the localised language has one less interaction to worry about.

If it's more likely the user will choose more than one language then 'language' becomes an extra attribute of the book and should be accessible along side the book detail eg 'choose languages' from a selection of checkboxes (I think someone else said this too).

Still sounds like a weird peripheral use case. Who are your users?

  • For our users the localized language is actually much less likely to be the language of choice. The reason they come to the website is because you can find literature or study materials in and for a range of different languages. It's more common for a user to select a range of titles in the same language then a specific title in a range of languages (although that will sometimes be the case), so I think you are right here. We have 12 years of orders to support our assumptions, we will find that users often want items from the same collection, we want to encourage them to buy more, if not all. – unitario May 24 '17 at 12:42

I am not very sure of the use case where a user would intend to buy the same title in different languages. If you have recognised this as a use case, I still believe adding a language filter as the primary action would help reduce the options. Allow the users to select multiple languages. Within the filtered languages, allow the user to select based on language where he can select all for a language or single items. Note that all titles may not be available in all languages. Give him a summary of the selected titles and languages. Then checkboxes allow him to buy selected items. By default, all titles in preview are selected for check out.

enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.