31 октября 2013, 16:47

Технолог-дизайнер в жизни

В Гетвеаре я не только ведущий разработчик, но и ведущий дизайнер, представьте себе! Мой сериал-фантазия «Технолог — тоже дизайнер» материализовался.

Не всё даётся быстро и просто, но мне нравится, сдаваться не собираюсь.

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

Два месяца назад чуть лучше:

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

Когда всё хорошо, он молчит:

Но это бывает редко, люди сделаны не по Левайсу, так выглядит допустимое отклонение:

Бывает всё совсем плохо, тогда надо написать человеку письмо и убедиться, что он не измерил себя линейкой:

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

Когда появились проверки для остальных колонок, дизайн перестал работать. Красные плашки над полями ввода стали сжирать весь экран:

В таком месиве сложно разобраться что к чему.

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

Теперь, даже когда всё ужасно с мерками, интерфейс не взрывается.

Поделиться
Запинить
Ctrl
5 комментариев
Вадим Макеев

Левис же, какой Ливайс :(

Артём Поликарпов

Что даже нос у смайлка забыл :-(

Сергей Дроганов

Бессмысленный текст «Auto check: error». Тем более трижды повторенный. Напиши что-нить типа «Measurement warning — it looks like... please check this and that». Это больше похоже на инструкцию для оператора.

Артём Поликарпов

Все пояснения у полей. Этот текст нужно убить, согласен. Саша Карпинский подсказал, что нужно просто кнопочку красной сделать.

Сергей Дроганов

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

Нужно оставить кнопку синей, а слева указать количество предупреждений в каком-нить желтом тултипе.

Approve body < with 7 warnings |

Опять же, со стороны больше похоже, что ты имеешь дело с предупреждениями а не ошибками. Кажется что error не к месту употребляется.

Дмитрий

Разрешите поинтересоваться стилем ворнинг сообщения в последнем варианте: почему выбран именно темный фон с белым шрифтом?
Не претендую на абсолют, но:

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

Это стандартный тултип из Бутстрапа 2, не более.

Артем

Реализовано явно лучше, чем было. Но как по мне, так это тривиальные задачи для фронтендера. Бутстрап верстка + немного JavaScript'а.

Популярное