Иконка, текст или иконка с текстом — что использовать при разработке интерфейса

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

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

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

Избегайте потери несохраненных данных

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

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

Например, в процессе оформления покупки на сайте Sephora, для бесплатных образцов, которые пользователи могут добавить в свою корзину, используется модальное окно. В следующем примере товар был только что выбран, нажатием кнопки «Add» под ним. Это действие привело к тому, что кнопка «Add» была заменена ссылкой «Remove», что выглядит так, как будто образец уже добавлен в корзину. Однако, когда пользователь закрыл модальное окно, щелкнув значок X, а не ссылку «Done» (Готово), он обнаружил, что товара нет в корзине и ему снова необходимо его добавить.

Sephora: Даже, если выглядит так, будто пробный образец уже был добавлен в корзину, потому что теперь его можно удалить, закрытие модального окна (щелкнув X в верхнем правом углу) отменяет процесс выбора пробника. Чтобы добавить товар в корзину, пользователям сначала нужно нажать Add, а затем применить это действие, щелкнув ссылку Done.

Чтобы не потерять несохраненные данные, система должна определить намерение пользователя – отмена или закрытие – и предоставить четкие варианты.

Этого можно добиться одним из следующих действий:

  1. Попросите пользователя подтвердить свое намерение
  2. Используйте недвусмысленные текстовые метки вместо неоднозначных значков
  3. Предоставьте две разные кнопки: X для закрытия представления (с эффектом сохранения прогресса) и Cancel для отмены процесса

x

  • Новости 2014
  • 2013
  • 2012
  • 2011
  • 2010
  • 2009
  • 2008
  • 2007
  • Проекты
    • Дизайн-собака Авторы
    • Темы
  • Наблюдения
  • Дизайн, кино и пуфики
  • Дизайн, кино и пуфики
  • Книги
  • Школа
    • Кабинет
  • Курсы
    • Информационный стиль и редактура текста
    • Пользовательский интерфейс и представление информации
    • Пользовательский интерфейс и представление информации
    • Навигация в общественных местах
    • Переговоры и отношения с клиентами
    • Переговоры и отношения с клиентами
    • Дизайн и право
  • Советы
  • Коворкафе
  • О компании
    • Без бороды Информационный дизайн
    • Пользовательский интерфейс
    • Модульный дизайн
  • Вакансии
Работа: в бюро требуется визуализаторОсталось три дня

Март

2

1

1

Чувпилова Таня 12 марта 2018 Советы почтой каждую неделю

Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:

Вы подписаны на «Советы за неделю»:

Очень часто дизайнеры в своих проектах используют кнопки «О. В варианте «Закрыть» логично использовать иконку-крестик, но вот в варианте «Отменить» все поступают как хотят.

Вопрос в следующем: есть ли какие-то правила использования иконки крестика для «Отменить». Или я просто выдумываю себе проблемы?

А. Г.
Таня!

«Закрыть» и «Отменить» — базовые, часто используемые кнопки интерфейса, поэтому стоит их делать как можно более узнаваемыми и не вносить необычных мутаций. В большинстве операционных систем на этих текстовых кнопках нет иконок.

Иконка-крестик используется самостоятельно, как правило, в левом или правом верхнем углу окна в зависимости от операционной системы: слева на Маке и в Айосе, справа в Виндоусе и в большинстве веб-интерфейсов.

А вот рядом с подписью на кнопке иконка-крестик может даже кого-то ввести в заблуждение или напугать — это ведь напоминает удаление.

См. также совет о применении «неродных» стандартов
Твитнуть

Поделиться

Поделиться

Отправить

Комментарии

Глеб Михальченков 12 марта 2018 В первую очередь в интерфейсах следует избегать соседства подобных кнопок. Тогда не понадобиться выдумывать что-то для того, чтобы они различались. Когда я встречаю конструкцию с соседством кнопок «о, то у меня начинается тупняк, потому что я не понимаю различий в действиях. При этом не важно как это реализовано: «отменить» отдельной кнопкой, а «закрыть» крестиком или же обе кнопки рядом.
Похожие советы Привычки11 Интерфейс536

