Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>11 авг 2021</li>

3 <li>0</li>

4 </ul>От плохой обратной связи и непонятных режимов до удаления данных и громоздких форм.

5 Иллюстрация: Meery Mary для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

7 Кажется, что спроектировать интерфейс - не такая сложная задача: нарисовать кнопки, добавить к ним подписи и всё готово. Но при таком подходе у вас получится "продукт", из-за которого люди начнут пить пустырник.

8 Рассказываем об ошибках в интерфейсах, которые, скорее всего, выводят вас из себя каждый день:

9 <ul><li>плохая<a>обратная связь</a>,</li>

10 <li>непонятные<a>режимы работы</a>,</li>

11 <li>неочевидные<a>кнопки и сценарии</a>,</li>

12 <li>подмена<a>стандартных элементов управления</a>,</li>

13 <li><a>всплывающие</a>без причины окна,</li>

14 <li><a>удаление данных</a>без спроса,</li>

15 <li>плохо<a>спроектированные формы</a>.</li>

16 </ul>Страшно раздражает, когда жмёшь на кнопку, а в ответ система никак не реагирует. Например, в Adobe Premiere иногда не активируется экспорт видео - ни через горячие клавиши, ни через выпадающее меню:

17 Обратная связь, наоборот, может быть гиперактивной: Photoshop на любое неправильное действие реагирует окном с сообщением об ошибке. Например, вот какие ошибки могут возникнуть, если вы попробуете взаимодействовать с пустым слоем как-то не так:

18 Скриншот: интерфейс Photoshop / Skillbox Media Скриншот: интерфейс Photoshop / Skillbox MediaСкриншот: интерфейс Photoshop / Skillbox MediaСкриншот: интерфейс Photoshop / Skillbox MediaСо временем эти всплывающие окна начинают восприниматься как ложная тревога. Из-за этого однажды пользователь пропустит по-настоящему важное сообщение и потеряет все свои данные.

19 Фидбэку нужно уделить первостепенное внимание, чтобы неважная информация была неброской, а важные сигналы выделялись. Когда возникают какие-то чрезвычайные ситуации, даже важные сигналы должны звучать особенным образом. Если каждое устройство сигнализирует о чрезвычайной ситуации, эта какофония ни к чему не приводит.

20 Дон Норман,аналитик, инженер и дизайнер интерфейсов

21 Если человек не понимает или не видит, в каком режиме сейчас работает устройство, скорее всего, он ошибётся. Больше всего это раздражает в простых вещах, вроде переключения раскладки или регуляторов на микроволновке.

22 В macOS и Windows переключение языка отображается на панели иконок в углу. Это очень маленькая иконка, которая никогда не бросается в глаза, поэтому люди часто начинают печатать по-русски на английской раскладке, и получается "Ghbdtn? vtldtl":

23 Во время набора текста на маленькие иконки переключения языка в Windows и macOS никто не обращает внимания - их очень трудно увидеть. Скриншот: Skillbox MediaПользователь в этом не виноват - система никак не помогает ему определить, в каком состоянии сейчас находится раскладка.

24 Решение проблемы ещё в 2006 году<a>предложил</a>арт-директор Артём Горбунов: менять цвет курсора на какой-нибудь другой. Так пользователь сразу увидит, на какой раскладке он печатает текст:

25 Изображения: "Бюро Горбунова"Наверняка вы попадали в ситуацию, когда хочется разогреть еду в микроволновке, а она даже с четвёртого раза остаётся холодной. И только на пятый вы случайно замечаете, что когда-то переключили микроволновку на режим разморозки:

26 Обратите внимание на нижнюю крутилку с переключением температуры, после разморозки она не переключается автоматически в режим разогрева. Фото: goir / ShutterstockРежимы (modes) ― важный источник ошибок, путаницы, ненужных ограничений и сложности в интерфейсе. Многие проблемы, создаваемые режимами, хорошо известны. Тем не менее практика создания систем без режимов почему-то не находит широкого применения в разработке интерфейсов.

