Изменения в интерфейсе

Изменения в интерфейсе это как игра с огнем: вроде и понимаешь, что ничего страшного случиться не должно, но все равно опасаешься 🙂

В этой заметке я пройдусь по основным изменениям и расскажу, какие задачи мы хотели решить с их помощью.

Я понимаю, что первым делом вам бросилась в глаза темно-серая панель фильтров и слившиеся в один “плюсики” в главном меню, но начать хочу не с этого. Основное изменение, с которым вы столкнетесь сразу в процессе работы – это новая логика рабочих панелей. С нее мы и начнем.

Рабочие панели
Раньше вся работа интерфейса шла в двух панелях. Например, кликнули вы на задачу в списке – она открылась на панели справа. Кликнули на “Детали задачи” – они развернулись справа, сама задача заняла место списка, а список пропал. Итого, на экране практически всегда одна видны или две панели. Мониторы растут, место пропадает, поэтому в новом интерфейсе вы чаще всего будете работать уже с тремя панелями, выезжающиим и заезжающими по мере необходимости:

Навигация в ПланФиксе: открытие следующей панели

Клик откроет картинку в полном размере в новой вкладке

Кстати, быстро открывать предыдущую панель, как и раньше, можно кликом на полоску, в которую она свернулась:

Навигация в ПланФиксе: открытие предыдущей панели
Размеры всех панелей можно изменять простым тасканием границ между ними. Там, где это нужно (например, в диаграмме Ганта), основную панель можно развернуть практически на всю ширину экрана.

Анимация появления панелей тоже изменилась – стало лучше видно, откуда они появляются и куда исчезают. Поначалу это непривычно, но через день-два перестаешь обращать на это внимание – это я вам говорю с высоты своего 3-х недельного опыта работы в новом интерфейсе 🙂

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

Цветовая дифференциация панелей
На графитовую панель, расположенную слева, вы наверняка обратили внимание в первую очередь. На внутреннем сленге мы называем ее “панель фильтров”, потому что таково ее основное предназначение в большинстве разделов. Чуть менее заметны другие различия – панель со списками (проектов, задач, контактов и т.п.) светло-серая, а панель с информацией о конкретном объекте (задаче, например), как и раньше, имеет белый фон:

Разные цвета панелей в ПланФиксе

Клик откроет картинку в полном размере в новой вкладке

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

Выделение задачи в списке
В списке выбранная задача подсвечивается фоном, соответствующим фону статуса. Вот так, например, подсвечена выполненная задача:

Выделение задач в списке цвектом фона, соответ ствующим статусу

Клик откроет картинку в полном размере в новой вкладке

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

Цветовые метки фильтров
Для фильтров, которые вы можете редактировать, появилась возможность задавать цветовые метки:

Цветовые метки фильтров ПланФикса
Они помогут вам выделить наиболее употребительные фильтры и быстрее находить их среди прочих. У нас запланировано много интерфейсных изменений для повышения удобства работы с фильтрами, это – первое из них.

Фон в Планировщике
Основным фоном Планировщика стал светло-серый, на котором теперь отображаются все списки. Это позволило немного расширить карточки и убрать лишний фон специально для них. За счет этого они стали смотреться органичнее:

Новый дизайн Планировщика

Коммунальный “плюс”
Одно из существенных изменений интерфейса – “плюс” в главном меню, который стал общим для всех разделов. Теперь клик на него вызывает меню, в котором вы можете выбрать, что именно хотите добавить:

Создание новых объектов в ПланФиксе
Плюс такого подхода: универсальность и быстрый доступ к созданию объектов, которые раньше можно было создать только в соответствующем разделе (например, контакты). Минус – для создания задачи теперь нужно 2 клика, а не один. Я привык, а вы – не знаю 🙂

Отдельный раздел “Избранное”
Мы вывели “Избранное” из вкладки раздела “ПланФикс!” в отдельный раздел. Теперь он доступен под “гамбургером” в главном меню:

Избранное в ПланФиксе
Подробно рассказывать об этом я сейчас не буду, но те, кто активно пользуется избранным, могут вытащить его из под “гамбургера” в верхнюю часть главного меню и оценить дополнительные удобства работы с ним.

