Теорія мобільних веб сайтів

37

Від автора: мобільний веб сайт звинувачується не заслужено. Здебільшого він перебуває в тіні десктопів, або відіграє роль старомодного приятеля «рідних» додатків. На щастя, у нас є інструменти, в силах яких все змінити. Прогресивне поліпшення, принцип mobile-first і чуйно реагує дизайн ведуть нас до більш уніфікованим, спрямованому в майбутнє вебу. Це гарна новина. Погана новина? Ці інструменти марні, якщо у вас немає ліцензії на їх використання.

У багатьох випадках нас стримують клієнти та ті концептуальні моделі, яких вони дотримуються. Щоб клієнти засвоїли потенціал мобільних веб-сайтів, потрібно змусити їх думати далі настільних комп’ютерів і додатків.

Перспектива мобільного веб сайту – це агресивні продажі

Давайте зізнаємося: чуйно реагує дизайн вимагає більше часу і дорожче коштує.

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

Існує більш значну перешкоду, ніж час або вартість: це перешкода — зміни.

Змінюватися важко

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

Ми продовжуємо руйнувати веб кожен раз, коли спонукаємо користувачів до вибору: настільний або мобільний вебсайт.

ОЧІКУВАННЯ – ПЕРЕШКОДА НА ШЛЯХУ ПРОЕКТУ

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

ЕФЕКТИВНИЙ РАЦІОНАЛЬНИЙ МОТИВ (ПОКИ ЩО)

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

Ви просите оточуючих відкинути звичну систему, з якою вони знайомі і почувають себе комфортно;

Концепція залишається абстрактною, створюючи розрив між теорією і реальністю.

Якщо клієнт неспроможний уявити, як його вебсайти адаптуються до різноманітності розмірів екрану, то йому буде складно зважитися на цей підхід. Внаслідок невпевненості люди знову звернуться до перевірених традицій.

Якщо хочете підвести клієнтів до нових методів мислення, шлях допоможуть визначити спільні начерки.

При веденні клієнтів нетрадиційної дорогий перші кроки завжди даються легко. Як ви будете рухати їх вперед і запобіжите повернення з середини шляху?

ВИКОРИСТОВУЙТЕ ЕСКІЗИ ЯК ВИД ЕКЗОРЦИЗМУ

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

Створення робочого плану

Намічені нижче кроки відображають поточний процес. Хоча цінний кожен окремо, обміркуйте, як на наміченому шляху вони спрацюють спільно в цілях управління мисленням групи. Постарайтеся постійно підходити до дизайну з різних кутів, чергуючи техніки, що вимагають від групи зосередження (конвергентного мислення) і вимагають від неї досліджень (дивергентного мислення). По мірі виконання можуть виникнути конфліктні ідеї. Скористайтеся цими точками розбіжності, так як вони можуть виявитися ключем до руйнування неподатливых умоглядних моделей.

Поточний процес роботи над нашим задумом наступний:

Встановіть, визначте цілі. Розташуйте мети роботи у відповідності з пріоритетом. Встановіть правила і критерії, відповідно до яких будуть обговорюватися і оцінюватися ідеї.

Накидайте каркас коміксу. Виберіть вміст, існуюче поза межами екрану. Дайте людям область, в якій можна створювати модель.

Mobile-first. Попросіть групу зосередитися на інформаційній ієрархії і цілях користувача. Вийміть з мізків «малоэкранные» ідеї (особливо ті важкі, центровані на додатках) і перекладіть на папір.

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

Начерки концепції. Спільно перебудуйте ідеї в нові моделі, що працюють незалежно від розміру екрана або пристрою.

Установка

ВИЗНАЧТЕ БІЗНЕС-ЦІЛІ ВЕБ-САЙТУ І ПОТРЕБИ КОРИСТУВАЧА

Група зацікавлених осіб
Час: від 30 до 60 хвилин.

