Какие показатели влияют на пользу интерфейса

Как выстроить баланс в дизайне интерфейсов коммерческих продуктов: 6 советов

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

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

Особенности дизайна коммерческих продуктов

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

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

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

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

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

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

Три важных параметра

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

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

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

Ассоциативность — очень мощный инструмент, который при правильном подходе помогает увеличить вовлечённость пользователей и решить коммерческие задачи. Если дизайнер сможет наполнить интерфейс правильными эмоциями, у продукта есть все шансы на успешное продвижение в нише.

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

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

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

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

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

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

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

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

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

Идеальный дизайн для коммерческого продукта передаёт правильные эмоции и быстро устанавливает связь с целевой аудиторией. Пользователи необязательно должны каждый день открывать приложение интернет-магазина. Если возникнет потребность что-то купить в интернете, и они вспомнят про него, значит, задача дизайнера и других членов команды выполнена на 100%.

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

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

Компании, которые не готовы подстраиваться под клиентов, постепенно приходят к тому, что работа в таком формате не принесёт пользы. Главный компонент формулы успешного продукта — довольные пользователи. Если люди почувствуют заботу, они могут простить мелкие ошибки и помочь усовершенствовать UI.

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

Почему баланс так важен

Известно, что баланс в дизайне влияет на user experience, но далеко не все дизайнеры и компании понимают, почему ему надо уделять внимание. Гармоничный интерфейс обеспечивает комфортное восприятие информации и помогает устанавливать связь с пользователями.

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

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

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

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

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

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

Споры по поводу симметрии и асимметрии не имеют смысла, так как оба подхода можно использовать с пользой для digital-продукта. Учёные доказали, что люди чаще всего стремятся к симметрии, но и асимметрия тоже может быть красивой. Всё зависит от подхода к разработке UI.

Существует радиальный, мозаичный баланс, зеркальная асимметрия и другие приёмы, которые могут приносить пользу и акцентировать внимание людей на конкретных объектах. У всех подходов есть общая черта — они актуальны только если не мешают комфортному использованию продукта.

Баланс в веб-дизайне сильно влияет на user experience, а он, в свою очередь, определяет, насколько активно аудитория будет использовать продукт, и пройдёт ли он проверку на жизнеспособность в цифровой среде.

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

Советы по созданию сбалансированного интерфейса

Баланс в интерфейсе — это не только визуальное равновесие, но и активная борьба с блоками, которые создаются только для красоты. Опытные дизайнеры советуют избавиться от всех элементов, которые не влияют на user experience и отодвигают от прохождения маршрута внутри интерфейса.

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

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

Используйте размер для выделения ключевых элементов

Чем больше объект, тем сильнее пользователи обращают на него внимание. Если сделать пустой блок слишком большим, люди не поймут, зачем дизайнер использовал такой приём. Размер помогает управлять вниманием, поэтому его надо использовать с умом.

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

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

Уделите внимание форме

Не все дизайнеры знают, что структура элемента влияет на баланс. Объекты неправильной форму выглядят более лёгкими. Это можно использовать для создания визуального равновесия. Например, сбалансировать разные формы, которые используются в одном интернет-магазине.

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

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

Поработайте над цветами

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

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

Выберите правильное расположение

Цвет, форма и другие атрибуты влияют на визуальный вес объектов, а размещение помогает уравновесить элементы с разным оформлением. Блоки, которые расположены ближе к центральной области более тяжёлые.

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

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

Подберите гармоничные текстуры

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

Текстуры надо использовать в соответствии с контекстом дизайна. Добавлять красивые узоры, чтобы украсить меню или карточку товара, не стоит. Любое визуальное средство должно работать на пользу продукта. Декор незначительно влияет на конверсию и другие метрики.

Используйте плотность для создания баланса

Размер — главный атрибут, который определяет визуальный вес объекта, но за счёт экспериментов с плотностью можно уравновесить элементы с разным масштабом. В галереях часто используют большую картинку, а сбоку размещают 2-3 поменьше.

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

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

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

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

7 факторов, которые имеют влияние на клиентский опыт

Клиентский опыт («User eXperience», далее – UX) – это ключ к успеху или провалу продукта на рынке. Но что именно мы подразумеваем под UX? Очень часто клиентский опыт путают с удобством использования продукта («usability»), который в некой степени описывает насколько удобен продукт для пользователя. И это правда, что UX, как самостоятельная дисциплина, начинался именно с удобства использования. Однако, UX уже вырос для того, чтобы объединить намного больше, чем только удобство и сейчас очень важно уделить внимание всем аспектам UX для успешного введения продукта на рынок.

Ниже можно ознакомиться с 7 факторами влияния на UX от Питера Морвилла (Peter Morville), пионера UX сферы, который написал несколько бестселлеров и советов многим компаниям из рейтинга Fortune 500:

• Польза;
• Удобство использования;
• Легкость в поиске;
• Доверие;
• Желанность;
• Доступность;
• Ценность.

Давайте рассмотрим отдельно каждый фактор и какое он имеет влияние на UX в целом.

Польза

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

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

