{"id":13597,"url":"\/distributions\/13597\/click?bit=1&hash=ce14b8b4846314ce80a009b52128dfe4276b036f8de856a8737e7c40a3353b88","title":"\u0410\u0432\u0442\u043e\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u0430\u0437\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f \u0432\u044b\u0448\u0435 \u043d\u0430 30% \u2014 \u0445\u043e\u0442\u0438\u0442\u0435?","buttonText":"\u0425\u043e\u0447\u0443","imageUuid":"97137c64-f668-5e69-98d1-d58d5d17653d","isPaidAndBannersEnabled":false}
Дизайн
Егор Карпов

Тестовое для стажировки в Авито

Привет, меня зовут Карпов Егор. Около года назад я заинтересовался темой проектирования интерфейсов и UX дизайна. Изучил фигму по курсам на ютуб и стал искать онлайн курсы для погружения в тему. По счастливому стечению обстоятельств выиграл бесплатное обучение в одной из онлайн-школ, сейчас заканчиваю диплом. Параллельно с обучением начал поиск работы джуном или стажировки. Так я и попал на сайт стажировки в Авито.

Иллюстрация с сайта https://www.avito.ru/design-internship/

В этой статье расскажу, как выполнил тестовое задание для стажировки в дизайн-команде Авито на позицию дизайнера продукта.

Прежде чем начать, небольшое отступление.
Я не прошёл отбор на стажировку, но хочется, чтобы работа была проделана не напрасно, по этому цель этой статьи поделиться своим вариантом решения задания и получить комментарии и предложения.
Это поможет мне в развитии. Спасибо 🙏

Задача

Передо мной стояла задача: разработать свой вариант карточки объявления в категории «Телефоны». Обязательно для десктопа и опционально для приложения.

Решение

Что важно для человека покупающего телефон? Фото, цена и его характеристики. Пример карточки объявления в задании был разрешением 1440*900, по этому я решил делать новый дизайн под это же разрешение. Сейчас при таком разрешении на главной странице видно только фото и цену.

В новом варианте я добавил блок с характеристиками товара и разместил карусель с фотографиями слева, так чтобы было видно все фотографии. 

Такой тип размещения блоков с фото и характеристиками на экране — определённый паттерн. Люди привыкли покупать технику в том числе и телефоны в таком интерфейсе.

Используя этот паттерн мы поможем пользователям быстрее считать информацию и снизим когнитивное сопротивление при переходе на сайт Авито из других магазинов.

Блок с характеристиками

Нужно было понять, какие характеристики товара стоит выводить на главный экран, а какие прятать или вовсе не показывать. Для этого я обратился к гуглу и через пару минут нашёл вот такое исследование. В исследовании говорится о том, что при выборе телефона в первую очередь люди смотрят на следующие характеристики:

Таким образом был решен вопрос с характеристиками в новом интерфейсе.

Блок с кнопками над фото

Следующие изменения коснулись верхнего над фото блока с кнопками. Первым делом я добавил кнопку «сравнить», потому что это удобно:)

Сравнивая модели прямо в Авито у человека не будет необходимости открывать много вкладок и скакать между ними или же и вовсе уйти с сайта и сравнивать на каком-нибудь крупном маркетплейсе.

При этом, как оказалось, возможность сравнить в Авито есть, но она есть в других категориях, например авто или жильё. И эта возможность сейчас совсем не очевидна, чтобы её активировать нужно лайкнуть объявление.

Чтобы не сильно увеличивать количество кнопок я оставил эту фичу, но вместо блока сравнения при нажатии на лайк появилась возможность «добавить заметку». Эта функция ранее была реализована по кнопке справа от кнопок «добавить в избранное».

Также в верхнем блоке кнопок появилась ещё одна кнопка — «Поделиться»
В текущей версии кнопки находились в самом низу и чтобы добраться до них или до кнопки пожаловаться, нужно было скролить.

Убрал живой журнал из вариантов, мало кто использует ЖЖ в 2021.В целом я бы также убрал, твиттер, а вместо них добавил вотсап и телеграм.

Блок под фото

Под блоком с фотографией разместил информацию о самом объявлении, убрав из неё номер объявления и добавив количество лайков. Тут же появилась кнопка пожаловаться.

