Apple human interface guidelines что это

Продолжаю знакомить вас с прекрасным Human Interface Guidelines. Сегодня глава ’From concept to product’ о том как придумать и спроектировать приложение.

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

Ниже алгоритм создания описания от Apple.

1. Перечислите все функции которые могут потребоваться пользователям

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

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

2. Опишите аудиторию вашего приложения

Выделите пользователей вашего приложения. Кто они, чем занимаются, что им важно.

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

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

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

3. Выберите нужный аудитории функционал

Оставьте 2-3 функции. Превосходные iOS приложения всегда концентрируются на чем-то одном.

В нашем примере, остаются три функции:
— создание списков;
— купоны на списки;
— получение рецептов.

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

Изумительно, что начиная с идеи «Список покупок», меняя аудиторию может получиться Омни фокус или Купи батон.

4. Используйте краткое описание в проектировании и разработке

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

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

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

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

Прототипируйте и разрабатывайте итерационно

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

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

Самый простой путь создать эффективный прототип — Xcode storyboard. Storyboard это схема всех экранов приложения с переходами между ними. Создайте базовое приложение, наполните реалистичным контентом, залейте на устройство и тестируйте. Придется привлечь разработчика.

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

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

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

От редактора

Надеюсь, сегодня вы узнали что-то новое и следующее свое приложение сделаете лучше. Как всегда, рад критике и пожеланиям на al@touchin.ru

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

Источник

iOS Guidelines in Russian. Part №1.

Гайдлайны Apple. Перевод.

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

Пользовательский интерфейс iOS основывается на трех факторах:

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

Если вы обновляете интерфейс уже существующего приложения под iOS или создаете приложение с нуля, то выбирайте подход, который использовала Apple для обновления встроенных приложений iOS:

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

Направьте себя на содержание

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

Проверьте правильность подхода отображения контента в приложении:

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

Источник

Apple human interface guidelines что это

iOS Design Themes

As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you’ll need to meet high expectations for quality and functionality.

Three primary themes differentiate iOS from other platforms:

Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

Deference. Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

Design Principles

To maximize impact and reach, keep the following principles in mind as you imagine your app’s identity.

Aesthetic Integrity

Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.

Consistency

A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.

Direct Manipulation

The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.

Feedback

Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.

Metaphors

People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

User Control

Throughout iOS, people—not apps—are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.

Источник

10 идей из Human Interface Design Guidelines от Apple

Заслуживающие внимания рекомендации из гайдлайнов по iOS

Последние несколько месяцев я разрабатывал приложение для IOS и постоянно обращался к Human Interface Design Guidelines от Apple. Я считаю это руководство обязательным для прочтения любым начинающим или нынешним дизайнером UI/UX.

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

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

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

1. Протестируйте цветовую гамму вашего приложения в различных условиях освещения

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

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

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

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

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

У Shopify есть отличная статья о проектировании с учетом контекста пользователя, которую я рекомендую всем, кто заинтересован в более глубоком погружении в эту тему.

2. Максимально откладывайте авторизацию

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

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

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

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

3. Соблюдайте режим отображения, который люди выбрали в настройках

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

4. Показывайте контент как можно скорее

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

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

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

5. Пользуйтесь системными цветами для текста, заливками, символами и разделителями

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

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

«SF Symbols предоставляет набор из более чем 1500 единообразных, хорошо настраиваемых символов, которые вы можете использовать в вашем приложении. Символы SF, разработанные Apple, легко интегрируются с системным шрифтом San Francisco, поэтому символы автоматически обеспечивают визуальное выравнивание по вертикали с текстом для всех весов и размеров. Вы можете использовать SF-символы в приложениях под управлением iOS 13 и более поздних версий, WatchOS 6 и более поздних версий и tvOS 13 и более поздних версий».
— Символы Apple SF

Если вы хотите узнать, как можно использовать SF-символы, вот видео.

6. Используйте знакомые, понятные слова и фразы

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

«Стремитесь к неформальному, дружескому тону. Неформальный и доступный стиль напоминает то, как вы разговариваете за обедом. Иногда используйте сокращения, и местоимения „вы“ и „ваше“, обращайтесь непосредственно к пользователю».
— Руководство по терминологии от Apple

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

7. Предусматривайте потребность в помощи

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

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

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

8. При необходимости помогайте людям избежать потери информации

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

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

9. Используйте стандартные жесты в большинстве случаев

«Люди знакомы со стандартными жестами и не любят, когда их заставляют учиться разным способам делать одно и то же. В играх и других приложениях с эффектом погружения пользовательские жесты могут быть частью увлекательного процесса. В других приложениях лучше всего использовать стандартные жесты, чтобы не тратить лишние усилия на то, чтобы что-то или сохранить».
— Руководство по жестам от Apple

10. Не включайте чувствительную, личную или конфиденциальную информацию в уведомление

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

Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:

Источник