Важливість досліджень при розробці функції Compatibility View

Питанню Compatibility View в Internet Explorer 8 присвячено кілька статей, але в жодній з них ми не розповідали подробиці досліджень, яке ми проводили для розробки даної функції. Ми збирали дані про Compatibility View протягом всього бета-тестування IE8 і взяли багато рішень про дизайн даної функції, грунтуючись на наших даних з дослідницьких лабораторій, польових досліджень, інструментів і даних зворотного зв'язку від спільноти. Зараз я б хотів зробити буквально наступне: відповісти на декілька часто присилаються питань, які ми отримуємо, про досвід роботи з Compatibility View, і пояснити, як дані дослідження вплинули на наші рішення. Сподіваюся, що це дозволить вам поглянути на наш процес розробки зсередини і те, як ми використовуємо доступні дані для прийняття рішень про дизайн функції.

Нинішній дизайн
Отже, ми в браузері, давайте зробимо огляд. За нинішнім дизайну, при стандартній розмітці, кнопка Compatibility View знаходиться в кінці адресного рядка, поруч з кнопкою оновлення, якщо в код сайту не включений мета-тег сумісності або HTTP-заголовок. На кнопці знаходиться іконка сторінки. Перші два рази, коли користувач знаходиться на сторінці, на якій видно ця кнопка, і оновлює її, йому буде показано спливаюче сповіщення, що вказує на Compatibility View.

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

Чому кнопка розташована поруч з кнопкою оновлення сторінки?
Однією з основних скарг щодо функції Compatibility View завжди була її непомітність. Якщо користувачі не можуть знайти дану функцію, то яка від неї користь? Коли ми почали тестування Compatibility View в наших лабораторіях дослідження користувачів, ця функція була представлена кнопкою в командній панелі "Emulate IE7".



Для тесту ми розробили завдання, в якому учасникам необхідно було зайти на сайт, який, як ми точно знали, був непридатним для використання до включення режиму Compatibility View. Коли вони відкривали цей сайт і розуміли, що використовувати його неможливо, ми їх питали "Що б ви зробили, якби потрапили на такий сайт?". Найчастішою відповіддю була відповідь про оновлення сторінки. Після більш глибокого вивчення, чому користувачі саме так намагалися відновити сторінку, більшість відповідей фокусувалася на досить специфічному інцидент, коли учасник бачив сторінку, яка виглядала не зовсім коректно, і оновлення сторінки вирішувало проблему. Ще одним частим варіантом відповіді було пошукати щось в меню інструментів.

У даній статті ми часто використовуємо термін "виправити сторінку", оскільки саме так наші учасники називали те, що вони роблять. Ми знаємо, що технічна точність даного терміна досить спірна, але ми дотримуємося думок наших учасників про сценарії.

Практично ніхто не здогадався використовувати кнопку Emulate IE7, навіть при тому, що раніше під час доповіді вони вже бачили пояснення призначення цієї кнопки. Основна проблема була в тому, що слово "емулювати" ніяк не асоціювалося з виправленням сторінки у наших учасників. Це було технічний опис функції, а не опис того, що користувач шукав в даній ситуації. Також ми знали, що проблема була не в тому, що кнопка була занадто непомітна. Я маю на увазі, що це була ВЕЛИКА кнопка, яка була до того ж абсолютно новою в командній панелі. Наша проблема була не в тому, що вона не залучала користувальницьке увагу, а в тому, що вона не відповідала ментальної моделі користувачів.

Грунтуючись на цих даних, ми вже знали, що більшість користувачів звернуть свою увагу на кнопку оновлення сторінки, якщо вони зіткнуться з сторінкою, що вимагає виправлення. Щоб використовувати переваги цієї природної тенденції ми розмістили кнопку режиму Compatibility View поруч з кнопкою оновлення сторінки – поруч з найбільш імовірним місцем, куди зверне свою увагу користувач, якщо сторінка виглядає не так, як личить. Крім того, щоб відповідати вимогам невеликого відсотка користувачів, які чекають знайти що-то в меню інструментів, ми також туди додали посилання.

Чому використовується така іконка?
Ми знали, що використання іконки, довжина імені якої дорівнює "Emulate IE7", буде нереально розмістити поряд з кнопкою оновлення. Вона посіла б занадто багато місця, до того ж ми знали, що ідея емуляції IE7 в IE8 була дуже дивною для більшості користувачів. Ми обміркували це питання і розробили серію потенційних іконок, які могли підійти для Compatibility View. Однією з проблем, з якими ми зіткнулися, було те, що за допомогою однієї лише іконки важко пояснити, що саме робить Compatibility View. Ми пробували різні варіанти, такі як зображення розповзлий блоків, зображення частин сторінки, які могли бути не вирівняні. Ці версії були занадто абстрактні для того, щоб донести спільну ідею, і часто справа не в розповзлий блоках (тобто, у меню можуть бути неправильні фонові кольору). Ми зупинилися на іконці сторінки, тому що це найкраще корелювало з тим, як учасники описували, те, що сторінка візуалізувалися неправильно (тобто, зламана, зіпсована).

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

