Рекомендации по пользовательскому интерфейсу: 10 основных правил, которым необходимо следовать
Основная цель разработки пользовательского интерфейса — предугадать, что может потребоваться пользователю, чтобы сделать его работу максимально интуитивно понятной. Как дизайнеры пользовательского интерфейса достигают этой цели с таким количеством приложений, веб-сайтов и программного обеспечения? Один из способов — руководство по 10 пользовательским интерфейсам (UI).
Дизайн пользовательского интерфейса — это удобство использования, полезность и привлекательность. Следуя этим десяти общим практическим правилам, у вас будет прочная основа для достижения целей пользовательского интерфейса. Читайте дальше, чтобы ознакомиться с рекомендациями, погрузитесь в простые объяснения каждого из них и посмотрите примеры реальных реализаций.
Это 10 практических правил для каждого дизайнера пользовательского интерфейса. Условные обозначения, также называемые эвристиками, были разработаны Якобом Нильсеном и Рольфом Моличем.
Нильсен, партнер Nielsen Norman Group, является известным консультантом по веб-юзабилити. Молич также является известным экспертом по юзабилити. Они объединили свой опыт для создания руководств по пользовательскому интерфейсу в 1990-х годах. Совсем недавно руководство было обновлено в ноябре 2020 года.
1. Видимость состояния системы
Пользователи хотят знать, что происходит на протяжении всего времени их работы с вашим продуктом. Отображение состояния системы помогает им понять результат своих предыдущих взаимодействий и интуитивно решить следующие шаги — без необходимости слишком много думать об этом.
Немедленная обратная связь с пользователями через всплывающие окна или строки состояния. Создание продукта с рутинными, предсказуемыми взаимодействиями вызывает доверие у пользователя. Предсказуемый опыт помогает им доверять как вашему продукту, так и вашему бренду.
Пример: строка состояния Google Maps и стрелка GPS
Google Maps использует стрелку или значок автомобиля, чтобы указать, где пользователь находится в своем путешествии.
Кроме того, они разместили строку состояния в верхней части экрана, которая показывает их следующий шаг и то, сколько осталось пройти до следующего шага. Они также сделали все возможное, чтобы включить индикацию времени поездки в нижней части экрана. Каждый из этих компонентов изменяется в зависимости от действий пользователей — независимо от того, следуют ли они по маршруту или нет.
2. Сопоставьте систему с реальным миром
Хотя вы можете использовать его каждый день в офисе со своей командой, пользователи не поймут жаргон. Важно говорить на языке пользователей. Это включает в себя слова, которые вы выбираете, а также фразы и понятия.
Когда дело доходит до дизайна пользовательского интерфейса, будьте проще. Расположите информацию в естественном и логическом порядке. Термины, иконки и изображения должны соответствовать предсказуемым результатам. Значки, такие как увеличительное стекло или стрелка, понятны пользователю. Эту практику также называют «естественным картографированием».
Придерживаясь этой практики, пользователь может легко изучить и запомнить, как работает ваш интерфейс. Это снижает когнитивную нагрузку пользователя — количество ресурсов рабочей памяти, используемых для выполнения задачи. Меньшая когнитивная нагрузка делает взаимодействие пользователей с вашим продуктом интуитивно понятным.
Пример: Масштабирование щипком
Масштабирование щипком было изобретено в 1983 году, но не использовалось в потребительских устройствах до 2005 года с продуктом JazzMutant, Lemur. Lemur был мультисенсорным устройством, которое служило контроллером для музыкальных устройств, таких как синтезаторы и микшерные пульты. Теперь вы увидите масштабирование почти на каждом устройстве с сенсорным экраном по всему миру.
3. Контроль и свобода пользователей
Пользователям нужны четко обозначенные пути от случайных или нежелательных действий. Это избавляет их от необходимости повторять весь процесс. «Запасные выходы» создают у пользователей ощущение свободы.
Выходы также должны быть четко обозначены и доступны для обнаружения.
Четко обозначенные выходы и ощущение свободы, которые они создают у пользователя, также укрепляют доверие к вашему продукту и бренду. Они уменьшают разочарование и негативные чувства и помогают сделать ваш продукт более удобным для пользователя.
Пример: Отмена и повтор в Google Docs
В большинстве текстовых процессоров, включая Google Docs, вы найдете функции «отменить» и «повторить» на панели инструментов. Вы также можете узнать общие функции клавиатуры control или command + Z или control и command + Y. Это позволяет пользователям быстро и легко исправить ошибку, не испытывая при этом большого разочарования.
4. Согласованность и стандарты
Пользователи ежедневно взаимодействуют с несколькими приложениями. Как правило, лучше предположить, что они меньше всего взаимодействуют с вашим приложением и что ожидания ваших пользователей в отношении вашего приложения будут основываться на приложениях, которые они используют чаще всего.
Предсказуемость важна для доверия. Поддерживая последовательность, вы не заставите пользователей узнавать что-то новое. Соблюдение отраслевых стандартов снижает когнитивную нагрузку и позволяет пользователям чувствовать, что ваше приложение интуитивно понятно.
Существует два типа удобства использования; внутренний и внешний. Внутреннее удобство использования означает, что все ваши формулировки, значки, шрифты, макеты и действия одинаковы для всего пользовательского интерфейса. Внешнее удобство использования означает соблюдение отраслевых стандартов других приложений для тех же компонентов.
Пример: увеличительное стекло для поиска
Увеличительное стекло всегда означает «поиск». Функция поиска, обозначенная увеличительным стеклом, обычно находится вверху страницы на компьютере и внизу экрана на мобильном устройстве. Их легко найти в этих областях и легко ориентироваться быстро.
5. Предотвращение ошибок
Один из советов, который часто слышат дизайнеры пользовательского интерфейса, заключается в том, чтобы создать хорошее сообщение об ошибке и надеяться, что его никто никогда не увидит.
Есть два типа ошибок.
- Промахи: ошибки, которые происходят неосознанно – обычно из-за невнимательности
- Ошибки: сознательно допущенных ошибок — обычно в результате когнитивной нагрузки или несоответствия между ментальной моделью пользователя и дизайном
Дизайнеры пользовательского интерфейса должны предотвращать ошибки до того, как они появятся у пользователя. Это означает поиск и устранение подверженных ошибкам функций во время пользовательского тестирования перед запуском. Если необходимо сохранить функцию, которая склонна к ошибкам, предоставьте пользователю подтверждение, прежде чем он сможет совершить действие, чтобы избежать ошибок и разочарования.
Для эффективного проектирования в первую очередь сосредоточьтесь на предотвращении дорогостоящих ошибок. Затем составьте план, как справиться с более мелкими разочарованиями. Дизайнеры пользовательского интерфейса могут использовать практические ограничения, изменять настройки по умолчанию или предоставлять параметры подтверждения для предотвращения ошибок.
Пример: встряхивание для отмены окна подтверждения в последней версии ОС iPhone
Apple представила встряхивание для отмены в iOS 13 еще в 2019 году. Эта функция позволяет пользователям полностью очистить текст или заметку, которые они набрали, просто встряхнув телефон. Однако эта функция скрыта. Многие пользователи встряхнули свои телефоны только для того, чтобы обнаружить, что их текст по ошибке отсутствует. Видя разочарование пользователей, Apple быстро представила опцию подтверждения.
6. Узнавание вместо припоминания
Кратковременная память человека длится всего 20-30 секунд. Человеку гораздо легче узнать столицу страны, чем запомнить ее. Кроме того, они используют множество других интерфейсов в дополнение к тому, который вы разработаете. Неразумно ожидать, что они запомнят, где расположены ключевые функции.
Как дизайнер пользовательского интерфейса вы должны убедиться, что пользователям не нужно запоминать или передавать информацию из одной части вашего интерфейса в другую.
Все ключевые элементы, действия и параметры должны быть видны или легко доступны в приложении. Они также должны располагаться в одном месте.
Пример: автозаполнение кода безопасности
В iOS 13 также появилась функция автозаполнения кода безопасности. Когда пользователь запрашивает код безопасности из приложения, клавиатура извлекает код из его текста и предлагает его над клавиатурой пользователя. Кратковременная память больше не требуется.
7. Гибкость и эффективность использования
Хотя согласованность и единообразие важны для создания доверия и интуитивного понимания пользователей, гибкость также может иметь решающее значение. Повышение эффективности интерфейса за счет ярлыков и настроек может создать новый вид доверия у вашего пользователя.
Это может выглядеть как настраиваемая панель инструментов, сочетания клавиш или сенсорные жесты, которые ускоряют выполнение обычных функций. В качестве альтернативы, как и в большинстве социальных сетей, вы можете предложить персонализацию пользовательского контента.
Это может быть способ настроить их ленту, как Pinterest, или скрытый алгоритм, такой как Instagram или TikTok.
Пример: нажатие и удерживание клавиш Pinterest на мобильном телефоне
Pinterest предлагает своим пользователям множество функций настройки и повышения эффективности. От настраиваемых досок, сегментов досок и настройки каналов до сенсорных жестов и предложений досок. На сегодняшний день функция, которая максимально повышает эффективность, — это сенсорные жесты.
Они используют отраслевые соглашения для значков своих кнопок в простом круговом меню. Круговые меню, хотя и не часто используются, оказались наиболее эффективным типом меню для взаимодействия с пользователем.
8. Эстетичный и минималистичный дизайн
Минималистский дизайн не просто так доминирует в пользовательском интерфейсе. Крайне важно оптимизировать интерфейс, чтобы он включал только релевантную информацию. В дизайне не должно быть чего-то, что редко требуется. Сохранение неважных компонентов в дизайне снижает относительную видимость и важность ключевых элементов.
Это не означает, что ваш дизайн должен быть плоским. Но это означает, что вы должны сосредоточить свой контент и визуальный дизайн на самом главном. Прежде всего, ваш интерфейс должен поддерживать основные цели пользователей.
Пример: Medium
Medium использует удобный черно-белый интерфейс. Кнопки четко обозначены серым цветом или обведены контуром. Их сайт прост в навигации и включает очень мало пунктов меню.
9. Помогите пользователям распознавать, диагностировать и устранять ошибки
Пользователи хотят автономии и контроля. Они не хотят связываться с вашей компанией, когда сталкиваются с ошибкой, и вы тоже этого не хотите. Чтобы избежать этого, важно помочь пользователям самостоятельно распознавать, диагностировать и исправлять ошибки.
Четкие, понятные сообщения об ошибках, предлагающие конструктивное решение, могут решить эту проблему. Избегайте использования кодов ошибок. Включите графическое или визуальное представление ошибки для еще более быстрого распознавания.
Пример: уведомление о неудачной оплате Spotify
Spotify отлично справляется со своим сообщением об ошибке. Простым языком они предлагают четкие следующие шаги для решения проблемы, и они выделены ярко-красным цветом, чтобы пользователи не могли их пропустить. Они даже предоставляют «аварийный выход» в правом верхнем углу, чтобы пользователи могли выполнить эту задачу позже, поскольку в данный момент нет необходимости использовать бесплатную версию приложения.
10. Справка и документация
Ярких сообщений об ошибках недостаточно, чтобы полностью охватить все ваши базы. Предоставление справки и документации, которую можно легко найти, имеет решающее значение для долгосрочного успеха любого программного или аппаратного обеспечения.
Это должно быть кратким. Следующие шаги по решению проблемы или изучению функции должны быть перечислены конкретным образом. По возможности лучше предоставлять документацию пользователю в тот момент, когда он действительно в ней нуждается.
Пример: Чат-боты
Чат-боты являются ярким примером предложения помощи в данный момент. Вместо того, чтобы искать помощь на веб-сайте, Dubsado предлагает потенциальным клиентам чат-бота, который помогает им быстро и легко искать документацию. Если вы не можете найти то, что ищете, с помощью чат-бота, они отправят вам электронное письмо, и вы сможете продолжить разговор с реальным человеком или запланировать живую демонстрацию один на один.
Почему 10 рекомендаций по дизайну пользовательского интерфейса так важны?
Следование этим эмпирическим правилам, или эвристикам, даст вам основу для хорошего дизайна пользовательского интерфейса. Лидеры пользовательского интерфейса разработали эти десять проверенных принципов на протяжении десятилетий, чтобы помочь улучшить пользовательский опыт во всех сферах. Теперь они не являются законом. Вам не нужно следовать им все время. Тем не менее, начинать дизайн с учетом этих идей полезно для эффективности.
Руководство по пользовательскому интерфейсу 101 — Руководство по дизайну академического веб-сайта | Реван Рагха Андхито
Здравствуйте, я хочу поделиться с вами тем, что такое руководство по пользовательскому интерфейсу и как мы его реализовали для разработки системы (веб-сайта), которая настраивает брендинг учреждения.
При разработке проекта разработки программного обеспечения (PPL) у меня была возможность стать дизайнером UI/UX в моей команде, которая является командой MK-PPL (и в то же время в команде INOS), для разработки рекомендаций по пользовательскому интерфейсу в разработка информационных систем оценки и оценки практических занятий для Факультет социальных и политических наук (ФИСИП), Университет Индонезии . Разработанный нами проект представляет собой информационную веб-систему, которая используется для облегчения процесса оценки, оценки и отчетности по практическим курсам, проводимым студентами, преподавателями и социальными учреждениями.
Прежде чем мы начнем, давайте рассмотрим пример визуализации из руководства по пользовательскому интерфейсу. Как человек, который любит визуал, конечно, я был бы очень рад, если бы нам дали интересную визуализацию, а не скучные предложения или абзацы, не так ли?😋
Система дизайна (руководство по пользовательскому интерфейсу) Примеры.
Источник: https://dribbble.com/shots/5779721-Eggplore-UI-StyleGuide-FreebieОсновываясь на приведенном выше примере Руководства по пользовательскому интерфейсу, мы можем определить, что Руководство по пользовательскому интерфейсу представляет собой документ , содержащий рекомендации по разработке цифрового продукта. В соответствии с определением на сайте interface-design.org рекомендации по дизайну представляют собой набор рекомендаций о том, как применять принципы дизайна для обеспечения положительного пользовательского опыта. Цель состоит в том, чтобы предоставить дизайнерам и разработчикам четкие инструкции по внедрению руководства, которое включает в себя интуитивно понятные, обучаемые способности, эффективность и последовательность.
Основная причина, по которой это необходимо сделать, заключается в том, чтобы сделать приоритетным «Последовательность и стандарты» (как применение 10 эвристик юзабилити для дизайна пользовательского интерфейса) при реализации каждого текста, кнопки, значка, интервала, цвета и т.
д. в разработка системы/цифрового продукта.
Если дизайнер или разработчик обнаружит несколько несовместимых дизайнов, он может легко просмотреть Руководство по пользовательскому интерфейсу, чтобы определить, какой из них является подходящим и подходящим. Мало того, если система нуждается в дальнейшем развитии, каждый уже существующий компонент будет более масштабируемым для создания более сложных компонентов.
В нашем случае, поскольку система разработана двумя отдельными командами, нашей команде и другой группе нужны четкие и последовательные рекомендации по пользовательскому интерфейсу, поэтому мы можем придерживаться этих рекомендаций.
Теперь, когда мы знаем определения Руководства по пользовательскому интерфейсу, давайте посмотрим, какие аспекты следует использовать в качестве руководства при разработке цифрового продукта. Эти аспекты руководства состоят из:
- Типографика. Тип шрифта, выбор гарнитуры и размеры шрифта, которые можно использовать
- цветов.
Цвета, которые можно использовать, включают первичный, вторичный и третичный цвета - Кнопка. Форма, цвет, текст, радиус, размер и поведение кнопки
- Ввод и форма. Руководство по форме, размеру из поля ввода
- Значок. Тип и размер значка.
- Расстояние. Руководство по расстоянию между компонентами и пустым пространством.
- Взаимодействие и поведение . Руководство, описывающее действия и взаимодействие пользователя с компонентом (наведение, прокрутка, щелчок и т. д.)
- Ошибка и состояние системы. Руководство , которое включает информацию в случае возникновения ошибки и отображает статус действия.
- И многое другое
Итак, нам нужно сначала исследовать и наблюдать, какая идентичность отражает наших клиентов и как выглядит интерфейс нашего существующего веб-сайта, который уже есть у нашего клиента. Наш клиент, факультет социальных и политических наук (FISIP) Университета Индонезии , имеет собственную цветовую идентичность, которая представляет факультет, который 🍊 ОРАНЖЕВЫЙ 🍊. Мы можем увидеть некоторые примеры их веб-страниц с fisip.ui.ac.id ниже. Пример официального веб-сайта FISIP При создании Руководства по пользовательскому интерфейсу я сделал каждый компонент дизайна в Figma Основная причина использования Figma — это функции, облегчающие дизайнерам мастер-компоненты и многоразовые стили в дизайн-проекте. Благодаря главному компоненту и повторно используемым стилям мне легко повторно использовать созданные компоненты и динамически корректировать стили, если происходят изменения, без необходимости изменять каждый дублированный компонент.
— Типографика
Руководство по пользовательскому интерфейсу в типографике включает правила использования шрифтов, размера шрифта, толщины шрифта и все, что связано с использованием текста в разрабатываемом продукте. Используемый шрифт Nunito Sans доступен в Google Fonts.
Вот руководство по типографике из нашей системы:
— Цвет
Создание справочника цветов начинается с перечисления основных цветов , которые будут использоваться, а именно черный, белый, серый (базовый цвет), красный (индикация ошибки), зеленый (индикатор успеха) и оранжевый (основной цвет системы, который подстраивается под брендинг).
Warna PrimerИз полученного основного цвета из основного цвета получают несколько уровней цвета (светлее или темнее). Это создание вторичного цвета используется для настройки системных требований, чтобы оно не было слишком жестким и ограниченным, вот руководство по пользовательскому интерфейсу для цвета:
Guideline Warna— Button
Рекомендации по созданию кнопок выполняются путем регистрации типов кнопок и поведения, содержащегося в кнопках, например, когда они активны , когда они наведены , или когда они отключены .
Баттон также создал иерархию уровней от наиболее важных до наименее важных уровней, а именно первичный, вторичный и триаду.
При изготовлении направляющей для пуговиц, используемой в этой системе, также применяется руководство из Material Design (система дизайна Google), который был адаптирован к стилю нашей системы.
Руководство по компонентам кнопок от Material Design (Google)— Интервал
Помимо типографики, цветов и значков, одним из аспектов, которые очень важны, но которому часто уделяется меньше внимания, является интервал . Несмотря на кажущуюся тривиальность, расстояние помогает проектировщикам создавать согласованные конструкции и может обеспечивать «дышащее» пространство между каждым из его компонентов. Интервал также полезен для создания дизайнов, которые выглядят более минималистский и чистый дизайн. Для облегчения этапа проектирования и разработки пользовательского интерфейса используется единица интервала, которая кратна 4. Значки будут очень полезны, чтобы помочь подчеркнуть направленность информации, передаваемой системой. Значки, которые мы используем, взяты из одного основного источника, а именно значков дизайна материалов 9.0069 (библиотека значков из дизайн-системы Google), потому что для обеспечения согласованности и сходства типов значков, которые мы использовали. Ниже приведен пример реализации значка, который мы использовали: После формирования руководства по цвету, типографике и значкам маленькие компоненты объединяются в более крупный компонент . Поскольку наша система имеет много общего в дизайне страниц каждой роли, создание единого компонента может помочь нам с точки зрения повторного использования . Вот пример реализации созданного компонента: После создания UI-гайдлайнов каждый из этих гайдлайнов можно сохранить в Figma в виде «Локальные стили» для цветов и типографики, в то время как для компонентов создается главный компонент, чтобы они могли отображаться в списке активов . На этапе проектирования, конечно, UI-гайдлайны очень полезны для дизайнеров, но чем они могут быть полезны со стороны разработчика?😏 С точки зрения внутренних разработчиков, эти рекомендации полезны для помощи в подготовке более четкой модели базы данных и облегчения понимания бизнес-процесса, которого пользователь хочет достичь 👌🏻 Спереди С точки зрения конечного разработчика, эти рекомендации полезны для компиляции тегов HTML и стилей CSS при создании каждого компонента. Но мало того, с помощью Figma фронтенд-разработчики также могут копировать код из CSS каждого компонента. Поскольку наша команда использует React и стилевых компонентов библиотеки при создании интерфейса каждой страницы. С помощью платформы Zeplin каждый компонент дизайна также может быть напрямую экспортирован и сгенерирован в стилизованных компонентов кода, который можно напрямую скопировать и вставить, чтобы сократить время обработки🥰 Использование руководства по пользовательскому интерфейсу может быть полезен при разработке программных продуктов, как веб-приложений, так и мобильных приложений. Для будущих руководств по разработке Руководство по пользовательскому интерфейсу может быть скорректировано в соответствии с потребностями и требованиями. Если нам нужно создать альтернативный дизайн или добавить новые компоненты, просто настройте существующие компоненты и внесите некоторые изменения. Разработка и создание руководств по пользовательскому интерфейсу не останавливаются в начале процесса проектирования и планирования, их все равно необходимо обновлять и поддерживать с течением времени и меняющимися потребностями Спасибо. Надеюсь, вам понравится эта статья!🥰 Также читайте мою другую статью «Искусство проектирования продукта» о создании вайрфреймов, макетов и реализации 10 эвристик юзабилити: 
Ниже показано, как руководство по пользовательскому интерфейсу было сохранено в Figma.
Специально для дизайнеров рекомендации могут помочь в разработке и упрощении каждой страницы дизайна, потому что нам не нужно создавать каждый компонент один за другим с нуля, созданные страницы дизайна также будут выглядеть более согласованными друг с другом. Искусство проектирования продукта
В процессе разработки продукта, после того как мы проходим стадию «Подчеркнуть» при проведении исследования для понимания пользователя,…
medium.
