Мобільний веб-дизайн 10 порад для кращого юзабіліті

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

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

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

1. Визначте роздільну здатність екрана

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

Ось список веб-резолюцій, популярних на мобільних пристроях, починаючи з лютого 2011 року, представлених Uxbooth.com з їх опублікованою статтею, Міркування для мобільного веб-дизайну (Частина 2): Розміри, Девід Леггетт. Автор пояснює кілька моментів щодо розмірів дисплея та рішень для макетування.

2. Розбийте веб-сторінки невеликими порціями

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

Для прикладу, наведеного нижче, версія мобільного сайту CBS News відображає лише головний розділ новин і розбиває статті новин на невеликі частини. Хоча Treehugger представляє себе зі своїми останніми статтями і останніми твітів з деякими особливостями повного сайту. Обидва сайти мають користувач натиснути на текстове посилання для перегляду решти статті.

Новини CBS

Treehugger

3. Спростити конструкцію

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

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

Найкраща покупка

YouTube

4. Можливість перегляду повного веб-сайту

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

Наприклад, Ars Technica має свою кнопку посилання на стандартний сайт, розміщений на заголовку. В той час, як Shangri-La мають їхній повний зв'язок вебсайту розміщеного на footer.

Ars Technica

Шангрі-Ла

5. Розташування навігації

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

D&G

Політико

Щоденний гороскоп

6. Використовуйте текстові посилання

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

A List Apart

Reddit

7. Зробіть різницю між вибраним посиланням

Переміщення курсору вниз призведе до прокрутки сторінки та висвітлення посилань відразу. Отже, важливо чітко порадити користувачеві, який елемент знаходиться у фокусі. Це можна зробити, змінивши колір шрифту та кольору тла посилань і кнопок, або просто додавши кілька посилань навколо посилань, щоб збільшити область, що піддається кліку, приблизно 44px на 44px. Geek Squad і Diesel використовували великі шрифти для текстового тексту.

Geek Squad

Дизель

8. Балансові ланки

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

Flickr

Twitter

9. Зменште введення тексту користувача

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

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

Fedex

Tumblr

10. Ніяких вискоків або освіжень

Мобільні браузери зазвичай не підтримують спливаючі вікна. І якщо б вони це зробили, вони мали б дуже вузький простір, щоб потрапити. Тримайтеся подалі від їх використання, щоб уникнути непередбачуваних результатів. Крім того, не потрібно періодично оновлювати сторінки, щоб запобігти заповненню обмеженої пам'яті пристрою. Нехай користувач оновить вміст.

Коротко

Отримати творчість та застосувати свій веб-дизайн для мобільних пристроїв по-новому. Зробіть свій вміст досить привабливим та корисним. Дайте користувачам те, що вони хочуть, коли вони цього хочуть. Користувачі не хочуть глибше копатися на сайті, щоб знайти те, що вони шукають у мобільному Інтернеті.

Чи є у вас бажані сайти для мобільних пристроїв, які дійсно вас надихнули? Чи можете ви поділитися деякими своїми порадами щодо веб-дизайну? Дайте нам знати!

Подальше читання

1. Чуйний веб-дизайн (alistapart.com)
2. Зробіть свій сайт мобільним (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. iPhone Simulator