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

Неправильно

Правильно

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

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

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

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

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

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

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

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

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

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

Повторим основы, совсем немного.

Давайте пользователю мгновенную обратную связь. Она повышает прозрачность причинно следственных-связей системы. Так же она показывает результативность совершенного действия.

Учитывайте привычки пользователей. Один и тот же элемент интерфейса в разных её местах должен работать одним и тем же образом. От мелочей вроде «ссылки для навигации, а кнопки для совершения действий над объектом» до соблюдения ментальных моделей.

Оптимизируйте информационную эффективность. Часто существует возможность уместить больше информации на меньшей площади. Главное не перестараться.

Я на этой странице ошибся два раза.

В первый раз я подумал, что счетчик лайков является и кнопкой «Лайк» потому что существует ментальная модель социокнопки, привычная всем.

Потом я два раза нажал на кнопку «Мне нравится» потому что после первого нажатия ничего не произошло. Как выяснилось, счетчик обновляется только при перезагрузке страницы.

Ну и сам факт разделения кнопки-счетчика на кнопку и счетчик. Два элемента вместо одного. Я не сразу нашел саму кнопку потому что она ещё и стоит в другой строке элементов. Как будто они не имеют отношения друг к другу.

Эрогенным называется элемент интерфейса, способствующий совершению ошибок пользователем.

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

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

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

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

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

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

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

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

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

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

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

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

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

24 сентября стартует новый курс Human-Computer Interaction (HCI) на Coursera.org
Абсолютно бесплатно, 9 недель дистанционного образования на английском.
В конце вы не получите университетских баллов, но получите сертификат и, конечно, знания.

Курс ведет Scott Klemmer, Associate Professor Стенфордского университета.

В прошлый раз они проводились в мае и я узнал о них слишком поздно, теперь постараюсь пройти. Кстати, тогда они шли 4 недели и студенты жаловались что программа слишком плотная. На этой обещают загруженность 8-10 часов в неделю.

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

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

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

Оригинал: Chrisitan Holst «Proper Indicators for Hidden Elements», Baymard Institute от 25 апреля 2012 г.

Есть разные способы постепенного отображения информации: табы, меню, аккордеоны и вечно популярные ховер-элементы, такие как выпадающие мега-меню. Они отлично снижают визуальный беспорядок, предоставляя пользователю тонны информации и возможностей.

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

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

Ожидания пользователей

Ожидания пользователя определяют, предположит ли он, что скрытое содержание все же присутствует на вашем сайте. Будет ли он его искать потому что контент-должен-тут-быть или оставит надежду?

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

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

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

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

Указывающий переключатель

Указывающие переключатели — это любые элементы, обозначающие интерактивный объект, который раскрывает скрытое содержание. Как правило, это ссылка или кнопка, на которую можно нажать чтобы развернуть набор настроек или показать текст. К счастью, это то, что вы, как дизайнер интерфейсов, можете контролировать.

Давайте пробежимся по пяти основным переключателям, которые есть в вашем распоряжении.

1. Направление и пространство

Знаки, указывающие направление, обычно используются чтобы обозначить скрытое содержание. Указатели направления неразрывно связаны с ощущением виртуального пространства у пользователя. Оно описывает умозрительную модель положения и перемещения в пространстве.

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

Основное меню сайта FOX использует такие указатели. Два верхних пункта меню разворачивают мега-меню, что видно по маленьким треугольникам, указывающим вниз. При этом третий пункт не имеет такого треугольника и, соответственно, не раскрывает никакого содержания.

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

К указателям направления довольно близки пространственные указатели. При этом они указывают скорее на текущее положение и выбранный элемент, одновременно показывая что есть какое-то скрытое содержание.

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

2. Метафоры

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

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

3. Иконки

Иконки могут выделять сам переключатель на странице. Так и делает Macy на своей закладке «Обзоры» со звездочками.

Иконки и другие графические объекты хорошо привлекают внимание и делают другие текстовые триггеры более заметными. При этом есть риск слишком сильного привлечения внимания к элементу.

4. Градиентное смешение

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

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

5. Временное отображение

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

Другой пример временного отображения — это слайд-шоу, в котором контент сменяется сам собой. Это показывает содержание в полном объеме. Сам способ имеет и недостаток — он отнимает внимание от других частей страницы из-за цикличной анимации.

Применение указывающих переключателей на практике

Знания способов использования переключателей самого по себе недостаточно. То, сколько их и как именно вы их примените, даже более важно, так как каждый из них вносит какое-то количество шума и беспорядка в общую картину интерфейса.

Поэтому мы предлагаем использовать этот алгоритм при применении переключателей:

1. Определите важность скрытого содержания. На столько ли оно важно для конверсии этой страницы, что пользователь будет искать его? Может быть он более важен для какой-то особой группы пользователей?
2. Насколько скрытое содержание востребовано сейчас? Используйте веб-аналитику, чтобы выяснить, какой процент пользователей открывают скрытое содержание в настоящее время.
3. Определите уровень ожиданий пользователя относительно скрытого содержания. Вы можете использовать такие методы как сортировка карточек, ассоциации и простые опросы. Например: какую информацию или возможности вы ожидаете обнаружить на странице продукта? Какую информацию или возможности вы видите на этой конкретной странице продукта?
4. Информация, которую вы почерпнете, выполняя первые три пункта, поможет вам определить, нужен ли вам переключатель. И если нужен, то какой — отвлекающий на себя внимание или графически простой, как градиентный переход?

При выполнении первых трёх пунктов крайне полезно различать пользователей, которые уже посещали ваш сайт и новичков. Разница между ними поможет вам понять начальные (предопределенные) ожидания пользователей.

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

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