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

Неправильно

Правильно

Конечно, нужно посмотреть на сценарии. В этом примере фокус был установлен в список языков. Теоретически, пользователь может захотеть пойти по списку клавишами ↑ и ↓. А нет, список слишком длинный и пользователь скорее станет скроллить его.

Казалось бы, такой очевидный ход. Но я очень часто сталкиваюсь с тем, что создатели забыли о нем.

Контур.Стафф

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

Если в вашем экране есть только одно поле ввода, не забудьте поставить туда фокус. Это справедливо почти всегда. И особенно, когда в этом экране пользовательский сценарий реализуется через поиск.

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

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

Неправильно в вордпрессе

Наполовину правильно в Fireworks

Они поставили кнопку «Скопировать», но забыли про кнопку «Вставить».
Если бы это было реализовано в CS6, имело бы смысл обновиться только из-за этой фичи.

Почему я никогда даже не думал пользоваться почтой Яндекса: потому что Google, в отличии от них, не показывает мне огромный анимированный баннер возле списка писем. У Яндекса не было шансов до 25 октября, когда они выкатили новый интерфейс.

Они пришли к трех-панельному интерфейсу — Trinity. Одной из целей было избавление от переключений между списком писем и окном редактирования нового письма. Вот тут об этом большая статья (в том числе интервью с интерфейсологом проекта).

Вот она, красавица.

И на нашей улице будет праздник

Я было уже погрустнел, что у меня всё завязано на Google и не хочется одну только почту переносить на Яндекс. Но Google не заставил себя долго ждать и 1 ноября добавил фичу. Окно нового письма теперь висит поверх списка писем, в правом нижнем углу. Не знаю как на небольших мониторах, а на 23» теперь можно одновременно писать новое письмо и просматривать другое, в большом окне. При этом места хватает на всё.

Очень удачно Google подсунул мне предложение переключиться на новый интерфейс — в тот самый момент, когда я стал переписывать одно письмо для другого адресата.

Мне нужно было видеть два письма одновременно. Впрочем, даже при чистом ответе на письмо, в старом интерфейсе исходное сообщение было едва видно.

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

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

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

Когда 19 декабря 2011 года Студия выпустила шаблоны для ЖЖ, мне было пофиг, потому что тогда ЖЖ зарелизил только новый интерфейс комментариев, а самая главная проблема и, по иронии, самая главная часть сервиса оставалась без внимания.

Теперь переделали и эту часть. Новый интерфейс создания и редактирования записей — это win. Они побоялись выкинуть бесполезные и чисто ЖЖшные фичи, такие как «музыка» и «настроение», зато улучшили почти всё, что требовало улучшения.

— При переключении из визуального режима редактирования (с панелькой инструментов) в html-режим не пропадает сама панелька и можно, редактируя код, вставить нужные теги кнопкой. Я, например, не мог запомнить синтаксис ката и приходилось переключаться туда-сюда.

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

— Верстка стала адаптивной. Если на экране не хватает места для полей «музыка» и «настроение», они переезжает обратно в подвал, усложняя выбор. Но теперь они хотя бы сделали разрядку полей. Впрочем, до Эгеи ещё далеко.

— Юзерпик для конкретной записи меняется прямо на этой странице и при выборе показываются сами картинки, а не их псевдонимы.

— Появилась опция «прикрепить запись»: теперь не нужно выставлять дату далекого будущего для записи, чтобы она висела первой в ленте.

— Переработали интерфейс отображения тегов. Теперь там нормальный сгруппированный список.

Но всё это второстепенно по сравнению с тем, что они наконец-то сделали нормальное поле для написания самого текста. Они даже прикрепили кнопочку «На весь экран», какие молодцы.

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

Теперь поле ввода плавно разъезжается на весь экран, скрывая все настройки поста. Большой чистый лист.

Теперь осталось выкинуть 100+ тем оформления жж, выкинуть все кастомные и сверстать с десяток приличных с точки зрения не только интерфейса, но и представления информации. Тогда в ЖЖ можно будет жить.

Начал пользоваться системой Альфа-Клик, перевариваю первые впечатления. У этого интернет-банка много плюсов, но вот такие экраны меня удивляют.

Я, обращаясь в раздел «Шаблоны», ожидал, что мне сейчас дадут создать парочку. Вместо того чтобы дать мне кнопку «Добавить» с вкусной иконкой, они предлагают мне сразу идти за помощью. Интересный подход.

