Акценти у веб-дизайні на прикладі Google+ і Facebook

Не знаю як для когось, а для мене візуальна комфортність перебування на сторінці дуже важлива впритул до того, що я не буду користуватися таким сервісом. Який відсоток людей мислить така само – не знаю. Але я говоритиму суб’єктивно. І на прикладі інтерфейсів цих двох соцмереж торкну тему акцентів у веб-дизайні загалом.

Як це працює?

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

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

Акценти на веб-сторінках

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

Google+ та Facebook як приклад

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

Інтерфейс Facebook

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

Називаючи цей блок найважливішим ми підсвідомо розуміємо, що маємо на нього звернути увагу в першу чергу. У Facebook все так і працює, а в Google+, як виявляється – ні, що й викликає дискомфорт. Що не так спитаєте ви? Відповідаю – розміри шрифтів.

Розмір шрифту, як один з елементів привертання уваги

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

Теперішній варіант Google+, який “муляє”

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

Спроба “покращення” Google+

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