"Just a catalog" and "just a blog". A story about 1000 and 1 questions
Contents
Simple, but not so simple...In this article I want to show how many little things there are that complicate the proccess and make development more expensive. I’d like to show what you forget about when you use even simple sites. Sometimes even a trivial filter by popularity hides a lot of work.
I don't mean to say: “it's hard, stay out of it”. My desire is to “breake your sunglasses” and teach you how to evaluate your "wishes".
I should say at once, it can be "just a blog" on CMS, and also the store can be deployed on the appropriate engine by 1 hour. But in this situation, you agree with the functionality "out of the box" and do not try to argue with it. It is what it is, period.
I'm not going to lie, CMS are really good for some tasks. They'll close the problem here and now, but in the long term, if you scale, you'll still come back to the same issues. But that's a whole other story...
So, in this article, we’ll break down "just a blog" and "just a directory." Let's go. It's all going to be based on real-life stories.
Just a blog
We make a huge marketplace. Suddenly the client has the idea that the site must have a blog (like somewhere else). We create a design, after that we bill the client for the design of that blog. "Omg! Why does it cost so much when it's so simple?!" - the client starts to get indignant. He no longer remembers how a week ago, he burst out ideas, what else would fit into this blog.
Do you think this is an ordinary page? But what will the developer pay attention to?
By default in most cases a blog is a regular Wysiwyg editor, where what you enter is what you output. But in our example there are some rather complicated (well, conditionally complicated, relative to "just a blog") moments.
For example, an image that goes beyond the content block.
I.e. you have to "wrap" the picture in a separate block and set the parameters so that it "pops out" of the borders.
Or this little caption under the picture - well, it's a trifle! And in fact, in the editor you need to create a field where you can add this caption, and then again, separately cobble it together.
And we also have some non-standard elements in their design, such as a quote.
Or a slider
Or a carousel with goods among other content.
In other words, it is necessary to provide an opportunity to choose goods from existing ones in the editor, and then this must be made up and inserted in the blog. Sometimes it's not even just goods selected manually, but, for example, the whole constructors from the editor in the admin panel.
All this comes down to the fact that we no longer have the usual Wysiwyg in the admin panel, but some kind of article constructor from blocks. And it takes a lot of time to create it. The front-end layout and logic itself isn't as costly, but it's complicated from an administrative standpoint.
There's a good editor for that now, editorjs.io, which makes it easy to assemble content from blocks. But things get a lot more complicated if you can't find a plugin in it.
In our example we can simplify the logic by omitting complex blocks. For example, don't make any cumbersome quotes. Do not make pictures that "pop up" over the content block, and the carousel with the goods just after the article output. Then from the admin side just get Wysiwyg plus a selection of products, which we show at the end.
But there are still moments in the design of the blog that you should watch out:
1
Blog articles. Which ones are we going to display here? The most recent ones? How about the popular ones? What's "popular" then? By views? Then the most viewed ones will settle in here forever and keep gaining views, not giving the newcomers a place. Or maybe we'll show the popular ones from the same category that got the most views in a week? Then we need some kind of analytics to count views specifically by day, which also falls on development.
2
Subscriptions. Those who want it entered an email, sent it. Where does it go from here? Do we store it in the database so that we can export all the emails to excel? And how do we manage subscription lists? Maybe let's integrate with mailchimp and send everything there?
I hope it's clear now how much is behind "just a blog".
Just a directory
I'll highlight the points where the client will have a lot of questions, and when he starts to answer them, he'll realize that his directory is not so simple.
Category Navigation
There are 3 levels of categories on the screenshot. Everything is clear and it's hard to get confused. But if there are 4-5 levels, how should they be designed? Continue to expand them in the "tree"? Usually they show adjacent categories, subcategories and one category above that level so that you can climb up it.
For example, if the user is in a category on level 4, what does the menu on the left show? How do you jump to the second level? And if we're already at the bottom level, what do we show in place of the subcategories?
Filters
Each product category has its own filters (width, weight, color, diagonal). These filters can be displayed:
as a range (e.g., price)
with answer choices (wifi availability: yes / no)
list (brands)
*By the way, if the enumeration has a lot of values, it is a good idea to display only the first few, and hide the rest under the button "show all".
And how to sort the values within the filter? Alphabetically or by the number of products in it? For example, materials are more likely to be sorted alphabetically, and for brands - both alphabetically and by popularity filters can be used. For example, when choosing a new phone.
There's also a case when we send a friend a link to a catalog where we've selected filter options that are hidden under the "view all" button. So, we need to "toss" these options up - in the visible area - so that the user understands what filters are currently set up.
And if there are a lot of values can we add more search to the values there?
There are also filters by color. In that case you might want to illustrate that color visually, not just write the name. And it's not all about "a simple catalog."
And the search can also be faceted. This is when you select one value in other filters and the combination of them will not find anything.
*It is convenient to show selected filters above the catalog.
Total amount in the category
One of the most complex tasks at database level is counting the quantity. When the catalog is not too big, everything is OK. But if the catalog contains tens of thousands of items, then almost all databases are slow in counting the number of entries. And the task of showing the number of products in the category with such a filter becomes not the fastest.
Sorting
How will you organize it? By price - I see. By novelty? And what do you think is new? Creation of a card on the site, entering the warehouse, updated availability?
And again the favorite "by popularity"? What is considered popular? The idea of views won't work here, as it does on the blog.
At one store, we had a whole formula of markup, arrival date, stock availability, newness, and number of sales for the week. In short, with a bunch of ratios. And so every night we calculated the popularity factor so that the customer had a real "by popularity" and the new iPhone was at the top, followed by a budget well selling phone that had been selling for 2 years.
Product card
Pay attention to our example.
On hovering over it, we show the product from a different perspective.
On hovering we show the available sizes and colors.
And you can also scroll through the bad quality first, and then the good, to speed up the process and not eat up the memory.
On hovering over it, we show the product from a different perspective.
On hovering we show the available sizes and colors.
And you can also scroll through the bad quality first, and then the good, to speed up the process and not eat up the memory.
Pagination
If you have an "infinite" scroll, where we scroll without switching pages, and the products are loaded, how do you solve the next case? So, imagine we're already somewhere far away, and we want to share content with a friend. What do we share with him? Do we send a link that loads "virtual" 10 pages and scroll down 10 pages?
Most of the time it works like this: when you scroll in the address the page changes, as if you were already on page 4, the person who receives and opens such a link will be on the classic page 4.
But such a scroll will not be indexed by search engines, and will have to add a button "next page", which the user simply will not have time to see. So with infinite scrolling, the next page is loaded when there is conventionally 200px to go.
Search
Big topic. Everyone wants it to be "google like". But is it simple?
One thing is for sure, you need to decide what fields you want to search. Basically - by title. But, perhaps, customers are still important proizvoditelem, or composition, or color. Next, you can go deeper into the morphology of the search: whether to look for cognates, typos, synonyms, whether to monitor the unconnected layout, and if the search is of two words, then search for both or at least one.
Then go to the search results page. The question arises: if the goods found from several categories (for example, by requesting Samsung - both phone and refrigerator), you need to decide what to show filters. In this case you should probably choose a price, a brand and a category. What if Samsung monitors and TVs are in the results? Then it seems like it would be cool to add a filter by diognale.
In short, you see how many questions, and you keep talking about one thing: "I want, as in google.
SEO
Here we're always in favor of generating beautiful previews when we do something on social networks or messengers, like we do at http://dev.family/about. But you have thousands of products, so you have to make some kind of generator that will automatically create something unique for all your pages.
What now?
Now you have to get used to the idea that I have not yet sorted out all of the items that come up when you create a catalog. There are still favorites, quick buy, previews, and more.
What now? It's not even worth it to take on development? Or settle for a box? Absolutely not! I just want to show you how many interesting and important things there are if you look "around the corner" and start digging. We, as developers, will tell you, tell you and help you stay within your budget and choose the best for you. But please don't devalue our work.
Tags:
