Принципов usability: понятно, удобно, комфортно. Коротко о главном / Блог компании Digital Professionals Hub / Хабр

Содержание

понятно, удобно, комфортно. Коротко о главном / Блог компании Digital Professionals Hub / Хабр

В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?
Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.

Для самостоятельной разработки интерфейса нужно учитывать несколько простых правил:


  1. Правило 7-ми.
    Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
    С этой точки зрения сайт tutu.ru, безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
    В то время как сайт Российских Железных дорог — отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить.
  2. Правило 2х секунд.
    Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru.
  3. Правило 3х кликов.
    Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами.
  4. Правило Фиттса
    Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
    Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее.
  5. Перевернутая пирамида
    Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.

Но даже спроектированный по всем правилам интерфейс стоит протестировать. Фокус-группы – самый доступный способ для тестирования «своими силами».

Тестирование состоит из четырех этапов:

  1. Подбор фокус-группы. Тестировщики должны соответствовать вашей целевой аудитории. Не стоит просить бабушку протестировать приложение для поиска обновлений драйверов.
  2. Составление плана тестирования – списка задач, для выполнения которых разработан ваш продукт. Именно этому списку будут следовать тестировщики. Если вы делаете интернет-магазин, в список должны быть включены такие задачи как поиск товара, получение информации о товаре, путь от получения информации о товаре к его заказу, удаление товара из корзины.
  3. Выполнение тестировщиками списка задач и фиксирование ошибок. Ошибкой можно считать все что угодно: слишком сложная капча, отсутствие сообщения от сервера о том, что «товар добавлен в корзину», невозможность изменить количество товаров в корзине или отменить действие, и т.д.
  4. После выявления и исправления ошибок цикл тестировки нужно пройти заново. Цикл должен повторяться до тех пор, пока результаты не будут удовлетворять необходимым требованиям.

Оценка качества интерфейса должна проводиться на каждом этапе проекта. Не откладывайте тестирование юзабилити до самого последнего момента. Серьёзные ошибки просто нельзя будет исправить из-за того, что проект находится на завершающей стадии. И тогда — либо переделывать заново, либо получить низкий показатель юзабилити.
Как правило, достаточно 5 тестировщиков для выявления основных багов.

Пример по теме


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

Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».

Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.

Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!

Теперь о цифрах. Время ожидания отклика в зависимости от скорости соединения может разниться, но в любом случае это будет больше 2х секунд. А путь до страницы контактов менеджмента занял 7 кликов. А мог бы занять всего один.
Влад Топалов, конечно, может позволить себе такие «креативные» решения. Но очевидно, что такие решения просто губительны для бизнеса.

Принципы юзабилити: 3 важных правила

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

Термин «юзабилити» прозрачен: «юзер» на интернациональном языке интернета означает «пользователь». Пользователю ресурса должно быть удобно читать тексты, выхватывать взглядом знаковую информацию, листать изображения и, тем более, выбирать товары и оформлять заказ на услугу.

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

Перечислим основные принципы юзабилити:

  • следование психологии зрения пользователя
  • элегантность web-дизайна, вызывающая доверие
  • соответствие вашего ресурса пользовательским привычкам.

Визуализация пользовательского интерфейса

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

  1. Возможно, вас это удивит, но форма оплаты либо опция «положить в корзину» своим исполнением могут подтолкнуть посетителя либо воспользоваться ими, либо уйти на другой сайт.

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

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

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

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

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

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

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


Вам может понравиться: Увеличение конверсии интернет-магазина женской одежды 

Стандарты юзабилити

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

  1. Креативные виджеты на грани арт-хауса — это интересно, но вряд ли поспособствует желанию пользователя приобрести мультиварку именно на вашем сайте. Следовательно, упор визуального решения посадочной страницы должен делаться на скупую палитру, графически выразительные подзаголовки и качественные превью популярных моделей с броским заманивающим ярлычком, например, «скидка» или «предложение недели».
  2. Не менее важные составляющие «компьютерного доверия» — реальность контактов, подробная карта проезда, отсутствие ошибок в текстах, свежая дата последней публикации, адекватные подписи экспертов под текстами (к примеру, «Леся Майская» звучит менее серьезно, чем «Елена Сорокина»).
  3. «Шапка» ресурса должна включать себя ответы на все вопросы о вас: название компании и логотип, профиль деятельность, навигацию по разделам, контакты; в случае нотариальных услуг либо фармацевтики желательно не «прятать» слишком далеко номер лицензии.
  4. Важно не перегрузить верхнюю часть ресурса базовыми данными, однако предоставить самые важные списки, на которые, заинтересовавшись, пользователь перейдет по ссылкам: подзаголовки по услугам и разделам товаров, специальные предложения, перечень vip-клиентов, а также зазывающий иллюстрированный слоган и, при наличии, видео-ролик о вашей работе.

Привычка как принцип юзабилити

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

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

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

Для того, чтобы помочь вам лучше разобраться в теме, рекомендуем ознакомиться с книгой «Usability» от GUSAROV

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

01.12.2018

10 правил Usability: анализ сайта по Якобу Нильсену

Как часто мы слышим от клиентов: “Нашему сайту нужен крутой дизайн”.
Но, чтобы сделать ваш продукт успешным и выделиться среди конкурентов уже недостаточно иметь просто красивый сайт в интернете.
Вашим пользователям должен нравится опыт взаимодействия с вашим продуктом, будь-то процесс покупки товара, поиск по сайту или заполнение формы заявки.

В этой статье мы расскажем о простом методе проверки юзабилити на примере одного из клиентских сайтов.

Якоб Нильсен – один из гуру UX – еще в 90-х годах попробовал объективно оценить пользовательский опыт на цифровых устройствах. Он объединил это в 10 общих принципов, которые позже назвал “эвристиками юзабилити”. Хоть они и были сформированы в 90-х годах, эвристики Нильсена актуальны и в наше время.

В этой статье мы рассмотрим эти 10 принципов Якоба Нильсена на примере одного из наших сайтов, по которому мы провели эвристический анализ.

1. Видимость статуса системы

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

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

Мы можем легко избежать этой ситуации, если просто изменим состояние кнопки “Купить” на иконку, показывающую, что товар уже в корзине.

2. Схожесть системы с реальным миром

Этот принцип про простоту интерфейса. Очень важно проследить, чтобы на сайте все вкладки и слова были понятны и по делу.

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

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

3. Контроль и свобода действий

Этот принцип говорит о том, что пользователю нужно дать свободу выбора и действий. Пользователь может совершить ошибку и ему нужен “запасной выход”.

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

Мы рекомендуем всегда давать пользователю возможность вернуться на шаг назад.

4. Единообразие и стандарты

Пользователи не должны путаться у вас на сайте. Элементы интерфейса должны выглядеть одинаково и нести одно смысловое значение.

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

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

5. Предотвращение ошибок

Мы люди и мы склонны совершать ошибки. И, конечно, нам бы хотелось, чтобы кто-то наперед продумал все возможные варианты возникновения ошибок и предотвратил их.

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

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

6. На виду, а не в памяти

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

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

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

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

7. Гибкость и эффективность

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

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

Мы рекомендуем учитывать разный опыт ваших пользователей и создавать тот функционал, который сможет удовлетворить всех.

8. Эстетика и минимализм

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

На примере видно, как много полей нужно заполнить для регистрации на сайте. Некоторые поля, такие как “Факс”, вообще не актуальны, да и в целом процесс регистрации должен быть простым и быстрым. Из-за большого количества заполняемых полей пользователи могут просто прекратить регистрацию.

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

9. Понимание и исправление ошибок

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

На примере выше пользователь не нашел нужную страницу. В целом, 404 ошибка описана доступно, но есть одно НО – сайт не предлагает пользователю решение проблемы.

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

10. Помощь и документация

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

На анализируемом сайте нет ни вкладки “Помощь”, ни страницы с “Вопросами и ответами”.

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

Итого

“10 эвристик юзабилити” Якоба Нильсена – отличный метод для начала улучшения ваших интерфейсов.
Эти правила являются общими и в большинстве случаев применимы к любым цифровым продуктам.
Эвристики – это не панацея, но учитывая их при разработке ваших интерфейсов вы будете в большом конкурентном преимуществе.

Page not found — WaterMillSky®, Москва, Россия

Unfortunately the page you’re looking doesn’t exist (anymore) or there was an error in the link you followed or typed. This way to the home page.


Blog

  • 02/26/2021 — Как создать продающие описания для товарных страниц
  • 02/01/2021 — SEO-2021: новости Google за январь
  • 01/09/2021 — SEO-2020: новости Google за декабрь
  • 12/21/2020 — Обзор главных событий в Google за 2020 год
  • 12/17/2020 — Декабрьские обновления в Google API Search Console
  • 12/16/2020 — Обновление инструмента для тестирования структурированных данных
  • 12/03/2020 — SEO-2020: новости Google за ноябрь
  • 11/28/2020 — Советы для бизнеса: как сделать отличный мобильный сайт
  • 11/27/2020 — Ещё раз про Сеть Знаний и Панели Знаний
  • 11/16/2020 — Как в поиске Google создаются подсказки для автозаполнения
  • 11/14/2020 — Как Google предоставляет надёжную информацию в поиске
  • 11/12/2020 — Прощай, Google Webmasters. Здравствуй, Google Search Central
  • 11/11/2020 — Когда Page Experience появится в поиске Google
  • 11/08/2020 — Как использовать Instagram Analytics для развития бизнеса
  • 11/05/2020 — SEO-2020: новости Google за октябрь
  • 10/31/2020 — Самые интересные вопросы о переносе веб-сайтов
  • 10/29/2020 — Главные проблемы с мобильной индексацией новых и ранее запущенных сайтов
  • 10/26/2020 — Рекомендации Google для оформления страниц Чёрной пятницы и Киберпонедельника
  • 10/12/2020 — SEO-2020: новости Google за сентябрь
  • 09/17/2020 — Googlebot переходит на протокол HTTP/2
  • 09/17/2020 — SEO-2020: новости Google в августе
  • 09/07/2020 — Информация о лицензии для изображений в Google Images
  • 09/06/2020 — Новые отчёты в Search Console: технология Signed HTTP Exchange (SXG) помогает устранять ошибки AMP
  • 08/26/2020 — Рекомендации для ритейла: как контролировать изображения просканированных товаров в поиске Google
  • 08/18/2020 — SEO-2020: новости Google в июле
  • 08/16/2020 — Видеоконференция для веб-мастеров Lightning Talk: расширенные результаты и поисковая консоль
  • 08/13/2020 — Изменения в Google Search Console API
  • 07/26/2020 — Подготовка сайта к мобильной индексации 2021 года
  • 07/14/2020 — SEO-2020: новости Google в июне
  • 07/07/2020 — Инструмент Google Rich Results Test вышел из бета-тестирования
  • 07/06/2020 — Советы для бизнеса: как подготовить сайт после решения CJEU о файлах cookie
  • 07/04/2020 — Как в 2020 году Google использует отчёты о спаме
  • 07/01/2020 — Советы для бизнеса: домашний офис и собственные дети
  • 06/27/2020 — Советы для бизнеса: как помочь местному бизнесу в 2020 году
  • 06/24/2020 — Как Google боролся с поисковым спамом в 2019 году
  • 06/21/2020 — Развитие оценки удобства страницы для лучшего пользовательского опыта
  • 06/09/2020 — SEO-2020: новости Google в мае
  • 05/26/2020 — Часто задаваемые вопросы о JavaScript и ссылках
  • 05/25/2020 — Советы для бизнеса: как крупным компаниям поддержать малый бизнес
  • 05/24/2020 — Советы для бизнеса: 10 моментов, которые нужно знать о контракте для внештатных сотрудников
  • 05/23/2020 — Советы для бизнеса: как использовать бизнес-опыт для здравого смысла
  • 05/22/2020 — Советы для бизнеса: 8 способов завершить запуск нового сайта
  • 05/21/2020 — Новые отчёты в Search Console: контент с разметкой Guided Recipes появится в Google Assistant
  • 05/20/2020 — Переводчик Google Translate для некоммерческого использования
  • 05/19/2020 — Советы для бизнеса: лучшие онлайн инструменты для совместной удаленной работы
  • 05/09/2020 — Основы SEO-оптимизации по стандартам 2020 года
  • 05/07/2020 — Советы для бизнеса: восемь шагов, чтобы защитить своё дело
  • 05/07/2020 — SEO-2020: новости Google в апреле
  • 05/06/2020 — Search Console 2020: новые отчёты для специальных объявлений Special Announcement
  • 05/02/2020 — Советы для бизнеса: организуйте самовывоз для продолжения работы
  • 04/29/2020 — Советы для бизнеса: 5 простых шагов для быстрого запуска онлайн-продаж
  • 04/07/2020 — SEO-2020: новости Google в марте
  • 03/27/2020 — Онлайн-бизнес на паузе. Что делать владельцам сайтов
  • 03/18/2020 — Новые типы семантической разметки для виртуальных, отложенных и отменённых событий
  • 03/07/2020 — SEO-2020: новости Google в феврале
  • 03/06/2020 — Переход всех веб-сайтов на мобильную индексацию
  • 03/02/2020 — Лучшие практики для быстрого показа новостей в поиске Google
  • 03/01/2020 — Экспорт данных отчётов в Search Console: ещё больше и лучше
  • 02/28/2020 — Как показать новые мероприятия или события в локальном поиске Google
  • 02/13/2020 — SEO-2020: новости Google в январе
  • 02/10/2020 — Search Console 2020: новые отчёты для сниппетов с отзывами
  • 02/09/2020 — Как самозанятым заработать больше денег на вольных хлебах
  • 01/31/2020 — Новости поиска Google Search за январь 2020 года
  • 01/28/2020 — Новый отчёт в Search Console 2020: обновление инструмента Removals
  • 01/22/2020 — Google завершает поддержку схемы Data-Vocabulary
  • 01/21/2020 — Удачный сайт-резюме или как понравиться работодателю
  • 01/20/2020 — Безопасные настройки файлов Cookie для браузеров с защищенными соединениями
  • 01/18/2020 — Google Search Console: первые обучающие видеоролики 2020 года
  • 01/02/2020 — Обзор SEO-2019: поиск по нулевому клику, алгоритм BERT, локальный спам и многое другое
  • 12/30/2019 — Почему Jimdo — лучший конструктор сайтов для творческих личностей и малого бизнеса
  • 12/29/2019 — Важные события в Google за 2019 год
  • 12/26/2019 — Полный список всех обновлений поисковых алгоритмов Google в 2019 году
  • 12/11/2019 — Запуск нового Publisher Center
  • 12/07/2019 — Программа «Early Adopters Program» для отслеживания посылок через поиск Google
  • 12/04/2019 — Google Search Console 2019: новая панель сообщений
  • 11/29/2019 — Эксклюзив от Jimdo: юридический текст для сайта, гарантированно совместимый с GDPR
  • 11/28/2019 — Новости поиска Google за ноябрь 2019 года
  • 11/21/2019 — Google Search Console 2019: отчётность по результатам поиска продуктов
  • 11/02/2019 — Как получить расширенные сниппеты для сайта в виде блоков с ответами
  • 09/30/2019 — Дополнительные параметры для просмотра контента веб-сайтов в поиске Google
  • 09/23/2019 — Решение CJEU о файлах cookie в 2019 году: как Jimdo подготовит ваш сайт
  • 07/31/2019 — «Swipe To Visit»: новая функция в мобильном поиске для Google Images
  • 07/23/2019 — Браузер «Спутник» сертифицирован для ОС РОСА
  • 07/07/2019 — Советы Jimdo: чек-лист для проверки юзабилити текста
  • 06/10/2019 — Мобильная индексация новых доменов действует по умолчанию
  • 05/30/2019 — Поисковая система «Спутник» – пять лет в полёте!
  • 05/28/2019 — Браузер «Спутник». Корпоративная версия 2019 года
  • 05/15/2019 — Google Карты 2019: ресторан, меню, блюда
  • 05/06/2019 — SEO-2019: новости Google в апреле
  • 04/09/2019 — SEO-2019: новости Google в марте
  • 03/11/2019 — Google Job Search найдёт вакансии для российских пользователей
  • 03/04/2019 — SEO-2019: новости Google в феврале
  • 02/09/2019 — SEO-2019: новости Google в январе
  • 01/10/2019 — SEO-2018: новости Google в декабре
  • 01/10/2019 — Ключевое обновление: браузер «Спутник» перешел на ядро Chromium 64
  • 12/30/2018 — Корпоративные решения: браузер «Спутник» поможет создавать мобильные рабочие места
  • 12/21/2018 — Мобильный индекс: почему важны структурированные данные и альтернативный текст для изображений
  • 12/03/2018 — SEO-2018: новости Google в ноябре
  • 11/03/2018 — SEO-2018: новости Google в октябре
  • 10/05/2018 — SEO-2018: новости Google в сентябре
  • 09/12/2018 — SEO-2018: новости Google в августе
  • 08/23/2018 — SEO-2018: новости Google в июле
  • 07/15/2018 — SEO-2018: новости Google в июне
  • 07/11/2018 — Платон Щукин: вечная сага об идеальных текстах
  • 06/22/2018 — Кулинарные рецепты в Google Home через Google Assistant
  • 06/20/2018 — Благородные цели: как Google помогает веб-мастерам и разработчикам оригинального контента
  • 06/14/2018 — SEO-2018: новости Google в мае
  • 06/13/2018 — Советы Jimdo: 11 золотых правил для написания профессионального контента
  • 05/13/2018 — SEO-2018: новости Google в апреле
  • 04/29/2018 — SEO-2018: новости Google в марте
  • 04/14/2018 — Апрельское обновление: браузер «Спутник» для актуальных версий OS Windows
  • 04/13/2018 — SEO-2018: новости Google в феврале
  • 03/26/2018 — Запуск Google Mobile-First Indexing
  • 03/18/2018 — SEO-2018: первые новости Google в январе
  • 03/15/2018 — Реклама и деньги: как Google регулирует рекламную экосистему
  • 03/11/2018 — Как привлечь пользователей с помощью AMP-страниц высокого качества
  • 03/09/2018 — Анализ тональности текстов с помощью машинного обучения
  • 03/07/2018 — Как Google Chrome защищает Интернет с помощью протокола HTTPS
  • 02/24/2018 — Бесплатные виджеты: 20 лучших предложений для свадебного сайта
  • 02/16/2018 — AMP-истории: новый визуальный формат для мобильных устройств
  • 02/15/2018 — Яндекс Лайт.Браузер для смартфонов на Android
  • 02/15/2018 — Google Featured Snippets: ещё раз о расширенных сниппетах и блоках с готовыми ответами
  • 02/13/2018 — SEO-2017: новости Google в декабре
  • 02/07/2018 — Как Google улучшал поисковую консоль Search Console
  • 02/06/2018 — Автоматический SEO-аудит сайта с помощью расширения Lighthouse для браузера Chrome
  • 01/31/2018 — Новые подробности о возможном апдейте поискового алгоритма Google Search
  • 01/24/2018 — SEO-советы Джона Мюллера: как объединить четыре домена
  • 01/21/2018 — Факторы мобильного ранжирования: скорость загрузки страницы
  • 01/10/2018 — Реальные данные в отчёте PageSpeed Insights
  • 01/09/2018 — Новая поисковая консоль: первые впечатления от знакомства
  • 01/08/2018 — Опции Jimdo: уведомления и вопросы
  • 01/07/2018 — SEO-2017: новости Google в ноябре
  • 01/05/2018 — #NoHacked 3.0: как восстановить сайт после взлома
  • 12/31/2017 — Как подготовить сайт к мобильному индексу
  • 12/31/2017 — Декабрьское обновление поискового алгоритма Google
  • 12/24/2017 — Инструмент Google для тестирования результатов расширенных сниппетов
  • 12/23/2017 — Google представил новую серию видео по SEO для веб-мастеров
  • 12/21/2017 — Правила расширенных мета-тегов: рекомендации Google для создания сниппетов
  • 12/18/2017 — Мобильный браузер «Спутник» для OS Android: декабрьское обновление
  • 12/18/2017 — NoHacked 3.0: как предупредить и обезвредить
  • 12/16/2017 — Google NoHacked 3.0: как узнать, что сайт в безопасности
  • 12/14/2017 — Поисковая оптимизация 2018: Google обновил «Руководство для начинающих»
  • 12/09/2017 — Рендеринг проиндексированных AJAX-страниц
  • 12/06/2017 — Рекомендации Google: язык разметки «Events»
  • 11/30/2017 — SEO-2017: новости Google в октябре
  • 11/11/2017 — Великие идеи для блога копирайтера
  • 10/27/2017 — SEO-2017: бархатный сентябрь
  • 10/26/2017 — Разработки Jimdo: новые категории и функции блога
  • 10/14/2017 — Алиса, Яндекс и нейронный поиск
  • 10/12/2017 — Советы Google: как создать ценный контент
  • 10/12/2017 — Советы для начинающих: как разработать бизнес-план
  • 10/10/2017 — Мультимедийная платформа для автомобилей
  • 09/30/2017 — Доверенный браузер «Спутник» с криптографией на Astra Linux
  • 09/13/2017 — Как создать сайт и получить доверие клиентов
  • 09/11/2017 — SEO-2017: летние новости
  • 09/07/2017 — Алгоритм Королёв: нейронный поиск по уникальным запросам
  • 09/06/2017 — Обновленный браузер «Спутник» для мобильных устройств с Android
  • 09/05/2017 — SEO-2017: урожайный август
  • 08/29/2017 — Fast Fetch: ускоренный рендеринг рекламных AMP-объявлений
  • 08/22/2017 — Новый дашборд: все ваши сайты в одном месте
  • 08/21/2017 — SEO-2017: знойный июль
  • 08/21/2017 — Вопросы и ответы: найдите на Google Maps и узнайте в мобильном поиске
  • 08/14/2017 — Значки для рецептов: поиск изображений по вкусным миниатюрам
  • 08/04/2017 — Новости поисковой консоли Google: отчеты Index Coverage и AMP Fixing Flow
  • 07/10/2017 — Советы по SEO: 5 минут для оптимизации веб-страницы
  • 07/07/2017 — Браузер «Спутник» работает на Windows 10 Creators Update
  • 07/04/2017 — SEO-2017: мокрый июнь
  • 06/28/2017 — SEO-2017: весенние новости
  • 06/27/2017 — SEO-2017: оптимизируем сайт для мобильных устройств
  • 06/24/2017 — Июньское обновление: мобильный браузер «Спутник» для Android
  • 06/20/2017 — Google Search для работодателей: открытые вакансии для лучших соискателей
  • 06/20/2017 — Свободное место: как Яндекс.Навигатор помогает найти парковку
  • 06/19/2017 — Баден-Баден: добрые вести в июне
  • 06/17/2017 — Юбилей Jimdo: интересные факты из 10-летней истории
  • 06/15/2017 — Мобильный индекс: обещанного два года ждут
  • 06/13/2017 — SEO-2017: холодный май
  • 06/10/2017 — Эволюция Капчи: Google внедрил API-интерфейс reCAPTCHA для Android
  • 06/09/2017 — SEO-2017: бурный апрель
  • 06/08/2017 — Платформа Яндекс.Дзен: как технологии искусственного интеллекта улучшают мир медиа
  • 06/03/2017 — Лучшие сниппетты для пользователей
  • 05/26/2017 — Избитая тема: ещё раз о спамовых ссылках в статейном продвижении
  • 05/25/2017 — Google I/O 2017: 100+ анонсов передовых разработок
  • 05/22/2017 — Обновленный дизайн и новые функции блога на Jimdo
  • 05/19/2017 — Google Analytics 2017: расширенная поддержка AMP-страниц
  • 05/18/2017 — Защита сертификатов: как Яндекс.Браузер решает проблемы с безопасностью HTTPS-трафика
  • 05/16/2017 — Эксперименты Яндекса: шустрые турбостраницы
  • 05/12/2017 — Материалы по теме: «Спутник» с персональной лентой публикаций
  • 05/12/2017 — Похожие товары: поиск картинок Google в расширенных карточках
  • 05/11/2017 — Стильные советы: ищем модную одежду на Google Картинках
  • 05/10/2017 — Парковка по картам: Google Maps помогут вспомнить, где находится автомобиль
  • 05/09/2017 — Как Google боролся с веб-спамом: отчет за 2016 год
  • 05/07/2017 — Спорный контент: как Google улучшает качество поиска
  • 05/05/2017 — Полезные подсказки: теперь на русском и других языках
  • 04/28/2017 — SEO-2017: солнечный март
  • 04/22/2017 — Упорный алгоритм: Баден-Баден шлёт «чёрную метку»
  • 04/12/2017 — Марсианский глобус: виртуальная хроника изучения Красной планеты
  • 04/10/2017 — Советы Google: платить не надо, отклонить
  • 04/07/2017 — Алгоритм Баден-Баден: вторая волна
  • 04/04/2017 — Тесты закончились: сервис Google Optimize стал доступным для всех
  • 03/31/2017 — Google Safe Browsing: обновление инструмента «Статус сайта»
  • 03/29/2017 — Гэри Илш: новости о Mobile-First Индексе
  • 03/26/2017 — Алгоритм Фред («Fred»): официальное подтверждение Google
  • 03/23/2017 — Алгоритмы Яндекса: Баден-Баден против SEO
  • 03/22/2017 — Google NoHacked: обзор 2016 года
  • 03/21/2017 — Платон Щукин: 12 вопросов о переезде на протокол HTTPS
  • 03/21/2017 — CTR и показатель отказов: как улучшить кликабельность сайта в Google
  • 03/14/2017 — Что в интересного в URL AMP-страниц?
  • 03/13/2017 — Google Карты для Android: маршрут в один клик и данные в онлайн-режиме
  • 03/13/2017 — Умный перевод: нейросети на службе лингвистов
  • 03/12/2017 — Мобильный помощник: универсальное приложение на каждый день
  • 03/11/2017 — Золотое молчание Google
  • 03/11/2017 — SEO-2017: краткий февраль
  • 03/05/2017 — Яндекс-2017: зимние SEO-новости
  • 03/02/2017 — Самые популярные статьи 2016 года
  • 03/01/2017 — Оставайтесь в безопасности: HTTPS для каждого веб-сайта
  • 03/01/2017 — Закрыто в течение дня
  • 02/28/2017 — Спутник-Карты 2017: уникальный интерфейс с новым дизайном
  • 02/16/2017 — Google Safe Browsing: новая защита от вредоносной активности
  • 02/16/2017 — Отзывы критиков и разметка schema.org для продвижения локального бизнеса
  • 02/15/2017 — Протокол HTTPS: безопасная интернет-экосистема для всех и каждого
  • 02/15/2017 — SEO-2017: многообещающий январь
  • 02/11/2017 — Опасный браузер: как защититься от вредоносных расширений
  • 02/09/2017 — Безопасные технологии: как Google заботится о пользователях
  • 02/08/2017 — Как Google сражался с «ветряными мельницами»
  • 02/05/2017 — Шифрование по ГОСТу: доверенный браузер «Спутник» с российской криптографической защитой
  • 02/04/2017 — Новый API для Mobile-Friendly Test
  • 01/30/2017 — Google Assistant: персональный помощник в мире высоких технологий
  • 01/29/2017 — Ещё раз о ссылках в виджетах
  • 01/28/2017 — Советы Google: как защитить сайт от пользовательского спама
  • 01/26/2017 — Осенние SEO-новости Яндекса
  • 01/24/2017 — Google Firebase для Mobile: как повысить качество мобильных приложений в 2017 году
  • 01/24/2017 — Технология Google AMP Lite: облегченный формат для AMP-страниц
  • 01/23/2017 — Краулинговый бюджет: FAQ от Гэри Илш
  • 01/19/2017 — «Спутник» для Windows: рекламоотвод, режим для чтения и часовой
  • 01/19/2017 — SEO-2016: итоги работы Яндекс.Вебмастера
  • 01/12/2017 — Google против межстраничной рекламы
  • 01/01/2017 — Декабрьские SEO-новости Google
  • 12/31/2016 — Как выявить проблемы для страниц AMP-формата
  • 12/31/2016 — Как сервис Google Search Console помогает сайтам с AMP-страницами
  • 12/30/2016 — Восемь рекомендаций для AMP-страниц по оптимизации мобильного сайта
  • 12/30/2016 — Что такое AMP?
  • 12/29/2016 — Как настроить аналитику на AMP-страницах
  • 12/29/2016 — Советы Платона Щукина: как сделать сайт безопасным
  • 12/23/2016 — Мобильные приложения: прогноз погоды на Google Android
  • 12/23/2016 — Как настроить объявления на AMP-страницах
  • 12/22/2016 — Мобильный поиск Google: ещё быстрее и удобнее в 2017 году
  • 12/19/2016 — Яндекс.Карты 2016 для водителей
  • 12/18/2016 — Летние SEO-новости Яндекса
  • 12/12/2016 — Яндекс, Палех и нейронные сети
  • 12/12/2016 — Все ресурсы в одном наборе: новые сводные отчеты в поисковой консоли Google Search Console
  • 12/09/2016 — Google-2017: «зелёная» энергия для питания дата центров
  • 12/06/2016 — Что знает Яндекс.Браузер об опасностях и угрозах в интернет-среде
  • 12/03/2016 — Google Santa Tracker 2016
  • 12/02/2016 — Расширенные Rich Cards: местные рестораны и онлайн-курсы
  • 12/02/2016 — Рекомендации Google: как не стать мишенью хакеров
  • 12/01/2016 — Ноябрьские SEO-новости Google
  • 12/01/2016 — Контент для Feature-Phone: новые правила сканирования и индексирования
  • 12/01/2016 — Гудбай, Content Keywords
  • 11/17/2016 — Google-Фотосканер: мобильное приложение для цифровых копий
  • 11/17/2016 — Google Analytics 2016 года: дополнительные оповещения по безопасности сайта
  • 11/14/2016 — «Спутник Лайт»: мобильный веб-браузер для смартфонов с iOS
  • 11/14/2016 — Как начать работу с AMP-страницами для мобильных устройств
  • 11/14/2016 — Контент AMP-страниц: предварительный просмотр в мобильной выдаче Google
  • 11/07/2016 — Тесты Google: индексация Mobile-First
  • 11/01/2016 — Октябрьские SEO-новости Google
  • 10/26/2016 — Доверие и реклама: на чём зарабатывает компания Google
  • 10/26/2016 — Весенние SEO-новости Яндекса
  • 10/21/2016 — Используете ускоренные мобильные страницы? Пройдите тест «Проверка страниц AMP»
  • 10/03/2016 — AMP-страницы: новые вопросы веб-мастеров к Google
  • 10/01/2016 — Сентябрьские SEO-новости Google
  • 09/30/2016 — Мобильный поиск Google: ускоренные AMP-страницы в основной выдаче
  • 09/28/2016 — Яндекс против спама: как защититься от спамеров
  • 09/23/2016 — Знакомьтесь, алгоритм Penguin 4.0
  • 09/19/2016 — Рекомендации Google: как новостному сайту перейти на протокол HTTPS
  • 09/17/2016 — Google против пиратов: обновление отчёта за 2016 год
  • 09/01/2016 — Августовские SEO-новости Google
  • 08/20/2016 — Июльские SEO-новости Google
  • 08/11/2016 — Советы Платона Щукина: как проиндексировать мобильный сайт на поддомене
  • 08/03/2016 — Мобильные решения: как Яндекс распознаёт автомобили
  • 08/02/2016 — Умная троица: Яндекс, Браузер, Дзен
  • 07/30/2016 — Мобильные решения: Яндекс.Деньги по QR-коду
  • 07/24/2016 — Инновации Google: восемь интересных вещей с конференции I/O 2016
  • 07/21/2016 — Июньские SEO-новости Google
  • 06/23/2016 — Расширенный поиск: введение в карты Rich Cards
  • 06/20/2016 — В одном наборе: сводная статистика по всем сайтам в Search Console
  • 06/16/2016 — Зимние SEO-новости Яндекса
  • 06/09/2016 — Советы Платона Щукина: как подружить сайт с мобильными устройствами
  • 06/05/2016 — Криптография по ГОСТу: «Спутник» тестирует браузер с шифрованием
  • 06/02/2016 — Майские SEO-новости Google
  • 05/31/2016 — Мобильный браузер Спутник: обновление для устройств с Android
  • 05/29/2016 — Эволюция Google: юбилейная конференция I/O 2016 года
  • 05/27/2016 — Переводи легко: Google Переводчик 2016 для устройств с Android и iOS
  • 05/26/2016 — Санкции Google: скрытое перенаправление мобильных пользователей
  • 05/23/2016 — Мобильные приложения: Google Android Auto
  • 05/19/2016 — Виртуальная клавиатура Google Gboard с поиском для iOS
  • 05/14/2016 — Яндекс.Карты 2016 для пешеходов
  • 05/13/2016 — Мобильные технологии Яндекса: Антишок защищает пользователей Android
  • 05/05/2016 — Как в 2015 году Google боролся с веб-спамом
  • 05/01/2016 — Бесконтактные платежные технологии: Яндекс.Деньги, NFC и Android
  • 04/30/2016 — Апрельские SEO-новости Google
  • 04/29/2016 — Отчёты Google за 2015 год – безопасный Android
  • 04/29/2016 — Google Переводчик: 10 фактов к юбилею онлайн-сервиса
  • 04/27/2016 — Яндекс.Телефония: виртуальная АТС для бизнес-клиентов
  • 04/26/2016 — Персональный подход: личные поисковые подсказки в «Спутнике»
  • 04/24/2016 — Мартовские SEO-новости Google
  • 04/22/2016 — Советы Платона Щукина: Яндекс.Вебмастер
  • 04/19/2016 — Яндекс.Браузер с технологией DNSCrypt
  • 04/18/2016 — Февральские SEO-новости Google
  • 04/15/2016 — «Спутник.Аналитика» собирает статистику и анализирует данные
  • 04/11/2016 — Январские SEO-новости Google
  • 03/26/2016 — Советы Платона Щукина – как сделать правильный фавикон
  • 03/22/2016 — Новые фишки для браузера «Спутник» – пользовательские экраны и детский режим по таймеру
  • 03/17/2016 — Карты Google Maps 2016 для Android и iPhone
  • 03/10/2016 — «Спутник» поддержал конкурс «Позитивный контент-2016»
  • 03/09/2016 — Adobe представил Experience Manager Mobile
  • 03/04/2016 — В «Мегафоне» появился виртуальный консультант Елена
  • 02/27/2016 — Яндекс.Авиабилеты для мобильных пользователей
  • 02/24/2016 — Как в 2015 году Google боролся с некачественными рекламными материалами
  • 02/19/2016 — Пять вопросов для Google
  • 02/17/2016 — Обновление Google My Maps для Android
  • 02/12/2016 — 9 секретов Минусинска
  • 02/03/2016 — Как переехать на протокол HTTPS: рекомендации Google
  • 02/02/2016 — Яндекс приготовил Владивосток
  • 01/12/2016 — Panda вошел в состав основного ядра алгоритма ранжирования Google
  • 12/31/2015 — Советы Платона Щукина: настройка индексирования сайта
  • 12/22/2015 — Яндекс.Браузер на защите мобильных счетов
  • 12/17/2015 — Новые Яндекс.Карты 2015 для мобильных устройств с iOS
  • 12/14/2015 — Новое кино от «Спутника»
  • 12/09/2015 — Мобильный поиск от Google и развлекательный контент
  • 12/03/2015 — Платон Щукин и правильные сниппеты
  • 11/27/2015 — Яндекс.Погода по технологии Метеум
  • 11/21/2015 — Мобильная версия сайта в выдаче Яндекса 
  • 11/20/2015 — Яндекс запустил бета-версию кабинета для веб-мастеров
  • 11/17/2015 — Google Карты 2015 в режиме офлайн
  • 11/08/2015 — Шесть рекомендаций от Яндекса – как переехать на HTTPS
  • 11/05/2015 — Яндекс рассказал о сроках и способах выхода из-под санкций
  • 10/26/2015 — В браузере «Спутник» появились новые модули
  • 10/19/2015 — Яндекс.Браузер – комплексная защита интернет-пользователей
  • 10/06/2015 — Браузер «Спутник» для российских семей
  • 09/22/2015 — Естественная ссылка от Яндекса
  • 09/22/2015 — Google покарает за повторные нарушения «Руководства для Веб-Мастеров»
  • 09/11/2015 — Яндекс против продавцов SEO-ссылок
  • 09/08/2015 — Рождение нового образа Google
  • 09/02/2015 — Google против межстраничной рекламы для установки мобильных приложений
  • 08/24/2015 — Глобальное обновление панорам на Яндекс.Картах
  • 08/18/2015 — Google Карты расскажут о дорожных пробках
  • 08/06/2015 — Ответы на вопросы по Google Panda 4.2
  • 07/23/2015 — Алгоритм Panda 4.2 в действии
  • 07/16/2015 — Яндекс снова обновил Минусинск
  • 07/14/2015 — Читалка от Firefox
  • 07/12/2015 — Платон Щукин о службе поддержки Яндекса
  • 07/06/2015 — Прогулки вместе с Яндексом
  • 06/23/2015 — Яндекс.Эксперт поможет владельцам интернет-сайтов
  • 06/19/2015 — Встречайте – Яндекс.Метрика 2.0
  • 06/16/2015 — Планшетный браузер от Спутника
  • 06/11/2015 — Как Google заботится о безопасности и конфиденциальности пользовательских данных
  • 06/09/2015 — Слушаем Яндекс.Радио
  • 06/07/2015 — Google, смартфоны и микро-моменты
  • 06/04/2015 — Сохрани мгновения на Google Фото
  • 06/02/2015 — Зачем нужно обновлять веб-браузеры
  • 05/28/2015 — Спутник — первая годовщина
  • 05/26/2015 — Яндекс. Туристы. Путешествия
  • 05/21/2015 — Минусинск принёс первые результаты
  • 05/17/2015 — Алгоритм Минусинск начал действовать
  • 05/09/2015 — Спутник – День Победы
  • 05/06/2015 — Яндекс защитит мобильных пользователей
  • 05/02/2015 — Слияние Яндекс.Карт в едином интерфейсе
  • 04/29/2015 — Новый сервис «Спутник.Дети»
  • 04/25/2015 — Текст на картинке
  • 04/17/2015 — Безопасный просмотр сайтов вместе с Google
  • 04/15/2015 — Яндекс против SEO-ссылок
  • 04/10/2015 — Как подружить статические интернет-страницы с мобильными устройствами
  • 04/06/2015 — Безграничный Яндекс.Маркет
  • 04/03/2015 — Google против дорвеев
  • 03/31/2015 — Бета-версия Яндекс-Браузера
  • 03/30/2015 — Новая версия мобильного веб-браузера от Спутника
  • 03/28/2015 — «Спутник» подключил аптеки «А5»
  • 03/24/2015 — Яндекс найдёт работу для всех
  • 03/18/2015 — Knowledge-Based Trust – очередная инновация от Google
  • 03/11/2015 — Поисковый алгоритм Google будет учитывать дружественность сайтов к мобильным устройствам
  • 03/02/2015 — Яндекс.Недвижимость поможет приобрести новую квартиру в Москве
  • 02/23/2015 — Мобильный веб-браузер от «Спутника»
  • 02/16/2015 — Яндекс подскажет правильный ответ
  • 02/12/2015 — Юбилей у Google Карт
  • 02/04/2015 — Яндекс.Ключ на страже личных данных
  • 02/02/2015 — Google Карты для мобильных устройств получили стильный интерфейс
  • 01/27/2015 — Яндекс изучил московские пробки
  • 01/23/2015 — Google Penguin 3.X – обновления продолжаются
  • 01/14/2015 — Яндекс.Мастер предлагает прозрачные тарифы и справедливые цены
  • 01/06/2015 — Сервис Google Карты Россия пополнился онлайн-инструментом Map Maker
  • 01/02/2015 — Новые технологии Яндекса для обработки больших данных
  • 12/25/2014 — Яндекс.Недвижимость принимает объявления от частных лиц
  • 12/22/2014 — Мэтт Каттс рассказал об ошибках Google, допущенных при борьбе с веб-спамом
  • 12/03/2014 — Яндекс-Браузер приблизил будущее  
  • 11/25/2014 — Яндекс.Карты 2014 – объёмные здания и тепловые эффекты
  • 11/20/2014 — Google выделит сайты, адаптированные для мобильных устройств
  • 11/17/2014 — Каким образом Googlebot анализирует навигационные строчки на веб-странице
  • 11/05/2014 — Яндекс.Браузер обзавёлся Антишоком
  • 10/28/2014 — Поисковик «Спутник» запустил версию для мобильных устройств
  • 10/27/2014 — Google предупредил о нежелательности блокировки файлов JavaScript и CSS
  • 10/22/2014 — Google Penguin 3.0 – официальная информация
  • 10/21/2014 — Penguin 3.0 в действии
  • 10/17/2014 — «Спутник» поможет оформить жалобу
  • 10/14/2014 — Как избежать неприятностей при покупке домена с историей
  • 10/07/2014 — Яндекс знает, где найти Мастера
  • 09/30/2014 — Как Google распознает версии веб-сайтов для мобильных устройств
  • 09/23/2014 — Яндекс в реестре
  • 09/16/2014 — Google поможет найти ошибки в коде JavaScript
  • 09/09/2014 — Поисковый портал «Спутник» усиливает безопасность онлайн-сервисов
  • 09/02/2014 — Как Google ранжирует веб-ресурсы: сайты-лилипуты против интернет-гигантов
  • 08/26/2014 — Яндекс предупреждает о мобильных угрозах
  • 08/19/2014 — Google будет лучше ранжировать авторитетные веб-сайты
  • 08/12/2014 — Мэтт Каттс рекомендует создавать веб-сайт с HTML-версией
  • 08/04/2014 — Умные подсказки в поисковой строке Яндекса
  • 07/29/2014 — Гостевые посты и ссылочное продвижение
  • 07/22/2014 — Яндекс.Метрика 2.0 в действии
  • 07/15/2014 — Концептуальные изменения в «Яндекс.Маркете»
  • 07/09/2014 — Как Google производит изменения в поисковых алгоритмах
  • 07/02/2014 — «Яндекс» купил крупнейший портал об автомобилях
  • 06/25/2014 — Как узнать, за что понизились позиции сайта в Google
  • 06/19/2014 — Ведущая поисковая система запустила новый сервис – Яндекс.Город
  • 05/30/2014 — Мэтт Каттс развеял мифы в сфере SEO-продвижения веб-сайтов
  • 05/22/2014 — Запуск бета-версии информационно-поискового портала «Спутник»
  • 05/20/2014 — Яндекс напоминает: соблюдайте правила оптимизации сайтов
  • 05/16/2014 — Ещё раз о покупных ссылках в Google
  • 05/11/2014 — Как удерживать топовые позиции в Google
  • 05/10/2014 — Инструмент «Синонимы» улучшает работу Яндекс.Поиска на веб-сайте
  • 04/26/2014 — Мэтт Каттс снова пояснил, каким должен быть контент для сайта с точки зрения пользователей
  • 04/25/2014 — Google Scraper Report поможет веб-мастерам добиться справедливости
  • 04/21/2014 — Яндекс.Диск представил обновленный интерфейс
  • 04/19/2014 — Google + Spider.io – новый уровень защиты рекламных объявлений
  • 04/18/2014 — В Германии создан почтовый сервис для пересылки зашифрованных сообщений
  • 04/17/2014 — Google-Карты 2014 — обновление популярного картографического сервиса
  • 04/07/2014 — Компания Яндекс обновила веб-интерфейс онлайн-сервиса Яндекс.Метро
  • 04/02/2014 — Мэтт Каттс и ссылочное ранжирование. Вечная песня о главном
  • 03/30/2014 — Яндекс-Директ ускоряет работу с минус-словами
  • 03/23/2014 — Поисковик Google произвёл обновления в работе алгоритма Baby Panda
  • 03/20/2014 — Функционал Яндекс.Вебмастера расширился за счёт дополнительного инструмента для анализа веб-страниц
  • 03/16/2014 — Google работает над обновлением алгоритма «Панда»
  • 03/13/2014 — Яндекс приступил к поэтапной отмене ссылочного ранжирования
  • 03/11/2014 — Мэтт Каттс о роли социальных сигналов в поисковом ранжировании веб-сайтов
  • 03/05/2014 — Обновление панорам на Яндекс. Картах с возможностью встраивания панорамных снимков на страницах веб-сайтов
  • 03/03/2014 — Принципы Google по отношению к контенту для видеосайтов
  • 02/27/2014 — Итоги олимпийского проекта от Яндекса
  • 02/24/2014 — Яндекс предпочитает сайты без шокирующего контента
  • 02/20/2014 — На Google-Maps добавились панорамные изображения населенных пунктов и природных объектов России
  • 02/18/2014 — Очередные изменения в Google Webmaster Tools
  • 02/13/2014 — Google запретил практику гостевого блоггинга для целей SEO-продвижения
  • 02/09/2014 — Google представил новый раздел FAQ, раскрывающий политику AdSense в сфере контекстной рекламы
  • 02/05/2014 — В поиске по блогам от Яндекса будут представлены данные из Facebook
  • 02/03/2014 — Позиция Google по отношению к ссылкам в виджетах
  • 01/31/2014 — Яндекс запустил уникальный веб-проект – «Зимние Олимпийские Игры 2014»
  • 01/30/2014 — Почтовый сервис от Silent Circle сохранит тайну переписки
  • 01/23/2014 — Как Google относится к дублированному текстовому контенту
  • 01/20/2014 — Яндекс-Острова обзавелись блоком с интерактивными данными
  • 01/16/2014 — Как Google решает проблемы с гостевым блоггингом на низкокачественных ресурсах
  • 01/10/2014 — Коммерческая реклама в Google Display Network: плати только за реальные просмотры
  • 12/31/2013 — Google делится секретами: как выйти из под фильтров поисковой системы
  • 12/24/2013 — Приложение Google Analytics поможет ускорить загрузку веб-сайта
  • 12/17/2013 — В Яндекс.Метрике появился отчет о времени загрузки интернет-страниц
  • 12/10/2013 — В рекламной сети «AdWords» добавился новый тип рекламных компаний
  • 12/03/2013 — Google разработал устройство для безопасной идентификации интернет-пользователей
  • 11/26/2013 — В коммерческих объявлениях Яндекс. Директа добавилась информация о времени работы рекламодателя
  • 11/19/2013 — Поисковик Google получил патент на уникальный алгоритм по определению качества контента
  • 11/12/2013 — Обновленные Яндекс.Карты с русскоязычными названиями зарубежных географических объектов
  • 11/05/2013 — Яндекс чистит выдачу – АГС-40 в действии
  • 10/29/2013 — Визуальный поиск при помощи сервиса Яндекс-Картинки
  • 10/22/2013 — Яндекс.Kарты 2013 в обновленном интерфейсе
  • 10/15/2013 — Что знает Google о заблуждениях веб-мастеров и SEO-специалистов
  • 10/08/2013 — Сервис Яндекс.Директ пополнился новым инструментом для анализа информации по рекламным кампаниям
  • 10/01/2013 — Интернет-гигант Google обновил функционал Google-Maps и приготовил новые карты для российских пользователей
  • 09/24/2013 — Поисковик Яндекс совершенствует инструмент WordStat
  • 09/17/2013 — В Яндекс.Метрике появился отчет по анализу коммерческих интересов целевых групп
  • 09/10/2013 — Дополнительные возможности от Google улучшают структуризацию данных
  • 09/03/2013 — Яндекс.Метрика фильтрует поисковых роботов по новым правилам
  • 08/27/2013 — Новые технологии позволят увеличить емкость жесткого диска на 95%
  • 08/20/2013 — Google открывает эпоху платного интернет-телевидения
  • 08/13/2013 — Уникальная технология от «Лаборатории Касперского» для защиты данных на мобильных устройствах
  • 08/06/2013 — Новый браузер от Firefox — дополнительные возможностей для пользователей
  • 07/28/2013 — Острова от Яндекса

как создать сайт, который принесет клиентов — статьи на Skillbox

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

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

Английское слово usability в переводе означает «возможность использования». Этим термином описывают уровень сложности интерфейса любой информационной системы — сайта, программы, приложения.

Характеризуется простотой использования, легкостью освоения и доступностью интерфейса. Показывает, достигнет ли посетитель своей цели на сайте.

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

Знание этих методов помогают сделать сайт удобным для посетителя.

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

Уровень юзабилити — не абстрактная величина, он имеет единицу измерения, которая определена в международном стандарте ISO 9241-210. Характеризуется количеством физических и умственных усилий, которые тратят пользователи на достижение своей цели, и называется стоимостью взаимодействия.

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

Дизайнеры стремятся снизить стоимость взаимодействия настолько, насколько это возможно.

  • Сокращают количество кликов до цели.
  • Увеличивают скорость загрузки страницы.
  • Убирают отвлекающие факторы.
  • Делают шаги до цели как можно проще.

Для сайтов и веб-приложений стоимость взаимодействия удобно оценивать в количестве кликов и времени, затрачиваемом пользователем на решение задач.

Конверсия — также хорошая мера стоимости взаимодействия. Легко измерить количество пользователей, купивших товар или зарегистрировавшихся на сайте.

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

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

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

  • Простота использования. Просто ли новому пользователю ориентироваться на сайте. Не мешают ли дизайн, реклама, всплывающие окна.
  • Эффективность. Как быстро пользователь выполнит нужное ему действие: закажет товар, прочитает статью или получит консультацию.
  • Запоминаемость. Сможет ли пользователь быстро сориентироваться на сайте при следующем посещении через некоторое время.
  • Удовлетворенность. Насколько пользователь доволен внешним видом и информацией. Учитываются все факторы: дизайн, содержание, навигация по сайту.
  • Ошибки. Количество ошибок и неправильных действий пользователя при навигации по сайту. Как их предотвратить и исправить последствия.

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

