Прості правила реалізації управління жестами в iOS, які треба дотримуватися, щоб нікого не дратувати

  
 
Шановні айфоноводи, чи буває з вами таке, що ви завантажили додаток, а там… все не те і не так і не на своїх місцях? Коли ваш юзер-експірієнс підказує вам, що додаток влаштовано неправильно: натискаєте ви, наприклад, кнопку, яка завжди в iOS означала «Поділитися», а вам замість цього вивалюється яке-небудь «ліве» меню… Виникає неприємна фрустрація, і ви, швидше всього, зносите додаток зі свого смартфона.
 
  Подібне зазвичай відбувається, коли:
 
 
     
  • розробник і тестувальник не є користувачами iPhone, їм ніде придбати розуміння екосистеми iOS;
  •  
  • замовник та / або розробник бажає виділитися, виявити оригінальність, вважаючи, що користувачеві не вистачає свіжості вражень, і… перебільшує.
  •  
Це завжди погано відбивається на результаті, тому що користувач парадоксальним чином одночасно чекає від програми вау-ефекту, але і консервативний до мозку кості. Як не дратувати і виправдовувати очікування користувача девайсів фірми Apple, але в той же час вражати його? Ми спробували розібратися. Якщо ви початківець розробник під iOS, думаємо, вам буде корисно прочитати статтю, а якщо ви досвідчений і багато речей здадуться вам очевидними — давайте просто порівняємо наші з вами спостереження.
 
 

Найголовніше в додатку

Мобільні додатки оцінюються користувачами за кількома основними критеріями:
 
 
     
  1. Контент — те, що користувач може дізнатися, прочитати, послухати або подивитися завдяки вашому додатком.
  2.  
  3. Можливості — те, що користувач може зробити, використовуючи додаток.
  4.  
  5. Дизайн — то, як додаток виглядає, від чого залежить, чи буде користувач вважати додаток красивим, оригінальним, зручним.
  6.  
  7. Взаємодія — то, як додаток реагує на дії користувача, які способи управління дозволяє.
  8.  
Перші два пункти носять чисто утилітарний сенс, і тут ми не будемо відкривати Америку — програма має бути просто корисним, і цим все сказано. Про дизайн мобільних додатків і юзабіліті дизайні написано теж немало.
 
Але що далі, як загорнути утилітарну функціональність красиво, сучасно, а, найголовніше, потрапити в серце цих самих мобільних, цифрових користувачів і вбудується в екосистему платформи iOS?
 
 

Виправдувати очікування

Користувачі смартфонів починають освоєння девайса зі стандартних додатків: телефон, список контактів, замітки — всі ці вони прищеплюють звичку діяти в додатку певним способом, наприклад, тягнути сходинку вліво, щоб видалити рядок. Коли користувач робить звичний жест і отримує несподіваний результат, йому незручно. Саме тому ми настійно рекомендуємо зберігати традиції.
 
Отже, розглянемо приклади звичних жестів, які необхідно підтримувати у вашому iOS-додатку.
 
 
Якщо в додатку є форми
По кліку на поле форми додаток відображає контрол для введення даних (клавіатура, контрол вибору дат тощо) — цей контрол називається input view. Яку б input view не відображається додаток, в полі повинна залишатися можливість вставити текст. Стандартний жест для цього — long tap (тривале натискання). По ньому відкривається меню з можливість виділити текст, скопіювати або вставити текст з буфера.
 
 Порада: У полі, де немає можливості введення тексту з клавіатури, ви можете зробити тільки опції «Скопіювати» значення цілком і «Вставити». Для полів з можливістю введення тексту необхідно додавати можливість виділення частини тексту перед копіюванням, вирізанням або вставкою.
 
 
  
За сучасними стандартами також необхідно підтримувати переховування input view по Скролл.
 
 
 
 
Якщо в додатку є списки (таблиці)
Найважливіше, що потрібно реалізувати — це можливість прокручування списку без підвисання і гальм: користувачі люблять чуйні додатки.
 
По кліку на статус-бар список (і взагалі будь-яка scroll view) повинні переходити до початку списку. Ця можливість часто втрачається, коли на екрані кілька прокручуються областей. Якщо в списку може бути більше 20 елементів, обов'язково перевірте цю можливість перед тим, як публікувати додаток.
 
При проведенні пальцем зліва направо або справа наліво по стандарту на елементі списку з'являється кнопка «видалити» (swipe to delete), так само повинно вести себе будь-який додаток. Варто відзначити, що це видалення зі списку, і воно не завжди має на увазі видалення об'єкта в цілому. Наприклад, якщо ви показуєте список елементів з певною ознакою, то видалення елемента зі списку може означати видалення ознаки у цього елемента.
 
 
  
У даному прикладі контакт буде видалено зі списку "Вибраних контактів", однак залишиться в загальному списку.
 
Кілька років тому з'явилося перше мобільний додаток, в якому кнопка «оновити» (refresh) була замінена жестом pull-to-refresh (потягніть для оновлення). Користувач проводить по екрану зверху вниз, і з'являється напис release to refresh (відпустіть для оновлення). Після цього у верхній частині списку відображається індикатор завантаження, який ховається, як тільки оновлення завершується.
 
 
 
 Порада: Якщо додаток відображає інформацію, яка може бути використана в інших додатках, необхідно відкривати меню можливих дій по довгому натисненню. Наприклад, потрібно давати можливість зателефонувати за номером телефону або додати його в список контактів, відкрити сайт в браузері, адреса — на карті і т.п.
 
 
 
 
