Разбор магазина книг

Разбираемся, почему важно сразу правильно закладывать правильную информационную архитектуру приложения, что должно быть в карточке товара и как подходить к предварительному исследованию.

Автор работы Константин Давыдов, подписчик DL PRO

Проект можно посмотреть по ссылке

Какие ключевые вопросы по работе у тебя есть к менторам?
Что можно улучшить в этой работе? Что в ней сделано хорошо. а что не очень? Как и какие можно было провести исследования, чтобы работа выглядела ещё лучше?

Привет, Константин!

Большое спасибо, что поделился своим учебным проектом! Видно, что ты проделал большую работу.

Что понравилось в работе

У тебя хорошая работа с приятной и интересной цветовой палитрой. Видно, что ты потратил много времени на подготовку кейса по своему учебному проекту. Замечательно, что сделал UI-kit, видно, что стараешься работать с компонентами и вариантами.

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

Исследования

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

1) Кто твои потенциальные пользователи.

2) Когда у твоей ЦА возникает потребность в покупке книги?

3) Какие факторы оказывают влияние на выбор той или иной книги? (Как принимается решение о покупке)

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

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

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

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

Логика

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

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

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

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

Сравни свою карточку книги и карточку из приложения одного из приложений в данной тематике.

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

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

Бизнес

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

На главную страницу чаще всего выносят громкие новинки, книги с высоким рейтингом и популярные (большое количество отзывов), которые могут привлечь внимание потенциального покупателя. Также может быть договорённость с издательством, что за дополнительную плату нужно продвигать активно какие-либо книги.

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

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

Если ты показываешь, что есть скидка через зачёркивание старой цены и указание новой, то стоит это делать на всех карточках книг, для которых есть скидка.

Визуал

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

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

Типографика

У тебя очень классная иерархия в типографике заголовков. В презентации ты используешь хорошо читаемые крупные акцентные заголовки. Только стоит немного поработать над высотой строки. Для этого есть очень удобный сервис, он считает по золотому сечению https://grtcalculator.com

Ты очень классно придумал проиллюстрировать использование шрифтов, но не хватает объяснения, что это такое. Немного похоже на прототип, это сбивает. Например, можно добавить заголовок «Примеры шрифта в интерфейсе мобильного приложения».

Сам размерный ряд шрифтов, что ты выбрал не подходит под мобильные устройства. Они противоречат признанным правилам HIG и Material Design. Старайся следовать общепринятым стандартам, и использовать для основного текста размеры 17-16. А меньше (13-12) только для подписей и небольших объёмов текста.

Композиция

В своём кейсе ты часто меняешь принципы выравнивания. Лучше выбрать один стиль и придерживаться его. Например, все выравнивать по левому краю. Чтобы выравнивать то по одному краю, то по другому, необходимо чётко понимать, чем обусловлено изменение. Например, если контент слишком однотипный, или все заголовки по одной стороне, а всё остальное — по другой. Но у тебя в работе нет такого чёткого правила. Например, в UI-kit стоит выровнять разнонасыщенные блоки по одной линии и расположить их более однотипно и предсказуемо. И их можно сделать крупнее, чтобы можно было рассмотреть детали.

Цвет

Ты выбрал хорошие, яркие цвета. Но они слишком насыщенные для использования только в чистом виде. Стоит сделать градиентную разбивку, например, по процентам прозрачности. Есть специальные плагины в фигме, которые сделают это для тебя. Например, вот этот поможет подобрать нужные значения для читабельности и контраста. https://www.figma.com/community/plugin/926166109013752444/HCL-Easy

Тени

Очень здорово, что ты используешь разный уровень теней. Обрати внимание на то, как именно они помогают тебе в иерархии контента. Обычно мягкие тени большего размера используют для крупных блоков, находящихся ближе к пользователям. Попробуй представить, какую тень отбрасывали бы элементы, будь они из бумаги. Подробнее про иерархию с помощью теней можно почитать в руководстве Material Design.

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

Команда

Над порядком в макетах в Фигме ещё стоит поработать. Хорошо, что есть стремление к логическому именованию отдельных слоёв и групп.

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

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

Что дополнительно посмотреть

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

Успехов в будущих проектах!

Работу разобрали Оля и Наташа.

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/