Количество лайков будет мотивировать людей к покупке.

Теперь все действия связанные с объявлением оказались доступны на первом экране.

Блок контактов

Следующие изменения коснулись блока с информацией о продавце.

Рядом с фотографией пользователя появилась информация о количестве размещённых объявлений. Голубой кружок вокруг профиля означает что человек сейчас онлайн. 

На макете к заданию этого нет, но в реальной версии Авито над кнопкой подписаться есть кнопка с количеством объявлений пользователя, она ведёт на карточку профиля продавца. Таким образом избавились от дублирующей кнопки и подсветили возможность перехода к объявлениям пользователя через клик по аватару. Место кнопки с объявлениями заняла кнопка с продавцами из этой категории.(Опять же, этого нет на макете, но изучая сайт в браузере я заметил такой блок и добавил кнопку для перехода к продавцам.)

Блок с информацией

Блоки информации растянулись и получили названия

Похожие объявления

Из-за того, что блоки растянулись, появилась возможность сделать карусель из списка похожих объявлений.

Все объявления можно посмотреть без постоянного нажимания кнопки показать ещё. Объявления не разворачиваются длинным свитком вниз, а аккуратно расположены в один ряд.

Галочка включая товары с доставкой снова отсылает к реальной версии Авито где такой блок есть. Товары с доставкой помечены иконкой грузовика, как в мобильном приложении.

Карточка объявления для компании

Поскольку товары продают не только частные лица, но и компании, я сделал вариант карточки для компании. В нем показал как будет выглядеть первый экран, если вся информация в блоке с продавцом будет заполнена.

На этом основная часть тестового задания была закончена.

Далее изменения веб версии были перенесены в карточку мобильного приложения. Эту карточку, а также экраны для веб версии можно посмотреть в фигме по ссылке.

Ограничения и особенности реализации

В конце, хочу сказать о некоторых сложностях, которые на мой взгляд, могут возникнуть при реализации данного варианта дизайна.

Нельзя так просто взять и поменять дизайн карточки в категории мобильные телефоны. Затрагивая эту карточку, мы по сути, меняем дизайн у всех карточек в разделе «Бытовая электроника». Иначе объявления в этом разделе будут выглядеть не консистентно и сбивать с толку. Варианты для реализации остальных категорий из этого раздела тоже нужно прорабатывать. А конкретно — смотреть, какие характеристики для каждой категории товара необходимо указать.

Помимо этого, при размещении объявления, продавцам придётся заполнять чуть больше информации, чтобы она отобразилась в блоке с характеристиками. Эту проблему можно решить с помощью автоматического указания нужных параметров. Например для телефона достаточно указать, состояние, производителя, модель, цвет и количество памяти. Эти параметры необходимо (рекомендуется) указывать и сейчас при размещении объявления. Остальные же параметры можно получать из базы данных по модели смартфона.

Спасибо, что дочитали. Буду рад комментариям и фидбэку :)

Контакты для связи:
Telegram
Facebook
Behance

0
25 комментариев
Написать комментарий...
Mikhail Denisov

С одной стороны видно что авито старается примерить на себя нишу маркетплейса, даже подвижки были с витриной от продавцов. 

Поэтому классно, что попробовал сделать 3х-блочную структуру на первом экране, как у магазов, но один нюанс с которым я не согласен в корне — пользователи выбирают телефон, поэтому надо дать характеристики и возможность сравнения. Но ведь это не так, пользователи уже выбрали модель и производителя. На авито они выбирают из конкретных предложений, поэтому на передний план выходят состояние, комплектность и другие особенности б/у рынка. 

А еще пробуй больше концептуального — если в комплекте нет зарядки, то подмешивать рядом объявления зарядок и давать скидку на комплект) Если делаешь магазин — не стесняйся

Ответить
Развернуть ветку
Егор Карпов
Автор

Спасибо за мнение.

В целом, согласен с Вами, но тут нужны данные, какие объявления просматривает пользователь, сколько моделей, производителей за один сеанс. Концептуально ваш Вариант выглядит логичнее.

Мысль про комплектацию, зарядку и т.п пришла ко мне слишком поздно (хотя сейчас она кажется очевидной), задание уже было отправлено.