Еще в ходе переработки интерфейса мы сделали множество мелких правок, о которых нет особого смысла рассказывать – да и все равно неизбежный легкий шок от непривычного интерфейса не даст вам обратить на них внимания. Скажу лишь, что работа над интерфейсом продолжается: многое надо еще доработать, закончить замену иконок на SVG, ну и еще всякое разное. Но в общем целом в ближайшее время ПланФикс будет таким, каким вы увидели его сегодня.

Наверняка, не все изменения вам понравятся – мозг не любит перемен, так уж он устроен. Но через пару-тройку дней он приспособится и вы сможете реально оценить, что стало удобнее, а что нет. В этот момент имеет смысл выделить минутку и написать нам свои соображения по этому поводу – мы всегда к ним прислушиваемся.

Ну и конечно, если вы заметили ошибку после обновления интерфейса и что-то потеряли или ПланФикс перестал корректно работать в вашем любимом браузере, имеет смысл написать нам об этом уже сейчас. Только обновите, на всякий случай, перед этим кэш, нажав Ctrl+F5 – особенно, если ПланФикс был запущен на момент выпуска обновления.

Дмитрий Гончаренко Команда ПланФикса

 

P.S. Напоминаю, что вы можете подписаться на наши страницы Facebook и VK и несколько раз в неделю узнавать короткие новости о небольших изменениях в ПланФиксе. О революциях мы там обычно не сообщаем, зато не пропустите множество мелких полезных советов и нововведений.