Коли ми тестували цю ікону в лабораторії, ми виявили, що більшість учасників розуміло, що іконка повинна щось зробити з проблемною сторінкою, на якій вони зараз знаходяться. Бачення іконки змушувало більшість людей прочитати спливаючу підказку, яка пояснювала суть функції. Після прочитання підказки у більшості ми спостерігали позитивну реакцію на цю іконку, і що вона має сенс, враховуючи те, що робить ця функція.

Деякі користувачі думали, що відображення цієї іконки на сторінках, які відображалися правильно, могло збити користувачів з пантелику і змусити їх думати, що сторінка яким-небудь чином неправильно відображається, але в наших дослідженнях ми не бачили ніяких цього підтверджень. Учасники навіть не дивилися в сторону кнопки Compatibility View, якщо вони не були в ситуаціях, коли вона їм потенційно повинна була допомогти, що і було однією з наших цілей при розробці.

Чи будуть розуміти люди для чого потрібна ця функція?
Ми очікуємо, що більшість користувачів зрозуміють сенс Compatibility View і коли її потрібно використовувати. З усіх наших лабораторних учасників, які прочитали підказку Compatibility View, спливаюче повідомлення або просто випробували функцію, всі зрозуміли його призначення. Що ще більш важливо, всі, хто зрозуміли призначення функції, продовжили використовувати її на сайтах, на яких вони зіткнулися з проблемами. Це діє як для наших лабораторних учасників, таки і в разі польових досліджень.

Навіщо потрібні підказки?
Після декількох раундів лабораторних тестувань і отримання даних зворотного зв'язку від учасників наших польових випробувань, ми все ще помічали, що деякі з наших учасників не помічають кнопку Compatibility View навіть після того, як вони натискали кнопку оновлення сторінки на сайті з проблемами при виведенні сторінок. Що досить-таки природно, вони вдавалися до автоматичного поведінковому шаблоном швидкого натискання кнопки оновлення і повернення погляду назад до вмісту сторінки, щоб побачити, вирішило чи це їх проблему. Нам було необхідно прийняти важливе рішення, додавати чи будь-якого роду повідомлення, які дали б знати користувачеві про Compatibility View, коли ця функція може їм допомогти? Плюс у тому, що ще більше людей, які зможуть скористатися перевагами Compatibility View, знайдуть цю функцію. Мінус полягає в тому, що ми додаємо ще одне повідомлення в систему.

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

Навіщо потрібні два спливаючих повідомлення?
Спочатку спливаюча підказка показувалася один раз, коли користувач оновлював сторінку, в перший раз показувала іконку Compatibility View. Як я вже говорив, його висновок дався нам насилу. Але до нас не переставали надходити дані, що одноразової показу повідомлення для користувачів недостатньо, тому ми тестували можливість показу до трьох повідомлень (після того, як хтось оновлював сторінку з іконкою Compatibility View).

У лабораторії ми показували учасникам три сайти з проблемами виведення. На кожному сайті ми запитували їх, що вони б робили, якби потрапили на такий сайт. Більшість, як і очікувалося, клацали по кнопці "Оновити. Ми виявили, що дві третини людей, яким показували підказку, реагували на першу, а третина – лише на друге. Відображення другий підказки привертало увагу групи людей, які під час відвідування першого сайту фокусувалися на вмісті сайту, але більш імовірно могли помітити щось, що знаходиться за межами їх стандартного поведінкового шаблону при другому відвідуванні.

Також була група користувачів, яка бачила всі три повідомлення і відмовилася від використання або проігнорувала їх. Ми вважаємо, що ця група користувачів не звернула б увагу на підказки поза Залежно від того, скільки разів ми б показали їм підказки. Це привело нас до ідеї не показувати підказки три рази, так як у нас не було ніяких доказів того, що відображення більш ніж двох підказок дозволить привернути додаткову увагу користувачів і є реальний сенс додаткової комунікації з користувачем (наприклад, дані зі статті про Action Center з блогу E7).

Підсумки
Я сподіваюся, що дана стаття дозволила вам поглянути на те, як ми як команда інженерів використовуємо дані досліджень для прийняття деяких з наших дизайнерських рішень. Як ви багато раз могли вже помітити, дослідження та роздуми можуть втілитися в реальних функціях (і це тільки короткий, я навіть не вдавався в наші інструментальні дані). Ми завжди прагнемо обгрунтовувати важливі рішення на отриманих даних – з лабораторій, польових випробувань, інструментальних даних і даних зворотного зв'язку від спільноти. Якщо ви хочете дізнатися більше про наших дослідженнях в Microsoft, то відвідайте наш сайт для досліджень.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*