Правила оформления приложений: Оформление приложений по ГОСТу в 2019 г (образец)

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

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

1.1. Вход

1.2 Вход через facebook

1.3 Регистрация

1.3.1 Имя

1.3.2 Изображение профиля

1.3.2.1 Захват с помощью камеры

1.3.2.2 Выберите из галереи

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

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

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

Поскольку устройства становятся все более чувствительными к давлению, вы обнаружите, что «иногда» можно успешно обойти рекомендуемый Apple интервал между интерактивными элементами 44 × 44 пикселей.

Также читайте: Сколько стоит создание приложения?

Хотя правило трех касаний было отброшено, когда дело доходит до дизайна UX, вы обнаружите, что все же лучше уменьшить количество нажатий, необходимых для перехода от точки А к Пункт Б. В особенности потому, что это заставит вас задуматься: «А действительно ли нам нужен именно этот экран, чтобы добраться до точки Б?» Это поможет вам убрать ненужные экраны из вашего приложения.

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

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

Это секрет отмеченного наградами дизайна приложений. Это причина того, почему проекты Peerbits так успешны.

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

Рекомендации по проектированию пользовательского интерфейса: 10 практических правил

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

10 рекомендаций по дизайну пользовательского интерфейса Нильсена и Молиха

Якоб Нильсен, известный консультант по веб-юзабилити и партнер Nielsen Norman Group, и Рольф Молич, другой известный эксперт по юзабилити, составили список из десяти руководств по дизайну пользовательского интерфейса в 1990-х годах. Обратите внимание на то, что эвристика Нильсена и Молиха во многом пересекается с «восемью золотыми правилами» Бена Шнейдермана.Эти 10 практических правил являются продолжением восьми золотых правил Шнейдермана через 4 года после первой публикации Шнейдермана.

• Просмотр статуса системы . Пользователи всегда должны быть проинформированы о системных операциях с легким для понимания и хорошо заметным статусом, отображаемым на экране в течение разумного периода времени.
• Соответствие системы и реального мира . Дизайнеры должны стремиться отражать язык и концепции, которые пользователи найдут в реальном мире, в зависимости от того, кем являются их целевые пользователи.Представление информации в логическом порядке и совмещение ожиданий пользователей, основанных на их реальном опыте, снизят когнитивное напряжение и упростят использование систем.
• Контроль и свобода пользователя . Предложите пользователям цифровое пространство, где возможны обратные шаги, включая отмену и повтор предыдущих действий.
• Согласованность и стандарты . Разработчики интерфейсов должны гарантировать, что и графические элементы, и терминология поддерживаются на одинаковых платформах.Например, значок, представляющий одну категорию или концепцию, не должен представлять другую концепцию при использовании на другом экране.
• Предотвращение ошибок . По возможности проектируйте системы так, чтобы потенциальные ошибки были сведены к минимуму. Пользователи не любят, когда их призывают выявлять и устранять проблемы, которые иногда могут выходить за рамки их уровня знаний. Устранение или отметка действий, которые могут привести к ошибкам, – два возможных способа предотвращения ошибок.
• Признание, а не отзыв. Сведите к минимуму когнитивную нагрузку, сохраняя релевантную для задачи информацию на дисплее, пока пользователи исследуют интерфейс. Человеческое внимание ограничено, и мы способны одновременно поддерживать только около пяти элементов в нашей кратковременной памяти. Из-за ограничений кратковременной памяти дизайнеры должны гарантировать, что пользователи могут просто использовать распознавание вместо того, чтобы вспоминать информацию по частям диалога. Распознать что-то всегда легче, чем вспомнить, потому что распознавание включает в себя восприятие сигналов, которые помогают нам проникнуть в нашу обширную память и позволяют всплыть на поверхность соответствующей информации.Например, мы часто находим в тесте более простой формат вопросов с несколькими вариантами ответов, чем вопросы с короткими ответами, потому что он требует от нас только распознать ответ, а не вспоминать его из своей памяти.
• Гибкость и эффективность использования . С увеличением использования возникает потребность в меньшем количестве взаимодействий, что обеспечивает более быструю навигацию. Это может быть достигнуто с помощью сокращений, функциональных клавиш, скрытых команд и макросов. Пользователи должны иметь возможность настраивать или адаптировать интерфейс в соответствии со своими потребностями, чтобы частые действия можно было выполнять более удобными способами.
• Эстетичный и минималистичный дизайн . Сведите к минимуму беспорядок. Вся ненужная информация конкурирует за ограниченные ресурсы внимания пользователя, что может препятствовать поиску пользователем в памяти соответствующей информации. Следовательно, отображение должно быть сокращено до только необходимых компонентов для текущих задач, обеспечивая при этом четко видимые и однозначные средства перехода к другому контенту.
• Помогите пользователям распознать, диагностировать и исправить ошибки .Разработчики должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть выражены простым языком, чтобы ничего не потерялось при переводе.
• Справка и документация . В идеале мы хотим, чтобы пользователи могли перемещаться по системе, не прибегая к документации. Однако в зависимости от типа решения может потребоваться документация. Когда пользователям требуется помощь, убедитесь, что ее легко найти, она соответствует поставленной задаче и сформулирована таким образом, чтобы помочь им выполнить необходимые шаги к решению проблемы, с которой они сталкиваются.

