Кривой, убогий, корпоративный. Интерфейс.
Особенности UI/UX корпоративного ПО, о которых вы возможно не знали. Рассказываю почему «оно все такое убогое» и куда вам стоит засунуть ваш MetroUI и темное оформление.
Ваш интерфейс — говно
Поскольку я регулярно имел дело со стартапами и стартаперами, неоднократно наблюдал «картину чудную»:
специально заказанный, очень красивый, дизайнерский интерфейс выкидывают нах#й, заменяя его на «стандартное офисное уродство» (ц).
Под сопли, слезы и разбитые бонги «именитых дизайнеров уровня dribble», стиль дораго-бохато в темных тонах, куча эффектов, скругленные блоки, с градиентами и сложной обводкой — идет нах#й отдирается от интерфейса системы, с заменой на что-то стандартное, прямоугольное и светлое.
Обычно такое происходит после первого десятка живых пользователей. Если проект доживает хотя-бы до них.
Вообщем если не хотите точно также сначала выкинуть 10-20к баксов на дизайнерские мокапы, а затем отдирать их от интерфейса системы — читайте дальше.
Существует ряд правил построения UI/UX для корпоративного софта — для тех самых унылых форм и таблиц, которые каждый день считают вашу зарплату, формируют отчеты и списки клиентов. И которые так не любят все «дизайнеры», мечтающие о работе в Apple.
Понятия не имею описаны ли эти правила в умных книжках и как они по-правильному называются, поэтому пишу на основе личного опыта и наблюдений.
Правило первое: все везде и сразу
Корпоративный пользователь не должен лишний раз отвлекаться:
максимум связанной информации должно отображаться за минимум действий.
Чем меньше действий нужно произвести для достижения результата — тем лучше для вашего софта. Взгляните на скриншот:
На одной форме реализованы и форма поиска и список найденных результатов и вся детализация по выбранной записи.
Вся работа с рабочими данными происходит в одном и том же окне, без переходов вообще, а значит с минимумом отвлечений.
С таким интерфейсом удобно работать параллельно общаясь по телефону с клиентом: можно и бысто найти заказ по номеру и бысто забить новый заказ — все в одной и той же форме.
Поэтому считаю что данный образец — идеал формы для корпоративного софта, к которому и надо стремиться.
Правило второе: шаблонность и однотипность
Представьте на минуту что вам нужно каждый день по 8 часов просматривать и заполнять сотни однотипных форм, типа такой:
Это будут одинаковые формы, с практически одинаковыми полями. И их будет много.
Хороший пример — заявка на кредит. Или профиль кандидата при отборе.
Нужно чтобы глазу было за что зацепиться, чтобы пользователь быстро, за секунды мог понять что тут к чему и принять решение.
Чем дольше пользователь будет возиться с каждой формой — тем меньше работы за день сделает. Чем меньше работы он сделает — тем херовее будет оцениваться ваш софт.
Одним из способов такое реализовать — визуально отделить описание от значения и выровнять их по левому краю:
обратите внимание как на скриншоте выше выровнены и описания и поля ввода.
Это сделано как раз для привязки глаза, позволяет быстро пробежаться по форме, не тратясь на вчитывание.
Правило третье: кнопки действий
Еще один разрыв жопы шаблона для всех приличных дизайнеров, поскольку считается плохим тоном лепить панель из однотипных кнопок, еще и с длинным текстовым описанием.
Но как бы не воображали себе «мамкины дизайнеры», управляющая панель с кучей кнопок — нетъемлимая часть любого корпоративного софта.
Меню «Пуск» в известной системе — яркий тому пример.
В любой нормальной корпоративной системе всегда будет куча управляющих кнопок, с диким описанием и в самых неожиданных местах — для ускорения последовательности действий, разумеется.
Еще они могут дублироваться, это нормально, не пугайтесь.
Оно не работает
Я достаточно давно в ИТ чтобы собрать коллекцию примеров интерфейса, которые стабильно заканчивают свои дни на помойке.
Однозначного ответа почему это не работает у меня для вас нет, могу лишь процитировать солдата из старого анекдота:
Пример первый: вычурность и UI/UX-понты
Забудьте все безумные варианты оформления которые делают себе любители Unix вы видели в кино и видеоиграх — существует статистика, показывающая что абсолютное большинство пользователей использует системное оформление «по-умолчанию».
Даже обои меняют далеко не все.
Вообщем, не работает электронная красота дальше скриншотов. Увы.
любое отступление от системных паттернов интерфейса для корпоративного ПО строго противопоказано, как бы вам не хотелось вы#бнуться с оформлением.
Стиль Metro
Не знаю кто придумал эту чуму, но кнопки без объема — как женщина с х#ем без сисек:
Короче это тоже не работает для корпоративного софта — слишком много ограничений накладывает такой UI/UX стиль. Многие пытались, но ни у кого не получилось ничего путного.
На практике это выглядит как-то так:
Полагаю вам тоже не очень надо повторять чужие ошибки, поэтому настоятельно советую держаться подальше от стиля Metro вообще — это не тот тип упрощения интерфейса, который вам будет полезен.
Темное оформление
Для многих «креативных авторов» является откровением тот факт, что их софтом будут пользоваться нормальные люди с дневной работой в офисе, а не сидящие в подвале с задернутыми шторами компьютерные задроты гики.
Отсюда видимо и происходит этот фетиш на темное оформление.
А еще есть «работа в поле» — выезды к клиенту либо просто работа из кафе, при ярком солнечном свете. Как думаете будет выглядеть темное оформление в таких условиях?
Вообщем оставьте темный интерфейс для гиков, работающих из затемненного помещения, оформление для реальной ежедневной работы — всегда светлое.
Это давно проверено на тестовых группах и обкатано в реальном использовании.
Выводы
К сожалению общее жизненное правило «все красивое — нефункционально», очень даже применимо и к интерфейсу.
Можно нарисовать сколь угодно красивый мокап или рендер, но как только дело доходит до реального (и тем более массового) использования — все нефункциональное придется убирать.
Но дело конечно ваше, ведь надувных bimbo-моделей тоже кто-то #бет.