Дизайн та юзабіліті - The Media Image - Website in progress

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

Найкраща порада, яку я можу тобі дати щодо створення дизайну для мобільного веб-сайту: нехай він залишиться простим! Але, зробити його простим зовсім не означає зробити його жахливим.

В ідеалі мобільний сайт виглядає як документ із вертикальним прокручуванням. Звичайний дво- або триколоновий дизайн не підходить для мобільних веб-сторінок. У кожному мобільному веб-документі є певні зони:

шапка (header);
Головне меню;
модуль під контент;
навігація другого рівня;
підвал (footer).

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

Розробляючи Rich Internet Application або веб-додаток для мобільних з використанням Ajax, обов'язково помісти в інтерфейс користувача кнопку фонової роботи, щоб мати можливість попередити користувача про те, що відбувається фоновому з'єднанні. Кнопка «offline» може бути корисною для користувача,якщо у нього немає можливості весь час знаходиться в зоні дії WiFi або він у роумінгу і не хоче якийсь час отримувати оновлення.

Ось деякі найкращі рекомендації, які можуть суттєво допомогти при розробці:

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

У випадку з low- і mid-end пристроями рекомендую повернутися до табличної верстки замість гумової на div-ах (прямо як в перші роки в Інтернеті). Але розміщувати більше одного посилання або елемента в одному рядку в проектах для таких пристроїв не раджу.

Я не хочу це купувати!

У повідомленні я запитував дозволу зняти плату за гру і пропонувалося два посилання: ТАК і НІ. І посилання були на одній лінії, один за одним одразу. Фокус, звичайно ж, був на засланні ТАК. Що я зробив? На автоматі я натиснув праву клавішу, щоб перемістити фокус на посилання НІ.

Що сталося? Права клавіша була у моєму браузері функцією «перейти за посиланням»! Перемістити фокус я можу використовувати лише клавіші ВВЕРХ-ВНИЗ, незалежно від того, як розташовані посилання на екрані. Виходить, через проблеми з юзабіліті я мав платити за контент, купувати який зовсім не хотів.

Ось чому ти повинен перевіряти свій веб-сайт на якомога більшій кількості різних реальних пристроїв і тому я раджу тобі використовувати лише одне посилання в одному рядку для low- та mid-end пристроїв.

Якщо ти хочеш докладніше вивчити тему мобільного веб-дизайну, то можеш ознайомитися з книгою Брайана Флінга «Мобільний дизайн та розробка» (Biblian Fling.на якому є список прикладів дизайнів для мобільних з поясненнями.

Серед представлених на Design4Mobile розділів, рекомендую ознайомитись з такими:

Screen Design Basics - зібрані десятки порад із розмітки.
Screen Design Patterns — перелік найпоширеніших рішень для створення кнопок, розмітки списків, fisheye lists, списків, що масштабуються, оформлення результатів пошуку, «хлібних крихт», каруселів, текстових полів.
Application Navigation - як реалізувати навігаційні списки, функцію автозаповнення, кнопку "Назад" та інше.

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

Glyphish – безкоштовна галерея стилів для iPhone, де ти можеш знайти приклади іконок, списків, вкладок та кнопок. На малюнку 3.1 показано доступні варіанти дизайну.

У деяких low- і mid-end пристроях є CSS баги, наприклад, як баг 100% ширини, який призводить до появи мінімального і дратівливого горизонтального скролінгу. Ти маєш протестувати свій сайт та внести необхідні зміни, якщо подібні речі відбуваються.

Приклади дизайну для тач-пристроїв

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

Touch Gesture Reference Guide - відмінний ресурс, на якому Люк Врублевскі (Luke Wroblewski) зробив короткий огляд більшості основних сенсорних команд, як їх використовувати, візуально відображення кожного з них і все це задокументував, а також зробив короткий огляд популярних платформ, що їх підтримують. Завантажити посібник можна за посиланням http://www.mobilexweb.com/go/touchguide.

Ось деякі корисні рекомендації для дизайну під сенсорні пристрої:

Нещодавно Nokia представила Flowella – безкоштовний інструмент для створення прототипів дизайну мобільного додатка за допомогою макетів та визначення зв'язків між екранами. Flowella може експортувати проект у Flash Lite або у віджети WRT для Symbian і загалом цей інструментарій ідеальний для тестування дизайну програми (завантажити Flowella можна на http://www.mobilexweb.com/go/flowella).

на сумісних пристроях використовуй тач-навігацію за допомогою пальця;
замість розбиття на сторінці роби нескінченні списки, в нескінченному списку (як на малюнку 3.2) є пункт «Ще», яким користувач може натиснути і додати до списку ще якусь кількість елементів (це робиться за допомогою Ajax або інших технологій). З метою збереження поточного рівня продуктивності потрібно обмежити кількість сторінок, що одночасно показуються. При додаванні наступних сторінок найкраще видаляти першу з DOM і коли кількість сторінок досягає числа n (наприклад, 5-и), то першим пунктом зробити «Попередня» (так буде гарантія, що одночасно показуватиметься не більше n сторінок);
використовуй функцію автоматичного очищення текстового поля для часто використовуваних (потрібно просто зробити іконку Х праворуч від поля введення, при натисканні на яку текстове полеполе очиститься);
застосовуй шаблон довгого натискання (long-press design pattern), також відомий як «Натиснути і утримувати» (touch and hold) для виклику контекстного меню (це означає, що якщо користувач натискає на якусь область більше 2 секунд, з'являється контекстне меню, що розкривається) );
кнопки навігації краще розташовувати в нижній частині екрана (або з правої, якщо йдеться про альбомний режим), тому що вона зручніша і ближче до пальця користувача;
аналізуй нативні програми у пристрої (можливо, почерпнеш якісь ідеї для юзабіліті).

Panorama UI

Наприклад, для екрана шириною 320 пікселів можна зробити інтерфейс шириною 1600 пікселів з п'ятьма різними екранами і користувач зможе перемикатися між ними за допомогою пальця, переміщуючи весь інтерфейс.

Відмінний дизайнерський прийом (використовується, наприклад, у Windows Phone 7) - останні 5-10 пікселів з правого боку екрану використовувати для показу фрагмента лівого краю наступного екрана і прямо з обрізаними елементами екрану. Такий прийом дає користувачеві зрозуміти, що докладніша інформація, меню або якісь потрібні дії доступні з правого боку екрана і якщо його перетягнути, то відкриється прихована інформація.

Пам'ятайте, що з панорамним UI, ми маємо справу з відображенням частини повного інтерфейсу.

Офіційний посібник з інтерфейсу користувача

Офіційні рекомендації щодо інтерфейсу користувача від виробників мобільних пристроїв можна знайти на http://www.mobilexweb.com/go/uiguides. Цей ресурс теж одне із джерел натхнення для дизайнерів під мобільні пристрої. Тут зібрані основні принципи побудови, приклади, поради та опис найпоширеніших помилок. Багато порад та прикладів будуються нативних додатках, але ми цілком можемо застосовувати і у своїх розробках.

Якщо ти використовуєш функцію тривалого натискання "touch and hold", то маєш пам'ятати, що у браузерів є ще й власні дії у відповідь на застосування цієї функції до таких клікабельних елементів як посилання, зображення або текст, який можна скопіювати та вставити. У браузерах з движком WebKit можна відключити виділення тексту (в текстових елементах) за допомогою webkit-user-select: none і потім створити своє меню.

Найбільш важливими посібниками для розробника є:

iPhone Human Interface Guidelines;
UI Guidelines for BlackBerry Smartphones;
Motorola's Best Practices for UI;
Nokia UI Visual Guidelines;
Sony Ericsson's UI Style Guidelines;
UI Guidelines для Windows Mobile;
UI Guidelines для Android.

На малюнку 3.4 показано фрагмент iPhone Human Interface Guidelines.