Вы согласны с тем, что интуитивный интерфейс есть только у соски, все остальные нужно изучать? 12 • 11 • 23 • 10 • 14 • 9 • 8 • 3 • 1 • 1 • Чем заменить «Подробнее» в описании продуктов? 2 • 1 • 5 • Функция Auto Layout в Фигме — как делать резиновые кнопки Как передавать макеты в разработку? 3 • Как работать в Фигме быстрее. Часть 3 1 • Как работать в Фигме быстрее. Часть 2 Как работать в Фигме быстрее 6 • Плагины для Фигмы. Часть 2 Плагины для Фигмы. Часть 1 1 • Сервис для перевода денег между картами. Часть 2 3 • 5 • Советы о дизайне интерфейсов 4 • 3 • 1 • Какую иконку придумать для кнопки вызова официанта 1 • Смена иллюстраций при переключении абзацев в книгах издательства бюро 6 • 1 • Как озаглавить форму записи в парикмахерскую 2 • 5 • 4 • 2 • 4 • 1 • Принцип последней мили в интерфейсах Раскин вскользь говорит: «большинство людей из той культуры, на которую этот интерфейс ориентирован» 2 • 3 • 1 • 1 • 2 • 1 • Должно ли быть на каждом экране название мобильного приложения? 1 • Что дизайнер интерфейса должен знать о привычках? Третья часть 2 • Что дизайнер интерфейса должен знать о привычках? Вторая часть 5 • Что дизайнер интерфейса должен знать о привычках? 3 • Что такое интерфейс? 2 • А что за «взгляд новичка» такой? 1 • Как вы доносите своим клиентам, что дизайн — это не внешний вид, а совершенно иная деятельность? 3 • 4 • 1 • 2 • 5 • 4 • 2 • Как нарисовать правильную галочку? 1 • Идеальная панель администратора, какая она? 13 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • Как правильно показать на главной странице направления компании, когда их аж 12 штук? 10 • 4 • Как вы относитесь к элементам интерфейса с динамическим контентом в рамках фиксированного пространства? 10 • Но когда другой человек это видит, говорит, что это плагиат, ты всё скопировал, воруешь и т. п. 3 • Как правильно писать размерность? 6 • Как быть с длинными названиями компаний при создании логотипов? 9 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • Не могу покреативить над комм. предложением. Тема — грузоперевозки, грузчики 2 • 8 • 9 • Как лучше называть чекбокс про запоминание пользователя? 5 • 6 • 7 • 1 • 8 • Должен ли макет сайта понравиться абсолютно всем сотрудникам веб-студии, прежде чем менеджер проекта покажет его клиенту? 3 • 8 • 2 • Адвокат хочет выйти на Москву 4 • 14 • Хотим переделать свой и-магазин пиротехники 3 • Год назад запустил личный проект «Либретто опер» 2 • Необходимо разработать интернет-магазин китайского чая 2 • 5 • Хочу сделать красивый блог с пошаговыми рецептами 7 • 2 • Скажите, в каком виде вы оформляете юзкейсы? 1 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • В совете Артём Горбунов говорил о несочетающихся пропорциях шрифтов 1 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 3 • 4 • 3 • 1 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 7 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • Что даёт вам основания предполагать, будто принципы, сформулированные для материальных систем, можно переносить на информационные? 3 • 6 • 3 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 1 • 2 • 7 • 2 • 6 • 5 • 2 • 1 • 2 • 9 • 4 • 5 • Есть каталог товаров, и нужно придумать названия для места, куда этот товар можно отложить 3 • Сейчас многие предприятия покупают домены на русском 3 • 5 • 7 • Есть подозрение, что «выберите пункт», вбитый в селект по умолчанию — это костыльное решение 8 • 1 • 4 • Подскажите пожалуйста, как бы вы построили диаграмму следующего типа 2 • 4 • Многие антивирусы не дают возможности закрыть или удалить себя без дополнительных усилий 9 • 4 • 5 • 6 • 5 • 7 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 19 • 19 • 2 • 6 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 18 • 9 • Почему для придания клавишам дополнительных функций никто не использует колёсико с кнопкой под ним? 6 • 4 • 6 • Что можно было бы сделать с изображениями, чтобы это их не уродовало и затрудняло их копирование? 1 • 3 • В. И. Ленин или В.И. Ленин? 4 • Премия имени Олега Янковского вручается 32 мая 1 • 6 • 3 • Почему копирайт разработчиков сайта принято ставить только на главной странице? 6 • 3 • 5 • 3 • Какую пиктограмму нужно ставить рядом с идущим таймером? 3 • 6 • Дорогие советчики, объясните, что значат знаки после стоимости 999,— 10 • 4 • 9 • 4 • 1 • 3 • 14 • 2 • 5 • 4 • 3 • 5 • 9 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • Чем арт-директор отличается от дизайнера? 5 • Как бы вы набрали названия, например, магистральных трубопроводов? 1 • Печатаю я текст и вдруг обнаруживаю, что делаю это в неправильной раскладке 10 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 2 • Как правильно писать ОКПО, ОГРН, ИНН/КПП в реквизитах организации? 5 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • 8 • 3 • 3 • Числа, кратные 5 или 10 кажутся больше, чем остальные 4 • 5 • 2 • Как вы думаете, какой лучше текст, мотивирующий закрывать дверь, лучше разместить на листе А4? 6 • 2 • 7 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 17 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 1 • В инфографике есть Тафти, а есть ли кто-то такой же в мире логотипов? 7 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • Может, кто-нибудь из советчиков знает удачный перевод user experience? 10 • 4 • 1 • 8 • 1 • 4 • 1 • 2 • Как писать название исполнителя и название песни 6 • 2 • 10 • Когда требуется написать что-то вроде «руб./м²» возникает вопрос — а нужна ли в данном случае точка? 5 • 7 • 1 • Я думаю, что повсеместно нужно использовать формат даты 1 дек 2010 19 • 6 • 6 • 9 • 7 • 2 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • Как правильно писать счёт игры: Германия — Англия 4:1, 4—1 или 4–1? 5 • 2 • Я перевожу книгу Эдварда Тафти «Envisioning Information» 12 • 2 • 7 • 2 • 13 • 12 • 18 • 5 • 2 • 19 • 4 • 2 • 7 • 3 • 7 • Итоги конкурса уважаемых советчиков «Сургут» 13 • Как открыть продуктовый магазин в частном доме? У меня есть сайт о Джумле 4 • 13 • 1 • Итоги конкурса уважаемых советчиков «Таблица оценок КВН» 23 • 46 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 10 • 9 • 4 • 1 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 10 • 6 • 5 • 4 • 3 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • 15 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • 3 • 5 • 9 • 6 • 2 • 13 • 6 • 5 • 2 • 14 • 4 • 13 • Как вы относитесь к иконке RSS? 8 • 10 • 5 • 7 • 1 • 11 • 4 • 3 • 14 • Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков 4 • 2 • 35 • 4 • 3 • 16 • 5 • 8 • 7 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 3 • 11 • 6 • 8 • 2 • 1 • 5 • 5 • 7 • 20 • 4 • Шесть тезисов об идеальной электронной книге 12 • 4 • 2 • 1 • 26 • 22 • 6 • 24 • 10 • 3 • 2 • 2 • 9 • 7 • 18 • 12 • 15 • 7 • Хотел бы узнать ваше мнение по поводу размещения двух логотипов на визитке 3 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 7 • 9 • 6 • 5 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • Поскольку одни люди привыкли мерить время цифрами, а другие циферблатами, мне кажется разумной идея добавить в интерфейсы телефонов пиктограммы с часами 2 • 5 • 12 • 7 • 1 • 23 • 15 • 9 • 2 • 7 • 8 • 10 • 5 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • У меня вопрос по целесообразности использования WYSIWYG-редактора в администраторской панели сайта 10 • 15 • 8 • 10 • 12 • 13 • 3 • 3 • Банальное перечисление языков через запятую не подходит, работодателя интересует уровень владения каждым из языков. 12 • 6 • 4 • 9 • 7 • 7 • 9 • 10 • В своей книге Алан Купер неодобрительно высказывается о таком явлении, как файловая система в компьютерах 24 • 10 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 7 • 11 • 21 • 12 • 13 • 7 • 16 • 14 • 8 • 11 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • 16 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 13 • 4 • 2 • Хочу задать вам вопрос об устройстве Эмгизмо 12 • 4 • 8 • 6 • 2 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • 13 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 7 • 6 • 15 • 6 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 4 • 12 • 13 • 16 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 15 • 21 • 8 • 11 • 5 • 6 • 7 • 8 • 1 • 7 • 15 • 7 • 11 • 9 • 4 • 11 • 4 • 8 • 11 • 4 • 1 • 7 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 15 • 16 • 7 • 4 • 4 • 9 • 5 • 8 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-лядесктоп-приложение 6 • 4 • 8 • 5 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • 3 • 6 • 11 • 16 • 20 • 3 • 7 • Подскажите, пожалуйста, чем технический дизайн отличается от технической иллюстрации… 5 • 2 • 23 • 9 • 13 • 11 •

