Як отруїти життя мобільному користувачеві (шкідливі поради)
Напевно, всі в дитинстві дивилися смішний чеський мультик про Крота - Little Mole - невинного, безмовного і веселого, який допомагає іншим тваринам в лісі.
Він бореться проти людей, які руйнують їх природне місце існування. Одна з серій мультика дуже драматична: старий намагається позбутися крота і підсипає отруту.
Цього Крота можна зіставити з мобільним користувачем сайту. Чому?
Веб-дизайнери іноді відносяться до користувачів так само, як «погані хлопці» з мультфільму, особливо на мобільних сайтах.
Вони надходять точно також: роблять все можливе для того, щоб отруїти життя мобільному користувачеві.
Хочете знати, як? Сьогодні розповімо.
І навіть порадимо, як позбутися від користувача на вашому мобільному сайті.
Зробіть завантаження сайту максимально повільної
Створення повільного мобільного сайту - найкраща зброя проти мобільного користувача. Може відвідувач піти і повернутися з поштового відділення до того, як веб-сайт завантажиться? Відмінно! Ви ефективно отруюєте життя мобільного користувача.
Тепер давайте серйозно. Швидкість передачі даних в мережах мобільного зв`язку повільна, і навіть якщо швидкість збільшують до 3G і 4G, це працює не скрізь, і навіть така швидкість просто не може конкурувати оптоволокном.
Різні випробування і опитування показують: швидкість веб-сайту має істотний вплив на конверсію і його загальну ефективність. Користувач не повинен чекати більше, ніж кілька секунд, навіть при використанні EDGE.
Не забувайте, що швидкість веб-сайту - це один з важливих критеріїв Google для результатів пошуку та кампаній AdWords.
Рішення досить просте: подумайте про швидкість, коли закінчите розробляти концепцію веб-сайту.
Оптимізувати швидкість не так вже й складно:
- Зведіть до мінімуму передачу даних.
- Оптимізуйте зображення.
- Мінімізуйте CSS, javascript і HTML.
- Поліпшите час відгуку сервера.
- Увімкніть стиснення.
- Уникайте непотрібних переадресацій.
Є і доступні інструменти для перевірки швидкості сайту, наприклад, Page Speed Insights.
Включіть в дизайн каруселі
Користувач ніколи не повернеться.
Це правда: каруселі погано позначаються на призначеному для користувача досвід. Їх використання ризиковано.
На сайті компанії Nike (зліва) не зовсім ясно, як пройти до решти змісту. Best Buy (праворуч) робить це краще: наступні елементи видно, і тому очевидно, що можна прокрутити вправо.
Переважна більшість користувачів бачать тільки перше зображення, і банер на основі каруселей зазвичай просто ігнорували через «банерної сліпоти».
Якщо ви плануєте використовувати карусель на мобільному, переконайтеся, що вона відповідає таким критеріям:
- Не використовуйте карусель, щоб приховати непотрібне вміст.
- Каруселі сильні, якщо пов`язані з основним змістом.
- Використовуйте перший слайд, щоб оголосити інші слайди. Основна мета першого слайда - спонукати користувача подивитися другий і третій слайди.
- Зробіть навігацію зручною на невеликих телефонах. Ці маленькі точки, які використовуються в якості навігації на робочому столі, неможливо використовувати на мобільних телефонах!
- Переконайтеся, що призначені для користувача жести не вступають в конфлікт з жестами за замовчуванням.
- Карусель не повинна сповільнювати сайт.
Сховайте навігацію під гамбургер-меню
Коли ви приховуєте на сайті меню, люди перестають його використовувати. У нещодавно опублікованому дослідженні Nielsen Norman Group вказує, що прихована навігація на мобільному телефоні робить негативний вплив на призначений для користувача досвід.
Якщо ви не можете показати все меню, спростите його, або покажіть важливі частини.
Завжди показуйте хоча б кілька найважливіших пунктів.
Що робити, якщо ви не можете показати важливі деталі? Добре, сховайте його під значком гамбургера, і назвіть «Menu». Потім переконайтеся, що користувачі можуть використовувати веб-сайт без меню.
Зробіть все кнопки і посилання маленькими
Одного міліметра цілком достатньо.
Добре, давайте серйозно. Чи достатньо великі кнопки на вашому сайті, щоб по ним міг потрапити навіть боксер?
Відповідно до одного цікавого дослідження, якщо помістити кнопку в центрі мобільного екрану, вона може бути розміром до 7 квадратних мілліметров- але якщо помістити їх у верхній або нижній частині, вона повинна бути не менше 11 квадратних міліметрів.
Відео: Г. Остер. Всі шкідливі поради
Міліметри досить непрактичним для вебу. Ми використовуємо пікселі, чи не так?
Підказка: 160 точок на дюйм є стандартом пікселя для сенсорного екрану.
Знову ж таки, все, що вам потрібно зробити, це правильно встановити розмір:
Існує ще один крок. Розмір шрифта для більшості браузерів становить 16 пікселів, так що ми можемо використовувати наступне перетворення:
/ * 7mm = 44px = 2.75rem * /
.touch {height: 2.75rem; }
/ * 11mm = 69px = 4.3125rem * /
.touch-big {height: 4.3125rem; }
Ось так, хлопці. Не забудьте вказати запасний варіант для старих браузерів.
Зробіть чуйний дизайн, але тільки для деяких дозволів екрану
Щоб нормально користуватися вашим сайтом, користувач повинен купити телефон з певним розміром екрану. Інакше нехай іде геть!
Жарти жартами, але ми зіткнулися з величезною різноманітністю дозволів екрану на мобільних пристроях. Спочатку на базі Android, а тепер і пристрої компанії Apple.
І дуже багато сайтів, на жаль, зовсім не адаптовані під різні розміри екранів. І навіть немає обліку того, що користувач може переглядати сторінку в альбомному та книжковому режимі. Дуже ефективний засіб позбавитися від користувача раз і назавжди!
вимкніть масштабування
Вимкніть масштабування, якщо ви дійсно хочете зіпсувати життя своїм мобільним відвідувачам. Це нелюдяно - і дуже ефективно.
Але якщо серйозно, відключивши зуммирование, ви не тільки робите сайт незручним для користувачів з поганим зором.
Навіть користувачі з хорошим зором користуються зумом на мобільних пристроях, з різних причин:
- щоб добре розглянути зображення,
- так зручніше читати текст,
- для збільшення вмісту з низькою контрастністю.
Масштабування відключено на 40% сайтів електронної комерції, згідно з дослідженням Інституту Baymard. Безглуздо, чи не так?
Подібно до того, як користувачі комп`ютера не можуть обійтися без кнопки повернення і прокрутки, так мобільні користувачі потребують масштабування.
Користувачі повинні мати можливість збільшити розмір тексту на 200%.
Некоректно завантажуйте веб-шрифти
Що, користувач довго чекає завантаження сторінки? Добийте його, приховавши зміст або некоректно відбивши веб-шрифти.
У використанні веб-шрифтів немає нічого поганого. Навпаки, переконайтеся, що вони є першими елементами веб-сайту для завантаження.
Намагайтеся відобразити контент якнайшвидше, використовуючи системний шрифт.
Давайте подивимося на код. По-перше, javascript:
Відео: Heroes & Generals. Bad Tips. Шкідливі поради
var font = new FontFaceObserver ( `Webfont family`);
font.load (). then (function () {
document.documentElement.className + = `webfont-loaded`;
});
А тепер CSS:
body {
font-family: sans-serif;
}
.webfont-loaded body {
font-family: Webfont Family;
}
Кожен веб-сайт вимагає щось інше - враховуйте це під час розробки.
Захаращувати сторінку кнопками соціальних мереж
Якщо ви не можете отруїти користувача своїми силами, залучіть сусіда.
Кнопка Facebook, Twitter і Google незручні для користувачів мобільних пристроїв, з двох причин:
Вони завантажують величезну кількість даних, і уповільнюють завантаження веб-сайтів.
Вони ні до чого. Шерінг часто інтегрований в операційну систему.
Дослідження Moovweb, яке проводилося протягом року, показало, що серед 61 млн мобільних сесій тільки 0,2% користувачів використовували ці кнопки.
Застосуйте неправильний редирект на мобільну версію сайту
Ще один спосіб «замочити» мобільного користувача - зробити настільну і мобільну версію сайту, і неправильні редіректи на останню.
Це ми спостерігаємо постійно.
Правильне перенаправлення виглядає наступним чином:
Якщо ж URL не існує, то краще залишити користувача на звичайній версії, ніж перенаправити його на головну сторінку m.example.com.
Але ідеальне рішення - застосувати адаптивний дизайн, щоб посилання були одні й ті ж. Головне - продумати все так, щоб не приховувати основний контент.
сховайте контент
З цього випливає черговий шкідливий рада. Сховайте вміст від мобільного користувача. Їм воно не потрібно.
Подобається вам це чи ні, люди відвідують веб-сайти, щоб побачити контент. Так, ми змушені жити серед істот, яким потрібна інформація.
Користувач шукає контент. Дайте йому це якомога швидше. Потім, ви можете змусити його завантажити додаток або відправити свої контактні дані. На жаль, багато сайтів приховують контент, з абсолютно незрозумілих причин. Але ж можна прибрати щось інше - наприклад, ті ж кнопки соцмереж, які займають чимало місця!
Google вирішив, що, починаючи з січня 2017 року, буде карати сайти за такі жарти. Користувач повинен бачити те, що шукав.
Скільки мобільних користувачів ви отруїли сьогодні?
Тепер давайте серйозно. Ми не розповіли вам нічого нового.
Все це ви знаєте, але чомусь не робите. Перевірте свій сайт:
Будьте ласкаві до мобільних користувачам. Не будьте старим з мультика, який намагається позбутися від Крота у дворі свого будинку.
До речі, хочете знати, як закінчується казка? Крот виживає, сміється над старим і переїжджає в інший садок.
