Поясни за UX

2021-05-04 11:00:54 Accessibility in Android⠀
На прошлой неделе мой коллега Игорь Калугин (senior software engineer) рассказал про доступность мобильных приложений на андроид. Делюсь основными тезисами.

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

Встроенные сервисы Андроид
TalkBack – скринридер, который озвучивает интерфейс и возможные действия с интерактивными элементами. Порой описание элемента (особенно для изображений) нужно вносить вручную в код. Элементы, не важные для использования (иллюстрации, иконки и прочие рюши, блоки форматирования) могут быть пропущены TalkBack, если разработчик задал параметр Skip.
BraileBack – позволяет подключать устройство, которое отображает информацию в виде шрифта Брайля. Там есть панель для чтения руками, кнопки для написания текста и навигации.
SwitchAccess – позволяет взаимодействовать не через тачскрин, а через физические переключатели. Можно настроить кастомное поведение на каждую кнопку стороннего устройства.
Для хорошего Accessibility лучше использовать все эти сервисы одновременно. Настраивать их с нуля не нужно, нужно лишь адаптировать их через Android Accessibility API.

Best Practices
Следуйте гайдам. При чем не только Google Material, но и WCAG (многие принципы для веб легко перекладываются на мобилки)
Минимальные размеры элементов 48 x 48 dp, шрифта 12sp (10sp с вехним регистром)
Не используйте ссылки в середине текстового абзаца – они незаметны и на них трудно попасть + могут вызвать проблемы у скринридера
Выбирайте контрастность и цвет элементов с учетом разных видов дальтонизма и плохого зрения. Плагин ColorBlind вам в помощь.
Не усложняйте интерфейс и выстраивайте четкую визуальную иерархию справа налево сверху
-вниз (в некоторых странах, например в арабских – слева направо). Это упростит взаимодействие для людей с особенностями когнитивного развития, да и для всех вообще.
Всегда указывайте текстовое описание для нетекстового контента (за исключением элементов форматирования и декорирования, которые можно "спрятать" от вспомогательных технологий).
Подписи элементов действия должны быть глаголами. Например, иконка корзины должна быть подписана "Удалить", а не "Корзина".
Добавляйте в видео/аудио субтитры, в которые включены не только слова, но и звуки.
Отслеживайте как двигается фокус от одного элемента к другому. Если "путь" непоследовательный, то скринридер озвучит контент в хаотичном порядке и запутает пользователя.
Составьте Accessibility Statement – документ или раздел в приложении, в котором сказано, что вы поддерживаете людей с ограниченными возможностями и указано контактное лицо, с которым можно связаться в случае вопросов и проблем.

Тестирование
Accessibility Scanner – автоматически протестирует интерфейс на базовую доступность и сгенерит отчет.
Про другие способы тестирования я писала вот здесь.

И наконец, вдохновляющее видео, где незрячий человек использует Youtube на смартфоне: Открыть/Комментировать

2021-05-01 13:26:30 ​​Дарагие! С первомаем вас, с весенним днем труда.

Пост о неожиданной для этого канала, но актуальной теме: заботе о себе.
Про выгорание вы наверняка слышали, а кто-то, возможно, его переживает. Мне кажется, дизайнеры выгорают особенно быстро, отчасти потому, что все время переживают. Если вдуматься, переживать за пользователя – это то, за что нам платят зарплату.

Как распознать надвигающееся выгорание:
1. у тебя нет желания заниматься тем, что раньше приносило удовольствие
2. при этом ты постоянно заставляешь себя работать больше и больше, попутно обесценивая свою работу и себя
3. ощущение собственного "простоя", чувство вины, бессилия
4. ты постоянно раздражителен, можешь устраивать несвойственные тебе истерики по пустякам
5. постоянно чувствуешь себя уставшим и плохо спишь
6. ты не хочешь вставать с постели по утрам и торопишься в нее вернуться вечером