2 • Что дизайнер интерфейса должен знать о привычках? Третья часть 2 • Что дизайнер интерфейса должен знать о привычках? Вторая часть 5 • Что дизайнер интерфейса должен знать о привычках? 3 • Вы согласны с тем, что интуитивный интерфейс есть только у соски, все остальные нужно изучать? 12 • 11 • 23 • 10 • 14 • 9 • 8 •

3 • 1 • 1 • Чем заменить «Подробнее» в описании продуктов? 2 • 1 • 5 • Функция Auto Layout в Фигме — как делать резиновые кнопки Как передавать макеты в разработку? 3 • Как работать в Фигме быстрее. Часть 3 1 • Как работать в Фигме быстрее. Часть 2 Как работать в Фигме быстрее 6 • Плагины для Фигмы. Часть 2 Плагины для Фигмы. Часть 1 1 • Сервис для перевода денег между картами. Часть 2 3 • 5 • Советы о дизайне интерфейсов 4 • 3 • 1 • Какую иконку придумать для кнопки вызова официанта 1 • Смена иллюстраций при переключении абзацев в книгах издательства бюро 6 • 1 • Как озаглавить форму записи в парикмахерскую 2 • 5 • 4 • 2 • 4 • 1 • Принцип последней мили в интерфейсах Раскин вскользь говорит: «большинство людей из той культуры, на которую этот интерфейс ориентирован» 2 • 3 • 1 • 1 • 1 • Должно ли быть на каждом экране название мобильного приложения? 1 • Что такое интерфейс? 2 • А что за «взгляд новичка» такой? 1 • Как вы доносите своим клиентам, что дизайн — это не внешний вид, а совершенно иная деятельность? 3 • 4 • 1 • 2 • 5 • 4 • 2 • Как нарисовать правильную галочку? 1 • Идеальная панель администратора, какая она? 13 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • Как правильно показать на главной странице направления компании, когда их аж 12 штук? 10 • 4 • Как вы относитесь к элементам интерфейса с динамическим контентом в рамках фиксированного пространства? 10 • Но когда другой человек это видит, говорит, что это плагиат, ты всё скопировал, воруешь и т. п. 3 • Как правильно писать размерность? 6 • Как быть с длинными названиями компаний при создании логотипов? 9 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • Не могу покреативить над комм. предложением. Тема — грузоперевозки, грузчики 2 • 8 • 9 • Как лучше называть чекбокс про запоминание пользователя? 5 • 6 • 7 • 1 • 8 • Должен ли макет сайта понравиться абсолютно всем сотрудникам веб-студии, прежде чем менеджер проекта покажет его клиенту? 3 • 8 • 2 • Адвокат хочет выйти на Москву 4 • 14 • Хотим переделать свой и-магазин пиротехники 3 • Год назад запустил личный проект «Либретто опер» 2 • Необходимо разработать интернет-магазин китайского чая 2 • 5 • Хочу сделать красивый блог с пошаговыми рецептами 7 • 2 • Скажите, в каком виде вы оформляете юзкейсы? 1 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • В совете Артём Горбунов говорил о несочетающихся пропорциях шрифтов 1 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 3 • 4 • 3 • 1 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 7 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • Что даёт вам основания предполагать, будто принципы, сформулированные для материальных систем, можно переносить на информационные? 3 • 6 • 3 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 1 • 2 • 7 • 2 • 6 • 5 • 2 • 1 • 2 • 9 • 4 • 5 • Есть каталог товаров, и нужно придумать названия для места, куда этот товар можно отложить 3 • Сейчас многие предприятия покупают домены на русском 3 • 5 • 7 • Есть подозрение, что «выберите пункт», вбитый в селект по умолчанию — это костыльное решение 8 • 1 • 4 • Подскажите пожалуйста, как бы вы построили диаграмму следующего типа 2 • 4 • Многие антивирусы не дают возможности закрыть или удалить себя без дополнительных усилий 9 • 4 • 5 • 6 • 5 • 7 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 19 • 19 • 2 • 6 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 18 • 9 • Почему для придания клавишам дополнительных функций никто не использует колёсико с кнопкой под ним? 6 • 4 • 6 • Что можно было бы сделать с изображениями, чтобы это их не уродовало и затрудняло их копирование? 1 • 3 • В. И. Ленин или В.И. Ленин? 4 • Премия имени Олега Янковского вручается 32 мая 1 • 6 • 3 • Почему копирайт разработчиков сайта принято ставить только на главной странице? 6 • 3 • 5 • 3 • Какую пиктограмму нужно ставить рядом с идущим таймером? 3 • 6 • Дорогие советчики, объясните, что значат знаки после стоимости 999,— 10 • 4 • 9 • 4 • 1 • 3 • 14 • 2 • 5 • 4 • 3 • 5 • 9 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • Чем арт-директор отличается от дизайнера? 5 • Как бы вы набрали названия, например, магистральных трубопроводов? 1 • Печатаю я текст и вдруг обнаруживаю, что делаю это в неправильной раскладке 10 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 2 • Как правильно писать ОКПО, ОГРН, ИНН/КПП в реквизитах организации? 5 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • 8 • 3 • 3 • Числа, кратные 5 или 10 кажутся больше, чем остальные 4 • 5 • 2 • Как вы думаете, какой лучше текст, мотивирующий закрывать дверь, лучше разместить на листе А4? 6 • 2 • 7 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 17 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 1 • В инфографике есть Тафти, а есть ли кто-то такой же в мире логотипов? 7 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • Может, кто-нибудь из советчиков знает удачный перевод user experience? 10 • 4 • 1 • 8 • 1 • 4 • 1 • 2 • Как писать название исполнителя и название песни 6 • 2 • 10 • Когда требуется написать что-то вроде «руб./м²» возникает вопрос — а нужна ли в данном случае точка? 5 • 7 • 1 • Я думаю, что повсеместно нужно использовать формат даты 1 дек 2010 19 • 6 • 6 • 9 • 7 • 2 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • Как правильно писать счёт игры: Германия — Англия 4:1, 4—1 или 4–1? 5 • 2 • Я перевожу книгу Эдварда Тафти «Envisioning Information» 12 • 2 • 7 • 2 • 13 • 12 • 18 • 5 • 2 • 19 • Вы согласны с тем, что интуитивный интерфейс есть только у соски, все остальные нужно изучать? 12 • 4 • 2 • 7 • 3 • 7 • Итоги конкурса уважаемых советчиков «Сургут» 13 • Как открыть продуктовый магазин в частном доме? У меня есть сайт о Джумле 4 • 13 • 1 • Итоги конкурса уважаемых советчиков «Таблица оценок КВН» 23 • 46 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 10 • 9 • 4 • 1 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 10 • 6 • 5 • 4 • 3 • 11 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • 15 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • 3 • 5 • 9 • 6 • 2 • 13 • 6 • 5 • 2 • 14 • 4 • 13 • Как вы относитесь к иконке RSS? 8 • 10 • 5 • 7 • 1 • 11 • 4 • 3 • 14 • Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков 4 • 2 • 35 • 4 • 3 • 16 • 5 • 8 • 7 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 3 • 11 • 6 • 8 • 2 • 1 • 5 • 5 • 7 • 20 • 4 • Шесть тезисов об идеальной электронной книге 12 • 4 • 2 • 1 • 26 • 22 • 6 • 24 • 10 • 3 • 2 • 2 • 23 • 9 • 7 • 18 • 12 • 15 • 7 • Хотел бы узнать ваше мнение по поводу размещения двух логотипов на визитке 3 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 7 • 9 • 6 • 5 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • Поскольку одни люди привыкли мерить время цифрами, а другие циферблатами, мне кажется разумной идея добавить в интерфейсы телефонов пиктограммы с часами 2 • 5 • 12 • 7 • 1 • 23 • 15 • 9 • 2 • 7 • 8 • 10 • 5 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • У меня вопрос по целесообразности использования WYSIWYG-редактора в администраторской панели сайта 10 • 15 • 8 • 10 • 12 • 13 • 3 • 3 • Банальное перечисление языков через запятую не подходит, работодателя интересует уровень владения каждым из языков. 12 • 6 • 4 • 9 • 7 • 7 • 9 • 10 • В своей книге Алан Купер неодобрительно высказывается о таком явлении, как файловая система в компьютерах 24 • 10 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 7 • 11 • 21 • 12 • 13 • 7 • 16 • 14 • 8 • 11 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • 16 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 13 • 4 • 2 • Хочу задать вам вопрос об устройстве Эмгизмо 12 • 4 • 8 • 6 • 2 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • 13 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 7 • 6 • 15 • 6 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 4 • 12 • 13 • 16 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 15 • 21 • 10 • 8 • 11 • 5 • 6 • 7 • 8 • 1 • 7 • 15 • 7 • 11 • 9 • 4 • 11 • 4 • 8 • 11 • 4 • 1 • 7 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 14 • 15 • 16 • 7 • 4 • 4 • 9 • 5 • 8 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 9 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-лядесктоп-приложение 6 • 4 • 8 • 5 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • 3 • 6 • 11 • 16 • 20 • 3 • 7 • Подскажите, пожалуйста, чем технический дизайн отличается от технической иллюстрации… 5 • 2 • 8 • 23 • 9 • 13 • 11 •