Результат своих исследований Нильсен сформулировал в виде эвристик — законов юзабилити. Разработчики интерфейсов до сих пор используют эвристики как чек-лист для проверки сайта и оценки сложности интерфейса.

Согласно этим законам всю сложную работу должен брать на себя компьютер. Хорошо спроектированный сайт должен:

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

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

Сообщение о статусе заказа в «Лабиринт.ру»

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

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

«Дадата» объясняет принцип работы сервиса простым языком

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

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

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

И уменьшать шансы их возникновения.

Онлайн-консультант JivoSite помогает исправить ошибку в адресе электронной почты

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

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

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

«М.Видео» показывает всю необходимую информацию о iPhone8 на одном экране

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

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

 Лишние элементы, длинный текст и страница, перегруженная баннерами, — все это отвлекает от цели.

Длинная и запутанная форма заказа в магазине Wellfix. Нужно сократить и убрать ненужные лишние пункты.

Перегруженный интерфейс и лишние элементы часто встречаются на страницах оформления заказов в интернет-магазине.

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

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

Чем дольше загружается сайт, тем выше вероятность, что пользователь устанет ждать и уйдет. По данным исследования Google, 53% пользователей покинут сайт, если он загружается дольше трех секунд.

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

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

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

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

На курсе «UХ-аналитика» можно подробно узнать про юзабилити и про то, как сделать сайт проще. Что мотивирует пользователей, как правильно анализировать процент отказов, как найти слабые места сайта и увеличить прибыль компании.

