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

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

Wireframe

Вайрфрейм

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

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

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

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

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

Состояние чекбокса по умолчанию

Кейс из доклада Дэна Ариели Are we in control of our own decisions? на TED.

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

Процент водителей, согласившихся стать донорами

В первой группе стран наблюдается высокая готовность к пожертвованию. Во второй — значительно меньшая. Даже страны, которые мы воспринимаем весьма схожими, отличаются с точки зрения пожертвования органов: Швеция и Дания, Германия и Австрия, Нидерланды и Бельгия.

Читать далее Состояние чекбокса по умолчанию

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

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

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

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

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

select-menus-1

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

Купер о скеоморфизме

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

Из книги «Об интерфейсе» Алана Купера, Роберта Реймана и Дэвида Кронина.

Повышаем заполненность профилей

Заполненность профилей пользователей LinkedIn повысилась на 20 процентов после того, как был добавлен вот такой блок с прогрессом заполнения:

Прогресс заполнения профиля

Источник: Kevin Werbach’s Gamification course. Русификация моя.

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

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

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

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

Юзабилити сетевой части Battlefield Bad Company 2

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

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

Читать далее Юзабилити сетевой части Battlefield Bad Company 2