Программистам теперь приходилось думать не только о том, как программа справится с задачей, но и о том, как пользователь справится с программой, чтобы выполнить задачу. Стало ясно, что хороший пользовательский интерфейс может повысить продажи. Если приложение простое и интуитивное в использовании, пользователи большего с ним добьются и останутся довольны.
Первым шагом стала стандартизация. В числе того, что сделал Macintosh, а позже и Windows, было введение в обиход ряда взаимодействий с программами, которые мы сейчас воспринимаем как норму. Меню «Файл» с возможностями вроде «Создать», «Открыть», «Сохранить» и «Закрыть» стало распространённым повсеместно. На диалоговых окнах появились кнопки «Ок» и «Отмена». Все эти команды делали именно то, чего от них ожидаешь.
Своего максимального развития эти идеи достигли в основополагающей книге Алана Купера «Интерфейс. Основы проектирования взаимодействия», в которой были кодифицированы и разъяснены многие дизайн-паттерны, которые пользователи уже стали воспринимать как должное, а также был проложен путь для новых идей, призванных усовершенствовать взаимодействие между людьми и компьютерами.
Увы, в наши дни всё, что окружает нас в сети, показывает, что эти, очень дельные и полезные, соображения понемногу утрачиваются.
Кнопка «Ок» отмирает
Одним из фундаментальных принципов, широко применявшихся в разработке графических пользовательских интерфейсов, была предельная ясность относительно того, какое действие будет выполнено при клике мышью. Если, скажем, пользователю выдается диалоговое окошко с рядом вариантов, из которых нужно выбирать, на нем всегда должна быть кнопка «Ок», которая сохранит внесенные изменения, и кнопка «Отмена», которая их отклонит.
Кнопки «Ок» и «Отмена» играли важную роль. Пользователь мог зайти, например, в «Настройки», изменить там какие-то параметры, а затем нажать на «Ок» и быть уверенным, что изменения вступили в силу. Но нередко бывало и так, что человек что-то поменял, а потом подумал: «Хотя нет, хочу, чтобы всё было как раньше». Тогда он нажимал кнопку «Отмена», и всё возвращалось в исходную точку. Никакой трагедии.
К сожалению, эта простая и понятная схема каким-то образом затерялась при переходе в интернет.
В интернете часто можно видеть страницы с настройками без кнопок «Ок» и «Отмена». Вместо кнопок нужно нажимать на крестик в правом верхнем углу – тогда диалоговое окно закроется, а все внесенные изменения сохранятся.
Но что если вы внесли изменения, а потом решили, что они вас не устраивают? Как тогда всё сбросить и пренебречь этими изменениями? Никак. Ответственность теперь на вас, бедолаге – придется самому вспоминать, что именно вы меняли, и приводить всё в прежний вид. А вспомнить порой бывает непросто.
Еще того хуже, когда для закрытия диалогового окна вообще нужно кликнуть на область экрана за его пределами, а потом сидеть и думать: «Так мои изменения сохранились или нет?» Кнопки «Ок» и «Отмена» необходимо вернуть.
Требуется ловкость при управлении мышью
Другое изменение, которое действует на нервы – от тех, кто пользуется мышкой, теперь требуется хирургическая точность в движениях (не говоря уж о тех, кто пользуется тачпадом). В какой-то момент выполнение обычных действий стало возможно только с прокачанной мелкой моторикой.
Одна из замечательных возможностей, которые дают нам графические пользовательские интерфейсы – изменение размеров окон, а также перемещение их по экрану. С приходом мониторов очень большого размера, это стало вдвойне полезным. Однако поставщики операционных систем (недобро кошусь на вас, Windows) начали создавать сложности при растягивании и перемещении.
В новых версиях Windows я поразительно много времени трачу на то, чтобы захватить мышкой нужный участок в углу или на краю окна приложения и изменить размер. Если же мне нужно перетащить окошко, часто бывает трудно отыскать подходящее место в верхней части, которое можно захватить для перетаскивания. Раньше у окон приложений были бросающиеся в глаза заголовки, разглядеть и кликнуть не составляло проблемы.
Посмотрите на вкладки в своем браузере. Если у вас, как и у большинства людей, их открыта целая куча, то куда же вы поставите курсор, чтобы переместить окно в более удобное место?
Раньше такие аффордансы (этот термин ввел в обиход Дон Норман в своей замечательной книге «Дизайн привычных вещей») можно было быстро найти и без труда использовать. Границы окна были шире, и ухватиться за них было проще; то же можно сказать и о заголовке. Но, как я понимаю, ради эстетичности границы истончились до предела, и теперь попасть на них мышкой не так-то просто.
Это что за приложение?
Идем дальше. Случается такое, что я вообще не уверен, какое приложение сейчас передо мной. В прежние времена приложения ясно заявляли о себе – в заголовке значилось их название. Сейчас не то.
Вот, например, какое это приложение?
Ну да, понятно, что браузер. Но какой именно – Google Chrome? Firefox? Кто бы знал. На самом деле, это Microsoft Edge. Но как я должен об этом догадаться, глядя на приложение? Насколько вижу, этой информации там просто нет. Нужно переходить куда-то еще, чтобы разобраться, что же все-таки перед тобой. Гр-р-р.
Свою тираду о Microsoft Edge как неотвязном и совершенно неустранимом раздражителе отложу до другого раза.
Всё стало серым
Цвет – действенный индикатор. Мы знаем, что если перед нами что-то красное, нужно быть настороже, а если зеленое – можно расслабиться и наслаждаться жизнью. В пользовательских интерфейсах цвет также приносил много пользы. В золотой век графических интерфейсов было принято делать кнопку цветной, чтобы показать, что она активна и на нее можно нажать, а неактивные кнопки оставлять серыми. Подобным же образом активные вкладки раньше маркировались яркими цветами, а неактивные – тусклыми, серыми.
Вот, например, какая из этих вкладок активна?
В какой-то момент дизайнеры, похоже, решили, что серый и черный – аккуратные, стильные цвета, и перестали пользоваться яркими оттенками, чтобы размечать границы и описывать состояния. Я видел даже такие интерфейсы, где выбранный элемент отмечался темно-серым цветом, а невыбранный – светло-серым. Послушайте, серый цвет – это вообще не про активность или сфокусированность. Синий – да. Зеленый – да. Серый – это отсутствие фокуса.
Мне кажется, произошло следующее: дизайнеры пришли к справедливому выводу, что серый действительно предпочтительнее черного, а затем слишком увлеклись этой мыслью и стали красить серым всё подряд. Но серый не предпочтительнее всех прочих цветов.
Главное – эффектность
Меня печалит то, что для разработчиков приложений и операционных систем эффектность как будто бы стала важнее, чем полезность и простота в использовании. Работать с программами должно быть легко. У людей должна быть возможность делать то, что им нужно, не прилагая лишних усилий и не гадая: «Что это сейчас произошло?» Хорошо то приложение, которое просто выполняет свою задачу, не заставляя меня ломать голову или читать мануалы. Форма – это важно, но приносить функциональность в жертву на алтарь формы – это провал. Ну да, согласен, мелкий жемчуг. Но эта эпидемия плохих решений в юзабилити очень раздражает и разочаровывает. Раньше было лучше.
Комментарии (38)
drblez
21.06.2024 09:09+5Попробуйте быстро найти в insomnia окно с настройками... С каждым выпуском приложение становится хуже и хуже. Придется переходить на postman, он пока не такой кривой в части интерфейса )))
И да, кнопки Ок и Отмена -- нужны
ti_zh_vrach
21.06.2024 09:09+5Конечно переходите. Там в последних версиях для импорта коллекции запросов из файла надо завести учётную запись. Да и для почти всего остального функционала. А обновления нельзя отключить. Приходится сидеть на 10.0.1 с удалённым "Update.exe" (или как его там). Очень прямой интерфейс.
skymal4ik
21.06.2024 09:09+4Плюсую, ушел с постмана именно из-за этого, постоянное навязывания учетных записей, облаков и прочей байды, которая мне не нужна в таком софте. Вот это действительно отвратный путь развития интерфейсов.
asergrisa
21.06.2024 09:09+2А я с Postman перешёл на Insomnia несколько лет назад. Т.к. Postman бесил привязкой к учётной записи, сложным интерфейсом и т.п. Теперь мне надо переходить с Insomnia на что-то ещё по тем же причинам. Но вот куда не знаю
hurtavy
21.06.2024 09:09+2Мелкая моторика? Ловкость при управлении мышью? Да ладно! Тут же отступы больше, чем сами иконки. А уж если открыть "Все приложения"...
CitizenOfDreams
21.06.2024 09:09+8Мелкая моторика? Ловкость при управлении мышью? Да ладно! Тут же отступы больше, чем сами иконки.
Вот такой парадокс. Иконки огромные, расстояния между ними огромные, а мышкой приходится работать гораздо ювелирнее, чем в Виндовс-95. Причем вслепую, потому что фиг его знает, где на этом сплошном сером окне тайтл-бар, за который его можно двигать, где уголок, за который его можно растягивать, где скроллбар, которым можно скроллить содержимое, а где пустое пространство, куда можно щелкнуть правой кнопкой и вставить файл.
Mirn
21.06.2024 09:09+1а ещё стал пропадать прогресс бар. порой ждёшь не секунды а минуты, но ничего не показывается. Приложение или сайт просто висит. Ну ладно, это так сложно заполнить полоску или показать крутилку современным UI инженерам, понимаю. Но можно же блин хотябы вывести сообщение "пожалуйста, подождите" или какое лого при запуске программы...
особенно если это не опенсурс а инженерный софт за десятки килобаксов/штука...
Astroscope
21.06.2024 09:09прогресс бар
С ним не все так просто. Рисовать его "от балды", что на самом деле более чем распространенная практика, не дает объективной обратной связи, но да, выглядит красиво и "плавно". Рисовать его как процент от прогресса выполняемого процесса - все сложнее, потому что а как рассчитать, потому что не красиво и плавно. В общем, одни проблемы, на которые нет ни ресурсов разработчиков (скорее сарказм), ни вычислительных ресурсов (тут уже без шуток, потому что до безумия разжиревший софт выедает все то, чем не без гордости могут похвастаться современные системы - это вам не песочные часы эпохи Win 3.1).
d_ilyich
21.06.2024 09:09+2В Windows, начиная с WinXP (если не ошибаюсь), появился специальный стиль прогресс бара - PBS_MARQUEE. Индикатор крутится бесконечно, просто показывая некую активность. Даже в процессе загрузки ОС он был. Теперь кружочки да бублики.
MaFrance351
21.06.2024 09:09+3показать крутилку
Такое тоже делают. Только сейчас проблема в том, что делают без малейших подробностей. Крутится-вертится, а о том, происходит там что-то или всё давным-давно зависло, остаётся только догадываться...
(а в конце загрузки выскакивает "Ой! Что-то пошло не так!")
ruimage
21.06.2024 09:09По поводу фронтенда. Ну так как тут показать прогресс, если 99% общения с бэком идёт через http. Все что можно сделать по стандартному КРУДу это отправит запрос и ждать результат.
Хотите прогресса - надо расширять простую круд точку либо в пуллинг, либо в эмиттеры. Первое это долбить сервер фактически мусорными запросами. Второе - задолбаешся вебсокетв на каждый чих поднимать. А кроме того бэкенд ещё должен реализовать отдачу статуса. А это тоже не так уж просто сделать всегда.
А время это деньги. Когда есть вариант сделать прогресс или крутилку, вдруг оказывается что для заказчика гораздо приятнее крутилка. Потому что дешевле.
Если есть простой способ решить этот вопрос - киньте в меня, я буду счастлив.
MaFrance351
21.06.2024 09:09+2Во фронтенде это было почти всегда. Ну, раньше был бесконечный прогресс-бар как в Windows XP при загрузке и надпись "Соединение...". А вот то, что сейчас это переезжает в приложения, где процесс всё ещё можно контролировать, весьма печалит.
SadOcean
По поводу ок/отмена сам же Алан Купер писал, что это - плохой паттерн.
Он перекладывает ответственность с косяков программы на пользователя.
Иногда это важно, просто потому, что действие действительно нельзя отменить.
Но во многих случаях нужно просто дать возможность человеку вернуть все как было.
Соответственно с чекбоксами настроек - когда ты выбираешь чекбокс, тогда эта настройка и применяется.
Тебе не нужно думать о том, чтобы это "сохранить".
Собственно это второй атавизм, от которого все избавляются (пусть и не идеально).
Нет никаких "сохранить", эта деталь не нужна пользователю.
Пользователь видит, к примеру, документ таким, какой он есть. Когда он откроет его снова - он снова увидит его таким.
Если он изменил что-то и ему это не понравилось, диалог сохранения не поможет - пользователь так же может сохранить новую версию.
Что ему поможет - это история изменений и возможность откатить их даже в следующей сессии редактирования и т.д.
В диалоге автора конечно есть правда - качество софта во многих отношениях деградирует по разным причинам.
С другой стороны, в этом разнообразии мы можем видеть и действительный рассвет интерфейсов. Сверкающие самородки в море г*вна(
Revertis
Вы ничего не поняли, он писал о диалогах с галочками, например. Кнопка "Отмена" закроет диалог без применения изменений. А кнопка "Закрыть" где-то в углу, серым по серому - это плохой вариант.
SadOcean
Он писал о действиях в целом и попапах подтверждения.
В примере выше настройки применяются мгновенно, а крестик - выходит из окна.
В случае если это попап пользователь конечно может запутаться и решить, что непонятно, как применить настройки.
Оно может вводить в заблуждение в том смысле что выглядит как окно выбора, а является окном состояния
Revertis
Он писал о диалогах, в которых юзер что-то меняет.
d_ilyich
Раньше в windows были диалоги с трема кнопками: [ОК], [Применить], [Отмена]. [ОК] - применить и выйти; [Применить] - применить без выхода; [Отмена] - отменить и выйти. Я полагаю, это сделано по следующей причине.
Представьте, что изменение настройки приведёт к перерисовке интерфейса, пересчёту чего-либо или ещё к каким-либо ресурсозатратным последствиям. Если применять (не просто сохранять, а именно применять) настройки при любом изменении, это будет неприятно. Поэтому может быть целесообразным изменить несколько параметров, применить, посмотреть -- хорошо или плохо -- и продолжить или закончить.
Если наменял много, но ещё не применил, а потом передумал -- [Отмена]. Если применять сразу, то придётся все изменённые опции откатывать. Для этого нужно будет их как-то выделять, чтобы было явно видно. А если их много на разных вкладках?. Наверное, можно приделать кнопку [Восстановить прежние параметры], но тогда получится замена одной кнопки [Отмена] на другую.
SadOcean
Ну если параметр применяется мгновенно, зачем тогда кнопки ок/применить и вообще диалог?
На самом деле причин может быть много и для некоторых определенно будет хорошо и безопасно сделать попап.
Но точно так же во многих других случаях это не требуется и можно сразу сделать/изменить то, что хочет пользователь.
Там были примеры, что скорее нужно поддержать кнопки отмены.
Ну и как вы заметили, никакой защитный диалог может не помочь если вы применили его и решили, что это не очень работает и надо вернуть.
Все равно нужно думать о кнопке восстановить, отмены, сбросить на настройки по умолчанию и т.д.
alan008
Дело не в том, сколько кнопок в диалоге , а в том, как сформулирован текст диалога.
Примеры хороших диалогов:
Настройки будут сохранены. Продолжить? (Да/Нет)
Сохранить выполненные изменения? (Да/Нет/Отмена) - в данном случае "Да" выходит с сохранением, "Нет" - выходит без сохранения, "Отмена" - возвращается обратно в редактирование (не выходит)
d_ilyich
Не понял -- на каком этапе это предлагается? При закрытии окна настроек? Т.е. в самом окне настроек только кнопка выхода, при нажатии на которую дополнительное окошко появится? По-моему, не очень хорошо.
Gummilion
Не знаю, меня эти «Да/Нет/Отмена» всегда путали - что надо нажать, когда случайно закрыл, чтобы не закрывать? Тем более что в этой ситуации бывает «Выйти? Да/Нет» или "Сохранить? Да/Нет", и надо каждый раз думать, что скрывается за «Нет».
alan008
Дело не в том, сколько кнопок в диалоге , а в том, как сформулирован текст диалога.
Примеры хороших диалогов:
Настройки будут сохранены. Продолжить? (Да/Нет)
Сохранить выполненные изменения? (Да/Нет/Отмена) - в данном случае "Да" выходит с сохранением, "Нет" - выходит без сохранения, "Отмена" - возвращается обратно в редактирование (не выходит)
gyzl
Это смотря где. В каком-то электронном магазине, кажется МВидео (но могу ошибаться), в фильтре товаров после нажатия каждой галочки происходит мгновенная фильтрация и страница перезагружается. Причем с задержкой. Я только поставил одну галочку, уже жму вторую, и тут всё пропадает. К тому же это еще и медленно.
Что заставило их отказаться от кнопки ОК (применить фильтр)?
Хотя была и есть куча людей, которые игнорируют клавишу Enter. Если надо ввести что-то в поле ввода - вводят текст, потом сидят и смотрят на него, ожидая чуда. Но это решается обучением. Неужели надо теперь выпилить клавишу Enter и автоматически применять любой ввод, например, по таймауту?
Paranoich
В озоне точно так. Чтобы отфильтровать цвет сиди и жди, пока он по цене отфильтрует, а потом приступай к фильтру по ещё одному критерию.
Есть ещё хуже, не по таймауту, а по последнему символу. Банки, магазины — все вот эти любят подобное при вводе кода подтверждения из СМС. Маленькие циферки на смартфоне, зрение не очень и когда-нибудь ошибешься. Первые три (пять) циферок ввёл, на последней ошибся и хана, давай заново.
Или ещё более запущенный случай — подобный ввод, но телефона. В него можно вставить скопированный код, например из менеджера паролей, но что будет неизвестно. Надо «+7» или не надо. Нужны пробелы или нет. А кто-то ещё до сих пор разделители (минусы) хочет.
В мегафоне (кажется) вообще непонятно что вводить, пока не начнёшь не узнаешь, что +7 подставится само, хотя вначале окошко чистое.