После того, как вы нашли элемент, вы можете узнать его содержимое и свойства, а таке поменять их

let el = document.querySelector(".someClass");
el.innerText // текстовое содержимое
el.innerHTML // HTML-разметка содержимого
el.outerHTML // полная HTML-разметка
el.offsetWidth // ширина, аналогично Height
el.offsetLeft // координата левого угла
// и так далее

Назначенные узлу стили можно узнать через свойство sytle:

el.style.color // цвет текста

Но в нём содержатся только те CSS-свойства, которые назначены непосредственно узлу. Чтобы узнать все свойства, которые получил узел из CSS-стилей, потребуется более сложная конструкция:

getComputedStyle(el).color // цвет текста

Если захотите узнать более сложные свойства, то не забудьте преобразовать их названия в camelCase. Например: background-color → backgroundColor;

Подробнее в видео: https://youtu.be/kM8YAhsaHfE
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

Дизайнеры носятся с «эмпатией», но мало где объясняют: как её развивать.

Дизайнеры носятся с «эмпатией», но мало где объясняют: как её развивать.

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

«Голландские психологи показали (http://journals.sagepub.com/doi/full/10.1177/0305735616654216), что профессиональные музыканты не только точнее интерпретируют сочетания визуальных и звуковых стимулов, чем люди без музыкального опыта, но и легче считывают эмоции другого человека по его изображению и звучанию его голоса.

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

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

Оказалось, что музыканты оценивают сочетание звука и изображения точнее, чем немузыканты, даже если их просят ориентироваться не на звук, а на изображение. Музыканты верно определяли, какую эмоцию выражает голос, почти в 95% случаев, если фотография совпадала по настроению, и более чем в 85% случаев, если картинка противоречила звуку. Немузыканты отставали примерно на 10% в обеих ситуациях. Когда требовалось определить эмоцию только по слуховому или визуальному источнику, обе группы показывали примерно одинаковые результаты.

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

Source: https://postnauka.ru/lists/91909

Текстовые поля для Google

Как ребята из команды Material Design пересобрали текстовые поля для Google.
Огромное исследование и куча инсайтов.

Почему поля

Казалось бы, текстовое поле, что думать то? Но не все так просто.

Текстовое поле - один из самых популярных элементов интерфейса. Форма обратной связи, заявки, обязательная информация и т.д. Конверсии, конверсии и еще раз конверсии.

Команда Material Design провели исследование текстовых полей и выяснили, что куча народа, видя поле с чертой и плейсхолдером (серым текстом подсказкой внутри) не понимали, что оно кликабкльное. Как следствие отваливались и не заполняли формы.

Перекладываем на масштаб Google и сразу становятся понятны причины такой дотошности в мелочах. На таком огромном трафике изменение в 1% дает тебе колоссальное бабло.

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

Процесс

Исследование проходило в два этапа:

- сперва участникам оценивали разные варианты дизайна
- потом тюнинг конкретных элементов

Участникам предлагалось взаимодействовать с различными вариантами текстовых полей. Собирались прототипы и задавались уточняющие вопросы. Задействовали 600 человек.

Выводы

Результаты двух исследований показали, что следующие элементы текстовых полей имеют наибольшую ценность:

- Закрытые текстовые поля с прямоугольной формой, лучше, чем те, которые имели подчеркивание в виде линии
- Рамка текстового поля должна быть с полупрозрачной заливкой и нижней линией или без заливки, но с непрозрачной чертой.
- Цветовой контраст линий текстового поля с фоном соответствовал минимальным коэффициентам контрастности 3: 1.
- Текст метки должен быть помещен в пределы рамки текстового поля.
- Текстовые поля должны иметь закругленные углы

После того, как работа была проведена Google обновил у себя все текстовые формы.
Под постом бвдет гифка До и После апдейта.

Защита прошла!

Студенты MAD #5 защитили свои проекты! Ребята молодцы: проделали огромную работу, ответили на вопросы жюри, волновались, конечно, но прошли этот важный рубеж.

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

Во-первых, защита выпала на рабочий день. Из плюсов — пришли действительно заинтересованные зрители, и такой свободный зал не так сильно шумит и пугает во время выступления. Однако, это же и минус — всё же приятно, когда зал заполнен продактами и дизайнерами из крутых компаний, которых ты можешь заинтересовать.
Во-вторых, некоторые проекты были из смежных областей: спорт, мотивация, искусство, здоровье. К счастью, в ходе жеребьёвки они все перемешались.
В-третьих, приятно порадовал уровень визуала. Толи ребята все сплошь с графдизайнерским бэкграундом, толи они прокачались с Александром Ловягиным на блоке UI — как бы то ни было, результат получился красивым.

Теперь о самих проектах, точнее о тех, что зацепили.

Всех поразил проект Labyrinth Алины Русаковой (facebook.com/rusakova.alina) — приложение для горнолыжников и сноубордистов. Когда она выступала, и зал, и жюри были полностью поглощены, само собой, кто-то достал телефоны и снимал. И даже после защиты обсуждение проектов так или иначе заканчивалось её проектом. Если бы у нас были приз зрительских симпатий и признание выпускников, она бы унесла их оба.

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

А вот приложение для борьбы со словами–паразитами Tomato Word от Ани Васильевой (facebook.com/annvasiliska) однозначно мой фаворит. Все эти «эм», «и», «ну», «как бы», «собственно» и прочие — настоящая головная боль для тех, кто готовится к выступлению (Аня сама честно призналась, что была бы рада наличию такого приложения, когда готовилась к выступлению). Простое визуальное решение и платный режим со штрафом в 1₽ за каждое слово–паразит — это огонь.

Идём дальше. Кто бы мог подумать, что между кураторами и художниками нет чёткого канала коммуникации?! Оказывается, так и есть. Аня Пестич (facebook.com/anya.pestich) узнала, почему так происходит, и взялась решить эту проблему и свести их друг с другом в своём приложении re: art (жаль, не знаю, как и почему она докопалась до этой боли). Приятно, что она провела такой ресерч и смогла предложить решение проблем пользователей — именно так и должен работать дизайнер.

Ира Кухтерина (facebook.com/ira.kuhterina) нашла боль в том, что она сильно пала духом, пытаясь найти тему для своего проекта, и это сильно цепляет (год назад сам прошёл через такое же). Чтобы как-то с этим справиться, она создала Nevergiveapp (нейминг, кстати, огонь; у ребят на курсе с этим вообще хорошо) — приложение для поддержки и поднятия самооценки. Жюри очень высоко оценило степень проработки MVP, ведь она практически показала бета–версию, которую уже завтра можно протестировать на себе. Не могу сказать, что такое решение сработает (всё–таки эмоциональные состояния уникальны), но сам факт того, как много она сделала, впечатляет.

Остальные ребята тоже старались, и я мог бы продолжать и дальше, но у нас ограничение по времени (ba-dum-tss), поэтому ограничимся этим топ-4. Впереди у ребят второй семестр, где они будут работать в командах над проектами по брифам реальных заказчиков (даже самому интересно, что за проекты у них будут). Увидимся с ними и с вами уже в 2019 году!🎄

Про изучение пользователей

230 млн лет назад (230! млн. лет назад) по Земле ходили Герреразавры — картинка внизу поста.
Это были относительно легкие двуногие хищные динозавры. У них был длинный хвост и довольно маленькая голова. Длина тела примерно 6 метров, а весили порядка 650 кг.

Строение их тела говорит о том, что они довольно быстро бегали. Стопа герреразавров имела пять пальцев, однако полностью развиты были только три средних (II, III и IV). Два остальных (I и V) не несли на себе нагрузку от тела — они были сбоку и имели только коготь. Хвост был укреплен отростками позвонков и играл роль балансира при ходьбе и беге. На первых трёх пальцах передних лап были крупные загнутые когти ими герреразавры хватали и удерживали добычу. Догнал, схватил и съел.

О зверюге, которая жила на Земле 230 миллионов лет назад (аж в голове не укладывается цифра), известно больше, чем многим известно о пользователях, для которых создаётся продукт. Если вы не знаете досконально проблемы или мотивации пользователя, то создать классный продукт меньше шансов. Зачастую команда фокусируется на дизайне и функциях, которые в дальнейшем оказываются абсолютно бесполезными.
Если делать продукты для физлиц, то там вероятность "попасть" в потребность выше, так как команда ближе к проблемам физлиц — сами же люди.
Если делать продукты для бизнеса или государства — то лучшие продукты получаются, как правило, у тех, кто либо сам в этом же бизнесе поработал, либо много времени провёл внутри бизнеса, изучая процессы.

В 2015 году, работая в заказной разработке, я был в составе большой группы, которая делала продукт регионального уровня: муниципальные услуги, сервисы для жителей, мониторинг инвестиционных проектов.
И вот мы пошли на приём к мэру одного из региональных городов — приветливый и умный дядька.
Начали обсуждать сервисы для жителей. Один из сервисов был про активных горожан — отметил место на карте, приложил фотку и отписал, что не так. Все видят, голосуют за самые острые дела, а власть расторопно всё исправляет. У жителей, вероятно спрос был бы, если бы власть реагировала на запросы. Но на деле схема оказалась неработоспособной для небогатых городов (а это почти все). Приветливый и умный дядька нам сказал: "Мы уже знаем о таком количестве проблем, на которые не хватает городского бюджета. Зачем же мы будем давать людям ложную надежду и собирать их ещё больше — мы можем реагировать только на самые острые проблемы". Сервис не зашёл.

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

Чему научился

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

- Именно в британке узнал о существовании длинного тире и стал активно его использовать — потому что это правильно;

- Сделал первый и последний (почти) шот на дриббл;

- Количество пинов на пинтересте увеличилось в 20 раз;

- Стал читать/смотреть Варламова (спасибо блоку исследования);

- Читаю описание всех обновлений у приложений;

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

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