Привет. Что ни день, то обновление. 

1. Добавили чёрную (почти) тему. Ждём от вас обратную связь, понравилась ли вам наша черная штучка. Доступна как и остальные темы через соответствующую кнопку (это в шапке иконка с перечёркнутым полузакрашенным кругляшком).

2. Слегка видоизменили цитаты. Теперь в постах и комментариях они выглядят именно так. 

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

4. Теперь можно настроить внешний вид серий. Для этого откройте нужную серию (перейдите в "Мои посты" из бокового меню и из выпадающего списка выберите серию), в верхнем меню нажмите на карандаш (редактировать) и настройте серию.

Вы можете выключить обложку (по умолчанию обложка включена, если обложка не задана, отображается векторная картинка с кругами). Как и ранее можете сменить название серии, но теперь можно добавлять краткое описание.

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

5. То тут, то там поправили визуальные недочёты, пользоваться разделами сайта стало приятнее.

Привет, пипки! Сегодня мы с вами начнём обсуждение того, почему наши пользователи не хотят запоминать простую истину: полосочка сверху - это меню. При первой встрече с этой полоской (что с ПК, что с мобилок), появляется жирная подсказка, что это за зверь такой, и что с ним можно творить.

Для тех, кто не видел

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всем пока!

Обязательный Disclamer: Я обычно пишу большие лонгриды на всякую странную тематику, но в процессах поисков натыкаюсь на кучу мелких историй, растянуть которые в полноценную статью не позволяет даже моя графомания. Поэтому — небольшую подборку странных штук из мира вокруг. Они не особо подвергались проверкам с моей стороны — искать доказательства и подтверждения всего этого времени просто не было. Можно возражать, исправлять и гнобить, кто вам запретит, да?

Где остальные 7 частей? Ну, они на Пикабу и я тут просто продолжаю традицию. Постараюсь вести их переодически.

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

---

История на целый пост, но я чего-то решил вот такой формат. Итак. Что это на фото такое? Подводная лодка? Сигара? Непонятная штука? Давайте я задам вам вопрос: какие самые большие корабли Второй Мировой вы знаете? Наверняка среди них будет Бисмарк и его систершип Тирпиц. Возможно, даже вспомнят про Ямато. Все они были линкорами. По сути, это были стальные монстры, самое мощное оружие той войны. И по сути своей — совершенно бесполезное, как раз в силу своей мощности. О Тирпице говорили, что только слухи о возможности покидания им порта, распугивал все конвои поблизости. А Ямато японские моряки прозвали третьей бесполезной вещью после Египетских пирамид и Великой Китайской стены. Слишком уж он был ценными и поэтому его берегли, как козырь в рукаве. Но до событий в Мидуэйя, японская нация, как, кстати, и Сталин, активно фапали на этих стальных гигантов. Но в отличие от «отца народов» проигрыш в 1942 году немного отрезвил японских милитаристов и вместо того, чтобы закончить всю запланированную линейку кораблей класса Ямато (целых четыре штуки), они произвели два, отложили четвёртый, а третий — полусобранный «Синано» так и оставили в доке. 

Там он болтался какое-то время, раздражая моряков, пока командование планировало стратегию. После того как куча американских самолётов вдребезги разнесла флот Японии, там поняли — авианосцы! Вот оно истинное оружие победы и единственная альтернатива. Но... у нас война тут скоро уже закончится, а мы не успеем создать что-то нормальное. Так, а что у нас там в доке киснет? И вот, вместо линкора Синано стал авианосцем! И ничего, что «рождён он был для другого». Стране нужны авианосцы. Ничего, сделаем в лучшем виде, генерал-сан. Тут подпилим, тут приварим, тут напильничком пройдёмся. И это должно было стать мегасооружением. Его строили с учётом всего опыта, который японцы вынесли из Мидвея. Разнесли лифты подальше друг от друга, укрепили палубы, запихали туда 20 самолётов, построили гиперброню (треть веса от всего корабля), поняли, что 20 самолётов — это как-то мало, поэтому запихали ещё столько же. Потом заполнили промежутки между слоями брони цементом, сделали его оборону от самолётов практически непробиваемой — поставили пулемётов побольше. А потом поднапряглась и ещё немного самолётов впихнули. Результатом должна была стать плавающая крепость. Авианосец первой линии. Бензин, амуниция, ремонт — всё в комплекте. Мега-гипер-супер! Практически непотопляемый левиафан. Самый большой корабль Второй Мировой. Его рекорд по весу смог побить только спустя 20 лет американский авианосец «Энтерпрайз». Короче, я это к чему? На картинке — как раз тот самый Синано. Почему такая фотка стрёмная? Потому что перед нами единственный военный корабль, чьё официальное изображение не было сделано. Во время стройки его фотографировать было запрещено, а после — не получилось. Почему? Да потому что...

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