Google Inc., технологическая компания с многомиллиардным оборотом, безусловно, производит проекты, которые отражают вышеперечисленные эвристики. Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:

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

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

Узнайте, как Adobe объединяет десять рекомендаций по дизайну пользовательского интерфейса Nielsen и Molich .Один из их самых популярных продуктов, Adobe Photoshop, редактор растровой графики, демонстрирует характеристики хорошо разработанного пользовательского интерфейса, который отражает эти рекомендации.

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

1. Видимость состояния системы

Photoshop отлично справляется с задачей, позволяя пользователю узнать, что происходит с программой, визуально показывая пользователю, к чему привели его действия, когда это возможно.Например, когда пользователи перемещают слои в палитре «Слои», они могут визуально видеть слой, представленный как физически перетаскиваемый в пространстве.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Изображение курсора переходит от раскрытой руки к зажатой, когда пользователь перетаскивает слой внутри палитры слоев. Это упрощает мгновенное понимание состояния системы.Кроме того, выбор Adobe использования «руки» – отличный пример второго правила, согласно которому система соответствует реальному миру.

2. Соответствие системы реальному миру

Пример Photoshop, имитирующего реальный мир в терминах и представлениях, понятных их целевым пользователям, – это то, где они разрабатывают информационную структуру и терминологию, отражающую те же формулировки, которые мы использовали бы в мир фотографии или печатных СМИ. Знакомые концепции и термины, такие как RGB, оттенок / насыщенность / яркость и CMYK, используются для представления цвета, в то время как различные инструменты, такие как инструмент осветления и затемнение, имитируют традиционную технику темной комнаты для фотографий.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Инструменты Dodge Tool и Burn в Photoshop имитируют традиционную технику фотолаборатории для фотографий

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

3. Пользовательский контроль и свобода

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Все сами управляют пользователями, поскольку они могут сделать шаг назад или шаг вперед в меню «Правка» или, в качестве альтернативы, они могут использовать сочетания клавиш Photoshop, например, Alt + Ctrl + Z.

4. Согласованность и стандарты

Photoshop поддерживает стандартный макет и внешний вид, когда дело касается строки меню. Они также используют общеизвестные термины, такие как «Новый…», «Открыть…», «Сохранить как…» и т. Д.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.

5.Предотвращение ошибок

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь наводит курсор на значок ластика, и Photoshop отображает ярлык «Инструмент ластика».

6.Распознавание, а не воспоминание

