Архив рассылки UX-проектировщика

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

Сделал список выпусков. Часть доступна бесплатно, со временем опубликую ещё. Если какая-то тема заинтересовала, выпуски с 3-го по 33-й продаются в базе знаний Проектората.

Читать далее Архив рассылки UX-проектировщика

Редизайн Ленты.ру

Рассказ с мастер-класса Галины Тимченко в Школе новых медиа

Галина Тимченко — главный редактор интернет-издания lenta.ru с 2004 по 2014 год.

Редизайн мы задумали чуть больше, чем за год до того, как он на самом деле осуществился. Хороший редизайн не бывает быстро, вы должны его родить.

Облегчить путь по сайту

Спасибо Максиму Спиридонову, который в Рунетологии собрал мнения экспертов и аналитиков по поводу того, как выглядит Лента. Все сказали:

Это очень круто, но уж очень страшно. Невозможно, просто какое-то месиво из текстов.

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

Читать далее Редизайн Ленты.ру

Стиральная машина для мужчин

Переделка интерфейса стиральной машины

За последние 2 года я пожил в 6 разных местах. Везде мне приходилось пользоваться стиральными машинами, и это были мучения! Мне стало интересно, и я расспросил своих друзей, сталкиваются ли они с той же проблемой. Да, сталкиваются. Я понял, что в большинстве мои друзья всегда использовали одну и ту же программу стирки.

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

58 процентов британских мужчин не могут пользоваться стиральными машинами правильно, так как считают их слишком запутанными.

В эпоху самоуправляемых автомобилей более половины мужчин не умеют пользоваться стиральными машинами?

Читать далее Стиральная машина для мужчин

Дизайн, который работает

В ленте появилась статья с интригующим названием «Behance vs Реальность». Но нет, она не о том, что за отличными картинками часто скрывается крайне неудобное взаимодействие. Автор написал, что хороший дизайн не нужен, нужна доступность и понятность, а остальное пользователь не ценит.

В комментариях оказалась ссылка на рассказ о том, как убогое (по мнению дизайнера) рекламное объявление в газете сработало и привлекло клиентов. В дальнейшем заказчик разместил его ещё несколько раз. Из описания понятно, что текст объявления был набран слишком мелко, что означает плохую доступность.

Рекламное объявление — это сообщение о возможности решить определённую проблему. Если проблема есть, и это единственное сообщение на эту тему, то клиенты будут. Но если проблему решает ещё десяток предпринимателей, и все они размещают рекламу в газете, то клиентов данное объявление может и не принести.

Читать далее Дизайн, который работает

Почему вам следует пододвинуть ту кнопку на 3 пикселя влево

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

Но для остальной команды продукт выглядит нормально. Он работает. Они спрашивают: «Улучшит ли наш продукт смещение этой кнопки на 3 пикселя?» И спорят: «Когда мы в прошлый раз исправили мелкий баг с дизайном, для продукта не было никакой разницы». И команда принимается за следующую большую идею или набор фич.

Если вы похожи на меня, то вы понимаете, как это расстраивает. Как дизайнеры мы несём ответственность за качество взаимодействия от начала и до конца. Но в то же время мы находимся во власти наших команд. Мы можем создать красивый и сложный дизайн с восхитительными деталями, но мы не можем всё это разработать, протестировать и выложить.

Как нам убедить инженеров и других коллег внимательно относиться к мелочам в дизайне? Я много боролся с этим. И вот, что я понял.

Читать далее Почему вам следует пододвинуть ту кнопку на 3 пикселя влево

Редизайн наугад

Однажды я рассказывал эту историю и понял, что было бы неплохо её записать и опубликовать. Несколько лет назад у меня было телефонное собеседование с менеджером по дизайну Амазона. Среди обычного набора вопросов (расскажите о трудовом опыте, о самой сложной задаче, с которой вам пришлось столкнуться и т.д.) он задал один вопрос, к которому я тогда был совсем не готов:

— Итак, как бы вы изменили главную страницу Амазона?

Читать далее Редизайн наугад

Хватит неправильно использовать выпадающие списки

Примечание: в разных компаниях и даже среди разных специалистов одной компании встречаются различные варианты перевода select menu, dropdown menu и т.п. Я использую привычные мне русскоязычные термины. Оригинальные на всякий случай указаны в скобочках.

Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать

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

select-menus-1

Читать далее Хватит неправильно использовать выпадающие списки

Линч формы заказа билетов на мероприятия с kudago.com

После своей публикации на хабре (про выпадающие списки) я получил сообщение с вопросом о юзабилити. Ответ на вопрос вылился в линч формы с сайта kudago.com.

Форма заказа билетов на мероприятия с kudago.com

Читать далее Линч формы заказа билетов на мероприятия с kudago.com

Сено-солома

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

Без сена и соломы из заголовка обошлось — только стрелки и подписи к ним. (Только хардкор.) Причём, не важно, висит футболка на вешалке в хипстерском магазине или надета на вас, в зеркало вы её рассматриваете или нет, — подписи не обманут.

Футболка для путающих лево и право

Чтобы продемонстрировать принт в работе, сделал бумажный прототип футболки и провёл фотосессию с деревянным болванчиком.

Читать далее Сено-солома

Карта мира

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

Update. Для чего нужна такая картинка.

Иногда требуется показать некую точку на карте мира с точностью до страны. Но стилистику сайта нарушать нельзя, поэтому яндекс- и гугл-карты не годятся. Точек может быть несколько, и их число может увеличиваться со временем.

Контентщик в панели управления сайтом использует обычную гугл-карту (со всеми подписями, с возможностью увеличить масштаб), что позволяет легко добавить точку, например, в Марокко. Полученные координаты по формулам пересчитываются в отступы слева и сверху от краёв стилизованной карты мира. Поэтому пропорции этой карты должны полностью совпадать с картой гугла (а этого нет у большинства готовых картинок из поисковой выдачи).