Минуло вже близько чверті століття з моменту створення самого першого сайту. Двадцять п’ять років – досить зрілий вік для людини. За цей час можна отримати вищу освіту, відслужити в армії, розбагатіти і збідніти, вступити в шлюб і завести дітей — вік дозволяє. Проте, для інтернету, а саме для розвитку культури створення сайтів, чверті століття все ж недостатньо, щоб більшість сторінок в мережі не просто виглядали «нормально», а хоча б були читабельні та й взагалі «юзабельні».

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

З чого слід починати створення або оцінку сайту? Логічно було б з самого початку. У нашому випадку це не логотип і не дизайн — це адресний рядок, в якій зазначено ім’я сайту. З цього приводу є кілька нарікань, які занадто важливі, щоб про них не написати.

Почнемо з того, що в Рунеті, за особистими спостереженнями, відверто бояться довгих назв і бувають готові на будь-яке скорочення, нехай навіть і нелогічне, абсурдне, що не запам’ятовується. Європейський підхід набагато лаконічніший і правильніший — якщо якусь організацію чи рух звуть, ну наприклад, «William Johnson Movement», то і доменне ім’я буде «williamjohnsonmovement.com». Звичайно, «wjm.com» було б краще, як і деякі логічні варіації (наприклад «wjmovement.com»), але якщо логічне і зрозуміле доменне ім’я зайнято, то не слід створювати велосипед — просто назвіть так, як зветься ваша фірма або продукт.

Наступна порада базується на попередній: назва сайту та його логотип повинні відповідати один одному і ясно зчитуватися в адресному рядку. Із прикладів: сайт «Book & Shop» («Книга і магазин» або «Зарезервуй і купи») з адресним рядком «bookshop.ru» («Книжковий магазин»). Компанія зареєстрована в «2ГИС» (карти Москви) як «Букшоп», хоча в логотипі ясно прочитується «Book & Shop». Якщо компанія називається «Букшоп» і має домен «bookshop.ru», то навіщо плутати користувача і вказувати зовсім іншу назву в логотипі? Якщо мається на увазі «Book & Shop», як написано в логотипі, то і слід використовувати такий домен: «bookandshop.ru» або «book-shop.ru».

Не можна створювати таку плутанину користувачеві: доменне ім’я не відповідає назві магазину

Ще однією проблемою можуть бути асоціації з іншими словами або мовами. Залишимо політичні витоки хештега «#noRussianBaseinBelarus» і просто прочитаємо його. Носій російської мови (наприклад, населення Білорусі) прочитає його так: «#нетРоссійскойБассейнБеларусь». Я до сих пір з труднощами бачу там «Base in». Коментувати «no», написаної не з великої літери, хоча в даному випадку має бути з великої, не будемо.

Плутанини можна було б уникнути, написавши «#NoRussianBaseInBelarus». Так, це було б не по правилам — «in» слід писати з малої літери, але читабельність збереглася. Якщо зробити з цього хештега сайт, то читалося б дуже важко «norussianbaseinbelarus.com». Висновок: продумуйте назви, якщо вони стосуються кількох мов (в даному випадку хештег народився в Білорусі носіями російської мови) і в спірних ситуаціях або покращуйте читабельність, або відмовляйтеся від напрацювань і заново придумуйте більш успішну назву.

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

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

Так ось, бажаючи отримати якусь інформацію або подивитися (не купити!) товар, користувач заходить на зацікавлений його сайт. Що ж він очікує? Того, що написано в описанні сторінки в його пошуковику. Якщо написано «10 причин, чому я ніколи не буду веганом», то він очікує побачити цю статтю. Якщо він хоче переглянути якийсь товар, ознайомитися з ціною і це написано в описанні в пошуковику, то він очікує побачити товар, його фото, характеристики і ціну. Нормальні сайти так і роблять — дають те, чого очікує користувач. У значній кількості сайтів з’являються якісь віконця або банери, з якими треба взаємодіяти, перш ніж перейти до своєї статті або до зацікавленого продукту.

Хочу підкреслити, що це не просто реклама: за чверть століття був винайдений AdBlock і інші блокувальники реклами, а там, де він не працює, позначається двадцятип’ятирічний досвід швидкісного закривання банерів. Саме тому спливаючі рекламні банери неефективні і їх стало значно менше. Але в даній ситуації я маю на увазі не рекламу, а саме банери сайту: всякі рядки взаємодії та інше, які постійно вимагають від користувача чогось, як тільки він потрапив на сайт. Є приблизно чотири типи таких банерів.

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

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

Ще приклад з минулого сайту. В кінці статті є форма підписки. Навіщо ця дублююча форма?

Навіть на такому прекрасному сайті як «Arzamas» все одно через якийсь час спливає банер і вимагає взаємодії

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

Хороші приклади форми підписки в футері: зверху «Відкритий університет», знизу «Meduza»

Другий тип банерів використовується в магазинах. Їм здається, що вони зобов’язані вам розповісти про свої пропозиції, знижки та й взагалі, ви хотіли подивитися собі новий телефон? Так забудьте ви про нього! Ходімо до відділу джакузі, вам сподобається! Чи не так? На жаль, для магазинів, ні.

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

