Вопрос на 3 миллиарда
The Magic Behind Amazon’s 2.7 Billion Dollar Question
Автор: Jared Spool
Источник: User Interface Engineering
С момента выхода в 2007 году последняя книга из серии про Гари Поттера – «Гарри Поттер и Дары Смерти» – получила 3286 отзывов от покупателей с Amazon.com. Хотя подавляющее большинство отзывов были положительными, несколько сотен пользователей оценили книгу как «посредственно» или «ужасно».
Amazon позволяет делать лучшими как положительные, так и отрицательные отзывы и благодаря этому и те и другие легко находить. И эта функция, по нашим расчетам, приносит Amazon дополнительно $2700000000 в год. Неплохо для простого вопроса: «Был ли этот отзыв полезным для вас?».
Удобные формы с помощью jQuery
Валидация
Иногда легко определить, что пользователь вводит неправильные данные. В адресе электронной почты не может быть русских символов. Почтовый индекс может состоять только из цифр. В номере телефона могут быть только цифры, скобки, пробелы и тире.
Для таких полей можно задавать ограничения, не позволяющие вводить пользователю неправильные данные.
-
Alphanumeric – позволяет указывать, какие символы можно вводить в каждое поле в форме (например, «только символы», «только числа», «только числа, пробелы и тире» и т.д.).
-
jVal – поддерживает проверку длины полей, регулярные выражения, сравнение значений в разных полях (например, пароль и подтверждение пароля).
-
Validation – самый известный и продвинутый плагин для валидации.
Визуальная коммуникация в контекстно-зависимых полях
Visually Communicating Selection Dependent Inputs
Автор: Luke Wroblewski
Источник: Functioning Form
Контекстно-зависимые поля требуют от пользователя ввести дополнительную информацию в зависимости от первоначального выбора, чтобы завершить заполнение формы. В статье Selection-Dependent Inputs (Контекстно-зависимые поля) я описал ряд способов решения этого вопроса.
В каждом из этих решений визуальная часть необходима, чтобы помочь пользователям понять, как их первоначальный выбор связан с последующими вопросами, на которые им нужно ответить. Когда визуальная коммуникация отсутствует, форма становится вксьма запутанной.
Рассмотрим пример с сайта Apple. Первый вопрос, на который нужно ответить в этой форме авторизации: Вы хотите войти с помощью Apple ID или AOL ID? После того как первоначальный выбор сделан, нужно ввести конкретный ID и пароль. Проблема состоит в том, что эта связь визуально не представлена. В результате, вы можете оказаться в такой ситуации: форма просит вас ввести пароль, но визуально кажется, что ошибка связана с выбором AOL.
Кнопка на 300 миллионов
The $300 Million Button
Автор: Jared Spool
Источник: User Interface Engineering
Как изменение кнопки увеличило годовой доход сайта на 300 миллионов долларов
Сложно представить форму проще: два поля, две кнопки и одна ссылка. Но оказывается, эта форма была препятствием, не позволяющим клиентам покупать товары в одном крупном интернет-магазине на сумму примерно 300 миллионов долларов в год. Хуже всего было то, что дизайнеры сайта даже не догадывались о том, что с этой формой есть проблемы.
Полями были «Адрес электронной почты» и «Пароль». Кнопки – «Вход» и «Регистрация». Ссылка – «Напомнить пароль». Это была форма авторизации на сайте. С такими формами пользователи сталкиваются все время. Какие у них могут быть с ней проблемы?
Размещение стрелок рядом с текстовыми ссылками
Should Arrows be Placed Before Link Text or After?
Автор: Dmitry Fadeyev
Источник: Usability Post
Иногда хочется расположить символ-стрелку или иконку с изображением стрелки рядом с текстовой ссылкой, чтобы сделать ее более изящной и привлечь внимание пользователей. Такие маленькие стрелки часто можно видеть рядом со ссылками «Читать дальше» в публикациях в блогах или «Подробнее» в описаниях товаров. Есть два варианта размещения стрелок:
Сегодня рассмотрим вопрос о том, как располагать стрелки: перед текстом или после.
Размещение кнопок «Вперед» и «Назад» в формах
Previous and Next Actions in Web Forms
Автор: Luke Wroblewski
Источник: Functioning Form
Последняя дискуссия в Interaction Design Association была посвящена расположению активных кнопок в формах, разделенных на несколько страниц. Вопрос, лежащий в основе этого обсуждения, заключается в следующем: можно ли активную кнопку перехода к предыдущему шагу, размещать справа от кнопки перехода к следующему шагу?
Одна сторона поддерживала естественную организацию: действия, двигающие пользователя вперед, располагаются справа, а двигающие назад – слева (это верно для читающих слева направо). Другая сторона придерживалась мнения, что первичность действий, двигающих пользователя вперед, перевешивает это соображение и «вторичные» действия (которые используются реже) можно разместить справа от основного действия, даже если они переводят пользователя к предыдущему шагу. Нахождение заметной кнопки с основным действием на «линии огня» при заполнении формы, позволяет пользователю легче понять, что нужно сделать для завершения заполнения формы. Я проиллюстрировал это в изображении ниже.
На пути к новому интерфейсу Microsoft Office (часть 8): Точки на графике
Grading On the Curve
Автор: Jensen Harris
Источник: An Office User Interface Blog
В предыдущих публикациях я рассказал о Программе улучшения качества ПО и о некоторых данные, которые были собраны в ходе этой программы. Как мы используем эти данные при работе над дизайном и организации пользовательского интерфейса Office 2007?
Если поместить используемость команд Office на график, получится кривая. На несколько команд приходится много кликов, а затем число кликов, приходящихся на одну команду, будет медленно снижаться. Мы используем такое представление, чтобы получать информацию о том, как часто люди используют те или иные команды. Кривая визуализирует паттерн использования программы и среднюю глубину использования программы пользователями.
Многие люди говорят, что необходимо оптимизировать интерфейс так, чтобы он совпадал с данными об используемости. На первый взгляд, это кажется разумным; вы можете определить значение отдельных функций в зависимости от того, в каком месте кривой они находятся. Но есть одна проблема: такой продукт уже существует и это – Office 2003.
Другими словами, если мы хотим создать продукт, дизайн которого будет в точности соответствовать модели используемости, делать вообще ничего не придется – Office 2003 полностью соответствует кривой используемости.
На пути к новому интерфейсу Microsoft Office (часть 7): Вставка в лидерах
No Distaste for Paste
Автор: Jensen Harris
Источник: An Office User Interface Blog
В прошлый раз я спросил читателей, какие команды наиболее часто используются в Word 2003, а также пообещал опубликовать рейтинг 5 наиболее используемых команд.
Для меня наиболее интересно было обоснование предположений. Вот некоторые из них:
- Ctrl-Z (отменить) должна занимать одно из первых мест в пятерке. Полужирность и курсив также должны быть там.
- Сохранение используется очень редко. Большинство пользователей, насколько мне известно, отрицательно относятся к идее частого сохранения.
- Я не согласен со всеми. Моя мать не может вырезать, копировать и вставлять, я она больше похожа на обычного пользователя, чем любой из нас.
- Нормальный человек не станет использовать Предварительный просмотр.
Теперь вы можете представить, на что была похожа разработка программ в Microsoft до того, как мы начали собирать данные с помощью Программы улучшения качества ПО. Наши внутренние дискуссии были усыпаны дикими предположениями, обоснованиями и личным опытом, подаваемыми как факты.
На пути к новому интерфейсу Microsoft Office (часть 6): Чтение мыслей
Inside Deep Thought
Автор: Jensen Harris
Источник: An Office User Interface Blog
Microsoft следит за каждым вашим шагом!
Через некоторое время после установки Office 2003 появлялся всплывающий шар и спрашивал: «Хотите помочь сделать Office лучше?». Щелкнув по нему, вы получали возможность попасть в Программу улучшения качества ПО. В случае согласия, периодически в Microsoft отправлялись анонимные данные о том, как вы используете Office.
Вам, наверно, было интересно, куда отправлялись эти данные? Что ж, у вас есть возможность узнать это здесь и сейчас: они попадали в Excel-файл на моем рабочем столе.
Вернемся немного назад – в те дни (примерно до 2003 года), когда в процессе разработки дизайнерские решения принимались в основном на основе догадок. Классический вопрос, задаваемый на интервью в Microsoft: «Сколько заправок в Соединенных Штатах?» (правда, я ни разу не слышал, чтобы он на самом деле использовался). Многие считали такой тип вопросов бессмысленным. Но стиль вопросов, когда нужно было сделать оценку и обосновать ее, показатель того, как принимались дизайнерские решения в Microsoft.
На пути к новому интерфейсу Microsoft Office (часть 5): Вопрос масштаба
Tipping the Scale
Автор: Jensen Harris
Источник: An Office User Interface Blog
Одно из заблуждений, которое часто встречается в интернете, состоит в том, что наша команда «уничтожила созданную Apple парадигму, основанную на меню».
Как вы знаете, если вы читали первую часть этой истории, многие из сегодняшних парадигм в пользовательском интерфейсе, ассоциируемые с Apple, были разработаны задолго до появления компьютеров Lisa и Macintosh. Независимо от того, кому присваивается их авторство, это хорошие парадигмы. Нет ничего плохого в интерфейсе, основанном на меню и панелях инструментов. Эти парадигмы успешно использовались и во многих версиях Office.
Проблема не в том, что меню или панели инструментов плохи или люди, которые их разрабатывали, недостаточно умны. Проблема в том, что Office перерос их. Была пройдена точка, после которой меню и панели инструментов перестали масштабироваться. Меню с 8 хорошо организованными командами работает отлично; трехуровневое иерархическое меню с 35 связанными командами может привести к катастрофе.
На самом деле, мы не пытаемся все разрушить. Наша цель – создать новый стандарт пользовательского интерфейса для приложений с большим числом функций. Команды, которые изначально разрабатывали Word или Excel, не могли представить, сколько возможностей будут содержать их продукты сегодня. Я хочу, чтобы вы подумали над вопросом: какой интерфейс они бы построили, зная, каким станет Word?
RSS
Последние записи
- Как я перестал волноваться и полюбил менеджеров среднего звена
- Вопрос на 3 миллиарда
- Удобные формы с помощью jQuery
- Визуальная коммуникация в контекстно-зависимых полях
- Кнопка на 300 миллионов
- Размещение стрелок рядом с текстовыми ссылками
- Почему дизайнеры терпят неудачи
- Размещение кнопок «Вперед» и «Назад» в формах
- На пути к новому интерфейсу Microsoft Office (часть 8): Точки на графике
- На пути к новому интерфейсу Microsoft Office (часть 7): Вставка в лидерах
Облако тегов
безопасность дизайн дизайн интерфейсов дизайн форм кастомизация контент логотипы менеджмент навигация паттерны поиск принципы дизайна прототипы процесс разработки редизайн системы помощи сортировка табличные данные таксономия управление проектами фильтрация юзабилити javascript jQuery Office 2007 Ribbon
Архив
- Апрель 2009
- Март 2009
- Февраль 2009
- Январь 2009
- Октябрь 2008
- Сентябрь 2008
- Август 2008
- Июнь 2008
- Май 2008
- Март 2008
- Февраль 2008
- Январь 2008
- Ноябрь 2007
- Октябрь 2007
- Сентябрь 2007
- Август 2007
- Июль 2007
- Июнь 2007
- Май 2007
- Апрель 2007
- Март 2007