Connect with us

Дизайн и прототипирование

Почему вам стоит бояться призрачных кнопок

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

Анна Гуляева

Опубликовано

/

     
     

Введение: что такое призрачные кнопки?

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

Призрачные кнопки – кнопки с контуром без цветной заливки – стали достаточно популярны. Они так называются из-за своей прозрачной природы — так как у кнопок нет заливки, они выглядят просто как фон (обычно это фотография). Каждый раз, когда я их вижу, я задаюсь вопросом: дизайнеры провели A/B-тестирование кнопок? Может быть дело в моем опыте в оптимизации конверсии, может быть в повсеместности этих кнопок. Но в любом случае, у меня с ними проблема.

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

Откуда появились призрачные кнопки?

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

1984 — Apple выпускает первый Macintosh

Первый Macintosh представил графический интерфейс (GUI) широкой публике. Он использовал концепцию бумаги для файлов, папок — для контейнеров, содержащих эти файлы, и каталог файлов — для группы контейнеров. В 1984 компьютеры были новинкой, они были редкостью в домах. Используя эти визуальные метафоры, пользователи могли преодолеть когнитивный барьер между цифровым и физическим объектами.

Apple использовали подход скевоморфизма, когда дизайнер стилизует цифровые инструменты и концепции с оглядкой на их копии из реального мира. Например, ранние версии приложения “Заметки” были похожи на реальные желтые блокноты. Визуальная метафора должна была помочь новым пользователям понять, как использовать приложение, которое было просто цифровой версией желтого блокнота для записей.

2001 — команда в Razorfish запускает первый сайт, который адаптируется под экран пользователя, audi.com

2004 — Кэмерон Адамс создает пример макета, зависимого от разрешения

2007 — выход первого iPhone

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

2008 — каждый второй человек в мире имел мобильный телефон

2010 — выход первого iPad

2010 — Итан Маркотт создал термин “адаптивный веб-дизайн” (Responsive Web Design)

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

Плоский дизайн

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

Когда мы начали видеть призрачные кнопки?

Мы начали видеть призрачные кнопки в 2014. Стал популярным Tumblr-блог под названием websiteswithghostbuttons, а Дэниел Клоппер впервые написал твит о призрачных кнопках.

Некоторые считают, что призрачные кнопки происходят из head-up display-дизайна (HUD-интерфейс должен давать информацию, не ограничивая поле обзора летчика или водителя). Сложно сказать, откуда именно появились призрачные кнопки, но мы можем рассмотреть некоторые из ранних примеров.

С релизом Windows Phone 7 и Windows 8 Microsoft представила дизайн-систему под названием Metro. Она включала в себя использование ярких цветов, простых шрифтов и призрачных кнопок.

Среди всех первопроходцев, самое большое влияние на тренд оказал релиз iOS 7. В этой статье Apple подчеркнула, что пользовательские интерфейсы должны быть “ненавязчивыми и уважительными” и они должны “отступать, выделяя ваш контент”, а не соревноваться с ним. Немногие люди сегодня поспорят с философией Apple: контент должен быть самым важным элементом, а интерфейс должен его поддерживать.

Как дизайнеры используют призрачные кнопки?

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

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

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

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

Последствия использования призрачных кнопок

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

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

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

Разборчивость: Если кнопка помещена на богатом по содержанию изображении или видео, пользователю может быть сложно понять, что написано на кнопке.

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

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

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

В другом тесте сайт ConversionXL обнаружил 20% снижение количества кликов (на основании 10 тысяч посещений), проверяя следующие изображения:

Nielsen Norman Group недавно выпустила исследование, в котором сделала вывод, что “плоские UI-элементы привлекают меньше внимание и создают неуверенность”. В исследовании NNG обнаружила, что пользователи проводили на 22% больше времени на сайтах со слабыми обозначениями – на сайтах, на которых не было понятных кнопок и ссылок. Так как предметом исследования была видимость элементов, пользователям надо было завершить задачу как можно быстрее. Больше времени на странице — больше когнитивной нагрузки для пользователя.

Уже появились реакции на публикацию исследования NNG, в которых говорится, что исследование было направлено не совсем на плоский дизайн. Шон Декстер из Cigna написал статью под названием “Плоский дизайн: почему вам стоит задать вопросы исследованию NNG о модном стиле”. В своем тексте он отмечает, что один из самых наглядных примеров в исследовании сравнивает кнопку с заливкой и призрачную кнопку – изучает контраст, а не плоский дизайн. Проблема с этим наблюдением заключается в предположении, что призрачные кнопки являются другой проблемой, не связанной настолько тесно с плоским дизайном. Аргумент о том, что исследование NNG было сосредоточено главным образом на слабых и сильных обозначениях, а не на плоском дизайне, не лишен смысла. Но я не думаю, что будет преувеличением сказать, что многие реализации плоского дизайна пострадали от недостатка контраста.

Пример из исследования NNG

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