27 Джефф Раскин,дизайнер интерфейсов

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

29 Представьте, что вы зашли в приложение будильника на iOS и хотите поменять на нём время. Кажется, что для этого нужно нажать на огромные цифры:

30 Скриншот: Skillbox MediaНа деле вам нужно нажать на маленькое слово "Править" в верхнем левом углу и только потом уже выбрать будильник и изменить его настройки. Естественно, новые пользователи не могут об этом догадаться с первого раза, а старых это просто раздражает:

31 Скриншот: Skillbox MediaУ Xiaomi есть приложение для удалённого управления "Умный дом". Чтобы подключить к нему устройство, приложению нужен доступ к вашей сети Wi-Fi. Работает это замечательно, но в процессе подключения есть проблема - приложение не увидит сети, пока вы не включите геолокацию, а в интерфейсе об этом нет ни единого слова. Как пользователь должен об этом догадаться?

32 Кстати, интересно, зачем приложению умного дома знать геолокацию пользователя? Видео: Skillbox MediaЕщё одним примером неочевидных функций поделился дизайнер интерфейсов Брюс Тогнацини - в старых версиях браузера Safari было не так просто сохранить PDF-файл:

33 Никогда не используйте команду "Сохранить как" для сохранения PDF-файлов в браузере Safari. Вместо этого переведите мышь с верхней части экрана, где находится 100% контрольных кнопок, к нижней части окна, которая не содержит ничего, кроме самого текста. Неожиданно в области содержимого появится серый квадратик со значком дискеты. Нажмите на значок, и Safari сохранит ваш PDF-файл.

34 Брюс Тогнацини,дизайнер интерфейсов

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

36 Если открыть любую картинку в браузере, элементы взаимодействия с ней будут понятны: скролл - вертикальная прокрутка, "щипок" на тачпаде или трекпаде - зум. Но почему-то при просмотре изображений в Google Drive всё перевёрнуто с ног на голову: скролл - это зум, зажать правую кнопку мыши и тащить - горизонтальный скролл. В итоге смотреть длинные изображения на диске Google - только раздражаться.

37 Видео: Skillbox MediaЕсли за работой в Photoshop вы вдруг поняли, что последние десять действий совершили неправильно, то логично предположить, что нужно десять раз подряд нажать Ctrl (⌘) + Z и всё готово. На самом деле это сочетание клавиш возвращает вас только на один шаг назад:

38 Видео: Skillbox MediaСамый раздражающий пример того, как программа что-то делает без вашего ведома - автовоспроизведение видео на новостных сайтах. Если зайти в новость "Рамблера", он сразу включит вам какой-то видеорепортаж, независимо от того, хотите вы его смотреть или нет.

39 Видео: Skillbox MediaЕщё одна раздражающая вещь - онлайн-помощники, которые вылезают без причины. Посмотрите на сайт "Клиники СМТ": в углу есть кнопка вызова онлайн-помощника - логично предполагать, что она не должна активироваться без ведома пользователя. Но нет - из-за этой кнопки вылезает какая-то Татьяна, которая хочет помочь пользователю, хотя он даже не попробовал сам решить свою проблему.

40 Некая Татьяна встречает пользователей сайта "<a>Клиники СМТ</a>" и вгоняет их в ступор. Видео: Skillbox MediaЭто ещё одна вещь, которая уже стала дизайнерским мемом. Чтобы ощутить всю боль от этих окон, зайдите на сайте "Рамблера". Сначала он вас встретит предложением о показе уведомлений, на котором вы, естественно, нажмёте "В другой раз":

41 Скриншот: сайт "Рамблер" / Skillbox MediaЕсли вы зайдёте в любую новость, сайт снова предложит вам показывать уведомления, хотя вы только что от них отказались:

42 Скриншот: сайт "Рамблер" / Skillbox MediaА теперь попробуйте снова выйти на главную. Теперь вам предложат сделать "Рамблер" стартовой страницей:

43 Скриншот: сайт "Рамблер" / Skillbox MediaНеизвестно, зачем это всё показывать, если читатель один раз уже сказал "нет". Можно подумать, что со второго раза он передумает.

44 Ещё один пример - внезапные окна на сайте Uniqlo. На странице каждой вещи есть кнопка "Наличие в офлайн-магазине". Если вы нажмёте на неё, то вместо ожидаемого списка магазинов сначала вылезет предупреждение:

45 Сайт Uniqlo с помощью модального окна предупреждает, что информация в списке с магазинами может быть неактуальной. Почему об этом нельзя сказать сразу на самой странице? Скриншот: сайт: Uniqlo / Skillbox MediaСамое страшное, что может случиться с пользователем - это потеря его данных:

46 Система должна рассматривать все данные, вводимые пользователем, как бесценные. И если перефразировать Первый закон робототехники Азимова: "Робот не может причинить вред человеку или своим бездействием допустить, чтобы человеку был причинён вред", то первый закон проектирования интерфейсов должен звучать примерно так: "Компьютер не может причинить вред данным пользователя или своим бездействием допустить, чтобы данным был причинён вред".

47 Джефф Раскин,дизайнер интерфейсов

48 Вы, возможно, знакомы с конструктором сайтов Tilda. Во многом он очень удобен, но может потерять ваши данные. В интерфейсе создания тестов кнопка "Сохранить" находится в самом верху и залипает в окне - если компьютер выключится, все ваши данные потеряются навсегда, придётся всё делать заново:

49 Скриншот: интерфейс Tilda / Skillbox MediaПоложительный пример отношения к данным - Figma. Ваш проект сохраняется каждую секунду, и для этого не нужна кнопка "Сохранить".

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

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

52 Скриншот: сайт Mail.ru / Skillbox MediaКак только пользователь начинает вводить пароль, форма начинает на него "кричать", указывая на недопустимость пароля:

53 Скриншот: сайт Mail.ru / Skillbox MediaЛюбое дополнительное поле ввода - это новый барьер для покупателя на пути к покупке. Поэтому просить пользователя писать фамилию и имя в разных полях, как это делает Adidas, очень странно. Почему нельзя было сделать для них одно поле?

54 Скриншот: сайт Adidas / Skillbox MediaВозможно, Adidas не смог решить техническую задачу, переложив всё на пользователя. Но почему-то Ozon справился с полем ввода имени:

55 Скриншот: сайт Ozon / Skillbox MediaНо и у Adidas, и у Ozon в формах заказа зачем-то сделано аж по девять полей ввода, включая почтовый индекс, который никто и никогда не запоминает. Интернет-магазин DNS обошёлся двумя - имя и полный адрес до квартиры:

56 Скриншот: сайт DNS / Skillbox MediaЕсли у вашего дома есть литера или корпус, то заказать что-либо в Uniqlo вы не сможете. Сайт просто не поймёт, что это за дом такой со странными буквами, хотя сам же и предложил его выбрать в выпадающем списке:

57 Автор текста за 20 минут так и не смог разобраться, что от него требуется. Видео: Skillbox Media<ul><li>Обратная связь программы должна быть мгновенной и ненавязчивой.</li>

58 <li>Пользователь каждую секунду должен понимать, в каком режиме работает интерфейс.</li>

59 <li>Сценарии использования приложения должны быть очевидными.</li>

60 <li>Не подменяйте стандартные элементы управления, особенно если люди к ним уже привыкли.</li>

61 <li>Не заставляйте программу делать то, о чём её не просит пользователь.</li>

62 <li>Уберите с сайта всплывающие окна. Или сделайте так, чтобы каждый пользователь видел их только один раз в жизни.</li>

63 <li>Делайте всё, чтобы данные пользователя были в безопасности.</li>

64 <li>Упрощайте форму регистрации или заказа, насколько это возможно.</li>

65 </ul>Больше о дизайне интерфейсов

66 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>