---

Спорим, вы наверняка натыкались на этот плакат, или как минимум на его пародию. И думаете — блин, как же классно англичане придумали во время Второй Мировой войны. Простой дизайн, но в душу западает. Чувствуется в этом что-то такое, поистине английское. Файв-о-клок, гордость, хладнокровие,  stiff upper lip и всё подобное. 

Твист — этот плакат во время войны никто практически не видел. Да, её разработали для успокоения публики и он должен быть стать продолжением рекламной кампании. Но первые два мемасика (Your Courage, Your Cheerfulness, Your Resolution Will Bring Us Victory и Freedom Is in Peril Defend It With All Your Might) люди посчитали слишком уж форсед мемасиками и активной тупостью. Поэтому в газету Таймс начали писать язвительные письма и вот именно этот плакат по большей части остался лежать на складах, а на стены его не особо клеили, боясь продолжения издевательств над авторами слоганов (вы же знаете, что они существа нервные и тревожные). Короче, тираж посчитали пропавшим.

До тех пор, пока Стюарт Мэнли, владелец книжного магазина не нашёл этот плакат в коробке с вещами купленных на аукционе. Ему он тоже понравился, поэтому вскоре плакат висел в магазине. Многие покупатели захотели себе такой же, но его жена, считала, что делать копии — это не очень хорошо. Но Стюарт, под напором толпы всё-таки сделал 500 копий, и их тут же смели. 

А в 2005 году, этот плакат вышел на национальный уровень, когда репортёр из Гардиан, сделала фото этого плаката. Дело было под Рождество, и все захотели этот плакат в подарок себе или друзьям. А потом через год креатив уже вышел и на мировой уровень. Авторские права? Ну, извините, у нас это уже перешло в национальное достояние.  Поэтому кто хочет тот и печатает. 

---

Так, лайфхак от президента США Форда, на случай важных переговоров. Пункт 1: Заведите собаку. Пункт 2: Научите её по особому жесту рукой подходить к вам и начинать скулить. Пункт 3: Научите её по другому жесту подходить к гостю, смотреть ему в глаза и активно вилять хвостом, демонстрируя неукротимое желание с ним играть. Пункт 4: Профит!

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

---

Да что вы знаете о неловкости? Вот это на фото: Стюарт Руса — один из немногих людей, который побывал на Луне. Астронавт, лучший из лучших и всё такое. Естественно, с ним многие хотели поговорить, пообщаться, спросить о том, как проходили съёмки фальшивой высадки. В том числе и за рубежом. И в 1975 году во время своего турне по Непалу, он выступал перед местными школьниками. Рассказывал, как летел к естественному спутнику Земли, как готовился к этому полёту, и, естественно, как он ходил по Луне. И вот дети задали ему, вполне естественный для детей, вопрос: «А вы там кого-нибудь видели?». Конечно, космонавт ответил — нет, там никого нет. По рядам школьников прошёл шум и его опять спросили — «точно, точно?». «Конечно!» — подтвердил Стюарт — «там пусто». 

Вот только многие в Непале верят, что Луна — это то место, куда их предки отправляются жить. Для них спутник нашей планеты был чем-то вроде рая и последнего пристанища. Короче, Стюарт своей фразой в дребезги разбил их картину мира. И открытыми словами поведал им, что Рая нет. Ну или что их предки были недостаточно хороши, чтобы туда попасть. Что тоже не очень приятно. Пришлось делегации извиняться и рассказывать, что космонавт ошибся и просто невнимательно смотрел. Луна большая и он просто не дошёл.

---

