Проектирование веб-сервиса по созданию фото-книг Gramofon.ua
Довольно часто процесс проектирования сайта для начинающего дизайнера превращается в мучительную историю с бесконечными правками в результате которой рождается монстроподобное дитя от которого самому хочется побыстрее отказаться, не говоря уже о том чтобы выложить в портфолио или показать коллегам. На примере процесса работы над сервисом Gramofon.ua поделюсь опытом как можно избежать типичных ошибок и получить результат который удовлетворит как клиента так и дизайнера без стресса. Подход не претендует на единственно верный, это один из многих способов разложить сложный процесс на простые и понятные шаги.
В статье я коротко рассказываю об основных этапах. Более подробно методология рассматривается на онлайн-тренинге по проектированию цифровых продуктов DIGITAL PRODUCT JEDY
Немного теории
В своей статье “Проектирование интерфейсов как процесс достижения цели” я уже описывал основные этапы при проектировании цифрового продукта которые нужно пройти для того чтобы прийти к нужному результату. Для себя я выделил три основных этапа:
- Дизайн продукта — на этом этапе важно сформировать видение продукта и описать будущий опыт взаимодействия, то есть как пользователи будут с ним взаимодействовать, какие решать проблемы и в каком контексте, что они при этом подумают и почувствуют.
- Дизайн взаимодействия — на этом этапе имея видение продукта дизайнер превращает описание в экраны, то есть в картинки которые будет видеть пользователь и с их помощью взаимодействовать с устройством.
- Дизайн графического интерфейса — на этом этапе имея четкое понимание как работает будущий продукт, из каких экранов он состоит и что на каждом экране должно быть дизайнер прорабатывает графическую оболочку которая должна дать ощущение качества и вызвать правильный эмоциональный отклик.
В процессе проектирования нужно всегда помнить о трех основных составляющих, которые лежат в основе любого цифрового продукта который приносит пользу как бизнесу так и пользователям: бизнес-требования, пользовательские требования и используемые технологии. По этому любой правильно настроенный процесс должен помогать дизайнеру постоянно держать в фокусе эти составляющие.
Это была теория а теперь посмотрим как же это все применяется на практике.
Постановка процесса
Прежде всего у вас должно быть свое четкое видение процесса работы над проектом которое помогает именно вам добиться нужного результата. У каждого дизайнера этот процесс уникален, этапы могут называться по-разному но основыне шаги практически у всех одинаковы. Я рекомендую создавать шаблон проекта в котором описаны все шаги благодаря чему у вас не должно возникнуть вопросов с чего начать и что сейчас делать. Тем самым вы разгружаете свой мозг и тратите его ресурсы на непосредственную работу над проектом. Для этого я использую неплохой условно-бесплатный инструмент Trello, который вполне может подойти и для командной работы.
Конечно, каждый проект уникален и не все этапы будут нужны, в таком случае спокойно пропускаем этапы в которых нет необходимости. Помимо контроля этапов работы так же потребуется некий проектный документ в который будут собираться все данные и к которым будут иметь доступ все участники процесса. Для этого лучше всего подходит Google Docs.
Помимо этого при получении заказа нужно уведомить клиента о том как будет строиться работа, на каких ключевых этапах вы будете с ним обсуждать результаты и корректировать направление. Как показывает практика, таким образом вы сразу отсекаете проблемных клиентов которым нужен “тупо дизайн”.
1. Дизайн продукта
Сначала нам нужно описать видение будущего продукта и утвердить его с клиентом. Сформировать видение помогают различные типы исследований которые дают нам объективные данные и помогают лучше понять какие проблемы прийдется решать. Исследования дают пищу для ума и подсознания благодаря которой активно включаются механизмы генерации идей. Кроме того формируются критерии по которым оценивается конечный результат на соответствие поставленным целям. Итогом этой работы является документ содержащий описание типов пользователей и пользовательские сценарии. И никаких картинок.
Как правило, клиент сам дает описание того что он хочет получить, дает примеры на похожие продукты. Помимо этого он помогает понять для кого этот продукт будет предназначен, то есть описывает портрет пользователя. Если клиент не может этого сделать прийдется ему помочь, вы же дизайнер и это ваша работа. Вся эта информация помогает дизайнеру сформировать бизнес- и пользовательские требования, что в свою очередь помогает понять какой результат ждет от него клиент и описать его в виде пользовательских сценариев.
Вот перечень этапов которые нужно пройти:
- Определить конечные цели и потребности проекта (бизнеса) и область работ (сайт, приложение, программа и т. д.).
- Исследовать кто конечный пользователь продукта, каковы его цели и потребности, с какими проблемами сталкивается сейчас.
- Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
- Изучить уже существующие решения и конкурентов, если таковые есть.
- Описать будущий опыт работы с продуктом с помощью пользовательских сценариев и сторибордов. Нужно охватить все ключевые сценарии, должно быть понятно как работает продукт, но без детализации. Именно со сценариев начинается проектирование интерфейса.
- Сделать первые концептуальные наброски.
Цели и потребности
Важно с самого начала понимать каковы цели создания будущего продукта. В нашем случае все достаточно просто:
- Продажа фото-книг с фотографиями из своего и чужого профиля Инстаграмм.
- Создание удобного интерфейса который позволит быстро собрать фото-книгу из фото в своём или чужом профиле и оформить заказ.
Пользователи
Ниже информация которая была предоставлена клиентом и внесена в проектный документ.
Аудитория сайта — молодые продвинутые люди, активно использующие новые технологии. Они любят фотографировать и делится своими «шедеврами» в социальных сетях. Популярно мнение, что инстаграммеры, это преимущественно хипстеры “повернутые” на гаджетах и фотографировании своих ног и еды. Отчасти это утверждение верно, но можно выделить также и другие целевые группы активно использующие данную сеть:
Профессиональные фотографы
Используют свой аккаунт для промо своих работ которые обработаны и сняты не на мобильный гаджет.
Фотографы-любители
Набор удачных фильтров дает возможность “сделать шедевр” даже из посредственного или плохого с технической стороны кадра.
И так далее…
Как видим, когда клиент знает чего он хочет и серьезно относится к своему делу он готов сотрудничать с дизайнером и предоставлять всю необходимую информацию. На основе информации о пользователях создаем профиль ключевого пользователя в лаконичном виде.
Главное ухватить эмоциональный образ который поможет лучше прочувствовать конечного потребителя и использовать его на следующем этапе.
Примеры, конкуренты
Клиент предоставил большой список конкурентов для изучения и получения общей картины существующих решений. Сам список приводить здесь не буду, скажу лишь подобные сервисы достаточно похожи.
Пользовательские сценарии
Со сценариев, собственно, и начинается проектирование будущего продукта так как мы описываем каким образом будет работать будущий продукт. Для написания сценариев важно учесть следующее:
- В сценариях не должно содержаться описания элементов интерфейсов так как эти детали прорабатываются на следующем этапе, важно описать только действия.
- В идеале, любой сценарий начинается с описания ситуации, контекста, проблемы, описания того как проблема решается и, собственно, конечный результат. Можно использовать следующую схему: ситуация > развитие событий > результат.
- Нужно написать сценарии для всех ключевых действий.
Чтобы лучше понять как писать сценарии стоит почитать специальную литературу на эту тему, но в этом нет ничего сложного. Главное требование для сценариев: чтобы любой человек их прочитавший получил представление о том как будет работать будущий продукт, какую проблему решает/какую проблему удовлетворяет и каким образом. В качестве примера, ниже приведу несколько сценариев которые были написаны для данного проекта.
Создание макета
- После нажатия на кнопку “СОЗДАТЬ КНИГУ” сервис просит ввести логин профиля в Инстаграмм из которого будут браться фотографии. Алексей вводит свой логин, подтверждает его и переходит в конструктор книги.
- Перейдя в конструктор Алексей видит макет книги, часть подгруженных фотографий из указанного профиля, а также указатель количества страниц. По умолчанию количество страниц равно 20 но их количество можно увеличить до 80. Количество подгруженных фотографий равно 20 но их можно подгружать по мере необходимости. Также фотографии можно сортировать по следующим параметрам: все фото, за указанный период, по хеш-тегу.
- Для начала сервис предлагает выбрать фото для первой страницы обложки с уже выбранным по умолчанию макетом для неё. Сервис даёт возможность выбора шаблона из нескольких вариантов. Алексея не устраивает шаблон по умолчанию (одно фото на всю обложку ему кажется слишком простым) поэтому он выбирает вариант в котором можно разместить на обложке несколько фотографий и подбирает фотки для обложки.
- Затем Алексей замечает, что сервис даёт возможность выбрать шаблон который выглядит как мозаика используя выбранные случайным образом фотографии из профиля. Сначала Алексей хотел было выбрать этот вариант но решил оставить выбранный ранее так как ему хочется всё контролировать и не предоставлять право выбора случаю…
Это только один из ключевых сценариев, в идеале нужно описать все, что бы появилась полная картина.
Важно: после того как вы написали все сценарии дайте их почитать клиенту для того чтобы согласовать ваше и его видение будущего продукта. Правки и доработки на этом этапе не так критичны и не отнимают много времени как на следующих. В итоге, и клиент и дизайнер имеют одинаковое представление о том продукте который должен получиться на выходе.
Зачем: первый этап формирует вполне объективные критерии оценки по которым будет оцениваться конечный результат.
2. Дизайн взаимодействия
Для дизайнера на этом этапе важно действия пользователя превратить в элементы, такие как кнопки, чек-боксы, формы и т. п., определить какая информация нужна и в каком виде. В конце этого этапа дизайнер должен разработать макет будущего продукта низкого разрешения, то есть прототип.
Перечень основных шагов:
- Определить технические ограничения исходя из специфики продукта (сайт, приложение, программа и т. п.).
- Составить диаграммы потоков задач опираясь на ключевые пользовательские сценарии. Диаграмма отображает алгоритм работы, шаги которые должен пройти пользователь для достижения цели по каждому сценарию.
- Выявить и записать все сценарии использования (метод скоростной фиксации).
- Используя сценарии использования и диаграммы потоков задач составить информационную структуру продукта (разбивка по экранам/страницам).
- На основе сценариев, диаграмм потоков задач и структуры описать функционал и информационное наполнение для каждого экрана/страницы.
- Разработать прототип будущего продукта. Чем больше вариантов прототипов тем лучше.
- Провести эвристическую оценку интерфейса используя 10 эвристик Якоба Нильсена.
Технические требования и ограничения
Во время написания пользовательских сценариев мы даем нашей фантазии разгуляться и не принимаем во внимание технические требования и ограничения, по этому перед тем как приступить к прототипированию важно эти требования и ограничения обсудить с клиентом и выписать. В нашем случае получился такой список:
- Сервис должен хорошо работать на стационарных компьютерах и мобильных устройствах. Поэтому при проектировании нужно хорошо проработать сценарии работы на мобильных устройствах и учесть все нюансы. Интерфейс не должен быть перегружен графическими элементами для обеспечения быстрой загрузки.
- Сайт должен быть на двух языках: на русском и украинском.
- Мобильная версия разрабатывается под минимальное разрешение 320х480 таким образом, чтобы дизайн мог “растягиваться” на большие разрешения.
- Отзывы реализованы через систему Cacle. Нужно выводить последний отзыв на видном месте, где-то вверху. Пример:
- Необходимо предусмотреть загрузку фото в рабочую область редактора пакетами, т.к. у многих пользователей более нескольких тысяч фотографий. У юзера стопицоттыщ фото в аккаунте, проблемы которые могут возникнуть при подтягивании в редактор:
- их прогрузка может вызвать батхерт и у юзера и у движка;
- выбрать необходимые фото для размещения в книге из хотя бы 1000 — становится серьезной проблемой (протестировано).
Решение: реализовать подгрузку фото порциями по мере прокрутки. Посмотреть примеры. - Дизайн обложки в стиле “мозаика” (когда фон обложки состоит из маленьких фото). Могут быть проблемы если у юзера фото в аккаунте меньше чем требуется для заполнения всех ячеек.
Решение: заполнять всю обложку фотографиями рандомно; если фоток меньше — дублировать, но при этом алгоритм должен следить чтобы одинаковые фотографии не стояли рядом.
На этом этапе могут всплыть о которых клиент не упомянул при описании задачи, или ваши идеи будет сложно реализовать. Надеюсь вам ясно почему этот шаг так важен.
Диаграмма потоков задач (User flow)
Диаграмма помогает лучше понять основные алгоритмы работы с продуктом. В моем случае получилась достаточно простая диаграмма в которой показаны ключевые этапы. Не все дизайнеры их составляют, все зависит от конкретного проекта.
Сценарии, структура, функционал и наполнение
Следующие этапы имеют условное разделение но по сути это один процесс. Суть его заключается в том, чтобы выписать все возможные сценарии взаимодействия и на основе этой информации получить структуру будущего продукта а так же описание функционала и наполнения для каждой страницы. Сам процесс хорошо описан в этой статье а для работы подходит программа XMind, по сути это аналог Карточной сортировки. В итоге мы получаем подробный документ который помогает получить ясную картину о том, сколько получится экранов и что на каждом экране должно быть.
В нашем случае страниц не так уж много а функционал не такой уж сложный. Ниже приведу пример такого описания для другого проекта.
Прототипирование
После того как у нас появилась ясная картина количества экранов и их содержимого можно перейти к созданию прототипа. Так как я занимаюсь проектированием и финальным дизайном для прототипирования я использовал Adobe Illustrator после чего все экраны были без проблем открыты в Adobe Photoshop и доведены до блеска. Вообще же для создания прототипов существует огромное количество инструментов и каждый дизайнер подбирает тот который лучше всего подходит под его задачи.
Перед тем как прорабатывать экраны на компьютере рекомендую для начала сделать несколько эскизов на бумаге, это помогает мыслить более творчески и прорабатывать несколько идей за короткий срок.
После того как все экраны проработаны самое время выложить их в виде карты навигации. Карта дает возможность увидеть все связи и выявить недостающие экраны. В нашем случае помимо основной версии сайта была так же и мобильная, что увеличило объем общей работы примерно на 40%.
Важно: обязательно согласуйте прототип с клиентом и только после этого передавайте разработчикам. Имея сценарии, прототипы всех экранов и карту навигации программисты могут приступить к работе в то время как дизайнер начинает прорабатывать финальный дизайн.
Зачем: проработать несколько идей в виде прототипа и изменить их намного проще и быстрее чем править окончательный макет. По сути прототипы это черновики большая часть из которых пойдет в мусорную корзину.
3. Дизайн графического интерфейса
На этом этапе дизайнер прорабатывает графический интерфейс, по которому пользователи будут судить о продукте. Итогом этой работы являются макеты высокого разрешения с проработкой различных состояний элементов, анимации и т. д. Перечень основных шагов:
- Определить общее настроение и тон визуальной и текстовой коммуникации.
- Определить стиль визуального оформления.
- Проработать несколько вариантов графического оформления для ключевых экранов. Выбрать один и проработать все экраны.
- Подготовить графику для вёрстки и руководство для программистов.
- Проверить результаты работы программистов.
Основная идея
Для сайта который продает некий продукт самое важное показать этот продукт в лучшем виде, дать пользователю возможность рассмотреть его со всех сторон и пощупать. В нашем случае сайт продает фото-книгу по этому основной упор делался на качественные фотографии готового продукта, описание второстепенно и не должно занимать много места.
Тон, настроение
Для оформления я выбрал теплые тона и текстуру дерева для подложки. Все это должно вызывать ощущение мастерской в которой пользователь создает свою уникальную фото-книгу а элементы не должны отвлекать его от процесса.
Клиент сразу утвердил эту концепцию после чего я приступил к проработке всех экранов. Можно бесконечно описывать почему было выбрано то или иное оформление но, в основном, именно этот этап основан больше на интуиции и опыте дизайнера.
Важно: не прорабатывайте сразу все экраны, для начала сделайте несколько черновых вариантов которые позволяют понять вашу идею и обсудите их с клиентом.
После того как проработаны все экраны дизайнеру остается подготовить графику для верстки, проработать состояния для всех интерактивных элементов и передать это все разработчикам.
Будьте готовы к тому, что воплощенный в жизнь сайт может немного отличаться от того, что нарисовано у вас в макетах, и это нормально. Однако всегда стоит проверить работу верстальщиков/программистов и уточнить чем вызваны те или иные изменения.
Результат
Я спроектировал с нуля веб-сервис, который был успешно запущен и начал приносить доход бизнесу. Это тот результат, который и ожидал от меня клиент. До этого у меня были проекты, которые очень часто не были реализованы из-за того, что я не владел методологией проектирования а просто «рисовал» сайты, как художник-оформитель. Поэтому учите методологию, господа дизайнеры!
Хочешь изучить UX/UI Design и научиться проектировать сайты и приложения?
Приходи на онлайн-курс, который помогает изучить методику и прямо во время обучения сделать проект для портфолио. Зписывайся на курс по ссылке 👉 https://hyperschool-digital-product-design.webflow.io/