Удобство использования

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

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

Легкость поиска

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

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

Доверие

Рэндел Терри (Randal Terry) говорил: «Обмани меня раз – позор тебе. Обмани второй – позор мне». Современные пользователи не дадут вам второй шанс обмануть их – сейчас существует множество вариантов в каждой сфере деятельности, где они могут выбрать действительно надёжного поставщика продуктов.

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

Практически невозможно передать UX, если пользователь считает, что продукт создал лжец или даже клоун с плохими намерениями. Пользователь легко найдёт нужное в другом месте.

Желанность

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

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

Доступность

К сожалению, создание доступности продукта часто теряется в процессе создания UX. Доступность — это о предоставлении опыта с полным спектром способностей для всех пользователей. Что важно, он включает тех, кто не совсем дееспособный в некоторых аспектах, таких как: потеря слуха, нарушение зрения, нарушения движения или проблемы с обучением.

Деятельность по улучшению доступности часто рассматривается как потеря денег, потому как создается впечатление, что люди с ограниченными возможностями составляют очень маленький сегмент населения. Но, что известно, в США, по меньшей мере 19% людей имеют инвалидность согласно с данными переписи населений и, что вероятней всего, это число выше в менее развитых странах.

Это значит, что 1 из 5 людей в целевой аудитории вашего продукта не сможет его использовать, если он не будет для него доступен. А это 20% от общего рынка.

Стоит заметить, что когда вы занимаетесь доступностью, вам часто нужно вспоминать, что вы создаете продукт, который должен быть простым в использовании для каждого, а не только для людей с ограничениями. Не пренебрегайте доступностью в UX.

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

К сожалению, это обязательство не соблюдается так часто, как должно быть.

Ценность

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

Дизайнеры должны всегда помнить, что ценность – это один из факторов влияния на решение о покупке. Продукт за 100$ который решает проблему на 10000$ вероятнее всего будет успешным; и наоборот – вероятность успеха продукта, стоимостью 10000$, который решает проблему на 100$ очень низка.

Забери с собой:

Успех продукта зависит не только от пользы и удобства использования. Продукты, которые удобны в использовании, полезны, легки в поиске, доступные, внушают доверие, ценны и желанны – вероятнее всего будут успешными на рынке.

Рекомендации:

Результаты переписи населения США по инвалидности:

Оригинальную работу Питера Морвила (Peter Morville) по 5 аспектам UX можно найти по ссылке ниже:

Получите бесплатно 3 месяца обучения на самой престижной в мире платформе для UX-дизайнеров

Как простой дизайн сайта влияет на пользовательский опыт

Интерфейс должен быть не только красивым, но и понятным. Мы уже рассказывали о балансе между user experience и бизнес-целями. Главным критерием оценки качества интерфейса является пользовательский опыт. Дизайнеру надо спроектировать идеальный UI с точки зрения удобства и юзабилити, а заказчик должен правильно донести свои идеи.

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

Что такое простой дизайн

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

Простоту и минимализм часто путают. Эти характеристики связаны между собой, но не являются синонимами. Один из атрибутов минималистичного интерфейса — простота. В статье о минимализме мы подробно разбирались в особенностях проектирования продуктов разного назначения. Воспользуйтесь нашими советами, чтобы узнать о том, как создавать минималистичные UI.

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

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

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

Отличный пример, который иллюстрирует многогранность простых интерфейсов — официальный сайт мобильного оператора Life. Для белорусского филиала сделали крутой UI в стиле брутализма. Дизайн получился необычным, цепляющим и простым одновременно.

Многие дизайнеры думают, что простота — синоним пустоты. Когда в интерфейсе нет ничего, кроме текста и медиаконтента. Еле заметное меню, блоки с товарами и несколько call to action. Это популярный миф, который давно пора разрушить.

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

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

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

Характеристики простого интерфейса

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

Минимализм

Перегруженные интерфейсы никому не нравятся. Они снижают вовлечённость и приносят меньше конверсий по сравнению с более лёгкими аналогами. В нашем сленге недавно появилось слово «лайтовый», которое идеально подходит для описания минимализма. Лайтовый интерфейс — идеально отлаженный механизм под конкретную аудиторию.

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

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

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

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

Привлекательность

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

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

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

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

Люди покупают машины или смартфоны не из-за красивого интерфейса, а потому что потратили много часов на поиск идеальной модели. Задача UI — провести «за руку» до выполнения целевого действия. С такими глобальными покупками, как машина или смартфон, пользователь вряд ли резко поменяет решение из-за недостатков интерфейса, но негативные впечатления будут ассоциировать с компанией.

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

Эффективность

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

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

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

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

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

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

Соответствие контексту

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

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

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

Когда у пользователей возникает диссонанс при знакомстве с новым интерфейсом, положительных результатов ждать не стоит. Это всё равно, что найти в магазине продукт со скидкой, а на кассе окажется, что он стоит в два раза дороже. Впечатление испорчено, а вместе с ним и мнение клиента о компании.

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

Согласованность

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

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

