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

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

Мобильные приложения помогают вашему бренду стать популярными среди широкой аудитории

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

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

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

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

Мобильные приложения помогают улучшить общение между вами и вашими клиентами

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

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

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

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

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

15.3 Как плохой пользовательский опыт может убить ваше мобильное приложение?

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

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

Далее мы обсудим шесть способов, которыми плохой UX может убить ваше мобильное приложение.

1. Ваше приложение не учитывает время пользователей

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

По мере увеличения времени загрузки страницы с 1 секунды до 3 секунд вероятность отказов увеличивается на 32%. Добавьте еще пару секунд, и он увеличится до 90%, а на 6-секундной отметке достигнет тревожных 106%! [14].

Для некоторых исключительно медленных приложений, загрузка которых занимает 10 секунд, вероятность отказов увеличивается на 123% [14]..

2. Сложное в использовании приложение сбивает пользователя с толку

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

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

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

3. Люди не могут найти то, что ищут

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

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

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

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

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

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

4. Ваши пользователи хотят посмотреть поближе, а вы им не позволяете

Непредоставление клиентам полного доступа к вашим изображениям – еще одна серьезная ошибка, серьезно влияющая на UX.

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

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

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

5. Ваши пользователи не заинтересованы вашим контентом

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

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

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

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

6. Ваши пользователи не знают, как им сообщить о своих проблемах

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

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

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

Последнее слово

У вас уже есть мобильное приложение, чтобы расширить охват целевой аудитории? Если нет, планируете ли вы построить его в ближайшее время? Вкладываете ли вы достаточно денег в дизайн своего приложения, чтобы гарантировать непревзойденный UX? Что вы делаете, чтобы пользователи вашего мобильного приложения были счастливы и довольны?

XVI Использование в дизайне пользовательского интерфейса анимации

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

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

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

Важность анимации в дизайне пользовательского интерфейса

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

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

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

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

Предоставьте во время ожидания интересные варианты

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

16.2 Используйте анимацию для отправки уведомлений. Использование анимации для навигации пользователей

Используйте анимацию для отправки уведомлений

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

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

Использование анимации для навигации пользователей

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

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

16.3 Анимация может показать лучшую реакцию пользователей в виде визуальных эффектов. Определение концептуальной анимации

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

Это улучшает взаимодействие между пользователем и приложением. С помощью анимации они могут получить даже мельчайшие и малейшие детали.

Определение концептуальной анимации

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

Концептуальная анимация – это то, что придает уникальность вашему проекту, который вы ищете. Она отличается от традиционных методов.

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

16.4 Использование концептуальной анимации в пользовательском интерфейсе

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

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

Прокрутка списка элементов

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

Использование анимации в боковом меню

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

16.5 Функциональная анимация

Функциональная анимация

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

Визуальную обратную связь

Разработку интерактивных переходов

Помощь пользователю начать

Возможность показать состояние системы

Визуальная обратная связь

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

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

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

Разработка интерактивных переходов

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

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

Помогите пользователю начать

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

Покажите состояние системы

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

Заключение

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

XVII Закон Фиттса и его применение к дизайну пользовательского интерфейса

«Пол Моррис Фиттс—младший (6 мая 1912 – 2 мая 1965) был психологом в Университете штата Огайо, где он проводил исследования совместно с персоналом на военно-воздушной базе Райт-Паттерсон, общепризнанной как „родина инженерии человеческого фактора“. Фиттс также позже преподавал в Мичиганском университете. Он разработал модель человеческого движения, закон Фиттса, основанную на быстром, направленном движении, которая впоследствии стала одной из наиболее успешных и хорошо изученных математических моделей человеческого движения». Источник текста: https://clck.ru/34zHC9

Слышали ли вы о законе Фиттса или нет, вы определенно видели его примеры в реальной жизни. От педалей в автомобиле до кнопок операционной системы iPhone – вы, вероятно, касались чего-то, на что повлияли принципы Фиттса.

17.1 Что собой представляет закон Фиттса? Что такое затраты на взаимодействие?

Что собой представляет закон Фиттса?

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

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

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

Но что такое затраты на взаимодействие?

Nielsen Norman Group определяет затраты на взаимодействие как «сумму усилий – умственных и физических, – которые пользователи должны приложить при взаимодействии с сайтом для достижения своих целей» [16]. Таким образом, если пользователь может найти ответ, который он ищет, без необходимости прокручивать, нажимать или исследовать, он не платит за взаимодействие. Если пользователю нужно найти меню, прокрутить более дюжины опций и нажать маленькую кнопку, чтобы заполнить форму, это будет более высокая стоимость взаимодействия.

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

17.2 Уравнение закона Фиттса. Типичные применения закона Фиттса. Как закон Фиттса применяется к дизайну пользовательского интерфейса?

Уравнение закона Фиттса

Закон Фиттса гласит, что время, необходимое для захвата цели, зависит от размера цели и расстояния до цели.

Вот уравнение: MT = a + b * log₂ (2D/W)

Давайте разберем это:

MT – время, необходимое для выбора цели

a + b – константы, устанавливаемые типом устройства

D – расстояние от начальной точки до цели

W – ширина цели по оси движения

Типичные применения закона Фиттса

Хотя эти применения могут показаться здравыми, важно указать на них. Почему? Потому что закон Фиттса – один из самых игнорируемых психологических принципов дизайна!

Вот несколько примеров его использования:

Кнопка для завершения действия, близкая к активным элементам

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

Кратчайший путь к нужному CTA

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

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

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

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

Закон Фиттса обеспечивает безопасность, удобство и удобство использования в дизайне пользовательского интерфейса.

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

Закон Фиттса – причина, по которой кнопки на веб-сайтах большие, а меню обычно располагаются в верхних углах экрана.

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