Что делать:
1. осознать, что выгорание – это не лень и не усталость, которая "пройдет"
2. учиться расчищать голову и не думать о работе в нерабочие часы. Это сложно. Помогает техника установки времени на мысли: вы ставите себе четкое время рабочего дня (например с 10 до 18) и, если после него возникают мысли о работе, говорите себе "я подумаю об этом завтра в 10:30", можно даже записать мысль и вернуться к ней в назначенное время. Это методика из психологии, которая позволяет ощутимо снизить стресс.
3. уменьшить количество рабочей нагрузки, не брать дополнительные проекты.
4. декомпозировать задачи на небольшие и достижимые. Удобно выписать план на день в блокнот и ставить себе сердечки/звездочки за каждую выполненную задачу.
5. планировать каждый рабочий шаг, это должно стать вашим ритуалом в начале рабочего дня.
6. разрешить себе не отвечать коллегам на сообщения и звонки, если вы заняты или рабочий день кончился. Порой проблемы сами решаются без вашего участия.
7. чаще видеться с друзьями и близкими.
8. попробовать меньше сидеть в соцсетях, заняться физической активностью, больше гулять.
9. регулярно устраивать себе СПА (домашние маски и ванна тоже считаются), йогу (дома под видос тоже считается), массажи и другие приятные штуки.
10. слушать себя и отдыхать без чувства вины тогда, когда вам это необходимо. Снизить чувство вины поможет мысль, что вы, как родитель в самолете, должны сначала надеть маску на себя. Ведь, если вы не отдохнете сейчас, вы в дальнейшем сделаете работу плохо или не сделаете ее вообще.

Отдых – это необходимость.
Отдохните в эти майские праздники и берегите себя. А если вы чувствуете, что выгораете и хотите об этом поговорить, не стесняйтесь писать в чятик.
Чмок! Открыть/Комментировать

2021-04-29 11:36:01 И, традиционно, карточки-шпаргалки. Чмок!

UPD: пришлось обновить пост, потому что Телеграм не дал перезалить последнюю карточку (были вопросы, поэтому поясняю, что речь про пиктограммы + патпищек сделал классняцкие иконки, не смогла пройти мимо) Открыть/Комментировать

2021-04-29 10:04:58 5 небанальных советов, которые помогут улучшить визуальный дизайн вашего интерфейса.
Не хочется рассказывать об известных вещах, вроде правил внутреннего и внешнего, балансе цветов или шрифтовых пар. К тому же на эту тему у меня есть пост с карточками-шпаргалками.
Вместо этого хочу поделиться не самыми тривиальными и довольно универсальным приемами, которые просты в исполнении и могут улучшить UI вашего проекта.

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

Фоновые текстуры. Стандартный способ отделить блоки от фона – залить его цветом. Но вместо цвета можно попробовать использовать текстуру или паттерн материала: льна, фетра, может даже бетона. Главное сделать текстуру неброской и выдержать весь ресурс в подобном стиле, иначе легко наколхозить. Cмотрится необычно и задает настроение, особенно если сам продукт связан с материалами. Неплохой пример с дриббла.

Маленький радиус скругления. Часто вижу на дрибблашотах панельки и поля со скруглением в 30+ px. В реальном интерфейсе это засоряет пространство, вынуждает делать большие внутренние остступы. К тому же скругления часто отрисовываются плохо и угловато как в редакторе, так и в браузерах. Попробуйте использовать небольшие скругления, интерфейс будет выглядеть чище и спокойнее.

Баланс толщин иконок и текста. Подготовить сет из гармонирующих друг с другом иконок – не самая простая задача. Но еще одна важная деталь, которую мы часто упускаем – текст, который будет жить рядом с иконкой. Здорово, когда толщина линии иконки совпадает с толщиной линии букв. Можно сделать тоньше иконки или увеличить жирность текста.

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

2021-04-28 11:00:07 1998 vs 2021
Ностальгическая #мемнаясреда Открыть/Комментировать

2021-04-27 12:01:33 Когда не смог определиться с дизайном, зато начитался про пользу кастомизации.
UPD: патпищеки подсказывают, что это просто демка типового решения для Битрикса, не смешно, расходимся Открыть/Комментировать

