Статья по сути своей является пересказом уже имеющихся хороших практик в формате вредных советов, с указанием источника вдохновения. На оригинальность озвученных идей, хорошее чувство юмора и красноречивость не претендую.
Оглавление:
- Вступление
- Первое разочарование
- Война с мышечной памятью
- Поле ввода - твое поле для творчества
- Работа с списками
- Командные панели и меню: как разбросать кнопки и спрятать самое главное
- Искусство коммуникации
- Цветовой террор или реализация своего творческого потенциала
- Перекладывай ответственность
- Неуправляемый управляемый интерфейс
- Послесловие
1. Вступление
Интерфейс конфигурации важная часть системы, ведь именно с ним взаимодействуют пользователи. Но что, если ты по каким-то причинам решили проверить пользователей на прочность? Или может хочешь сделать себя незаменимым сотрудником? Или завалить первую линию заявками за то, что они не позвали на корпоратив? Искусство создания безупречно неудобных интерфейсов требует практики, но есть пара советов, с которых можно попробовать начать.
- Имена: не путаем, а заставляем думать
- Всегда начинай заголовок формы со слов «Форма элемента», «Форма выбора» или «Рабочее место», пускай читают, чем длиннее и бюрократичнее — тем солиднее.
- Для одинаковых полей в разных формах придумывай новые творческие названия. Пусть «Контрагент» в одной форме станет «Партнером» в другой, а «Организация» — «Юрлицом». Развивай словарный запас пользователя.
- Подписи к переключателям начни с частицы «Не». Например: «Не отправлять уведомление», «Не проводить документ». Это развивает логическое мышление.
- Называй кнопки существительными: «Расчет», «Создание», «Выбор». Пусть гадают, что команда сделает: рассчитает что-то или откроет форму расчета.
- В именах закладок должна быть загадка...что делает закладка прочее, что не делает закладка дополнительно?
- Компоновка шедевра: прячем обязательные поля и удаляем неугодные элементы
- Обязательные поля прячь в самом низу формы, под всеми необязательными. Пусть пользователь проскроллит всё, заполнит и только потом узнает, что нужно было ввести еще что-то.
- Если элемент недоступен — просто сотри его с формы. Внезапное появление новых полей после выбора значения в другом поле — это сюрприз, который все любят.
- Горизонтальная и вертикальная прокрутки — обязательные элементы любой уважающей себя формы. Размещай важнейшие кнопки в правом нижнем углу.
- Размещай переключатели горизонтально и без группы. Пусть пользователь гадает, какой из них к чему относится.
- Не выравнивай поля, это трата времени.
- Выводи все доступные реквизиты, табличные части и команды на форму. Пользователь будет чувствовать себя настоящим пилотом космического шаттла, а не бухгалтером, который хочет просто провести накладную. Обязательными для вывода становятся:
- Реквизиты, которые пользователь не может менять.
- Технические реквизиты и табличные части, которые нужны только тебе.
- Неиспользуемым реквизиты в том числе с префиксом «Удалить».
- Не используй группы, страницы и закладки, располагай всё в одном месте, не зря же у мышки есть колесико - пускай крутят, но если тебя вынудили, то:
- Создай группу для одного элемента и оформи ее жирной рамкой с заголовком. Это подчеркнет его исключительную важность.
- Вкладывай закладки внутрь других закладок. Это как матрешка — пользователю будет интересно, что внутри.
- Обязательные поля размести на скрытых по умолчанию закладках. Ошибка при записи — лучший способ сообщить пользователю об их существовании.
- Размести тесно связанные элементы на разных закладках. Прекрасный повод для пользователя попрактиковаться в переходе между ними.
- Испытание пользователей на внимательность: расположение кнопок не должно быть предсказуемым.
- Меняем расположение каждую неделю и не используем стандартные меню и иконки!
- Кнопка «Рассчитать» сегодня — это кнопка «Удалить всё» завтра. Держим пользователя в тонусе!
- Пользователь привык, что Enter в табличной части добавляет новую строку? Сломайте этот шаблон, закройте ему форму!
- Уберите стандартные обработки печати и сделайте свои, но с другими названиями и в другом меню. «Печать» → «Сформировать печатную форму документа на принтер».
4. Поле ввода - твое поле для творчества
- Никогда не подставляй значение по умолчанию, даже если вариант всего один. Пусть пользователь сам откроет список и выберет его. Это укрепляет уверенность в действиях.
- Сделай наименование и комментарий длиной в 10 символов. Пусть пользователь учится быть лаконичным.
- Расположи кнопки нестандартно для своей конфигурации, организация тут справа, тут слева, а тут на вкладке прочее.
- Изменение значения в любом поле должно немедленно вызывать запись объекта, открытие новой формы или полную перекомпоновку элементов. Пользователь не должен скучать.
- Для поля с двумя вариантами выбора («Да»/«Нет») обязательно создавай раскрывающийся список. Кнопка выбора — это лишний клик, который скрасит рабочий день.
- Поля, обязательные для заполнения, никак не выделяй, при записи ткнешь пользователю в лицо, что он не может запомнить их.
- При открытии формы устанавливай фокус ввода на поле «Комментарий». Начинать работу с лирического отступления — хороший тон.
- Флажки:
- Размещай подпись к флажку то слева, то справа от него.
- Располагай флажки в группе в случайном порядке, желательно по горизонтали. Поиск нужного — это увлекательный квест.
- В группе флажков самый часто используемый вариант ставь внизу.
- Сделай так, чтобы при заполнении реквизитов по порядку какие-то предыдущие могли измениться или очиститься и не говори об этом.
- Не накладывай отборы на выбор значения полей, сообщи, что выбор ошибочный при записи.
- Сделай в списке так много колонок, чтобы горизонтальная прокрутка была обязательна. А самую важную колонку (например, «Наименование») размести последней.
- Колонку с флажками размести в самом конце, после всех полей. Выделение элементов должно быть осознанным и сложным.
- Быстрые отборы размести под списком или на отдельной закладке. Главное — подальше от глаз пользователя.
- Не размещай реквизит ссылка на форме, а то вытащат нужное им поле.
- Не сохраняй значения отборов, пускай каждый раз выбирают заново.
- Колонку с единицей измерения размещай в случайном месте: до поля, над полем, в подсказке. Главное — не после.
- Сделай фиксированную ширину колонки 5, чтобы в колонке было видно только начало значения.
- Не фиксируй колонки слева, когда из-за количество колонок появляется прокрутка.
6. Командные панели и меню: как разбросать кнопки и спрятать самое главное
- Размести самую опасную кнопку (например, «Удалить»), рядом с «Записать и закрыть», а кнопку по умолчанию — в самом конце панели.
- Создай меню, в котором 15 пунктов идут без разделителей и подменю. Пусть оно уходит далеко за пределы экрана. Листать — это полезное упражнение для пальца.
- Создай подменю всего с одним пунктом. Это создает ощущение таинственности и важности скрытой там команды.
- Обязательно спрячь некоторые команды только в контекстное меню. Пусть пользователь чувствует себя избранным, когда случайно находит их правым кликом.
- Размещай кнопку «Рассчитать» в самом низу формы, а поля, которые она рассчитывает — в самом верху.
- Обходные пути: оставь доступ к обработке только в меню «ещё» динамического списка объекта, не связанного с обработкой.
- Эстетика минимализма
- Категорически избегай подсказок. Пусть пользователь чувствует себя первооткрывателем, а не скучным операционистом.
- Выдавай максимально точное и максимальное бесполезное для пользователя сообщение: Ошибка № 0x8000000F: «Произошла ошибка при выполнении операции. Всё сломалось. Ждите».
- После записи объекта или завершения длительной операции не сообщай об этом!
- Для закладок с табличными частями не показывайте сколько там элементов - пускай открывают сами.
- Не предупреждай о том, что табличная часть будет очищена. Особенно эффективно работает, если очищаемая табличная часть на другой закладке.
- Не делай инструкций и справок, а если прижмут - пиши на техническом языке с использованием терминов платформы: “Для инициализации процедуры интерактивного ввода данных активируйте элемент управления «Поле ввода»”.
- В сообщениях об ошибке не говори, как можно решить проблему, не подвергай свою востребованность риску.
- Выдавай сообщения об ошибках порционно, никогда все сразу.
- Дублируй заголовок поля в подсказке. Что нужно указать в поле «Индекс»? Конечно же «Индекс».
- Пойми меня, если сможешь
- Пиши сообщения об ошибках одним длинным-предлинным предложением без знаков препинания и логических пауз чтобы пользователь запутался и не понял в чем именно проблема и что ему теперь делать в сложившейся ситуации
- Обязательно используй в сообщениях технический жаргон и коды ошибок платформы. Фраза «Ошибка вызова метода 'Провести'. Объект не найден» гораздо понятнее, чем «Нельзя провести документ, потому что в нем не указан контрагент».
8. Цветовой террор или реализация своего творческого потенциала
Ты можешь отличить до 20 оттенков зелёного и знаешь как выглядит амарантовый цвет? Это пригодится.
- Меняй цвет гиперссылок на черный или любой другой, кроме синего. Подчеркивание тоже убери. Кликабельным может быть что угодно, пусть пользователь кликает на всё подряд.
- Сделай надпись цвета гиперссылки и не назначь ей действие!
- Используй шрифт с стилем Lobster для подчерквиния важных сообщений.
- Сделай побольше разных условных оформлений списка, пускай форма будет ярче!
9. Перекладывай ответственность
- Один неверный клик — и все данные погибли:
- Перед закрытием формы не спрашивай, нужно ли сохранять данные - хотели бы, уже сохранили.
- Перед совершением необратимых или очень длительных операций не предупреждай - если полез, значит сам всё знает.
- При проверке не говори в какой строке не хватает товара, скажи, что не хватает, на этом твоя работа тут закончена, они сами довели систему до такого состояния.
- Упрекай пользователя в своих ошибках. Начинай сообщения с местоимений «Вы»: «Вы не заполнили обязательное поле», «Вы пытаетесь удалить элемент, который используется», используй восклицательные знаки! Дави на него!
10. Неуправляемый управляемый интерфейс
- Не блокируй команды в зависимости от контекста, пускай пользователь сам протыкает, что можно, а что нельзя.
- Испытание веры: блокируй интерфейс во время долгих операций и ни в коем случае не сообщай о ходе процесса, пускай гадает - сколько осталось и не зависла ли 1с.
- Не переживай за лишние серверные вызовы, пускай дергающийся значок мышки для них станет привычным.
11. Послесловие
Даже наличие советов, хороших примеров и опыта не уберегает от промахов, да и не всегда хочется или есть возможность, сидя с чек листом, проверять только что сделанное решение. После прочтения стандартов и статей я для себя добавил бы самое простое правило: не заставляй пользователя думать. Мне кажется, что эта идея проскакивает если не через все, то через многие перечисленные выше правила:
- Одинаковые имена: не нужно думать, отличается ли назначения поля от аналогичного в другой форме.
- Количество элементов в заголовке закладки: не нужно думать, а есть ли там элементы.
- Вывод прогресс бара: не нужно думать, а зависла ли программа.
- Одинаковый стиль кликабельных полей: не нужно догадываться, а можно ли нажимать.
- Указание на незаполненное поле: не нужно вспоминать, где оно находится.
Чеклист из стандартов для 8.2, которые, на мой взгляд, все ещё актуальны.
Вступайте в нашу телеграмм-группу Инфостарт