Представьте, что в левой части вместо упоминания о вкусах разместили нерелевантный текст. Например, рассказали про удивительные свойства банки. Она гладкая на ощупь и не вызывает раздражение. Покупателей интересует не ёмкость, а напиток. Банка для них — всего лишь инструмент, который позволяет наслаждаться любимой колой.

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

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

Интуитивность

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

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

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

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

Доступность

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

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

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

Преимущества простого веб-дизайна

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

Сильные стороны:

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

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

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

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

Почему так сложно сделать хороший пользовательский интерфейс?

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

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

Возвращаясь к кнопкам, вот часть того интерфейса, который я наблюдал сегодня на заправке:

Слева находится кнопка топливного насоса, которая позволяет выбрать наиболее популярный сорт бензина в Соединенных Штатах. Справа — кнопка для выбора менее популярного и более дорогого сорта бензина. Эрозию слева можно рассматривать как показатель частоты и места нажатия кнопки. Ясно, что люди, которые нажимали на кнопку слева, хотели бы видеть её более крупной, чем предлагаемая им область «Push Here» («Нажать Сюда»).

Давайте изменим этот интерфейс, но при этом сохраним его суть:

• «GRADE SELECT» (выбор сорта) преобразованно в менее шумное «Grade Select».
• «Grade Select» — удалили лишнее подчёркивание снизу.
• Удалили лишний текст «Grade Select».
• Удалили табы с текстом «Grade Select».
• Увеличили размеры кнопки и добавили низкоконтрастный бордюр.
• Уменьшили контрастность надписи «Push Here» («Нажать Сюда»).
• Увеличили контрастность между текстом Regular, Plus и фоном.

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

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

Но всё-таки клавиша пробел выжила, она крупная и её легко нажимать любым из больших пальцев. И поэтому мне эта клавиша очень нравится.

Несколько примеров

Представим, что вам нужно добраться до того перекрёстка справа. Какой путь вы предпочтёте?

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

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

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

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

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

Также эти горизонтальные и вертикальные направления не согласованы и требуют некоторой ментальной тренировки для того, чтобы к ним привыкнуть. Кроме того, визуальный вес (форма, размер, контраст) этих кнопок идентичен практически всем остальным элементам управления на этом пульте, включая редко нажимаемые клавиши, отмеченные как Language (Язык) и Clock (Часы).

Вы находитесь в лифте N-терминала в аэропорту Сиэтла. Вам нужно попасть на ваш самолет. В лифте есть три кнопки для выбора пункта назначения:

• CONCOURSE (CC)
• RAMP (*R)
• TRAIN (TRN)

Какую клавишу вы нажмёте? Вон та кнопка RAMP (трап) со звездочкой напротив выглядит чрезвычайно манящей. В конце концов, я должен пройти по трапу, чтобы попасть в самолет. И разве не звёздочки используют на кнопках лифта для обозначения главного этажа или холла? И зачем нужен CONCOURSE (главный зал аэропорта)? Мне нужно пройти к моему посадочному выходу, который должен быть расположен внутри терминала.

Вот более полная фотография этого пульта управления лифтом:

Очевидно, была большая неопределённость между уровнем RAMP (некоторый скрытый средний уровень, где пассажиры бы не хотели оказаться) и уровнем CONCOURSE (где вы можете произвести посадку на самолет). Вероятно по этой причине добавили физические эквиваленты всплывающих подсказок, обычно используемых в компьютерных программах. Конечно же, такие подсказки совершенно невидимы для слепых людей, которые более вероятно будут толпиться на этаже, отмеченном *R.

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

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

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

«Это дебетовая карта?»

Конечно же, я не могу продолжить операцию, пока не отвечу на этот вопрос. Ну я, вообще-то, использую кредитную карточку, а не дебетовую, поэтому знаю, что ответ нет. Однако в тот момент мне не было ясно, как я должен сообщить этот ответ компьютеру.

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

Следует также упомянуть, что вопрос (например «Дебетовая карта?») меняется от заправки к заправке — иногда компьютер хочет знать использую ли я кредитную карту, иногда просит меня найти кнопки Credit (Кредитная) и Debit (Дебетовая) и нажать правильную.

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

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

Плохо спроектированный интерфейс пользователя действует на экономику как сила трения. Сколько это стоит? Ну давайте начнём с умножения этих 10 секунд на миллионы транзакций, которые обрабатываются каждый день на всех этих компьютерах, и вы получите картину огромной растраты времени. Умножьте это время на среднюю зарплату людей и вы получите цену такого решения.

Так зачем же вообще этот вопрос о дебетовой карте? Лично я никогда не ношу с собой дебетовых карт. Для меня ответ всегда один и тот же. Ну один и тот же, если вопрос не меняется от компьютера к компьютеру. И, конечно же, мы живем в мире, где компьютеры могли бы идентифицировать сами (на заправке, в банке и т.д.), к какой категории относится моя карта.

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

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

В следующей статье мы с вами рассмотрим понятие «ясности» (clarity) интерфейса.

• пользовательский интерфейс
• UI
• юзабилити
• юзабилити интерфейсов