Принцип Парето у веб-дизайні - розробляйте більш ефективний сайт за правилом 80/20

Проблема перфекціонізму у веб-дизайні

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

Що таке принцип Парето?

"Правило 80/20", яке іноді називають принципом Парето, стверджує, що 80% наслідків походять від 20% причин. Вперше принцип Парето був введений італійським економістом Вільфредо Парето в 1895 році, коли він помітив, що 80% багатства Італії належить лише 20% її населення. Він також помітив, що 20% горохових стручків на його городі дають 80% гороху! Принцип Парето припускає, що кілька ключових елементів відповідають за отримання більшої частини певного результату. З того часу він був застосований до багатьох інших сфер, включаючи бізнес, економіку, психологію і навіть може бути практичним для повсякденного життя.

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

Принцип Парето у веб-дизайні та цифровому маркетингу

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

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

Що можна зробити з цією інформацією, щоб поліпшити продажі для цього клієнта?

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

Завжди починайте з питання "Чому

(Джерело зображення: Envato Elements)

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

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

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

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

Дизайн для мобільних пристроїв може допомогти вам спростити ваш сайт

При розробці веб-сайту ви хочете надати користувачам ефективний та інтуїтивно зрозумілий досвід. Найкращий спосіб досягти цього - розробка з використанням підходу "mobile-first". Ця концепція передбачає створення веб-сайтів, які в першу чергу оптимізовані для мобільних пристроїв, а не десктопних веб-сайтів, які адаптовані для мобільних. Чому це необхідно? У 2022 році, за даними techjury.net, мобільні телефони генерують 60,66% трафіку веб-сайтів, тоді як десктопи та планшети разом відповідають за 39,34%. Це може відрізнятися в різних галузях та на різних веб-сайтах, але ця тенденція заслуговує на увагу. Зосередивши свій дизайн на мобільній версії сайту, ви можете збільшити шанси на успіх на свою користь.

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

Провести дослідження та проаналізувати сайти конкурентів

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

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

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

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

Планування: Визначення ключових особливостей проектування

(Джерело зображення: Envato Elements)

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

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

Спочатку зробіть макет, не проектуйте у веб-платформі для економії часу

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

Робота з контентом, який буде добре ранжуватися в пошукових системах

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

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

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

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

Спростити вибір шрифтів, кольорів, ієрархії та візуальних елементів

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

Висновок: Максимізація впливу

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