Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX & UI для разработчика: боги, зачем?

UX & UI для разработчика: боги, зачем?

Доклад-дискуссия с Senla October Meetup'2019

Спикеры: Александр Рум, Тая Крыжановская (Senla)

Вариант с анимациями в *.pptx: https://drive.google.com/file/d/1zyKXWW4jBBJWfZr5lJdyfHES1I3OpTGt/view?usp=sharing

More Decks by Taya Kostjuk (Kryzhanouskaya)

Other Decks in Design

Transcript

  1. SENLAINC.COM 2 Бесстыжая UX- специалистка Сознательный фронтендер Привет! Саша и

    Тая Мы здесь, потому что создаем интерфейсы, и иногда создаем друг другу проблемы. Нам надоело это терпеть.
  2. SENLAINC.COM Со стороны разработки Со стороны дизайна SENLAINC.COM 4 •

    Разработчики с Марса, дизайнеры с Венеры. • Не имея в чем-то опыта - сложно оценивать риски, невозможно изначально правильно оценить масштаб, дать эстимацию. • Не всегда на проекте есть дизайнер/UX-специалист. • Иногда стыдно за результаты своего труда, ведь от этого страдают люди. • “Лоудер мне отрисуй!” • Блокер: дизайнер не отрисовал состояние selected для dropdown! • “Пиксель вправо, пиксель влево - какая разница.” • “Наша js-библиотека так не умеет.” • Но… мы же… отрисовали UI-Kit! • Иногда стыдно за результаты своего труда, ведь от этого страдают люди.
  3. SENLAINC.COM Как быть? Минусы: • “Камон, там ангуляр 8 вышел,

    а я только на 2 сижу… На это все нужно время!” • “Пусть каждый занимается своей работой” • “Мне это в жизни не пригодится” • “Мне за это не доплачивают” • “Чтобы достичь в этом чего-то - нужен талант!” • В целом, отнимает драгоценное время, которое можно было бы посвятить техническому развитию или котикам в интернете - тайм-менеджмент! - разработка интерфейсов наша работа - да ладно? - на самом деле, доплачивают... - нет.
  4. SENLAINC.COM Как быть? Плюсы: • Разработчик осознаннее и легче принимает

    решения • Делает меньше очевидных ошибок • Не дергает дизайнера на каждую кнопку или диалоговое окно • Разработчик интерфейсов на максималках уже • Может делать свои сайд-проекты • Знания в дизайне интерфейсов становятся системнее • Дар предвидения • В целом позволяет работать и взаимодействовать с командой более эффективно
  5. SENLAINC.COM Доступность - обеспечить возможность использования сервиса для как можно

    большего количества людей. Факторы, оказывающие влияние на доступность: • Местоположение – люди могут использовать сервис в зоне, где медленный wi-fi, в шумном кафе или солнечном парке. • Состояние здоровья – люди могут владеть лишь одной рукой по причине перелома. • Оборудование – у них может быть смартфон с маленьким экраном или устаревший браузер. • Физические ограничения - например, нарушения опорно-двигательного аппарата, речи или зрения.
  6. SENLAINC.COM 1. Цветовой контраст 2. Семантический html: Ориентиры ARIA Используй

    <em>, <strong> вместо <i> <b>. Используй <article>, <section>, <nav>, <main>, <H1>...<H6> вместо <div><span> - эти тэги попадают в accessibility tree. Старые браузеры не поддерживают все эти штуки из html5, но они прекрасно понимают атрибут role. <nav>=<div role=”navigation”> 1. Фокус и корректная работа Tab Index. 2. Изображения и атрибут alt Что важно учитывать?
  7. SENLAINC.COM 37 Слушать дизайнера! • доверяй своему дизайнеру • следите

    за своими программистами • следуй UI-kit • создавайте вместе с ним полноценную дизайн-систему
  8. SENLAINC.COM 38 Не слушать дизайнера! • доверяй, но сомневайся •

    мысли критично • заботься о пользователе • критикуя - предлагай • аргументация “я лично считаю” или “мне кажется” - не очень.
  9. SENLAINC.COM 42 Мы тоже заботимся о Вас! • эвристики •

    справочник элементов интерфейса • best practices • паттерны • ...и многое другое потихоньку собирается в нашем confluence
  10. SENLAINC.COM • ui-patterns.com • nngroup.com • uxplanet.org • Подкасты: uwebdesign.ru

    • …. Как развиваться? книжки, статьи, опыт, эвристики, база знаний, подкасты...