Текст книги "Дизайн пользовательского интерфейса и дизайн UI/UX в разработке мобильных приложений. Базовые знания"

17.3 Концепции закона Фиттса для дизайна пользовательского интерфейса

Размер

Более крупные цели обычно лучше. Попробуйте большие элементы, которые имеют четкие границы и полностью кликабельны.

Расстояние

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

Усилие

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

17.4 Что такое главный пиксель? Что такое магические пиксели?

Что такое главный пиксель?

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

Вот почему существуют контекстные меню – они, естественно, ближе всего к основному пикселю.

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

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

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

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

Панель поиска Google всегда расположена посередине экрана, а кнопка поиска находится рядом с ней. Логины обычно находятся в верхнем правом углу навигации веб-сайта. Формы обычно находятся прямо посередине страницы с большой кнопкой «Отправить» в конце формы.

Что такое магические пиксели?

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

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

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

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

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

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

17.5 Пять примеров применения закона Фиттса в дизайне пользовательского интерфейса

1. Google

Google размещает поле поиска в центре экрана, а пункты меню – в верхних углах. При этом используются «волшебные» и, скорее всего, «простые» пиксели.

Кнопка «Google Search» находится непосредственно под полем ввода поиска, и вся кнопка является кликабельной, что является примером ментальной модели.

Сразу за кнопкой «Google Search» находится «I’m Feeling Lucky», сопоставимая кнопка, сгруппированная иерархически.

2. iPhone

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

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

Сначала пользователь должен нажать две кнопки, чтобы вызвать экран выключения, а затем провести пальцем по кнопке «slide to power off».

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

3. Spotify

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

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

4. AirBnB

Как и Google, Airbnb центрирует свою форму поиска, сохраняет функцию поиска рядом с формой поиска и включает волшебное пиксельное меню.

Airbnb продолжает использовать закон Фиттса на своем веб-сайте, в том числе в размере и цвете кнопки «Забронировать».

5. Nest

Nest. Источник: https://store.google.com/us/product/nest_learning_thermostat_3rd_gen?hl=en-US

Термостат Nest – яркий пример закона Фиттса.

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

Nest использует круговое меню в интерфейсе своего устройства.

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

Заключительные мысли

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

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

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

XVIII Правило третей в дизайне

18.1 Правило третей как одна из надежных и проверенных стратегий. Избавление дизайнеров от догадок

Правило третей в дизайне как одна из надежных и проверенных стратегий

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

У многих методов дизайна имеются надежные и проверенные стратегии, помогающие сделать вещи одновременно привлекательными и эффективными. Одной из них является стратегия использования правила третей (Rule of thirds– RT), с помощью которой UX-дизайнеры и иные креативщики добиваются выравнивания изображений, текста и компонентов изображения либо веб-страницы таким образом, чтобы обеспечилось создание баланса и соответствие естественному сканированию поля глазами зрителя.

Избавление дизайнеров от догадок

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

Что собой представляет RT?

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

18.2 Основные аспекты правила третей

Создание сетки с использованием правила третей

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

Скажем, если ваше изображение имеет ширину 24 сантиметра и высоту 15 сантиметров, вам следует провести линии сверху вниз на отметках 8 сантиметров и 16 сантиметров, а также слева направо на отметках 5 сантиметров и 10 сантиметров.

Пересечение линий в сетках

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

Соответствие асимметрии способу просмотра людьми дизайна

Созданная с помощью 3-х столбцов и строк асимметрия, с (в отличие от четных 4-х), следует естественному способу, которым люди просматривают дизайн, и упрощает создание приятных, отличающихся динамичностью композиций.

Как правило RT используется в дизайне?

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

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

XIX Как дизайнеры UI/UX могут эффективно использовать искусственный интеллект для улучшения своей дизайнерской работы?

19.1 Все дело в перспективе видения AI. Как развился AI в мире дизайна?

Все дело в перспективе видения AI

Благодаря своим исключительным способностям искусственный интеллект (Artificial Intelligence – AI) произвел революцию во многих ландшафтах, и индустрия дизайна не стала исключением!

На фоне шумихи вокруг того, что искусственный интеллект широко используется в ландшафте дизайна и превзошел все уровни творчества, многие дизайнеры немного обеспокоены своей работой. Им всем любопытно узнать: «Заменит ли AI графических и UI/UX дизайнеров?» Или «Захватит ли AI дизайнеров?»

Что ж, одно можно сказать наверняка: AI – это катализатор, который помог многим пользователям достичь своих целей. Кто-то считает AI Богом, кто-то называет AI магией, а кто-то видит в нем угрозу. Однако, все дело в перспективе видения AI.

Как развился AI в мире дизайна?

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

«Дарт Ве́йдер (англ. Darth Vader, 42 ДБЯ – 4 ПБЯ), также известный под своим настоящим именем как Энакин Скайуокер (англ. Anakin Skywalker) – центральный персонаж первых шести эпизодов саги «Звёздные войны». Также появляется в фильме «Изгой-один». В киноэпопее «Звёздные войны» демонстрируются его становление в качестве рыцаря-джедая, его переход на Тёмную сторону Силы и его итоговое искупление. Отец Люка Скайуокера и Леи Органы. Единственный персонаж, появляющийся в 6 эпизодах и спин-оффе «Изгой-один» «во плоти». Источник: https://ru.wikipedia.org/wiki/Дарт_Вейдер

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