Більшість магазинів вважають, що ви вже біжите замовляти товар і, крім форми акцій або підписок, майже завжди запитують «Ви у Москві, це правильно?». Ось тут уже зовсім сумна ситуація: крім одного банера потрібно відволіктися ще на це питання. Причому в більшості випадків місце розташування майже завжди зазначено вірно, а якщо немає, то (увага!) користувач може сам поміняти на те місто, яке йому потрібне. З огляду на те, що від місця розташування залежить тільки доставка і, можливо, наявність товару, і що користувач сам може поміняти свій регіон, то ці питання абсолютно марні і просто відволікають людину, яка зайшла подивитися ціну і побігти далі. А уявіть ситуацію, коли клієнт вибирає телевізор і заходить на п’ять-десять таких сайтів? «Ні, не потрібні акції. Так, я в Москві. Ні, не потрібна підписка. Так, я в Москві…», — і таке насильство кожен раз при виборі товару.

«Евросеть» і «МТС» не можуть не запитати, чи точно ви перебуваєте в Москві? Хоча поруч є помітна форма з містом, і користувач може сам поміняти місто, якщо щось не так

Ніхто не зрівняється з «М.Відео» по візуальному непотребу — тут і акція, і питання міста та, зверніть увагу, під банером з акцією – фотографія, нагадує про акцію

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

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

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

На відміну від домену та логотипу, чат взаємодії у «Букшопа» вийшов адекватним: зверху він в закритому стані, знизу у відкритому

Четвертий тип обожнюють в Європі і на американських сайтах, і це являється звичайною бюрократизацією інтернету. На багатьох сайтах (а на урядових так взагалі поголовно) вас будуть завжди питати: «Чи можна нам використовувати куки?». Це питання й інформування користувачів про користування сайтом куки, здається доброю справою на папері, а на ділі просто змушує на кожному сайті автоматом тиснути «так». «Напевне, «так»? А якщо я натисну «ні», то я не отримаю доступу до свого сайту? Натисну тоді я краще «так», — приблизний хід думки користувача, якщо він не закрив цей банер або вже на автоматі натиснув «так». Можливо, у когось є час і бажання читати ці юридичні, сухі, інформаційні вставки на майже кожному сайті і я радий за них. У повсякденному житті легше погодитися і продати душу, ніж замислюватися над кожним спливаючим вікном, повідомленням про куки і далі за списком.

Типовий куки-банер нічого не несе в собі і просто змушує на нього відволікатися

Таке відчуття, ніби я контракт підписую, а не зайшов на звичайний розважальний сайт

Розібравшись в тому, що будь-які спливаючі вікна відволікають користувача від його справ на вашому ж сайті, давайте, як і користувач, нарешті, перейдемо до самого сайту. Що ми побачимо? Дизайн і якусь структуру. Почнемо з логотипу. Хоч його розробка та підтримка заслуговує (і отримає) окремої статті на «Діалозі», найголовніші принципи слід вказати.

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

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

Приклади хороших логотипів різного ступеня простоти

Хочеться звернути увагу на ще один момент. Деякі фірми стали робити з логотипу інтернет-адресу. Найбездарніший приклад — логотип зимової Олімпіади 2014 року. Не маючи читабельності (в кращому випадку він читається як «sochi.ru 2014»), цей логотип-посилання ще й заплутує — сайту «sochi.ru» немає. Можна багато написати про «zoiy» або «zoiч», але пропустимо це. Що важливіше, так це наскільки треба бути невпевненим, щоб в олімпійський (!) логотип прописувати онлайн адресу? Ще раз повторю: це логотип зимової Олімпіади, про яку знає весь світ.

Логотип зимової Олімпіади

Що вже говорити про всякі «Ozon.ru», «Avito.ru», «Медскан.рф», «Investing.com» і багато інших, які просто ставлять свої бренди в один ряд з «rutracker.org» і «rutor.is». Останні теж люблять вказувати свої адреси в логотипі. Можливо, люди з таких великих компаній бояться, що якщо логотип буде просто «Ozon», «Avito», «Медскан», «Investing» або «Сочі 2014», то користувачі не зважаться вбити в пошуковик «Ozon», і перейти на першому результаті. І якщо у випадку з «Investing.com» проблема скоріше в невдалій назві (просто «Investing» не звучить), то інші приклади, які мають унікальні назви і добре запам’ятовуються, просто неможливо зрозуміти. Та й не треба розуміти.

«Ozon.ru», «Investing.com», «Медскан.рф» і їхні побратими «rutracker.org» і «rutor.is». Особливо жалюгідно виглядають «Investing.com» і «Медскан.рф», які обидва мають хороші логотипи, а «Медскан.рф» взагалі цікаву й емблему, яка запам’ятовується. Але страх і невпевненість, замість ясної і зрозумілої комбінації емблема + «Медскан», змусили понаписували купу всякого тексту і заодно зменшити назву самої фірми, створивши дисгармонію, надавши неприємну тяжкість емблемі і дріб’язковість текстової складової. Дуже шкода

Крім невпевненої приставки «Investing.com» дуже полюбляє незрозумілі банери, які ми вже обговорили

На щастя, той же «Avito.ru» перетворився в просто «Avito», з чим і вітаємо. І поки у приватних фірм є можливість редизайну і реабілітації своєї репутації, то олімпійський логотип залишиться ганебним символом бездарності і невпевненості російського дизайну на світовому рівні.

Позбувшись від багатьох непорозумінь («.ru», логотип великими літерами), Рунет отримав ще один хороший логотип в особі «Avito»

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

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

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

В наступній частині продовжимо виявляти всі вади сучасних сайтів, а поки можете насолодитися підбіркою сайтів-«красенів» і прочитати на vc.ru (без «.ru» нікуди, вірно?), про те, як падає роль дизайнерів, і про те, що сайти стали однаковими і нудними. Хоча, після збірки на TJournal, не бачу нічого поганого в одноманітних і красивих сайтах — добре зверстані книги відрізняються один від одного деякими елементами, а відчуття «однаковості» немає, лише насолода від якісної роботи, що переходить від книги до книги.