Руководящие принципы пользовательского интерфейса Readymag

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

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

Что особенного в пользовательском интерфейсе Readymag? Трудно сказать наверняка. Я попытался разобрать его на небольшие фрагменты — несколько принципов проектирования, о которых вы узнаете из этой статьи». Стас Аки, продуктовый дизайнер

1. Интерфейс — это общение.
2. Интерфейс должен быть понятным.
3. Интерфейс должен быть привычным.
4. Интерфейс должен быть надежным.
5. Интерфейс должен выглядеть эстетично.
6. Хаос — главный враг дизайнера интерфейсов.
7. Лучший интерфейс — это отсутствие интерфейса.

Интерфейс — это общение

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

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

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

Интерфейс должен быть понятным

1. Крайне важно, чтобы каждый элемент выполнял узнаваемую функцию. Дизайнер интерфейса всегда должен задаваться вопросом, как пользователь узнает о том, что действие возможно.
2. Предпочтительно, чтобы пользовательский интерфейс был понятным (т.е. простым настолько, чтобы не нужны были никакие учебные пособия или службы поддержки).
3. Все функции в интерфейсе должны быть доступны для обнаружения, без необходимости в посторонней помощи.
4. Интерфейс должен информировать пользователей об их действиях и любых изменениях.

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

5. Идеальный пользовательский интерфейс для графического редактора — WYSIWYG (What You See Is What You Get — То, что вы видите, то вы и получаете).
6. В физическом мире если вы хотите поменять расположение объектов, вы просто перемещаете их руками. Вы не идете в другую комнату, чтобы нажать там на кнопку, а потом не возвращаетесь обратно, чтобы увидеть результат. В цифровом пространстве результат действий пользователя тоже должен быть наглядным; без переключения между панелями, окнами и режимами предварительного просмотра.

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

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

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

Интерфейс должен быть привычным

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

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

• Согласно мнению Джефа Раскина (прим. специалист по компьютерным интерфейсам, автор статей по юзабилити и книги «The Humane Interface», сотрудник № 31 фирмы Apple Computer, наиболее известен как инициатор проекта Макинтош в конце 70-x) такие качества, как соответствие поставленной задаче и единственный способ ее выполнения ведут к тому, что пользовательский интерфейс становится привычным. 
• Пользователи не должны теряться среди множества элементов. Джеф Раскин считает, что чем «монотоннее» интерфейс, тем быстрее он становится привычным.
• Избегайте альтернативных режимов, которые могут отвлечь внимание пользователя. И если они у вас есть, убедитесь, что их назначение четко определено.

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

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

Интерфейс должен быть надежным

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

Интерфейс должен выглядеть эстетично

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

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

4. Чтобы помочь в решении проблем, инструмент проектирования также должен побуждать дизайнеров исследовать неизвестное и создавать что-то новое. То, что пользователь никогда не видел раньше.
5. Инструмент дизайна должен вдохновлять на творчество. В противном случае это не инструмент проектирования.

Хаос — главный враг дизайнера интерфейсов

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

• Это приводит к ошибкам со стороны разработчиков. Система становится менее надежной.
• Для пользователей обучение и взаимодействие с интерфейсом становятся более трудоемкими. Творческий процесс замедляется.

3. Упрощайте. Хотя простота — один из самых важных принципов хорошего дизайна, ей по-прежнему не уделяют должного внимания.

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

4. Простота не возникает сама по себе. Она должна быть спроектирована.

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

5. Избавьтесь от всего лишнего.
6. Добавьте несколько функций одному элементу.

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

7. Ищите универсальные решения для решения нескольких задач.

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

Лучший интерфейс — это отсутствие интерфейса

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