Малоинформативный дизайн информационного общества

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

Графический интерфейс в Star Trek: The Next Generation используется в реальных условиях.

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

Выбор пола при регистрации на Flickr. Не всем видно, но пункт "Мужчина" тут выбран.

Законы современного дизайна:

  • Нужно сокращать количество цветов и оттенков до минимума. Монохромный интерфейс — предел мечтаний и признак профессионализма дизайнера. Если есть в интерфейсе два оттенка, они должны различаться только в глазах дизайнера цифрами у пипетки. Если пользователь насчитал более, чем один оттенок, полный провал.
  • Нужно сокращать количество линий в иконках. Если изображение превратилось в непонятный иероглиф, цель достигнута. Профессиональный дизайнер должен смотреть вперёд и не довольствоваться малым. Когда иконка превратилась в непонятный иероглиф, но ещё содержит более пяти элементов, её стоит упрощать ещё больше.
  • Правило цветов распространяется на иконки. Если и так плохо читаемая цветная иконка 16*16 станет монохромной и потеряет последние нотки информативности, дизайнер победил.
  • Если есть какое-то меню, выбранный пункт должен как можно меньше отличаться от невыбранного. Пусть пользователь изо всех сил вглядывается в прекрасный дизайнерский интерфейс. Если в меню два пункта, нужно делать максимально интуитивным, какой из двух оттенков определяет какое состояние. Пусть любители клавиатуры возьмут в руки мышь и кликнут по вашему прекрасному интерфейсу.
  • Для баланса оттенков нужно добавлять тени и эффект загнутого бумажного листа. Тень должна быть реалистичной. В тени должно быть столько оттенков, сколько нет во всех остальных элементах вместе взятых.
  • Чтобы пользователь понял, что делает кнопка, иконка которой упрощена в ноль, можно вставить всплывающие подсказки. Механизм отображения и внешний вид должны быть наиболее нестандартными (это подчёркивает современность компании и опыт дизайнера), пользователи мобильных устройств должны гадать, что же им сделать, чтобы получить (лайфхак для банков: отображать подсказки по длинному нажатию на кнопку, кроме кнопки взятия кредита).
  • Если всё же не удаётся избавиться от надписи, нужно делать её как можно короче. Например, вместо "Послать письмо разработчику" и "Послать разработчика на три буквы" стоит на кнопках написать два раза "Послать". Пусть пользователь опробует все кнопки вашего прекрасного интерфейса! (лайфхак для банков: кнопки "Отменить всё [и взять кредит]", "Не брать этот кредит [, а брать другой]", "Погасить кредит [нашего менеджера]")
  • Пользователь — идиот, каких свет не видывал. Количество кнопок нужно сокращать до одной-двух. Функционал, непонятный для трёхлетнего ребёнка — отключать навсегда.
  • Интерфейс должен выглядеть так просто, как будто его можно освоить за пять минут. Пиктограммы на кнопках должны плохо запоминаться. Взаимодействие с элементами интерфейса должно вводить в ступор или быть максимально неочевидным (появление кнопки по двойному клику мыши в центре экрана во время горизонтальной прокрутки — идеально), чтобы пользователь не расслаблялся и думал, думал, думал над интерфейсом.
  • Поскольку большинство использует широкоформатные мониторы, нужно делать только горизонтальную панель меню. Она не должна убираться при скроллинге. Широкоформатность должна быть подчёркнута, контент должен занимать узкую полосу посередине экрана. Если это не достигается, стоит добавить ещё одну-две неотключаемых горизонтальных панели; на сайт — широкий неубираемый футер или ещё одно меню.
  • Интерфейс должен дышать. Нужно больше отступов между элементами. Вертикальные отступы, горизонтальные отступы; отступы вне рамок, отступы внутри рамок. Хорошо, когда вокруг каждого элемента есть пространство в треть-половину его размера. Идеально, если между двумя кнопками помещается ещё одна.
  • Поскольку из-за отступов и пробелов не хватает места, необходимо уменьшать размер шрифта. Если пользователь вглядывается в монитор или смотрит на планшет с лупой, цель достигнута.
  • Границ не должно быть. Пусть все части интерфейса смешаются в одну. Пусть вместо кнопки будет только её иконка или просто буква, если вы не придумали достаточно простой и непонятной пиктограммы. Особый шик — когда кнопка по виду не отличается от вводимых пользователем данных.
  • Стандартные элементы интерфейса (полосы прокрутки и т.п.) никуда не годятся, их надо заменить на свои. Чем меньше общего они имеют с системными, тем лучше. Чем больше тормозит их реализация и чем больше глюков с нестандартным оборудованием (всё, кроме мыши, начиная с тачпада), тем солиднее. Если прокрутка вообще не крутится при каком-то способе взаимодействия, цель достигнута.
  • UX — не нужно. Выкинуть, забыть, не вспоминать.
  • Адрес поддержки для жалоб и предложений — скрыть. Пользователь должен искренне всею душой желать задать вопрос, должен забыть про малейшую неуверенность. Только избранному позволено задать свой вопрос. Перед этим нужно показать ему ЧаВо по теме, три раза спросить, хочет ли он задать вопрос; предложить заполнить несохраняемую форму из тридцати полей включая девичью фамилию собаки первой жены парикмахера пользователя; после отправки ещё раз предложить почитать ЧаВо; ни в коем случае не публиковать адрес электронной почты техподдержки, при малейшем намёке на поиск оного показывать форму отправки вопроса из пятидесяти полей, при повторном нарушении — из ста полей.

В очередной раз накипело. Думал для скорости оставить пост без картинок, т.к. всё описываемое можно видеть практически везде (вертикальные меню на сайтах, особенно у Google; отсутствие границ кнопок на клавиатуре по умолчанию в Android 6; выпадающее меню выбора пола на Flickr и т.д.). Но когда сел писать, оказалось, что в жежешечку встроили новый редактор.

Порадовало, что прокрутка теперь одна на всю страницу (в старой версии их две, они вложенные; как ни старались скриптами сделать это удобнее для пользователя, выходит всё равно недолёт или перелёт при попытке докрутить до нужного места), подпись к картинке вводить одно удовольствие, но "упрощение" до отсутствия HTML, мелкие кнопки, еле заметные оттенки — это как раз по теме поста, который я планировал написать.

Оттенки серого в новом редакторе ЖЖ: кнопка выбрана, кнопка активна, но не выбрана, кнопка не активна.

Ещё и не сразу понимаешь, как вызвать панельку с кнопками форматирования "жирный, курсив, ...". А если бы я не увидел её в анонсе, не знал бы, что она вообще существует.

P. S. Я создавал интерфейсы, использующие плоский дизайн, когда это ещё не было мейнстримом. Первые версии моего скина под AIMP2 были разработаны в 2009, за год до популяризации этой возмутительной простоты Майкрософтом. Такое ощущение, что даже я, скромный Сократ, увидел все плюсы и минусы, переболев этим ещё тогда, а остальные, в том числе и те, кто смыслит в дизайне больше меня, так и не остановились.

Скин для AIMP2 от SekraSoft в плоском стиле.


Error

default userpic

Your reply will be screened

Your IP address will be recorded 

When you submit the form an invisible reCAPTCHA check will be performed.
You must follow the Privacy Policy and Google Terms of use.