Курс «UX-аналитика»

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

  •  32 часа теории и 16 практических заданий
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Как сделать сайт удобным

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

  • дизайном сайта,
  • скоростью загрузки страниц,
  • качеством контента,
  • навигацией,
  • простотой использования.

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

10 эвристических принципов для мобильных интерфейсов

Якоб Нильсен консультировал и обучал юзабилити-инжинирингу, когда начал изучать множество паттернов. В 1994 году он собрал и выпустил набор принципов оценки эвристики юзабилити, который отражал накопленные им знания. Сегодня, спустя почти 25 лет и после того, как на смену компьютеру пришел смартфон, принципы Нильсена все еще остаются актуальными.

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

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

Эвристика юзабилити начинается с потребностей пользователя

Прежде чем переходить к набору принципов, необходимо признать, что важность пользователя продолжает расти. Редизайн GOV.UK, несмотря на то, что он является правительственным веб-сайтом, является ярким примером продукта, ориентированного на пользователей, который получил мировое признание за юзабилити.

Бен Терретт, директор по дизайну проекта, начал с набора принципов дизайна интерфейса, которые варьировались от стратегии продукта до подходов визуального дизайна. Самый первый принцип стал путеводной звездой к успеху продукта: «Всегда начинайте с потребностей пользователей. Если вы не знаете, что нужно пользователю, вы не создадите правильный продукт. Проводите исследования, анализируйте данные, общайтесь с пользователями. Не делайте предположений. Имейте сочувствие к пользователям и помните, что то, что они просят, не всегда то, что им нужно».

Предстоящие воркшопы

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

1. Понятность структуры системы

Делайте определенные элементы и структуры визуально заметными, чтобы пользователь имел достаточное понимание контекста.

Интерфейс должен позволить пользователю полагать, что он контролирует ситуацию. Он должен легко ответить на следующие вопросы: «Где я сейчас?» и «Куда я могу перейти отсюда?». Когда система понятна, пользователь может принимать решения о том, что будет дальше. Он получает автономию и последующую уверенность в использовании интерфейса.

Навигационное меню превращается в гамбургер-меню, указывая, где информацию можно найти позже. (Дизайн Gal Shir)

2. Моментальный фидбек на действия

Ответ на действие пользователя, подтверждающий, что система получила запрос.

Любое действие пользователя должно вызывать моментальную реакцию интерфейса. Мгновенный фидбек убеждает пользователя в том, что система выполняет необходимые действия. Nick Babich, специалист по UX в Smashing Magazine, использует индикатор прогресса, как хороший пример понятного статуса действия. Он визуально информирует пользователя о том, что его действие было принято, и система вскоре сообщит о следующем действии. Без индикатора пользователь остается неуверенным и разочарованным, из-за чего он может покинуть сайт или приложение.

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