Недавно всплыло

Как выжить в дистанционной работе. Инструменты на удалёнке 4 • Как нанимать исполнителей на временную работу в отдельные проекты? 1 • Как выжить в дистанционной работе. Разделить согласование и сдачу 1 • 6 •

Бюро Горбунова

Запрещённые слова

[email protected]

Большая Новодмитровская улица,36, строение 2 Москва, Россия, 127015

Запросите подтверждение

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

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

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

Мобильное приложение Lowes: Нажатие кнопки «X» или стрелки «Назад» может сбросить выбор и вернуть пользователя к предыдущему набору результатов. Справа: после нажатия на «X» появилось диалоговое окно подтверждения, чтобы проверить, намеревался ли пользователь применить или отменить настройки фильтра, прежде чем вернуться к списку результатов.

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

Duolingo: Нажатие кнопки X завершит текущий урок и вы потеряете текущий прогресс. Чтобы избежать ошибок, приложение добавило диалоговое окно подтверждения.

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

Иконки Glyphicons

Фреймворк Bootstrap 3 включает в себя более 250 иконок в формате шрифта из набора Glyphicons Halflings. Библиотека Glyphicons Halflings не является бесплатной. Но разработчики этих иконок сделали некоторую часть из них доступной для использования в Bootstrap 3.

