“Какой формат изображений обеспечит лучший пользовательский опыт?”
UX Курс: 25 из 30 глупых вопросов
(Вы читаете перевод нового ускоренного курса UX. На этот раз курс посвящен глупым вопросам (UX Crash Course: 30 Stupid Questions). Если вы здесь впервые, то лучше начните с первой главы).
Приступив к проектированию, вы наткнетесь на массу мелочей, о которых вы ничего не знаете, просто потому что раньше не замечали их. К таким мелочам относится, например, тип файла изображений для загрузки в веб. И вот вы спрашиваете себя:
“Какой формат изображений обеспечивает лучший пользовательский опыт?”
А теперь, просто чтобы в этом курсе все было логично и согласовано, мне бы хотелось подчеркнуть, что суть UX — не в “опыте пользователя”. Суть в процессе повышения эффективности пользователей.
Таким образом — технически — этот глупый вопрос скорее касается производительности, нежели UX. Вы ведь не можете схематично изобразить желаемый формат картинки на вайрфрейме или указать этот формат прежде, чем увидите сами изображения.
НО…
…данный вопрос из разряда “вся команда отвечает за улучшение этого опыта”. Так что вам придется в этом всём разобраться, и не важно, что это “технически не UX-дизайн”.
Осваивая свое ремесло, не ограничивайте себя рамками должностной инструкции.
Глупый ответ:
“Лучший для пользовательского опыта — тот формат, в котором изображения лучше выглядят”.
(Возможно это справедливо для улучшения опыта дизайнера, но не пользователя).
Настоящий ответ:
Если изображения в двух разных форматах выглядят примерно одинаково, то разница не будет заметна ни на сайте, ни в процессе взаимодействия пользователя с данными, ни при обратной связи. И лишь один пользователь на миллион сможет заметить разницу.
Поэтому, если изображение выполнено на должном уровне, его формат не имеет для пользователя никакого значения.
Среднестатистический человек не может отличить JPG-изображение со 100-процентным качеством от 30-процентного, хотя для дизайнера второе будет выглядеть так, словно дизайнер целый день проносил его смятым в кармане.
Если в вашу целевую аудиторию входят другие дизайнеры, можете заморачиваться чуть больше. В ином случае, забейте.
Но вот если исполнение изображений оставляет желать лучшего, ответ будет другим.
Вот почему этот вопрос совсем не глупый:
Формат изображений имеет значение для UX только при неправильном исполнении.
Медленный сайт сразу видно по показателю отказов (bounce rate) и по уровню конверсии, а также по отзывам пользователей. Поэтому, угадайте что?
Формат изображений становится частью UX.
*печальный тромбон*
Разные форматы изображений не просто так придуманы. Каждый из них хорош для своих целей. У каждого есть свои “фишки”. В идеале нам хочется, чтобы изображения были как можно меньше в размере, оставаясь при этом как можно красивее.
Очень просто выбрать опцию “сохранить для Веб”, не осознавая при этом, что все широкоформатные изображения весят по 700k, а, значит, сайт станет примерно таким же быстрым и грациозным, как участники шоу “Взвешенные люди”.
Никому не хочется ждать по 30 секунд лишь для того, чтобы эти пока еще не загруженные картинки отображались в высоком качестве в угоду дизайнеру.
Краткая инструкция по использованию форматов для веб:
Сейчас наиболее популярными форматами являются: JPG, PNG, GIF и SVG.
В JPG содержится информация о каждом пикселе, так что этот формат больше подходит для фотографий и сложных изображений с плавными переходами цветов и прочей подобной хренью.
В GIF и PNG содержится информация о группах пикселей, поэтому для фотографий они не подходят (ведь в фотках все пиксели разные, что делает размер файла огромным), но вот для скриншотов, иконок и изображений с простой цветовой палитрой эти форматы работают прекрасно. В обоих форматах есть функция прозначности. Изображения в PNG обычно лучшего качества, но GIF иногда позволяет создать файл меньшего размера.
GIF-изображения могут быть анимированными, а это крутая фишка.
Некоторые файлы могут работать в чересстрочном формате, то есть отображаться частями по мере загрузки, вместо того, чтобы ждать полной загрузки для отображения файла. Это может быть плюсом при очень медленном соединении, к примеру, если вы ориентируетесь на аудиторию из развивающихся стран, где пока отсутствуют технологии скоростного интернета. Если нет, не заостряйте внимание на этом.
SVG — это векторные изображения, а не пиксельные. Поэтому они не подходят для всего вышеперечисленного, но превосходно справляются с отображением масштабируемых изображений вроде логотипов и графики. И поскольку они буквально “сделаны из кода”, такие изображения могут быть супер-маленького размера. Но не переусердствуйте с ними. Большое количество векторов нагружают процессор (замедляют его), особенно если они движутся.
К сведению:
Гугл недавно выпустил новый формат изображений под названием WebP, который должен выдавать качество JPG, прозрачность PNG и при этом быть на 25% меньше размером, чем оба формата.
Если он будет работать, как обещано, и завоюет популярность, то мы, возможно, увидим больше сайтов журнального типа (с большими картинками, интересными макетами и т.д.)
Можете узнать больше здесь:
Завтра мы начнем разбирать вопросы о данных. Первым будет: “Мы только что подключили аналитику. Что измерять?”
Если вам понравилась и статья, и перевод, дайте нам знать — нажмите кнопку Recommend.
Также мы будем благодарны за любые отзывы по поводу адекватности и понятности перевода этой книги. Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
