UX Notes

2022-12-15 14:00:55 Освоить веб-разработку с нуля за 10 месяцев — реально, если правильно выстроить программу и усердно заниматься. Упорство зависит от вас, а о программе позаботился Яндекс Практикум.

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

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

Наших выпускники находят работу в новой сфере. Они берут проекты на фрилансе, устраиваются в стартапы и крупные компании — Яндекс, ВТБ, МТС, Перекрёсток, Playrix, Сбер и другие.

Протестируйте формат курса бесплатно →

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

2022-12-15 11:44:09 Андрей Маркелов написал о дизайне сложных таблиц.

— Шрифты с моноширинными цифрами можно использовать, если в таблице числа не смешаны с буквами (рядом с числом может стоять единица измерения);
— Но лучше использовать полностью моноширинные шрифты, например, очень компактный Ubuntu Mono;
— Числа выравнивайте по правому краю, но текстовые заголовки столбцов с числами — по левому;
— Чтобы повысить читаемость, можно выделить визуальные границы колонок, разорвав разделительную линию;
— Если колонки стоят очень плотно, для отделения разрядов вместо обычного пробела лучше использовать тонкий («thin space», U+2009);
— Единицы измерения обычно пишут в названиях колонок через запятую, но тогда колонка становится шире. Можно располагать их под названием на отдельной строке и выделять цветом;
— Иногда группы колонок полезно сворачивать: для экономии места, для показа результирующей колонки;
— Базовую числовую таблицу можно обогатить инфографикой, цветами и диаграммами. Например, в дополнение к начальной и конечной цене можно показать график её колебания. Вклад каждой облигации в стоимость портфеля можно подсветить градацией зеленого и красного;
— Стоит ввести двойные строки. Например, полезно видеть не только стоимость облигации, но и процент, который она занимает в портфеле.

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

2022-12-14 16:11:06 Александра Савельева продолжает цикл статей о проектировании b2b-продуктов. Новая статья рассказывает, что должно быть на страницах таких продуктов.

— Давайте как можно больше информации, её внимательно читают. Так одни клиенты не уйдут, а другие не будут задавать одинаковые вопросы. Делайте это порционно: сначала основное, затем детали;
— Можно разместить призыв задать вопрос, если какой-то информации на странице не хватило;
— Если есть исследования, показывайте, как внедрение продукта влияет на метрики. Например, Slack на 24% ускоряет выход нового сотрудника на максимальную эффективность;
— Показывайте идентификаторы товаров, чтобы опытные клиенты быстро их находили;
— Рассказывайте о соответствии стандартам: требованиям безопасности, доступности и так далее;
— Предлагайте пакетные решения, а также альтернативные варианты и дополнения. Но дополнения должны того стоить, чтобы не подорвать доверие;
— Если добавляете видео, предупреждайте о продолжительности, добавляйте субтитры для тех, кто смотрит без звука. Видео должно быть лаконичным и без громкой музыки;
— Показывайте таблицы сравнения с продуктами конкурентов. Но только непредвзятые, чтобы не подорвать доверие специалистов. Например, в такой таблице на собственном сайте Скетч по многим параметрам превосходит Фигму, но специалисты увидят подвох;
— Сохраняйте страницы архивных продуктов. С них клиент может начать поиск актуальных аналогов;
— Можно добавить калькулятор, но только достаточно лёгкий для освоения. Спроектировать такой будет целым вызовом;
— Предоставьте несколько способов найти информацию: с помощью обычной навигации, каталога, поиска;
— Показывайте цены, это самый главный критерий для принятия решения.

Канал Александры. #b2b Открыть/Комментировать

2022-12-13 14:01:18 Навык визуализации данных — плюс к вашему резюме

Строить графики в презентациях, конечно, круто. Но для больших данных и задач бизнеса нужны современные BI-инструменты: DataLens, Tableau, Datawrapper и другие. Они упрощают и ускоряют работу, а в перспективе — помогают компании экономить ресурсы.

