Об элементах управления — ПИПМАЙ: Лучшее со всей сети

Об элементах управления

Горячо приветствую вас, мои изумрудные пипчане! *и в этот момент они поняли, что надо бежать*

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

Для начала, конечно же, надо определить определения.

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

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

Элементы управления нужны для управления состояниями функций механизма.

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

Так вот. Для того, чтобы что-то понимать, человек должен владеть информацией. И элементов управления это тоже касается.

Какая информация необходима пользователю для корректного использования элемента управления?

1) Механизм - состояние функции какого механизма изменяется посредством данного элемента управления.

2) Функция - состояние какой функции изменяется посредством элемента управления.

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

4) Текущее состояние - состояние, в котором находится функция механизма на данный момент.

5) Порядок воздействия - то каким образом надо взаимодействовать с элементом управления, для достижения необходимого состояния функции.

Тут, конечно, если доработать терминологию и теоретическую базу, можно научную диссертацию написать вообще. Но мы тут не за этим. Смотрим картинку:

Вот тут полный комплект по информации:

Механизм - есть (Robo wife 3000)
Функция - есть (Panic)
Возможные состояния - есть (Off, So so, Full ahead)
Текущее состояние - есть (ползунок сверху, указывает, что Full ahead)
Порядок воздействия - есть (двойная стрелка показывает, что надо двигать ползунок вверх-вниз)

Надо ли всё это? Разумеется, нет! (Если в качестве пользователей не предусматриваются вообще аборигены из лесов, конечно)

Информация о механизме пользователю зачастую известна или сразу, или определяется им по тому, на чём расположен сам элемент управления.

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

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

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

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

Тумблеры и многие кнопки самим своим устройством показывают, что управляют только двумя состояниями: "вкл." и "выкл.", так что они часто не перечисляются.

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

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

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

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

Но это всё не просто так, теоретическое отступление было. А для формирования понимания того, какая информация пользователю нужна для использования элементов управления, и какую он, соответственно, ожидает получить.

С тем, что отображать надо, а что не надо, разобрались, едем далее.

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

включено - активировано - задействовано - вперёд - больше - шире - выше - правее - ярче - цветнее - громче - наполненней - вдавленней - по часовой

выключено - деактивировано - незадействовано - назад - меньше - уже - ниже - левее - тускнее - монохромнее - тише - опустошённей - выпуклей - против часовой

Если кто не заметил, то эти ассоциативные ряды состоят из противоположных по значению слов.

Что это значит и как этим пользоваться?

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

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

Включение для тумблеров - это вверх или вправо.

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

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

Разумеется, никто не запрещает использовать несколько способов передачи состояния, если они из одного и того же ассоциативного ряда. Например:

Интуитивно понятно, что слева что-то выключено, а справа включено. Что об этом говорит? Справа: ярче, цветнее, вдавленнее. И даже абстрактная пиктограмма прямее и больше заполняет площадь кнопки делая её заполненнее.

Пиктограмма, кстати, может нести информацию о механизме, о функции и о текущем состоянии функции одновременно. 

Обратите внимание на то, что подчёркнутые слова, характеризующие кнопку во включённом состоянии, все из одного ассоциативного ряда.

Самое время вспомнить про такую штуку как кнопка subscribe на youtube, являющуюся характерным нарушителем паттерна, потому как эта кнопка ярче выглядит, когда пользователь не подписан на канал, и тусклее, когда он подписан. Причём и по сей день, даже когда она чёрно-белая. Довольно неординарный и редкий случай.

Почему так сделано? У этого нарушения паттерна может быть целый сонм причин, конечно же производных от "ради прибыли". Одна из которых в том, что это могло быть сделано специально для увеличения активности. Большая броская плашка тем более когда-то в красном цвете так и просила удалить себя с экрана прямо на бессознательном уровне, что можно сделать нажав на неё и подписавшись даже на тот канал, на который не особо и хочется. Кто знает, насколько этот ход прибавил активов корпорации google...

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

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

Всем пока!


Раскрыть
maksnotelk
1 месяц назад

мои изумрудные

Это ты кого косплеишь?Изображение

+2
2 Нырнуть
1 месяц назад

Да вроде никого не собирался. Пипцы просто зелёные, а наиболее драгоценное из зелёного — изумруд :)

+2
3 Нырнуть
maksnotelk
1 месяц назад