И да, я сам должен теперь найти пункт меню «Помощь» потому что они не сделали ссылку прямо из предложения. Это я специально так сделал картинку — в узком окне браузера чтобы она хорошо в колонку влезла, поэтому вам хороши видно, где этот пункт. А обычно левое и правое меню находятся в разных углах экрана шириной 1920 пикселей, а верхнее равномерно рассредоточено от центра к правому краю.

Ну так сменил я пароль, или нет?

Сообщайте пользователю о результате операции, по значимым поводам.

В вакансии на должность проектировщика интерфейсов, ux-специалиста было задание

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

На этой неделе отправил своё ТЗ. Рещил взять страницу «Онлайн-заявки на кредит».

Вот как она выглядит:

Некоторые замечания

О вступительном тексте

У самой формы фактически отсутствует заголовок. “Онлайн-заявка на кредит” расположен так, что является заголовком вступительного текста.

Обратим внимание на сам текст. Это развернутое перечисление преимуществ сервиса и оно занимает довольно много места. Этот текст тут не нужен. Пользователь попал сюда, нажав на баннер «Заполни заявку на кредит» и справедливо ожидает, что ему предложат некую форму. Вместо этого вы хвалите ему сервис, на который он уже согласился. Нужно хвалить продукт в точке принятия решения ( на баннере), а не после нее. Баннер будет лучше продавать сервис, если коротко перечислить ключевые преимущества на нем. На самой форме некоторые пояснения допустимы, но они не должны претендовать на главную роль.

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

Строчка «читать далее» обозначена как ссылка (сплошное подчеркивание), но на самом деле это псевдоссылка — она не открывает новую страницу, а отображает скрытое содержание. Правильное обозначение ссылок и псевдоссылок соблюдается на вашем портале почти везде, значит пользователь будет ожидать от этого элемента определенное поведение — открытие в новом окне. Если он хочет заполнить заявку и, соответственно, не хочет уходить с этой страницы, он не будет нажимать на эту ссылку.

Ошибка: игнорирование привычек пользователя.

О валидации

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

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

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

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

Предупреждать пользователя до того как он совершит ошибку — это вежливость. Такой подход положительно влияет сразу на две метрики: субъективная удовлетворенность и безошибочность ввода.

О языке

При составлении надписей следует стремиться к правильной речи. Небольшие нестыковки можно игнорировать, но в одном случае формулировка режет ухо. Радиокнопку “никак” нужно переименовать в “отсутствует”, тогда будет получаться “Обеспечение кредита отсутствует” вместо “Обеспечение кредита никак”.

И ещё 9 замечений, которые не буду здесь приводить.

Улучшения, появившиеся уже в процессе построения формы

Результат

Казалось бы, причем тут интерфейс

Безусловно, описываемая мной ситуация не является фундаментальной причиной, но что-то в этом есть.

Хорошие источники информации отличаются от плохих и тем, что из них можно получать информацию с минимальным трением. У меня есть учебник «Экономикс» Макконнелла и Брю, возможно первое в России издание, примерно 93-го года. Говорят, довольно хороший. Но им невозможно пользоваться, потому что в нем нет предметного указателя. А его оглавление, мягко говоря, не очень предметно.

Сегодня стал искать гайды по интерфейсам. Без проблем нашел в выдаче iOS Human Interface Guidelines и Android Developers. Зашел на первую страницу и понял, что читать такие объемы отсюда хоть и реально, но крайне не практично. В Правом верхнем углу сразу заметил иконку файла и подпись «PDF». Обрадовался и сохранил себе 180 страниц в человеческом формате.

Воодушевленный таким началом, пошел по второй ссылке. На главной странице Developers.Design не нашел ссылки для скачивания, ну и ладно. В боковом меню есть раздел Downloads, заходим туда. Вверху страницы есть многообещающая кнопка «Download all». Смотрим ниже, что же есть в этом разделе. А там есть всё — и исходники с элементами управления для Fireworks и дроидский шрифт и палитра и иконки. Только самого гайдлайна нет.

Вот так — все инструменты в руки, а инструкцию читайте только с сайта, ну или руками всё копируйте в Ворд и там кое-как печатайте. Нет, я понимаю, что у Андроида какой-то мизерный объем гайдов по сравнению с iOS. Но есть что-то нездоровое в том, чтобы препятствовать разработчикам скачивать документацию и читать в нормальном человеческом формате. Выуживание кусков информации, рассеянной по великому множеству пунктов меню не располагает к вдумчивому изучению. Какое уж тут качество приложений. Был бы рад обнаружить, что в течении 10-и попыток я просто не туда смотрел.