Дизайн сайта и интерфейса онлайн-конструктора создания фото-книг для Gramofon.ua

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

Александр Волошин
Дизайнер, ментор курса DIGITAL PRODUCT DESIGN
1. Дизайн продукта
Сначала нам нужно описать видение будущего продукта и утвердить его с клиентом. Сформировать видение помогают различные типы исследований которые дают нам объективные данные и помогают лучше понять какие проблемы при й дется решать. Исследования дают пищу для ума и подсознания благодаря которой активно включаются механизмы генерации идей. Кроме того формируются критерии по которым оценивается конечный результат на соответствие поставленным целям. Итогом этой работы является документ содержащий описание типов пользователей и пользовательские сценарии. И никаких картинок.

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

Вот перечень этапов которые нужно пройти:

  1. Определить конечные цели и потребности проекта (бизнеса) и область работ (сайт, приложение, программа и т. д.).
  2. Исследовать кто конечный пользователь продукта, каковы его цели и потребности, с какими проблемами сталкивается сейчас.
  3. Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
  4. Изучить уже существующие решения и конкурентов, если таковые есть.
  5. Описать будущий опыт работы с продуктом с помощью пользовательских сценариев и сторибордов. Нужно охватить все ключевые сценарии, должно быть понятно как работает продукт, но без детализации. Именно со сценариев начинается проектирование интерфейса.
  6. Сделать первые концептуальные наброски.
Дизайн продукта
Важно с самого начала понимать каковы цели создания будущего продукта. В нашем случае все достаточно просто:

  1. Продажа фото-книг с фотографиями из своего и чужого профиля Инстаграмм.
  2. Создание удобного интерфейса который позволит быстро собрать фото-книгу из фото в своём или чужом профиле и оформить заказ.
Пользователи
Ниже информация которая была предоставлена клиентом и внесена в проектный документ.

Аудитория сайта — молодые продвинутые люди, активно использующие новые технологии. Они любят фотографировать и делится своими «шедеврами» в социальных сетях. Популярно мнение, что инстаграммеры, это преимущественно хипстеры "повернутые" на гаджетах и фотографировании своих ног и еды. Отчасти это утверждение верно, но можно выделить также и другие целевые группы активно использующие данную сеть:

Профессиональные фотографы

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

Фотографы-любители

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

И так далее…

Как видим, когда клиент знает чего он хочет и серьезно относится к своему делу он готов сотрудничать с дизайнером и предоставлять всю необходимую информацию. На основе информации о пользователях создаем профиль ключевого пользователя в лаконичном виде.
Главное ухватить эмоциональный образ который поможет лучше прочувствовать конечного потребителя и использовать его на следующем этапе.
Примеры, конкуренты
Клиент предоставил большой список конкурентов для изучения и получения общей картины существующих решений. Сам список приводить здесь не буду, скажу лишь подобные сервисы достаточно похожи.
Сценарии
Со сценариев, собственно, и начинается проектирование будущего продукта так как мы описываем каким образом будет работать будущий продукт. Для написания сценариев важно учесть следующее:

  1. В сценариях не должно содержаться описания элементов интерфейсов так как эти детали прорабатываются на следующем этапе, важно описать только действия.
  2. В идеале, любой сценарий начинается с описания ситуации, контекста, проблемы, описания того как проблема решается и, собственно, конечный результат. Можно использовать следующую схему: ситуация > развитие событий > результат.
  3. Нужно написать сценарии для всех ключевых действий.
Главное требование для сценариев: чтобы любой человек их прочитавший получил представление о том как будет работать будущий продукт, какую проблему решает/какую проблему удовлетворяет и каким образом. В качестве примера, ниже приведу несколько сценариев которые были написаны для данного проекта.

