Так случилось, что профессиональными болезнями дизайнеров интерфейсов является аллергия на неудобство, повышенная раздражительность при взаимодействии с сложными процессами, гиперчувствительность к вкусовой недостаточности, неадекватная реакция на отсутствие логики. Поэтому им бывает довольно непросто найти подходящее приложение для своих нужд. И если настольные компьютеры и ноутбуки, в силу возраста, уже успели обзавестись качественными программами практически для всех областей применения, то в мире мобильных приложений зачастую царит бездумный копипаст десктопных решений.
Особенно остро качественная недостаточность стала проявлять себя с появлением приложений, в которых разработчики учли особенности управления сенсорным экраном, и сделали ставку на новые способы взаимодействия. И сразу со всех концов интернета посыпались возгласы «революционный дизайн», «инновационное управление», «удобный минималистичный интерфейс».
Давайте попробуем разобраться в тонкостях взаимодействия с сенсорными экранами, и понять как же добиться подобного удобства и легкости управления.
До того как у меня появился IPad, я слышал много хвалебных песен о компании Apple. О том что они совершили революцию, создав пальцеориентированные устройства. О том какая же удобная и красивая система iOs. О том как они контролируют свой магазин, не допуская туда некачественные приложения. О том как многие люди теперь теперь используют планшеты вместо ноутбуков для решения множества своих повседневных задач. Для работы и хобби, для общения и развлечений.
И не то чтобы я наивно так во все это поверил, но очень хотелось посмотреть что же там происходит в мире планшетов на самом деле. В конце концов наверняка за три года его существования разработчики уже написали много приложений, которые можно использовать не только для развлечения, но и для работы или хобби. Тем более что способ взаимодействия с трогательным экраном существенно расширяет возможности управления приложением, а значит наверняка есть инструменты, которых в принципе нет на десктопах, со своим уникальным способом взаимодействия, со своими уникальными возможностями.
И вроде бы да. Я нашел массу рисовалок, блокнотов, планировщиков, музыкальных инструментов, браузеров, РСС-читалок, даже полноценный векторный редактор, прям illustrator для айпада. Я скачивал, пробовал, скачивал еще, пробовал, собирая свой набор рабочих инструментов. И в конце-концов определил для себя самые интересные приложения, в которых можно рисовать, проектировать, писать текст, извлекать звуки и многое другое, но…
Сколько же в аппсторе неудобного барахла!
Приложений, которыми действительно удобно пользоваться — единицы. Остальные либовыглядят как го одним своим видом оскорбляют мое чувство прекрасного, либо пользоваться ими жутко неудобно, либо получить от них то что я хочу очень сложно. Есть и такие, которые выглядят приятно, управление настроено более-менее грамотно, функционально вполне подходят, но мелкие недоделки или глюки в деталях сводят на нет все имеющиеся достоинства.
Самое главное отличие планшетов от стационарных компьютеров и ноутбуков в способе управления. Работая мышкой на десктопах мы почти не двигаем рукой, а курсор при этом свободно перемещается по большому экрану. А тут еще колесико для скролла прямо под пальцами.
С планшетом всё по другому. Нам постоянно приходится перемещать руку по всему экрану чтобы что-то нажать, что-то передвинуть, где-то провести пальцем. Это уже не так комфортно как шевелить мышкой, и разработчикам крайне важно найти способы минимизировать это неудобство.
Еще одна особенность планшетов, которой разработчики не придают достаточно значения — маленькая площадь экрана. Всего 10 дюймов. Из распространенных моделей планшетов это максимальный размер. Давайте представим его рядом с большим и комфортным 20-ти-с-чем-нибудь дюймовым домашним монитором, на котором столько всего можно уместить. Планшет в два, а то и три раза меньше. Судите сами — экран меньше, точность попадания меньше, при управлении постоянно часть экрана закрыта рукой, а разработчики упорно продолжают лепить свои интерфейсы из десктопных решений, не понимая, что здесь они уже не работают так же успешно.
И вот они пытаются уместить на экране рабочую область, элементы управления, панели инструментов, чтобы все было под рукой, якобы это удобно, когда всё под рукой. А экранчик-то всего-ничего. Даже рабочая область растянутая на всю площадь экрана, зачастую недостаточна для комфортной работы, а тут еще панельки, кнопочки, меню.
Поизучав решения, используемые в самых разных приложениях, я пришел к выводу что сделать работу на планшете комфортной вполне себе можно. И мне очень захотелось собрать эти решения и принципы в одном месте, в надежде что разработчики если не прислушаются, то хотя-бы задумаются об особенностях форм-фактора и попробуют найти лучшее решение.
Ключевых момента всего три:
Рассмотрим их повнимательнее.
Тут всё просто — растянуть планшет мы не можем, значит единственный выход использовать под рабочую область всю доступную площадь экрана. Всю! Без «но». Никаких постоянно находящихся на экране панелей с кнопками или с какой-либо информацией. Всё место для того самого важного, ради чего мы это приложение и открыли. Берем это решение за основополагающий принцип, и нам остается придумать как и где расположить элементы управления.
Вариантов тут не так уж и мало.
Какие-то основные действия накладываем на жесты. Только не забудьте при первом запуске показать экран с описанием этих жестов.
Не хватает жестов и ничего лучше кнопок не придумалось? — разместите пиктограммы прямо над рабочей областью.
Кнопок много и логично разместить их на общей панели? — спрячьте эту панель за экран с возможностью вытащить ее оттуда легким жестом. Можно даже прятать панель автоматически, когда по действиям пользователя понятно что она ему сейчас не нужна (например когда он начал скроллить страницу браузера — значит он просматривает страницу и кнопки управления в данный момент не актуальны).
Жесты самый удобный способ взаимодействовать с тач-скрином. По ощущениям легкое движение пальцем (swipe) воспринимается даже более простым действием чем нажатие на экран (tap).
Самые удобные жесты, это те, которые вообще вообще не привязаны к определенному месту экрана или элементу рабочей области. Вторые по удобству — жесты от одной из сторон экрана, или жесты над большим элементом рабочей области (например над текстовым блоком).
Управление приложением легкими движениями пальцев в любом месте экрана — вот что даст вам ощущение легкого, небрежного, но в то же время точного и отзывчивого взаимодействия с приложением. Ну и позволит вам почувствовать себя немножко волшебником.
Кстати о волшебстве. Еще один пример привнесения волшебной легкости и удобства в управление рабочей областью это инерция. Легким движением пальца можно проскроллить страницу браузера вниз, перемещаться по карте, смотреть галерею картинок, останавливая движение в любой момент.
Эппловцы с самой первой версии системы продемонстрировали преимущества инерционной динамики для скролла, поэтому большинство разработчиков добавили ее в свои списки, тексты — везде где есть что скроллить. Но как только дело доходит до перемещения страницы в любую сторону — тут почему-то рабочая область перемещается ровно настолько, насколько вы ее подвинете пальцем.
Помогите пользователю. Дайте ему возможность легким толчком пульнуть страницу вперед и остановить дотронувшись до экрана. В картах только-только к этому пришли. А если я смотрю большие изображения? А приложения для рисования и проектирования? Включите уже наконец в рисовалках большие холсты и инерцию перемещения!!!
Поделюсь еще несколькими секретами, благодаря которым приложения кажутся удобнее и проще в использовании.
Один из них это понимание задач пользователей и чувство меры в удовлетворении их желаний. Необходимо очень четко понимать для чего люди используют ваше приложение и предложить им самый удобный на ваш взгляд инструмент для этого. Не 15 разных инструментов для одного и того же (якобы гибкость, ага), не инструмент с 128-ю настройками разных параметров (они только этой настройкой и будут заниматься, до дела не дойдет), а именно свой способ решить задачу. Обладая определенным вкусом, вам вполне может удасться создать что-то, что понравится другим.
Самые лучшие приложения имеют небольшое количество очень продуманных, качественных и правильно настроенных инструментов и довольно скудные настройки. Всё делается для того чтобы пользователь решал свои задачи с помощью предлагаемых инструментов, а не занимался их бесконечной настройкой и подгонкой под себя.
Ну и наконец добрались до оформления. Интерфейсу очень не помешает качество, пробуждающее у человека желание открыть приложение снова и снова. Приложение должно не только хорошо решать задачи пользователя, но и доставлять своим видом человеку эстетическое удовольствие, что добавит ему +1 к вдохновению и +2 к работоспособности.
Конечно приведенные выше принципы не являются универсальными рецептами на все случаи жизни. Уверен найдутся случаи, когда кнопка лучше свайпа, когда панель управления удобнее всего зафиксировать, сместив рабочую область, когда инерция не сможет обеспечить достаточной точности перемещения и будет только мешать. Главное при разработке приложения уделить достаточно внимания удобному управлению и подумать об особенностях среды, в которой оно будет выполняться.
P.S.
Если интересно — могу написать продолжение, с конкретными примерами.
Особенно остро качественная недостаточность стала проявлять себя с появлением приложений, в которых разработчики учли особенности управления сенсорным экраном, и сделали ставку на новые способы взаимодействия. И сразу со всех концов интернета посыпались возгласы «революционный дизайн», «инновационное управление», «удобный минималистичный интерфейс».
Давайте попробуем разобраться в тонкостях взаимодействия с сенсорными экранами, и понять как же добиться подобного удобства и легкости управления.
Неоправданные ожидания
До того как у меня появился IPad, я слышал много хвалебных песен о компании Apple. О том что они совершили революцию, создав пальцеориентированные устройства. О том какая же удобная и красивая система iOs. О том как они контролируют свой магазин, не допуская туда некачественные приложения. О том как многие люди теперь теперь используют планшеты вместо ноутбуков для решения множества своих повседневных задач. Для работы и хобби, для общения и развлечений.
И не то чтобы я наивно так во все это поверил, но очень хотелось посмотреть что же там происходит в мире планшетов на самом деле. В конце концов наверняка за три года его существования разработчики уже написали много приложений, которые можно использовать не только для развлечения, но и для работы или хобби. Тем более что способ взаимодействия с трогательным экраном существенно расширяет возможности управления приложением, а значит наверняка есть инструменты, которых в принципе нет на десктопах, со своим уникальным способом взаимодействия, со своими уникальными возможностями.
И вроде бы да. Я нашел массу рисовалок, блокнотов, планировщиков, музыкальных инструментов, браузеров, РСС-читалок, даже полноценный векторный редактор, прям illustrator для айпада. Я скачивал, пробовал, скачивал еще, пробовал, собирая свой набор рабочих инструментов. И в конце-концов определил для себя самые интересные приложения, в которых можно рисовать, проектировать, писать текст, извлекать звуки и многое другое, но…
Сколько же в аппсторе неудобного барахла!
Приложений, которыми действительно удобно пользоваться — единицы. Остальные либо
В чем же проблема
Самое главное отличие планшетов от стационарных компьютеров и ноутбуков в способе управления. Работая мышкой на десктопах мы почти не двигаем рукой, а курсор при этом свободно перемещается по большому экрану. А тут еще колесико для скролла прямо под пальцами.
С планшетом всё по другому. Нам постоянно приходится перемещать руку по всему экрану чтобы что-то нажать, что-то передвинуть, где-то провести пальцем. Это уже не так комфортно как шевелить мышкой, и разработчикам крайне важно найти способы минимизировать это неудобство.
Еще одна особенность планшетов, которой разработчики не придают достаточно значения — маленькая площадь экрана. Всего 10 дюймов. Из распространенных моделей планшетов это максимальный размер. Давайте представим его рядом с большим и комфортным 20-ти-с-чем-нибудь дюймовым домашним монитором, на котором столько всего можно уместить. Планшет в два, а то и три раза меньше. Судите сами — экран меньше, точность попадания меньше, при управлении постоянно часть экрана закрыта рукой, а разработчики упорно продолжают лепить свои интерфейсы из десктопных решений, не понимая, что здесь они уже не работают так же успешно.
И вот они пытаются уместить на экране рабочую область, элементы управления, панели инструментов, чтобы все было под рукой, якобы это удобно, когда всё под рукой. А экранчик-то всего-ничего. Даже рабочая область растянутая на всю площадь экрана, зачастую недостаточна для комфортной работы, а тут еще панельки, кнопочки, меню.
Нужно с этим что-то делать
Поизучав решения, используемые в самых разных приложениях, я пришел к выводу что сделать работу на планшете комфортной вполне себе можно. И мне очень захотелось собрать эти решения и принципы в одном месте, в надежде что разработчики если не прислушаются, то хотя-бы задумаются об особенностях форм-фактора и попробуют найти лучшее решение.
Ключевых момента всего три:
- максимальная рабочая область
- жесты
- инерция
Рассмотрим их повнимательнее.
Максимальная рабочая область
Тут всё просто — растянуть планшет мы не можем, значит единственный выход использовать под рабочую область всю доступную площадь экрана. Всю! Без «но». Никаких постоянно находящихся на экране панелей с кнопками или с какой-либо информацией. Всё место для того самого важного, ради чего мы это приложение и открыли. Берем это решение за основополагающий принцип, и нам остается придумать как и где расположить элементы управления.
Вариантов тут не так уж и мало.
Какие-то основные действия накладываем на жесты. Только не забудьте при первом запуске показать экран с описанием этих жестов.
Не хватает жестов и ничего лучше кнопок не придумалось? — разместите пиктограммы прямо над рабочей областью.
Кнопок много и логично разместить их на общей панели? — спрячьте эту панель за экран с возможностью вытащить ее оттуда легким жестом. Можно даже прятать панель автоматически, когда по действиям пользователя понятно что она ему сейчас не нужна (например когда он начал скроллить страницу браузера — значит он просматривает страницу и кнопки управления в данный момент не актуальны).
Жесты
Жесты самый удобный способ взаимодействовать с тач-скрином. По ощущениям легкое движение пальцем (swipe) воспринимается даже более простым действием чем нажатие на экран (tap).
Самые удобные жесты, это те, которые вообще вообще не привязаны к определенному месту экрана или элементу рабочей области. Вторые по удобству — жесты от одной из сторон экрана, или жесты над большим элементом рабочей области (например над текстовым блоком).
Управление приложением легкими движениями пальцев в любом месте экрана — вот что даст вам ощущение легкого, небрежного, но в то же время точного и отзывчивого взаимодействия с приложением. Ну и позволит вам почувствовать себя немножко волшебником.
Инерция
Кстати о волшебстве. Еще один пример привнесения волшебной легкости и удобства в управление рабочей областью это инерция. Легким движением пальца можно проскроллить страницу браузера вниз, перемещаться по карте, смотреть галерею картинок, останавливая движение в любой момент.
Эппловцы с самой первой версии системы продемонстрировали преимущества инерционной динамики для скролла, поэтому большинство разработчиков добавили ее в свои списки, тексты — везде где есть что скроллить. Но как только дело доходит до перемещения страницы в любую сторону — тут почему-то рабочая область перемещается ровно настолько, насколько вы ее подвинете пальцем.
Помогите пользователю. Дайте ему возможность легким толчком пульнуть страницу вперед и остановить дотронувшись до экрана. В картах только-только к этому пришли. А если я смотрю большие изображения? А приложения для рисования и проектирования? Включите уже наконец в рисовалках большие холсты и инерцию перемещения!!!
Бонусы
Поделюсь еще несколькими секретами, благодаря которым приложения кажутся удобнее и проще в использовании.
Один из них это понимание задач пользователей и чувство меры в удовлетворении их желаний. Необходимо очень четко понимать для чего люди используют ваше приложение и предложить им самый удобный на ваш взгляд инструмент для этого. Не 15 разных инструментов для одного и того же (якобы гибкость, ага), не инструмент с 128-ю настройками разных параметров (они только этой настройкой и будут заниматься, до дела не дойдет), а именно свой способ решить задачу. Обладая определенным вкусом, вам вполне может удасться создать что-то, что понравится другим.
Самые лучшие приложения имеют небольшое количество очень продуманных, качественных и правильно настроенных инструментов и довольно скудные настройки. Всё делается для того чтобы пользователь решал свои задачи с помощью предлагаемых инструментов, а не занимался их бесконечной настройкой и подгонкой под себя.
Ну и наконец добрались до оформления. Интерфейсу очень не помешает качество, пробуждающее у человека желание открыть приложение снова и снова. Приложение должно не только хорошо решать задачи пользователя, но и доставлять своим видом человеку эстетическое удовольствие, что добавит ему +1 к вдохновению и +2 к работоспособности.
Ну и все
Конечно приведенные выше принципы не являются универсальными рецептами на все случаи жизни. Уверен найдутся случаи, когда кнопка лучше свайпа, когда панель управления удобнее всего зафиксировать, сместив рабочую область, когда инерция не сможет обеспечить достаточной точности перемещения и будет только мешать. Главное при разработке приложения уделить достаточно внимания удобному управлению и подумать об особенностях среды, в которой оно будет выполняться.
P.S.
Если интересно — могу написать продолжение, с конкретными примерами.
