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

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

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

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

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

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

Удаление шума в интерфейсе Instapage

В Instapage мы верим в итеративный дизайн и в то, что работа над дизайном никогда не заканчивается - он постоянно развивается. Наш первый UI Kit был вдохновлен материальным дизайном и хорошо послужил нашему продукту, но со временем мы поняли, что в первоначальном 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 у интерфейса появилось больше пространства для дыхания, и пользователям было проще сканировать:

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

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

Builder UI

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

Что мы узнали

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

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

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

Оцените новый интерфейс сами

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

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