Пн, 9/01/17 – 17:44 | One Comment

Окинув взглядом главную страницу, среднестатистический посетитель сайта доверится впечатлению от дизайна, интерфейса, стиля. Оформленное «на коленке» вызовет рефлекторную реакцию закрытия вкладки – такого …

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

Веб-дизайн: правила создания и лучшие примеры дизайна сайтов

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

Интернет магазины

Электронная коммерция, новинки и тренды в E-Commerce дизайне

Свой сайт

О создании оформления сайта, как сделать свой сайт лучше

Главная » UX и Юзабилити

Что есть UX-дизайн для web-сайта? Примеры дизайнов

17 ноября 2013 5 комментариев

Для современного интернет проекта UX-дизайн играет немаловажную роль и во многом определяет успешность его развития. Учитывать его ключевые моменты нужно на всех этапах разработки. UX дизайн (User eXperience Design) — применение методов проектирования, направленных на достижение максимально эффективного взаимодействия пользователя с системой (в данном случае это дизайн сайта).

UX дизайн

UX(общение с системой): ожидания на основе опыта взаимодействия с подобным

При этом пользователь вовлечен в формирование того, что мы называем опытом его взаимодействия с веб-сайтом. Более того, он имеет какой-то предыдущий опыт и определенные ожидания. Если учесть, что плохое быстрее забывается, все это можно выразить так: UX = UX + получение нового пользовательского опыта от взаимодействия с данным (Вашим) проектом. UX — «опыт взаимодействия» это много больше, чем просто качественный дизайн или красивое оформление.

Что же такое UX-дизайн для WEB?  Что нужно рассматривать в UX аспекте? Прежде всего, это:

  • графический дизайн
  • проектирование опыта взаимодействия посетителей с сайтом
  • информационная архитектура
  • контент сайта

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

UX-дизайн, с его нацеленностью на пользователя, имеет большое значение для сайта. Но UX — это не часть web-дизайна. User eXperience намного более широкое понятие, затрагивающее и WEB. Подразумевает хорошую эргономику и удобство использования (например ресурса, продукта)

Пример лучших ux-дизайнов: starbucks.com или barnesandnoble.com изначально создавались с учетом удобства использования.

UX в веб-дизайне — это комбинирование UI дизайна (User Interface — интерфейс пользователя) c интерактивным дизайном (IxD, Interaction Design). Чтобы улучшить «опыт взаимодействия» стоит уделить внимание буквально всему, что имеет смысл. Излюбленные приемы в разработке UX включают возможности:

  • получение большей информации скроллингом вместо использования кнопок NEXT (далее) или Load More (загрузить еще)
  • просматривать содержимое страниц и делать переходы, перелистывая их курсором и прокруткой
  • использование клавиатуры (стрелки право/лево) для постраничного вывода, вместо кликов на страницах с пагинацией

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

Читайте также:  Дизайн меню сайта: идеи, советы, примеры

Веб-сайты над которыми поработали UX-дизайнеры

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

k2

user experience дизайн

Andrew Jackson

UX дизайн

David Bastian

ux design

Defringe

UX дизайн

Design Embraced

Что есть UX-дизайн для сайта

Eskimo

UX дизайн

Raffer

пример отличного ux-дизайна

Grow Interactive

UX дизайн

Harry’s

UX дизайн

Herrlich Media

UX дизайн

Moorgate Exchange

UX дизайн

The One Club

ux дизайн

Ony Agency

UX Design российского сайта

Venables Bell & Partners

ux дизайн

Koendemuynck

пример отличного UX дизайна

Ronikco   

пример отличного UX дизайна

 Luca Casati

UX/UI пролистывание курсором и прокруткой

Читайте также:  Веб-дизайн умирает? Скорее, эволюционирует в UX дизайн

    Применение прозрачных кнопок в дизайнах web сайтов

      Что нужно учесть при создании своего сайта

        21 пример e-commerce сайтов с UX новшествами в дизайне

        5 комментариев к записи: "Что есть UX-дизайн для web-сайта? Примеры дизайнов"

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

        • Привет! Подводя итог, хотелось бы заметить, что в разных источниках под UX дизайном понимаются разные вещи, но в целом все они подразумевают описанную в статье работу над продуктом. А что для вас означает UX ?

          • Админ:

            Общими рассуждениями объяснить UX сложно, тем более продукта (в широком понимании). Сам перевод eXperience не полно раскрывает понятие (слово описывающее жизненные ситуации – не столь маркетинговое). Речь идет о функциональных и эмоциональных критериях, вытекающих из ощущений пользователя. Сам пользователь не обязательно разделяет ваше понимание «что есть хорошо» для него. И динамика потребления контента / продукта не гарантирует корректность оценки UX сайта, сервиса… UX-дизайн подразумевает эмоциональную привязку. Вспоминая слова Стива Джобса об UX продукта: «Иконка, кнопка… интерфейс выглядит так, что его хочется лизнуть».

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

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

        Оставить комментарий