ЧМВ 10 правил хорошего ПИ

1. Тема «Десять правил хорошего пользовательского интерфейса».  

ТЕМА «ДЕСЯТЬ ПРАВИЛ ХОРОШЕГО
ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА».

2.

10 правил хорошего
пользовательского интерфейса

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

1. СДЕЛАЙТЕ ВСЕ, ЧТО НУЖНО
ПОЛЬЗОВАТЕЛЮ, ЛЕГКО ДОСТУПНЫМ
Пользователям всегда должна быть доступна
кнопка «Справка» или «Обратиться в службу
поддержки».

4. 2. Будьте последовательны

2. БУДЬТЕ ПОСЛЕДОВАТЕЛЬНЫ
Не располагайте меню в верхней части одной
страницы и в нижней части другой.
Не переставляйте пункты меню каждый раз,
когда оно загружается.
Дизайн должен быть согласованным во всех
публикациях ресурса.
Не меняйте шрифты заголовков и контента на
разных страницах.
Принцип наименьшего удивления: если
пользователь удивляется тому, как что-то
работает… переделайте это, чтобы оно стало
интуитивно понятным.
Нужно убедиться, что пользовательский
интерфейс соответствует основной платформе.

5. 3. Будьте предельно ясными

3. БУДЬТЕ ПРЕДЕЛЬНО ЯСНЫМИ
Пользователи должны ясно понимать, как
получить доступ к тому или ному
функционалу.
Одним из способов достижения ясности
является переход от одного шага к другому на
разных страницах.
Пользователи должны точно знать, где они
находятся, что устраняет неопределенность.

6. 4. Предоставляйте обратную связь

4. ПРЕДОСТАВЛЯЙТЕ ОБРАТНУЮ СВЯЗЬ
Пользователи должны понимать, что
происходит.
Если разрешаете пользователям загружать
файлы, укажите оставшееся время до
окончания загрузки.
Добавьте всплывающее или модальное окно,
которое сообщит, что их действие было
успешным.

7. 5. Используйте распознавание, а не запоминание

5. ИСПОЛЬЗУЙТЕ РАСПОЗНАВАНИЕ, А НЕ
ЗАПОМИНАНИЕ
Оптимизируйте интерфейс, чтобы каждая его
часть была интуитивно понятной.
Это также можно сделать с помощью
виртуальных туров
Также можно реализовать это с помощью
сообщений.
Это можно делать с помощью простых
всплывающих подсказок.
Если кто-то не помнит, что делает та или иная
иконка, то необходимо описать пользователю
ее функцию.

8. 6. Выберите модель взаимодействия

6. ВЫБЕРИТЕ МОДЕЛЬ ВЗАИМОДЕЙСТВИЯ
Когда разрабатываете пользовательский
интерфейс, выберите основные инструменты
для взаимодействия: меню, касания, иконки,
жесты и т.п.
Alexa и Siri используют голосовой ввод в
качестве основного интерфейса.

9. 7. Следуйте стандартам дизайна

7. СЛЕДУЙТЕ СТАНДАРТАМ ДИЗАЙНА
«не исправляйте то, что работает»
Как правило, панель поиска на сайтах
располагается в верхней части боковой панели, в
конце меню или в центре верхней части
страницы.

10. 8. Иерархия элементов

8. ИЕРАРХИЯ ЭЛЕМЕНТОВ
Элементы интерфейса на веб-страницах
должны иметь четкую иерархию.
Иерархия позволяет органично вести
пользователя вниз по странице.
Большие элементы, размер которых
уменьшается по мере прохождения страницы,
указывают на важность и порядок.
Использование пробелов также важно, т.к.
беспорядок может замедлить продвижение
пользователя и отвлечь его внимание.
Чистые линии, много места и четко
определенные элементы могут визуально
указывать пользователям, как перемещаться
по интерфейсу.

11. 9. Будьте проще

9. БУДЬТЕ ПРОЩЕ

12. 9.1. Будьте проще

9.1. БУДЬТЕ ПРОЩЕ

13. 9.2. Будьте проще

9.2. БУДЬТЕ ПРОЩЕ
Лучший подход — сделать все
максимально удобным для пользователя.
Вырезать все, что не является необходимым.

14. 10. Подарите пользователям удобство управления и ощущение свободы

10. ПОДАРИТЕ ПОЛЬЗОВАТЕЛЯМ УДОБСТВО
УПРАВЛЕНИЯ И ОЩУЩЕНИЕ СВОБОДЫ
Предоставьте пользователям удобство управления.
Интерфейс должен позволять им выполнять те
действия, которые они хотят. Это правило состоит из
двух частей: контекста и доступа.
Любое действие, которое может предпринять
пользователь, должно быть расположено рядом с
элементом, с которым он хочет взаимодействовать.

15. 10. Подарите пользователям удобство управления и ощущение свободы

10. ПОДАРИТЕ ПОЛЬЗОВАТЕЛЯМ УДОБСТВО
УПРАВЛЕНИЯ И ОЩУЩЕНИЕ СВОБОДЫ
Предоставьте пользователям удобство управления.
Интерфейс должен позволять им выполнять те
действия, которые они хотят. Это правило состоит из
двух частей: контекста и доступа.
Любое действие, которое может предпринять
пользователь, должно быть расположено рядом с
элементом, с которым он хочет взаимодействовать.

16. ЕЩЁ 10 принципов интерактивного дизайна Нормана (10 эвристик юзабилити):

ЕЩЁ
10 ПРИНЦИПОВ ИНТЕРАКТИВНОГО ДИЗАЙНА
НОРМАНА (10 ЭВРИСТИК ЮЗАБИЛИТИ):
Видимость состояния системы.
Совпадение между системой и реальным миром.
Контроль и свобода пользователя.
Согласованность и стандарты.
Предотвратимость ошибок.
Распознавание, а не вспоминание.
Гибкость и эффективность использования.
Эстетичный и минималистичный дизайн.
Помощь пользователям в устранении ошибок.
Помощь и документация.

17. РАЗРАБОТКА WEB-ИНТЕРФЕЙСА САЙТА

18. 1. ЭТАП СБОРА ИНФОРМАЦИИ

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

19. 2. ЭТАП ПРОЕКТИРОВАНИЯ СОБСТВЕННО ИНТЕРФЕЙСА

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

20. 3. РАЗРАБОТКА ДИЗАЙНА

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

21. 4. ЭТАП ИМПЛЕМЕНТАЦИИ

Имплемента́ция (с англ. —
«implementation», реализация) — программная
или аппаратная реализация какого-либо
протокола, алгоритма, технологии
Начинается после завершения работы с
интерфейсом.
Создание и процесс QA – тестирования
интерфейса веб – сайта.
На основе графических файлов с пояснениями.

22. 5. ЭТАП ТЕСТИРОВАНИЯ НА УДОБСТВО ПОЛЬЗОВАНИЯ

23. 5 ПРАВИЛ В ВЕБ – ИНТЕРФЕЙСЕ

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