07. Про жесты (Теория)
Summary
TLDRВ видео обсуждаются различия между сайтами PWA и мобильными приложениями, история мобильных устройств и важность жестов в пользовательском опыте. Рассматриваются основные жесты, такие как тап, свайп, прокрутка, масштабирование и перетаскивание, а также их плюсы и минусы. Упоминаются проблемы, связанные с обучением пользователей жестам и важность интуитивного интерфейса. Особое внимание уделено значению отклика экрана и задержки ввода. Также затрагивается тема обоснованного внедрения кастомных жестов и важности on-boarding процессов для объяснения функциональности жестов в приложении.
Takeaways
- 📱 Взаимодействие с мобильными устройствами стало основным после введения iPhone в 2007 году, где жесты на экране стали мейнстримом.
- 🌐 Жесты в мобильных приложениях не зависят от культуры и опыта пользователя, что подтверждает их интуитивность.
- 🔍 Жесты напоминают взаимодействие с реальным миром, что делает их естественными и легко узаемыми.
- 🎯 Apple уделяет больше внимания юзабилити и плавности взаимодействия с устройствами, чем Google.
- 🔑 Скорость отклика экрана и задержка ввода важны для создания естественного взаимодействия с жестами.
- 🔑 Жесты могут упрощать и ускорять взаимодействие с приложением, но также могут требовать большего усилия для обучения.
- 🔑 Минусы жестов включают в себя необходимость обучения и отсутствие визуальных подсказок, что может сбивать с толку пользователя.
- 🔑 Консистентность жестов между приложениями отсутствует, что может сбивать пользователями с толку.
- 🔑 Для успешного внедрения жестов в приложение, их необходимо демонстрировать и объяснять в контексте использования.
- 🔑 Создание кастомных жестов для приложения должно быть основано на изучении базовых жестов и их естественности в отношении выполняемого действия.
Q & A
Что было важной особенностью взаимодействия с iPhone после его выпуска в 2007 году?
-Взаимодействие с экраном стало мейнстримовым, так как пользователи могли не только нажимать на экран, но и выполнять жесты, такие как увеличение, сжатие и прокрутка.
Какие преимущества жестов взаимодействия с мобильными устройствами?
-Жесты предоставляют более интуитивный и естественный способ взаимодействия с объектами на экране, напоминая взаимодействие с реальными объектами.
Какие жесты считаются универсальными и не зависят от культуры?
-По исследованию Дэна Мауни, жесты, такие как смахивание для удаления объекта с экрана, являются универсальными и интуитивно понятными.
Какие преимущества жестов перед традиционными кнопками в мобильных приложениях?
-Приложения, основывающиеся на жестах, требуют меньше кнопок, что оставляет больше места для контента и делает взаимодействие быстрее и интереснее.
Что может быть недостатком жестов в мобильных приложениях?
-Один из недостатков жестов - это необходимость обучения, так как они невидимы и скрыты, и пользователи должны помнить их.
Какие типы жестов рассматриваются в скрипте?
-Рассматриваются типы жестов, такие как касание (Тап), двойной Тап, удержание (Long Tab), смахивание (свайп), прокрутка (скролл), масштабирование (пинч или щипок) и перетаскивание (Drag and drop).
Какие рекомендации даются для создания и использования кастомных жестов в приложениях?
-Рекомендуется изучить базовые жесты перед созданием кастомных, и использовать их там, где жест соответствует действию, которое выполняет пользователь.
Чем может быть риск внедрения сложных жестов в мобильное приложение?
-Риск включает в себя то, что пользователи могут не хотели бы учиться новым жестам, что может вызвать разочарование и испортить их опыт взаимодействия с приложением.
Какие методы могут быть использованы для демонстрации жестов в приложении без боли для пользователя?
-Можно использовать отбординг, короткие видеоролики, анимации или визуальные подсказки, чтобы показать, как жесты упрощают использование приложения.
Почему так важны визуальные подсказки при использовании жестов в мобильных приложениях?
-Визуальные подсказки помогают пользователям быстрее освоить жесты и понимать, как они могут быть использованы для упрощения взаимодействия с приложением.
Outlines
📱 Разница между сайтом и приложением
В этом параграфе рассматривается разница между сайтом и мобильным приложением, а также введение в историю развития мобильных устройств. Обсуждается важность мобильных устройств для пользователя и основы взаимодействия с ними через жесты. Упоминается, что с момента презентации iPhone в 2007 году Apple уделяет больше внимания юзабилити и плавности взаимодействия с устройствами, чем Google. Автор также затрагивает тему естественности жестов и их влияние на восприятие мобильной среды.
🔎 Исследование жестов и их влияние на UX
Второй параграф посвящен исследованию жестов и их влиянию на опыт пользователя. Автор упоминает, что жесты не зависят от культуры и опыта пользователя, что делает их интуитивно понятными. Обсуждаются преимущества и недостатки жестов, включая упрощение интерфейса и необходимость запоминания жестов пользователем. Также упоминается кривая обучения, связанная с жестами, и важность визуальных подсказок для их освоения.
🛠️ Основные жесты и их использование
Третий параграф включает описание основных жестов, таких как касание, двойной тап, удержание, смахивание (свайп), прокрутка и масштабирование. Автор объясняет, как каждый из этих жестов используется в мобильных приложениях и как они улучшают взаимодействие с контентом. Также рассматривается важность выбора между кнопками и жестами при разработке интерфейса.
💡 Создание и использование кастомных жестов
В этом параграфе рассматривается процесс создания и использования кастомных жестов в приложениях. Автор подчеркивает, что перед внедрением нового жеста необходимо оценить риски и учитывать, насколько он будет интуитивно понятен для пользователя. Обсуждается важность демонстрации жестов и их ценности для пользователя, а также методы обучения пользователей новым жестам без боли.
Mindmap
Keywords
💡ПВА
💡мобильные жесты
💡интуитивность
💡отклик
💡задержка ввода
💡юзабилити
💡User Flow
💡кривая обучения
💡консистентность
💡отбординг
💡Drag and drop
Highlights
Разница между сайтом и приложением.
Взаимодействие с экраном стало мейнстримовым с появлением iPhone в 2007 году.
Жесты интуитивны и естественны, напоминая взаимодействие с реальным миром.
Apple уделяет больше внимания юзабилити и плавности взаимодействия с устройствами.
Скорость отклика экрана важна для естественности жестов.
Задержка ввода - время до отображения действия на экране после жеста.
Жесты могут упрощать интерфейс, выделяя больше места для контента.
Жесты ускоряют работу пользователей и делают опыт взаимодействия более приятным.
Начиная с iOS 10, все операции с кнопкой 'Домой' выполняются с помощью жестов.
Кривая обучения возрастает, когда элементы интерфейса заменяются жестами.
Отсутствие консистентности жестов между приложениями может сбивать с толку пользователей.
Важно объяснять сложные жесты с помощью визуальных подсказок.
Простые жесты, такие как тап, двойной тап, удержание, свайп, прокрутка и масштабирование,广为人知.
Перетаскивание или drag and drop включает в себя касание с другой скоростью.
Создание кастомных жестов для приложения должно быть обосновано и учитывать опыт пользователя.
Внедрение жестов в приложение должно быть осторожным, учитывая их ценность и простоту.
Анимации и визуальные подсказки могут помочь пользователям понять, как использовать жесты в приложении.
Transcripts
на данный момент Ты должен понять
разницу между сайтом ПВА и приложением
дальше мы погрузились с тобой и совсем
чуть-чуть в историю мобилок затем узнали
Почему они для нас Важны и то каким
образом Ну мы их держим в руках Ну и что
такое форденс теперь поговорим с тобой
как собственно используется наши руки Ну
точнее пальцы для того чтобы работать с
контентом формами Ну и так далее будет
немного душно Но это поможет осознать
мобильную вот среду лучше Ну и сложности
связанные с жестами Итак когда компания
Apple Представила iPhone в 2007 году то
взаимодействие с экраном стало
мейнстримовой ну Темой поскольку тогда
впервые юзеры смогли не только тупо
нажимать на экран но также что-то там
увеличивать сжимать прокручивать на нем
в общем жесты тогда были в новинку
сейчас даже ребенок быстро усваивает Ну
практически на лету и в целом сейчас
когда мы смотрим на и на Android
очевидно что Apple уделяет больше
внимания юзабилити и плавности во
взаимодействии с устройствами чем это
делает Google достигается это отчасти
благодаря естественности в жестах если
честно как всегда не хочу грузить
истории поэтому переходим к сути и
начнем мы разбираться с того В чем сила
брат ужасных и в том какие жесты люди
используют и Согласно исследованию Дэна
мауни важно отметить что жесты
плюс-минус одинаковые и при этом не
зависит от культуры и опыта Ну как
пример в исследовании там приводится
факт что когда людей из разных стран и
разным опытом просили удалить что-то то
они интуитивно пытались что-то сделать
подобие свайпа на объекте чтобы как бы
убрать его с экрана мобилки в этом одна
из причин по которой жесты это что-то
интуитивно понятное сразу естественно
сразу для нас потому что они напоминают
взаимодействие с объектами реального
мира например в реальной жизни когда Ну
ты чего-то не хочешь то ты тоже как бы
пытаешься Ну это оттолкнуть в сторону
так вот это естественность достигается
за счёт скорости отклика Ну экрана и
какая задержка происходит после
прикосновения Я кстати говорил что будет
душно так вот время отклика это
промежуток времени за который экран
мобилки меняет свойства Ну то есть
Сколько времени потребуется экрану чтобы
поменять цвет пикселя например ну и
соответственно чем быстрее тем плавнее
обновляется изображение на экране а
задержка же ввода Это промежуток времени
который необходим для показа действия на
экране То есть ты нажимаешь на экран но
телефона и водишь по нему а затем
ожидаешь действия на экране это задержка
Ну то есть время которое нужно чтобы
показать что-то на экране чтобы это
время находилось действием пальца
Если же смотреть практически на жесты то
у них есть как плюсы так и минусы Из
плюсов можно отметить что когда
приложение на полагается в основном на
жесты то интерфейсу не требуется много
кнопок А значит больше места выделяется
контенту Хотя кнопки могут показаться
полезным как раз таки визуальным
сигналом орденсом для ключевого действия
это жесты приятны Ну в использовании за
счет как раз таки этого физического
взаимодействия с ними становится
интереснее и быстрее Что Кстати может
сделать шаги кстати говоря в User Flow
Короче я не просто так начал говорить
про Apple и жесты потому что начиная Ну
как начиная с 10 Айфона и 12 iOS А это
было ли едва не самый важный момент
наравне с той самой челкой потому что
все операции с кнопкой домой которые уже
нет делаются с помощью жеста так вот
Золотое правило сразу по жестом Это
ответ себе на вопрос Если тебе не нужно
думать о том что сделать прежде чем
применить жесты то жесты работают
ускоряют работу твоих юзеров Из минусов
стоит отметить самый большой недостаток
это кривая обучения Ну надо всегда
помнить что каждый раз когда ты удаляешь
Ну из интерфейса какой-то элемент
замещая его на жест то кривое обучение
вот прям возрастает Ну опять же
вспоминай беседу про fordons причины
тому сами жесты они ну как бы не видны
скрыты люди всегда должны помнить них
Поэтому если ты скроешь что-то из
интерфейса например опять же какую-то
опцию ты будут пользоваться
соответственно меньше людей конечно же
решение может стать отбординг но опять
же люди чаще пропустят подобную штуку
так слишком много информации без
ценности опять же может привести
путанице более безопасно в этом случае
будет объяснять сложные жесты в
контексте например с помощью визуальных
подсказок во время использования в общем
без визуальных подсказок юзеры Могут
просто напросто запутаться Как работать
с приложением конечно юзеры попытаются
понять что ты и потратить немного
времени но им нужны хотя бы хоть хотя бы
какие-то подсказки абординги должны
просто напросто демонстрировать ценность
приложения или объяснять только вот прям
самое важное иначе опять же юзеры
пропустят все другая проблема жестов это
отсутствие консистентности так как
большинство из них ну жестов отличается
от приложения по сути приложению и это
вообще неочевидно для юзеров что точно
очевидно так это лайк этому видео
комментарий к этому видео Разумеется
подписка на этот канал а также Ну
прожатие колокольчик все это нужно для
продвижения моего канала и поддержки но
я скажу тебе огромное спасибо если ты
подпишешься платно на мой бусте ссылка
опять же в описании Ну и дополнительный
контент ты получишь от меня и поэтому
перед тем как создать какой-то кастомный
жест для приложения Ты должен изучить
сперва базовые жесты в мобилках
применять их А вот когда будешь уже
думать о том что лучше кнопка или жест
то думая действий которые выполняет юзер
вот типа жест соответствует тому
действию которое юзер выполняет Ну то
есть действие на экране если да и это
естественно тоже Ну какой-то жест это
хорошее в принципе альтернативно кнопки
Наверное ты уже догадался мы начнем с
простых жестов которые Многие юзеры
знают а это касание или Тап двойной Тап
касание удержания или Long Tab
смахивание или проще свайп прокрутки Ну
или скролл и масштабирование
что касается тапы или касания или еще
можно просто-напросто нажатие на экран
то Это основное и самое популярное
взаимодействие В общем User просто
слегка касаются экрана одним пальцем
например чтобы открыть приложение или
выполнить какое-то действие
[музыка]
следующим популярным жестом можно
назвать двойной Тап Ну или двойное
нажатие обычно это действие совершается
для того чтобы увеличить объект на
экране А в Инстаграме например дважды
нажав на картинку ты ставишь ей лайк
то когда твой палец касается и
задерживается на мгновение на каком-то
элементе экрана в целом это используется
для отображения и выполнения быстрых
действий можно провести аналогию с
контекстным меню когда ты нажимаешь
правую клавишу мыши Еще этот жест
позволяет просмотреть контент или даже
управлять им например опять же в Айфоне
на пункте управления можно сделать Long
Tab на фонарике отрегулировать его
яркость
смахивание или пролистывание или просто
свайп это жест который тоже все знают
особенно те кто использовал хотя бы раз
тиндер в общем юзером просто нужно
провести одним пальцем по экрану в
каком-либо направлении и тут можно
провести аналогию перелистывания
страницы у книг или у журналов
[музыка]
В общем Scroll или прокрутка тоже
известна жесты где юзеру надо провести
по экрану одним пальцем не поднимая его
например в приложении фото можно
скроллить список вверх или вниз А если
свайпнуть область которая пролистывается
то можно сделать быструю прокрутку А
если при этом нажать Ну тапнуть по
экрану то можно остановить скром
вообще жест стягивания и растягивания
пальцев можно назвать просто ну на
английском пинч так короче ну или На
крайний случай щипок он используется в
основном для масштабирования картинок
веб-страниц а также для приближения и
отдаления карт User оставят на экране
собственно два пальца рядом Ну и затем
разводят и сводит чтобы увеличивать или
уменьшать масштаб изображения карты
всего подобного
[музыка]
перетаскивание или на английском Drag
and rop это жест включает в себя ту же
механику касания но с другой скоростью
допустим ты хочешь перетащить иконки Ну
приложение в разные папки или части
экрана то ты не просто проводишь пальцем
а перетаскиваешь не убирая палец крана
прикол ужасно в том что можно как бы
перетянуть что-то даже в другое
приложение Например какое-то фото в
письмо А если при этом нажимать на
другие фотки то можно выбрать сразу
несколько фоток или файлов и перетащить
на письмо
или флинк и в общем тут я уже не знаю
как перевести правильно этот жест
поскольку встречал только в переводе как
бросок В общем это ж просто как
дополнение к жесту скроллинга но
дополнительно учитывает скорость
перемещения пальцев последние скажем так
моменты перед тем как ты отпускаешь
палец если скорость пальца нулевая
это будет плавно затухать В общем это
другое потому как можно подумать что
механика касания такая же как у свайпа
но опять же скорость другая Ну как бы ты
как будто бросаешь понимаешь что-то
пальцем и в общем-то Как видишь жестов
много но теперь о некоторых Ты знаешь
Итак давай предположим что ты хочешь
придумать новый жест Возможно эта
комбинация свайпа с чем-то или жеста
пинч с другим или еще какой-то жест с
учетом клоуна или встряхивание телефона
может быть что угодно но независимо от
того фактического механизма
использования необычного жеста может
оказаться сложным опять же для поэтому
Ну как бы первой задачей нужно оценить
риск зачастую юзеры не хотят что-то
учить она и понятно твое приложение
должно сразу решать задачу и давать
ценность сразу поэтому какой-то там
замысловатый жест может вызвать лишь
разочарование И следовательно испортить
их опыт даже если жест классный и весь
из себя такой полезный но по
функциональности это не будет иметь
значение если юзер и даже скажем так Не
узнают о нем или о том как на самом деле
упрощает этот жест их жизнь поэтому
Настоятельно рекомендую очень хорошо
подумать прежде чем внедрять жест
конечно
скажет ведь нельзя узнать не
протестировав и внедрив и оно так и есть
но Готова ли Твоя команда и продукт на
данной стадии играть в азартные игры
тратить деньги на такое исследование и
тесты А я скажу Как все-таки показывать
жесты в приложении без боли для юзера
в общем-то выходом будет для тебя только
отбординг Напоминаю что это в целом
процесс знакомства пользователя с
продуктом который помогает ему ощутить
ценность То есть он должен
демонстрировать юзеру функциональность и
ценность товара услуги или предложения и
это по сути Ну действительно лучший
способ рассказать скажем так о скрытых
возможностях которыми являются жесты
учти что это должно быть руководство по
эффективному использованию интерфейса то
есть оно должно как бы упрощать и
доносить то как Ключевая ценность в
приложении будет еще быстрее достигаться
за счет жеста лучше всего избегать
длинных ханбордингов и показывать
контекстно вот самое важное условно
сосредоточившись на одном взаимодействии
и в общем-то не пытаться Объяснить все
возможные действия в интерфейсе за
Интерфейс Это практически всегда текст
поэтому ты можешь прямо на карточке
написать заголовок и текст который
передает основную например
скажем так ценность от жеста например
свайп влево это дизлайк а вправо лайк Ну
как в тиндере главное чтобы текст был
небольшим и понятным
[музыка]
ты можешь сделать Просто ну анимацию
чтобы передать то как функционирует тот
или иной жест А еще можно сделать
анимацию на реальном элементе который
как бы призывает взаимодействовать с ним
подергиваясь на экране дразни юзера В
общем если ты будешь шестить Ну вот
такой вот Каламбур то надеюсь я тебе
помог разобраться с этой
5.0 / 5 (0 votes)