Хех, просто непривычно тутИзображение

+1
redactor666
1 месяц назад

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

В прошлый раз я говорил о кнопках в плеере, давайте и сегодня разберём похожий момент. Возьмём немного устаревший механизм — магнитофон. Это устройство имеет в себе механические кнопки. У них есть индикаторы действия (гравировка) и индикатор состояния (допустим при нажатии кнопка углубляется или загорается какой-нибудь индикатор). В магнитоыфоне мы не просто вызываем действие, а делаем это на определенное время. Например, чтобы пролистать вперёд на три секунды, мы активируеи кнопку перемотки вперёд, скажем, на секунду. Мы переключим переключатель в активное положение, а затем деактивируем его. 

Похожие кнопки есть в текстовом редакторе постов и комментариев. Кнопки всегда отображают своё действие и при этом переключаются в нужное состояние на объектах. Например, если клацнуть на слово с жирным начертанием, кнопка соответствующего начертания станет активной.

А ещё есть пульт от магнитофона, там кнопки имеют индикаторы действий и в редких случаях состояния — лампочку где-то сверху (не путать с ИК-диодом).

Цифровые технологии позволяют объединить в себе индикаторы действия и состояния в один. Мы просто нажимаем на кнопку, действие происходит, индикатор действия меняется. Например, в некоторых интерфейсах мы можем увидеть гибридную кнопку редактирования/подтверждения. Допустим, мы видим кнопку «редактировать», нажимаем на неё, индикатор меняется на «отправить» ну или «отменить». 

В этом абсолютно нет ничего плохого.

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

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

Про индикацию кнопок вообще можно говорить долго. На переключателях по типу «выключателя» их вообще два. Каждый индикатор отображает действие, которое будет активировано при переключении положения в сторону этого индикатора. Самый растространённый — вкл/выкл, когда с одной стороны нарисована «палочка», а с другой «кружочек». И как бы незнающий человек не поймёт, какое положение кнопки отвечает за какое действие? Может быть индикатор действия должен быть к пользователю ближе? Ну это мы знаем, что не должен.

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

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

Кстати, были ещё словесные кнопки. Что они должны отображать? Действие или состояние? Например «Заблокировать/Разблокировать» или «Разблокирован/Заблокирован»? Наверняка первое, да? С индикацией также.

0
2 Нырнуть
1 месяц назад

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

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

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

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

— Она неверно передаёт информацию о текущем состоянии функции (показывает колокольчик тогда, когда функция не включена, и показывает перечёркнутый колокольчик, когда она включена)

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

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

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

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

+1
3 Нырнуть
Gimalaevॐ
1 месяц назад

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

4 Нырнуть
1 месяц назад

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

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

Хочешь доказывать свою точку зрения — приведи пример проекта с удобным интерфейсом, дизайн элементов управления которого противоречит тому, что высказано в этом посте. Разберём подробно, посмотрим. Доводы в пользу моей точки зрения высказаны в посте, а ты, вместо того, чтобы приводить свои, пытаешься дрочить мне мозги оспаривая не доводы, а мою компетентность.

Именно по этой простой причине иди-ка ты мемась, в обнимку со своей просьбой, горец.

-1
DoctorrHamster
1 месяц назад

Духота. Щас бы форточку открыть, но блин, там снаружи минус 20, а у меня кот

+2
2 Нырнуть
1 месяц назад

Ну, за смешнявочками и мемасиками — это уж точно не ко мне.

3 Нырнуть
DoctorrHamster
1 месяц назад

А можно все сделать как-то проще? Я вон тоже мемы не пилю, я про работу рассказываю 

+2
4 Нырнуть
1 месяц назад

Ну и рассказывай про работу. А я вот рассказываю про куда более сложные для понимания вещи, стараюсь объяснить доходчиво. Можешь сам попытаться объяснить людям какую-нибудь сложную мысль и обязательно в комментарии припрётся кто-то и назовёт тебя душнилой. Я бы тебе сказал какой ты уже по счёту, но я вас не считаю. Обычно только говорю, что есть тег «рыбля воротит нось», которым я помечаю такие посты, специально для вас, чтобы вы могли его заблокировать и дышать свободно — в обсуждение под такими постами вы в любом случае ничего полезного не вносите, так что грустить не буду, обещаю. 

+1

Новые комментарии