Принципы мобильного дизайна

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

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

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

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

Законы природы

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

Ниже я расположил дизайнерские установки следующим образом (от высшего к низшему):

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

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

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

Разработка принципов

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

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

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

Создание принципов дизайна

Снова и снова я повторял одни и те же фразы, чтобы объяснить те или иные дизайны, паттерны, или отговорить от использования каких-то дизайнерских идей в работе.

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

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

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

В дизайне не должно присутствовать какое—либо мнение.
Не все данные вам подходят.
Не существует такого понятия как «нормальный пользователь».
Подключайте свои сильные стороны.
Пусть компьютеры занимаются компьютерной работой, а люди — человеческой.
Никогда не создавайте заново то, что можно позаимствовать или на что можно сослаться.
Делайте системы гибкими.
Относитесь уважительно к информации, предоставленной пользователями.
Создайте список заданий в порядке важности и следуйте ему.
Сначала займитесь базой.
Радуйте тех, кого сможете, но не вызывайте ни у кого гнев.

1. В дизайне не должно присутствовать какое—либо мнение

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

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

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

Как сказал Ричард Фейнмен, «первый принцип заключается в том, чтобы не одурачить самого себя; а самого себя одурачить проще всего». Чтобы одновременно ослабить влияние своей точки зрения и подключить в работу всю команду, я созываю всех своих коллег, и мы вместе пытаемся принять правильные решения, основанные на имеющихся данных. Я прошу их поделиться своим мнением, и таким образом мы можем провести грань между собственными точками зрения и дизайном.

2. Не все данные вам подходят

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

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

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

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

Не спешите с выводами. Будьте открыты новым возможностям и необычным корреляциям.

3. Не существует такого понятия как «нормальный пользователь»

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

Люди любят инфографику, ведь гораздо легче читать что-то в виде карт, таблиц и графиков, верно? По крайней мере, некоторые точно любят. Но обычно понимание людей разнообразных таблиц и карт происходит по так называемой колоколообразной кривой. Большинство ценит графические или пространственные изображения, а некоторые только их и понимают. Другие понимают только текстовые диаграммы, таблицы и списки. Учитывая все это, я всегда использую и то, и другое. В качестве примера могу привести Google Maps: посмотрите, как они одновременно выдают списки близлежащих ресторанов и показывают те же рестораны на карте.

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

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

4. Подключайте свои сильные стороны

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

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

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

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

Пользователей исправить сложнее всего. Смиритесь с этим, и не пытайтесь их изменить.

Для какой бы системы вы ни создавали дизайн, вашей самой большой проблемой будут оставаться пользователи. Пользователей исправить сложнее всего. Смиритесь с этим, и не пытайтесь их изменить. Обучение или FAQ иногда предпринимают попытки изменить пользовательское поведение, чтобы люди вели себя так, как от них этого хочет система. Я же глубоко убежден, что этого следует избегать. Успешные индустрии наоборот обращаются и прислушиваются к пользовательским интересам, а не меняют их взгляды, чтобы заставить людей желать какой-то новый продукт.

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

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

6. Никогда не создавайте заново то, что можно позаимствовать или на что можно сослаться

Если вы работаете с дизайном веб—сайта или приложения для ПК, то формы обратной связи или формы для жалоб и предложений лучше всего будет создать самим. Вы создаете поля, пользовательский интерфейс (UI), ссылки, которые будут соединяться с вашим сервером, и т.д.

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

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

Карта, созданная клиентом, представляла собой пошаговые указания, в каком направлении следует двигаться, и другие подобные вещи. Я пробежался по жалобам пользователей и понял, что никому это не нужно. Они хотели видеть карту в том виде, в каком они привыкли ее видеть в любимых навигационных приложениях. Каких именно — нас это не интересовало. Им удобнее пользоваться тем, что им знакомо. Поэтому мы изъяли из приложения всю навигацию и сделали ссылку на навигационное приложение. Таким образом, не нужно было создавать что-то новое и постоянно поддерживать это. Жалобы прекратились, а количество пользователей увеличилось.

7. Делайте систему гибкими

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

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

Обычно я использую данный принцип при работе с пользовательским интерфейсом. Там вы не найдете деления на размеры окна просмотра или на версии операционных систем (ОС), потому что я не разрабатываю попиксельно страницы в Sketch или Photoshop. Вместо этого я работаю над техническими характеристиками систем. Большинство моих чертежей по сути дела являются местозаполнителями, значение которых я поясняю так: «Зависит от того, что стоит по умолчанию в ОС».

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

8. Относитесь уважительно к информации, предоставленной пользователями

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

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

Никогда и ни за что не давайте введенным данным исчезнуть. Я бы даже еще раз напомнил о существовании очень удобных иконок Х для удаления информации в поле ввода. Если пользователь хочет, к примеру, нажать Search, а вместо этого нажал Delete, уже нельзя будет ничего сделать. Использовать же Backspace, удаляя по одному значку, возможно, будет для кого-то утомительно, но большинство пользователей смогут с этой помощью обезопасить себя от потери данных.

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

9. Создайте список заданий в порядке важности и следуйте ему

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

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

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

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

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

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

10. Сначала займитесь базой

Хотели бы добавить в ваш дизайн виртуальную реальность (ВР), перетаскивание файлов на главный экран и искусственный разум (ИР)? Отлично. Сможет ли содержимое воспроизводиться на всех устройствах? Смогут ли люди листать с помощью мыши, пера и пальца? Смогут ли они увидеть ссылки и без проблем по ним переходить? Смогут ли пользователи понять, что означают иконки, или вам придется их подписывать? Удивляйте, когда это возможно, но никогда не заставляйте пользователей догадываться о том, что вы имеете ввиду или что собираетесь сделать.

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

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

Научитесь понимать ваших пользователей, ваши системы и как они работают. Очень часто самые хорошие решения — самые простые.

11. Радуйте тех, кого сможете, но не вызывайте ни у кого гнев

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

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

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

Конечно, иногда бывает так, что ничего нельзя сделать. Я знаю много клиентов, для которых все изменения в практике деловых отношений предрешены людьми гораздо выше меня по статусу. А еще могут быть различные нормативные ограничения. По крайней мере, постарайтесь объяснить, почему необходимо что-то исправить. Желательно это делать на английском и как можно раньше, а если возникнет необходимость — приврите. Вы можете все исправить, как минимум упростив или приукрасив то, что все портит. Плохой back—end? Установите промежуточное ПО и прокэшируйте данные. Возникли проблемы с региональными дестрибьютерскими соглашениями? Создайте центральный eStore, лишним не будет, и сделайте рассылку дистрибьютерам.

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

А какие принципы у вас?

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

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