Михаил Греков написал, как сделать удобнее таблицы, с помощью которых пользователи управляют данными (CRM, ERP и прочие системы).

Михаил Греков написал, как сделать удобнее таблицы, с помощью которых пользователи управляют данными (CRM, ERP и прочие системы).

Михаил Греков написал, как сделать удобнее таблицы, с помощью которых пользователи управляют данными (CRM, ERP и прочие системы).

В первой статье разбирается просмотр данных.

1. Рабочая таблица должна занимать максимум места на экране. Как вариант — опция «на весь экран».
2. Объединяйте данные. Если есть данные о фамилии, имени и отчестве, их целесообразно вывести в один столбец ФИО. Должность или роль в системе тоже можно присоединить к ФИО.
3. Бесконечная прокрутка и кнопка «Показать ещё» не подходят для отображения строк таблицы. Делайте постраничную навигацию. Это удобно и для коллективной работы с таблицей.
4. Показывайте по умолчанию больше строк на одной странице: 50, 100, 500.
5. Используйте цветовые индикаторы. Красить строку целиком стоит только при отклонении от нормы.
6. При наличии цветовых индикаторов полезно отображать легенду цветов.
7. Храните пользовательские настройки вида, не сбрасывайте их после окончания сеанса.
8. Связанные сущности (название организации может быть связано с карточкой организации) полезно делать ссылками на соответствующие карточки. Но если таких сущностей в строке много, выделите только полезные в работе.
9. Строка должна подсвечиваться при наведении курсора. Должна быть возможность выделить строку кликом на неё.
10. Нет ничего страшного при появлении горизонтальной прокрутки.
11. В некоторых случаях полезно маркировать просмотренные записи.
12. Должна быть настройка отображения столбцов с системными свойствами (ID, дата создания, автор, дата изменения).
13. Переход к просмотру записи удобно сделать по двойному клику.
14. Иногда удобен режим предпросмотра, когда по клику открывается не вся запись, а сводка по ней, как в Google Drive.

«Строка в таблице часто является прелюдией к просмотру полной информации по записи. На моей практике в 99% рабочих таблиц модальный режим просмотра уступал просмотру записи на отдельной странице».

Защита

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

Первое, лучшая подготовка к любому выступлению — доскональное знание своей темы. Благодаря тому, что я глубоко погрузился в тему, пропустил через себя все бизнес-процессы, до которых смог дотянуться, испробовал кучу концепций и вариантов, я не боялся, что мне нечего будет сказать. Конечно, большую роль в этом сыграл канал — описывая свой опыт, ты укореняешься и на подкорке вытачиваешь весь прогресс.

Второе, нужно максимально упростить повествование не уходя в детали, потому что на выступление дается всего 10-15 минут. Было непросто выбрать логику повествования — когда ты работаешь над проектом полгода, становится сложно выкинуть какие-то части. Но чтобы вас поняли, это необходимо сделать, ваш рассказ должен понять даже ребенок. Мы выбрали одну самую большую боль пользователя и обернули её в историю этого пользователя — от момента, когда он сталкивается с проблемой, до её решения. Одна проблема — одно четкое решение, тогда вас точно услышат и осознанно оценят.

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

По возможности, попробуйте свое выступление в бою с микрофоном и зрителями. Может казаться, что вы супер готовы, знаете тему, у вас классная презентация, но на выступлении вы вдруг обнаруживаете, что микрофон странно передает ваш голос, вы начинаете нервничать и забывать текст. У меня так и случилось на последней защите — я так погрузился в подготовку материалов к презентации, что самонадеянно не репетировал речь, но когда вышел на сцену понял, что это совсем непривычное для меня состояние: микрофон жутко изменял мой голос, он становился гундосым, я начинал нервничать и думаю уже не о презентации, поэтому первые минуты моего выступления ушли на адаптацию к этим неожиданным условиям.

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

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

Перед защитой всегда очень волнуешься, так как относишься к этому со всей серьезностью. Особенно сильно переживаешь за то как тебя оценят. Когда мы готовились к защите, то чувствовали себя аутсайдерами из-за того, что долго и сложно работали над UI. Но по мере подготовки презентации я понимал, что у нас получается очень крепкая история. Так и получилось — пятёрку получили только две команды: мы и qlean. И нас обеих оценили в первую очередь за то, что мы нашли боль и осознанно попытались её решить. Вы можете сами оценить наш кейс, который сверстан практически в точности по сценарию рассказа презентации.

Десять советов: как развивать себя

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

Не оценивай себя. Дай это другим. Не думай о результатах, а только о средствах достижения. Правда, негативный результат — это тоже уровень достижения. К этому надо быть готовым. Учись принимать неудачи достойно — исправляя ошибки.

Учитесь переключаться на другие задачи. Развивая себя можно легко впасть в скуку. Всегда имейте пару альтернативных дел, в которые можно уйти с головой, но при этом отдохнуть от саморазвития. Отдых — это важная часть успеха в работе. Усталому быстрее становится скучно, обидно за себя. Умение отдыхать — это практика наполнения себя энергией и вдохновением. Скучный и усталый неудачник никому не нужен. Отдыхай, чтобы круто работать.

Выброси из головы идеалы. Часто люди фанатеют с крутых спортсменов, иллюстраторов или дизайнеров. Это высокие ориентиры, которые нужны, но совершенно излишне их сравнивать с собой, пока вы только приступаете к работе над собой. Позже за них возьметесь.

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

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

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

Возможно, это будет просто дисциплина, умение соблюдать график, соблюдать режим. Это качество может здорово помочь во всех областях жизни, но осознать это можно только широко понимая, как все вокруг взаимосвязано.

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

Всегда будут люди вокруг, которые тебя отговорят от перемен, от усилий, от упорной работы. Они скажут, что вам и так хорошо. На самом деле они не хотят, чтобы ваш успех здорово колол их самолюбие и доказывал им очевидное — ты смог, а они нет.

Рисуйте план. Именно рисуйте, линии, этапы, визуализируйте образы, создавайте как гиперболы, так и точные и измеряемые параметры. Визуальный образ линии, календаря, круга в котором вы из прошлого на старте можете встретить себя развитым и изменившимся на финише задуманного вами цикла. Это отличные истории о себе. Нужно видеть план, держать его для анализа. Часто проделанная работа не видна, поскольку она не сопоставляется с планом, а прошлое быстро забывается.

Хорошо разберись в себе. Играй на своих недостатках. Опаздываешь? — Назначай себе встречи за час до начала и спокойно опаздывай на эту «обманку», полюби это неторопливое чувство, что ты не торопишься, но и не опаздываешь. Тебе важна личная оценка себя или признание твоих заслуг окружающими? Если ты достигнешь своей цели полностью, то подумай, как ты будешь себя чувствовать, но главное — как это может повлиять на твои отношения с людьми вокруг.

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

Кратко про решение

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

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

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

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

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

Идеальное решение, когда инструмент сделает всю работу сам: сфотографирует, укажет геопозицию, поможет определиться с классификацией проблемы, чтобы пользователю осталось только добавить краткий комментарий.
Как сделать все эти шаги минимальными усилиями... конечно же при помощи дополненной реальности!
Наводим камеру на неправильно припаркованный автомобиль, ставим виртуальный пин, тем самым указываем точное местоположение проблемы, камера телефона угадывает, что это автомобиль, предполагает доступные варианты ошибок: при этом пользователь не видит огромный чеклист всех возможных вариантов, а лишь один или парочку близких по смыслу категорий; пользователь выбирает подходящую ошибку тапая по экрану.
Таким образом, после выбора нужной категории ошибки, телефон уже знает её геопозицию, автоматически делает фотографию и помогает определиться с категорией, то есть 3 из 4 обязательных шагов заполняются автоматически. Пользователю остается только написать комментарий к ошибке, а ещё лучше, сказать его голосом.
За счет того, что большую часть нагрузки берет на себя телефон, всё внимание наблюдателя может быть сосредоточено на исследуемой улице.

Но что делать с проблемами, которые не укажешь одной только точкой? Например, отсутствие тротуара на протяжении всей улицы, или область с повышенным трафиком пешеходов?

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

Боязнь простых решений

Я часто замечал, что люди недоверчиво относятся к простым решениям.
Например, приносишь дизайн заказчику, а он: "Слишком просто, давайте добавим чего-нибудь этакого!"
Добавляют. Проект стартует, а ухаживать за "чем-нибудь этаким" довольно сложно.

Бояться надо сложных решений.
Любое решение, в котором есть куча "если" — бомба замедленного действия.

"Мы предусмотрели в проекте 500 экранов! Если так, то такой экран и логика.
Если этак — такой экран и логика. Всё очень индивидуально."

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

Если вместо 500 экранов можно сделать 100 — надо делать 100. Пусть потеряется где-то индивидуальность, но решение не будет протухать.
У нас в Велвике такой принцип — если решение кажется сложным, то мы останавливаемся, отматываем назад и смотрим, где можно упростить.
Простое работающее решение придумать сложнее, чем нагородить кучу "если".

В общем, надо стремиться к упрощению.

Чтобы обратиться к какому-либо узлу, его сначала надо найти

Для этого есть разные методы, но в современном прототипировании чаще всего применяются два метода:

let el = document.querySelector(selector)
и
let elems = document.querySelectorAll(selector)

Оба метода получают на вход CSS-селектор элемента. Например:

let el = document.querySelector(".someClass b");

Отличие их в том, что querySelector вернёт один узел, который попался первым, а querySelectorAll вернёт список всех узлов на странице, соответствующих селектору.

Список узлов очень похож на массив, но не является массивом. Например, у него, как и у массивов, есть метод forEach, при помощи которого можно перебрать один элемент за другим. Но у него нет метода map, который позволяет преобразовать один массив в другой, применив к каждому элементу функцию-колбэк.

Если же вам всё-таки нужен метод map, то вы можете преобразовать список узлов в массив при помощи конструкции [...nodeList]:

let arr = document.querySelecroAll("a");
[...arr].map(el => el.innerText);

Подробнее в видео: https://youtu.be/KIBv7QMToP4
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO