{"id":13755,"url":"\/distributions\/13755\/click?bit=1&hash=4a49bc9ad259aa8d20fdf5f5cb6cf844e7de4bb2ba8ca3a458efcedefcf5ada8","title":"\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 vc.ru","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}

Опыт заказчика ≠ Опыт пользователя

Недавно я столкнулся с интересной ситуацией. Меня вызывает CEO и показывает примерно такую картину.

На его столе стоит большой 27-ми дюймовый монитор и новый Макбук Про. И там, и тут запущен личный кабинет нашего сервиса.

– Айдар, а почему вот здесь (на ноутбуке) выглядит хорошо, а здесь (на мониторе) плохо?

– В смысле?

– Ну вот здесь (на ноутбуке) на весь экран, а здесь (на мониторе) много места не используется.

Ответ, казалось бы, очень просто. Здесь у вас 2560x1440, а здесь 1280x960. За вопросом, однако, кроется важное правило.

Заказчик никогда не смотрит на свой продукт глазами пользователя

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

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

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

Конечно, можно, но я предложил открыть на большом мониторе несколько сайтов: vk.com, vc.ru, tinkoff, yandex.ru (dzen.ru).

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

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

Опыт заказчика. Когда мы дизайним или проводит дизайн-ревью, мы включаем осознанность на максимум. Мы смотрим на каждый пиксель, запятую, фиксируем свои ощущения: О! Вот это мне не нравится. Это меня запутает! Давай переделаем!

Проблема user stories и job stories

User stories и job stories это попытка перевести подсознательные мыслительные процессы человека в сформулированную осознанное высказывание.

И поэтому, это работает плохо. Некоторые дизайнеры, приводят вот такие примеры:

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

Советы

  • Как дизайнер, старайтесь больше думать ощущениями, а не формулировками.
  • На дизайн-ревью старайтесь дать заказчику интерактивный прототип, вместо статичных картинок, чтобы он как можно больше погрузился в пользовательский опыт.
  • Будьте антихрупким. Настраивайтесь на то, что заказчик часто будет критиковать ваш дизайн исходя из интересов бизнеса, которые очень второстепенно связаны с UX.
  • Подписывайтесь на мой телеграм-канал, чтобы жизнь стала полноценной.
0
25 комментариев
Написать комментарий...
Anton Isaychev

Как обладатель 34" широких дюймов могу сказать что размазывать "разрешение" как "кашу по тарелке" - это ужасно.

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

Ответить
Развернуть ветку
Проходивший мимо

@RuGrant брат, поправь отцу экран

Ответить
Развернуть ветку
Антон Кузьмин

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

Ответить
Развернуть ветку
Anton Isaychev

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

из вариантов "не использовать широкий монитор" и "похейтить дизайнера, который не предусмотрел UX" я чистосердечно выберу второе, потому что успех дизайна проекта зависит от второго, а не от поиска смыслов зачем человек растягивает браузер на весь экран)

Ответить
Развернуть ветку
Айдар Ракимов
Автор

Согласен. У того же vk.com сайдбары не растасканы по бокам

Ответить
Развернуть ветку
Олег Масленников

годный материал, спасибо

Ответить
Развернуть ветку
Айдар Ракимов
Автор

спасибо, что оценили мой дебют.

Ответить
Развернуть ветку
Проходивший мимо

Чем закончилось по итогу, отец?

Ответить
Развернуть ветку
Айдар Ракимов
Автор

По итогу, было принято, как есть. Мол «Ну коли у Яндекса так сделано, то пусть и у нас так будет». =)

Ответить
Развернуть ветку
Yuri K

Даже на 24 часто браузер открыт на 2/3 экрана, зачем фулскрин там, где вам надо только 1/3 экрана? Вам в голову не приходит телеграм открыть фулскрином на 34’ и говорить - смотри, как неудобно читать в правом нижнем углу. Это просто старая привычка, браузить в фулскрине.

Ответить
Развернуть ветку
W.W.

Такая верстка - говно. Каждый раз приходится зумить центральную колонку. И это на 4к 27″

Ответить
Развернуть ветку
Rodya The Capitalist

По статистике пользователей с разрешением 2к+ около 5% поэтому обычно никто и не заморачивается, так же как и под разрешение 1024х768

Ответить
Развернуть ветку
Проходивший мимо

я vc зумлю х2-х3 на экране прошки 16, благо на макос не страницу зумится, а изображение.

Ответить
Развернуть ветку
Graf De Lotarev

Годно и по существу! Спасибо
Вопрос - адаптивный дизайн (версткой) с фиксированными элементами под разрешение, не решил бы вопрос?

Ответить
Развернуть ветку
Айдар Ракимов
Автор

спасибо!
ты имеешь ввиду, чтобы элементы растягивались?

Ответить
Развернуть ветку
Graf De Lotarev

Нет, что бы элементы не тянулись, а плитка верстки сайта менялась. Условно как это происходит в десктопной / мобильной / планшетной версиях

Ответить
Развернуть ветку
Айдар Ракимов
Автор

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

Ответить
Развернуть ветку
Arina Kanivets

Согласна с каждым словом) Мне, как дизайнеру, свои сайты кажутся совсем под другим углом)

Ответить
Развернуть ветку
Анни М.

Чувствую, что статья недожала немного. Мне ужасно нравится и близка тема: мне кажется, это та самая тема, которую можно развивать и аргументировать, но тут начало за здравие, а дальше как-то... не раскрылось :)
но плюс за поднятую тему и пример, прям жиза жизненная.

Ответить
Развернуть ветку
Айдар Ракимов
Автор

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

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

Ответить
Развернуть ветку
Lexx Sky

Так всё просто, это не пустые области, а места для мигающих баннеров!

Ответить
Развернуть ветку
Айдар Ракимов
Автор

ахах)) точно. с 1x bet

Ответить
Развернуть ветку
Mercator

Аффектить - бесячее слово на букву а.

Ответить
Развернуть ветку
Mikhail Pavlov

Што? Новый макбук про и 1280x960? :))

Ответить
Развернуть ветку
Айдар Ракимов
Автор

условно. там же есть масштабирование.

Ответить
Развернуть ветку
Читать все 25 комментариев
null