Разработка AI разделена на три уровня:

Узкий искусственный интеллект (ANI), где он помогает создавать простые задачи и давать рекомендации;

Искусственный общий интеллект (AGI), где AI столь же мощен, как и человеческий интеллект, чтобы заставить машины выполнять сложные задачи (искусственный интеллект = человеческий интеллект); Искусственный суперинтеллект (ASI), где AI превосходит человеческий интеллект и имеет уровень IQ, эквивалентный или превышающий самый высокий уровень интеллекта, достигнутый людьми на сегодняшний день.

Проанализировав уровни развития AI, можно сказать, что сегодня он находится между уровнями ANI и AGI, и для достижения AGI потребуется еще некоторое время.

Итак, теперь давайте перейдем к следующему вопросу и определим, является ли AI другом или врагом. AI – друг или враг дизайнеров?

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

19.2 AI – друг UI/UX-дизайнеров. AI – враг UI/UX-дизайнеров. Насколько AI точен в UX-дизайне?

AI – друг UI/UX дизайнеров

Как AI приносит пользу дизайнерам, так это то, что он может подружиться с UI/UX-дизайнерами:

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

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

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

Согласно исследованию HubSpot, около 93% веб-дизайнеров использовали инструменты искусственного интеллекта для решения задач, связанных с дизайном, в прошлом квартале. Из которого: 58% используются для создания изображений или других дизайнов активов; 50% используются для разработки целых веб-страниц; 49% привыкли экспериментировать с дизайном; 43% для улучшения дизайна; 40% на оценку качества дизайна; и 20% использовали его для UX-аудита [18].

Таким образом, это многое говорит о том, что AI является другом UI/UX-.дизайнеров.

AI – враг UI/UX-дизайнеров

AI можно рассматривать как потенциального врага для дизайнеров UI/UX по нескольким причинам:

Поскольку AI обычно автоматизирует многие процессы проектирования UI/UX, он может занять работу UI/UX-дизайнеров со знаниями начального уровня (но это еще далеко); Также не рекомендуется слишком полагаться на AI, поскольку AI может не хватать человеческих чувств и критического мышления для удовлетворения потребностей пользователей;

Поскольку AI слишком сильно зависит от данных, он может упускать из виду субъективные и качественные аспекты дизайна;

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

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

Насколько AI точен в UX-дизайне?

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

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

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

19.3 Популярные варианты использования AI в UI/UX дизайне

Независимо от точности AI в дизайне, вы можете использовать AI в следующих случаях:

Включение в дизайн эмпатии

Источник: https://ppt-online.org/260781

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

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

Автоматизация для повышения эффективности

Вы когда-нибудь думали об автоматизации процесса проектирования? Нам немного любопытно узнать, как работает автоматизация в UI/UX-дизайне. Автоматизация дизайна на основе AI помогает UI/UX-дизайнерам оптимизировать свою работу по проектированию, например создавать повторяющиеся задачи, использовать распознавание шаблонов для объединения элементов дизайна, проверять вводимые данные, получать предложения по шаблонам проектирования и многое другое.

Благодаря быстрому адаптивному характеру инструментов проектирования на основе AI дизайнеры могут легко создавать концепции дизайна быстрее и легко выходить из режима дизайнерского паралича. Благодаря автоматизации дизайна на базе AI UI/UX– дизайнеры также могут автоматизировать процесс проектной документации и другие утомительные трудоемкие задачи. Все это помогает им повысить эффективность своей проектной работы.

Принятие решений и персонализация дизайна на основе данных

Весь интернет-мир управляется данными. Каждый год, месяц, день и секунду генерируется тонна данных. Итак, все дело в данных, которые помогают развивать ваши навыки принятия решений. Но как дизайнеры UI/UX могут использовать данные? Изучая поведение пользователей с помощью аналитики на основе AI.

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

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

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

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

Теперь Canva также внедрила AI, который предлагает преобразование текста в изображение, где вам нужно объяснить, как вы хотите разработать свой следующий проект с выбором стиля, и он предоставит вам множество предложений. Однако для этого есть много других инструментов. Некоторые инструменты также запрашивают текущий дизайн, чтобы предоставить улучшенные версии/предложения по дизайну, как Grammarly для писателей. Они не дадут дизайнерам полностью готовый дизайн, но, по крайней мере, много предложений и дизайнерских вдохновений, чтобы ускорить их дизайнерское мышление, например, помощь в дизайне, чтобы справиться с их режимом паралича.

Информационная архитектура (IA)

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

Быстрое прототипирование и итерация

Цифровое прототипирование продукта играет важную роль в UI/UX– дизайне, что также занимает немало времени, наряду с исследованиями рынка и пользователей. Что ж, в настоящее время AI достаточно умен, чтобы предлагать лучшие варианты дизайна, просто получая грубую идею дизайна с конкретными параметрами.

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

Предложения по дизайну и вдохновение;

Предложения по дизайну, ориентированные на пользователя.

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

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

UX и написание продукта

В большинстве случаев при разработке вайрфреймов вместо контента ставят «lorem ipsum». Благодаря инструментам искусственного интеллекта для создания контента, таким как ChatGPT, Bard AI, Jasper AI и многим другим, они могут добавлять связанные, значимые копии продуктов, чтобы пользователи сначала понимали дизайн и их функции. Тестирование юзабилити и доступности

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