Создание макета

  1. После нажатия на кнопку "СОЗДАТЬ КНИГУ" сервис просит ввести логин профиля в Инстаграмм из которого будут браться фотографии. Алексей вводит свой логин, подтверждает его и переходит в конструктор книги.
  2. Перейдя в конструктор Алексей видит макет книги, часть подгруженных фотографий из указанного профиля, а также указатель количества страниц. По умолчанию количество страниц равно 20 но их количество можно увеличить до 80. Количество подгруженных фотографий равно 20 но их можно подгружать по мере необходимости. Также фотографии можно сортировать по следующим параметрам: все фото, за указанный период, по хеш-тегу.
  3. Для начала сервис предлагает выбрать фото для первой страницы обложки с уже выбранным по умолчанию макетом для неё. Сервис даёт возможность выбора шаблона из нескольких вариантов. Алексея не устраивает шаблон по умолчанию (одно фото на всю обложку ему кажется слишком простым) поэтому он выбирает вариант в котором можно разместить на обложке несколько фотографий и подбирает фотки для обложки.
  4. Затем Алексей замечает, что сервис даёт возможность выбрать шаблон который выглядит как мозаика используя выбранные случайным образом фотографии из профиля. Сначала Алексей хотел было выбрать этот вариант но решил оставить выбранный ранее так как ему хочется всё контролировать и не предоставлять право выбора случаю…
Это только один из ключевых сценариев, в идеале нужно описать все, что бы появилась полная картина.

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

Зачем: первый этап формирует вполне объективные критерии оценки по которым будет оцениваться конечный результат.
2. Дизайн взаимодействия
Для дизайнера на этом этапе важно действия пользователя превратить в элементы, такие как кнопки, чек-боксы, формы и т. п., определить какая информация нужна и в каком виде. В конце этого этапа дизайнер должен разработать макет будущего продукта низкого разрешения, то есть прототип.

Перечень основных шагов:

  1. Определить технические ограничения исходя из специфики продукта (сайт, приложение, программа и т. п.).
  2. Составить диаграммы потоков задач опираясь на ключевые пользовательские сценарии. Диаграмма отображает алгоритм работы, шаги которые должен пройти пользователь для достижения цели по каждому сценарию.
  3. Выявить и записать все сценарии использования ( ");">метод скоростной фиксации).
  4. Используя сценарии использования и диаграммы потоков задач составить информационную структуру продукта (разбивка по экранам/страницам).
  5. На основе сценариев, диаграмм потоков задач и структуры описать функционал и информационное наполнение для каждого экрана/страницы.
  6. Разработать прототип будущего продукта. Чем больше вариантов прототипов тем лучше.
  7. Провести эвристическую оценку интерфейса используя 10 эвристик Якоба Нильсена.
Технические требования и ограничения
Во время написания пользовательских сценариев мы даем нашей фантазии разгуляться и не принимаем во внимание технические требования и ограничения, по этому перед тем как приступить к прототипированию важно эти требования и ограничения обсудить с клиентом и выписать. В нашем случае получился такой список:

  1. Сервис должен хорошо работать на стационарных компьютерах и мобильных устройствах. Поэтому при проектировании нужно хорошо проработать сценарии работы на мобильных устройствах и учесть все нюансы. Интерфейс не должен быть перегружен графическими элементами для обеспечения быстрой загрузки.
  2. Сайт должен быть на двух языках: на русском и украинском.
  3. Мобильная версия разрабатывается под минимальное разрешение 320х480 таким образом, чтобы дизайн мог "растягиваться" на большие разрешения.
  4. Отзывы реализованы через систему Cacle. Нужно выводить последний отзыв на видном месте, где-то вверху. Пример:
  5. Необходимо предусмотреть загрузку фото в рабочую область редактора пакетами, т.к. у многих пользователей более нескольких тысяч фотографий. У юзера стопицоттыщ фото в аккаунте, проблемы которые могут возникнуть при подтягивании в редактор:
    - их прогрузка может вызвать батхерт и у юзера и у движка;
    - выбрать необходимые фото для размещения в книге из хотя бы 1000 — становится серьезной проблемой (протестировано).
    Решение: реализовать подгрузку фото порциями по мере прокрутки. Посмотреть примеры.
  6. Дизайн обложки в стиле "мозаика" (когда фон обложки состоит из маленьких фото). Могут быть проблемы если у юзера фото в аккаунте меньше чем требуется для заполнения всех ячеек.Решение: заполнять всю обложку фотографиями рандомно; если фоток меньше — дублировать, но при этом алгоритм должен следить чтобы одинаковые фотографии не стояли рядом.
На этом этапе могут всплыть о которых клиент не упомянул при описании задачи, или ваши идеи будет сложно реализовать. Надеюсь вам ясно почему этот шаг так важен.

