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