Блог Андрея Ереса

Не серите в интерфейсах

Мне скинули ссылку на файлообменник. Открываю, а там…

Я долго не понимал, то ли сайт не подгрузился, то ли мешает всплывающее окно с рекламой. Оказалось, просто всё серенькое. Серый текст на сером фоне с серенькой кнопочкой. Не делайте так, пожалуйста.

Кажется, люди берутся за серый в двух случаях:

  • Хочется сделать модненько.
  • В макете уже каша стилей, приходится как-то разделять слои.

Модненько делается и без серого, а разделять слои надо на картах и схемах, вовсе не на сайтах.

Случаи, когда серый текст оправдан

Показать неактивные элементы интерфейса:

Написать подсказки в поле формы:

Написать подсказки в пустом состоянии страницы:

Пишите в коменты, если что-то забыл.

Решать не задачу, а проблему

История раз

С утра слышу — дети дерутся. Старший кричит: «Отдай, мне надо зубы почистить!». Это младшая забрала тюбик с пастой и не хочет отдавать.

Я: «Тебе же нужен не тюбик, а зубы почистить». Прошу младшую намазать пасту на щётку. Старший чистит зубы, младшая играет с тюбиком. Все довольны.

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

История два

Я сам оказался не умнее.

Делали страницу: сверху заголовок, под ним фильтры в одну строку, потом список. При фильтрации признак выносится в заголовок. От этого заголовок разрастается на несколько строк, и фильтр скачет.

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

Что было неверно. Надо было решать уравнение «Растущий заголовок не сдвигает фильтр», а не «Растущий заголовок умещается в одну строку».

Чек-лист самому себе на будущее

  1. Получить задачу.
  2. Разобраться в проблеме.
  3. Уточнить задачу.
  4. Решить.

Почему я туплю зимой перед входом в торговый центр

С началом зимы торговые центры Волгограда закрывают часть автоматических дверей и заставляют посетителей ходить змейкой. Это выглядит примерно так.

Змейка на входе в торговый центр

Чтобы посетители не ломились в закрытую дверь, администрация центра вешает табличку с надписью «Вход» и стрелкой на открытую дверь.

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

Вход в «Акварель», Волгоград

Пришло время помочь мне не тупить на входе.

Пойду от обратного: сделаю плохое объявление. В заголовке обращусь к посетителям. В тексте объясню — дверь закрыта, надо идти к другой.

Заголовок непонятный, текст неинтересный

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

Сделаю объявление получше. Напишу в заголовке, что объявление о входе. Текст оставлю тот же.

Заголовок понятный, текст неинтересный

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

Тут меня упрекнут за глупый заголовок: зачем писать просто «Вход», надо писать «Дверь закрыта» или «Вход в другую дверь». Это верное замечание. В этом суть проблемы.

Заменю прямоугольник текста на прямоугольник стрелки.

Заголовок понятный, стрелка понятная

Тут вроде все хорошо. Но это объявление почти не отличается от предыдущего. Посетители видят надпись «Вход», подходят к двери. Дверь не открывается. Посетители замечают стрелку и идут к другой.

Беда в заголовке. Люди замечают его первым, но он несет ложную информацию. Можно попробовать улучшить заголовок: «Вход в другую дверь». Но это лишнее. Самое простое и лучшее средство — убрать заголовок совсем.

Заголовка нет, стрелка понятная

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

Простите за корявый фотошоп ;-)

Контроль + Альт, Гугл-док и Виндовс 10

У меня была проблема.

Чтобы оставить комментарий в Гугл-доке, надо нажать сочетание Контроль + Альт + M. На русской раскладке все нормально, на английской — вместо комментария в текст вставляется буква μ.

Исправил так. Нажал на обозначение раскладки в правом нижнем углу и выбрал «Настройки».

Щелкнул на «Английский язык» и выбрал «Параметры».

У меня стояла раскладка «США Международная». Проблема в ней. Нажал «Добавить Клавиатуру», выбрал «США».

Удалил раскладку «США Международная».

Все. Теперь на любой раскладке нормально вставляется комментарий в Гугл-доке.

Как заказать запчасти в Школе редакторов

В школе редакторов дали задание: подготовить форму для заказа автозапчастей.

Я придумал аудиторию и сценарий.

Форму заполняют люди, которые разбираются

  • в интернете: они отправились за деталями не в магазин, а на сайт;
  • машинах: они заказывают детали сами, а не через мастера.

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

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

Получилось две формы: заполненная и пустая.

Что сделал точно плохо:

  • пустую форму: дизайн начинал с заполненной формы, в пустую просто добавил текст;
  • модуль с названием машины: марка Мицубиси уже не влезет.

В форме есть ссылка на подбор по параметрам машины, но этот сценарий я не продумывал.

Спасибо за советы Вадиму Юмадилову.

Задание сделал в Школе редакторов.

Ранее Ctrl + ↓