3. Информирование об ошибках

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

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

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

Пустое состояние в этом мобильном интерфейсе объясняет, почему пользователь видит этот экран, и предлагает два действия, которые устранят ошибку. (Дизайн Murat Mutlu)

4. Гибкость использования

Интерфейс, который пользователи с различным диапазоном опыта могут интуитивно и эффективно использовать.

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

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

Принципы когнитивной инженерии от Jill Gerhardt-Powal «обеспечивают многократное кодирование данных, когда это необходимо – система должна предоставлять данные в различных форматах и ​​/ или уровнях детализации для обеспечения гибкости когнитивных функций и удовлетворения предпочтений пользователя». Интерфейс перегружающий или ограничивающий пользователя обеспечит неприятный опыт.

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

5. Знакомство с универсальным опытом

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

История графического пользовательского интерфейса (GUI) началась, когда Apple использовала реальные ссылки в первом удобном дизайне компьютерного интерфейса. «Lisa» была разработана с такими элементами, как иконка папки, чтобы указать файловую организацию. Эти физические ссылки были полезны, когда цифровые взаимодействия были незнакомы большинству людей, но с ростом цифровой грамотности универсальные ссылки больше не должны быть такими буквальными.

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

Эти две иконки мгновенно узнаваемы и четко обозначают действие, понятное большинству пользователей. (Дизан Mohammad Amiri)

6. Ограничение информации и эстетики дизайна

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

Общее эмпирическое правило для всех цифровых взаимодействий заключается в устранении путаницы. Чтобы уменьшить время принятия решения и ошибки, Jill Gerhardt-Powal призывает дизайнеров снизить неопределенность, отображая данные в понятной и очевидной форме. Этого можно достичь, удалив ненужный контент и используя цвет, макет и типографику, чтобы вести пользователя по экрану. Пользователи не должны отвлекаться, но должны быть достаточно ориентированы, чтобы легко достичь своей цели.

Бен Терретт часто использовал принципы дизайна GOV.UK: «Делайте тяжелую работу, чтобы упростить ее». Он полагал, что именно команда дизайнеров должна полностью понять проблемы, с которыми они сталкиваются, а также процесс, ведущий к лучшему решению для обеспечения интуитивно понятного, информативного и успешного пользовательского опыта. Некоторые из их методов описаны в этом кейс-стади.

The British Government Digital Services разбило информацию, чтобы определить, что нужно знать пользователям, и разработало визуальный дизайн, который исключил все ненужное для обеспечения ясности информации. (Дизайн Government Digital Services)

7. Функция имеет более высокий приоритет над формой

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

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

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

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

Этот цифровой посадочный талон учитывает, какая информация понадобится путешественнику, и использует визуальные методы, чтобы сделать информацию функциональной. (Дизайн Marin Begovic)

8. Доступность информации

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

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

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

Jill Gerhardt-Powal предлагает «объединить данные более низкого уровня в сумме более высокого уровня, чтобы уменьшить когнитивную нагрузку». Она также утверждает, что «отображаемые имена и метки должны зависеть от контекста, что улучшит воспоминание и распознавание». Важно понимать, что пользователь, впервые увидевший интерфейс, будет только знакомиться с информацией. Повторение информации может показаться чрезмерным для опытной команды, но может быть важно для новых пользователей.

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

9. Надежность согласованности

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

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

«Это не смирительная рубашка или книга правил. Бывают разные обстоятельства». Принципы проектирования GOV.UK гласят, что интерфейс должен быть согласованным, но не единообразным. Jill Gerhardt-Powal им вторит: «Новая информация должна быть представлена ​​в привычных формах (например, схемах, метафорах, повседневных терминах), чтобы ее было легче усваивать».

Повышенное внимание Google к дизайну проявляется в подробных рекомендациях по всем дизайнам пользовательского интерфейса. (Дизайн Material)

10. Разумное резервирование

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

Якоб Нильсен был первым, кто признал, что невозможно представить универсальную специфику дизайна пользовательского интерфейса. Например, два сформулированных им эвристических принципа могут предположительно противоречить друг другу. №6: предоставить всю информацию, необходимую пользователю для принятия решения, и №8: устранить все ненужное.

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

10 лучших принципов | Теории UX

Теории UX

Существует множество принципов и законов UX, которым должен следовать дизайнер. В этой статье мы выбрали несколько правил, которые, по нашему мнению, являющихся наиболее важными и которые лично мы стремимся регулярно внедрять в наши работы. Эти теории и принципы были написаны не только всеми известными дизайнерами, такими как Jakob Nielsen и Don Norman, но и психологами, которые имеют многолетний опыт изучения человеческого взаимодействия и поведения.

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

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

80/20

Правило 80/20, также известное как Принцип Pareto — это увлекательная теория, которая гласит, что 20% ваших усилий может дать 80% результатов. Это указывает на то, что всё можно сделать более эффективно. Мы должны сосредоточить большую часть нашего времени на критических моментах, из которых можно извлечь наибольшую пользу. Впервые он был выявлен в исследовании, показавшем, что 20% итальянского населения обладают 80% богатства. Эта теория может быть применена ко всему: от спорта до инвестиций и даже компьютерного программирования. Например, Microsoft заметила, что исправляя 20% компьютерных багов, 80% проблем будут устранены. Конечно, это лишь приблизительная оценка, иногда значение приближается и к 90/10.

Предстоящие воркшопы

Aesthetic Usability Effect

Под Aesthetic Usability Effect понимают, что люди часто воспринимают визуально привлекательный дизайн как более интуитивный и удобный, чем тот, который менее приятен для глаза. Люди привыкли, что вещи , которые выглядят лучше, будут  работать эффективней. В большинстве случаев клиенты будут проще относится к незначительным проблемам, если дизайн эстетически приятен, это связано с положительным эмоциональным откликом, который они испытывают. Также это соответствует с Attractiveness Bias теорией, из которой видно, что нас тянет к красоте. Это подчеркивает, насколько необходим хорошо отлаженный пользовательский интерфейс в сочетании с надежным UX.

Choice Overload

Choice Overload — это принцип поведенческой экономики, который утверждает, что в большинстве случаев большой выбор не всегда приводит к лучшим результатам. Идея состоит в том, что по мере увеличения возможностей сложность увеличивается пропорционально, а вместе с ней удобство использования и производительность также идут на спад. Часто бывает, что большое количество вариантов может вызвать затруднения у клиентов, что в свою очередь может привести к аналитическому параличу, когда решение не принимается вообще. Перегрузка выбора имеет параллели с законом Хика , который, объясняет, что больший выбор приводит к увеличению усилий и времени принятия решений.

Как сказал Дитар Рамс:

«Меньше, но лучше».

Consistency

Consistency (согласованность) является важным принципом, который постоянно продвигается защитниками пользователей. Это настолько важный принцип, что даже включён в Don Norman’s “Design Principles” и Jakob Nielsen’s “Usability Heuristics for User Interface Design”.

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

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

Goal-gradient Effect

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

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

Ikea Effect

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

Jakob’s Law

Jakob’s Law о UX в Интернете, по факту, показывает, что предпочтение всегда отдаётся знакомому дизайну. Причиной этого является то, что люди привыкли к тому, как работают определенные вещи. Однако, когда этот закон нарушается. Вы можете вводить пользователей в замешательство, поскольку это сразу же создает новый опыт в использовании, который, в свою очередь, будет вызывать разочарование у людей и, вероятно, приведет к игнорированию вашей платформы. Конечно, инновации важны, особенно если у них есть ясная ценность. Однако в большинстве случаев лучше оставлять дизайн знакомым для пользователя и не изобретать велосипед.

KISS

KISS, который не имеет ничего общего с поцелуями, а является аббревиатурой от Keep It Simple Stupid ясно подчёркивает, что простой дизайн работает лучше всего. Одна из причин такого курса на минимализм заключается в том, что простые проекты, как правило, быстрее и дешевле создавать и внедрять. Они более надёжны и просты в обслуживании.

Теория Простоты также подчеркивает этот момент — простота всегда должна быть предпочтительнее, именно она является ключом к сокращению беспорядка!

Recognition Over Recall

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

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

Social Proof Social Proof — это увлекательная теория, которая разъясняет, что мы, как социальные существа, следуем тому, что делают другие и на нас могут легко повлиять и переубедить другие люди, особенно если они находятся в большинстве. Обзоры продуктов, отзывы, советы экспертов и лидеры общественного мнения — всё это позволяет понять принцип работы этой теории. Любая возможность добавить эти типы методов социального признания увеличит вероятность того, что люди будут оставаться на вашей платформе, так как они с большей вероятностью будут ей доверять.

Fusiform Face Area имеет сходство с Social Proof: обе эти теории показывают, насколько сильно на нас влияют другие люди, особенно если они смотрят или указывают на что-то конкретное. Другими вещами, которые действительно привлекают внимание людей, являются те, которые возвращают нас обратно, к нашим предкам — приматам. В то время нас больше всего беспокоили три вещи: можем ли мы спариться с этим, можем ли мы съесть это, убьет ли это нас? Все эти вопросы остаются невероятно актуальными и в наше время и ответы на них можно постоянно видеть в рекламе, используя сексуальные образы, вкусную еду или что-то шокирующее. Так что используйте любой из этих методов, чтобы привлечь внимание людей!

Заключение

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

Ссылки на теории👇🏻

📍80/20

📍Aesthetic Usability Effect

📍Choice Overload

📍Consistency

📍Goal-gradient Effect

📍Ikea Effect

📍Jakob’s Law

📍KISS

📍Recognition Over Recall

📍Social Proof

10 эвристик юзабилити для дизайна пользовательского интерфейса

Загрузите бесплатный плакат с 10 эвристиками юзабилити Якоба внизу этой статьи.

# 1: Видимость состояния системы

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

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

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

Наконечники

  • Четко сообщайте пользователям о состоянии системы — никакие действия с последствиями для пользователей не должны предприниматься без их уведомления.
  • Предоставьте отзыв пользователю как можно быстрее (в идеале — немедленно).
  • Укрепляйте доверие через открытое и постоянное общение.

Узнать больше

# 2: соответствие системы и реального мира

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

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

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

Пример эвристики удобства использования # 2:
Когда элементы управления плитой соответствуют расположению нагревательных элементов, пользователи могут быстро понять, какой элемент управления соответствует тому, какой нагревательный элемент.

Наконечники

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

Узнать больше

# 3: Контроль и свобода пользователя

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

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

Пример эвристики юзабилити # 3:
Цифровые пространства нуждаются в быстрых «аварийных выходах», как и физические пространства.

Наконечники

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

Узнать больше

# 4: Согласованность и стандарты

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

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

Пример эвристики юзабилити # 4:
Стойки регистрации обычно расположены в передней части отелей. Эта последовательность соответствует ожиданиям клиентов.

