Чек-лист для проверки интерфейса на соответствие стандартам

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

Табличная форма

Баннер

1. Баннер, который не содержит статистику, должен быть свернут и заблокирован.
   

🔴 Плохо

🟢 Хорошо

2. Заголовок в баннере должен быть записан в множественном числе, например, "Учебные материалы".

Шапка карточки

3. Незаполненный фильтр содержит placeholder "Все".
   

🔴 Плохо

🟢 Хорошо

4. Основная кнопка добавления содержит текст "Добавить", а не "Создать/Добавить объект" и т.д.
5. В ряду основных кнопок должна быть приподнятая кнопка обновления с иконкой pi-refresh.

Таблица

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

🔴 Плохо

🟢 Хорошо

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

🔴 Плохо

🟢 Хорошо

8. Кнопки действий содержат всплывающие подсказки при наведении, которые расшифровывают действие, совершаемое при клике на кнопку.
9. Если в таблице есть кнопка добавления, то среди кнопок действий должны быть кнопки редактирования и удаления.
10. Раскрывающаяся строка содержит столбцы атрибутов, и не содержит текст "Расширенная информация" или вложенную таблицу.
    

🔴 Плохо

🟢 Хорошо

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

Форма добавления

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

🔴 Плохо

🟢 Хорошо

20. В подвале расположены кнопки Отмена и Сохранить как в форме редактирования, так и в форме добавления.
    
21. Подзаголовки логических разделов формы - это компонент Text, начертание Bold, стиль Heading 3.
    

🟢 Хорошо

22. В форме должно быть хотя бы одно обязательное поле.
    

23. Обязательные поля должны располагаться выше необязательных, если это не противоречит логике.
    

24. Все поля формы должны быть размера large.
    

25. Поле Описание многострочное, занимает минимум 3 строки в макете.
    

Форма редактирования

В дополнение к пунктам из предыдущего раздела:

26. Обязательные поля формы должны быть заполнены.

27. Заголовок должен быть в формате "Редактирование учебного материала" или, в общем случае, "Редактирование заголовок из баннера вашей таблицы".
    

Форма просмотра

В дополнение к пунктам из двух предыдущих разделов:

28. Заголовок должен быть в формате "Просмотр учебного материала" или, в общем случае, "Просмотр заголовок из баннера вашей таблицы".
    

29. Все поля должны быть в состоянии shapeshifted.
    

30. В подвале расположена только кнопка Отмена.
    

Сайдбар добавления/редактирования

Аналогично форме добавления/редактирования:

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

32. В подвале расположены кнопки Отмена и Сохранить как в сайдбаре редактирования, так и в сайдбаре добавления.
    

33. В сайдбаре должно быть хотя бы одно обязательное поле.
    

34. Обязательные поля должны располагаться выше необязательных, если это не противоречит логике.
    

35. Все поля должны быть размера large.
    

36. Поле Описание многострочное, занимает минимум 3 строки в макете.