Следующие шаги: Осмысленный дизайн

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

  1. Используйте призрачные кнопки как вторичные призывы к действию
  2. Подумайте о контрасте, ясности и разборчивости
  3. Больше постоянства
  4. Тестируйте, тестируйте, тестируйте!

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

Дизайн ориентированных на данные интерфейсов

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

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

30 UI-китов для iOS-разработчиков

Соосновательница Flawless App Лиза Дзюба поделилась полезными наборами с готовыми интерфейсами iOS-приложений.

Анна Гуляева

Опубликовано

/

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

Стандартные UI-киты

Design+Code iOS 11 UI Kit —  Sketch-набор, который содержит стили текстов, вложенные символы с изменяемыми размерами и набор компонентов в темной теме. Название каждого компонента соответствует документации Apple.

iOS 11 Screens & Components — огромная коллекция ключевых компонентов iOS 11 и более 60 экранов, доступна для Sketch и Figma.

iOS 11 GUI for Sketch App — набор содержит 22 экрана, 10 клавиатур, векторные элементы и формы, доступные в формате Sketch.

iOS 11 iPhone GUI by Facebook — полный набор файлов для Origami, Sketch и Photoshop от команды Facebook.

UI-киты для социальных приложений

Bronze UI Kit — простой и изменяемый набор с формами регистрации, входа, профилем пользователя, экранами блога и шаблонами для статей. Доступен в формате Photoshop и подходит не только для iOS.

Mail UI Kit — новейший кроссплатформенный набор от InVision, который подойдет для десктопа, смартфона, планшета и умных часов, доступен в Sketch и Photoshop.

Snap UI Kit — UI-кит от сотрудников Marvel, включающий более 50 экранов и большое количество элементов в формате файлов для Sketch. Подойдет для создания приложения с фото.

UI-киты для приложений про путешествия

Travel App UI Kit — более 15 экранов для входа, просмотра информации о месте, фотографий, карты и многого другого.

Navigo UI Kit — UI-кит для приложения про поездки с социальными профилями, в котором находится 60 экранов, организованных в 6 категорий. Набор сделан в формате Adobe XD.

Travel Guide App UI Kit — это не совсем набор элементов, а концепция реального приложения, которое оптимизировано для iPhone X, чтобы показать наилучшее использование фильтра локаций и карт.

Travelisto UI Kit — UI-набор для Sketch с более чем 22 экранами в векторном формате.

Harmony UI Kit — концепция основанного на локации мобильного приложения для того, чтобы искать и оценивать места для прогулок вокруг вас.

UI-киты для приложений с рецептами

Delicious UI Kit — набор включает 11 экранов в формате Sketch.

iOS Recipes App UI Kit — отличный набор с 11 экранами для приложения о готовке в формате Sketch.

1357 Recipe App UI Kit — современный и элегантный набор с 25 базовыми экранами.

UI-киты для чатов и мессенджеров

Mochi — Chat UI Kit — милый набор для мобильного чата с экранами для входа, регистрации, списков чатов, контактов и других.

iOS WeChat UI Kit — этот UI-кит включает в себя множество элементов и взаимодействий для главного китайского приложения WeChat, доступных на английском и китайском.

Messenger Platform Design Kit — официальный набор для бота Facebook Messenger.

UI-киты для eCommerce

Minimal Chic Kit стильный UI-кит для приложения о продаже с экранами страниц категорий товаров и самих товаров, доступных в формате Adobe XD.

Portal freebie — пример приложения, сделанного в Sketch.

Wilhelm iOS UI Kit — набор с изменяемыми экранами в Sketch, которые подойдут не только для продаж, но и для социального приложения.

Helen UI Kit — профессионально разработанный набор пользовательских интерфейсов для Sketch и Photoshop, организованных в более чем 11 экранов.

Mcommerce UI Kit —  набор стильных пользовательских интерфейсов для продаж с более чем 120 экранами, созданными для Sketch.

Другие UI-киты

iOS 11 Place UI Kit — если вы планируете сделать мобильное приложение в ARKit, вы можете использовать набор пользовательского интерфейса, который содержит 22 экрана для iOS 11 и векторные значки (в бесплатной версии).

Movies App UI Kit — красочный набор, который включает более 30 экранов с полностью настраиваемыми макетами и слоями для Sketch.

Wonep Calling App — довольно крутой набор для создания приложения для совершения международных звонков.

Banking UI Kit — аккуратный набор для пользовательского интерфейса банка для Sketch с 50 экранами.

Real Estate App UI Kit — UI-кит для создания приложения о недвижимости с 25 элементами, организованными в 8 страниц в формате Sketch.

DO UI Kit — набор для приложения для заметок с более чем 130 экранами, 10 темами, в котором есть все нужное в форматах для Sketch, Photoshop и Craft.

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Дизайн-перемена: воркшопы дизайнеров Яндекса в 10 городах страны

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

Леонид Боголюбов

Опубликовано

/

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

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