# 5: Предотвращение ошибок

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

Есть два типа ошибок: промахи и ошибки. Промахи — это неосознанные ошибки, вызванные невниманием. Ошибки — это сознательные ошибки, основанные на несоответствии ментальной модели пользователя и дизайна.

Пример эвристики юзабилити # 5:
Поручни на извилистых горных дорогах предотвращают падение водителей со скал.

Наконечники

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

Узнать больше

# 6: Узнавать, а не вспоминать

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

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

Пример эвристики юзабилити # 6:
Большинству людей легче узнать столицы стран, чем запоминать их.Люди с большей вероятностью ответят на вопрос Является ли Лиссабон столицей Португалии? , а не Какая столица Португалии?

Наконечники

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

Узнать больше

# 7: Гибкость и эффективность использования

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

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

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

Наконечники

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

Узнать больше

# 8: Эстетичный и минималистичный дизайн

Интерфейсы не должны содержать ненужную или редко необходимую информацию. Каждая дополнительная единица информации в интерфейсе конкурирует с соответствующими единицами информации и снижает их относительную видимость.

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

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

# 9: Помогите пользователям распознавать, диагностировать и устранять ошибки

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

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

Пример эвристики юзабилити # 9:
Знаки неправильного пути на дороге напоминают водителям о том, что они движутся в неправильном направлении, и просят их остановиться.

Наконечники

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

Узнать больше

# 10: Справка и документация

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

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

Пример эвристики юзабилити # 10:
Информационные киоски в аэропортах легко узнаваемы и мгновенно решают проблемы клиентов.

Наконечники

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

Узнать больше

Записка от Якоба

Изначально я разработал эвристику для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году [Molich and Nielsen 1990; Нильсен и Молич 1990].Четыре года спустя я усовершенствовал эвристику на основе факторного анализа 249 проблем юзабилити [Nielsen 1994a], чтобы получить набор эвристик с максимальной объяснительной силой, в результате чего был получен этот пересмотренный набор эвристик [Nielsen 1994b].

В 2020 году мы обновили эту статью, добавив дополнительные объяснения, примеры и ссылки по теме. Хотя мы немного уточнили язык определений, сама эвристика 10 остается актуальной и неизменной с 1994 года. Когда что-то остается верным в течение 26 лет, это, вероятно, будет применяться и к будущим поколениям пользовательских интерфейсов.

Постер «10 бесплатных эвристик»

