В последнее время часто сталкиваюсь с проектировщиками интерфейсов, которые вышли из дизайнеров, и на мой взгляд их объединяет одно свойство они не корректируют бизнес процесс. И в итоге остаются хорошие, сделанные по правилам интерфейсы, которые не решают главную проблему:
Дональд Норман
Проблема заключается в том, что если процесс, обслуживаемый интерфейсом, сложный и запутанный, то и интерфейс будет такой же. Процесс мутный — интерфейс мутный. У вас будут россыпи тогглов, чекбоксов и списков, а перед использованием интерфейса, нужно будет пройти 2-ух недельные курсы подготовки, и сдать экзамен.
Я думаю многие сталкивались с такими интерфейсам в ERP системах, и там это кажется допустимым, ведь это же корпоративный софт. Однако часто проблема скрывается не в том, что у вас сложный бизнес-процесс, а в том, что он не систематизирован и не подготовлен для пользователя.
Для того, что бы продемонстрировать разницу, мы сделаем с вами небольшой интерфейс для разбора входящих обращений.
Добро пожаловать
Вот его интерфейс
![](https://habrastorage.org/r/w1560/storage2/95b/95f/40d/95b95f40d264d671032b5e69e14c581e.png)
Более-менее подходящий интерфейс, предлагаю не обсуждать его эстетичность и прочее. Функцию разбора обращений он выполняет.
А вот его процесс
![](https://habrastorage.org/r/w1560/storage2/7c3/ecb/74e/7c3ecb74e8860e663c04f1a74249fe2b.png)
А теперь с указанием времени
![](https://habrastorage.org/r/w1560/storage2/8aa/a9d/d4f/8aaa9dd4fc5e9369b03c61154cf28140.png)
Вроде бы всё просто, но обработка входящего потока в 1000 писем займет не менее 11 часов, а верхний поток составляет 94 часа, возьмем среднее итого часов 50.
Это больше одной недели на обработку входящего потока. Как радикально улучшить UI, я если честно не знаю, а вот если начать работать с сами процессом, то тут открываются довольно интересные возможности.
Давайте в форме обращения добавим указание адресата, например отдел
![](https://habrastorage.org/r/w1560/storage2/dbf/56a/42b/dbf56a42b6041cdaa3585ae408e71ecc.png)
И время необходимое для обработки, уже сократилось довольно ощутимо, дальше можно сделать ещё несколько изменений.
![](https://habrastorage.org/r/w1560/storage2/cda/ae2/ce6/cdaae2ce6b95aca30cb7f923f4cb8a35.png)
И вот немного поработав с интерфейсом и с процессом, мы получили решение, которое может очень сильно нам помочь в обработке входящий обращений. Итого в случае ручной обработки можно ориентироваться на 33 часа, или примерно 4 рабочих дня, а если автоматизировать, то получится 1,5 рабочих дня. Если в месяц у нас обращений 10 000, то при отсутствии автоматизации — это 330 часов или 41,5 рабочий день, а при наличии 131 час или 16,5 рабочих дней.
На таком простом примере я постарался показать разницу, между UI Design и UX Design. Такой подход позволит создавать более удачные интерфейсы и процессы, которые будут не только более привлекательны, но и более эффективны и систематизированы.
Бонус для тех, кто дочитал до конца: небольшая табличка для обоснования такого рода изменений
![](https://habrastorage.org/r/w1560/storage2/b9f/811/8c5/b9f8118c58f269e8576f617a93dae31c.png)
«Основная проблема интерфейса в том что это интерфейс. Интерфейсы — это препятствия на пути. Я не хочу сосредоточивать свои силы на интерфейсе. Я хочу сосредоточиться на работе… Я не хочу осознавать себя использующим компьютер, я хочу осознавать себя делающим дело».
Дональд Норман
Проблема заключается в том, что если процесс, обслуживаемый интерфейсом, сложный и запутанный, то и интерфейс будет такой же. Процесс мутный — интерфейс мутный. У вас будут россыпи тогглов, чекбоксов и списков, а перед использованием интерфейса, нужно будет пройти 2-ух недельные курсы подготовки, и сдать экзамен.
Я думаю многие сталкивались с такими интерфейсам в ERP системах, и там это кажется допустимым, ведь это же корпоративный софт. Однако часто проблема скрывается не в том, что у вас сложный бизнес-процесс, а в том, что он не систематизирован и не подготовлен для пользователя.
Для того, что бы продемонстрировать разницу, мы сделаем с вами небольшой интерфейс для разбора входящих обращений.
Добро пожаловать
Вот его интерфейс
![](https://habrastorage.org/storage2/95b/95f/40d/95b95f40d264d671032b5e69e14c581e.png)
Более-менее подходящий интерфейс, предлагаю не обсуждать его эстетичность и прочее. Функцию разбора обращений он выполняет.
А вот его процесс
![](https://habrastorage.org/storage2/7c3/ecb/74e/7c3ecb74e8860e663c04f1a74249fe2b.png)
А теперь с указанием времени
![](https://habrastorage.org/storage2/8aa/a9d/d4f/8aaa9dd4fc5e9369b03c61154cf28140.png)
Вроде бы всё просто, но обработка входящего потока в 1000 писем займет не менее 11 часов, а верхний поток составляет 94 часа, возьмем среднее итого часов 50.
Это больше одной недели на обработку входящего потока. Как радикально улучшить UI, я если честно не знаю, а вот если начать работать с сами процессом, то тут открываются довольно интересные возможности.
Давайте в форме обращения добавим указание адресата, например отдел
![](https://habrastorage.org/storage2/dbf/56a/42b/dbf56a42b6041cdaa3585ae408e71ecc.png)
И время необходимое для обработки, уже сократилось довольно ощутимо, дальше можно сделать ещё несколько изменений.
![](https://habrastorage.org/storage2/cda/ae2/ce6/cdaae2ce6b95aca30cb7f923f4cb8a35.png)
И вот немного поработав с интерфейсом и с процессом, мы получили решение, которое может очень сильно нам помочь в обработке входящий обращений. Итого в случае ручной обработки можно ориентироваться на 33 часа, или примерно 4 рабочих дня, а если автоматизировать, то получится 1,5 рабочих дня. Если в месяц у нас обращений 10 000, то при отсутствии автоматизации — это 330 часов или 41,5 рабочий день, а при наличии 131 час или 16,5 рабочих дней.
На таком простом примере я постарался показать разницу, между UI Design и UX Design. Такой подход позволит создавать более удачные интерфейсы и процессы, которые будут не только более привлекательны, но и более эффективны и систематизированы.
Бонус для тех, кто дочитал до конца: небольшая табличка для обоснования такого рода изменений
![](https://habrastorage.org/storage2/b9f/811/8c5/b9f8118c58f269e8576f617a93dae31c.png)