Независимо от того, делает ли он выбор из меню художественных фильтров или открывает новый файл изображения, Photoshop предоставляет пример просмотра, чтобы пользователи могли сделать правильный выбор. Это позволяет пользователю визуально распознать то, что он ищет, вместо того, чтобы вспоминать имя или вводить его для поиска. Возможно, вы встречали другие программы для редактирования фотографий, которые просят вас вспомнить и ввести имя файла, с которым вы хотите работать. Это действительно может быть действительно трудно вспомнить, поскольку часто это что-то вроде: 29412_09342.JPG.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь может визуально узнать изображение заката по его миниатюре и выбрать его.

7. Гибкость и эффективность использования

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

8. Эстетичный и минималистичный дизайн

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

Автор / правообладатель: Adobe Systems Incorporated.Условия авторских прав и лицензия: Добросовестное использование

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

9. Помогите пользователям распознать, диагностировать и исправить ошибки

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В этом сообщении об ошибке из-за неправильного использования штампа клонирования пользователем Photoshop объясняет, что пошло не так, почему и как пользователю следует действовать дальше.

10. Справка и документация

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

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

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

Скачать PDF можно здесь .

Рекомендации

Если вы будете следовать 10 рекомендациям Нильсена и Молиха по пользовательскому интерфейсу, вы будете проектировать с учетом удобства использования, полезности и желательности.Так же, как дизайнеры успешных компаний, таких как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью хорошо изученных эвристических методов и быть уверенными в создании удобных и красивых дизайнов. Чтобы попрактиковаться в распознавании этих 10 практических правил, продолжайте выполнять упражнение, описанное в прилагаемом файле из приведенного выше раздела.

Где узнать больше

https: // static.aminer.org/pdf/PDF/000/089/679/enha …

Ссылки и где узнать больше

Изображение героя: Автор / Правообладатель: Барри Шварц. Flickr. Условия авторских прав и лицензия: CC BY-NC 2.0

Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

Что такое рекомендации по дизайну? | Фонд дизайна взаимодействия (IxDF)

Научитесь разрабатывать с учетом потребностей и ожиданий пользователей, применяя «Десять рекомендаций по пользовательскому интерфейсу» Якоба Нильсена и Рольфа Молича.Эта эвристика нашла отражение во многих продуктах, разработанных некоторыми из самых успешных компаний в мире, такими как Apple, Google и Adobe. Дополнительное свидетельство того, как их проектные группы включают эти правила в свой процесс проектирования, отражено в руководствах по пользовательскому интерфейсу, опубликованных и распространенных этими компаниями. В этой статье вы узнаете, как следовать десяти эмпирическим правилам при проектировании, чтобы вы могли еще больше повысить удобство использования, полезность и желательность своих дизайнов.

10 рекомендаций по дизайну пользовательского интерфейса Нильсена и Молиха

Якоб Нильсен, известный консультант по веб-юзабилити и партнер Nielsen Norman Group, и Рольф Молич, другой известный эксперт по юзабилити, составили список из десяти руководств по дизайну пользовательского интерфейса в 1990-х годах. Обратите внимание на то, что эвристика Нильсена и Молиха во многом пересекается с «восемью золотыми правилами» Бена Шнейдермана. Эти 10 практических правил являются продолжением восьми золотых правил Шнейдермана через 4 года после первой публикации Шнейдермана.

