Находясь на старте с неким базовым набором без знания матчасти, было просто необходимым съездить и посмотреть, с какой целью мы все это делаем и для кого)
Ключевое — заложить базовые элементы, на основе которых будет выстраиваться пользовательский опыт для многих проектов; без системного подхода тут действительно не обойтись
Спасибо! Да, не каждый дизайнер / разработчик ставит себя на место конечного пользователя, и большинства проблем взаимодействия можно было бы избежать при таком подходе
С точки зрения подхода в целом, управление с клавиатуры у нас также есть. Про мобильную разработку для производства стоит написать отдельную статью)
Кардинальное отличие мобильной разработки — создание удобных областей «тапа» на экране, отсутствие правых кликов (которые есть в десктопе), доступность нужных параметров на одном экране и добавление дополнительного управления элементами с помощью свайпов. Мы это активно применяем в интерфейсах для планшетов.
Касаемо пунктов:
Совершенно верно, светло-серый шрифт в отличие от белого не так напрягает глаза в темноте. Все контрастные элементы проверялись по шкале WebAIM.
Выравнивание заголовков зависит от наполнения столбцов: числовые значения необходимо выравнивать по правому краю.
Слишком толстый шрифт не всегда подходил — ввиду того что на мониторах не всегда включено сглаживание шрифтов по умолчанию, шрифт Medium был подобран оптимально.
С линиями соглашусь, с внедрением нового функционала таблиц, аналогичного Excel, это нововведение было применено. А вот по чередующимся строкам — спорно, бывают ситуации с большим количеством подсветки строк и ячеек, чередование может сбивать с толку в этом случае.
Очень правильный момент заметили — но мы и это решили: выбранная строка закрепляется сверху при скролле.
Общее количество элементов мы отображаем в случае выделенных строк, это действительно удобно. Если необходимо, данный параметр мы также выводим по запросу — он не всегда нужен для постоянного мониторинга.
Согласна, Excel с точки зрения работы с таблицами — идеальный инструмент, мы стремимся к тому, чтобы приблизиться к нему по удобству и функциональности.
Все постепенно приходилось внедрять. Особенно отзывается комментарий про пустое место на экране, я не написала об этом в статье — но это тоже было одной из горячих проблем. Однозначно, грамотное использование пространства на мониторе — это первое, на что было необходимо обратить внимание, в версии 2.0 это также учли.
Это было непросто — привнести свой взгляд и опыт с учетом уже готовых наработок, но в итоге удалось прийти к правильно заложенной базе для дальнейшего развития проектов
Промышленный дизайн — это действительно другая отрасль, она включает себя разработку дизайна «предметного мира», у Студии Лебедева много релевантных работ.
В металлургических интерфейсах также есть бэк и фронт
Спасибо за подробный разбор кейса, данные на иллюстрациях приведены для примера — к сожалению, не все актуальные типы данных мы можем размещать публично.
Но в целом соглашусь, совет дельный — просто раскрасить форму недостаточно, грамотное расположение элементов и параметров также играет ключевую роль
Вас понимаю и разделяю негодование, вопрос профессионализма дизайнеров и требований к интерфейсам. Либо к владельцу продукта: по опыту, самое сложное — «подружить» нескольких дизайнеров на проекте, чтобы продукт был собран с применением одинаковых паттернов.
К сожалению, пока нет единого подхода и рекомендаций, время экпериментов. И если в вебе я это могу понять, на производстве нужно быть очень осторожными с внедрениями инноваций)
Material — это скорее удобная база, на основе которой можно выстраивать любой тип интерфейса. Вопрос в другом, насколько Material применим в конкретных кейсах — часто его возможностей не хватает для специфических запросов, приходится изобретать новые подходы.
С термином «семиотика» встречаюсь впервые, но знакома с понятием «семантика цвета». Например, вопреки общепринятому стереотипу о рекомендации применения «песочных» цветов на сайтах для ОАЭ, есть мнение, что арабы обожают холодные оттенки: их тянет к прохладе, поэтому веб-продукты в холодных тонах имеют бОльший шанс взлететь в арабских странах.
Судя по описанию семиотики, многие вещи мы конечно же применяем. Это и улучшение считывания текстовых кнопок с помощью подходящих по смыслу иконок, и правильная индикация. По последнему пункту мы проводили AB-тесты, где показывали различные вариации размеров текста, яркости оттенков и их контрастности
Интуитивно найденное решение часто попадает в точку! Особенно если поставить себя на место пользователя с вопросом: "А мне будет удобно этим пользоваться каждый день?"
Хороший пример, у нас встречались такие кейсы. И, конечно, мы в наших решениях не ограничиваемся только стилизацией элементов: различные фильтрации и сортировки, приоритизация вывода данных на страничке, компактное отображение данных, индикация в нужных местах — все это необходимо продумать еще на этапе проектирования.
Это также в компетенциях дизайнера, который вместе с аналитиком определяет степень целесообразности применяемого решения в зависимости от пользовательского запроса
Конечно, дизайнеру также необходимо разбираться в специфике продукта, который он реализует. Мы всегда за качество финального продукта — чтобы в дальнейшем гордиться своей работой)
Согласна, у дизайнера в этой части намного больше опыта, компетенции и фантазии ;) Есть много забавных видео на тему "Когда бэкенду дали в разработку фронтенд", разница в мышлении очевидна
Находясь на старте с неким базовым набором без знания матчасти, было просто необходимым съездить и посмотреть, с какой целью мы все это делаем и для кого)
Ключевое — заложить базовые элементы, на основе которых будет выстраиваться пользовательский опыт для многих проектов; без системного подхода тут действительно не обойтись
Спасибо! Да, не каждый дизайнер / разработчик ставит себя на место конечного пользователя, и большинства проблем взаимодействия можно было бы избежать при таком подходе
С точки зрения подхода в целом, управление с клавиатуры у нас также есть. Про мобильную разработку для производства стоит написать отдельную статью)
Кардинальное отличие мобильной разработки — создание удобных областей «тапа» на экране, отсутствие правых кликов (которые есть в десктопе), доступность нужных параметров на одном экране и добавление дополнительного управления элементами с помощью свайпов. Мы это активно применяем в интерфейсах для планшетов.
Касаемо пунктов:
Совершенно верно, светло-серый шрифт в отличие от белого не так напрягает глаза в темноте. Все контрастные элементы проверялись по шкале WebAIM.
Выравнивание заголовков зависит от наполнения столбцов: числовые значения необходимо выравнивать по правому краю.
Слишком толстый шрифт не всегда подходил — ввиду того что на мониторах не всегда включено сглаживание шрифтов по умолчанию, шрифт Medium был подобран оптимально.
С линиями соглашусь, с внедрением нового функционала таблиц, аналогичного Excel, это нововведение было применено. А вот по чередующимся строкам — спорно, бывают ситуации с большим количеством подсветки строк и ячеек, чередование может сбивать с толку в этом случае.
Очень правильный момент заметили — но мы и это решили: выбранная строка закрепляется сверху при скролле.
Общее количество элементов мы отображаем в случае выделенных строк, это действительно удобно. Если необходимо, данный параметр мы также выводим по запросу — он не всегда нужен для постоянного мониторинга.
Согласна, Excel с точки зрения работы с таблицами — идеальный инструмент, мы стремимся к тому, чтобы приблизиться к нему по удобству и функциональности.
Большое спасибо за развернутый комментарий!
Все постепенно приходилось внедрять. Особенно отзывается комментарий про пустое место на экране, я не написала об этом в статье — но это тоже было одной из горячих проблем. Однозначно, грамотное использование пространства на мониторе — это первое, на что было необходимо обратить внимание, в версии 2.0 это также учли.
Это было непросто — привнести свой взгляд и опыт с учетом уже готовых наработок, но в итоге удалось прийти к правильно заложенной базе для дальнейшего развития проектов
Понимаю, конечно — без учета специфики не может получиться ничего хорошего, это факт
Рада, что статья оказалась полезной! Благодарю за обратную связь)
Промышленный дизайн — это действительно другая отрасль, она включает себя разработку дизайна «предметного мира», у Студии Лебедева много релевантных работ.
В металлургических интерфейсах также есть бэк и фронт
Спасибо за подробный разбор кейса, данные на иллюстрациях приведены для примера — к сожалению, не все актуальные типы данных мы можем размещать публично.
Но в целом соглашусь, совет дельный — просто раскрасить форму недостаточно, грамотное расположение элементов и параметров также играет ключевую роль
Классный пример! Со звуком тоже столько нюансов, мы даже при всем желании не везде можем его внедрить — бывает ну очень шумно на рабочем месте)
Вас понимаю и разделяю негодование, вопрос профессионализма дизайнеров и требований к интерфейсам. Либо к владельцу продукта: по опыту, самое сложное — «подружить» нескольких дизайнеров на проекте, чтобы продукт был собран с применением одинаковых паттернов.
К сожалению, пока нет единого подхода и рекомендаций, время экпериментов. И если в вебе я это могу понять, на производстве нужно быть очень осторожными с внедрениями инноваций)
Material — это скорее удобная база, на основе которой можно выстраивать любой тип интерфейса. Вопрос в другом, насколько Material применим в конкретных кейсах — часто его возможностей не хватает для специфических запросов, приходится изобретать новые подходы.
С термином «семиотика» встречаюсь впервые, но знакома с понятием «семантика цвета». Например, вопреки общепринятому стереотипу о рекомендации применения «песочных» цветов на сайтах для ОАЭ, есть мнение, что арабы обожают холодные оттенки: их тянет к прохладе, поэтому веб-продукты в холодных тонах имеют бОльший шанс взлететь в арабских странах.
Судя по описанию семиотики, многие вещи мы конечно же применяем. Это и улучшение считывания текстовых кнопок с помощью подходящих по смыслу иконок, и правильная индикация. По последнему пункту мы проводили AB-тесты, где показывали различные вариации размеров текста, яркости оттенков и их контрастности
В идеале, критические показатели на мониторах должны считываться на расстоянии 1,5-2 метра, по описанию — хорошая реализация
Как знакомо! Особенно про отзывчивость актуально, и удобную область тапа ))
Да, мы проделали огромный путь, прежде чем стало получаться как надо)
Интуитивно найденное решение часто попадает в точку! Особенно если поставить себя на место пользователя с вопросом: "А мне будет удобно этим пользоваться каждый день?"
Тогда многие вопросы решаются сами собой)
Хороший пример, у нас встречались такие кейсы. И, конечно, мы в наших решениях не ограничиваемся только стилизацией элементов: различные фильтрации и сортировки, приоритизация вывода данных на страничке, компактное отображение данных, индикация в нужных местах — все это необходимо продумать еще на этапе проектирования.
Это также в компетенциях дизайнера, который вместе с аналитиком определяет степень целесообразности применяемого решения в зависимости от пользовательского запроса
Конечно, дизайнеру также необходимо разбираться в специфике продукта, который он реализует. Мы всегда за качество финального продукта — чтобы в дальнейшем гордиться своей работой)
Я тоже не была с этим согласна. Все-таки, это мы для производства делаем, а не производство под нас должно адаптироваться
Согласна, у дизайнера в этой части намного больше опыта, компетенции и фантазии ;) Есть много забавных видео на тему "Когда бэкенду дали в разработку фронтенд", разница в мышлении очевидна
Благодарю) Чем больше накапливаем экспертизу — тем больше крутых решений внедряем в будущем