Как человек решает задачи в интерфейсе

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

1. Сформулировать задачу. Я подписан на один канал в Телеграме. Он хороший, но надоел оповещениями. Хочу их отключить.

2. Выполнить действие. Полагаю, это делается где-то в самом канале. Захожу в ленту, тыкаю на канал. Вижу внизу большую кнопку Mute. Ага, это наверняка она. Нажимаю.

3. Оценить результат. Кнопка изменилась: Mute → Unmute. Рядом с названием канала появилась иконка с перечёркнутым динамиком. Полагаю, оповещения выключены.

На каждом шаге интерфейс может помогать, а может вставлять палки в колёса. Вот как это бывает:
https://antonz.ru/user-actions/

Насмотренность - Напользованность

Если хочешь делать продукты с хорошим пользовательским опытом — развивай свой личный пользовательский опыт.

Очень часто пиарят важность насмотренности: ходи на Бехансы и смотри, что крутые рисуют.
Это, конечно, лучше чем не ходить, но в бою с хреновым UX пригодится слабо.
Смотреть как штангу тягают или самому потягать — разные ощущения и опыт.

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

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

В общем, хватит только смотреть — больше пользуйся.

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

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

Думай как Билл Гейтс

Смотрю сейчас на Netflix документальный сериал про Гейтса. Очень увлекательно! В последней серии зацепил диалог следующего содержания:
— Билл, как ты думаешь, Microsoft монополист?
— Если монополия это большая доля рынка и краткосрочная власть над ним, то ответ да. Если вы подразумеваете, что у нас непобедимая позиция и никакой более удобный и эффективный продукт не может её пошатнуть, ответ нет.

И ведь правда. У слова монополия очень сильная негативная составляющая. Но разве это плохо? На свободном рынке, если не рассматривать государственные и прочие нечестные монополии, большая доля рынка говорит о том ,что продукт хорошо решает проблемы пользователя. Да, он может быть кривой и показывать вам периодически "синий экран сметри". Но он, чёрт побери, работает! В сериале есть вставки из хрорники, где народ расхватывает коробки с Windows 95, буквально сметает её с полок :)

Сейчас модно ругать Windows. Но ведь именно эта ОС сделала революцию на рынке персональных компьютеров. Сначала её, конечно, сделал Apple в сфере железа. Именно два Стива сделали компьютер персональным (Джобс и Возняк). Но они были нацелены на определенную ЦА. А вот Майкрософт сделал ПК по-настоящему массовым.

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

После просмотра брифа стало ясно, что наша тема это— урбанизация, благоустройство и исследование города.

Правда, первым впечатлением, лично у меня, было непонимание. Довольно сложно уловить все нюансы и проблемы с одного просмотра. Я запомнил только отдельные слова: исследование, бумажные карты, выход в поля.
В голове остались только вопросы, в чем основная проблема? На сколько глобальная тема? Нужно было разобраться с чем мы имеем дело.
Позже нам прислали видео-бриф и многое стало на свои места. Мы смогли расшифровать и разложить по полочкам основные пункты.

На видео вещает Лёля Жвирблис, руководитель отдела исследований в студии транспортного проектирования, она так же работает в проектном бюро URBAN St’14.
Тезисно:
— Для создания удобного полезного пространства для горожан необходимо проводить предпроектные исследования;
— Подобные исследования ложатся в основу таких масштабных проектов, как «моя улица»;
— Важным пунктом исследования является сбор данных с «полей». Чаще всего это опросы, наблюдения, аудиты, подсчёты транспортных и пешеходных потоков;
—Большое количество проблем возникает на этапе сбора данных. Сейчас ни один сервис не отвечает задачам в полной мере, например, в приложении для проведения опросов нет карты для городских исследователей — это неприемлемо;
— Из-за отсутствия внятных картографических сервисов специалисты часто вынуждены работать с бумажными картами;
— Исследователям в полях приходится постоянно переключаться между приложениями и бумажными картами, что дико усложняет контроль за ними;
— Использование бумажных карт очень тормозит обработку данных;
— Всё это увеличивает стоимость, и сроки проекта. Иногда это может быть критично, и от исследования могут просто отказаться.

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

История сравнения двух сервисов на этом не заканчивается.

Напомню, что как в юду, так и в профиру нужно заплатить за то, чтобы твое предложение увидел заказчик (в районе 20-150 рублей).

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

А что там в юду?
Тем временем в юду я, не выходя из приложения, нажал кнопку «стать мастером» и начал свой путь воина — предоставление личных данных, знакомство с внутренними правилами, небольшой тест на усвоение этих правил. И все, можно выходить на охоту за заказами.

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

И каково же было моё удивление, когда на следующий день мне перезвонил один из заказчиков! Он попросил скинуть портфолио, после чего мы минут 20 обсуждали варианты дизайна того приложения, который он задумал.
Мягко говоря я был поражен )

Я считаю мне повезло оказаться в этих ситуациях — данные кейсы отлично проиллюстрировали разницу подходов двух сервисов.

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