• Просмотр статуса системы . Пользователи всегда должны быть проинформированы о системных операциях с легким для понимания и хорошо заметным статусом, отображаемым на экране в течение разумного периода времени.
• Соответствие системы и реального мира . Дизайнеры должны стремиться отражать язык и концепции, которые пользователи найдут в реальном мире, в зависимости от того, кем являются их целевые пользователи. Представление информации в логическом порядке и совмещение ожиданий пользователей, основанных на их реальном опыте, снизят когнитивное напряжение и упростят использование систем.
• Контроль и свобода пользователя . Предложите пользователям цифровое пространство, где возможны обратные шаги, включая отмену и повтор предыдущих действий.
• Согласованность и стандарты . Разработчики интерфейсов должны гарантировать, что и графические элементы, и терминология поддерживаются на одинаковых платформах. Например, значок, представляющий одну категорию или концепцию, не должен представлять другую концепцию при использовании на другом экране.
• Предотвращение ошибок .По возможности проектируйте системы так, чтобы потенциальные ошибки были сведены к минимуму. Пользователи не любят, когда их призывают выявлять и устранять проблемы, которые иногда могут выходить за рамки их уровня знаний. Устранение или отметка действий, которые могут привести к ошибкам, – два возможных способа предотвращения ошибок.
• Признание, а не отзыв. Сведите к минимуму когнитивную нагрузку, сохраняя релевантную для задачи информацию на дисплее, пока пользователи исследуют интерфейс.Человеческое внимание ограничено, и мы способны одновременно поддерживать только около пяти элементов в нашей кратковременной памяти. Из-за ограничений кратковременной памяти дизайнеры должны гарантировать, что пользователи могут просто использовать распознавание вместо того, чтобы вспоминать информацию по частям диалога. Распознать что-то всегда легче, чем вспомнить, потому что распознавание включает в себя восприятие сигналов, которые помогают нам проникнуть в нашу обширную память и позволяют всплыть на поверхность соответствующей информации. Например, мы часто находим в тесте более простой формат вопросов с несколькими вариантами ответов, чем вопросы с короткими ответами, потому что он требует от нас только распознать ответ, а не вспоминать его из своей памяти.
• Гибкость и эффективность использования . С увеличением использования возникает потребность в меньшем количестве взаимодействий, что обеспечивает более быструю навигацию. Это может быть достигнуто с помощью сокращений, функциональных клавиш, скрытых команд и макросов. Пользователи должны иметь возможность настраивать или адаптировать интерфейс в соответствии со своими потребностями, чтобы частые действия можно было выполнять более удобными способами.
• Эстетичный и минималистичный дизайн . Сведите к минимуму беспорядок. Вся ненужная информация конкурирует за ограниченные ресурсы внимания пользователя, что может препятствовать поиску пользователем в памяти соответствующей информации.Следовательно, отображение должно быть сокращено до только необходимых компонентов для текущих задач, обеспечивая при этом четко видимые и однозначные средства перехода к другому контенту.
• Помогите пользователям распознать, диагностировать и исправить ошибки . Разработчики должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть выражены простым языком, чтобы ничего не потерялось при переводе.
• Справка и документация .В идеале мы хотим, чтобы пользователи могли перемещаться по системе, не прибегая к документации. Однако в зависимости от типа решения может потребоваться документация. Когда пользователям требуется помощь, убедитесь, что ее легко найти, она соответствует поставленной задаче и сформулирована таким образом, чтобы помочь им выполнить необходимые шаги к решению проблемы, с которой они сталкиваются.

Google Inc., технологическая компания с многомиллиардным оборотом, безусловно, производит проекты, которые отражают вышеперечисленные эвристики.Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:

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

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

Узнайте, как Adobe объединяет десять рекомендаций по дизайну пользовательского интерфейса Nielsen и Molich .Один из их самых популярных продуктов, Adobe Photoshop, редактор растровой графики, демонстрирует характеристики хорошо разработанного пользовательского интерфейса, который отражает эти рекомендации.

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

1. Видимость состояния системы

Photoshop отлично справляется с задачей, позволяя пользователю узнать, что происходит с программой, визуально показывая пользователю, к чему привели его действия, когда это возможно.Например, когда пользователи перемещают слои в палитре «Слои», они могут визуально видеть слой, представленный как физически перетаскиваемый в пространстве.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Изображение курсора переходит от раскрытой руки к зажатой, когда пользователь перетаскивает слой внутри палитры слоев. Это упрощает мгновенное понимание состояния системы.Кроме того, выбор Adobe использования «руки» – отличный пример второго правила, согласно которому система соответствует реальному миру.

2. Соответствие системы реальному миру

