Как стать проектировщиком: ответы на простые вопросы

Альберту нравилось и проектирование, и разработка. Он написал мне ВКонтакте и задал несколько простых вопросов о проектировании, чтобы определиться с областью.

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

Читать далее Как стать проектировщиком: ответы на простые вопросы

Axure 7 для начинающих за 100 минут

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

Примерная структура занятия:

  • Примеры прототипов;
  • Виджеты, их настройка и расстановка по холсту с помощью сетки, направляющих и выравнивания;
  • Мастера;
  • Динамические панели;
  • Создание интерактива (ивенты, экшены, кейсы, условия);
  • Под конец: способы передачи прототипа заказчику, свойства страниц, стили.

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

Встречайте, «Axure 7 для начинающих» за 100 минут.

Update. Опубликовал пост на Хабре.

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

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

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

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

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

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

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

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

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

Примечание: попытки перевести 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