Оказывается, Аркадий Гайдар сразу нацелился на сериал и полнометражку... Ну, то есть на художественный фильм. Сценарий фильма был готов в апреле 1940 года и даже начались съёмки. В какой-то момент времени они оказались под угрозой срыва и Аркадий решил рассказать эту историю в книге, чтобы хоть как-то остаться в истории. Поэтому в формате повести она была написана в сентябре этого же года. Таким образом, получается, что это книга написана по фильму. А сам фильм вышел только в декабре. А да, в оригинале Тимур был Дунканом. Но это имя забраковали как намёк на что-то английское — там как раз пакт Молотова-Рибентроппа, и очередное охлаждение в отношениях с англосаксами.

---

В случае Trunk Bunk пользователь может легко менять месторасположение своего домика, каждый раз выбирая новое дерево. Дизайнер сделал ставку на складную конструкцию, а также на систему ремней и шкивов, благодаря которым финальная структура получилась полностью портативной. По словам Генри Кей Вейна, созданный им домик призван подарить людям возможность провести качественное время наедине с самим собой и природой. Готовая структура имеет легкую конструкцию из алюминия и фанеры, а также форму шестиугольной призмы с откидными гранями, что позволяет укладывать ее в плоскую упаковку для транспортировки. Доступ в домик обеспечивается при помощи регулируемой веревочной лестницы.

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

Давайте начнём с самого главного: добавили тёмную тему.

Тема включается кнопкой «лампочка» в шапке справа.

Конечно же переделали всякое:

1. Общее.

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

б. В постах/фотоальбомах при их просмотре и редактировании, на странице пользователя и комментариев сверху в виде небольшой полоски появилось меню. Оно и раньше было, но отображалось сбоку и не очень корректно работало. При наведении (нажатии в мобильных устройствах) на меню оно будет раскрыто. Меню будет плавать при прокрутке страницы, чтобы к нему всегда был доступ.

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

в. Аватарки пользователей без установленных изображений сменились с «буковок» на Пипу. Пипа будет окрашен в случайный цвет, который был назначен вашему аккаунту системой. Если у вас уже стоит картинка, а вы хотите Пипу, просто удалите картинку, и Пипа появится автоматически. Если же Пипа вам не нравится, установите картинку. Всё просто.

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

Индикатор нахождения пользователя на сайте отныне отображается только тогда, когда пользователь находится онлайн (пока не везде, скоро это поправим).

д. Поменяли содержимое левой панели. Сначала идёт информация о вашем аккаунте (если вы не авторизованы, отображаются кнопки авторизации и регистрации), включающая аватар, ник, рейтинг, ссылки на ваши посты, черновики (при их наличии), альбомы, комментарии и сохранённую информацию по клику «в закладки». Ниже отображается «Лента», это как раз меню с категориями постов, все фотоальбомы и комментарии на сайте и предложения. Ну и в самом низу, как и раньше, блок донатов сайту, правила и контактная информация.

2. Посты.

Колонка постов тоже преобразилась. Всего она принимает два вида. На ПК блок с рейтингом, автором и ссылками будет отображаться слева, на смартфоне и при переходе на страницу поста – снизу.

С нижнего (бокового на ПК) блока дата перебралась наверх, помимо категории туда был добавлен автор поста.

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

Тег «моё», если добавлен, выводится на первое место и окрашивается в акцентный цвет (как шапка).

При создании поста теперь не нужно указывать картинку для предпросмотра. Если хотите показать только одну картинку, просто вставьте её в редакторе содержимого поста. Ранее добавленные картинки будут отображены в самом посте.

3. Комментарии.

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

UPD: 

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

В данном примере Trupbaty121 является автором поста, поэтому его ник имеет бирюзовую подложку. Также его аккаунт верифицирован и имеет галочку. redactor666, то есть я, читаю свой комментарий и вижу у себя жёлтую подложку. А ещё я модератор, имею соответствующую иконку. У админа в щите будет иконка человечка.

С котиком я себе кружку разрисовала. Эта пищевая краска, специально для росписи посуды из которой едят/пьют.

И вторая кружка маме. 

Легенда гласит, что если пописать во все писсуары в правильном порядке, то в середине комнаты откроется портал.

Так-с, с чего бы начать... Да начинать по факту не с чего. Просто ставим себе расширение Stylus (не путать со Stylish): прямые ссылки на версии для Chrome (Yandex/Edge) и Firefox. После установки накатываем стиль. Периодически буду обновлять. В своих темах я ещё меняю некоторые элементы, а не только перекрашиваю их, под своё видение.

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

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