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

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

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

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

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

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

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

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

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

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

7 нерушимых законов дизайна пользовательского интерфейса

Вы веб-дизайнер? Если так, значит вы также и дизайнер пользовательских интерфейсов. И в ближайшем будущем эта роль станет для вас ещё более значимой.

Сейчас у сайтов простые интерфейсы, на уровне навигации и контактных форм, но развитие новых технологий и стандартов создаст спрос на более динамическое и специализированное взаимодействие.

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

1. Закон ясности

Пользователь избегает непонятных элементов интерфейса.

Абстрактная иконка меню в Gmail

Читать далее 7 нерушимых законов дизайна пользовательского интерфейса

Хватит путать вайрфреймы, прототипы и мокапы

Примечание: попытки перевести wireframe и mockup породили уже, наверное, дюжину терминов разной адекватности и распространённости. Я это учёл и в статье ограничился простыми «вайрфрейм» и «мокап», чтобы каждый подставил такие русификации, какие заведены у него в компании.

Wireframe

Вайрфрейм

Что такое вайрфрейм?

Вайрфрейм — это низко детализированное представление дизайна. Он чётко должен показывать:

  • Основные группы содержимого. Что?
  • Информационную структуру. Где?
  • Описание взаимодействия пользователя с интерфейсом и его примерную визуализацию. Как?

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

Читать далее Хватит путать вайрфреймы, прототипы и мокапы

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

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

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

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

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

select-menus-1

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

Работает ли геймификация для клиентского сообщества

В июле 2012 мы геймифицировали наше интернет-сообщество Topliners. До этого у нас были очки и статусы для участников разного уровня, но у пользователей не было чёткого представления, как у них обстоят дела по сравнению с коллегами. С запуском модуля по геймификации на главной странице появился список лидеров, где пользователи могли увидеть своё положение в сообществе из 7000 участников и своих ближайших соперников. Мы также добавили значки: маленькие иконки, которые появляются в профиле участника сообщества после выполнения им ряда действий.

Результат геймификации сообщества Topliners

Читать далее Работает ли геймификация для клиентского сообщества

5 уроков годового наблюдения за пользователями планшетов

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

Распространение и дарованные айпадом возможности с момента его появления и наших первых шагов в исследовании планшетов держали в тонусе разработчиков, дизайнеров, менеджеров продуктов и маркетологов. В итоге за год мы провели несколько этнографических и лабораторных исследований и потратили десятки часов на опросы пользователей айпада. Мы узнали, что многие покупатели воспринимали айпады как «большие айфоны», но несмотря на это, их ожидания были предвосхищены. Планшетная платформа ломает определённые стереотипы в отношении персональных компьютеров и мобильных платформ, появляются новые вопросы для обсуждения и возможные преграды на пути к внедрению в отдельных областях. В качестве руководства для разработчиков, дизайнеров и менеджеров продуктов из своего исследования мы выделили 3 ключевых тенденции и 5 наставлений по проектированию для планшетов.

Читать далее 5 уроков годового наблюдения за пользователями планшетов