Четвёртая версия Bootstrap не включает никакие наборы иконок в формате шрифта в свою стандартную поставку. Если они вам нужны, то их придётся подключать самостоятельно.

Стандартные иконки Bootstrap 3 (из набора Glyphicon Halflings)

Стандартные иконки фреймворка Bootstrap 3

Используйте понятные метки

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

На экране фильтра мобильного приложения Yelp в верхней части экрана расположены кнопки Cancel и Reset, и одна большая кнопка Apply в нижней части. Аналогично, фильтр в мобильном приложении Etsy содержит отдельные кнопки с метками Clear и Done. (Примечание: Etsy использует Done, а не Apply, потому что фильтры применяются, как только они были выбраны, согласно рекомендаций для тумблеров).

(Слева) Мобильное приложение Yelp: текстовые метки для Cancel, Reset и Apply понятные и четкие, что уменьшает вероятность непреднамеренного закрытия представления и потери выбранных фильтров. (Справа) Мобильное приложение Etsy: текстовая метка Clear дает пользователям понятный способ отмены выбора. Ссылка Done возвращает на страницу с перечнем продуктов с уже выбранными вариантами.

Как подключить иконки Glyphicons Halflings?

В стандартной сборке Bootstrap 3 иконки Glyphicons Halflings подключать не надо. Они и так уже подключены в файле CSS (bootstrap.css или bootstrap.min.css).