Пример Photoshop, имитирующего реальный мир в терминах и представлениях, понятных их целевым пользователям, – это то, где они разрабатывают информационную структуру и терминологию, отражающую те же формулировки, которые мы использовали бы в мир фотографии или печатных СМИ. Знакомые концепции и термины, такие как RGB, оттенок / насыщенность / яркость и CMYK, используются для представления цвета, в то время как различные инструменты, такие как инструмент осветления и затемнение, имитируют традиционную технику темной комнаты для фотографий.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Инструменты Dodge Tool и Burn в Photoshop имитируют традиционную технику фотолаборатории для фотографий

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

3. Пользовательский контроль и свобода

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Все сами управляют пользователями, поскольку они могут сделать шаг назад или шаг вперед в меню «Правка» или, в качестве альтернативы, они могут использовать сочетания клавиш Photoshop, например, Alt + Ctrl + Z.

4. Согласованность и стандарты

Photoshop поддерживает стандартный макет и внешний вид, когда дело касается строки меню. Они также используют общеизвестные термины, такие как «Новый…», «Открыть…», «Сохранить как…» и т. Д.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.

5.Предотвращение ошибок

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь наводит курсор на значок ластика, и Photoshop отображает ярлык «Инструмент ластика».

6.Распознавание, а не воспоминание

Независимо от того, делает ли он выбор из меню художественных фильтров или открывает новый файл изображения, Photoshop предоставляет пример просмотра, чтобы пользователи могли сделать правильный выбор. Это позволяет пользователю визуально распознать то, что он ищет, вместо того, чтобы вспоминать имя или вводить его для поиска. Возможно, вы встречали другие программы для редактирования фотографий, которые просят вас вспомнить и ввести имя файла, с которым вы хотите работать. Это действительно может быть действительно трудно вспомнить, поскольку часто это что-то вроде: 29412_09342.JPG.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь может визуально узнать изображение заката по его миниатюре и выбрать его.

7. Гибкость и эффективность использования

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

8. Эстетичный и минималистичный дизайн

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

Автор / правообладатель: Adobe Systems Incorporated.Условия авторских прав и лицензия: Добросовестное использование

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

9. Помогите пользователям распознать, диагностировать и исправить ошибки

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В этом сообщении об ошибке из-за неправильного использования штампа клонирования пользователем Photoshop объясняет, что пошло не так, почему и как пользователю следует действовать дальше.

10. Справка и документация

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

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

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

Скачать PDF можно здесь .

Рекомендации

Если вы будете следовать 10 рекомендациям Нильсена и Молиха по пользовательскому интерфейсу, вы будете проектировать с учетом удобства использования, полезности и желательности.Так же, как дизайнеры успешных компаний, таких как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью хорошо изученных эвристических методов и быть уверенными в создании удобных и красивых дизайнов. Чтобы попрактиковаться в распознавании этих 10 практических правил, продолжайте выполнять упражнение, описанное в прилагаемом файле из приведенного выше раздела.

Где узнать больше

https: // static.aminer.org/pdf/PDF/000/089/679/enha …

Ссылки и где узнать больше

Изображение героя: Автор / Правообладатель: Барри Шварц. Flickr. Условия авторских прав и лицензия: CC BY-NC 2.0

Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

4 золотых правила дизайна пользовательского интерфейса

Пользовательский интерфейс (UI) является важной частью любого программного продукта.Когда все сделано хорошо, пользователи этого даже не замечают. Когда что-то сделано плохо, пользователи не могут обойтись без этого, чтобы эффективно использовать продукт. Чтобы увеличить шансы на успех при создании пользовательских интерфейсов, большинство дизайнеров следуют принципам проектирования интерфейсов. Принципы проектирования интерфейсов представляют собой высокоуровневые концепции, которые используются для разработки программного обеспечения. В этой статье я поделюсь несколькими фундаментальными принципами. Они основаны на «10 эвристиках юзабилити для дизайна пользовательского интерфейса» Якоба Нильсена, «Восьми золотых правилах дизайна интерфейсов» Бена Шнейдермана и «Принципах дизайна взаимодействия» Брюса Тоньяццини.Большинство принципов применимо к любым интерактивным системам – традиционным средам графического интерфейса пользователя (таким как настольные и мобильные приложения, веб-сайты) и интерфейсам без графического интерфейса пользователя (например, системам голосового взаимодействия).

