Психологічна складова швидкості взаємодії в мобільних інтерфейсах

      Однією з найважливіших складових у розробці мобільних інтерфейсів є відгук інтерфейсу на дію користувача. Користувачі мобільних інтерфейсів як правило, не дуже терплячі, коли використовують вашу програму. І якщо їм доводиться чекати надто довго, поки завантажиться контент, вони починають дивитися по сторонах і навряд чи продовжать роботу з додатком.
 
Так як зробити ваш додаток більш швидким? Ось декілька цікавих технік, розуміючи які ви зможете зробити ваш додаток більш швидким.
 
  Коли ви розміщуєте фото в Instagram, завантаження починається у фоновому режимі як тільки користувач вибрав фото або ж відразу завантажується після клацання камери. Додаток отримує перевагу, так як процес розміщення фото в Instagram складається з декількох кроків (масштабування і обрізка, накладення фільтрів, додавання підпису, і т.д.).
 
 image
 
 Instagram показує повідомлення «Завершено» до того моменту коли я закінчу публікацію своєї картинки.
 
І поки користувач пройде ці кроки, фото вже буде завантажено у фоновому режимі. При цьому ніяких прогрес барів або повідомлень про завантаження.
 
До того часу користувач вже закінчив процес розміщення фото і повертається до перегляду стрічки друзів. Ймовірно він хоче побачити там і зображення яке він залишив. У цей момент додаток показує статус «Завершено» процес вивантаження фото закінчено, воно відразу ж відображається в стрічці разом з фотографіями друзів.
 
Отже користувачеві завжди є чим зайнятися проходячи через серію кроків, а в цей час як фото буде завантажуватися. Коли кроки закінчаться, то фото вже буде завантажено. Це дає користувачеві відчуття швидкості, хоча фото завантажується не швидше ніж зазвичай.
 
Дуже цікаво, як таке просте рішення з поліпшення користувацького досвіду може бути поштовхом до успішності продукту в цілому. До появи Instagram, були інші програми які також дозволяли ділитися фото, вони були дуже схожими але як правило, не завантажували фото до того як користувач зробить всі обов'язкові кроки. Це невелика зміна, яку вніс Instagram, додало відчуття швидкості роботи програми в рази і стало тим самим інструментом у залученні користувачів з інших додатків.
 
Обмін повідомленнями це інший користувальницький досвід де швидкість визначає саму сутність додатки. Давайте спробуємо порівняти підходи в роботі Whatsapp і iMessage в тому як вони інформують своїх користувачів про відправку і доставку їх повідомлень.
 
 image
 
 Дві галочки Whatsapp для підтвердження відправки та доставки повідомлення.
 
У Whatsapp є зелена галочка вказує що повідомлення було відправлено і ще одна зелена галочка яка вказує що повідомлення вже доставлено. У Whatsapp зробили блискучий хід, додаток показує першу галочку відразу ж. Повідомлення може бути ще й не завантажено, але Whatsapp бере на себе відповідальність і відразу ж показує користувачеві підтвердження відправлення. Це дає користувачеві відчуття, що Whatsapp насправді швидкий в обміні повідомленнями.
 
iMessage ж використовує зовсім інший підхід, який на жаль не створює таку ж позитивну зворотний зв'язок.
 
 image
 
 Прогрес-бар iMessage відображає процес відправки повідомлення
 
Коли користувач відправляє повідомлення в iMessage, синій прогрес бар рухається через весь екран поки повідомлення завантажується. Іноді це вимагає деякого часу, в залежності від швидкості підключення до мережі. І якщо відправити зображення, то прогрес-бар буде рухатися ще повільніше.
 
Чому це поганий користувальницький досвід? Користувач неминуче буде стежити за прогрес баром, як він рухається по екрану і якщо він рухається повільно те відчуття швидкості роботи відразу ж загубиться. У довгостроковій перспективі, це здатне вплинути на те, наскільки користувачеві комфортно в цьому додатку. А на практиці, Whatsapp і iMessage ймовірно відправляють що тексти, що фото за одне і той же час.
 
Таким чином, то як кожне з додатків відображає статус повідомлення може мати великий вплив на сприйняття швидкості роботи програми.
 
Існує безліч варіантів якими користуються дизайнери і розробники для того щоб показати — контент завантажується. Як правило вони використовують якийсь тип обертання, або ж прогрес-бар щоб показати що щось відбувається, а користувачеві тим часом слід чекати завантаження. У такому випадку користувач застряє на деякий час і це іноді може його засмутити. Це як спостерігати за пісочним годинником.
 
Останнім часом деякі програми вже почали використовувати підхід які дає відчуття більш швидкого завантаження контенту, і отже викликає менше роздратування у користувачів.
 
 image
 
 Facebook Paper app показує структуру блоків
 
Ця програма (дивіться FB Paper) показує «структуру» контенту ", ще до того як контент повністю завантажиться і з'явиться на екрані, користувач може бачити розташування і формат блоків контенту. І ви чекаєте розглядаючи щось на зразок плану або прототипу. У підсумку, коли контент з'явиться, у користувача складається відчуття плавності і природності всього процесу завантаження.
 
 image
 
 Колірна структура блоків у Pinterest
 
Pinterest використовує схожий підхід у своєму додатку і веб сайті. Але вони в цьому просунулися далі. Pinterest аналізує картинку в кожному пості і розбирається який колір в ній переважає. Далі, pinterest зберігає ці значення на сервері і коли додаток завантажує контент, то перехід між кольоровими блоками і власне самими зображеннями виходить дуже плавним. У підсумку це дає відчуття що картинки завантажуються набагато швидше.
 
Як дизайнери і розробники мобільних інтерфейсів ми повинні використовувати весь наш арсенал щоб створений нами користувальницький досвід забезпечував високу швидкість взаємодії, плавність і зручність використання. Це стає все більш важливим так як мобільні пристрої перетворюються на носяться, тобто в пристрої інтегровані в предмети одягу (швидше за все мова про окуляри як наприклад google glass — приметкой перекладача) де вимоги й очікування користувачів ще більш жорсткі.
 
Більше думок про дизайн продуктів і користувальницькому досвіді в моєму твіттері @ ozlubling .
 

  
Джерело: Хабрахабр

0 коментарів

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