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

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

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

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

Захват новизны

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

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

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

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

Альтернативой было бы использование GiftRocket иллюстрированные значки в виде ссылок углубиться в сайт.

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

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

Снимаемая типография

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

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

1. Разделите контент с четкими субтитрами
2. Разбить параграфы сделать их меньше
3. Используйте маркированные списки поделиться своими очками быстрее

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

Посмотрите в блоге Quick Sprout пример такого стиля письма. Содержание написано Нилом Пателем, и он часто пишет очень длинное содержание, но он разбивает абзацы на 1-3 предложения каждое.

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

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

Привлекательные изображения

Недавнее исследование Бэклинко предполагает, что страницы по крайней мере с одним изображением в общем-то ранг выше чем страницы без изображений. Это здорово с точки зрения SEO.

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

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

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

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

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

Контрастные элементы страницы

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

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

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

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

Вы заметите подобная техника на домашней странице Optin Monster. Этот заголовок имеет только одну кнопку с надписью Get OptinMonster Now. Это ярко-зеленая кнопка на синем фоне, без других зеленых элементов..

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

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

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

Лучший способ создания контраста - это изучать примеры и просто экспериментировать. Посмотрите, что работает, а что нет отслеживание показателей с помощью A / B-тестирования. Если вы ищете больше примеров, ознакомьтесь с этой статьей Codrops, полной советов и экранов живых асимметричных веб-сайтов..

Поощрять взаимодействие с пользователем

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

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

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

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

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

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

Помимо экскурсии вы также захотите сделать интерфейс простым. Основные функции должны быть 1-2 клика с панели пользователя или главной страницы. Интуитивно понятные интерфейсы нужно объяснение, и простота привлекает внимание намного быстрее.

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

• Пользовательская тактика повышения заинтересованности (Thinkapps.com)
• Урок постепенного участия (Uxbooth.com)
• Не думайте, что новые пользователи хотят узнать, как использовать ваш продукт (Uxdesign.cc)