Принципы разработки пользовательского интерфейса:

1. Предоставьте пользователям возможность управлять интерфейсом
2. Сделайте удобное взаимодействие с продуктом
3. Снизьте когнитивную нагрузку
4. Сделайте пользовательский интерфейс согласованным

1. Предоставьте пользователям возможность управлять интерфейсом.

Хорошие пользовательские интерфейсы создают ощущение контроль в своих пользователях.Сохранение контроля над пользователями делает их удобными; Они быстро научится и быстро обретет чувство мастерства.

Сделайте действия обратимыми – прощайте

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

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

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

Создать удобный интерфейс

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

• Обеспечьте визуальные подсказки .Визуальные подсказки служат напоминанием для пользователей. Позвольте пользователям легко перемещаться по интерфейсу, предоставляя ориентиры при перемещении по интерфейсу продукта. Заголовки страниц, выделение выбранных в данный момент параметров навигации и другие наглядные пособия позволяют пользователям сразу увидеть, где они находятся в интерфейсе. Пользователь никогда не должен задаваться вопросом: «Где я?» или “Как я попал на этот экран?”
• Предсказуемость . Пользователям должны быть предоставлены подсказки, которые помогут им предсказать результат действия.Пользователь никогда не должен задаваться вопросом: «Что мне нужно нажать, чтобы выполнить свою задачу?» или “Для чего эта кнопка?”

Обеспечьте информативную обратную связь – будьте признательны

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

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

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

Показать статус системы

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

Хороший интерфейс может утешить пользователей, показывая прогресс, пока система выполняет задачу. Dropbox показывает статус загрузки документа: текущий прогресс и количество оставшегося времени.

Для пользователей с разным уровнем квалификации

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

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

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

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

Удалите все элементы, которые не помогают вашим пользователям

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

Хорошим примером приложения, которое следует подходу «меньше значит больше», избегая перегрузки интерфейса контентом или функциями, является iA Writer.

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

Не запрашивать у пользователей данные, которые они уже ввели

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

Избегайте жаргона и системных терминов

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

Применение закона Фиттса к интерактивным элементам

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

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

Конструкция доступных интерфейсов

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

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

Используйте метафоры реального мира

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

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

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

Инженер для ошибок

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

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

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

Защитить работу пользователя

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

3. Снизить когнитивную нагрузку

Когнитивная нагрузка – это объем умственной вычислительной мощности, необходимый для использования продукта. Его Лучше не заставлять пользователей слишком много думать / работать, чтобы использовать ваш продукт.

Разделение на части для последовательностей информации или действий

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

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

Уменьшить количество действий, необходимых для выполнения задачи

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

Признание превыше отзыва

Один из 10 эвристик юзабилити Якоба Нильсена советует ставить распознавание , а не отзыв в дизайне пользовательского интерфейса. Признавая что-то намного проще, чем вспомнить его, потому что распознавание включает в себя больше сигналов в нашем мозг (сигналы распространяют активацию на связанную информацию в памяти, и эти сигналы помогите нам запомнить информацию).

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

Повышение четкости изображения

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

При разработке макетов:

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

4. Обеспечьте согласованность пользовательских интерфейсов

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

Визуальная согласованность (стиль)

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

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

Функциональная согласованность (поведение)

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

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

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

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

Заключение

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

Принципы взаимодействия с мобильными приложениями: основные правила и этапы

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

Google, один из основных законодателей UX-тенденций наряду с Apple, описывает основные принципы UX для мобильных приложений на этих четырех этапах:

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

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

Усыновление: один шанс произвести первое впечатление

Исследование Localytics показывает, что 24 процента пользователей никогда не возвращаются к приложению после первого использования. Но правильная адаптация снижает это число до 9 процентов, при этом 61 процент пользователей возвращаются в приложение одиннадцать или более раз. Итак, как нам наладить надлежащий процесс адаптации?