Скасування редагування
Якщо в додатку реалізовано редагування будь-якої інформації, наприклад, створення списку покупок, замітки і т.д., необхідно додати можливість скасувати дію струшуванням мобільного пристрою (Shake to cancel).
 
 
 
Якщо додаток відображає графічну інформацію, яку користувачеві буде зручно дивитися в різних масштабах, то потрібно реалізувати можливість масштабування за допомогою жесту «щіпка» (pinch). Прикладом можуть служити додатки з картами, галереями, вбудованими браузерами, ігри і т.п.
 
 
 
 

Вразити користувача

І ось ваш додаток вже може називатися зручним і сучасним з погляду використання жестів. Це задовольнить багатьох користувачів, наприклад, в бізнес-додатках. Однак, якщо ви хочете зробити щось особливе, привабливе і краще, ніж у конкурентів, потрібно подумати про додаткові можливості, які ви можете запропонувати своїм користувачам. Багато речей, які перераховані нижче, були придумані для якихось конкретних програм, однак через свою зручність стали популярні і використовуються тепер у багатьох додатках, і більшість користувачів вважають їх стандартними.
 
Розглянемо додаткові можливості на прикладах популярних додатків.
 
 
Галерея
Якщо в додатку є галерея, необхідно реалізувати наступні можливості:
 
 
     
  • по кліку на картинку вона відкривається в окремому екрані (у режимі галереї);
  •  
  • по кліку на екрані в режимі галереї показуються / ховаються контроли управління: панель навігації, кнопки «Поділитися» (Share) і т.п.
  •  
Ці функції є стандартними, і з ними можна познайомитися в стандартному додатку «Фото». Додатково сучасні програми реалізують можливість виходу з режиму галереї прокруткою або кліком.
  
 
 
Схожим чином реалізують в сучасних додатках закривання екранів перегляду новин.
 
 
 
 
Меню
Якщо в додатку є меню, що містить більше 5 пунктів, його можна винести в окремий екран, доступ до якого здійснюється жестом «перегортання» (swipe). Першим таке меню з'явилося в додатку Path, і називається Path-style menu, проте користувачам воно більше знайоме за додатками Vkontakte, Facebook, Gmail, тепер воно використовується в дуже багатьох додатках.
 
 
 
 
Видалення з позначками
На основі стандартної функції видалення при проведенні пальцем зліва направо або справа наліво (swipe to delete) з'явилися реалізації для видалення зі списку з додаванням позначок, причому величина зсуву може впливати на те, яка позначка буде додана елементу:
 
 
 
 
Оптимізації панелі навігації
Для збільшення використовуваної області багато додатків при прокручуванні контенту вгору приховують панель навігації. Така поведінка також властиво браузерам, які зменшують область відображення адреси сторінки. При прокручуванні вниз панель навігації розгортається.
 
 
 
Для підтримки функції прокручування на початок сторінки по кліку на панель відображення стану (status bar) деякі програми розширюють область, що відповідає на дії користувача, додаванням кнопки.
 
 
  
Приклад програми з прихованою панеллю навігації і кнопкою для повернення до початку списку.
 
 
Збільшувальне скло
Якщо в додатку є відображення дрібних деталей, можна крім масштабування або замість нього зробити лупу, на зразок тієї, що використовується для виділення тексту в браузері. Такий елемент інтерфейсу повинен з'являтися при довгому натисненні (long tap).
 
 
 
 
Додатки, засновані на жестах
Іноді творці додатків йдуть ще далі і роблять управління жестами основною фішкою програми. Наприклад, на pull-to працює додаток xReminder — створення заміток, зміна кольору, все виконується на основі одного жесту. Для бізнес-додатків таке рішення підходить рідко, проте в маркетингових цілях може цілком виправдати себе.
 
 
 
 
Обертання
Це досить рідкісний, але і досить специфічний жест. Якщо в інтерфейсі є елемент з позиціонуванням по колу, то можна виконати його за аналогією зі стрілками годин. Наприклад, саме так виконується установка таймера в додатку Minu Timer.
  
 
 
Для пошуку інформації про подробиці реалізації сучасних популярних можливостей додатків можна звернутися до спеціалізованих ресурсів, наприклад, таким — idevrecipes.com / або пошукати реалізацію на github, наприклад, github.com / acoomans / iOS-MagnifyingGlass
 
У коментарях закликаємо ділитися своїми спостереженнями — які кльові прийоми бачили ви? Куди, на вашу думку, їх варто додавати?
 
 

Додатки, які використовувалися для прикладів

Стандартні:
 
 
     
  1. Safari
  2.  
  3. Замітки (Notes)
  4.  
  5. Контакти (Contacts)
  6.  
Популярні:
 
 
     
  1. Vk
  2.  
  3. М'ята
  4.  
  5. Mailbox
  6.  
  7. Google maps
  8.  
  9. Feedly
  10.  
  11. Авоська
  12.  
  13. Appleinsider
  14.  
  15. xReminder
  16.  
  17. Minu timer
  18.  
  19. TrackChecker
  20.  
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.