69 комментариев

  1. Спасибо, все нравится, единственное мне кажется нужно убрать тень в карточке планировщика, она там ну совсем не в тему =)

    box-shadow: 0 1px 0 0 #bbb; */

  2. Отличные изменения, единственный момент в планироващике – это постоянно выкатывающая панель, которую приходится скрывать. Раньше было один раз скрыл и все – при необходимости открыл.

    1. Теперь поведение панелей везде одинаковое, поэтому немного изменилось по сравнению с прошлым. Но ее можно свернуть и тогда она выкатываться не будет

  3. Новость – огонь! И классно, что это не первоапрельский розыгрыш.

    Предлагаю небольшое изменение в поведении окон, а именно запоминать их количество. Например, если выбрать в списке задачу и открыть окно с её деталями, то в итоге отображается три кона – список задач, задача, детали. Если в списке выбрать другую задачу, то у неё пропадает окно с деталями.

    1. А мне кажется, будет путать это прыгающее окно. Двойное выскакивание панелей, опять же, будет странно смотреться – кликнул на задачу в списке, выехала она и сразу ее детали.

      Да и не факт, что если я один раз открыл окно с деталями, то оно мне в следующий раз тоже понадобится.

  4. Мне очень понравилось, что сделали цветовую дифференциалцию панелей, теперь появилась концентрация на рабочей области.

    Из минусов хочу заметить, что из-за не всегда быстрого интернета скрипты не успевают подгружать все элементы управления в теле задачи. Я вроде как навожу на кнопку в задаче, а она отпрыгивает вниз, потому что подгрузилась кнопка редактиварония описания справа, поджала текст описания влево, и это выдавило кнопку вниз.

    Такие моменты, я думаю, вы и сами видите =)

    Ну и спасибо за возможность записать новое видео 😉

  5. Дмитрий, когда открыто такое окно http://joxi.ru/bmovpDYIxjz7Or и слева выбираются разные проекты – то меняется только поле Задачи, поле Детали проекта остается от первого открытого проекта.
    Мне кажется это не логичное поведение, предлагаю открывать в правом окне детали открытого проекта

  6. Очень все красиво. Только можно как-то изменить в режиме просмотра задачи название проекта. Сейчас он мелко и блекло. Не видно к какому проекту относится задача. Если в разных проектах есть задачи с одинаковыми именами можно запутаться. Можно как-то это выделить шрифтом покрупнее и может быть вон другой, что-бы отделялось от названия задачи

    1. Тут вечный спор с этими хлебными крошками – для кого-то это актуально и хочется проект покрупнее, кто-то считает это потерей места. На текущий момент для выделения проекта можно вынести его в шаблоне из “Деталей задачи” на основную панель задачи и видеть всегда крупно:

    2. В порядке эксперимента можете попробовать мой стиль «Чуть крупнее и контрастнее» https://userstyles.org/styles/137969/planfix-ru-by-kirr , который, кроме прочего, призван улучшить читабельность этих “хлебных крошек”. Он, вроде бы, не конфликтует с нынешними интерфейсными нововведениями.

  7. Не смотря на мой скепсис связанны с изменениями интерфейсов, это обновление мне очень по душе и достойно отдельной похвалы для всей команды планфикс. Очень здорово, что раскрыли потенциал цветовых обозначений статусов. Раньше я этому не уделял много внимания, теперь считаю нужно внести к цветам статусов.
    Спасибо вам за то, что вы с нами и делаете наш мир красивее удобнее и приятнее. А ведь именно с планфикс мы проводим фактически все рабочее время.

  8. Косяк не большой – в разделе “ПланФикс” когда кликаешь на стрелочку чтобы развернуть проект, то он разворачивается и снова сворачивается и выделяется и только со второго клика он реально разворачивается. Надо бы сделать чтобы если кликаешь именно на стрелочку он именно разворачивался а не выбирался.

    1. Спасибо, Дмитрий!
      По первому вопросу не получается воспроизвести – в каком это браузере наблюдается? Или может я не туда кликаю… В общем, если можно, поставьте задачу в сапорт.

      По второму все понятно, посмотрим что можно сделать.

  9. Здравствуйте, Дмитрий!
    Изменения безусловно в лучшую сторону. Замечательное обновление.
    Однако с замечаниями коллег выше согласен:
    1. Фиксация левой боковой панели и свойство “памяти” положения было удобнее в прошлом интерфейсе. Т.е. нужно чтобы запоминало в каком положении было
    2. Вот еще на мой взгляд несколько мелочей, чтобы дотянуть http://adma.kz/s/1EVQ3BJ.jpg.

    Спасибо вам за отличную работу!

  10. Спасибо новые изменения делают работу с системой удобнее.

    Есть некоторые замечания / предложения по UX

    Вот так выглядит интерфейс на сверхшироком экране 21:9 http://take.ms/We1Yt
    Большой красный прямоугольник инвертного цветового выделения задачи слишком яркий и очень сильно притягивает зрительное внимание. Хотя по логике интерфейс системы должен помогать фокусироваться на панели задачи справа.
    Цветовое кодирование это замечательно и реально упрощает работу.
    Подсветка цветом активного элементе списка событий тоже хорошо для понимания с каким из элементов ты работаешь
    Но в данном случае применение обоих решений дает не совсем тот результат который хотелось бы получить.

    1. Ага! Вот Вы и увидели как выглядит просроченная задача в новом интерфейсе)))
      На самом деле, действительно бьет в глаза. Я себя утешаю тем, что это станет дополнительным стимулом их не просрачивать) Но вообще посмотрим, как оно пойдет – если будет много жалоб, придется что-то менять.

      1. Поддержу Андрея.
        Замечу, что красный, то ладно ещё: у него работа такая — бить в глаза. Но зелёный, к примеру, тоже нехило светится. Такие насыщенные сплошные цвета, если я не ошибаюсь, больше нигде в интерфейсе ПФ не встречаются.
        Если оставаться в рамках идеи подсвечивания выбранного элемента цветом статуса, то может быть хоть насыщенность цвета в 2-3 раза снизить? И информативность сохранится, и в глаза бить не будет.

        А вообще, по-моему, учитывая, что фон списка стал светло-серым, теперь можно сделать так, как раньше было невозможно — подсвечивать выбранный элемент _белым_ фоном с сохранением условного цвета надписи (для ясности можно ещё тонкую пунктирную рамку добавить).

  11. Очень не хватает кнопки “свернуть/развернуть” в проектах и задачах. Когда много подпроектов или подзадач, визуально очень тяжело что-то отыскать из-за большого количества строк. Поэтому в подобных интерфейсах часто используют кнопку, которая позволит одним кликом сгруппировать все по надпроектам и надзадачам. Свернул все, отыскал глазами нужную задачу, открыл ее,а дальше уже нужное действие. Не нужно перелопачивать весь список.

    Например у нас 15 проектов по 20 подпроектов в каждом, и того 315 строк, чтобы отыскать например 12-ый надпроект нужно промотать весь список 🙁

  12. Хорошие новости!
    Смутила только пара вещей.

    Слишком уж яркая цветовая подсветка выбранной задачи в списках, о чём я написал выше.

    Решение с фоном панелей, как оно выглядит в Планировщике. Светло-серый фон — это лучше, чем белый, но ощущение некоторой общей белесости и неясности границ визуальных блоков осталось.
    В общем, не смотря на новые интересные гайдлайны, моё мнение по части оформления Планировщика осталось выраженным в стиле «Тонированный Планировщик» (который, естественно, сейчас стал непригоден к использованию и требует приведения в соответствие с новым кодом сайта). Тем более, с появлением “графитовой” левой панели, затемнённое оформление Планировщика в моём стиле теперь будет выглядеть более органично.

    1. Мы внимательно следим за тем, что Вы делаете, Кирилл, и это влияет на наши настроения. Так что ждем новых идей и вариантов)

  13. И в создании/редактировании отчетов, когда формулу пишешь, такое окошко появляется http://joxi.ru/L21Gxx3cdqK8rX

    Так задумано или ошибка? Если так задумано, то оно при наборе текста как-то ездит туда-сюда.
    Ну и, когда формулу написал, не дает выбрать значение поля “Вычислять формулу” (в ТП по этому вопросу уже написал).

  14. Интерфейс нравится, но вот то что все “+” вынесли в одно место – не привычно. Тут бы сделать 2 варианта – общие плюсики как сейчас в дубле со старыми “+” перед каждым названием.
    В понедельник сотрудники начнут жаловаться, т.к. мышка уже в фиксированное место едет для создания задачи/контакта….
    Может тут дать небольшое право выбора?

    1. Непривычность это хорошо, не дает мозгу закостенеть) Первые пару дней действительно автоматом лезешь на старое место, но потом привыкаешь и никакого желания отдельных плюсов не остается.

  15. Всем привет и отдельный респект команде ПланФикс.
    У меня вопрос в тему.
    Немного напрягает политика перехода по вкладкам системы (Планировщик, Проекты, Задачи и т.д.).
    На сейчас все устроена так, что переходе с раздела в раздел мы всегда попадаем в его “корень”. Ка по мне, жутко неудобно.
    Как пример:
    Работаю в одном из планировщиков, сфокусировался на задаче. Мне нужна доп. инфа – быстро нашел по поиску – попал в задачу с этой информацией. Замечательно.
    Я хочу назад, в задачу с которой работал изначально, – возвращаюсь в раздел Планировщик и попадаю на планировщик по умолчанию, потом перехожу в тот, в котором работал и ищу нужную задачу…
    Я считаю было бы намного удобнее фиксировать “текущее положение” в “покинутом” разделе и отображать его по возвращению.
    Это касается любого из разделов, приходиться несколько раз подумать, перед тем как его покинуть..
    Да, можно вернуться по откату в браузере, можно открываться на новых вкладках.., но это лишние движения в рабочем процессе..
    ИМХО
    —-
    За свежий дизайн спасибо))
    Приятно.

    1. Ну вот не знаю, Степан. Мне бы, например, в большинстве случаев не хотелось оказаться в задаче или проекте, с которыми я работал в прошлый раз.

      Тут, наверное, многое зависит от специфики работы – наверняка, кто-то с Вами согласится, а кто-то, как я, будет не особо рад таким изменениям.

  16. Спасибо за дизайн. Пока не понравилось только то, что пропадает содержимое панелей при “таскании границ”, и снова появляется при завершении процесса. Очень неудобно, бросается в глаза. Да вообще для того и перетаскиваем чтобы понять как будет текст смотреться.

    1. Да, было бы здорово сразу все видеть – но сложность расчетов такова, что абсолютное большинство машин просто умрет, если мы сделаем такой пересчет и отображение на ходу. Поэтому без компромисса тут не обойтись.

  17. Приветствую !
    … и вас и нововведения ))
    Все изменения к лучшему, по моему скромному мнению.
    Предалгаю рассмотреть следующую мелочь:
    Для обзора текущего положения на панели планировщика создал кастомный набор списков и хроник. Количество различных наборов списков получилось не малое, но так мне удобнее делать обозрение тукущего состояния задач.
    И заметил, что хотелось бы иметь возможность одним кликом (как сейчас реализовано в списке) добавить задачу, но вместе с тем что бы этот функционал не занимал целую строку в списке.
    Предлагаю добавить “плюсик” в шапку списка и вместе с тем убрать строку “добавления”… как то так – http://c2n.me/3J7ZPJt

    С уважением!

  18. В восторге от обновления! Получил эстетическое удовольствие от нового дизайна!

    Коммунальный плюс шикарен. По этому поводу хотелось бы вспомнить пожелание, которое здесь и на форуме мелькало уже не раз – создание задачи по шаблону одним кликом. Сейчас прямо так и просится чтоб у создания новой задачи по плюсику был выпадающий список из шаблонов. А чтобы это дело не перегружало интерфейс – список только из тех шаблонов, которые вручную отмечены в настройках каждого шаблона. Тогда 95% пользователей будут иметь вид как сейчас. А нуждающихся получат быстрое создание задач по шаблону. Подход кстати применим и к другим разделам, не только задачам.

  19. Пропал горизонтальный скролл из планировщика. Т.е., когда одновременно открыты список проектов и описание задачи, крайне неудобно производить переход по задачам, т.к. скрываются некоторые столбы. И для того, чтобы до них добраться нужно закрывать описание задачи и только тогда виден весь планировщик.

  20. Спасибо за такие улучшения. Удобство пользователя и внешний вид стали еще лучше 🙂 .

    Есть просьба. Когда находишься на вкладке задачи и в фильтре добавлено много колонок, правые колонки могут быть не видны. http://prntscr.com/evxaea . В случае что на скрине, не видно еще трех колонок. При этом масштаб в браузере уменьшен до 90%, а если бы масштаб был 100%, не было бы видно 5 колонок.
    У меня на ноуте экран 15 дюймов, конечно при большом мониторе, такое происходило бы реже. Но наверное не правильно создавать сервис только под большие мониторы, тем более что все равно при большем количестве колонок их не будет видно.
    Поставьте горизонтальную прокрутку и будет счастье ).
    Что есть “Автоматический расчет ширины столбцов”, я знаю, он тоже не помогает.

    Еще одна просьба.
    Очень удачное решение в планфиксе, это возможность фиксации заголовков таблиц при прокрутке вниз. Было бы здорово, когда будет горизонтальная прокрутка, возможность фиксации слева названий задач.

  21. Есть проблема, и весьма на мой взгляд серьезная. Это “перегруз” интерфейса. Особенно для начинающего пользователя.

    Помню интерфейс четыре года назад и зашел глянуть, что сейчас (янв 2019). Прошу прощения, но стало только хуже, а именно вырос объем не нужной на начальном этапе информации.

    Тур для начинающего – это хорошо и здорово, но это только подтверждает мои догадки о проблемах “быстрого старта”. Интерфейс планировщика должен быть предельно простой, чтобы не отпугнуть начинающего пользователя.

    Дополнительные окна, панели, меню на главной странице должны включаться по необходимости или постепенно по мере возникновения новых потребностей у клиента. Нельзя всё сразу показывать холодному клиенту!

    У меня была мысль попробовать вашу систему в режиме канбан для определенной группы моих клиентов, но понял, что нет – не рискну. Для них такой интерфейс (как бы чего не нажать, а то уедет в сторону или перекроется чем-то другим) – это слишком сложно. Поэтому ушел назад на проверенный Tr…o.

    1. Спасибо за полезный комментарий, Александр. Мы отдаем себе отчет в том, что интерфейс ПланФикса далек от идеала. Я бы выделил тут две основные причины:

      1. Система содержит много возможностей. Это здорово, т.к. позволяет настраивать ее для решения широкого круга задач. Но в плане интерфейса система с бОльшим количеством возможностей в любом случае будет сложнее системы, в которой их меньше. По этому пункту ПланФикс всегда будет проигрывать Trello и множеству подобных систем.

      2. Даже с учетом пункта 1, интерфейс можно и нужно упрощать, искать более удобные решения и визуально оптимизировать всю эту “внутреннюю сложность”, которая так и норовит выскочить и испугать неподготовленного пользователя. Об этом мы много думаем в команде и многое делаем для этого. Например, Рабочие пространства. Но, конечно, сделать предстоит больше, чем уже сделано.

Добавить комментарий