Загрузите бесплатный плакат Якоба «10 эвристик юзабилити» внизу этой статьи в разделе Загрузки . Вы можете скачать итоговый плакат в 3-х размерах: полный плакат, A4 и Letter. Вы также можете загрузить полный набор из 11 плакатов (10 эвристик юзабилити и итоговый плакат.

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

См. Также

Примеры
Контрольные списки и инструкции
Список литературы
  • Молич, Р.и Нильсен Дж. (1990). Улучшение диалога между человеком и компьютером, Коммуникации ACM 33, 3 (март), 338-348.
  • Нильсен Дж. И Молич Р. (1990). Эвристическая оценка пользовательских интерфейсов, Учеб. ACM CHI’90 Conf. (Сиэтл, Вашингтон, 1–5 апреля), 249–256.
  • Nielsen, J. (1994a). Повышение объяснительной силы эвристики юзабилити. Proc. ACM CHI’94 Conf. (Бостон, Массачусетс, 24–28 апреля), 152–158.
  • Nielsen, J. (1994b). Эвристическая оценка. В Nielsen, J., and Mack, R.L. (Eds.), Методы проверки юзабилити, John Wiley & Sons, Нью-Йорк, штат Нью-Йорк.

Многие люди спрашивают, могут ли они использовать эту эвристику в своей работе. Да, но, пожалуйста, укажите Якоба Нильсена и укажите адрес этой страницы [nngroup.com/articles/ten-usability-heuristics] или процитируйте статью выше [Nielsen 1994a]. Если вы хотите распечатать копии этой страницы или воспроизвести контент в Интернете, пожалуйста, ознакомьтесь с нашей информацией об авторских правах для получения подробной информации. Авторские права © Якоба Нильсена. ISSN 1548-5552

Видимость состояния системы

Загрузите бесплатный плакат с эвристикой юзабилити Якоба №1 внизу этой статьи.

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

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

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

Знание — сила

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

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

Соответствующая обратная связь

Каждый раз, когда пользователи взаимодействуют с системой, они должны знать, было ли взаимодействие успешным. Система действительно уловила нажатие этой кнопки или была занята чем-то другим и проигнорировала это? Товар был добавлен в корзину? Запрос прошел? (Одна из причин, по которой у пользователей возникают эти вопросы, заключается в том, что они и раньше были обожжены технологиями, которые не работали должным образом.Однако даже когда наступит счастливый день безошибочной технологии, люди все равно будут задаваться вопросом, действительно ли они нажимали или нажимали правильно.)

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

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

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

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

Обеспечение немедленной обратной связи для интерактивных событий позволяет пользователям быстро определять источник ошибок и исправлять их, как только они были сделаны. Фактически, немедленная обратная связь — одно из основных преимуществ прямого манипулирования, стиля взаимодействия, при котором пользователи могут воздействовать непосредственно на различные объекты пользовательского интерфейса. В отличие от пользовательских интерфейсов прямого управления, интерфейсы командной строки не отображают текущее состояние системы и не дают немедленной обратной связи. Программисты знают, как сложно найти источник ошибки в интерфейсе, который не имеет немедленной обратной связи; им часто приходится прибегать к таким инструментам, как точки останова и пошаговое выполнение, чтобы понять, как состояние системы изменяется с каждым действием, указанным в их коде.

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

Приложение Amazon Music для iOS позволяет пользователям напрямую управлять порядком элементов в списке воспроизведения. Пользователи всегда осведомлены о состоянии системы и, таким образом, могут легко определить и исправить ошибку.

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

Принуждение пользователей к действию

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

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

  1. Когда на складе мало: если люди знают, что осталось всего несколько предметов, они с большей вероятностью будут действовать немедленно — следуя таким предубеждениям, как дефицит и социальное доказательство.
  2. Когда товаров на складе нет: эта информация может избавить пользователей от попыток добавить в корзину товары, которых больше нет в наличии. (Потеря немедленного заказа предпочтительнее потери доверия к будущим заказам, которые никогда не будут размещены, если пользователи почувствуют, что они не могут вам доверять.)
На сайте J.Crew отображается уведомление о том, что осталось «Только несколько человек!» когда пользователь наводит указатель мыши на товары с ограниченными запасами. Некоторые размеры уже распроданы, поэтому они показаны перечеркнутыми светло-серым цветом.

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

NatureBox.com: баннер в верхней части страницы сообщает, сколько денег нужно потратить пользователю, чтобы получить право на бесплатную доставку.

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

Связь создает доверие

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

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

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

Например, что должно произойти, когда пользователь повторно посетит ранее созданный список желаний, который теперь содержит элементы, которых нет в наличии или больше не продаются? Хуже всего было бы, если бы эти элементы просто исчезли из списка без объяснения причин.Как насчет уведомления в верхней части экрана? Это было бы немного лучше, потому что это не помогло бы пользователю вспомнить, какие элементы ранее были в списке, чтобы найти подходящую замену. Оба эти метода забирают контроль у пользователя и снижают доверие — пользователи могут перестать полагаться на список желаний, если элементы в нем иногда исчезают сами по себе.

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

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

Заключение

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

Принципы юзабилити. У всех нас есть истории о том времени, когда… | by Claromentis

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

Важно понимать, что удобство использования жизненно важно для взаимодействия с пользователем и удержания посетителей. если веб-сайт или приложение неудобно для пользователя, посетители не будут возвращаться.

Итак, что делает веб-сайт или приложение удобными?

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

Доступность и доступность

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

Ясность

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

Обучаемость

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

Обратная связь

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

Керенса Джонсон пишет для Клароментис.

Следуйте за нами в Twitter @Claromentis

UX-дизайн, статьи по юзабилити, курсы, книги, события


1. Видимость статуса системы

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

2. Соответствие системы и реального мира

Система должна говорить на языке пользователей, используя слова, фразы и концепции, знакомые пользователю, а не системные термины.Следуйте обычным правилам, чтобы информация отображалась в естественном и логическом порядке.
Приложение iBooks для iPad, использующее метафору деревянной книжной полки.
Использование метафоры реальной жизни в компьютерном приложении.

3. Контроль и свобода пользователей

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

Mozilla предлагает несколько советов по безопасности и обработку исключений.


История в Photoshop помогает пользователю восстановить предыдущие шаги.

4. Предотвращение ошибок

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

5. Помогите пользователям распознавать, диагностировать и устранять ошибки

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

6. Согласованность и стандарты

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

7. Узнавать, а не вспоминать

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

8. Гибкость и эффективность использования

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

9. Эстетичный и минималистичный дизайн

Диалоги не должны содержать неактуальной или редко необходимой информации.Каждая дополнительная единица информации в диалоге конкурирует с соответствующими единицами информации и снижает их относительную видимость.

10. Справка и документация

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

Контекстная помощь — лучший способ помочь!
Также очень полезно рассказывать пользователям о последствиях их действий.

Удивительные книги Якоба Нильсена


Другие книги по UX >>

Связанные чтения

Как выполнить эвристическую оценку

10 принципов дизайна для улучшения мобильного приложения

Об авторе

Абхишек Джайн


10 Эвристика юзабилити с примерами | by SaiChandan Duggirala

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

User Experience — это качественный показатель, на который влияет множество факторов. Это развивающаяся дисциплина, и это становится очевидным, когда предшественник отличного пользовательского опыта, Apple, смиренно помечает свои рекомендации по человеческому интерфейсу iOS как бета-версию. Google назвал свои рекомендации по материальному дизайну живым документом, который будет регулярно обновляться. Одним из пионеров, пытавшихся объективно оценить пользовательский опыт на цифровых платформах, является Якоб Нильсен с его эвристической оценкой. Хотя они восходят к 90-м годам, эти общие практические правила все еще действуют и используются сегодня.

В этой статье я пытаюсь объяснить эти 10 правил на общем языке на примерах:

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

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

Одним из примеров является твиттер, издающий звук галочки при публикации твита. Другой пример — Google Диск, показывающий статус загрузки документа.

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

Нил Патель вполне мог сказать «Зарегистрируйтесь» на своей целевой странице. Вместо этого он решил амбициозно сказать: «Да, я хочу, чтобы Нейл научил меня, как развивать мой бизнес!». Он задает контекст и говорит на повседневном языке.

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

А ниже Facebook проверяет меня, если я нажал «Отмена» по ошибке.

Последовательность — ключ к успеху. Кнопка «Отправить» на одной странице должна выглядеть одинаково на всем сайте на любой странице. Если мы показываем данные в определенном формате таблицы на одной странице, они должны выглядеть так же, когда в следующий раз данные будут отображаться в табличном формате. Если заголовок отображается определенным образом на общедоступных страницах, он должен быть таким же, когда он / она входит в систему.

Как одна и та же кнопка может преобразовываться на разных страницах одного и того же сайта.Обратите внимание, что это не изменение состояния.

Внешне следовать стандартным соглашениям без риска. Ссылка «Как это работает» вызывает аналогичные ожидания у пользователей на разных сайтах. Google Plus амбициозно запустил «+1», чтобы противостоять «лайкам» Facebook, но без особого успеха. «Нравится» Facebook уже стал стандартом, и такие сайты, как LinkedIn, приняли его без оспаривания.

Иллюстрация BrandFlakesforBreakfast

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

Ниже приведен пример поиска Google, который пытается исправить мою орфографию:

Если вы установили некоторые правила для формата пароля пользователя, попробуйте проверить его по мере ввода пользователем, а не ждать, пока он нажмет «Отправить».

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

Ниже приведен пример Quora, предлагающего возможные вопросы на основе того, что я пытаюсь ввести.

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

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

Ниже приведен пример настройки Exchange на Android, который скрывает сложные функции в разделе «Дополнительно».

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

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

Google: ни больше, ни меньше.

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

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

Ниже приведен пример того, как MailChimp обрабатывает этот сценарий:

Необходимо проверить, выполняется ли обработка исключений во всем приложении, чтобы соответствующие сообщения могли быть показаны пользователю.Сообщения о пустом состоянии, 404, 500 и т. Д. Являются некоторыми примерами. В сети нет недостатка в инновационных 404-страницах. Ниже приведен один пример:

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

Ниже приведен пример справочной страницы GoDaddy. Хотя есть поле поиска, на одной странице есть основные категории и часто задаваемые запросы.

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

Удобство использования, доступность и этика | Кари Мерик

Краткий обзор принципов удобства использования и доступности в дизайне пользовательского интерфейса, а также того, как сочетаются впечатления от продукта Snapchat.

«Серебристый iPhone 6 на желтой деревянной поверхности» от Thought Catalog on Unsplash

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

Является ли поведение продукта предсказуемым, ожидаемым и применимым ?

Существует 5 широких категорий эвристики юзабилити: обучаемость, эффективность, запоминаемость, ошибки и удовлетворенность.

Обучаемость

Обучаемость — это то, насколько легко изучить ваш продукт. Давайте рассмотрим основные компоненты обучаемости:

  • Видимость и обратная связь — система должна четко понимать, что она делает.
  • Отображение — взаимосвязь между перемещением элемента управления и его результатами в реальном мире.Когда я перетаскиваю ползунок громкости влево и вправо во время воспроизведения музыки, звук становится тише или громче, соответственно
  • Affordances — свойства объекта или интерфейса, которые показывают, как его можно использовать
  • Constraints — ограничения воспринимаемой работы устройство
  • Консистенция — придает продукту ощущение целостности. Несоответствия могут сделать продукт сломанным, несвязным или сбивающим с толку. Последовательность важна в маркировке и действиях.
  • Справка — Лучше, если систему можно будет использовать и без нее. По возможности [конструкция] должна работать без инструкций или этикеток. Любые необходимые инструкции или обучение должны потребоваться только один раз; с каждым объяснением [пользователь] должен иметь возможность сказать: «Конечно» или «Да, понятно». Простого объяснения будет достаточно, если для дизайна есть причина, если все имеет свое место и свое назначение, и если результаты действий видны — Дональд Норман, Дизайн повседневных вещей

Запоминаемость

Память — это и то, и другое. знания в голове и знания в мире.Хороший дизайн снизит нагрузку на память пользователя, сделав доступными объекты, действия и параметры. Пользователь не должен запоминать информацию из одной части потока или диалога в другую. Еще одно важное соображение в отношении запоминаемости: когда пользователи возвращаются к дизайну после периода, когда он не используется, насколько легко они могут восстановить свои навыки?

Удовлетворенность

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

Людям сложно оценить, насколько они удовлетворены продуктом, поэтому в опросах обычно задаются менее абстрактные вопросы, которые помогают получить удовлетворение. Один очень распространенный вопрос для этих опросов: «Какова вероятность того, что вы порекомендуете [название продукта] друзьям или семье?»

По словам Якоба Нильсена, существует 10 эвристик юзабилити для разработки пользовательского интерфейса, что это такое?

1. Видимость состояния системы

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

2. Соответствие между системой и реальным миром

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

3. Контроль и свобода пользователя

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

4. Согласованность и стандарты

Пользователи не должны задаваться вопросом, означают ли разные слова, ситуации или действия одно и то же.

5. Предотвращение ошибок

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

6. Распознавание, а не повторение

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

7. Гибкость и эффективность использования

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

8. Эстетичный и минималистичный дизайн

Диалоги не должны содержать неактуальной или редко необходимой информации.Каждая дополнительная единица информации в диалоге конкурирует с соответствующими единицами информации и снижает их относительную видимость.

9. Помогите пользователям распознать, диагностировать и исправить ошибки

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

10. Справка и документация

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

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

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

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

Обеспечение близости — Если две вещи тесно связаны, они должны быть близко друг к другу в интерфейсе.

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

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

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

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

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

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

«Человек, фотографирующий в автомобиле» Омар Лопес на Unsplash

Snapchat и обучаемость

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

Snapchat и эффективность

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

Snapchat и запоминаемость

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

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

Эвристические принципы для мобильных интерфейсов

Якоб Нильсен консультировал и обучал юзабилити-инженерии при взаимодействии человека с компьютером, когда он начал улавливать множество шаблонов.Поэтому в 1994 году он собрал и опубликовал набор принципов оценки эвристики юзабилити, которые отражали то, что он узнал. Сегодня, спустя почти 25 лет и превращения компьютера в смартфон, принципы Nielsen по-прежнему остаются в силе.

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

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

Эвристика удобства использования начинается с потребностей пользователя

Прежде чем перейти к изложению принципов, необходимо признать, что важность пользователя продолжает расти. Редизайн GOV.UK, несмотря на то, что он является государственным веб-сайтом, является ярким примером продукта, ориентированного на пользователей, который получил всемирное признание за удобство использования.

Бен Терретт, директор по дизайну проекта, начал с набора принципов дизайна пользовательского интерфейса, который варьировался от стратегии продукта до подходов к визуальному дизайну. Самый первый принцип был как северная звезда успеха продукта: «Всегда начинайте с потребностей пользователей. Если вы не знаете, что нужно пользователю, вы не создадите то, что нужно. Проводите исследования, анализируйте данные, общайтесь с пользователями. Не делайте предположений. Сочувствуйте пользователям и помните, что не всегда они просят то, что им нужно.”

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

# 1 Прозрачность структуры системы

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

Пользовательский интерфейс должен позволять пользователю верить, что все в его руках. Они должны легко ответить на эти вопросы: «Где я сейчас?» и «Куда мне идти дальше?» Когда система прозрачна, пользователь может принимать решения о том, что будет дальше.Они получают автономию и уверенность в использовании интерфейса.

Меню навигации превращается в гамбургер-меню, указывающее, где можно найти информацию позже. (дизайн Гал Шир)

Ответ на действие пользователя, подтверждающий получение системой запроса.

Любое действие пользователя должно вызывать немедленную реакцию интерфейса. Мгновенная обратная связь убеждает пользователя в том, что система делает то, что от него ожидается. Ник Бабич, UX-специалист из Smashing Magazine, использует индикатор прогресса как хороший пример четко переданного статуса действия.Он утверждает, что это визуально информирует пользователя о том, что его действие было принято, и система вскоре покажет следующее действие. Без индикатора пользователь остается в неуверенности и разочаровании, что может привести к прерыванию путешествия.

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

# 3 Информация об ошибках

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

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

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

Пустое состояние в этом мобильном интерфейсе объясняет, почему пользователь видит экран, и предлагает два действия, которые позволят устранить ошибку. (дизайн Мурата Мутлу)

# 4 Гибкость использования

Интерфейс, который могут интуитивно и эффективно использоваться пользователями с различным опытом.

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

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

Принципы когнитивной инженерии Джилл Герхард-Пауэл советуют разработчикам «обеспечивать множественное кодирование данных, когда это необходимо — система должна предоставлять данные в различных форматах и ​​/ или уровнях детализации, чтобы способствовать когнитивной гибкости и удовлетворять предпочтения пользователей.«Огромный или ограничивающий интерфейс вызовет разочарование.

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

# 5 Знакомство с универсальным опытом

Использование элементов дизайна, которые связаны с обычным человеческим опытом и ожиданиями.

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

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

Эти два значка мгновенно узнаваемы и четко обозначают действие, понятное большинству пользователей. (дизайн Мохаммада Амири)

# 6 Ограничение информации и эстетика дизайна

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

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

Бен Терретт часто использовал четвертый из принципов проектирования GOV.UK: «Делайте упорную работу, чтобы сделать это простым.Он считал, что команда дизайнеров должна полностью понимать проблемы, с которыми они имеют дело, а также процесс, ведущий к лучшему решению для обеспечения интуитивно понятного, информативного и успешного взаимодействия с пользователем. Некоторые из их методов описаны в этом тематическом исследовании.

Британские правительственные цифровые службы проанализировали информацию, чтобы определить, что пользователям нужно знать, и создали визуальный дизайн, который устраняет все ненужное, чтобы поддерживать ясность информации.(разработка компании Government Digital Services)

# 7 Приоритет функций по форме

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

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

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

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

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

# 8 Доступность информации

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

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

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

Джилл Герхард-Повал предлагает «объединить данные более низкого уровня в суммирование более высокого уровня, чтобы снизить когнитивную нагрузку». Она также заявляет, что «отображаемые имена и метки должны зависеть от контекста, что улучшит запоминание и распознавание». Важно знать, что пользователь, впервые увидевший интерфейс, не будет иметь знаний и знакомых с информацией, которую имеют дизайнеры.Повторение информации может показаться излишним для опытной команды, но может оказаться необходимым для новых пользователей.

Приложение

Uber предоставляет три уровня обслуживания такси и делает каждый вариант легкодоступным для пользователя в момент необходимости. (дизайн Uber)

# 9 Надежность согласованности

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

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

«Это не смирительная рубашка и не свод правил. Все обстоятельства разные ». Принципы дизайна GOV.UK гласят, что интерфейс должен быть согласованным, но не единообразным. Как повторяет Джилл Герхард-Пауэл: «Новая информация должна быть представлена ​​в знакомых рамках (например, схемы, метафоры, повседневные термины), чтобы информацию было легче усваивать.”

Повышенное внимание Google к дизайну выражается в подробных рекомендациях по дизайну всех пользовательских интерфейсов. (дизайн Material)

# 10 Разумное резервирование

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

Якоб Нильсен первым признал, что невозможно представить универсальную специфику UI-дизайна.Например, два его эвристических принципа предположительно могут противоречить друг другу: №6: предоставить пользователю всю информацию, необходимую для принятия решения, и №8: исключить все ненужное.

Leave a Reply