Идея про подмешивание объявлений - огонь. Возьму на заметку

Ответить
Развернуть ветку
Sergey Klochko

карусель на десктопе в некотором смысле зло. К примеру заприметил товар, но решил посмотреть что дальше. Дальше ничего интересного - найти товар становится проблематично - слишком мало товаров одновременно на экране и его примерное местоположение никак в памяти не зафиксируешь. В итоге усложняем поиск конкретного товара из того что приглянулось, но не открыто. Старый вариант был лучше. В остальном хорошо получилось мне кажется.

Ответить
Развернуть ветку
Егор Карпов
Автор

Спасибо за комментарий.
Увлекся переделыванием, увидел блок с каруселью на реальной веб версии Авито (продавцы в этой категории) и решил что применить его для объявлений это ок.
 
Чтобы не забыть понравившийся товар, можно добавить его в избранное прямо в карусели не заходя в объявление. 

Хотя возможно не стоило экономить место в вебе и оставить карусель только в приложении. Бывает у меня такое, хочется как можно больше информации впихнуть в минимальное пространство. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Егор Карпов
Автор

Сомневался в этом решении. Попытался найти баланс между рекламой и новым расположением блоков. И, справедливости ради, блок с рекламой в верхней части остался на месте.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Elena

Пофиг) Все рекламные блоки режутся даже встроенным в хром адблоком

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Егор Карпов
Автор

Ага, ещё и новых набирают :)

Ответить
Развернуть ветку
Vasek Romanov

Было бы интересно, почему не прошел в итоге. )

Ответить
Развернуть ветку
Егор Карпов
Автор

Мне тоже. Обратная связь по заданиям будет до 10 сентября, но скорее всего это будет вебинар с общими рекомендациями, а не разбор конкретных работ.

Ответить
Развернуть ветку
Иван

Со многим бы поспорил, но
- только АБ тесты говорят правду
- на море у мангала, ну нафик)

Ответить
Развернуть ветку
Егор Карпов
Автор

С тестами я согласен. Про море и мангал не понял.

Ответить
Развернуть ветку
Иван

Я был у мангала у моря. Не то место для глубоких мыслей)

Ответить
Развернуть ветку
Егор Карпов
Автор

Понял :) 

Ответить
Развернуть ветку
Никита Лагаев

Скажите откуда вы знаете что не прошли ? Если обратная связь по заданиям будет дана 10 сентября.

Ответить
Развернуть ветку
Егор Карпов
Автор

Я написал организаторам напрямую. Очень уж нетерпеливый) 

Ответить
Развернуть ветку
Егор Карпов
Автор

Скинул статью в чат дизайнеров в телеграме и получил отрезвляющий вопрос: "Ты исследования проводил?"
Думаю, это одна из основных причин по которой я не прошёл. 
Хорошая мотивация для более глубокого погружения в тему.

Ответить
Развернуть ветку
Богдан Раддац

Найс, паттерны, закруглённые углы, все по методичке)

Ответить
Развернуть ветку
Elena
Блок с характеристиками

Обычно пользуюсь возможностью поиска броузера (в контекстном меню при выделении), все вводить и хранить излишне, достаточно указать модель и кнопку для поиска характеристик.
Было бы интересно увидеть (если это тестовое задание, можно пофантазировать)
- проверку по имей по базе МВД
- чек-лист из сервис-центра - по аналогии с аукционными картами отчет о состоянии техники
- гарантийный срок - если телефон на гарантии и есть чек (кстати, чек все чаще приходит на смс, мессенджер, емайл - было бы круто придумать приложение для хранения и поиска гарантийных чеков)

Ответить
Развернуть ветку
Егор Карпов
Автор

Спасибо.
Интересные предложения, есть над чем подумать.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Егор Карпов
Автор

Может быть.
Видимо, я сильно увлекся приведением Авито к виду маркетплейса и не учел особенности БУ рынка.

Ответить
Развернуть ветку
Ульяна

Здравствуйте! Скажите, пожалуйста, при выполнении тестового задания вы пользовались какими-то гайдами или библиотекой компонентов Авито?

Ответить
Развернуть ветку
Читать все 25 комментариев
null