Visual Design of Navigation Systems in Online Media
Static and Dynamic Elements of the Content Presentation for Different Screen Sizes
As the primary functional system of each site, navigation orientates, arranges, gives clarity of contents and leads the user. Therefore the key its quality, intelligibility is the result of the logical organization; the accessibility provided by the recognizable and contrasting elements; stable structures. The main navigation and the sub navigation are important factors in the management and use of content, with particular importance in complex structured media products that need to reside in the heterogeneous environment on a variety of devices. The habits, expectations of the user to find the navigation elements in certain places and in certain types of set requirements for conventional and for shaping solutions supporting their intuitive use, but for that consistent design and rapid recognition of navigation tools on the inner pages.
Keywords:web design, media design, navigation, responsive design, usability, interactivity, recognizability
Увод
Интерактивността на уеб дизайна, улеснената комуникация и ясното представяне на елементите и тяхното обслужване го различава от дизайна на печатните медии. Навигацията през бутони, менюта, линкове; диалоговите елементи – формуляри, зони за регистрация или вход; елементите за ориентацията като бутоните „home” или „начална страница” или навигационните пътеки правят скрийн дизайна територия на интерактивна комуникация, динамична, реактивна и променяща се спрямо действията на аудиторията. Елементите за ориентация са призвани да осигуряват достъпа на потребителите до съответните нива на хипертекста, както и разпознаваемостта на местопребиваването им в структурата на сайта. Навигационните елементи обслужват движението на читателя в пространството на сайта и намирането на търсените секции, страници, тематики.
Медиите онлайн не са onepager сайтове, те не могат да бъдат прегледани просто чрез вертикално и/или хоризонтално превъртане. Затова интерактивните системи на ориентацията, селекцията на информацията и навигацията правят възможна проходимостта и попътната ориентация на читателя. И макар че с константния си дизайн навигационните инструменти също служат на разпознаваемостта и единната визуална стилистика като логото, цвета, шрифтовете, композициите и пр., при тях на преден план излиза необходимостта да се подкрепя използваемостта на сайта. Затова и търсенето на оптимални решения в услуга на:
§ ориентацията,
§ прегледността на структурите,
§ търсенето и намирането на съдържанията,
§ селекцията на информацията,
§ попътната информация
е свързано с кардиналните въпроси на комуникацията на сайта.
Навигацията между отделните раздели на сайта, определяща придвижването на читателя сред съдържания, функционалности и страници, при комплексните проекти е субординирана в: метанавигация, основна и субнавигация, футър навигация. И ако главната навигация води към рубрики и подрубрики, вторичната навигация включва контекстуалните връзки, асоциативните връзки и тийзъри; функциите по търсене и преглеждането на сайта и неговите съдържания посредством картата на сайта и другите инструменти за ориентация.
Категории на главната навигация
Детерминирана от основните цели и задачи на сайта и обслужваща интересите и информационните потребности на аудиторията му, основната навигация обхваща най-съществените страници, в които се разпределя съдържанието. И тъй като те са с голяма тежест в комуникацията, логично е да бъдат зададени в основното меню, за да привличат вниманието и да показват недвусмислено структурирането и акцентите ресори.
Основната навигация е приоритетен елемент на началната страница наред с типограмата, водещите заглавия и тийзърите. Изградените вече потребителски навици на онлайн комуникацията са свързани с лесното ѝ откриване, разпознаване и достъп и константно разположение с типични маркери на вниманието и ориентацията. Сред най-конвенционалните подходи на позициониране на основната навигация са:
§ Хоризонталният подход – разположена в горната част на страницата, за да е достъпна без превъртане, хоризонталната главна навигация предполага подреждане на менютата едно до друго отляво надясно. Счита се, че преглеждането на разделите и секциите по този начин е бързо и безпрепятствено, защото аранжиментът им следва естественото движение на очите отляво надясно. Ясното разграничаване на основната навигация от метанавигацията, от логото и акцентните съдържания и рубрики е от значение, за да бъде функционален този съществен елемент на мениджмънта на информацията. Често многоелементните навигационни ленти при новинарските сайтове, които запълват цялото пространство под „главата”, лишават медийните проекти от много артистичните решения на централно и дясно подравнени менюта, заобиколени с широки свободни пространства. Креативността в медийния дизайн онлайн приоритетно следва функционалното представяне и ергономичното поднасяне на елементите.
§ Вертикалният подход – макар сложните навигационни системи в журналистическите продукти онлайн да предполагат многоелементна навигация с падащи менюта, и вертикалният подход на разполагането им е използван. По-бавно възприеман и заемащ ценни пространства отляво на началната страница, той е по-скоро подходящ за субнавигационни елементи и се свързва все по-често с отзивчивия дизайн и с необходимостта от гъвкави решения за уплътняване на пространството. От друга страна, този стил дава на проекта по-голямо визуално напрежение и динамика, а оттук – привличане и въздействие.
Обобщеният, лаконичен стил на основния навигационен панел, целящ да облекчи възприемането на елементите и да преодолее претрупаността, утежняваща селекцията при комплексни съдържания, води до други нива на навигационната система, отпращащи към по-големи дълбочини в структурата на сайта. Основната навигация на сайта демонстрира съдържанията му и осигурява достъпността им. От своя страна, субнавигацията и падащите менюта водят към вътрешността и са от съществено значение при комплексни сайтове с много структурни равнини.
Цветът обобщава голeми съдържателни групи в комплексните сайтове, като освен на съответните подстраници се появява и в основната навигация и в субнавигацията, осигурявайки добра организация, бърза видимост и прегледност на информационните системи.
Ил. 1
|
Ил. 2
|
В „USA Today” хоризонталната лента на бутоните е лаконично оформена в негативно възпроизвеждене, а фини цветни линии над съответните барове маркират съответния ресор чрез характерните и разпознаваеми и от хартиеното издание тонове. При избор, бутоните се „активират” в символния за ресора цвят, който носи идентичността на вътрешните тематични раздели в изданието, чрез него се маркират и водещите тийзъри на началната страница. Там навигационните системи работят в съответната цветова гама.
След главното меню следват „етажите” на субнавигацията, организираща подстраниците и отвеждаща читателя в дълбочините на сайта. Освен че представя подменютата на сайта и осигурява видимост към тях, субнавигацията дава на читателите видимост и представа за тематичния и информационен контекст на страницата. Детайлното изразяване на вътрешните структури, ясното демонстриране на подобни в тематично, жанрово или географско отношение информации и интерпретации прави субнавигацията важен инструмент на ориентацията и използваемостта на сайта. Доброто отделяне на субнавигационните менюта от редакционните съдържания допринася за тяхната функционалност.
Най-често състояща се от падащи менюта, субнавигацията е насочена към бърза прегледност на вътрешната архитектура на страниците и осигурява видимост на рубрики, теми, публикации. При по-сложно йерархизираните сайтове необходимостта да се разполагат повече от три равнини на представяне и менюта по-скоро усложнява обслужването на навигацията, отколкото да го подпомага. Специалистите препоръчват в такива случаи разполагането на самостоятелни менюта или указатели върху подстраниците [1], за да не се утежнява прекалено много навигационният мениджмънт от началната страница. Подобно решение, обаче, крие опасност част от съдържанията във вътрешността на сайта да останат неоткрити от читателя поради липса на връзки от субнавигацията.
Недвусмисленото разпознаване на местопребиваването на потребителя чрез сигнализиране от главното меню или от субнавигационното поле, например чрез цвят, е основно за ориентацията и за използваемостта на сайта. Ясното, единно назоваване на елементите на менюто чрез кратки, разбираеми означения, наред с прегледната структура на сайта допринасят за ориентацията и бързата селекция на теми и публикации.
Освен че предоставят видимост и лесен достъп към вътрешното структуриране и тематиките на секциите и разделите, падащите менюта улесняват бързата навигация на читателя към вътрешните страници в сайта. Възможността потребителите да узнаят съдържанието на подстраниците оптимизира ориентацията и преодолява отварянето на менюта заради неточни ориентири и погрешни очаквания.
Ил. 3
|
Ил. 4
|
В „Süddeutsche Zeitung” падащо субнавигационно меню представя водещите теми в избрания раздел с изображения, рубрики и заглавия – тийзърите рекламират акцентните съдържания по атрактивен начин. Вътрешните страници организират информацията си чрез хоризонтални менюта, а основният навигационен елемент остава, за да свързва структурните части на цялото и да ориентира за тяхната организация.
Обширните сайтове с много и различни разклонения рядко разчитат единствено на тази функционалност, за да осигурят добра използваемост. В повечето случаи мега падащите менюта (Mega-DropdownMenu), състоящи се от последващи дълги списъци и други падащи менюта, предлагат опции за влизане в дълбочина в сайта още от началната му страница за детайлен преглед на теми и информации.
При мега навигацията от голямо значение е визуалното отделяне на често широко разгърнатите списъци и менюта от другите съдържания на страницата, за да не „прескача” погледът от навигационните полета към рубрики, тийзъри, заглавни елементи. Разбира се, добре намереният контраст и формула на визуалния дизайн не могат да отменят необходимостта от групиране, релевантно на структури, съдържание и конвенции.
Цвят, икони и типографски елементи улесняват разпознаваемостта на визуалните йерархии и ориентацията. Все пак използването на много ефекти не трябва да забавя или затруднява разгръщането на падащите менюта, за да не се стига до дисфункционалност на навигационната система.
Метанавигацията – инструмент за организация на сервизни съдържания и функционалности, е компонент на навигационния мениджмънт на всеки сайт. Разположена в най-горната част на началната страница или вдясно, метанавигацията не трябва да бъде подценявана заради профила на информциите, към които тя отпраща. Макар да не спадат към основните, присъщи съдържания, достъпът до тях е от значение за ориентацията на читателя и подкрепя основната навигация, макар да е отделен от нея. Най-често метатемите засягат аналогични функционалности като: home, регистрация, вход, бюлетини, търсене, контакт, избор на език и т.н.
Сервизните съдържания, често многобройни в новинарските сайтове и организирани чрез метанавигацията, в повечето случаи се разполагат в десния край, често за да представляват визуален баланс на разположеното вляво лого.
Като логичен завършек на страницата, футър навигацията се съчетава с футъра и понякога заема немалко пространство в дъното на страницата, понякога значително по-голямо от пространството на основната навигация. По-скоро допълнение към навигационния инструментариум, отколкото самостоятелен елемент при традиционните сайтове, футър менютата обхващат мета навигационни връзки и други, невключени елементи в основната навигация; най-ключовите съдържания, застъпени в основната навигация, без оглед на техните йерархизации и подменюта.
Заради по-големия брой елементи и връзки футър навигацията в новинарските сайтове много често се представят във вида на мега футър: с повторение на връзките от главната и мета навигацията.
Контекстуалните линкове водят към съдържания, свързани с актуалната тема и страница. Освен изискванията за откроимо визуално представяне, е необходима яснота за публикациите зад тях. Маркиране чрез подчертаване, използване на друг цвят, шрифт, наклон или тоналност или чрез икона пред текста – от станалите вече конвенционални варианти за оформяне на линковете медията избира тези, които се вписват в цялостната визуална концепция. Последователното спазване на съответния подход осигурява на сайта стилно единство и подпомага използваемостта му чрез бърза ориентация на читателите.
Контент слайдерите (още наричани Carousels или въртележки) са в състояние да презентират съдържанията чрез автоматично ротиране, като предизвикват читателския интерес посредством снимка и заглавия и извеждат водещи теми и информации. Тийзър слайдерите привличат вниманието към определени акценти и дават видимост на редакторските доминанти в сайта на ограничено пространство.
Ил.5 Ил.6
В „Times” под „главата” широкоформатни слайдери представят мощно водещите световни и европейски теми чрез фотографии и заглавия.
Особено ценни при сайтове със сложно, многопластово съдържания са навигационните пътеки или „breadcrumbs” – метафорично назовани „трохички хляб”, те подпомагат значително ориентацията на читателя чрез информация къде точно се намира и как е стигнал до там, така че да може не просто да излезе от съответната страница, а и да се придвижи до онова ниво, което търси. Във вид на хоризонтален списък от страници, задаващ последователните нива в йерархията на сайта – от началната страница, до страницата, на която се намира потребителят, навигационните пътеки са функционални, ако всяка страница представлява линк за връщане към нея.
Адаптивни решения на навигационните системи за различни размери
Ограниченото пространство за четене и преглеждане на новини и интерпретации от екраните на смартфоните налага акцентно излагане на водещите теми, а не доминация на инструментариума на менютата, които биха запълнили цялото пространство, без да са в състояние да предизвикват интерес или да представляват магнит за читателите. Тъй като именно актуалното и важно съдържание е довело потребителя до съответния сайт, а не навигационните системи, естествено е приоритетното присъствие на информациите на началните страници.
Разбира се, задачата на дизайна да привлича и интригува потребителите на мобилни устройства не означава отказ от навигационни елементи върху малките дисплеи, защото това би нарушило ориентацията и би попречило на търсенето и селекцията на информацията в медията. Вече е практика бутоните за регистрация, Login и полето за търсене да се оставят видими в горната част на страницата (в хедъра), тъй като те са от значение при новинарските страници и са едни от често използваните функционалности на този тип сайтове.
Фиксираната навигация при адаптивните модели на отзивчивия дизайн [2] се съчетава с иновативни навигационни системи, които нестандартно отговарят на различна среда и устройства. Адаптивната навигация, „прибираща” менюта и раздели зад основното съдържание, е от съществено значение за приложения и четене от мобилни устройства. Опростяването на менютата като основна тенденция при разработката на интерфейса на мобилните версии или включване на скрити менюта във вида на „hamburger” меню е мощна тенденция в съвременния уеб дизайн, която може да се проследи и във версиите за широк екран (desktop версиите). Минималистична и удобна, функционалността на „хамбургер” менютата вече се използва широко както в мобилни стайтове, така и в приложения.
Ил. 7
|
Ил. 8
|
|
Ил.9
Навигационните типове за мобилни устройства с управлениe чрез тъчскръйн произтичат преди всичко от вида на сайта и от преценката на неговото съдържание и употреба. На базата на проучвания върху типологията на сайта и върху неговите традиционни навигационни системи могат да бъдат развити такива мобилни навигации, които да обслужват пълноценно съдържанията и да дават безпрепятствен достъп на потребителите до целия обхват и до всички структури без загуба на информация и без излишно претоварване на началните страници.
По-лаконични сайтове с по-проста структура могат да си позволят да следват разположението на менютата си от десктоп вариантите си върху мобилните проекти, което е лесно изпълнимо и без сложна допълнителна разработка и гарантира бърза разпознаваемост върху различни устройства, но при медийните сайтове този подход е неприложим поради многобройните пунктове на менютата, заради което може да бъде загубен целият стартов екран.
Ил.10
Ил.11
Ил.12
И ако до 768 px, както при „Boston Globe”, или аналогични ширини на прекъсвания, основното меню може да бъде представено с или без кондензации и леки редукции на секции, то при намаляване на размера на 600 px, например, чрез супер падащо меню могат да се организират съдържанията на секциите, топ темите и подсекциите. Преустройства на менюта, за да отпадат компоненти от основната навигация и да се прибират „навътре”, в падащите менюта, без обаче да се съкращават като възможности за достъп, са сред обичайно срещаните практики при преструктурирането на навигационните системи за малки екрани на медийните сайтове.
Разполагането на малко на брой единици в менюто в горната част на страницата под логото наистина освобождава пространство за водещите новини, а от друга страна – дава възможност за извеждане на видими основни секции, функционалности или връзки и е потребителски ориентиран подход към коплексни сайтове и сложна структура. При отваряне на вътрешна страница този стил ориентира читателя къде се намира и прави достъпни другите секции.
Дори по-голям брой единици могат да бъдат подредени компактно в горната част на началния екран – двуредово или в друга композиция, за да постигнат по-добра функционалност на сайта, без да скриват водещите теми.
Селективното меню, от своя страна, открива опциите на навигацията си при избор от страна на потребителя, в другия случай остава „зад” началната страница. Макар разполагането на селективно падащо меню в горната част на страницата да дава възможност за ефективно организиране на пространството на екрана за приоритетни съдържания, без да се губи връзка с другите секции, то може да бъде объркващо и да не се интегрира достатъчно добре в композицията на началната страница.
Замяната на текстови менюта с икони за спестяване на място може да даде решение при определени сайтове, при това да даде входни точки чрез въздействащо изпълнение на тези елементи, но е свързана с ограничена употреба и може да застраши ориентацията заради проблемна декодируемост на елементите и невинаги недвусмислените значения на символите.
По-обемните менюта могат да останат скрити при потребление от малки устройства зад линк от горната част на страницата и да станат видими в долната част на екрана.
Заради широкоизвестната възможност и най-добрият проект да бъде саботиран от скучното присъствие на менюта и бутони върху началната страници за смарт устройства, вече са обичайни практиките навигационните елементи да се разполагат долу на страницата (във футъра) или да остават скрити зад един бутон. Освобождаването на горната част на екрана на мобилното устройство чрез разполагане на навигацията в дъното на страницата, в т.нар.футър навигация дава на сайта бърз акцент върху основното съдържание и е релевантно на субординирания характер на служебните елементи, привлича погледите върху актуалните информации, без да лишава потребителя от обширни менюта и подменюта, които могат да бъдат достъпни през изскачащи области на екрана.
Многослоестото меню се състои от няколко равнини, подреждащи основните и допълнителните навигационни системи.
Отварянето на разгърнато меню през вариантите Toggle навигацията може да даде на проекта голяма свобода и креативни решения с много разнообразни подходи като слайдер опции на списъка с менютата, „акордеон” ефекти, откриване на меютата чрез изтласкване на страницата надолу и т.н. Това е и един от разпространените подходи към оформянето на навигационните системи, защото при него чрез натискане на линк менюто „изплува” над или под началната страница на сайта, без да я затваря или се разполага върху нея. Мулти Toggle менютата предлагат след клик или докосване разгърнати менюта, в повечето случаи на принципа на „акордеон” ефекта – като през основните пунктове на менюто се отварят връзки към вътрешни страници и достъп до тях.
В повечето случаи сложните структури на медийните сайтове изискват и по-детайлни варианти на менютата като при подхода off canvas, при който от бутона на менюто цялата повърхност на страницата се изтласква надясно, за да освободи площ на навигационните елементи. Характеристиките на съвременните устройства дават възможност за много добри изпълнения на подобни маниери на организиране на менютата. Навигацията извън визуализационния прозорец (off canvas) се приплъзва върху него, като „избутва”съдържанието на страницата частично или напълно извън зрителния обсег.
Цветът може да оптимизира използването на навигационни системи, бутони и линкове. Стрелки, плюсове или други знаци в единиците на падащото меню сигнализират на потребителя за наличието на подменюта. При тези елементи разпознаваемостта на основните менюта от субменютата е от значение за ориентацията.
Комплексният характер на новинарските сайтове предполага и много различни навигационни равнини, като тук от значение е не само големината на дисплея, а начинът, по който потребителят управлява съдържанията: дизайнът за тъчскрийн устройствата предполага ергономични величини на повърхности за докосване при менюта и текстови линкове, съобразени с размера на пръстите [3], както и преценка на уместността и използваемостта на инструменти и менюта, използвани в десктоп версиите. Когато отделните пунктове на менюто не са ясно и разбираемо назовани, за да е сигурен читателят какви съдържания се крият зад тях, когато иконите на основната навигация са енигматични, а линковете в текстовете не са откроени и се сливат с тях, когато потребителят не е в състояние да определи на коя вътрешна страница се намира, информационната архитектура и навигационната система не са в състояние да гарантират оптимална използваемост на сайта.
Заключение
Кохерентността на медийното представяне върху различни устройства, макар да не предполага напълно еднакъв изглед, изисква свързани съдържания, оптически единен интерфейс. Визуалната консистентност на различни платформи се изгражда на базата на гъвкави съдържания, структури и оформителски концепции, които могат да бъдат динамични и напасващи се спрямо крайното устройство.
Бележки:
[1] Hahn, Martin. Webdesign – Das Handbuch zur Webgestaltung. Bonn: Galileo Design, 2015, S. 197.
[2] Вълканова, Веселина. Адаптивни модели при мултиплатформено представяне на медиите. In: Newmedia21.eu. Медиите на 21 век: Онлайн издание за изследвания, анализи, критика [online], 01.12.2016 [cited 09.01.2017]. Available from: http://www.newmedia21.eu/izsledvaniq/adaptivni-modeli-pri-multiplatformeno-predstavyane-na-mediite
[3] Zillgens, Chirstoph. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. München: Carl Hanser Verlag, 2013, S. 57.
Библиография:
Вълканова, Веселина. Адаптивни модели при мултиплатформено представяне на медиите. In: Newmedia21.eu. Медиите на 21 век: Онлайн издание за изследвания, анализи, критика [online], 01.12.2016. Available from: http://www.newmedia21.eu/izsledvaniq/adaptivni-modeli-pri-multiplatformeno-predstavyane-na-mediite
Anthony, T. Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes. // Smashing Magazine. February 21st, 2012. Available from: https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes
Böhringen, Joachim, Peter Bühler, Patrick Schlaich. Kompedium der Mediengestaltung. Konzeption und Gestaltung für Digital- und Printmedien. 5. Auflage. Berlin Heidelberg: Springer-Verlag, 2011.
Bottitta, Tito. How to Approach a Responsive Design. // Upstatement, January 26, 2012. Available from: http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design
Еrtel, Andrea, KaiLaborenz. Responsive Webdesign. Anpassungsfähige Websites programmieren und gestalten. 2., aktualisierte Auflage. Bonn: Rheinwerk Verlag, 2016.
Hahn, Martin. Webdesign – Das Handbuch zur Webgestaltung. Bonn: Galileo Design, 2015.
Hellwig, Jonas. Adaptive Website vs. Responsive Website. // Kulturbanause, 9. August 2015. Available from: https://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website
Kranz, Alexander, RicardaStiller. News-Sites. Design und Journalismus. Springer Verlag: Berlin, 2003.
Marcotte, Ethan. Responsive Webdesign. // A List Apart, 25 May 2010. Available from:http://alistapart.com/article/responsive-web-design
Maurice, Florance. Mobile Webseiten. Strategien, Techniken, Dos und Don’ts für Webentwicklern. München: Carl Hanser Verlag, 2012.
Nagel, Wolfram, ValentinFischer. Multiscreen Experience Design. Prinipien, Muster und Faktoren für die Strategieentwicklung und Konzeption digitaler Services für verschiedene Endgeräte. 2. Auflage. Swäbisch Gmünd: digiparden GmbH, 2013.
The New Multi-screen World: Understanding Cross-platform Consumer Behavior. // Think With Google, August 2012. Available from: https://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html
We’ve made it. // Responsive News. Where BBC News developers blog about responsive design. Available from: http://responsivenews.co.uk/post/114413142693/weve-made-it
Wroblewski, Luke. Mobile First. // LukeW. Ideation & Design. November 3, 2009. Available from:http://www.lukew.com/ff/entry.asp?933
Wroblewski, Luke. Multi-Device Layout Patterns. // LukeW. Ideation & Design. March 14, 2012. Available from:http://www.lukew.com/ff/entry.asp?1514
Zillgens,Chirstoph. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. München: Carl Hanser Verlag, 2013.
Цитат-формат (Suggested Bibliographic Citation):
Вълканова, Веселина. Визуален дизайн на навигационните системи в медиите онлайн: Статични и динамични елементи за представяне на съдържанията за различни размери на екрана. // Медии и обществени комуникации. Изд. УНСС; Алма комуникация. 2017, №30. Available from: [www.media-journal.info]
дата на публикуване: 11.01.2017, Сряда, 14:19
прочетена: 8145 пъти