1. Быстрые и практичные заставки

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

Вы можете посмотреть или пропустить простую заставку Dumpster

2. Простая регистрация

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

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

3. Успешное обучение

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

4. Ненавязчивые разрешения

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

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

JotterPad предупреждает о прямом запросе разрешения, но не объясняет, зачем оно ему нужно

Использование: выполнение задач и соответствие ожиданиям

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

5. Достижение целей пользователя

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

Мобильная версия Outlook содержит гораздо меньше наворотов, чем настольная версия

6. Уникальные мобильные возможности

Мобильные приложения позволяют пользователям делать то, чего не могут делать веб-сайты. Они могут работать в автономном режиме, отправлять уведомления и использовать уже имеющиеся в телефоне функции, такие как GPS и камера. Творческая свобода, доступная для UX-дизайнеров приложений, позволяет расширить возможности пользователей воспринимать ваш продукт. Когда Apple представила 3D Touch в iPhone 6s – новый тип управления жестами, который может определять величину давления, – это позволило создавать более интуитивно понятные функции и назначать разные задачи одним и тем же элементам.Возможно, ваш бизнес сможет последовать примеру Ikea и извлечь выгоду из новых возможностей дополненной реальности. Хотя пользователю требуется время, чтобы изучить весь набор ваших умных жестов, вы можете использовать принципы дизайна, ориентированного на человека, чтобы определить, как сделать ваш продукт простым и интуитивно понятным в использовании.

7. Конструкция для пальцев, а не курсоров

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

Имеет значение, как люди обычно держат свои телефоны
Источник: UXmatters

8. Плавный переход между платформами

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

9. Положительное отключение

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

Транзакция: безопасные и удобные платежи

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

10. Платежи на месте

Обычно люди, совершающие платежи через смартфон, отдают предпочтение скорости. Варианты экспресс-оплаты, такие как Apple Pay, Android Pay и PayPal, необходимы для мобильной коммерции.Другие способы ускорить оформление заказа – сканирование номера карты с помощью камеры и автоматизация повторяющихся счетов.

Hotel Tonight обеспечивает простое бронирование в один клик
Источник: iMore

11. Акцент на безопасности

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

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

12. Немедленная обратная связь

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

Возврат: участие в повседневной жизни пользователя

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

13. Соответствующие уведомления

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

14. Узкие виджеты

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

Виджеты TV Time’s и Lifesum отображают полезную информацию прямо на главном экране

15.Персонализация

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

Habitica позволяет пользователям настраивать календарь и даже звуковую тему

Заключительное слово

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

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

Разработка мобильных приложений: общие принципы, общие шаблоны и рекомендации по интерфейсу | Ивонн Со | Intuit Engineering

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

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

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

1. Соблюдайте платформу

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

Рекомендации Apple по человеческому интерфейсу: https://developer.apple.com/ios/human-interface-guidelines/

Рекомендации Google по дизайну материалов: https://material.io/guidelines/

2. Сосредоточьтесь на клиенте выгода

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

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

4. Помните о масштабируемости

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

ТЕЛЕФОННЫЙ ИНТЕРФЕЙС

Мобильные интерфейсы МЕНЬШЕ 7 дюймов шириной следует рассматривать как телефон.Синтаксис и макет должны быть максимально согласованы на этих устройствах, но мы также хотим в первую очередь использовать рекомендации и возможности собственной платформы.

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

ИНТЕРФЕЙС ПЛАНШЕТА

Мобильные интерфейсы БОЛЬШЕ, ЧЕМ 7 дюймов Ширина должна рассматриваться как планшет. Синтаксис и макет должны быть максимально согласованы на этих устройствах, и ни в коем случае они не должны выравниваться точно так же, как интерфейсы с диагональю менее 7 дюймов.

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

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

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

Переходы между экранами

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

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

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

Призыв к действию

В этом разделе освещается вопрос, который я часто задаю: «Должен ли этот призыв к действию быть кнопкой или текстовой ссылкой?» В рекомендациях по дизайну как для iOS, так и для Android текст в виде кнопок является нормой и рекомендацией. Однако я чувствую, что, когда мы используем текст, особенно с системным шрифтом на темном или светлом фоне, мы теряем важную возможность включить элементы бренда, такие как зеленый цвет нашей экосистемы или линейный значок.Итак, мы сознательно отказались от использования текста в качестве призыва к действию и вместо этого используем кнопки с высокой контрастностью, что также дает понять, что это призыв к действию, а не просто часть содержимого экрана.

Пустые состояния

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

Каретки

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

Таблицы действий

Общее практическое правило для нативного мобильного дизайна: используйте листы действий всякий раз, когда есть несколько действий, связанных с одним призывом к действию (это не системный блокировщик). Эти листы действий называются в рекомендациях Apple iOS.Google Android называет эти нижние листы. Используйте листы действий / нижние листы, когда с одним призывом к действию связано несколько действий.

Карты или плитки

Карта (или плитка, как ее называют другие команды) – это компонент, действующий как прямоугольный контейнер для определенного количества информации: визуальных элементов, инструктивного текста, диаграмм и триггеров действий. В зависимости от внешнего вида и использования есть два типа карточек: карточка действия и информационная карточка.

Диалоги

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

Шрифты

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

Тумблеры

Тумблеры используются для запуска бинарной операции (т.е.е. включение и выключение чего-либо). Он часто используется для замены метафоры веб-флажка. У нас есть много флажков в наших веб-продуктах, поэтому, когда мы разрабатываем для нативных мобильных устройств, мы хотим быть уверены, что хотим заменить только двоичные флажки, которые позволяют такие вещи, как включение или отключение содержимого, отображение / скрытие содержимого или полей, включение / off tax, отслеживайте возвраты для клиентов вместо флажков, используемых для выбора нескольких товаров.

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

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

Основы проектирования пользовательского интерфейса | Usability.gov

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

Выбор элементов интерфейса

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

Элементы интерфейса включают, но не ограничиваются:

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

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

Лучшие практики для проектирования интерфейса

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

• Сделайте интерфейс простым. Лучшие интерфейсы практически незаметны для пользователя. Они избегают ненужных элементов и ясно говорят на языке, который они используют на этикетках и в сообщениях.
• Обеспечьте единообразие и используйте общие элементы пользовательского интерфейса. Используя общие элементы в пользовательском интерфейсе, пользователи чувствуют себя более комфортно и могут выполнять задачи быстрее. Также важно создавать шаблоны в языке, макете и дизайне по всему сайту, чтобы повысить эффективность. Как только пользователь узнает, как что-то делать, он сможет передать этот навык другим частям сайта.
• Будьте целенаправленны в макете страницы. Учитывайте пространственные отношения между элементами на странице и структурируйте страницу в зависимости от важности. Тщательное размещение элементов может помочь привлечь внимание к наиболее важным фрагментам информации, а также улучшить сканирование и удобочитаемость.
• Стратегически используйте цвет и текстуру. Вы можете направлять внимание или отвлекать внимание от предметов, используя цвет, свет, контраст и текстуру в ваших интересах.
• Используйте типографику для создания иерархии и ясности. Внимательно подумайте о том, как вы используете шрифт. Различные размеры, шрифты и расположение текста для повышения удобочитаемости и читаемости.
• Убедитесь, что система сообщает о том, что происходит. Всегда сообщайте своим пользователям о местонахождении, действиях, изменениях состояния или ошибках. Использование различных элементов пользовательского интерфейса для сообщения статуса и, при необходимости, следующих шагов может уменьшить разочарование вашего пользователя.
• Подумайте о значениях по умолчанию. Тщательно обдумывая и предвидя цели, которые люди ставят перед вашим сайтом, вы можете создать настройки по умолчанию, которые снизят нагрузку на пользователя.Это становится особенно важным, когда дело доходит до дизайна формы, где у вас может быть возможность предварительно выбрать или заполнить некоторые поля.

Список литературы