Недавно я столкнулся с интересной ситуацией. Меня вызывает CEO и показывает примерно такую картину.
На его столе стоит большой 27-ми дюймовый монитор и новый Макбук Про. И там, и тут запущен личный кабинет нашего сервиса.
– Айдар, а почему вот здесь (на ноутбуке) выглядит хорошо, а здесь (на мониторе) плохо?
– В смысле?
– Ну вот здесь (на ноутбуке) на весь экран, а здесь (на мониторе) много места не используется.
Ответ, казалось бы, очень просто. Здесь у вас 2560x1440, а здесь 1280x960. За вопросом, однако, кроется важное правило.
Заказчик никогда не смотрит на свой продукт глазами пользователя
Даже если очень постарается, он не сможет полностью абстрагироваться. Заказчик знает как работает его сервис вне экрана: сложности логистики, издержки производства, зарплаты рабочим, поставщики, подрядчики, налоги, аренда за офис. Все это сильно аффектит его пользовательский опыт, когда он просто смотрит на свой продукт через экран.
Самое интересное, что до того, как мы сделали фиксированную ширину контейнера, было все наоборот – контент растягивался на всю ширину браузера. Это было ужасно и мы это исправили.
Объяснив ситуацию с версткой и шириной экрана, я получил другой вопрос: а можно ли для вот таких экранов увеличить ширина, чтобы было красиво?
Конечно, можно, но я предложил открыть на большом мониторе несколько сайтов: vk.com, vc.ru, tinkoff, yandex.ru (dzen.ru).
Когда мы заходим на привычные нам сайты, как обычные пользователи, мы не замечаем таких вещей, как много пустого места по бокам. Точно также пользователи нашего сервиса не заметят этого. Но когда мы смотрим на продукт, как дизайнеры, как разработчики или как заказчики, опыт совсем другой. Почему?
Пользовательский опыт. Когда мы обычные пользователи, мы пользуемся продуктом неосознанно. Тысячи мыслительных процессов протекают на бессознательном уровне, опыт выражается максимум в наших эмоциях. Когда весь процесс проходит гладко, мы просто продолжаем пользоваться. Если что-то пошло не так, мы материмся и пишем гневный отзыв.
Опыт заказчика. Когда мы дизайним или проводит дизайн-ревью, мы включаем осознанность на максимум. Мы смотрим на каждый пиксель, запятую, фиксируем свои ощущения: О! Вот это мне не нравится. Это меня запутает! Давай переделаем!
Проблема user stories и job stories
User stories и job stories это попытка перевести подсознательные мыслительные процессы человека в сформулированную осознанное высказывание.
И поэтому, это работает плохо. Некоторые дизайнеры, приводят вот такие примеры:
Конечно, это так не работает. Когда я лечу в самолете и не могу нормально пообедать, я буду просто злым, раздраженным пассажиром и буду думать, нужна ли мне вообще эта диета.
Советы
- Как дизайнер, старайтесь больше думать ощущениями, а не формулировками.
- На дизайн-ревью старайтесь дать заказчику интерактивный прототип, вместо статичных картинок, чтобы он как можно больше погрузился в пользовательский опыт.
- Будьте антихрупким. Настраивайтесь на то, что заказчик часто будет критиковать ваш дизайн исходя из интересов бизнеса, которые очень второстепенно связаны с UX.
- Подписывайтесь на мой телеграм-канал, чтобы жизнь стала полноценной.
Как обладатель 34" широких дюймов могу сказать что размазывать "разрешение" как "кашу по тарелке" - это ужасно.
Вот сейчас открыт VC, посередине ограничен шириной блок с текстом, его читать удобно. Но чтобы увидеть блок слева с "Популярное, закладки, т.п." мне приходится почти голову поворачивать. Направо то же самое))
@RuGrant брат, поправь отцу экран
Подскажите, в чем смысл растягивания браузера на весь экран при такой диагонали?
смысл в том, что люди работают на удобном им разрешении и размере, смотрять макеты в фигме, собирают доски в пинтересте
из вариантов "не использовать широкий монитор" и "похейтить дизайнера, который не предусмотрел UX" я чистосердечно выберу второе, потому что успех дизайна проекта зависит от второго, а не от поиска смыслов зачем человек растягивает браузер на весь экран)
Согласен. У того же vk.com сайдбары не растасканы по бокам
годный материал, спасибо
спасибо, что оценили мой дебют.
Чем закончилось по итогу, отец?
По итогу, было принято, как есть. Мол «Ну коли у Яндекса так сделано, то пусть и у нас так будет». =)
Даже на 24 часто браузер открыт на 2/3 экрана, зачем фулскрин там, где вам надо только 1/3 экрана? Вам в голову не приходит телеграм открыть фулскрином на 34’ и говорить - смотри, как неудобно читать в правом нижнем углу. Это просто старая привычка, браузить в фулскрине.
Такая верстка - говно. Каждый раз приходится зумить центральную колонку. И это на 4к 27″
По статистике пользователей с разрешением 2к+ около 5% поэтому обычно никто и не заморачивается, так же как и под разрешение 1024х768
я vc зумлю х2-х3 на экране прошки 16, благо на макос не страницу зумится, а изображение.
Годно и по существу! Спасибо
Вопрос - адаптивный дизайн (версткой) с фиксированными элементами под разрешение, не решил бы вопрос?
спасибо!
ты имеешь ввиду, чтобы элементы растягивались?
Нет, что бы элементы не тянулись, а плитка верстки сайта менялась. Условно как это происходит в десктопной / мобильной / планшетной версиях
А понял. На лендосах или статичных страницах да.
Но не в ЛК. И вообще в интерфейсах сложных сервисов таким лучше не злоупотреблять.
Согласна с каждым словом) Мне, как дизайнеру, свои сайты кажутся совсем под другим углом)
Чувствую, что статья недожала немного. Мне ужасно нравится и близка тема: мне кажется, это та самая тема, которую можно развивать и аргументировать, но тут начало за здравие, а дальше как-то... не раскрылось :)
но плюс за поднятую тему и пример, прям жиза жизненная.
Согласен. Но тут, Инна, целая тема на много-много часов разговоров)) Или может целая глава какой-нибудь книги. Или лекция на каком-нибудь митапе.
В статье посыл был короткий, хотел коротко показать на примере и быстро объяснить причины. Спасибо вам за обратную связь.
Так всё просто, это не пустые области, а места для мигающих баннеров!
ахах)) точно. с 1x bet
Аффектить - бесячее слово на букву а.
Што? Новый макбук про и 1280x960? :))
условно. там же есть масштабирование.