2021-04-26 10:09:45 Начало недели и долгожданный пост про уровни UX-дизайнера: кто есть кто и кто из них вы.
Описывать буду вкратце (очень), чтобы просто сложилось общее впечатление и понимание различий в 3 уровнях (про лида не влезло, сори). Если есть вопросы или дополнения - велкам в комментарии.

Junior – владеет базовыми теоретическими знаниями, применял их на практике в простых/учебных проектах. Способен выполнять четко сформулированную дизайн-задачу под надзором старшего дизайнера. Проактивен, не боится задавать вопросы и работать в команде.
Вы джун если:
хорошо владеете теорией дизайн-мышления, UX-дизайна, информационной архитектуры и юзабилити,
знаете основные интерфейсные компоненты и паттерны
владеете базовыми знаниями теории цвета, композиции, типографики, написания микро-текстов
хорошо знакомы с основными гайдлайнами (Google, Apple)
на отлично знаете основные дизайн-инструменты (Figma, Sketch, Adobe XD), умеете делать интерактивные прототипы
сделали 1-2 простых проекта, где занимались дизайном интерфейса (отрисовка иконок/баннеров/лого/иллюстрация/презентации и т.п. – незачет)
представляете как устроены проектные процессы, понимаете принципы Agile-разработки
немного поработали в проектной команде, передавали макеты разработчикам, понимаете какие могут быть трудности и как их решать
работали с несложными UI-китами, составляли библиотеки компонентов

Middle – работал в нескольких реальных проектах, проектировал сложные интерфейсы для разных платформ, участвовал в пользовательских исследованиях. Способен работать на проекте без надзора старших, самостоятельно выяснять и формулировать дизайн-задачи.
Вы миддл если:
умеете и практикуете все, что требуется от джуна
знаете разные методы пользовательских исследований (включая веб-аналитику), хотя бы часть из них применяли на практике
в работе следуете принципам дизайн-мышления, знаете какие методики применяются на разных этапах дизайн-процесса
сделали 3+ сложных проекта, где занимались проектированием интерфейса и исследованиями
способны выстроить наиболее оптимальный путь пользователя в интерфейсе с учетом его задачи, бизнес-требований и ограничений разработки
имеете опыт общения с заказчиком, выяснения требований, презентации результатов и защиты дизайн-решений
способны эстимировать поставленные дизайн-задачи
плотно работали с проектной командой (аналитики/разработчики/тестировщики/другие дизайнеры)
работали с нагруженными UI-китами, представляете что такое дизайн-система

Senior – эксперт в области проектирования интерфейсов под разные платформы и формфакторы, с большим опытом работы на сложных проектах. Может обучать других и курировать младших дизайнеров в проекте.
Вы сеньор если:
умеете и практикуете все, что требуется от миддла
знаете различные фреймворки дизайн-процесса, способны выбрать подходящий под нужды проекта
можете дать экспертную оценку качества интерфейса и UX проекта
можете работать на любом этапе проекта от начальных исследований до поддержки и улучшения
способны спланировать работу по дизайну и пользовательским исследованиям
можете предложить улучшения продукта в зависимости от результатов исследований и аналитики
регулярно презентуете дизайн-решения на большую аудиторию
работаете с продукт-менеджерами, руководителями проекта, стейкхолдерами и командой разработки
декомпозируете и делегируете задачи другим, плотно работаете с проектным таск-трекером
с нуля собираете и поддерживаете нагруженные UI-киты, работаете с полноценными дизайн-системами в коллабе с разработчиками
обучаете и менторите дизайнеров

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

2021-04-24 19:35:52 ​​Оказывается, маскот телекомпании ВИД (кошмар детства) ещё в 2017 году эволюционировал в классную штуку. Кстати, это не Ельцин, а китайский философ.

Анимация топ:

Открыть/Комментировать

2021-04-23 09:28:51 Поставить звёздочки над всеми обязательными полями?
Не, не слышал. Открыть/Комментировать

2021-04-22 09:32:11 Как User Experience, только Urban Explorer Открыть/Комментировать