Освойте эти инструменты в Практикуме и добавьте навык визуализации в своё резюме уже через 3 месяца.

Курс «Визуализация данных и введение в BI-инструменты» подходит:

- финансовым и продуктовым аналитикам, а также аналитикам данных;
- маркетологам;
- менеджерам и руководителям команд;
- продуктовым и графическим дизайнерам.

Начать обучение можно бесплатно. Вы узнаете, зачем и кому нужна визуализация данных, как работать с BI-инструментами и как будет устроена ваша учёба в Практикуме.

После регистрации вы получите доступ к теории и практике в формате симулятора и изучите темы:

- Введение в науку о данных — Data literacy.
- Визуализация данных в бизнесе и работа с заказчиками.
- Основы визуализации и выбор графиков.
- Инструменты для визуализации и сценарии их применения.
- Сторителлинг и презентация в работе с данными.
- Интерактивные дашборды и Tableau.

Попробуйте курс в любой удобный момент.

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

2022-12-13 11:56:34 Юлия Салах написала о мелочах, которые помогут улучшить дизайн.

— Тени чисто чёрного или серого цвета создают эффект грязи. Используйте в интерфейсе цветные тени, например, с примесью синего;
— Для текста лучше использовать не чисто чёрный цвет, а тёмно-серый (можно добавлять примеси);
— Выравнивайте элементы по сетке, используйте систему отступов и правило близости;
— Следите за внутренним радиусом скругления. Обычно берут половину от внешнего радиуса, но иногда для гармонии его надо увеличить;
— Если не противоречит стилистике, острые углы лучше немного скруглять (на 1–2 пикселя), так как в природе идеально острых углов не бывает;
— Иконки размещайте в собственных фреймах. Автоматическое центрирование подходит не всем иконкам. Некоторые надо немного сдвигать, чтобы сохранялось ощущение, будто они центрированы.

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

2022-12-12 23:47:24 Анна Кейли написала о всплывающих окнах (попапах).

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

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

2022-12-09 19:36:56 Станислав Хрусталёв написал об онбординге в мобильных приложениях.

— Фокусируйтесь не на функциях продукта, а на ценности, которую они несут пользователям. Это могут быть и преимущества компании (бесплатная доставка), и информация об акциях и промокодах;
— Экранов не должно быть много, выделите ключевые ценности;
— На последнем разместите призыв к действию, чтобы переход от онбординга к взаимодействию с продуктом был бесшовным;
— Занимайте онбордингом весь экран (речь о мобильных приложениях);
— В процессе можно собрать первичную информацию о потребностях пользователя и персонализировать последующее взаимодействие;
— Покажите очевидный способ перехода на следующий экран (например, кнопку), но и перемещение свайпами (и тапами по правой и левой стороне экрана) тоже можно реализовать;
— Кнопка должна располагаться в одном и том же месте;
— Переход между экранами может происходить автоматически в формате сторис. Но важно подобрать правильный тайминг и дать возможность приостановить переход;
— Сопровождайте текст визуализацией, чтобы облегчить восприятие и заинтересовать. Она не должна быть слишком абстрактной. Ей может стать часть интерфейса приложения;
— Отображайте Page Control, чтобы управлять ожиданиями о количестве слайдов. Обычно его размещают в нижней части экрана и центрируют по горизонтали;
— Доступ к уведомлениям и геолокации стоит запрашивать, когда есть контекст и потребность, а не в самом начале;
— На экране с пояснением, зачем нужен тот или иной доступ, стоит предусмотреть возможность пропустить и принять решение о доступе потом;
— Кнопка пропуска онбординга должна быть заметной, но не акцентной. Обычно её располагают в правом верхнем углу.

Канал Станислава. #onboarding Открыть/Комментировать

2022-12-08 14:01:01 Павел Шерер опубликовал 3-ю статью цикла о функциональной архитектуре.

