Представляем Instapage 3.0: умнее, быстрее, смелее и просто лучше.

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

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

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

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

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

Удаление шума из пользовательского интерфейса Instapage

В Instapage мы верим в итеративный дизайн и в то, что работа над дизайном никогда не заканчивается — он постоянно развивается. Наш первый UI Kit был вдохновлен Material Design и хорошо служил нашему продукту, но со временем мы поняли, что первоначальный UI Kit не имел всех необходимых нам компонентов и был слишком ограничен для того, что создавал Instapage.

То, что вы видите сегодня с новым пользовательским интерфейсом Instapage, — это красивая история повторяющегося дизайна в наших усилиях по постоянному улучшению пользовательского опыта. Все началось с того, что наша реализация Material Design превратилась в переходную (и временную) систему проектирования. Мы назвали его « Кристалл », так как он должен был обеспечить большую ясность.

Crystal был нацелен на адаптацию Material Design к потребностям Instapage без слишком большого изменения языка дизайна. Это решило основную проблему — иметь все необходимые элементы дизайна, которые нам нужны, задокументировать и иметь фрагмент кода Angular. Мы начали работу в середине 2019 года и закончили в конце прошлого года, просто чтобы начать работу над последним шагом — нашим собственным визуальным языком под названием « Кристально чистый ».

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

Главный конструктор Улдис Лейтертс объясняет:

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

Мы надеемся, что первый выпуск Crystal Clear и последующие обновления будут постоянно улучшать взаимодействие наших клиентов с Instapage, продуктом, который мы любим создавать.

Что нового в пользовательском интерфейсе Instapage?

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

UX-копия

Наряду с переходным дизайном Crystal мы представили нашей талантливой команде дизайнеров UX-писателя. Instapage был создан инженерами, как и копия, которую вы видели. Это хорошо послужило нам, но также оставило место для совершенствования.

Например, в одном сообщении с пустым состоянием говорилось: «Ваша информационная панель одинока» — само по себе ничего плохого, но, возможно, это не лучший язык, подходящий для серьезного программного обеспечения для бизнеса, которое мы видим сами. С помощью Crystal Clear UX/Content Writer Instapage Матеуш Сохонь добился большей согласованности тона и сообщения. Как говорит Матеуш:

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

Новый стиль и цвета

Чтобы найти сбалансированный стиль интерфейса, повышающий производительность пользователей, мы обновили нашу цветовую палитру и стиль до нейтрального оттенка серого. Новая цветовая палитра менее декоративна, но гораздо более функциональна. Например, королевский синий зарезервирован только для действий, в основном кнопок CTA:

Тем не менее, хороший дизайн невидим, и команда черпала вдохновение у Дитера Рамса, который создал правила хорошего дизайна. Следуя принципам Рамса, команда обновила интерфейс, сделав его более вневременным.

До: Кристалл

Текущий: кристально чистый

Новая иерархия уровней и удаление теней

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

В нашем приложении существует четыре основных уровня:

• Уровень 0: служит фоном для всего остального контента.
• Уровень 1: Уровень, на котором отображается большинство компонентов.
• Уровень 2: позволяет прокручивать под ним элементы более низких уровней.
• Уровень 3: элемент наложения отображается поверх всех нижних уровней.

(Примечание: уровень Intermediate 1.5 — это уровень, содержащий все компоненты, которые отображаются над частью уровня 1, 2 или 3, но все же будут скрыты под более высоким уровнем. К таким компонентам относятся всплывающие подсказки, всплывающие окна, раскрывающиеся списки. Новое обновление убирает тень из промежуточного состояния. Она светлее и визуально однородна независимо от того, на каком уровне находится.)

Кроме того, мы узнали, что одним из факторов, поддерживающих чистоту пользовательского интерфейса, является минимальное использование теней. Исторически Material Design использовал тени для украшения, тогда как Instapage использует тени для разделения основных уровней, таких как наложение:

Последовательная, очерченная иконография

Во всем приложении вы заметите иконографию в меню, раскрывающихся списках и т. д. Новая иконография стала чище и проще:

Другая дистанционная сетка

За каждым интерфейсом лежит прочная основа, как структура, так и сетка. Было необходимо улучшить новую структурную сетку, а благодаря Crystal Clear в интерфейсе стало больше свободы действий, и пользователям стало проще сканировать:

Устранение закругленных углов

Это обновление более тонкое, но на него стоит обратить внимание, потому что команда дизайнеров считает, что устранение закругленных углов является более передовым:

Пользовательский интерфейс строителя

Вы можете увидеть, как новое обновление Crystal Clear реализовано в сборщике. Обратите внимание на палитру оттенков серого, за исключением изображений, кнопок CTA и логотипов:

Что мы узнали

Глава отдела разработки пользовательского интерфейса Лукаш Грондски рассказывает, как улучшилась команда и технологии. Кроме того, как инвестиции, которые мы сделали в 2016 году, окупились сейчас:

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

Для справки, в 2016 году мы переписывали все приложение на стороне интерфейса и реализовывали первую версию UI Kit. На выполнение задачи ушло более трех месяцев, в ней участвовало около десятка членов команды. Стоит также отметить, что само приложение было относительно небольшим по сравнению с сегодняшним днем. Теперь мы смогли развернуть полностью редизайн приложения Instapage без каких-либо серьезных проблем за один цикл разработки.

Оцените новый пользовательский интерфейс сами

Новая система дизайна Crystal Clear дает вам ясность в отношении того, что важнее всего — суть того, почему вы используете приложение Instapage. Мы хотим дать вам возможность сосредоточиться на задаче, на ежедневном использовании Instapage.

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