Встановіть і розташуйте мети за пріоритетом. Перед початком малювання ми постараємося визначити деякі параметри. Почнемо з установки цілей вебсайту, яким забезпечимо прив’язку до більш широким задачам організації. Важливо уникати всього, що описує окремі характеристики функціональності. «Швидкі посилання» і «обертове слайдшоу» – це не цілі. Робимо на дошці або великому аркуші паперу список як можна більшої кількості цілей, призначаючи кожної пріоритет.

Визначте аудиторію і потреб користувачів. Далі створюємо новий список користувацьких потреб. Цю інформацію треба витягти з реальних досліджень і бесід з користувачами. При найгіршому сценарії, якщо ви нездатні назвати жодної, то можете приблизно оцінити розуміння клієнтом своєї цільової аудиторії і того, якими він сприймає її потреби. Почніть з ідентифікації основної групи користувачів і складання списку завдань, які їй доведеться вирішувати на вебсайті. Якщо складання списку застосовних на практиці завдань представляє складність, подумайте про тих питаннях, які можуть виникнути у цій аудиторії при вході на сайт. Спочатку про те, що мотивує їх увійти, і яка інформація може виявитися для них найбільш цінною? Після проведення «мозкового штурму» за потребами своєї основної цільової аудиторії, переходите до вторинних аудиторіям.

Проведіть «мозковий штурм» мобільних можливостей. Зараз, коли ви створили список цілей вебсайту та потреб користувача, пора почати ростити мобільний «насіння». На цій стадії нашою метою є зрушення з звичного способу думок про те, що мобільний вебсайт повинен бути додатковим або «полегшеним». Я змушу групу подумати про те, які можливості виникають, коли користувач не прив’язаний до столу. Що, якщо він валяється на дивані, на роботі або де-то ходить? Можливості різних видів пристроїв надають здатність взаємодії з раніше не існували контентом? Тут завданням є генерування безлічі різних ідей, навіть якщо деякі з них виявляться неймовірними. Воодушевите людей можливістю додавання, а не вирахування з вебсайту.

Ця вправа не повинна втомлювати, так що постараємося витратити на нього не більше години.

Почніть робити начерки

Закінчивши з установками, пора почати робити начерки. Ескізні вправи, схоже, час від часу трохи змінюються в залежності від динаміки і розміру групи, з якою ми працюємо. Порахувавши кількість учасників, постараємося обмежити робочі групи приблизно до 10 або менш людина. Так кожному випадає шанс попрацювати індивідуально, але при цьому група досить велика, і можна розбитися на маленькі команди. Чим більше в групі окремих клаптиків, тим краще. Замальовки повинні бути простими і, що більш важливо, жартівливими. Це веде нас до першого вправі: коміксами з каркасних фігурок.

КОМІКСИ З КАРКАСНИХ ФІГУРОК

Команди з двох-трьох
Час: 30 хвилин плюс обговорення.

Створювати комікси з фігурок-паличок легко. Розділіть свою групу на команди по дві людини. Дайте кожній аркуш паперу, заповнений квадратними секціями, і попросіть намалювати грубий начерк-комікс, що відображає члена цільової аудиторії, що заходить на сайт і повністю виконує свою задачу. Ми зовсім недавно застосовували цю методику при роботі з Маріанським університетом (Marian University) в штаті Вісконсін (Wisconsin). Щоб задати напрямок своїм початківцям художникам, ми уточнили завдання: “Почніть малювати розповідь у картинках з персонажа, що представляє вашу цільову аудиторію. Комікс про нього не починається з вашого вебсайту. Подумайте про місце, де починається розповідь. Що мотивує його до відвідування веб-сайту, і які дії він робить, зайшовши на нього? Яке він використовує пристрій?»

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

Малювання коміксів – цікавий метод представлення нових прикладів використання сайту, хоча може виявитися непередбачуваним.

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

ШАБЛОНИ 3-UP MOBILE-FIRST

Поодинокі замальовки
Час: 30 хвилин плюс обговорення.

