Сим постом хочу призвать вас внимательнее относиться к иконкам человечка в ваших приложениях.

Вот что находит «Наун-проджект» по запросу user:

Самый правый в средней строке хоть на что-то похож.

Такая жесть повсюду вокруг нас. Яндекс-музыка:

Исполнитель имеет признаки человека, но пользователь — это почему-то круг с полукругом.

Виндоус:

Гайдлайны Андроида предписывают ставить жуткую иконку. Звучат слова human и best:

Ну не знаю. По-моему, не хьюман и не бест.

Любое упрощение имеет свои пределы. У Эпла головы людей похожи на головы — есть уши, причёска (слева):

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

Для «Секьюриджа» я нарисовал клёвых ребят с причёсками (посередине):

Даже на пропуске (справа снизу) у головы и плечей человеческая форма.

Иногда хочется, чтобы человек на иконке не имел пола. Но даже в этом случае можно найти нейтральную причёску. Вариант Серёги Чикина:

Читаются мальчик и девочка, но если оставить только одного персонажа, вполне можно и использовать независимо от пола.

Ещё в программах часто пол можно угадать по имени и подсунуть подходящую иконку.

Для «Бёрдвью» мы когда-то придумывали генератор юзерпиков для тех, кто не загрузил фотографию:

Получались всякие такие:

А вот иконка «Иконверка»:

Вот ещё. Хоть какая-то форма:

Правда, он даже если просто круг рисует, получается хорошо:

Но тут снова масштаб почти всего тела. И прекрасно подобраны пропорции и форма остального тела.

Симпатичный чувак с Иконфайндера:

А у «Вконтактика» — фигня:

Короче. На иконке человека должен быть человек, а не снеговик.

В сентябре выступил на конференции «ФДКонф» в Минске. Рассказал об обратной связи в интерфейсе на английском языке. А вот уже и видео готово:

Умники всё время победоносно приводят примеры хорошего дизайна, в котором нарушаются правила: «А вот крутой плакат, где не соблюдается правило внутреннего и внешнего! А вот удобный сайт, где ссылки не подчёркнуты! А вот красивая и понятная таблица с чересполосицей!»

Это как прийти на занятие по карате, и начать рассказывать: «А я видел, как во дворе один чувак другого сильно побил, не крича „кия“!» Причём рассказывать с искренней убеждённостью, что тренер не в курсе, что так бывает.

Задача преподавателя — научить и повысить разрешение. Для этого и нужны законы и правила. А если объявить: «Можно делать всё, что угодно, лишь бы был хороший результат», будет честно, но совершенно бесполезно.

См. также:

• Секрет дизайнерских правил
• Делать, как говорят (Женя Арутюнов)

Проектировщики часто ставят в формах поле «Имя», а на вопрос «зачем?» отвечают: «Чтобы можно было обратиться к клиенту по имени».

Приятно же, когда к тебе обращаются по имени. Приходишь в кофе-бар, а тебе: «Привет, Илья» — и делают флетвайт, не спрашивая про сахар и сироп. Чувство, что другим на тебя не наплевать, согревает. Хочется ходить в такой кофе-бар. Обращение по имени помогает удержать клиентов.

Да нихрена! В Старбаксе тоже обращаются по имени. У тебя его спрашивают, переспрашивают, потом пишут на стаканчике, и потом кричат. Это такой стандарт. Всем плевать, как тебя зовут. Обращение по имени не влияет на удержание клиентов.

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

Уберите лишнее поле и просто обращайтесь на вы: «Здравствуйте, вы только что сделали заказ на сайте таком-то...». «Здравствуйте, вы вчера писали в поддержку того-то по такому-то вопросу». Лучше пусть оператор искренне попытается помочь, а не по имени из шпаргалки обращается. При этом если в ходе разговора я назову своё имя, а вы его запомните, это будет хорошо.

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

Два цвета ни к чему:

Три кегля ни к чему:

Особенно плохо, когда разные кегли встречаются в одной строке:

Выделять цифры ни к чему. Нужно было просто вынести «Заправить» за скобку:

Два кегля, да ещё и едва отличаются — почти, но не совсем:

Клинический случай:

Простое правило: одно предложение — один стиль.

Есть такой элемент интерфейса — аккордеон. Это когда в вертикальном списке есть распахивающиеся секции:

Из работы студента школы дизайнеров

Этот элемент очень неудобен.

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

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

На телефоне, где экран маленький, с аккордеоном особенно тяжело. Недаром такого элемента нет среди стандартных элементов интерфейса Эпла и ни в одном их приложении.

Не используйте аккордеон.

Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.

Вот случайная фотка с моего телефона — какая-то питерская табличка:

Почему она такая уродская? Потому что в ней всё выровнено по центру.

Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:

Если кроме стола есть ещё диван, то поставить их оба посередине уже будет трудно. Может, только в очень большой комнате. В вёрстке с этим чуть проще из-за того, что текст обычно имеет форму полосок. Две полоски посередине — нормально:

Поставить ещё что-то посередине — сложно. Но можно поставить посередине стен. С одной стороны — тумбочка с телевизором, чтобы удобно смотреть с дивана, с другой — книжный шкаф:

Но всё, пора остановиться. На питерской табличке по центру стоит всё, и это ад:

Люди, незнакомые с дизайном, любят выравнивать всё по центру — им кажется, что это наиболее простой способ что-то оформить. Но на самом деле наоборот: сверстать что-то с центровкой намного труднее, чем расставив по углам.

Вы можете сказать: но ведь книжные титулы часто оформляют с центровкой. Да, в классическом стиле титулы порой делали весьма многоэтажными. Вот фотка с курса Игоря Штанга по вёрстке — смотрите как интересно слева:

Или вот книжка из инстаграма «Носков поэта»:

Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.

Выравнивайте всё по левому краю:

Так форма текста уже начинает хоть чуть-чуть дружить с форматом.

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

Теперь у нас два прямоугольника.

Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:

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

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

Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.

А ещё можно так:

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

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

Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:

Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:

Или кладёт контрастную плашку:

Или делает полупрозрачную плашку, но размывает фотографию под ней:

Это всё костыли: в результате хуже видно и фотку, и текст.

Ставить текст на фотографию можно, когда она специально сделана или подобрана для этого. То есть на ней есть чистые места — голубое небо, тёмная ночь или другой равномерный фон:

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

Здесь нормально читается всё, что выше горизонта в зоне расфокуса:

Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:

Правило: если фотография не подходит для размещения текста на ней, то размещать текст на ней не стоит. Поставьте текст под фотографией. Следствие: если вы не контролируете фотографию (скажем, её загружают пользователи вашего сайта), то ставить на ней текст — плохое решение.

Читайте также секрет дизайнерских правил.

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

Дизайнеры, которые уже научились этому, иногда допускают такую ошибку:

Студенческая работа в Школе стажёров

Они делают фактоиды слишком похожими на товары. Из-за этого оба эффекта ослабляются: вёрстка выглядит однообразнее, а фактоиды не привлекают внимание.

Правильно — делать фактоиды совсем другими, чем товары:

Гетвеар