Cyan and its endless problems with the site

Cian's advertising is everywhere now – on posters, on the Internet, in social networks, on TV, and even in mobile games ads. And if everything is more or less good with the mobile application, then the desktop version leaves an unpleasant aftertaste. Today we are analyzing the Cian website together with the developers and will try to solve the bugs that we encountered on the site together.

Hello everyone, editor in touch UXART. This Patrol episode is different from the usual ones, because we wrote it together with the developers from League A. We conducted an internal experiment and called our designers to look at the problems with their expert eyes.

I found bugs on the site in advance and described them in the doc on 16 pages and passed it on to the designers and developers.

We have identified 5 of the most annoying errors and decided to analyze them in more detail. It won't be boring today, so read the article to the end – closer to the end we will also analyze the user scenario.

Disclaimer:

UX Patrol – a description of personal user experience. Without official metrics and research, only those that the League developers got with the help of Lighthouse — an automatic tool that allows you to analyze web pages.

The problems start on the main page with the indented cards

It would seem that the key thing on a site for buying and renting real estate is the main page. Here the user should immediately find an interesting option for an apartment. And in general, the main page should motivate to continue using the site. From the point of view of UI design, Cian is good in its own way.

The accent blue highlights the key sections of the site, while the illustrations add variety to the pages.

But here we find the first flaw that really catches the eye. And here's what it is – the apartment image cards are unevenly placed in the carousel. Because of this, we can see how the text placement jumps and our inner perfectionist suffers:

P.s. I asked the designers two questions about each problem:

• Why did Cian do it this way, according to our assumption?

• How can this be improved from a design perspective?

I will not bring out these questions further, so as not to repeat myself throughout the article.

Perhaps designers don't see the jumps in photo containers as a visual problem.

You need to make a text area of ​​a fixed height, and fill the photo inside (Fill container). Thus, if there is no metro in the card, the line of photos will be preserved, and an empty area will appear at the bottom in the white container (example below).

KateUXART designer

They did it this way because some cards have a metro mark and some don't. But jumping content is wrong. It shouldn't be like that.

How could it be done?

1. Rebuild the card itself. For example, put the metro separately

2. Align the size of these white cards to the maximum height in the row. Yes, so the card with the minimum size will have white space at the bottom, but in any case, when the information is at the same level, it is easier for the user to read

Maria, UXART designer:

1. It’s not really clear, maybe they are afraid of a situation like on card 3, although there is nothing wrong with that.

2. From the solution options, you can pull up bus stops (2nd card) if there is no metro nearby, you can pull up interesting places (parks/coffee shops/squares) if the user is looking for a daily apartment rental.

I saw in some application that they show the crime rate of the area)

Ivan, UXART designer:

1. I think the designers simply didn't bother with the components, clear rules, sizes of images in the card, indents, card states, layout settings. They didn't consider that the user can upload the most different photos and they definitely won't always be pixel for pixel, so the card needs to be adapted taking into account that the photos can be of very different resolutions.

2. The component must have a clear structure – the size of the photo (in this case, it will be the same on all cards so that the tile looks neat). The indents between the photo and the title font are the same. The text itself and the statuses are in one layout.

At the same time, if we, for example, do not have status

Metro in the card, the photo does not take the hit of filling all the empty space in the card. Since it has its own area, and if the photo provided by the user does not fit the size of this area, you can adjust the photo so that it fills all the necessary space of ITS area, but does not climb into the content part of the card.

The text itself will be pulled up and all the indents will be preserved, only the status with the metro will go away, instead of the status there will be no empty spaces, because other content has been pulled up to this place, depending on the content our card does not jump, and the indents are observed:

Elizaveta, UXART designer:

Shifting the page in your personal account

The problem here is not so much in design as in development. Moreover, it can be found not in all browsers and systems. To the editor unlucky, because of which he could watch the dance of little ducklings performed by Cian's personal office.

When you open the Wallet, the entire page shifts slightly to the left.

In my opinion, such problems should be eliminated and not ignored.

At first I didn't understand what was happening at all and thought that my browser page was just broken, but no, the bug continues even now.

From the developers: this is a native story

On this page we see that the navigation list does not fit on the page. Therefore, when we click on a card, a scrollbar appears on the side. It clearly takes up some pixels – this is a native story.

The browser always has a scrollbar and you can try to remove it using different libraries. But this is not always a good solution, because this is the standard behavior of the browser. That is, if we change something, the “bug” can pop up in another place. Let's say, in Safari such a scrollbar will not take up screen space, so it looks fine.

If you want to avoid such a situation, you can draw a custom scroll from the design side and then think about its size from the development side.

Uneven photo resolution

The problem is similar to the one we described at the very beginning. Only this time it appears not on the main page, but after the “search” stage. For some reason, different ads have different photo resolutions. Because of this, some ads are shifted to the left and spoil the overall structure of the site:

The same problem: the guys haven't learned how to make the container with information fixed to the width of the entire card area, and the container with the photo fixed. The photo is scaled in the given area.