Ми змусили учасників думати в правильному напрямку: розповідях про людей, що використовують вебсайт. Потім зосередимося на інтерфейсі сайту. Я покажу на дошку, заповнену позначками про користувачів і завданнях, і зазначу, що включення всього цього в одну сторінку не спрацює. Після короткого нагадування про підхід mobile-first ми роздаємо всім в кімнаті шаблони 3-up, а потім вирішуємо, на чиєму основній сторінці сторінках) слід зосередитися. Інструкція до цього вправі: “Допустіть, що ваш користувач застосовує пристрій з маленьким екраном. Для складної інтерактивності немає місця, і простір для представлення вмісту обмежена. Що ви покажете на цій сторінці? Зосередьтеся на пріоритеті контенту та дії, які потрібно стимулювати.»

За допомогою цього та інших вправ із замальовками переконайте всіх сфокусуватися на пристосовності контенту, а не контейнера. Оскільки «мозкові штурми» і розкадровка заохочують мислити широко і експериментувати з великим спектром ідей, це вправа створено для перевірки цих ідей. Шаблони вузької сторінки вимагають від співробітників зосередження і замальовування тільки найбільш важливих ідей та елементів сторінки. На цій стадії багато начерки все ще будуть виглядати як додатки. Спочатку це нормально і очікувано. Коли закінчиться малювання, попросіть кожного учасника пояснити свої ідеї іншої групи.

Мобільні шаблони змушують учасників зосередитися на важливому контенті і діях.

ЧУЙНО РЕАГУЮТЬ ШАБЛОНИ 6-UP

Поодинокі замальовки
Час: 30 хвилин (без обговорення)

Якщо б вийшло повністю пройти замальовки і процес дизайну без впадання в застарілі традиційні переконання, це було б чудово. Але хоча ми вже так далеко зайшли з новими ідеями, насправді ще нічого не зроблено для позбавлення від «сплячих агентів» — уявлень про те, «яким повинен бути вебсайт», так глибоко укорінених, що просто зобов’язані виникнути заново.

У вправі-замальовці 6-up ми попросимо кожного члена групи виділити свої оригінальні ідеї з замальовок 3-up та обміркувати їх застосування до різних екранів. Якщо представляються нові елементи сторінки, вони повинні бути виправдані і безпосередньо прив’язані до раніше визначених завдань користувача або вимогам сайту. Ми злегка модифікували традиційний вправа 6-up так, щоб між пропорціями шести панелей мінливість; блоки все ще маленькі, тому малюнки залишаються зразковими. У цій вправі мені подобається те, що воно спонукає учасників вийти за межі своїх первісних уявлень та засвоїти нові. Ось де ви побачите людей, які відчайдушно намагаються виконати щось на зразок горизонтальній навігаційної панелі або ковзного ротатора зображень. Вони намагаються помирити свій імпульс ввести ці стандартні елементи з завданнями і історіями, над якими попрацювала група. З усіх вправ це, схоже, найскладніше.

Шаблон 6-up заохочує учасників вийти за межі своїх споконвічних уявлень і підштовхує до нових. Може вийти пристойний хаос.

Приблизно через 10 хвилин, коли більшість вже зробили начерки самих простих ідей, я часто проходжу і роздаю «Замітки до роздумів» (Mental Notes) (див. нижче), щоб надихнути учасників на обмірковування цілей і поведінки, яке вони хотіли б стимулювати. По закінченні часу створення ескізів ми просто переходимо до накиданнях концепції, не проводячи групового обговорення.

НАЧЕРКИ КОНЦЕПЦІЇ 1-UP

Команди з двох-трьох
Час: 30 хвилин плюс обговорення.

