Горячо приветствую вас, мои изумрудные пипчане! *и в этот момент они поняли, что надо бежать*
Обещанный пост о том, как делать элементы управления пользовательского интерфейса интуитивно понятными, а не через жопу, блеать! Будет полезным для всех, кто имеет хоть какое-то отношение к разработке пользовательских интерфейсов, да и просто для общего развития тоже. Бесплатная лекция, считай.
Для начала, конечно же, надо определить определения.
Элемент управления это объект, посредством взаимодействия с которым, пользователь может осуществлять управление каким-либо механизмом через его интерфейс. Кнопки, рубильники, рычаги, и даже штурвал парусного корабля - всё это элементы управления.
Под механизмом в вышеприведённом определении понимается механизм в широком смысле. Автомобиль, компьютер, сайт - всё это понимается как механизмы, для управления которыми человеку нужен интерфейс, включающий в себя элементы управления.
Элементы управления нужны для управления состояниями функций механизма.
Например, у механизма "люстра" есть функция "светиться", у этой функции "светиться", есть два состояния "вкл." и "выкл." Переключение состояний этой функции от одного к другому осуществляется посредством настенного выключателя, который является элементом управления пользовательского интерфейса люстры.
Так вот. Для того, чтобы что-то понимать, человек должен владеть информацией. И элементов управления это тоже касается.
Какая информация необходима пользователю для корректного использования элемента управления?
1) Механизм - состояние функции какого механизма изменяется посредством данного элемента управления.
2) Функция - состояние какой функции изменяется посредством элемента управления.
3) Возможные состояния - перечень состояний функции, изменяемых посредством данного элемента управления.
4) Текущее состояние - состояние, в котором находится функция механизма на данный момент.
5) Порядок воздействия - то каким образом надо взаимодействовать с элементом управления, для достижения необходимого состояния функции.
Тут, конечно, если доработать терминологию и теоретическую базу, можно научную диссертацию написать вообще. Но мы тут не за этим. Смотрим картинку:
Вот тут полный комплект по информации:
Механизм - есть (Robo wife 3000)
Функция - есть (Panic)
Возможные состояния - есть (Off, So so, Full ahead)
Текущее состояние - есть (ползунок сверху, указывает, что Full ahead)
Порядок воздействия - есть (двойная стрелка показывает, что надо двигать ползунок вверх-вниз)
Надо ли всё это? Разумеется, нет! (Если в качестве пользователей не предусматриваются вообще аборигены из лесов, конечно)
Информация о механизме пользователю зачастую известна или сразу, или определяется им по тому, на чём расположен сам элемент управления.
Если кнопка на электрочайнике, то при её помощи, скорее всего, управляется этот электрочайник. А вот с пультами дистанционного управления могут быть сложности, так как они несут интерфейс от механизма дистанцированный, поэтому на них хотя бы марку техники пишут, но не всегда.
Информация о функции бывает тоже заведомо известна, но чаще всего должна быть указана явно.
Ну вот на руле автомобиля не указывают, какой функцией автомобиля он управляет; подразумевается, что пользователь знает, и перепутать не сможет, потому что руль как правило один. А вот кнопки магнитолы подписаны, где громкость, например, а где режим радио, потому что их много и перепутать можно, какая за что отвечает.
Информация о возможных состояниях указываться тоже может не всегда. Подавляющее большинство состояний функций механизма, это пара "вкл."/"выкл." и об этом пользователь может узнать исходя из самого вида элемента управления.
Тумблеры и многие кнопки самим своим устройством показывают, что управляют только двумя состояниями: "вкл." и "выкл.", так что они часто не перечисляются.
Информация о текущем состоянии пользователь может так же иметь исходя из наблюдений за механизмом, но очень часто и сам элемент управления должен её отражать, поскольку есть разница между управляющим воздействием и реальным состоянием функции механизма.
Рычаг повернули вправо и бульдозер разворачивается вправо - это разного рода процессы. По положению рычага можно понять, что управляющее воздействие производится, а по поведению бульдозера - происходит ли реальная смена состояния.
Информация о порядке воздействия указывается только в сложных случаях.
На рычаге переключения передач в автомобиле указывается, куда его двигать и по каким путям, потому что сложно и не везде одинаково. А на кнопках не указывают, что их надо жать - это итак всем понятно.
Но это всё не просто так, теоретическое отступление было. А для формирования понимания того, какая информация пользователю нужна для использования элементов управления, и какую он, соответственно, ожидает получить.
С тем, что отображать надо, а что не надо, разобрались, едем далее.
Людям свойственно формировать привычки. И благодаря этому абсолютное большинство элементов управления соответствуют определённым паттернам, чтобы сформированные привычки помогали быстро осваивать новые интерфейсы. И эти паттерны можно расписать в два ассоциативных ряда:
включено - активировано - задействовано - вперёд - больше - шире - выше - правее - ярче - цветнее - громче - наполненней - вдавленней - по часовой
выключено - деактивировано - незадействовано - назад - меньше - уже - ниже - левее - тускнее - монохромнее - тише - опустошённей - выпуклей - против часовой
Если кто не заметил, то эти ассоциативные ряды состоят из противоположных по значению слов.
Что это значит и как этим пользоваться?
Например, вам нужен элемент управления громкостью. Каким он должен быть? В ассоциативном ряду, где есть слово "громче" есть слова "больше" "выше" "правее" и т. д. То есть ползунок при увеличении громкости должен ехать либо вправо, либо верх, либо становиться больше, либо шире, либо вращаться по часовой, а для уменьшения громкости, соответственно, наоборот.
И если вы посмотрите на дизайн регуляторов громкости абсолютного большинства механизмов, вы увидите этот паттерн, обеспечивающий интуитивное понимание того, как пользоваться этими элементами управления.
Включение для тумблеров - это вверх или вправо.
Зная это, вы уже можете понимать из наблюдений, включают или выключают пилоты что-то, щёлкая переключателями в кабине. Ну или понять, насколько был ленив тот, кто ставил выключатели света у вас дома.
Разумеется, никто не запрещает использовать несколько способов передачи состояния, если они из одного и того же ассоциативного ряда. Например:
Интуитивно понятно, что слева что-то выключено, а справа включено. Что об этом говорит? Справа: ярче, цветнее, вдавленнее. И даже абстрактная пиктограмма прямее и больше заполняет площадь кнопки делая её заполненнее.
Пиктограмма, кстати, может нести информацию о механизме, о функции и о текущем состоянии функции одновременно.
Обратите внимание на то, что подчёркнутые слова, характеризующие кнопку во включённом состоянии, все из одного ассоциативного ряда.
Самое время вспомнить про такую штуку как кнопка subscribe на youtube, являющуюся характерным нарушителем паттерна, потому как эта кнопка ярче выглядит, когда пользователь не подписан на канал, и тусклее, когда он подписан. Причём и по сей день, даже когда она чёрно-белая. Довольно неординарный и редкий случай.
Почему так сделано? У этого нарушения паттерна может быть целый сонм причин, конечно же производных от "ради прибыли". Одна из которых в том, что это могло быть сделано специально для увеличения активности. Большая броская плашка тем более когда-то в красном цвете так и просила удалить себя с экрана прямо на бессознательном уровне, что можно сделать нажав на неё и подписавшись даже на тот канал, на который не особо и хочется. Кто знает, насколько этот ход прибавил активов корпорации google...
На а может быть и не по этой причине. Так или иначе, всякий устойчивый паттерн нет-нет, а кто-то да нарушит своим удачным и строго специфическим примером.
В общем, отображайте на элементах управления и рядом с ними только необходимую информацию, используя в том числе и ассоциативный паттерн, не ориентируясь на редкие исключения. Не творите хуйни и домыслов вроде того, что надо информировать о состоянии, в которое перейдёт функция, если нажать на кнопку, и уж тем более не ебите напрасно голову ни себе ни людям; учитесь, познавайте - и всё у вас будет хорошо.
Всем пока!
Когда-то давно, один близкий мне человек занимался вязанными пуховыми изделиями.
Сегодня наткнулся на папку с фото и решил запилить этот пост.
Пуховязальный промысел зародился в Оренбургском крае примерно 250 лет назад, ещё в XVIII веке. По другим данным, вязание пуховых шалей из козьего пуха коренным населением этих мест существовало ещё до образования Оренбургской губернии. Как оно было на самом деле, хрен его знает, но то что вяжут очень давно, это факт.
Оренбургские платки бывают нескольких видов:
Простой пуховый платок (шаль) — серые (редко белые) толстые теплые пуховые платки. Именно с изготовления шалей и начался оренбургский пуховязальный промысел. Наиболее теплый вид платка. Такие платки используются для повседневной носки.
Паутинка — ажурное изделие из козьего пуха тонкого прядения и шёлка. Не используются для повседневной носки. Используется в торжественных, праздничных случаях, так как схемы и приемы вязания намного сложнее, чем простого пухового платка. Обычно используется более чистый и мягкий пух, что удорожает изделие.
палантин — тонкий шарф/накидка, по способу вязанию и применению аналогичен паутинке.
Паутинка и палантин — это очень тонкие, как паутина, платки. Тонкие паутинки имеют, как правило, сложный узор и используются как украшение. Лучшие тонкие паутинки вяжут в сёлах Жёлтое и Шишма Саракташского района. Такая паутинка украсит любое платье вне зависимости от фасона.
Тонкость изделия нередко определяют по 2 параметрам: проходит ли изделие через обручальное кольцо и помещается ли в гусином яйце. Впрочем, не каждое хорошее изделие обязательно соответствуют данным условиям, так как каждая мастерица прядет нить разной толщины, иной раз предпочитая более толстую нить тонкой.
Да, чуть не забыл про косынки. Их тоже вяжут, покупают и с удовольствием носят.
В качестве основы для паутинок используют шёлковую (реже — вискозную или хлопчатобумажную) нить, для шалей используют хлопчатобумажную (реже — лавсанную) нить. В паутинках обычно две трети пуха и одна треть шёлка.
Хороший платок ручной работы вяжут из сучёной пряжи: мастерица сначала прядёт плотную нить из козьего пуха, а затем напрядает её на шёлковую (хлопчатобумажную) нить-основу. Такой платок — паутинка или шаль — изначально не выглядит пушистым. Изделия начинают пушиться в процессе носки. Носится такой платок очень долго.
Хорошая мастерица за месяц может связать две паутинки среднего размера или три палантина. На изготовление платка большого размера или платка с рисунком или надписью уходит месяц и более. Каждый платок — это оригинальное художественное произведение, в которое вложено немало творческого труда и терпения мастериц-пуховязальщиц.
Надеюсь что хоть кому-то было интересно, ну а если нет, закидывайте ссаными тряпками, я не против.
Паписят нах.
Хаир делать надо, пообещал одной девочке паутинку, ну или палантинчик подарить.
Просто так, без каких либо обещаний с её стороны, типа сфотографироваться в этой паутинке на голое тело...
Паписят нах