В этом году компания решила попробовать новый формат — его назвали «Дизайн-перемена». Теперь не слушатели поедут к преподавателям, а преподаватели к слушателям. Этой весной ведущие дизайнеры Яндекса проведут бесплатные однодневные воркшопы в десяти городах страны: Воронеже, Екатеринбурге, Иркутске, Казани, Калининграде, Красноярске, Новосибирске, Ростове-на-Дону, Самаре и Ярославле. Воркшопы состоятся в субботние дни в апреле-мае; точное расписание можно посмотреть на сайте «Дизайн-перемены».

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

Чтобы принять участие в воркшопе, нужно зарегистрироваться и выполнить тестовое задание. Для этого потребуется опыт работы в веб-дизайне, пусть даже небольшой. Задания можно присылать до 20 марта. Претенденты, которые успешно прошли отбор, получат приглашение на воркшоп по почте.

Комментарии
Продолжить чтение

Дизайн и прототипирование

12 “да” и “нет” веб-дизайна

Список советов и распространенных ошибок от Ника Бабича.

Анна Гуляева

Опубликовано

/

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

Сначала “да”

1. Сохраняйте интерфейс последовательным

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

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

2. Создайте простую навигацию

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

Советы:

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

3. Измените цвет открытых ссылок

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

4. Сделайте страницы читабельнее

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

Советы:

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

  • Учтите естественные паттерны чтения. Люди в западных странах читают слева направо и сверху вниз. Сайты с хорошим дизайном обычно представляют контент в форме букв F или Z.
  • Используйте сетку, которая сделает чтение и понимание информации проще.

5. Отнеситесь к контенту серьезно

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

Советы:

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

6. Проверьте сайт на ошибки

Отличную работу легко испортить маленькой ошибкой. Проверьте сайт на эти распространенные проблемы:

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

7. Сократите количество вариантов выбора

Количество вариантов влияет на решения людей: чем больше у людей выбора, тем меньше действий они совершают. Чтобы увеличить шансы на взаимодействие, сократите количество вариантов выбора.

8. Вовлеките пользователей в скроллинг

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

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

9. Подписывайте кнопки в соответствии с их функциями

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

Не заставляйте людей задумываться, что делает элемент.

10. Вещи должны выглядеть согласно своей функции

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

11. Сделайте сайт отзывчивым

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

Советы:

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

12. Протестируйте дизайн

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

Совет: смотрите на аналитику. Веб-аналитика — это мощные инструменты, которые помогут вам найти разделы сайта, к которым нужно дополнительное внимание.

А теперь “нет”

1. Не заставляйте пользователей ждать загрузки содержимого

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

Советы:

  • Не показывайте во время загрузки пустые страницы. Если загрузка займет какое-то время, покажите часть контента с каким-либо индикатором загрузки.
  • Оптимизируйте изображения. Большие фоновые изображения могут потребовать много времени на загрузку. Вы можете сократить это время, оптимизировав изображения.
  • Измерьте производительность сайта. Инструменты PageSpeed Insights и Think With Google не только помогут вам найти проблемы с производительностью, но и предложат возможные решения.

2. Не открывайте внутреннюю ссылку в новой вкладке

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

3. Не используйте слишком много шрифтов

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

4. Не используйте слишком много цветов

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

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

5. Не показывайте автоматические всплывающие окна слишком рано

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

Первая вещь, которую пользователи видят на сайте The New York Times

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

6. Не используйте неискренние фотографии людей

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

7. Не позволяйте рекламе украсть внимание

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

8. Не воспроизводите фоновую музыку и видео со звуком

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

Совет: дайте пользователям контроль. Установите музыку на беззвучный режим по умолчанию, но разрешите пользователям включать её по клику — создайте кнопки play и pause для аудиоконтента.

Видео в Facebook воспроизводится автоматически, но без звука

9. Не нарушайте скроллинг

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

Страница входа в Tumblr нарушает скроллинг

10. Не используйте горизонтальную прокрутку.

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


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

11. Не жертвуйте удобством ради красоты

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

Совет: проверьте показатель контрастности. Инструменты вроде Color Contrast Checker поможет вам проверить контраст цветов за несколько кликов.

12. Не используйте мигающий текст и рекламу

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

Итог

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

5 тенденций в мобильном дизайне на 2018 год

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

Джей лаб

Опубликовано

/

Автор:

1. Простота

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

2. Анимационные жесты

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

3. Короткие видео

В течение последних 15 лет средний уровень концентрации внимания человека резко снизился. С возросшим в 2017 году преобладанием видеоконтента, разработчики должны адаптировать и более четко представлять визуальные материалы брендов. Оптимальным вариантом будут короткие 6-15-секундные видеоролики. Возможность адаптации более длинного видеопотока (от 30 до 60 секунд) в более удобоваримую версию будет иметь ключевое значение для эффективной реализации этой тенденции.

4. Материальный дизайн

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

5. Яркие цвета

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

Ультрафиолет стал цветом 2018 года: что он значит?

Комментарии
Продолжить чтение

Постеры для разработчиков

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.