8 Золоті правила мобільного дизайну

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

За даними Statista, у жовтні 2018 року у нас було 3,9 мільярда унікальних користувачів мобільного Інтернету та більше 50 відсотків всіх веб-сайтів у всьому світі було створено через мобільні телефони . Великий веб-дизайн вже не є розкішшю, а щось необхідність.

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

01. Побудуйте цілеспрямований досвід

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

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

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

02. Адаптація вмісту на роботу в меншому просторі

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

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

Мета для макета одного стовпця: Одноразові макети допомагають з управлінцем обмеженим простором на невеликому екрані, а також дозволяють легким масштабуванням між портретним та ландшафтним режимом.

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

Використовуйте розбірливий розмір шрифту: 11 балів - це абсолютний мінімальний розмір для тексту. Цей розмір дозволяє користувачам читати текст на типовій відстані перегляду без масштабування.

Виберіть шрифти, які добре масштабуються: Якщо веб-сайт потребує читання, краще використовувати типові Sans-Serif, такі як Helvetica або Roboto.

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

Навчальна лабораторія MIT Встановлено, що середній розмір пальця становить 8-10 мм , роблячи 10mm x 10mm хороший мінімальний розмір цільового розміру.

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

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

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

Будьте обережні з рекламою та оголошеннями: Акції та об'яви можуть легко затінити вміст. Хоча повідомлення AD може працювати для деяких відвідувачів, у більшості випадків користувачі пропускають його та переходять до більш цінної інформації. Це явище відоме як банерна сліпота.

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

03. Оптимізувати вміст для сканування

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

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

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

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

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

04. Створіть передбачувану навігацію

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

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

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

ПРІЗИЦІЙНІ ВАРІАНТІВ Опції навігації : Організувати навігацію на основі того, як користувачі працюють з функціональністю. Найпопулярніші параметри навігації в глобальному меню повинні йти у верхній частині, а первинні дії повинні бути доступними у видимій області екрана.

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

Забезпечити інтерактивні елементи виглядають як інтерактивні елементи : При проектуванні кнопок та посилань, подумайте про те, як дизайн спілкується з ринком. Як користувачі розуміють елемент як інтерактивний об'єкт? Те, як об'єкт виглядає користувачам, як його використовувати. Візуальні елементи, які виглядають як посилання або кнопки, але не є інтерактивними (наприклад, підкреслені слова, які не посилаються або прямокутні коробки зі словами, які не є кнопками), можуть легко заплутати користувачів.

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

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

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

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

Тримайте свого користувача в одному вікні: Уникайте дзвінків до дії, які надсилають користувача до нових вікон. Деякі користувачі матимуть проблеми з перемиканням між Windows у мобільному браузері, і, можливо, не зможе знайти попередню сторінку.

05. Уникайте створення дорожніх блок

RoadBlocks Створення тертя та тертя - найгірший ворог конверсії. На щастя, є прості речі, які ви можете зробити, щоб їх.

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

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

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

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

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

Ось кілька речей, які ви можете зробити, щоб синхронізувати поточний прогрес користувача:

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

06. Проектування ефективних форм

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

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

• Мінімізувати загальну кількість полів. Завжди зберігайте форми як короткі та прості, як це можливо, видаляючи будь-які непотрібні поля. Запитайте лише те, що вам дійсно потрібно знати.
• Використовуйте автоматичне правильне, автоматичне капіталізація та автоматичне завершення, щоб зменшити шансer помилка користувача.
• Уникайте спадних полів. Скасування приховує параметри, і це створює додаткову вартість взаємодії - користувачі потрібно двічі торкнутися, щоб вибрати правильну опцію. Якщо ви використовуєте випадаюче поле для вибору варіантів, розгляньте його за допомогою перемикачів.
• Автоматично перейти до наступного поля, коли користувач натискає повернення.
• Мінімізувати помилки форми з в режимі реального часу.
• Використовуйте існуючу інформацію, щоб максимально збільшити зручність. Наприклад, ви можете попередньо заповнити деякі поля, такі як адреса доставки або інформацію про оплату для ваших зареєстрованих користувачів.
• Подумайте про запропонування альтернативних механізмів введення. Розглянемо, які можливості пристрою можуть бути використані, щоб забезпечити кращий досвід користувачів. Наприклад, замість того, щоб попросити користувачів вводити дані кредитної картки, надати можливість використовувати камеру пристрою для сканування картки та інтеграції систем, таких як Apple Pay та Google платити, щоб дозволити оплату в одному крані.

Надайте відповідну клавіатуру: Мобільні користувачі цінують веб-сайти, які надають відповідну клавіатуру для поля. Ця функція перешкоджає їм виконувати будь-які додаткові дії. Наприклад, коли користувачі повинні ввести номер телефону, ваш веб-сайт повинен відображати цифрові від 0 до 9 клавіатури.

Встановіть типи введення HTML, щоб показати правильну клавіатуру. Ось сім типів введення, що мають відношення до створення дизайну:

• Вхідний тип = "Текст" Відображає звичайну клавіатуру мобільного пристрою.
• Введіть тип = "Електронна пошта" Відображає звичайну клавіатуру та "@" і ".com".
• Вхідний тип = "тел" Відображає цифровий від 0 до 9 клавіатури.
• Вхідний тип = "номер" Відображає клавіатуру з цифрами та символами.
• Вхідний тип = "Дата" Відображає селектор дати дати мобільного пристрою.
• Вхідний тип = "DATETIME" Відображає дату та селектор часу мобільного пристрою.
• Вхідний тип = "місяць" Відображає селектор та селектор місяця мобільного пристрою.

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

07. Прагніть створити послідовний досвід

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

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

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

08. Створіть свій найкращий мобільний сайт

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

Ця стаття була опублікована у випуску 317 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити проблему 317 або Підписатися на мережу .

Пов'язані статті:

• 6 тенденцій, які змінюють обличчя мобільного інтерфейсу користувача
• 10 порад для кращого мобільного UX дизайну
• Як спроектувати зручні мобільні інтерфейси