Диаграмма потоков задач (User flow)
Диаграмма помогает лучше понять основные алгоритмы работы с продуктом. В моем случае получилась достаточно простая диаграмма в которой показаны ключевые этапы. Не все дизайнеры их составляют, все зависит от конкретного проекта.
Сценарии, структура, функционал и наполнение
Следующие этапы имеют условное разделение но по сути это один процесс. Суть его заключается в том, чтобы выписать все возможные сценарии взаимодействия и на основе этой информации получить структуру будущего продукта а так же описание функционала и наполнения для каждой страницы. В итоге мы получаем подробный документ который помогает получить ясную картину о том, сколько получится экранов и что на каждом экране должно быть.
Прототипирование
После того как у нас появилась ясная картина количества экранов и их содержимого можно перейти к созданию прототипа. Так как я занимаюсь проектированием и финальным дизайном для прототипирования я использовал Adobe Illustrator после чего все экраны были без проблем открыты в Adobe Photoshop и доведены до блеска. Вообще же для создания прототипов существует огромное количество инструментов и каждый дизайнер подбирает тот который лучше всего подходит под его задачи.
Перед тем как прорабатывать экраны на компьютере рекомендую для начала сделать несколько эскизов на бумаге, это помогает мыслить более творчески и прорабатывать несколько идей за короткий срок.
Карта навигации
После того как все экраны проработаны самое время выложить их в виде карты навигации. Карта дает возможность увидеть все связи и выявить недостающие экраны.
Важно: обязательно согласуйте прототип с клиентом и только после этого передавайте разработчикам. Имея сценарии, прототипы всех экранов и карту навигации программисты могут приступить к работе в то время как дизайнер начинает прорабатывать финальный дизайн.

Зачем: проработать несколько идей в виде прототипа и изменить их намного проще и быстрее чем править окончательный макет. По сути прототипы это черновики большая часть из которых пойдет в мусорную корзину.
3. Дизайн графического интерфейса
На этом этапе дизайнер прорабатывает графический интерфейс, по которому пользователи будут судить о продукте. Итогом этой работы являются макеты высокого разрешения с проработкой различных состояний элементов, анимации и т. д. Перечень основных шагов:

  1. Определить общее настроение и тон визуальной и текстовой коммуникации.
  2. Определить стиль визуального оформления.
  3. Проработать несколько вариантов графического оформления для ключевых экранов. Выбрать один и проработать все экраны.
  4. Подготовить графику для вёрстки и руководство для программистов.
  5. Проверить результаты работы программистов.
Основная идея
Для сайта который продает некий продукт самое важное показать этот продукт в лучшем виде, дать пользователю возможность рассмотреть его со всех сторон и пощупать. В нашем случае сайт продает фото-книгу по этому основной упор делался на качественные фотографии готового продукта, описание второстепенно и не должно занимать много места.
Тон, настроение
Для оформления я выбрал теплые тона и текстуру дерева для подложки. Все это должно вызывать ощущение мастерской в которой пользователь создает свою уникальную фото-книгу а элементы не должны отвлекать его от процесса.
Клиент сразу утвердил эту концепцию после чего я приступил к проработке всех экранов. Можно бесконечно описывать почему было выбрано то или иное оформление но, в основном, именно этот этап основан больше на интуиции и опыте дизайнера.
Важно: не прорабатывайте сразу все экраны, для начала сделайте несколько черновых вариантов которые позволяют понять вашу идею и обсудите их с клиентом.

После того как проработаны все экраны дизайнеру остается подготовить графику для верстки, проработать состояния для всех интерактивных элементов и передать это все разработчикам.
Будьте готовы к тому, что воплощенный в жизнь сайт может немного отличаться от того, что нарисовано у вас в макетах, и это нормально. Однако всегда стоит проверить работу верстальщиков/программистов и уточнить чем вызваны те или иные изменения.
Результат
Я спроектировал с нуля веб-сервис, который был успешно запущен и начал приносить доход бизнесу. Это тот результат, который и ожидал от меня клиент. До этого у меня были проекты, которые очень часто не были реализованы из-за того, что я не владел методологией проектирования а просто «рисовал» сайты, как художник-оформитель. Поэтому учите методологию, господа дизайнеры!
ИНТЕРАКТИВНЫЙ ОНЛАЙН-КУРС

DIGITAL PRODUCT DESIGN

В этом курсе собраны ключевые навыки и инструменты, которые позволяют проектировать интерфейсы для цифровых продуктов и работать на позиции UX Designer / Product Designer в крупной IT-компании, в небольшом стартапе, или на фрилансе
Made on
Tilda