Поширені помилки в дизайні веб-сайтів; Тип WP
О так. Ми всі їх знаємо: міні-картинки, які не можна збільшити, фотографії, які досі не завантажуються через 3 хвилини, та незрозумілі пункти меню. У двох словах: багато помилок часто повторюються. Ось як викорінити їх:
Не турбуйтесь. Не потрібно перебирати дошку! З тобою нічого не трапляється! Піратське слово честі!
Я плаваю для вас нескінченним морем новин WordPress і готую це раз на місяць безкоштовно в електронному листі.
Не турбуйтесь. Вам не потрібно летіти на WP-Topia, щоб отримувати останні новини про розробку WordPres.
Я лечу для вас через нескінченні галактики новин WordPress і готую це раз на місяць безкоштовно в електронному листі.
Зображення не можна масштабувати
Ви коли-небудь відвідували веб-сайт і хотіли натиснути на маленьке зображення, щоб побачити його краще, чіткіше і, насамперед, більше? Це просто дурно, якщо це взагалі не працює. Багато зображень в Інтернеті просто не можна натискати взагалі, і вони, як правило, недоступні у більш високій роздільній здатності.
Якщо ви - як рекомендується - використовуєте WordPress як систему управління вмістом для роботи з вашим веб-сайтом, ви можете впевнено завантажувати всі зображення у високій якості. Це автоматично зменшує розмір зображень залежно від того, як вони використовуються. Це займає трохи більше часу під час завантаження (залежно від швидкості вашого власного з’єднання з Інтернетом), але вам слід прийняти цей час очікування, щоб отримати плюсовий бал від відвідувачів вашого веб-сайту. Просто зробіть бажаний вибір у розділі "Розмір", вставляючи відповідне зображення (див. Наступне зображення - примітка: у новіших версіях це виглядає трохи інакше, але схоже).
Стиснення зображень JPEG та GIF
Зображення JPEG можна стиснути заздалегідь із якістю від 60 до 80 за допомогою обраного вами програмного забезпечення для обробки зображень. Часто достатньо рівня якості від 40 до 60. Однак не слід вибирати менше, однак, оскільки стиснення в іншому випадку буде занадто виділятися, а фотографія або малюнок потім "розмиються".
У випадку веб-сайтів фотографів, фотографії повинні відображатися з високою роздільною здатністю. Якщо вам потрібна картинка торта, наприклад, для сторінки на тему "схуднення", графіку, звичайно, можна стиснути краще. (Зрештою, торт не повинен виглядати надто смачним для, можливо, трохи пухких відвідувачів 😉).
Використовуйте GIF замість формату JPEG, лише якщо ви зображаєте графіку, а не фотографії. За замовчуванням формат GIF має лише 256 кольорів і не підходить для відображення фотографій із великою глибиною кольору. Є також формати з більшою глибиною кольору, в яких, простіше кажучи, кілька окремих зображень із власною палітрою кольорів зберігаються в одному файлі. Незважаючи на це, хорошої швидкості стиснення неможливо досягти при великій глибині кольору.
Неправильні імена в меню
Частина самого дизайну полягає в тому, що користувач може орієнтуватися з точки зору навігаційних технологій. Чи знаєте ви, що означає "портфоліо"? Не всі підозрюють, що це "Про нашу компанію" чи щось подібне. Портфоліо означає, що посилання містить не лише одну сторінку. Так колекція посилань або пропозицій, наприклад.
Не слід нічого ускладнювати. Ви можете безпечно видалити або перейменувати наступні посилання зі свого меню:
Меню навігації
Замість «Портфоліо» просто вкажіть «Про мене», у випадку компанії «Наша пропозиція» або будьте дещо конкретнішими. Приклади: "Наші фотографії" або "транспортні засоби".
Всім відомо, що термін «відбиток» містить усю необхідну юридичну інформацію, таку як номер податкового податку з продажу (докладніше див. Закон про телекомунікаційні послуги (TDG) §6). Відбитку немає місця в головному меню. В Інтернеті є більш захоплюючі речі, ніж необхідність читати податкові номери в такому пункті меню, як "Контакт". Посуньте його донизу на бік. Там його підозрюють і знаходять ті, хто його шукає.
Після "Контакту" ви повинні запропонувати лише форму та вказати адресу компанії та номер телефону. Клієнту або відвідувачеві слід якомога простіше зв’язатися з вами. Але не генеруйте форму монстра. Все, що вам потрібно зробити, це вказати своє ім’я, номер телефону або електронну адресу та вільне текстове поле. Ніхто не хоче вказати свою повну адресу чи навіть дату народження, коли йому задають невеличке запитання. Або ви самі добровільно пишете таку інформацію у будь-якій знайденій формі Інтернету? Можливо, ні.
Зробіть початкову сторінку початковою, а не "Домашня сторінка". Як уже зазначалося, багато людей досі не володіють ідеальною англійською мовою. Навіть якщо зараз це нібито стало стандартом.
На деяких веб-сайтах можна навіть зовсім обійтися без терміна в меню. Натомість ви завжди посилаєте логотип назад на домашню сторінку.
Забагато посилань у меню
Нерідкі випадки, коли вас відверто "перевантажує" меню. Часто це так довго, що ми вже не знаємо, куди шукати першими. Або це настільки заплутано, що ми не можемо знайти інформацію, яку шукаємо.
На графіку вище показано приклад навігації муніципалітету. Подумайте самі і запитайте себе, яку інформацію може містити розділ «Громада» та «Ратуша». Що знаходиться під "Культура", але під "Туризм"?
Ви повинні запитати себе, чого хоче відвідувач вашого веб-сайту. Яка аудиторія натрапляє на веб-сайт спільноти? Як ці групи користувачів можуть найкраще зорієнтуватися?
На графіці ви також можете побачити вдосконалену структуру меню. Це базується на таких групах користувачів:
- Люди, які живуть у середовищі громади
- Люди, які хочуть провести відпустку в муніципалітеті (туризм)
- Люди, які хочуть побудувати там свою компанію (економіка)
Всі три групи людей можуть і можуть захотіти швидко подзвонити комусь. Ось чому кнопка контакту також є в головному меню.
Головне меню гарантує, що ви направите потрібну групу відвідувачів туди, де вони повинні бути. Для людини, яка хоче поїхати у відпустку на місцевому рівні, інші пункти (економіка, інформація про громадян) в першу чергу не представляють інтересу.
Чому невелике меню та максимум 7 пунктів меню?
Встановлено, що кожна людина може швидко запам'ятати в середньому 7 речей. Дослідник Джон Локк відкрив це так зване сім явище 300 років тому. Хтось знає,
- що ви повинні спати в середньому 7 годин;
- що 7 є найпоширенішим щасливим числом;
- і що тиждень має 7 днів.
Спробуйте запам’ятати всі речі на вашому столі. Потім закрийте очі і спробуйте згадати, що там було. Як далеко ви дістаєтесь До сьомої "частини" все добре, що ви набрали все на 100% правильно. Крім того, ймовірність приземлення удару швидко зменшується.
Довгі меню
Не всі меню можуть залишатися маленькими. Подумайте, наприклад, про інтернет-магазини, у яких багато підсторінок. Поганим прикладом може бути такий:
Приклад поганої навігації
Подібне меню часто генерується автоматично веб-сайтами інтернет-магазинів на основі товарів, що є в наявності на даний момент.
Ви не завжди ідеальні. Забагато цифр і занадто мало диференціації. У чому різниця між ноутбуками 5760 та 6595? Як неспеціалісту це дуже важко. Тоді вам слід попрацювати з трюками найпізніше. Наприклад, з меню вильоту, яке створює подальші меню лише з трьома додатковими підменю.
Дизайн підменю
Вам потрібно перевірити, яка диференціація (тут залежно від розміру зошита) найкраще підходить для ваших відвідувачів.
Навігація в неправильному місці
Не тільки довжина меню відіграє важливу роль у контролі відвідувачів веб-сайту. Також можна неправильно розташувати навігацію. Завдяки системам управління контентом, зараз так і так можна знайти меню там, де вони належать. А саме або лише в лівій колонці, лише в області заголовка або в обох місцях на веб-сайті.
Виправлення меню
Користувачі не можуть зорієнтуватися на вашому веб-сайті
Корисні інструменти, такі як Google Analytics, можуть показати вам, як відвідувачі пересуваються по вашому веб-сайту. За допомогою таких потужних інструментів ви також дізнаєтесь, що багато відвідувачів не затримуються на веб-сайті довго. Це може бути тому, що вони просто не можуть зорієнтуватися.
Ми всі різні, і тому ти ніколи не можеш догодити всім. Однак слід докласти якнайкращих зусиль, щоб реалізувати те, що говорять ваші користувачі.
Ми сміємо стверджувати, що 90% відвідувачів вашого веб-сайту ніколи не зв’яжуться з вами. Наприклад, навіть якщо у вас є великі проблеми з веб-сайтом. Лише рідко хтось повідомляє вас.
Є багато причин, чому користувач не може зорієнтуватися на вашому веб-сайті:
- Наприклад, користувач має проблеми з презентацією веб-сайту і втрачає важливі моменти через технічні проблеми (він використовує застарілий браузер).
- Користувач не знає, де він може знайти додаткову інформацію, оскільки вміст а) прихований або б) знаходиться в меню, яке не відповідає вимогам.
- Користувач вважає веб-сайт "не красивим" (наприклад, недостатньо естетичним). Наприклад, якщо поняття «зовнішній вигляд» не відповідає типу бізнесу.
Тому вам слід щодня критично переглядати свій веб-сайт. Перевірте свій веб-сайт за допомогою різних браузерів на різних платформах (якщо це можливо в Windows, Mac OS і навіть Linux, якщо ваша аудиторія є завзятими користувачами Linux).
Посилайте технічні терміни в статтях якомога частіше або до певного місця на власному веб-сайті, або до альтернативних джерел (таких як Вікіпедія). Кінцева мета - навчити та інформувати відвідувача якомога більше. Ось чому це на вашому веб-сайті!
Крім того, ви можете анонімно запитати кожного відвідувача за допомогою простої контактної форми: "Що б ви змінили?" Це швидко і часто може творити чудеса. Для системи блогів ви можете звернутися до розділу коментарів.
Інша альтернатива: запитайте своїх друзів та знайомих, як вони знаходять ваш веб-сайт. Сідайте за свій комп’ютер, відвідуйте веб-сайт і задавайте такі питання:
- "Будь ласка, шукайте, це і те" "або
- "Ви розумієте тему xy?"
- "Де б ви натиснули, щоб знайти ABC?"
Неважливим є важливий момент
Одне дослідження показало, що людське око (або принаймні європейське око) починає читати та дивитись зверху ліворуч. Чим далі ви пройдете вниз праворуч, тим менш важливий вміст ви там знайдете.
(пор. Гутхайм, Філіп (2008): Der Webdesign-Praxisguide. Професійна концепція від планування до доктора. Мюнхен: Springer Verlag. Стор. 42)
Приклад відстеження очей
Ось чому меню, як правило, можна знайти ліворуч або зверху. Бічні панелі, як правило, розташовані крайньо праворуч. Навіть у так званому нижньому колонтитулі (нижньому колонтитулі веб-сайту) ви знайдете менш важливі речі.
Однак тут застосовується те саме: не всі однакові. Часто око спочатку "підлітає" до вражаючих точок, які можуть бути розташовані нижче праворуч на зображенні, перш ніж воно почне аналізувати сторінку зліва.
Ви повинні дотримуватися цих неписаних законів і полегшити відвідувачам навігацію, розміщуючи речі там, де їх очікують. Отже, меню ліворуч або вище.
Перехресне тестування браузера не вдається
"Крос-браузерне тестування" означає нічим іншим німецькою мовою, окрім того, що ви повинні тестувати свій веб-сайт за допомогою декількох веб-браузерів. Це гарантує, що кожен користувач Інтернету бачить ваш веб-сайт, як і ви. Кожен браузер має різну структуру і може по-різному інтерпретувати команди HTML і Javascript. Це може призвести до спотворень та непорозумінь.
У березні 2017 року окремі веб-браузери мали частку ринку (див. Таблицю нижче; вибір).
| Internet Explorer | 5% |
| Firefox | 14% |
| Chrome | 75% |
| сафарі | 4% |
| Опера | 1% |
Повний і завжди актуальний список можна знайти на w3schools.com: http://www.w3schools.com/browsers/browsers_stats.asp
Тут ви можете знайти джерела завантаження для відповідних браузерів:
Крім того, ви можете використовувати безкоштовні або платні веб-сервіси для таких тестів. Наприклад:
Зокрема, Internet Explorer, швидше за все, відображатиме ваш веб-сайт дещо інакше в кожній версії, це пов’язано з тим, що Microsoft насправді не зуміла структурувати програму до версії 9 таким чином, щоб вона правильно впроваджувала діючі веб-стандарти. Щонайменше 95 із 100 балів у тесті ACID3 (тест для перевірки правильної інтерпретації веб-стандартів) були досягнуті останнім часом IE9.
Наприклад, ви можете протестувати власний браузер за адресою http://acid3.acidtests.org. У кращому випадку тест показує 100 зі 100 балів. Отже все добре.
[...] Було показано, що меню ніколи не повинно мати більше 7 пунктів меню. [...]
[…] І які є неважливими. Можливо, корисна також моя порада на наступній сторінці: Забагато посилань у меню (у статті блогу про найпоширеніші помилки в [...]