Разбор задач отбора: Design
kirill_sidorets
Разбирает Алексей Мазелюк.
Далеко не всем участникам удалось проработать идею и собрать качественную презентацию. Кирилл с этим справился. Его презентация имеет понятную структуру, хорошее описание и аккуратное наполнение. Ссылка на полную работу участника.
Идея
Автор решил не делать обычный вариант с карточками, как в другой известной социальной сети. Вместо этого каждая его история может быть полноценным рассказом с хорошим описанием, фотографиями и видео. В качестве обратной связи были выбраны не сухие лайки, а поздравления в виде комментариев с большими эмодзи. Здесь же можно увидеть схожие события других пользователей. В конце события можно найти список всех событий пользователя. В подобные истории хочется проваливаться и читать до последнего.
Стоит отметить, что большая часть нарисованных интерфейсов находится за пределами ВК. Это не так страшно, ведь это конкурс идей.
Вернёмся к работе. Кирилл показал точку входа в профиле. События располагаются в карусели с возможностью перейти в более подробный список или карту. Карту? Карту! Все события с геометкой размещены на карте, при отдалении — цвета категорий смешиваются и образуют интересный градиент счётчика. Такие счётчики помогают понять, каких событий в этом месте было больше всего.
В конце своей презентации автор работы расписал некоторое будущее подобных событий. За это тоже был поставлен плюсик. Все понимают, что не всегда получается нарисовать всё то, что было задумано. Если появляются хорошие, на ваш взгляд, идеи, — прикладывайте их к презентации, это может поднять оценку.
Что можно было бы сделать лучше
Переключения на режим события
Контрол в шапке понятен, а вот что скрывается за формулировками в выпадающем списке — не совсем. Здесь лучше добавить подпись или, может, проиллюстрировать.
Выбор категории
Подписи стоит подтянуть по кеглю, сейчас они несоразмерны с размером иконок. Можно подумать над категориями событий, может быть, сразу разбить цветом, а не после выбора. Кнопку создания лучше не прятать. Следует сделать её более явной, выделить цветом, сделать отличной от обычных категорий.
Публикация
Автор показал здесь инпут, который очень напоминает кнопки ниже. Тонкая обводка вокруг спасла бы ситуацию. Здесь же возникли вопросы с кнопками. Это примеры названий события или что-то совсем другое? Заголовок над этим списком внёс бы ясность.
При входе на этот экран лучше сразу открывать клавиатуру и ставить фокус в инпут, чтобы миновать лишний клик. Однако есть и минус такого решения — кнопки ниже окажутся скрытыми за клавиатурой.
Здесь возникают вопросы с навигацией. С этого экрана я могу вернуться назад к выбору категории. Если я не захочу её менять, повторный клик по уже выбранной категории для перехода на следующий экран — не лучшее решение. Как вариант, на этом шаге можно показывать стрелку вправо вместо неактивной стрелки публикации события.
Само событие на последнем шаге мало чем отличается от обычной записи. Здесь можно показать некое превью будущего опубликованного события. План минимум — показать категорию с иконкой и названием.
Поддержка
Здесь можно было бы немного увеличить кегль подписи.
Воспоминание
Нет явной кнопки шаринга открытого события и более ранних событий ниже. Фотографии можно показать сеткой либо каруселью с более крупными изображениями, а также добавить переход к полному списку подобных событий других пользователей.
Поздравление от друзей
При входе на экран поздравления нужно сразу открывать клавиатуру и ставить фокус в инпут. Не хватает явного выхода с этого экрана, например крестика в верхнем правом углу.
Карта
Сильно бросаются в глаза сепараторы, их можно было бы приглушить. В ячейках их лучше убрать совсем, так как есть разделение отступами. Если событий будет больше, нужно показать, что этот список можно вытянуть. Год в дате лучше проставлять только у событий, которые произошли в прошлом году.
Итог
Работа понравилась, так как содержит интересные и отличные от многих решения, аккуратно сделана и хорошо оформлена. Поздравляю с прохождением в финал!
Кирилл Цыганюк (debr78)
Разбирает Матвей Правосудов.
Издалека работа сразу притягивает внимание и выглядит очень аккуратной, чистой и собранной. Дизайнер поработал над презентацией: выделил главное, расположил макеты интерфейса в настоящих рамках телефона, подписал экраны. Ссылка на полную работу участника.
Ключевая идея
Кирилл пошёл безопасным путём и выбрал крепкую идею: событие — это сниппет, которым можно поделиться в посте. Чтобы сильнее выделить события, Кирилл предлагает сделать отдельный таб в профиле. Основная точка входа — изменение информации о себе, а в будущем и отдельная кнопка при создании поста.
Главный плюс — такая механика хорошо вписывается в текущий интерфейс ВКонтакте, а пользователи уже знакомы с аналогичным паттерном работы с событиями.
Отдельно хочется отметить, что Кирилл продумал, как можно развивать события дальше. Например, расширить количество доступных типов событий и интегрировать события в воспоминания.
Что можно улучшить
Я бы не откладывал точку входа через кнопку в посте на следующие итерации, потому что создание событий через изменение информации о себе — довольно неочевидный способ. Пользователи нечасто обновляют свою информацию, а новый способ делиться событиями из жизни наверняка привлёк бы их внимание.
Системность
Кирилл разработал масштабируемую вёрстку сниппета событий, который подстраивается и под обложку в виде картинки, и под интерактивные аватарки пары.
Что можно улучшить
В сниппете смены должности всё-таки важнее показать новую должность, например вот так:
Новая должность в Delivery Club (вторичный заголовок)
Senior-разработчик (первичный заголовок)
до этого «Разработчик» (третичный заголовок)
Друзья пользователя могут забыть, на какой должности работал человек до события, поэтому мы дадим им подсказку в подписи.
Также в реальной жизни этим сниппетам придётся столкнуться с отсутствием красивой обложки и пустой аватаркой сообщества. Но это не относится к условиям соревнования.
Визуальный язык
Эмоции, хорошая вписанность в текущий дизайн, шероховатости в иконках, использовании контролов, большом количестве стилей типографики.
Визуальный язык — типографика, цветовая палитра, используемые паттерны и приёмы в интерфейсе, которые сообщают пользователю информацию о том, что это за интерфейс, какую задачу он выполняет, как им можно пользоваться. Визуальный язык помогает общаться с пользователем через интерфейс, а также вызывать эмоции.
У Кирилла получилось сделать события достаточно эмоциональными благодаря красочным обложкам и ярким цветам.
Что можно улучшить
Можно покопаться в деталях и почистить стили типографики, немного исправить визуальную иерархию в самих сниппетах, подкрутить интерлиньяж, сделать иконки ближе к «нашим» по стилю. В некоторых местах используются не очень подходящие контролы, например в постинге.
Итог
Работа получилась свежей, аккуратной, очень яркой. Кирилл выбрал понятный сценарий и завернул всю работу в сильную презентацию, поэтому попал в финал.