Kate

Make a container of the same width for all photos so that the photos fit into it:

Maria

The same story as with cards, again indents, content jumping, content and photo settings.

Again, we make a component that can adapt to non-ideal photo resolution or the absence of some items in the ad, or to the size of the description in the ad:

Elizabeth

A word from the developers: it is worth giving the user the ability to upload any photos

Let's assume that in our case the user has no restrictions on the size of the photo. Therefore, people upload the pictures that they managed to take in the apartment. We don't find fault with this, everyone takes photos differently)

If we limit the user, we will waste his time – while he takes a new photo, looks at it and edits it. A lot of time will pass and perhaps the person will forget about this step.

Uneven layout is not related to the frontend, so it can only be thought out at the design stage)

Cian plays “guess the meaning of the dots” with users

Well, and my favorite thing, what I complain about most when trying to find an apartment on Cian – dots and their strange behavior depending on the map area. Let's look at the screenshot below together and try to answer the question – why are some dots painted blue and some are not?

At first it may seem that the issue is that the unpainted dots have already been viewed from the account. For the sake of purity of the experiment, I went to CIAN from a new browser + asked the designers to check how the page looks on their site. The result is the same, some dots are painted, and some are not.

Through experimentation, I realized that the dots are a representation of filtration. Now we have a city and region selected (screenshot 1)

If you remove St. Petersburg or the Leningrad region, all the apartment dots will turn blue (screenshot 2)

How to solve?

1. Bad UI: In the filter itself, you can display icons. For example, put them in a black filter.

2. Even better: Color the filter itself in the corresponding color of the circle on the map.

3. Overall good: You can also make the dots themselves blue, but disabled. It would be clear that the part we filtered is bright on the map, and the rest is left out of the search (screenshot 3)

4. Really bad: You can make the circles themselves black, so that on the map they match the color of the current filter. But this is not in the signature colors of Cyan, it won't be very popular + it looks like a rebellious goth teenager. Doubtful.

But according to the canons, you should not show apartments that are not filtered at all. I think this is related to metrics: they show potentially useful “goods”. Why hide part of the “catalog” if you can show it. The user will click and go.

Kate

It is not intuitively clear how these circles differ. They obviously wanted to emphasize the differences between some apartments and others, but you can't tell what exactly these differences are just by the color of the circles.

I assume that the blue ones are apartments in the city, the white ones are in the region, but I'm not sure.

How to solve? Add some notation for users

Maria

Naturally, these are not all the problems of Cian and there are still many bugs. We decided to consider those that users are most likely to encounter and immediately show how they can be solved. The designers approached the same problems differently and I think they deserve a like and a good comment on their work.

Well, now about the most basic user scenario, which is also not so simple.

Let's try to rent an apartment in St. Petersburg with a budget of 25,000 rubles

Let's imagine that a user has visited Cian for the first time. He wants to rent an apartment in St. Petersburg, with a limited budget of 25,000 rubles and a cat in hand. Therefore, he needs to look for an apartment that will allow pets. In addition, it is desirable to find something not too far from the metro.

We immediately noticed that there was no filtering.

The first thing a user who may not have used Cian before encounters is the lack of filtering at the first stage of the search. Here we can only specify the “type” of premises, number of rooms, price and area.

Filtering opens in the next step

But it can be problematic to find it on the screen right away, since there are no accents on the filters. But “regions”, “district”, “metro” and “find” are highlighted in blue.

After selecting filters, the search page is refreshed.

But the “more filters” button shows an orange dot. It is used on Cian as a notification about something new. So for some time I racked my brains over what I did wrong and why this dot does not disappear. In the end, I still do not understand why it is needed. If it shows “additional filters”, then why display them below with the ability to disable.

What did the developers find under the hood with filters?

The logic of filters is complex, but the implementation is simple.

Cyan produces a certain number of results, but does not continue to bombard the backend with requests.

In other words, the site monitors how we scroll through the list. It gives us a few ads and waits for us to scroll to the end. As soon as we do this, Cian loads the rest of the information for us – pagination appears.

On one of our projects we used long queries – this is when the queries always go to the backend. Even in cases where we haven't scrolled all the options to the end. The site just keeps sending and receiving queries.

As we understand, Cian has its own base

They do not take ads from third-party sites, such as the Aviasales site. There, the user sees ticket options, information about which is taken from Pobeda, Aeroflot and others. Therefore, Cian does not need to constantly send requests to the server.

Pitfalls are emerging

Cian does not indicate the full cost of the apartment in the preview. To do this, the user needs to go to the card and find information in very small print about payment for housing and communal services + deposit + commission.

Also, this is where the information about living conditions is located. At first, I didn't even notice it, because according to my logic, since there is information about money here, then children and animals should not be related to these points.

More interesting stuff

If the apartment card states that pets are allowed, this is not always the ultimate truth. It would be good if users had a wider choice in the “conditions”.