Находятся иконки Glyphicons Halflings в каталоге fonts. В данной директории находятся несколько форматов (eot, svg, ttf, woff, woff2) одних и тех же иконок.

Формат eot необходим для отображения иконок в старых браузерах Microsoft Internet Explorer (до 9 версии). Шрифт в формате ttf используется для отображения иконок в устаревших браузерах операционной системы Android (до версии 4.4). woff и woff2 – это форматы, которые используют все основные браузеры. Вторая версия формата шрифта (woff2) отличается от первой тем, что она имеет меньший размер. В настоящее время woff2 поддерживается браузерами Chrome 36+, Opera 26+, Firefox 35+. Шрифт в формате svg поддерживается только браузерами Safari (4.1 и ниже), работающими под управлением операционной системы iOS.

По умолчанию шрифты Glyphicons Halflings должны быть расположены относительно файла bootstrap.css или bootstrap.min.css следующим образом: bootstrap.css -> родительский каталог -> папка fonts -> шрифты

Если иконки Bootstrap отображаются у вас на странице квадратиками, то проверьте, правильно ли у вас расположены шрифты, относительно файла bootstrap.css по вышеприведённой схеме.

Предпочтительный вариант «Сохранить и закрыть»

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

Например, Gmail автоматически сохраняет черновик сообщения, написанный в немодальном окне. Эта практика позволяет пользователям, при желании, свернуть или закрыть окно, сохранив при этом текущий прогресс. При наведении курсора на значок X в верхнем правом углу окна сообщения отображается подсказка, подтверждающая, что черновик будет сохранен и закрыт. Однако отмена по-прежнему доступна (иконка мусорного бака в нижней правой части окна сообщения – вдали от параметра «Сохранить и закрыть», чтобы избежать путаницы).

