Руководитель сервисов Яндекс.Карты и Яндекс.Метро Юрий Подорожный рассказывает, как избежать типичных дизайнерских ошибок и как внимание к деталям может приятно порадовать пользователей, сделав ваше приложение особенным.

1. Заглушки

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

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

2. Пустые экраны

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

3. Состояние выделения

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

4. Обработка ошибок

Допустим, вы всё здорово сделали, но у пользователя пропал интернет. Разработчик в этой ситуации показал бы экран «Alert», в котором будет указан код ошибки и написано что-то невнятное, вроде «Невозможно» загрузить.

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

5. Локализация

На русском и английском языках ваше приложение может выглядеть хорошо, но при переводе, например, на финский всё разъезжается. На это натолкнулись, в частности, в Apple. В русской версии iTunes вместо маленькой аккуратной кнопки с коротким словом «Buy», которая и была на красивых макетах дизайнеров приложения, появилась огромная растянутая кнопка «Купить приложение», и всё поехало. Она перекрывала рейтинг, не читалось до конца название производителя. Надо помнить о таких опасностях и закладывать в дизайн вероятность, что слова могут быть длиннее или короче, или могут появиться значки над буквами, которых нет в русском или в английском языках.

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

6. Общение с командой

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