О важности веб-дизайна
User Experience (UX) и User Intefrace (UI) - что это такое?
UX (User Experience) — что это такое?
UX (User Experience — Дизайн взаимодействия с пользователем), представляет собой дизайн, направленный на максимальное удовлетворение потребностей пользователя, который использует ваш веб-сайт, магазин или продукт. При разработке в соответствии с UX вы делаете упор на то, чтобы функциональность и удобство использования вашего продукта приносили получателю как можно больше положительных эмоций, будь то через понятный интерфейс или через интуитивно понятную навигацию на веб-сайте.
Среднестатистическому пользователю достаточно 10 секунд на сайте, чтобы принять ключевое решение — остаться юзать дальше или уйти и больше не вернуться... Это особенно важный момент, который необходимо учитывать на конкурентном рынке. Первое впечатление не обязательно должно вызывать WOW-эффект, оно должно заинтересовать потенциального клиента вашим сайтом, а значит — вашим бизнесом и вашими продуктами. Вот почему так важен продуманный дизайн веб-сайта.
Это кажется очевидным, потому что при разработке данного продукта вы всегда хотите, чтобы пользователю он был предоставлен наилучшим образом, но проектирование в соответствии с пользовательским опытом очень сильно фокусируется на этом аспекте. Это связано с тем, что ответственный дизайнер UX, прежде чем приступить к созданию каких-либо эскизов или прототипов Lo-Fi продукта, должен сначала заметить и определить проблему, которую он хочет решить с помощью своего продукта. Затем он должен проанализировать рынок и конкуренцию, узнать ожидания потенциальных будущих покупателей продукта. Только тогда, после многих этапов исследования, интервью и опросов, дизайнер может создать первые очертания продукта, желаемого получателями.
Это кажется очевидным, потому что при разработке данного продукта вы всегда хотите, чтобы пользователю он был предоставлен наилучшим образом, но проектирование в соответствии с пользовательским опытом очень сильно фокусируется на этом аспекте. Это связано с тем, что ответственный дизайнер UX, прежде чем приступить к созданию каких-либо эскизов или прототипов Lo-Fi продукта, должен сначала заметить и определить проблему, которую он хочет решить с помощью своего продукта. Затем он должен проанализировать рынок и конкуренцию, узнать ожидания потенциальных будущих покупателей продукта. Только тогда, после многих этапов исследования, интервью и опросов, дизайнер может создать первые очертания продукта, желаемого получателями.
UX (User Experience) — из чего он состоит?
UX изучает эмоции, которые сопровождают пользователей при просмотре веб-сайта, и речь идет не о визуальном аспекте, а о том, вызывает ли просмотр и навигация по веб-сайту чувство усталости, раздражения и разочарования. Хороший UX интуитивно понятен и прост в использовании для потенциального покупателя вашей услуги или продукта.
Правильно спроектированная UX, с точки зрения веб-дизайна, включает в себя такие элементы, как:
1. Информационная архитектура
Это подходящая компоновка количества и последовательности представлений и их компонентов. Другими словами, дизайнер должен разделить контент, представленный на странице, на наиболее важный, менее важный и дополнительный и расположить его таким образом, чтобы вся самая важная информация была легко доступна и хорошо видна каждому посетителю страницы.
2. Пользовательский интерфейс
Этот элемент тесно связан с информационной архитектурой, потому что в предыдущем подразделе говорилось о месте, где должна быть размещена наиболее важная информация, а в этом — о способе представления этого контента. Например, если в первом подпункте говорилось о меню страницы, которое должно быть вверху всей страницы, на этом этапе вы должны подумать, в каком стиле или цвете оно должно быть представлено.
3. Разработка взаимодействий
Он заключается в разработке всех действий, которые будут иметь место в результате действий, предпринятых пользователем. Продолжая пример с меню, на этом этапе вы должны рассмотреть, какие изменения произойдут на странице, когда пользователь щелкнет данный пункт меню, какая анимация должна произойти, если подменю развернуть?
4. Коммуникация
Каждый разработанный веб-сайт способен визуально «общаться» (сообщать о своем создателе), нравится вам это или нет. Плохо оформленный — он говорит о непрофессионализме, хороший — совсем наоборот. Итак, давайте постараемся сделать так, чтобы создаваемый вами дизайн вселял в пользователей уверенность в том, что вы заслуживаете доверия. Кроме того, ваш веб-сайт должен быть легко читаемым и передавать контент понятным для получателя способом.
5. Проблема исследования
Как упоминалось ранее, наиболее важным элементом UX-дизайна является определение проблемы, которую вы хотите решить, представив свой продукт (товар). Поэтому очень важно постоянно контролировать его работу после любых изменений на вашем веб-сайте и задавать себе вопрос: «Соответствует ли он по-прежнему своим предположениям?»
6. Техническая сторона
UX-дизайн очень обширен на стадии проектирования, вы должны позаботиться о многих аспектах — исследовательская проблема, информационная архитектура, графический стиль, дизайн взаимодействия. Однако пользовательский опыт не заканчивается выпуском окончательной версии продукта (веб-сайта), он выходит далеко за рамки этого пункта, потому что не менее важно продолжать контролировать функционирование вашего продукта. Вы должны регулярно анализировать и интерпретировать поведение получателей и соответствовать их ожиданиям.
Правильно спроектированная UX, с точки зрения веб-дизайна, включает в себя такие элементы, как:
1. Информационная архитектура
Это подходящая компоновка количества и последовательности представлений и их компонентов. Другими словами, дизайнер должен разделить контент, представленный на странице, на наиболее важный, менее важный и дополнительный и расположить его таким образом, чтобы вся самая важная информация была легко доступна и хорошо видна каждому посетителю страницы.
2. Пользовательский интерфейс
Этот элемент тесно связан с информационной архитектурой, потому что в предыдущем подразделе говорилось о месте, где должна быть размещена наиболее важная информация, а в этом — о способе представления этого контента. Например, если в первом подпункте говорилось о меню страницы, которое должно быть вверху всей страницы, на этом этапе вы должны подумать, в каком стиле или цвете оно должно быть представлено.
3. Разработка взаимодействий
Он заключается в разработке всех действий, которые будут иметь место в результате действий, предпринятых пользователем. Продолжая пример с меню, на этом этапе вы должны рассмотреть, какие изменения произойдут на странице, когда пользователь щелкнет данный пункт меню, какая анимация должна произойти, если подменю развернуть?
4. Коммуникация
Каждый разработанный веб-сайт способен визуально «общаться» (сообщать о своем создателе), нравится вам это или нет. Плохо оформленный — он говорит о непрофессионализме, хороший — совсем наоборот. Итак, давайте постараемся сделать так, чтобы создаваемый вами дизайн вселял в пользователей уверенность в том, что вы заслуживаете доверия. Кроме того, ваш веб-сайт должен быть легко читаемым и передавать контент понятным для получателя способом.
5. Проблема исследования
Как упоминалось ранее, наиболее важным элементом UX-дизайна является определение проблемы, которую вы хотите решить, представив свой продукт (товар). Поэтому очень важно постоянно контролировать его работу после любых изменений на вашем веб-сайте и задавать себе вопрос: «Соответствует ли он по-прежнему своим предположениям?»
6. Техническая сторона
UX-дизайн очень обширен на стадии проектирования, вы должны позаботиться о многих аспектах — исследовательская проблема, информационная архитектура, графический стиль, дизайн взаимодействия. Однако пользовательский опыт не заканчивается выпуском окончательной версии продукта (веб-сайта), он выходит далеко за рамки этого пункта, потому что не менее важно продолжать контролировать функционирование вашего продукта. Вы должны регулярно анализировать и интерпретировать поведение получателей и соответствовать их ожиданиям.
UX vs. UI. Что такое UI?
UI (User interface - Дизайн пользовательского интерфейса) — это набор методов, стилей, решений и других средств выражения, задача которых — разработать удобный и эстетичный интерфейс. Пользовательский интерфейс занимается дизайном всех визуальных элементов, которые служат и облегчают управление, навигацию и запуск соответствующих системных действий. На веб-сайте это будут, например, кнопки, меню, галереи, формы, а также макет текста или выбор соответствующих цветов. Короче говоря, UI - это все, что вы видите.
Часто страницы бывают похожи друг на друга — меню вверху, логотип в верхнем левом углу, фото товара, информационные разделы и нижний колонтитул. Иногда вы встречаете контактную форму, иногда информационный бюллетень и почти всегда раздел с кнопкой, которая запускает основное действие на веб-сайте. Это повторение (сходство) связано с простым правилом — при разработке пользовательского интерфейса следует учитывать привычки пользователей. Конечно, никто никому не запрещает нарушать господствующие тенденции и правила. Однако это должно быть сделано вдумчиво и лучше всего подкреплено соответствующим анализом.
Часто понятие пользовательского опыта (UX) путают с пользовательским интерфейсом (UI) — это большая ошибка. Да, термины связаны, но они основаны на совершенно разном подходе к дизайну.
Как вы уже знаете, UX-дизайнер в основном отвечает за психологические аспекты разрабатываемого продукта и в гораздо меньшей степени отвечает за чисто визуальную сторону. Его задача состоит в том, чтобы конечный продукт был наилучшим образом воспринят пользователями — он гарантирует, что, например, веб-сайт будет читаемым и прозрачным, его содержание будет ценным, а его функционирование будет эффективным и увлекательным.
UI-дизайнер, со своей стороны, отвечает за подготовку таких элементов, как графический дизайн страницы, визуальные компоненты страницы (графика, фотографии, значки). Другими словами, человек, разрабатывающий пользовательский интерфейс (UI), должен сделать то, что запланировал UX-дизайнер, максимально эстетичным и привлекательным для получателя, не нарушая предположений о функциональности и удобстве использования.
Каждая компания с обширным графическим сектором имеет свой подход к этим двум позициям, что затрудняет определение четких различий между ними. Однако некоторые из них остались прежними, и они представлены ниже.
Часто страницы бывают похожи друг на друга — меню вверху, логотип в верхнем левом углу, фото товара, информационные разделы и нижний колонтитул. Иногда вы встречаете контактную форму, иногда информационный бюллетень и почти всегда раздел с кнопкой, которая запускает основное действие на веб-сайте. Это повторение (сходство) связано с простым правилом — при разработке пользовательского интерфейса следует учитывать привычки пользователей. Конечно, никто никому не запрещает нарушать господствующие тенденции и правила. Однако это должно быть сделано вдумчиво и лучше всего подкреплено соответствующим анализом.
Часто понятие пользовательского опыта (UX) путают с пользовательским интерфейсом (UI) — это большая ошибка. Да, термины связаны, но они основаны на совершенно разном подходе к дизайну.
Как вы уже знаете, UX-дизайнер в основном отвечает за психологические аспекты разрабатываемого продукта и в гораздо меньшей степени отвечает за чисто визуальную сторону. Его задача состоит в том, чтобы конечный продукт был наилучшим образом воспринят пользователями — он гарантирует, что, например, веб-сайт будет читаемым и прозрачным, его содержание будет ценным, а его функционирование будет эффективным и увлекательным.
UI-дизайнер, со своей стороны, отвечает за подготовку таких элементов, как графический дизайн страницы, визуальные компоненты страницы (графика, фотографии, значки). Другими словами, человек, разрабатывающий пользовательский интерфейс (UI), должен сделать то, что запланировал UX-дизайнер, максимально эстетичным и привлекательным для получателя, не нарушая предположений о функциональности и удобстве использования.
Каждая компания с обширным графическим сектором имеет свой подход к этим двум позициям, что затрудняет определение четких различий между ними. Однако некоторые из них остались прежними, и они представлены ниже.
Навыки, которыми должен обладать дизайнер UX и UI
• UX-дизайнер: аналитический склад ума, опыт работы с клиентом, обширные навыки межличностного общения, эффективное сочетание фактов и информации, умение делать выводы, большое терпение и открытость, правильная дикция также приветствуются.
• UI-дизайнер: высокое чувство эстетики, креативность, IT-навыки, эффективное использование графических программ, отслеживание меняющихся тенденций в дизайне.
Стиль работы UX и UI Designer
• UX-дизайнер выполняет большую часть своей работы с клиентом или потенциальным клиентом — он проводит с ним интервью и опросы, это самый важный аспект его работы.
• UI-дизайнер, с другой стороны, большую часть времени использует графическое программное обеспечение, благодаря которому он сможет достичь наилучших визуальных результатов.
• UX-дизайнер: аналитический склад ума, опыт работы с клиентом, обширные навыки межличностного общения, эффективное сочетание фактов и информации, умение делать выводы, большое терпение и открытость, правильная дикция также приветствуются.
• UI-дизайнер: высокое чувство эстетики, креативность, IT-навыки, эффективное использование графических программ, отслеживание меняющихся тенденций в дизайне.
Стиль работы UX и UI Designer
• UX-дизайнер выполняет большую часть своей работы с клиентом или потенциальным клиентом — он проводит с ним интервью и опросы, это самый важный аспект его работы.
• UI-дизайнер, с другой стороны, большую часть времени использует графическое программное обеспечение, благодаря которому он сможет достичь наилучших визуальных результатов.
Итак, перейдем к самому важному аспекту UX — конверсии
Конверсия — показатель успешности вашего сайта. Какое влияние оказывает правильно спроектированный пользовательский интерфейс на веб-сайте или в интернет-магазине? Огромный! Даже небольшая ошибка дизайнера может заставить пользователей, просматривающих ваш магазин, разочароваться и отказаться от своей корзины покупок. Создавая дизайн интернет-магазина, UX-дизайнер должен обращать внимание как на эмоции, которые дают пользователю завершить процесс совершения покупок в вашем магазине, так и на каждый отдельный шаг в этом процессе.
Одним из самых интересных примеров преобразования UX в конверсию является ситуация Джареда М. Спула, которую он описал в своей статье в 2009 году. Он рассказывает, как одно простое изменение процесса покупок в его интернет-магазине за один месяц принесло его компании прибыль в размере 15 миллионов долларов — в конечном итоге около 300 миллионов долларов в год. Перед изменением пользователям всегда приходилось регистрироваться, чтобы делать покупки на веб-сайте, который на самом деле никому не показался бы сложным — им нужно было заполнить всего два поля и нажать две кнопки, но это многим оказалось настолько обременительным, что вряд ли кто-нибудь предпринял это действие.
Поэтому Джаред М. Спул решил изменить процесс покупки — с тех пор пользователям больше не приходилось создавать учетную запись для совершения покупок, что оказало огромное влияние на коэффициент конверсии. Он просто удалил кнопку для регистрации, и вместо нее была создана новая кнопка «Продолжить», в выпадающем меню которой говорилось, что пользователи могут просто перейти к оплате без регистрации, а в будущем, чтобы ускорить процесс, они могут создать учетную запись. Джаред назвал изменение «$ 300 million Button». Это прекрасный пример того, что вопрос профессионального UX-дизайна может иметь решающее значение для вашего бизнеса, и на этом не стоит экономить.
Поэтому Джаред М. Спул решил изменить процесс покупки — с тех пор пользователям больше не приходилось создавать учетную запись для совершения покупок, что оказало огромное влияние на коэффициент конверсии. Он просто удалил кнопку для регистрации, и вместо нее была создана новая кнопка «Продолжить», в выпадающем меню которой говорилось, что пользователи могут просто перейти к оплате без регистрации, а в будущем, чтобы ускорить процесс, они могут создать учетную запись. Джаред назвал изменение «$ 300 million Button». Это прекрасный пример того, что вопрос профессионального UX-дизайна может иметь решающее значение для вашего бизнеса, и на этом не стоит экономить.
Конверсия сайта наглядно
От пользователей зашедших на сайт до денег в кассе
Создание и дизайн
Людям нравится хорошо выглядеть, они хорошо себя чувствуют в ухоженной комнате или саду, они ценит здания, которые их окружают, которые радуют их глаз на протяжении сотен лет, а самые чувствительные из них тронуты великим искусством созидания... Люди визуально обучаются, нравится вам это или нет. И все вышеперечисленное нужно было создать, изготовить или построить. Секрет, однако, заключается в правильном дизайне всех элементов — обычно нет ничего случайного.
То же самое и с веб-сайтами — без правильного и разумного дизайна создание страниц было бы делом топорным, и результатом были бы неинтересные скопления разных, часто несовместимых элементов. Хорошо спроектированный современный веб-сайт — ключ к удержанию пользователя на более долгое время. Вот почему веб-дизайнер так важен на начальном этапе работы над сайтом.
То же самое и с веб-сайтами — без правильного и разумного дизайна создание страниц было бы делом топорным, и результатом были бы неинтересные скопления разных, часто несовместимых элементов. Хорошо спроектированный современный веб-сайт — ключ к удержанию пользователя на более долгое время. Вот почему веб-дизайнер так важен на начальном этапе работы над сайтом.
Итак, на что стоит обратить внимание при разработке UX?
Позвольте упомянуть здесь несколько важных советов, которые помогут создать лучший дизайн веб-сайта в соответствии с пользовательским интерфейсом.
1. Правило 5 секунд — согласно проведенных исследований, этого достаточно, чтобы ваш пользователь сформировал мнение о том, что он видит на сайте.
2. Доступность — это особенность вашего веб-сайта, которая предполагает его функцию. Например, форма кнопки должна предполагать, что вы сможете щелкнуть по ней.
3. Информационная архитектура — как уже упоминалось выше, это ключевой вопрос при создании вашего сайта, уделите ему много внимания.
4. Цвета — каждый цвет в психологии восприятия имеет разное значение, обращайте особое внимание на то, какие эмоции у получателей вызывают цвета на вашем сайте.
5. Ошибки пользователя. Вы должны помнить, что ваш пользователь — всего лишь человек и тоже совершает ошибки, поэтому давайте всегда дадим ему возможность исправить их, например, добавив кнопки «Назад» рядом с различными формами или конфигураторами.
1. Правило 5 секунд — согласно проведенных исследований, этого достаточно, чтобы ваш пользователь сформировал мнение о том, что он видит на сайте.
2. Доступность — это особенность вашего веб-сайта, которая предполагает его функцию. Например, форма кнопки должна предполагать, что вы сможете щелкнуть по ней.
3. Информационная архитектура — как уже упоминалось выше, это ключевой вопрос при создании вашего сайта, уделите ему много внимания.
4. Цвета — каждый цвет в психологии восприятия имеет разное значение, обращайте особое внимание на то, какие эмоции у получателей вызывают цвета на вашем сайте.
5. Ошибки пользователя. Вы должны помнить, что ваш пользователь — всего лишь человек и тоже совершает ошибки, поэтому давайте всегда дадим ему возможность исправить их, например, добавив кнопки «Назад» рядом с различными формами или конфигураторами.
6. Отслеживание кликов — это один из методов определения поведения ваших пользователей, стоит внедрить плагин на вашем веб-сайте, чтобы вы могли узнать, является ли веб-сайт интуитивно понятным и направляет ли пользователей на желаемую страницу.
7. Тепловые карты (графическое представление данных) — это тип исследования, который сообщает вам, сколько времени пользователь потратил на анализ или использование отдельных элементов страницы.
8. RWD — это аббревиатура от адаптивного веб-дизайна, который заключается в подготовке вашего веб-сайта для различных разрешений экрана. Чтобы ваш веб-сайт правильно отображался на компьютерах, смартфонах или планшетах, вы должны позаботиться о RWD.
9. CTA (Call to Action — призыв к действию) — это элементы на веб-сайте, основная задача которыхзаключается в вызове определенной реакции, например, нажать указанную вами кнопку или подписаться на рассылку новостей. Правильно оформленный призыв к действию значительно увеличивает конверсию на вашем веб-сайте.
10. Баннерная слепота — в последние годы и из-за множества рекламных баннеров, которые окружают нас в повседневной жизни, у людей развилась подсознательная способность игнорировать любые элементы, которые выглядят как баннеры, и пользователи уже автоматически знают, что они не найдут информацию, которую ищут, пройдя по ним. Поэтому попробуйте создать нестандартные формы предоставления информации о любых акциях на вашем сайте.
11. Саккадные движения — за секунду среднестатистический пользователь вашего сайта выполнит около трех саккад (непроизвольных движений глаз) в поисках наиболее важных элементов, попробуйте их найти.
7. Тепловые карты (графическое представление данных) — это тип исследования, который сообщает вам, сколько времени пользователь потратил на анализ или использование отдельных элементов страницы.
8. RWD — это аббревиатура от адаптивного веб-дизайна, который заключается в подготовке вашего веб-сайта для различных разрешений экрана. Чтобы ваш веб-сайт правильно отображался на компьютерах, смартфонах или планшетах, вы должны позаботиться о RWD.
9. CTA (Call to Action — призыв к действию) — это элементы на веб-сайте, основная задача которыхзаключается в вызове определенной реакции, например, нажать указанную вами кнопку или подписаться на рассылку новостей. Правильно оформленный призыв к действию значительно увеличивает конверсию на вашем веб-сайте.
10. Баннерная слепота — в последние годы и из-за множества рекламных баннеров, которые окружают нас в повседневной жизни, у людей развилась подсознательная способность игнорировать любые элементы, которые выглядят как баннеры, и пользователи уже автоматически знают, что они не найдут информацию, которую ищут, пройдя по ним. Поэтому попробуйте создать нестандартные формы предоставления информации о любых акциях на вашем сайте.
11. Саккадные движения — за секунду среднестатистический пользователь вашего сайта выполнит около трех саккад (непроизвольных движений глаз) в поисках наиболее важных элементов, попробуйте их найти.
Тепловая карта кликов в Я.Метрике
Баннерная слепота пользователей. Сейчас юзеры фокусируются на рабочей области.
UI или UX? Упакуйте, пожалуйста, и то, и то!..
Можно ли при разработке веб-сайта сосредоточиться только на одном аспекте? Либо по внешнему виду, либо по удобству использования? Конечно, нет! Хороший дизайн должен хорошо выглядеть и хорошо работать, а также включать в себя тестирование UI и UX.
На многие вопросы можно ответить, выполнив A/B-тесты. Еще один способ проверить правильность работы веб-сайта — это выполнить тестирование в сотрудничестве с непосредственными пользователями веб-сайта. Затем вам следует проанализировать, может ли обследуемый человек получить доступ к определенным функциям и выполнять определенные действия без чьей-либо помощи, и побудить его рассказать о своих эмоциях. Такое тестирование позволит сделать соответствующие выводы.
Подводя итог, можно сказать, что хороший веб-сайт требует соответствующего дизайна, созданного экспертом по текущим тенденциям, но также требует постоянной работы после его запуска. Выполнение соответствующих тестов и внесение изменений может значительно повысить коэффициент конверсии ваших маркетинговых усилий.
На многие вопросы можно ответить, выполнив A/B-тесты. Еще один способ проверить правильность работы веб-сайта — это выполнить тестирование в сотрудничестве с непосредственными пользователями веб-сайта. Затем вам следует проанализировать, может ли обследуемый человек получить доступ к определенным функциям и выполнять определенные действия без чьей-либо помощи, и побудить его рассказать о своих эмоциях. Такое тестирование позволит сделать соответствующие выводы.
Подводя итог, можно сказать, что хороший веб-сайт требует соответствующего дизайна, созданного экспертом по текущим тенденциям, но также требует постоянной работы после его запуска. Выполнение соответствующих тестов и внесение изменений может значительно повысить коэффициент конверсии ваших маркетинговых усилий.