For example, “pets allowed”, “by agreement with the owner”, “pets not allowed”. And the animals themselves were divided at least basically into dogs and cats, since there were cases when the owner was not against a dog, but had a strictly negative attitude towards cats.

Sometimes (rarely, but it happens) Cian displays ads in the search that no longer exist on the site, which is why the user gets a kind of 404.

Rent by Cian's assessment – a cool feature

But it is more confusing than useful. Almost every ad is priced higher than Cian estimates. Why should the owner display this information?

They note – “it's better and faster to haggle or rent out the apartment,” but as a person who has rented many apartments, I can hardly imagine a scenario where you talk to the owner and say “you know, Cian is pricing the apartment lower, let's haggle.” It's unlikely to lead to anything useful.

Let's look at the search on the map

The first thing that confuses me is the different colored dots.

Some are painted over, others are not. Why? Probably because some of the ads have already been viewed? But no, I didn't click anywhere specifically, so it's just a strange approach.

With displaying ads on the map – too little information about the apartment

Remember that the final price is not indicated in the ad, and it is also not stated whether the ad is from the owner or not.

For comparison, here are two ads with an agent. They differ in the signs under the photo, but how can you tell that they are not from the owner without clicking?

Once a user has found an apartment, he needs to somehow contact the owner.

Cian offers to either call or write in the application. Here I have a complaint rather about what is emphasized. It is hard for me to imagine that now people call and do not write, but this is a minor remark, perhaps I am wrong.

And in some places it is impossible to call or write at all

For example, I found an ad where the user can only schedule a viewing. And this is a very strange solution. If you are interested in such an apartment, you will fill out a mini-questionnaire. I don’t understand why this can’t be resolved in correspondence or a call, but let’s assume.

Once you close the messenger, you won't be able to open it again.

You either need to open it again via the ad or go to the full version. At the same time, there is a 3D cube on the screen. It would seem that it will open the messenger with the latest messages, but no. This is “Cian Assistant”. Why it is here is not clear to me personally.

And if you sent a message by accident, like I did, you won't be able to delete it. Sad.

What about the metrics?

Website loading speed

Cian's performance is okay. It's a huge site that constantly interacts with the server and collects a bunch of analytics. Therefore, we can assume that the indicators from Lighthouse do not indicate anything bad, but we will still look at them and figure out what can be improved.

We open it and immediately see from the Largest Contentful Paint metric that the problem is in the pictures

On the website, the image is not given to the user immediately, but after 5.9 seconds

The problem is most likely that it is heavy. Cian is designed like this: first, geolocation is connected, and then the necessary content is selected for it and shown to the user.

That is, the recommendation by region is slow. First, the site calculates the region ID, and then with it it also throws in a request for receiving recommendations. Because of this, the user waits for a whole half a second.

We look into the code and see that the images weigh an awful lot

And everything is in png format, although you can use the more modern svg format.

Not only are all the pictures in png, but they also weigh half a megabyte. Here's a regular decorative picture that weighs 300 kilobytes…

Here's another example. The usual decorative background image is very heavy – it could have been made much smaller, but Cyan left it at 2880 x 1400. In addition, they decided to put an overlay on it. Therefore, it 100% could have been made lower in quality.

In general, the guys from the Cian team should do some optimization and then the page loading time will be reduced. Even if geolocation works.

Website accessibility

Here Lighthouse helps us determine:

• how convenient it is for users to work with the site,

• is the site well structured,

• whether the code is semantically correct.

Have you noticed that there are places on the site where a button or image does not have a special alt attribute?

The search engine does not understand what is in front of it, so it cannot read the text or picture out loud.

Not only users with good eyesight sit on websites, some use a Screen Reader – a special program that reads out loud everything that happens on the screen. Without the alt attribute, this program cannot read a picture or button on a website.

It is better to register an attribute for each button and image

Create noticeable text that clearly describes the destination, purpose, function, or action and is noticeable, unique, and focusable.

Optimal methods

Here the program shows us common errors that are more related to code and development. They are not critical.

These indicators are mainly influenced by site widgets. Surprisingly, Cian has a minimum of different connected services – analytics, security, etc. That is, from the point of view of the frontend, it is generally lightweight.

SEO optimization

The page follows 83% of the basic SEO guidelines and ranks well in search engines.

Overall, the site's metrics are good. Maintaining such a large project is difficult, even for a large Cian team with designers and developers. The only thing you can do is:

• Optimize images, especially those that are displayed on the site as decoration and do not affect the user.

• Add an alt attribute to all images and links so that visually impaired users can also read them without problems using the program and use the site.

I have previously published UX patrols on other platforms, but since the articles about YouTube analogues mostly appealed to you, I decided to try experimenting here.

How do you like this format? Should we consider the user path more often than describing problems in a vacuum? Or a simple enumeration of bugs with their possible solutions? Write about it in the comments.

Do you often encounter problems with Cian? What was the most unpleasant experience you had?

Thank you all for reading the article, I was with you editor UXART, see you soon.