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

Я не буду расписывать аналоги, их преимущества, недостатки и т. д. Но просто расскажу, чем руководствовалась, когда собирала все эти принципы в один текст. Конечно, материалами исследований составили работы таких дизайнеров, как: Якоба Нильсен, Й. Мюллер-Брокманна, М. Ильяхова, И. Б. Бирмана, А. Лебедева, А. Горбунова, И. Иттена, А. Литриса, А. Мариока, Ш. Адамса, Пол Фитса, П Боаг, Д. Линдси и других очень уважаемых авторов. Далее, основываясь на существующих законах и принципах UI UX дизайна были проанализированы сайты популярных музеев мира таких как: MoMA, Metropolitan, Эрмитаж, Государственный исторический музей, и крупных площадок с большим количеством цифровых изображений: Google Arts & Culture, Pinterest, Shutterstock, Госкаталог, «Артхив»

Сами принципы 

Все выявленные в исследовании принципы, можно разделить на две категории, первая будет отвечать за UX и содержит: 1) работа за пользователя (загрузка изображений); 2) сохранение результатов и места поиска; 3) быстрые действия; 4) адаптивность плитки; 5) разграничение функциональности для профессионалов и для обычных пользователей; 6) информирование о действии.

И вторая категория UI принципов будет включать в себя: 1) правило «Внутреннее внешнее»; 2) фиксированная ширина и различная высота; 3) изображение главнее типографики; 4) светлый интерфейс; 5) сохранение айдентики.

Вероятно, для опытных дизайнеров это будет итак понятно, но думаю стоит все равно более детально рассмотреть каждый принцип. Начнем с UX.

1) Загрузка изображений

Он построен на основе любого интерфейса с низкой стоимостью взаимодействия — компьютер выполняет работу за пользователя, а не усложняет ее. При использовании сайта, пользователь не должен выполнять лишние движения.

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

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

Оптимальный вариант: следуя результатам крупномасштабного исследования BaymardInstitute, можно считать использование совмещенного варианта функциональности «бесконечной загрузки» и c выбором пользователя в виде кнопки «загрузить больше». То есть показывать пользователю 30 объектов при начальной загрузке страницы, затем, с помощью «бесконечного» скролла прогрузить еще около 30 объектов, и когда количество достигнет примерно 100 объектов отобразить кнопку «Загрузить больше» и так далее. 

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

2) Сохранение результатов и места поиска 

Этот принцип обозначает, что необходимо сохранять место поиска пользователя, независимо от вида использования прокрутки страницы. Он исходит также из тезиса – что всю работу должен делать компьютер, а не человек. 

Минусы, которые существуют: Большинство аналогов не имеет такой функциональности, и обнуляет весь результат поиска. Например, пользователь прокрутил 30 страниц, зашел на подробное описание, а вернулся обратно на первую страницу.

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

Оптимальный вариант: Использовать кликабельные ссылки «Назад» на странице описания объекта, которая будет перекидывать пользователя не в начало списка поиска, а на то же место, чтобы не обнулить прогресс достижения цели клиента страницы. Такой способ использует крупномасштабный сайт Pinterest, у которого загрузка страницы происходит с помощью бесконечного бесшовного скролла.

3) «Быстрые действия» 

Кнопки быстрого действия (на плитке изображений) используются на многих сайтах, позволяя применять функцию к объекту, без перехода на страницу подробного описания. Например, возможность быстрого сохранения в собственные коллекции, без переходов.

Минусы, которые существуют: отсутствие быстрых действий.

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

В функционал быстрых действий при разработке каталога можно добавить возможность сохранения картины в различные собственные коллекции, по примеру досок из Pinterest. Возможность копировать и отправить ссылку письмом или с помощью популярного мессенджера. Такой функционал поможет быстрее взаимодействовать с контентом, а следовательно, быстрее достигать своей цели, ради которой он посетил сайт.

4) Адаптивность 

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

Минусы, которые существуют: некорректный визуал.Например, вызов блока с фильтром скрывает ряд изображений.

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

5) Разграничение функциональности для профессионалов и для обычных пользователей 

Исходя из анализа целевой аудитории, было выявлено что цель визита в онлайн каталог может иметь как исследовательский, так и развлекательный характер, что, безусловно необходимо учитывать. 

Следуя закону Хика, который предполагает избавление от ненужной функциональности, можно выделить принцип — разграничение функциональности для профессионалов и для обычных пользователей. А именно, разграничить фильтрацию.

Минусы, которые существуют: Обширная фильтрация, которая путает и пугает пользователя.

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

Например, продумать расширенный поиск, который будет включать в себя такие узконаправленные параметры как инвентарный номер, номер ГИМ, шифр ОПИ и т. п. и он будет отображаться лишь по запросу пользователя. Также необходимо учитывать тот факт, что одна фильтрация не должна мешать или закрывать функционал другой, чтобы не понизить юзабилити.

6) Информирование о действии 

Шестой принцип «информирование о действии» предполагает, что пользователь всегда должен понимать, что повлечет его действие, что происходит сейчас и что нужно сделать чтобы цель была достигнута. 

Минусы, которые существуют: Непонятно что нарисовано, и что делает эта кнопка. 

Оптимальный вариант: Убедится, что использование любого функционала нативно понятно клиенту. Например, если используются иконки без текстовой информации, необходимо при наведении подсветить краткое обозначение этого действия, чтобы пользователь понимал, что повлечет его клик мышкой. При этом, система должна описывать действие простым и понятным языком, сложные и узкоспециализированные термины нужно заменить на простые слова. 

Вывод 

Все выше описанные принципы имеют рекомендательный характер. Но все они построенные на базовых принципах юзабилити. Если вы не прибегаете к услугам хороших дизайнеров и хотите сами сделать свой фотобанк или онлайн-каталог, то все выше описанное поможет вам создать удобный интерфейс.

Следующие принципы UI с картинками распишу в следующей части.

___________________________________________________________________

Тут можете посмотреть результаты дипломной работы.