Привет, меня зовут Карпов Егор. Около года назад я заинтересовался темой проектирования интерфейсов и UX дизайна. Изучил фигму по курсам на ютуб и стал искать онлайн курсы для погружения в тему. По счастливому стечению обстоятельств выиграл бесплатное обучение в одной из онлайн-школ, сейчас заканчиваю диплом. Параллельно с обучением начал поиск работы джуном или стажировки. Так я и попал на сайт стажировки в Авито.
В этой статье расскажу, как выполнил тестовое задание для стажировки в дизайн-команде Авито на позицию дизайнера продукта.
Прежде чем начать, небольшое отступление.
Я не прошёл отбор на стажировку, но хочется, чтобы работа была проделана не напрасно, по этому цель этой статьи поделиться своим вариантом решения задания и получить комментарии и предложения.
Это поможет мне в развитии. Спасибо 🙏
Задача
Передо мной стояла задача: разработать свой вариант карточки объявления в категории «Телефоны». Обязательно для десктопа и опционально для приложения.
Решение
Что важно для человека покупающего телефон? Фото, цена и его характеристики. Пример карточки объявления в задании был разрешением 1440*900, по этому я решил делать новый дизайн под это же разрешение. Сейчас при таком разрешении на главной странице видно только фото и цену.
Такой тип размещения блоков с фото и характеристиками на экране — определённый паттерн. Люди привыкли покупать технику в том числе и телефоны в таком интерфейсе.
Блок с характеристиками
Нужно было понять, какие характеристики товара стоит выводить на главный экран, а какие прятать или вовсе не показывать. Для этого я обратился к гуглу и через пару минут нашёл вот такое исследование. В исследовании говорится о том, что при выборе телефона в первую очередь люди смотрят на следующие характеристики:
Блок с кнопками над фото
Следующие изменения коснулись верхнего над фото блока с кнопками. Первым делом я добавил кнопку «сравнить», потому что это удобно:)
При этом, как оказалось, возможность сравнить в Авито есть, но она есть в других категориях, например авто или жильё. И эта возможность сейчас совсем не очевидна, чтобы её активировать нужно лайкнуть объявление.
Чтобы не сильно увеличивать количество кнопок я оставил эту фичу, но вместо блока сравнения при нажатии на лайк появилась возможность «добавить заметку». Эта функция ранее была реализована по кнопке справа от кнопок «добавить в избранное».
Также в верхнем блоке кнопок появилась ещё одна кнопка — «Поделиться»
В текущей версии кнопки находились в самом низу и чтобы добраться до них или до кнопки пожаловаться, нужно было скролить.
Блок под фото
Под блоком с фотографией разместил информацию о самом объявлении, убрав из неё номер объявления и добавив количество лайков. Тут же появилась кнопка пожаловаться.
Теперь все действия связанные с объявлением оказались доступны на первом экране.
Блок контактов
Следующие изменения коснулись блока с информацией о продавце.
На макете к заданию этого нет, но в реальной версии Авито над кнопкой подписаться есть кнопка с количеством объявлений пользователя, она ведёт на карточку профиля продавца. Таким образом избавились от дублирующей кнопки и подсветили возможность перехода к объявлениям пользователя через клик по аватару. Место кнопки с объявлениями заняла кнопка с продавцами из этой категории.(Опять же, этого нет на макете, но изучая сайт в браузере я заметил такой блок и добавил кнопку для перехода к продавцам.)
Блок с информацией
Блоки информации растянулись и получили названия
Похожие объявления
Из-за того, что блоки растянулись, появилась возможность сделать карусель из списка похожих объявлений.
Галочка включая товары с доставкой снова отсылает к реальной версии Авито где такой блок есть. Товары с доставкой помечены иконкой грузовика, как в мобильном приложении.
Карточка объявления для компании
На этом основная часть тестового задания была закончена.
Далее изменения веб версии были перенесены в карточку мобильного приложения. Эту карточку, а также экраны для веб версии можно посмотреть в фигме по ссылке.
Ограничения и особенности реализации
В конце, хочу сказать о некоторых сложностях, которые на мой взгляд, могут возникнуть при реализации данного варианта дизайна.
Нельзя так просто взять и поменять дизайн карточки в категории мобильные телефоны. Затрагивая эту карточку, мы по сути, меняем дизайн у всех карточек в разделе «Бытовая электроника». Иначе объявления в этом разделе будут выглядеть не консистентно и сбивать с толку. Варианты для реализации остальных категорий из этого раздела тоже нужно прорабатывать. А конкретно — смотреть, какие характеристики для каждой категории товара необходимо указать.
Помимо этого, при размещении объявления, продавцам придётся заполнять чуть больше информации, чтобы она отобразилась в блоке с характеристиками. Эту проблему можно решить с помощью автоматического указания нужных параметров. Например для телефона достаточно указать, состояние, производителя, модель, цвет и количество памяти. Эти параметры необходимо (рекомендуется) указывать и сейчас при размещении объявления. Остальные же параметры можно получать из базы данных по модели смартфона.
Спасибо, что дочитали. Буду рад комментариям и фидбэку :)
С одной стороны видно что авито старается примерить на себя нишу маркетплейса, даже подвижки были с витриной от продавцов.
Поэтому классно, что попробовал сделать 3х-блочную структуру на первом экране, как у магазов, но один нюанс с которым я не согласен в корне — пользователи выбирают телефон, поэтому надо дать характеристики и возможность сравнения. Но ведь это не так, пользователи уже выбрали модель и производителя. На авито они выбирают из конкретных предложений, поэтому на передний план выходят состояние, комплектность и другие особенности б/у рынка.
А еще пробуй больше концептуального — если в комплекте нет зарядки, то подмешивать рядом объявления зарядок и давать скидку на комплект) Если делаешь магазин — не стесняйся
Спасибо за мнение.
В целом, согласен с Вами, но тут нужны данные, какие объявления просматривает пользователь, сколько моделей, производителей за один сеанс. Концептуально ваш Вариант выглядит логичнее.
Мысль про комплектацию, зарядку и т.п пришла ко мне слишком поздно (хотя сейчас она кажется очевидной), задание уже было отправлено.
Идея про подмешивание объявлений - огонь. Возьму на заметку
карусель на десктопе в некотором смысле зло. К примеру заприметил товар, но решил посмотреть что дальше. Дальше ничего интересного - найти товар становится проблематично - слишком мало товаров одновременно на экране и его примерное местоположение никак в памяти не зафиксируешь. В итоге усложняем поиск конкретного товара из того что приглянулось, но не открыто. Старый вариант был лучше. В остальном хорошо получилось мне кажется.
Спасибо за комментарий.
Увлекся переделыванием, увидел блок с каруселью на реальной веб версии Авито (продавцы в этой категории) и решил что применить его для объявлений это ок.
Чтобы не забыть понравившийся товар, можно добавить его в избранное прямо в карусели не заходя в объявление.
Хотя возможно не стоило экономить место в вебе и оставить карусель только в приложении. Бывает у меня такое, хочется как можно больше информации впихнуть в минимальное пространство.
Комментарий недоступен
Сомневался в этом решении. Попытался найти баланс между рекламой и новым расположением блоков. И, справедливости ради, блок с рекламой в верхней части остался на месте.
Комментарий недоступен
Пофиг) Все рекламные блоки режутся даже встроенным в хром адблоком
Комментарий недоступен
Ага, ещё и новых набирают :)
Было бы интересно, почему не прошел в итоге. )
Мне тоже. Обратная связь по заданиям будет до 10 сентября, но скорее всего это будет вебинар с общими рекомендациями, а не разбор конкретных работ.
Со многим бы поспорил, но
- только АБ тесты говорят правду
- на море у мангала, ну нафик)
С тестами я согласен. Про море и мангал не понял.
Я был у мангала у моря. Не то место для глубоких мыслей)
Понял :)
Скажите откуда вы знаете что не прошли ? Если обратная связь по заданиям будет дана 10 сентября.
Я написал организаторам напрямую. Очень уж нетерпеливый)
Скинул статью в чат дизайнеров в телеграме и получил отрезвляющий вопрос: "Ты исследования проводил?"
Думаю, это одна из основных причин по которой я не прошёл.
Хорошая мотивация для более глубокого погружения в тему.
Найс, паттерны, закруглённые углы, все по методичке)
Обычно пользуюсь возможностью поиска броузера (в контекстном меню при выделении), все вводить и хранить излишне, достаточно указать модель и кнопку для поиска характеристик.
Было бы интересно увидеть (если это тестовое задание, можно пофантазировать)
- проверку по имей по базе МВД
- чек-лист из сервис-центра - по аналогии с аукционными картами отчет о состоянии техники
- гарантийный срок - если телефон на гарантии и есть чек (кстати, чек все чаще приходит на смс, мессенджер, емайл - было бы круто придумать приложение для хранения и поиска гарантийных чеков)
Спасибо.
Интересные предложения, есть над чем подумать.
Комментарий недоступен
Может быть.
Видимо, я сильно увлекся приведением Авито к виду маркетплейса и не учел особенности БУ рынка.
Здравствуйте! Скажите, пожалуйста, при выполнении тестового задания вы пользовались какими-то гайдами или библиотекой компонентов Авито?