Как за одной картинкой стоит 2-ух недельная работа

История о том, как мы проектировали конструктор для создания переписок

Товарищ организует детские мероприятия. Для быстрого старта в Инстаграме ему потребовалось оформить отзывы. Клиентов было немного, а продукт хороший (выездная сахарная вата)

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

Телефон растягивается, когда сообщения не помещаются на экран https://fakedetail.com/fake-whatsapp-chat-generator

Мы решили сделать концепт конструктора для создания переписок по всем канонам проектирования: просто, понятно и удобно

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

Проблемы аналогичных сайтов:

Устаревшие Гайдлайны
Пользоваться конструкторами переписок неудобно, в силу неочевидного расположения ключевых функций сервиса
Функционал (за исключениями) ограничивался текстовыми сообщениями

Не спорю, кому нужно, сядет и разберется. Потратит время, но разберётся. Но речь в статье идёт про оптимальную картину пользовательского взаимодействия с сайтом. Есть проблема - устраняем

Проблемы выявили, переходим к проектированию сайта

Делаем ставку на последовательность и понятность функций сервиса

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

Проектируем интерфейс Сверху Вниз — Последовательность шагов пользователя на сайте:

Сверху панель навигации (выбор социальной сети — отправная точка)
Выбор ПО устройства
Рабочая область (Функционал + Что получается в процессе ). Важное отступление: Слева основной инструмент, справа - Второстепенный. Такой порядок был выбран из-за того, что пользователь читает и просматривает информацию Слева Направо, по важности. Предшествуют такому выбору и исследования Якоба Нильса (F-паттерн)
Целевое действие, Экспорт файла, находится в конце

Большую часть занимает инструмент и телефон

Все элементы должны помещаться по ширине экрана. Никакого скролла, это усложняет взаимодействие

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

Какие отзывы без картинок? В инструментарий конструктора мы добавили картинки, и для особых случаев — голосовые сообщения и звонки.

Как насчёт 5 айфонов? 5 Айфон используются за редким исключением, но Конкуренты продолжают использовать элементы старого ПО

Чтобы решить проблему, мы ознакомились с актуальными Гайдлайнами мессенджеров и ПО. В процессе проектирования начали формировать дизайн-систему, с расчётом на то, что при выходе обновлений, можно было быстро среагировать на изменения. Старые — удаляем, новые — обновляем