Pull to refresh

Главный принцип разработки интерфейсов

Level of difficultyEasy
Reading time4 min
Views15K

Если вы достаточной древний, то на личном опыте знакомы с технологической энтропией: железо становится мощнее, но софт деградирует. Photoshop тормозит, а ТВ тупит даже при переключении каналов. Об энтропии софта не раз писали на «Хабре»:

Портится не только код, но и интерфейсы. С энтропией кода бороться тяжело. С интерфейсами вопрос решить проще, если проектировать их по правильным принципам.

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

Колесо прокрутки не заменяет скролл-бар. Во многих сценариях полоса прокрутки удобнее:

  • Листание быстрее. Особенно в бесконечных списках — еще одном изобретении, которое часто применяют не к месту

  • Нет колесика или сенсорного экрана

  • Проблемы с мелкой моторикой. Нередко бывают у пожилых

  • Нежелание работать мышью из-за болей в запястье, вызванных туннельным синдромом

  • Нет полноценной поддержки клавиатуры. В настольной версии Telegram можно листать вниз стрелкой вниз ↓, но при нажатии стрелки вверх ↑ активируется редактирование твоего последнего сообщения в чате. Кто до такого додумался?

  • «Рваное» пролистывание колесиком

Полосы прокрутки в почте Mail.ru, почте Yandex, настольном Telegram и платном SaaS-сервисе для маркетологов
Полосы прокрутки в почте Mail.ru, почте Yandex, настольном Telegram и платном SaaS-сервисе для маркетологов

Неудобная полоса прокрутки — это частный пример большой проблемы. Проблемы возникают даже с такой простой вещью, как скролл-бары.

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

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

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

  • Кнопка трудноразличима или глубоко спрятана. Больше времени и усилий уходит на поиск и наведение.

  • Много пустот на экране. Приходится больше листать.

  • Много элементов на экране. На поиск нужной информации тратится больше времени.

  • Папка пустая, но выглядит кликабельной. На проверку пустой папки тратится время.

Сравним интерфейс почты крупнейших интернет-компаний рунета. У Yandex пустая папка спама неактивна. У Mail.ru она почему-то всегда активна. Зачем? Чтобы терять время на клик по пустой папке?

Чем меньше энергии уходит на решение задачи, тем лучше интерфейс.

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

Энергоэффективные решения всегда выигрывают. Корабли дешевле грузовиков и поездов, потому что перевозка грузов по воде более энергоэффективна. Электромобили выгрывают у автомобилей на ДВС, потому что обладают более высоким КПД. Telegram-каналы как источник новостей отбирают трафик у сайтов, потому что все в одном месте, грузится быстрее браузера и меньше замусорено рекламой.

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

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

Самый лучший интерфейс — это самый энергоэффективный интерфейс.

P.S. Через неделю после публикации моей статьи вышла статья Анны Труфановой «Почему типичные дизайн-подходы оказались неприменимы к интерфейсу для производств». Несколько цитат из нее:

«Когда я пришла на проект, мне все показалось привычным: легкие таблички, собранные на уже знакомом Material UI, едва заметная подсветка строк. Выглядело это красиво и органично; было непонятно, за что нас ругают и что пользователям не нравится. Но после первых диалогов с пользователями: сталеварами и операторами УНРС, мастерами участка разливки, бригадирами шихтового двора стали закрадываться сомнения о правильности нашего визуального стиля. Обратная связь была не самой приятной: пользователям не было видно чисел на экране, в наши «воздушные» таблицы помещалось мало данных, а белый интерфейс в темных помещениях ослеплял.

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

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

Статья хорошая, Анна молодец. Но в чем проблема такого дизайна, сразу видно и без визита на производство. Типичный «инстаграмный» дизайн с узкими полосами прокрутки, мелкими элементами, тонкими и низкоконтрастным шрифтами. Модно, но неудобно и непрактично.

Tags:
Hubs:
Total votes 23: ↑18 and ↓5+19
Comments55

Articles