— Если не выделять общие функции продукта, есть риск получить копипаст одной и той же функциональности (в лучшем случае) или несколько разных реализаций интерфейса и логики. Это усложняет поддержку и дальнейшее развитие продукта;
— Общие функции не всегда лежат на поверхности, часто их выявление становится отдельной задачей;
— Как это делать: в небольших проектах можно просто спрашивать себя, не используется ли эта конкретная функция где-то ещё;
— Можно составить матрицу функциональных свойств объектов — список всех сущностей и возможных действий с ними, основанный на информационной архитектуре;
— Примеры общих функций: показ системных сообщений, отправка запроса по API, обработка ответа по API, валидация полей форм, показ сообщений форм, отправка данных формы и обработка ответа (может использовать функции API), проверка наличия сети, обновление экрана, отправка данных для аналитики;
— Функции могут зависеть друг от друга. При иерархической зависимости уровень диктует порядок проектирования и реализации. Например, подтверждение номера телефона нельзя реализовать без а) обработки запроса на сервере и б) отправки смс;
— Если отправка смс используется только здесь (не является общей), разработать её можно вместе с функцией подтверждения номера телефона;
— Функция обработки запроса на сервере — общая. При этом она зависит от функций «валидация данных» и «очистка параметров», значит, спроектировать и реализовать надо сначала их;
— Есть линейная (параллельная) взаимосвязь. Например: регистрация через имейл и регистрация через соцсети;
— Также функции бывают клиентские и серверные — в зависимости от того, где они выполняются.

Канал Павла. #functional_architecture Открыть/Комментировать

2022-12-07 14:00:51 Можно ли войти в IT без кодинга — но с теми же зарплатами, перспективами и интересными проектами? Станьте UX/UI-дизайнером, чтобы создавать интерфейсы сайтов и приложений, которыми будут пользоваться каждый день.

Примерьте профессию на бесплатном интенсиве 12, 13, 14 декабря в 17:00. За три дня вы успеете поработать в программе для дизайнеров Figma и собрать первый блок для сайта — с фидбеком от профи.

В результате вы:

— погрузитесь в профессию UX/UI-дизайнера,
— создадите первую работу и получите обратную связь от эксперта,
— получите полезные призы и подарки,
— пообщаетесь с действующим дизайнером в закрытом чате.

Вы узнаете о профессии из первых рук и получите оценку своей работы от действующего дизайнера. За регистрацию дарим гайд «300 полезных ресурсов для дизайнеров».

Зарегистрироваться: https://go.contented.ru/jtPQeA

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

2022-12-06 21:29:37 Александра Савельева начала цикл статей о проектировании b2b-продуктов. Первая посвящена особенностям их пользователей.

— Бизнес-клиенты (специалисты и предприниматели) обычно воспринимают информацию о продукта для бизнеса критически, не реагируют на пустые рекламные приёмы. Если обещаете выгоду, указывайте конкретные параметры и показывайте примеры;
— Процесс принятия решения может занимать месяцы, есть процесс согласования. Нужна узкоспециализированная информация, которая поможет защитить выбор этого продукта перед коллегами. Призывы купить здесь и сейчас не работают;
— Пользователей можно разделить на типы: 1) Владелец небольшого бизнеса; 2) Офис-менеджер; 3) Специалист; 4) Начальник; 5) Эксперт по закупкам;
— У них есть свои особенности. Например, офис-менеджер может плохо разбираться в теме, поэтому будет искать спецификации продукта, чтобы сравнить с изначальным запросом;
— Потребность в информации может зависеть от этапа в цикле покупки: 1) Осознание проблемы; 2) Поиск решений; 3) Обсуждение; 4) Торг и покупка; 5) Поддержка; 6) Модификация; 7) Замена;
— Например, чтобы удержать клиента на этапе модификации, надо анонсировать обновления системы, предлагать дополнительные модули, показывать, что сервис развивается и отвечает требованиям рынка.

Канал Александры. Открыть/Комментировать