Якщо вправи успішно виконані, учасники опиняться в стані крайнього замішання. Вебсайт, який спочатку вони могли так чітко собі уявити, тепер виявитися туманним хаосом — і це чудово! Це як раз те, що вам потрібно. Схоже на весняну прибирання, коли в будинку виявляється більше безладу, ніж до того. На хвилі цього замішання можна почати реконструювання. Знову зберіть учасників команди і змусьте попрацювати над ідеями один одного спільно. Дайте кожній команді виробити єдину концепцію, що представляє адаптивне рішення. По закінченні вивісите на стіні великий порожній аркуш паперу і дайте кожній команді вивісити малюнки та представити групі свою концепцію. Попросіть їх описати еволюцію свого дизайну. Крім того, пройдіться за власним задумом, який в ідеалі повинен був розвинутися нових ідей. Використовуйте паперовий задній фон для додавання заміток про те, які ідеї резонують з людьми, або позначки прапорцями тих областей, яким може знадобитися додаткове обдумування. Потім ви можете згорнути весь аркуш з начерками і повернути своїй команді.

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

ПІДКАЗКИ ДО ГРУПОВИМ ЗАРИСОВКАМИ

Запасіться ручками, ручками, олівцями, папером та іншими речами, які можуть вам знадобитися.

На всі демонструйте приклади.

Якщо ви Пікассо, то непогано спеціально робити грубі, зразкові малюнки. Дайте учасникам можливість відчути, що вони теж так можуть.

Увімкніть музику, тому що тиша скрутна, і не повинно бути відчуття того, що ви проводите тестування. «Chutes Too Narrow» від «The Shins» і «The Kinks are the Village Green Preservation Society» – ось два дуже підходящих альбому.

Запропонуйте Mental Notes. Мені подобається давати людям можливість змальовувати з карт Mental Notes і обіцяти «призи і славу» тим, хто зможе впровадити дані принципи в свій дизайн.

Не буває поганих малюнків. Якість нарису не має значення —малювати означає мислити. Хваліть ідеї і стимулюйте дослідження.

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

Деякі не захочуть брати участь в малюванні. Запропонуйте помалювати за них або дозвольте їм взяти участь тільки в діалозі.

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

Закінчуємо

До закінчення роботи всі відчують творче перевтома, будь-які ідеї закінчаться. Концепціям, поданих до кінця дня, буде не вистачати відбитка хазяйської індивідуальності, так як в їх вдосконалювати брали участь вже все. Хоча ці начерки прямо не могли стимулювати остаточний дизайн, учасники все одно будуть знати, що внесли свою лепту. Що ще важливіше, ви видалите шари абстрактності, навколишні адаптивні, апаратно-незалежні рішення. Те, що колись було складно уявити, тепер стало набагато достижимее. Ви також, будемо сподіватися, вичистили вперті ідеї, поховані в головах клієнтів, які, схоже, випливають на поверхню в самі невідповідні моменти. Спільні замальовки допомагають зробити стрибок до розуміння справжнього потенціалу мобільного веба до розширення, а не обмеження способів взаємодії з Мережею. Зажевріли можливостями, в своїх організаціях вони навіть могли б стати захисниками дружнього підходу до майбутнього Веба. Якщо ви коли-небудь журилися при вигляді проекту, не розкриває свій потенціал, то зрозумієте, як це важливо.

Не існує секретного способу змінити те, у що вірять люди, або подолати концептуальні моделі, до яких вони схиляються. Ми завжди будемо боротися з упертюхами та їх рішеннями, які, схоже, викликаються страхом, а не стратегією. Сподіваємося, ви виявите, що впровадження спільних ескізних груп в роботу ваших клієнтів допоможе перемогти в битві і побудувати більш доступну Веб-мережу. А які методики ви застосовуєте?

КОШТИ

Каркасний комікс (Stick figure comic strip) (PDF)

Мобільний шаблон 3-up (3-up mobile template) (PDF)

Шаблон 6-up (6-up template) (PDF)

Лист концепцій (Concept sheet) (PDF)

На цьому урок пояснює, що таке мобільні веб сайти, закінчено, бажаю всіх вам благ!