Информационна архитектура – основата на уеб дизайна
Точната наука зад уеб дизайна
Информационната архитектура (ИА), наричана още „Информационен дизайн“ или „Информационно проектиране“ е най-бързо развиващата се част от науката за уеб сайтовете. Тя представлява скелетът, около който се гради всеки уеб сайт.
Практиката показа, че колкото и стойностна да е информацията, тя може да остане напълно безполезна, ако бъде „погребана“ под зле организирани менюта или стои заобиколена от несъответстващ контекст.
Информационната архитектура формира ядрото на един сайт, около което се изграждат всички останали негови компоненти: общата визия на сайта, функционалностите му, навигационните схеми, потребителският интерфейс и т.н.
Информационната архитектура на един сайт се състои в процеса на прецизно структуриране на информацията, нейното организиране в ясни навигационни схеми, и атрактивното й представяне чрез интуитивни и недвусмислени визуални елементи.
Целта на информационната архитектура на един сайт е да позволи информацията в него да бъде достъпна, разбираема и управляема.
Стадиите в информационното проектиране
Процесът на информационно проектиране е базиран на подробни предварителни проучвания и анализи. Тези проучвания трябва да се извършат в организацията-собственик на сайта и целят дефинирането на основните (ако не и всички) функции, които трябва да изпълнява сайта.
Накратко казано, тези анализи трябва да дадат отговор на следните въпроси:
- Каква ще е целта на сайта?
- Какви ще са неговите краткосрочни и дългосрочни планове за развитие?
- Към кого ще бъде насочен сайтът?
- Какви функции ще изпълнява сайтът?
- Кое ще направи този сайт уникален?
- Защо хората ще посещават този сайт?
- Кое би ги накарало да се връщат в него?
На тази база, процесът на проучване трябва да завърши с няколко ясни и конкретни документа, свързани с:
- Целите на сайта,
- Съществуващата конкуренция
- Съдържание и функционалности на сайта
- Навигационна структура на сайта
- Визуална концепция и разположение на елементите
- Дефиниране целите на сайта
Дефинирането на целите е като да закопчеете първото копче! Ако го закопчеете погрешно, всички останали копчета също ще бъдат погрешно закопчани.
В същност, това е отговор на въпроса „Защо този сайт трябва да бъде построен„?
Обикновено дефинирането на целите на сайта изисква множество разговори с ключови хора, свързани с основните дейности на фирмата, както и с хората, взимащи крайните решения.
Задълбоченото запознаване с маркетинговите, търговски и рекламни материали на фирмата определено дава полезно начало. Разбирането на мисията, основните насоки на развитие на фирмата и нейния бизнес план също са важни елементи по пътя към дефинирането на целта.
На този етап, и разговорите с „редови“ служители на фирмата може да се окажат полезни, тъй като в много случаи възлови проблеми, скрити възможности, нереализиран потенциал или просто добри идеи могат да са останали скрити за ръководството.
Дефиниране на целевата група потребители
Тази фаза цели да разкрие кои ще бъдат потенциалните потребители на сайта, както и техните цели и мотивация. Разработването на различни сценарии в тази насока може да бъде изключително полезно.
Дефинирането на профила на потребителите е толкова важно, защото той ще бъде основа за определяне на начина, по който сайтът ще бъде изграден. Тук се включват визуалните елементи, ползваните метафори, цветови схеми, та дори и размера на шрифтовете.
Очевидно е че сайт, предназначен за тинейджъри, ще изисква доста по-различен набор от дизайнерски техники, в сравнение със сайт, предназначен за предприемачи и бизнесмени.
Проучване на конкуренцията
Доброто познаване на конкурентните сайтове е важно. Освен всичко останало, то ви помага да проверите дали вашите собствени идеи за такъв сайт са верни или не.
Създаването на списък с конкурентните сайтове не е трудно. Често за това е достатъчно едно обикновено търсене по ключова дума в сериозна търсеща машина като Google.
Анализирането на резултатите от това търсене обаче не е толкова лесна задача, защото изисква определянето на ясни критерии за оценка, което обикновено е по-трудно, отколкото изглежда.
Разработването на критериите за оценка включва ред чисто технически елементи (като време за зареждане, размер на страниците, подход към навигацията и т.н.), но също включва и набор от по-скоро субективни критерии, като очаквания на потребителите, ценностната им система и т.н.
Друг набор от критерии за оценка се свързва с функционалностите, предлагани от конкурентните сайтове: вътрешно търсене, управление на бази данни с продукти, форми за контакт, интерактивни елементи и т.н.
Стъпката, следваща определянето на критериите, е дефинирането на относителната тежест на всеки един от тях. За някои типове проекти например, времето за зареждане може да е от първостепенна важност, докато за други, критично важен може да е наборът от функционалности. Тук е трудно да се дадат общи правила за следване.
Организиране на съдържанието
За да дефинира и структурира съдържанието на сайта и неговите вътрешни взаимовръзки, на този етап информационният архитект трябва да разработи следния набор от документи:
- Карта на сайта: Тя прецизно отразява структурата на съдържанието. Обикновено изглежда като графика, отразяваща разположението на различните части от сайта.
- Карта на съдържанието: Тя показва как различните части от сайта се отнасят и взаимодействат помежду си. Ако картата на сайта отразява логическата структура, то картата на съдържанието показва логическите връзки. Картата на сайта е статичен елемент, докато картата на съдържанието – динамичен. Картата на съдържанието представлява хипотетичния път, по който потребителите би трябвало да се движат за да разгледат целия сайт.
- Структурна решетка: Структурната решетка (layout grid) е, най-общо казано, чертеж, в който е отразено разположението на различните функционални елементи в бъдещия сайт. Тази решетка дефинира и показва визуалната взаимовръзка между различните области във всяка от страниците в сайта. Най-лесно е да обясним какво представлява структурната решетка, като покажем тази на един примерен сайт:
Структурна решетка
- Прототип: Прототипът, наричан доскоро графичен оригинал, е в същност илюстрация на това, как сайтът ще изглежда в действителност. Той се базира на структурната решетка, но вече включва всички визуални елементи в бъдещия сайт, избраната цветова схема и т.н. В повечето случаи прототипът се изработва със специализиран софтуер (обикновено Photoshop или инструменти като Figma), но в някои случаи може и директно да се прибегне до разработването ѝ със средствата на HTML и CSS.
Разработването на структурната решетка и прототипа целят да покажат как информацията би трябвало да се визуализира на екрана. Каква точно информация ще се представя обаче зависи от самото ..
Разработване на съдържанието
Различаваме основно четири типа съдържание:
- Статично съдържание,
- Динамично съдържание,
- Функционално съдържание и
- Интерактивно съдържание.
Класически пример за статично съдържание са слоганът на фирмата, информацията, свързана с авторските права върху сайта, правила за ползване на информацията и т.н.
Типични представители на динамичното съдържание пък са статии, ценови листи, страници с новини и други публикации.
Функционалното съдържание се свързва с активни функционалности, включващи въвеждане на пароли, попълване на формуляри за контакт, търсения в сайта и др.
Интерактивното съдържание е това, при което посетителите сами могат да допълват или променят съдържанието на части от сайта. Типични примери за това са въвеждането на обяви, участието във форуми и социални мрежи, както и изпълнение на транзакции, свързани с резервации, онлайн разплащания и др.
След като цялостната структура на съдържанието бъде готова, идва ред на дефинирането на функционалните изисквания към сайта.
В тази фаза се специфицират всички активни функционалности, изискващи програмиране на езици, различни от HTML и излизащи извън чистото визуализиране на информация. Тук се имат предвид активни елементи като формуляри за поръчки, онлайн анкети, системи за търсене в сайта, форуми, фото-галерии, системи за обяви, управление на онлайн каталози, области с ограничен достъп и др.
Метафори
Какво в същност представляват метафорите? По определение, метафората е използване на думи или символи, с цел постигането на значение, различно от първоначалното значение на думата или символа. По този начин се постига пренасяне на значение от един обект на друг.
В информационната архитектура, метафората е начин за предаване вътрешната структура на информацията, посредством външни (видими) компоненти, като графични елементи, икони, менюта, разположение в пространството на страницата и т.н.
Организационни метафори
За организационна метафора се говори когато структурата на сайта е подчинена организационната структура на фирмата. Така например организационна метафора е когато в сайт, да речем на търговска фирма, виждаме секции като „Продажби“, „Ръководство“, „Маркетинг“, „Реклама“, „Човешки ресурси“ и т.н.
Продуктови метафори
Продуктова метафора се използва когато структурата на сайта е подчинена на структурата на продуктите, включени в него. Така например за продуктова метафора говорим, когато елементите в менюто на сайт примерно за електроника, виждаме неща като „Монитори“, „Дънни платки“, „Принтери“ и т.н.
Функционални метафори
За функционални метафори говорим, когато структурата на един сайт е подчинена на функциите, които посетителя може да изпълнява в различните му части. Пример за такова структуриране на сайт е меню от типа „Покупки“, „Продажби“, „Търсене“, „Поръчка“ и т.н.
Визуални метафори
При визуалните метафори се използват визуални символи, заместващи вербалните (текстови) елементи. Пример за такава метафора е ползването на изображение на лупа за връзка към търсачката в сайта, портрет на Мона Лиза за влизане в галерията или, да речем, мегафон за линк към форума.
Структурна решетка
Нека отново се върнем на структурната решетка, защото ефективността на съдържанието силно зависи от нея. Разработването ѝ е стъпка, приближаваща ни до посетителя. Макар и невидима, точно тази решетка, или разположението на елементите в страницата, е първото нещо, което посетителят вижда при влизането си в сайта. Ето защо, изключително важно е тя да бъде разработена така, че посетителят:
- Да бъде пределно наясно как да намери това, което търси,
и - Да бъде насочен натам, накъдето на нас би ни се искало.
Дефинирането на структурната решетка включва прецизно и добре премислено разделяне на „жизненото пространство“ на страницата по начин, даващ оптимално пространство за всички предвидени в сайта елементи: меню, илюстрации, рекламни банери, лого, съдържание, пояснения и т.н.
Нека отново припомним какво представляваше структурната решетка:
Структурна решетка
Сега, когато вече знаем много неща за нашия сайт – неговата цел, групата хора, към която е насочен, функционалностите, съдържанието му и разположението на елементите върху страницата, вече сме готови (едва сега!) да пристъпим към самото изграждане на сайта.
Визия на сайта
Цялата свършена дотук работа вече трябва да се реализира в електронен вид с помощта на графични програми и програмни езици като HTML, PHP, JavaScript, ASP и др.
За съжаление много колеги започват изграждането на сайтовете си направо оттук … и затова често сайтовете им се провалят.
Но почакайте малко! Ние все още сме в процеса на информационно проектиране и не бива да забравяме, че добрата ползваемост (usability) е нашата крайна цел! Дори и „отприщвайки“ цялата си творческа енергия в графичния дизайн, не бива да забравяме, че посетителите имат съвсем конкретни навици и очаквания във връзка с един сайт.
Това особено силно важи за навигацията. Тя трябва да бъде възможно най-опростена, предсказуема и консервативна. Ако проектирате графичен бутон, нека той наистина прилича на бутон. Ако искате да поместите лого на фирмата, нека то бъде там, където обикновено се слага логото – в горния ляв ъгъл.
Това е като да проектирате нов автомобил. Всички шофьори знаят къде трябва да се намира скоростния лост, воланът или педала на спирачките. Ако се опитате „с творческа фантазия“ да разместите педалите, да инсталирате волана на задната седалка или лоста за скоростите отляво на шофьора, то проектираната от вас кола със сигурност ще претърпи провал.
Същото важи за графичния дизайн. Някои елементи в сайта просто имат задължителни места и трябва да са по местата си! Както казах, особено когато става дума за навигация, потиснете творческите си пориви. Прогонете фантазията си далеч от общоприетите конвенции.
Не очаквайте посетителите „да привикват“ към вашия „необичаен“ дизайн. Това никога няма да се случи!
Ключовите думи при проектирането на всеки сайт са две: яснота и предсказуемост.
Цветови схеми
Работата с цветове е изключително широка тема и е невъзможно дори частично тя да бъде обяснена в една статия. Цветовете обаче са от първостепенно значение за успеха на един сайт и затова тук ще се опитаме бегло да споменем само най-основните принципи.
Цветовете са мощно „оръжие“ в уеб дизайна. Като всяко друго оръжие обаче, неразумното им ползване може да се окаже много опасно.
Когато става дума за цветове, на дневен ред идват два въпроса:
- Кои цветове?
и - Колко цветове?
Макар че няма магическа формула, която да направи от страницата Ви дизайнерски шедьовър, има все пак някои основни правила, чието спазване поне може да ви предпази от сериозни грешки.
Кои цветове да ползвам?
Намирането на правилната цветова комбинация често е голям проблем за начинаещите (а и не само за тях). Ето защо добре е да се придържате към една от няколкото основни схеми за комбиниране на цветове.
Според тези правила, цветовете могат да се комбинират по два основни метода: сходство (аналогия) или противопоставяне (контраст).
Комбинациите, основани на аналогия използват цветове, които са различни оттенъци на един и същ основен цвят. Те обикновено са разположени един до друг в „кръга на цветовете“
Комбинациите, основани на противопоставяне (комплементарни или контрастни схеми) използват цветове, които са разположени един срещу друг в „кръга на цветовете“.
Цветови кръг (Color Wheel)
Колко цвята да ползвам?
Както вече казахме, магическа формула не съществува. Въпреки това, ако не искате да имате сериозни проблеми с цветовете, опитайте се да ползвате не повече от четири цвята в сайта си.
Но внимавайте! Бялото също е цвят, както и черното! Така че, ако имате бял фон на страницата, а текстът ви е черен, вече имате два използвани цвята и ви остават още само два.
Е, добре, това е само правило. Не е закон! Можете да го нарушавате понякога, особено ако имате сериозни причини за това. Не забравяйте също и че обикновено цветовете от сивата гама се възприемат добре и не се добавят към „общата бройка“. Това ви дава повече свобода, нали?
Успех в Интернет!
Атанас Георгиев