Gmail: Наведение курсора показало, что значок X предназначен для закрытия окна, а не для удаления черновика, что позволяет пользователям сохранить и закрыть окно сообщения, не теряя незавершенную работу

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

Glow Baby: (Слева) Нажатие на значок X в окне с запущенным таймером закрывает окно, не отменяя сам таймер, и, таким образом, позволяет пользователю продолжать использовать приложение для регистрации других типов событий, участия в обсуждениях сообщества, чтения статей, и т.д. (Посередине) Статус запущенного таймера отображался в баннере в верхней части экрана. (Справа) Нажатие кнопки X во время паузы таймера вызывает кнопки Discard или Cancel, чтобы определить намерение пользователя.

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

Как использовать стандартные иконки в Bootstrap 3?

Добавление иконки Bootstrap на веб-страницу обычно осуществляется с помощью элемента span или i, к которому необходимо добавить базовый класс glyphicon и класс определённой иконки (например, иконки телефона — glyphicon-earphone).

Иконка телефона из набора Glyphicon Halflings

Bootstrap 3 - HTML код иконки телефона

Галерея иконок Bootstrap 3

Стилизация иконок в Bootstrap 3

Оформление иконок Glyphicons Halflings осуществляется также как и стилизация обычного текста.

Например, для того чтобы изменить цвет иконки, ей необходимо просто задать CSS-свойство color.

/* CSS */ .glyphicon-green { color: green; }

Изменение размера иконки Glyphicon осуществляется с помощью CSS свойства font-size:

Добавление иконок Bootstrap к HTML-элементам

Помещение иконки «Звездочка» в кнопку выполняется следующим образом:

Избранное Избранное

Скриншот примера:

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

Использование иконки Bootstrap в качестве маркера списка ul.

Чтобы это осуществить необходимо:

  1. добавить класс icon к элементу ul;
  2. вставить на страницу фрагмент CSS кода.

/* CSS */ ul.icon { /* список без стандартного маркера */ list-style-type: none; } ul.icon li { /* отступ слева */ text-indent: 0px; } ul.icon li:before { /* шрифт */ font-family: ‘Glyphicons Halflings’; /* код иконки */ content: «\e127»; /* расположение блока с иконкой */ float: left; /* ширина блока */ width: 35px; }

  • Содержимое 1 пункта
  • Содержимое 2 пункта
  • Содержимое 3 пункта

Пример, как иконку можно поместить в элемент input:

/* CSS */ .input-icon { position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; pointer-events: none; top: 25px; } .form-icon { position: relative; } .form-icon input { padding-left: 42.5px; } Имя пользователя:

Вывод

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

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

Рейтинг
( 2 оценки, среднее 4.5 из 5 )
Понравилась статья? Поделиться с друзьями: