Как начать разработку дизайна экрана и 8 принципов, которые следует учитывать

Вероятно, самый распространенный вопрос о UX — с чего начать дизайн экрана и на какие принципы нам следует обратить внимание?Проектирование экранов начинается с эскизов. Мы в нашей UX-компании начинаем с быстрых бумажных эскизов, затем создаем каркасы и кликабельные прототипы, тестируем и повторяем их и, наконец, добираемся до идеальных, подробных планов дизайна. В этой статье мы приводим 8 наиболее важных правил, которые необходимо учитывать при проектировании экранов.

Восемь основных принципов дизайна экрана:

1. Три вопроса, на которые должны дать ответ все экраны
2. Важность визуальной иерархии
3. Копия является частью дизайна
4. Условности важны, мы должны их использовать
5. Создавая дизайн для мобильного телефона, мы создаем дизайн и для наших рук.
6. Обратите внимание на соотношение эффективной площади поверхности.
7. Стремитесь к простоте и прозрачности
8. Будьте осторожны с анимацией и движением.

Давайте рассмотрим их более подробно.

1. Три главных вопроса дизайна экрана

Когда мы попадаем на новый экран, мы ищем ответ на три вопроса:

• Где я?
• Что я могу здесь сделать?
• Как я могу двигаться вперед?

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

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

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

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

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

Пользователи обычно находят ответ на третий вопрос («Как мне двигаться вперед?») в виде кнопки с призывом к действию. Они не просто задают этот вопрос, уже достаточно наигравшись на странице и желая двигаться вперед – полезно и по прибытии посмотреть, куда мы можем двигаться дальше.

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

2. Визуальная иерархия и пользовательский опыт

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

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

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

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

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

Как создать визуальную иерархию?

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

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

Мы можем выделить определенные элементы, такие как размер, цвет, положение, текстура, форма и ориентация.

Исследования глазной камеры показали, как именно мы сканируем страницу. Когда мы попадаем на страницу, мы просматриваем ее дважды слева направо в верхней части страницы, а затем прокручиваем вниз. Это называется Nielsen F, как показано на изображении тепловой карты ниже:

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

3. Копирайтинг — часть процесса разработки

Многие дизайнеры считают, что написание текстов не входит в их обязанности, но это не так. Копирайтинг — это часть дизайна.

Создание эскиза копии

В процессе проектирования экрана лучший метод написания текстов похож на тот, что используется при рисовании: сначала нам нужно сделать эскизы. Другими словами, вам следует записать как минимум 6–8 вариантов текста.

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

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

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

Микрокопия — часть дизайна экрана

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

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

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

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

Создайте руководство по стилю

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

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

Микрокопия – это всего лишь несколько слов, но они оказывают огромное влияние. Именно поэтому многие считают, что UX-письмо — это новая суперспособность.

4. Используйте соглашения!

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

Соглашения для лучшего взаимодействия с пользователем

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

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

Инновации против условностей

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

На иллюстрации показаны старый и новый дизайн экрана Amazon. Обратите внимание, сколько элементов интерфейса мы используем до сих пор (ссылки, вкладки, окно поиска, корзина, раскрывающееся меню).

5. Разрабатывая дизайн для сенсорных экранов, мы разрабатываем дизайн и для наших рук (тоже)

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

Особенно нам следует обращать внимание на размер и движение наших пальцев: до чего мы можем дотянуться и когда можно безопасно нажать на определенные кнопки?

Можем ли мы безопасно нажать на кнопку?

Начнем с последнего. Когда мы нажимаем на что-то, наш палец занимает довольно большое пространство на экране. Чтобы чувствовать, что нажимать безопасно, у нас под пальцами при нажатии должен быть только один элемент. Если наш палец закроет больше элементов, мы почувствуем дискомфорт, потому что никогда не сможем быть достаточно уверены в том, на что нажали.

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

Могут ли наши пальцы дотянуться до кнопки?

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

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

Другая позиция — держать телефон обеими руками. Таким образом, мы в безопасности благодаря руке помощи, но взамен у нас не всегда есть возможность держать его обеими руками.

Третий вариант: телефон держат обе руки одновременно и одновременно используют оба больших пальца.

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

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

Увеличение размера экрана

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

Следовательно, дизайном экрана необходимо управлять из нижней половины экрана. Часто используемые функции не должны появляться вверху экрана.

6. Коэффициент эффективной площади поверхности

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

Цель игры - посмотреть, какой элемент контента и в каком виде появляется на экране и какое место он занимает. Обратите внимание, насколько мала эффективная площадь поверхности на данном экране! Мы выделили серым цветом области на странице новостей, показывающие контент, который не является приоритетным.

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

7. Простые и понятные экраны

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

Однако достичь такой простоты в дизайне экрана непросто. В дизайн-проекте новые идеи и новая информация должны появляться в интерфейсе одна за другой. Может случиться так, что разные отделы компании (или разные участники проекта) считают важными разные вещи.

Ответственность дизайнера

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

Но что нужно, чтобы все это стало возможным? Прежде всего, ясные бизнес-цели и очень четкое представление о том, какова цель данного продукта. Если они у нас есть, интерфейсами можно будет легко управлять. Тогда также будет проще определить, какие элементы важны, а какие не очень.

Определение целей

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

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

Пример определения целей пользователя

Пример: на следующем рисунке показаны две разные версии экрана мобильного приложения.

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

Обратите внимание на разницу между двумя экранами и на то, как это удалось сделать на правом:

8. Движение и анимация

Анимация пользовательского интерфейса — одна из самых спорных областей экранного дизайна. Многие люди просто хотят использовать анимацию, потому что она выглядит круто. Я не рекомендую этого делать. Другие используют ее, чтобы рассказать о том, как работает интерфейс, или оказать некоторое эмоциональное воздействие на пользователей.

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

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

Людей легко отвлечь движущимися объектами от их первоначальных целей. Поэтому вы должны быть очень осторожны с движением и использовать его целенаправленно. Каждая анимация должна быть осмысленной.

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

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

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

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

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

Автор: Давид Пастор — основатель и генеральный директор UX-студии. Автор книги "Дизайн продукта", спикер TEDx, один из списка Forbes 30 до 30. С энтузиазмом относится к самоуправляемым командам, новым технологиям и дизайну, ориентированному на человека.