СПОДЕЛИ

Она што некогаш беше табу во дизајнот на веб сајтови, сега се врати на сцената како една од најпопуларните техники. Претпоставувате – скролувањето. Ја отфрли стигмата и одново се роди како основен елемент за интеракција во дизајнот, па затоа дека дизајнерите мора да ги научат новите правила на игра.

Photo credit: Fitbit

Во овој напис ќе позборуваме за преродбата на скролувањето, ќе ги продискутираме предностите и негативностите, и ќе ви дадам листа со совети за оваа техника.

Зошто скролувањето доживеа повторен подем

Одговорот е едноставен – мобилни уреди.

Откако мобилните корисници ги надминаа по број оние кои пребаруваат на десктоп, дизајнерите на кориснички интерфејс се прилагодија на промената. Со толку многу корисници на помали екрани, скролувањето е повеќе од неопходно, колку помал екранот, толку подолго скролувањето.

Но, постојат и други фактори. Пристапот до интернет со поголема брзина го олеснува скролувањето, и ако го споредиме со кликнувањето од една на друга страница, тогаш дефинитивно е и побрз начин на кој може да дојдете до информациите. Растечката сила на сајтовите на социјалните медиуми дополнително и дава моќ на оваа техника (скролувањето го сместува богатството на содржина која е генерирана од корисниците).

Како и што се вели во упатството именувано како Трендови во веб дизајнот, долгото скролување се развило паралено со дизајнот базиран на картички. Кога се употребуваат во комбинација корисникот добива неограничен проток на содржина (што впрочем е одлично веб и мобилно искуство).

Photo credit: Upworthy
Дополнително, верувањето дека сé треба да оди над точката на прекршување на страницата сега е само мит. Вистината, според моменталните истражувања, е дека на корисниците воопшто не им пречи скролувањето. Практиката да натискате сé над прекршувањето на страницата е поразена од можноста да се раскомотите во поширок простор и да ја распределите содржината рамномерно долж скролувањето.

Дел од причините зошто митот стана популарен е тоа што скролувањето можеше да се прифати како елемент во дизајнот дури по напредокот на Javascript и CSS. Пред тоа, беше многу тешко да се направи убаво скролување преку визуелно прераскажување на приказна. Како и што може да си замислите, долга страница полна со текст (прекината со по некоја случајна слика) не е примамлив распоред на кориснички интерфејс.

Photo credit: The Boat

Само откако ќе му пристапите на долгото скролување како на канвас на кој може да ги илустрирате почетокот, средината и крајот (преку графики, анимации, икони, итн.) ќе може да ја забележите неговата моќ да привлече внимание.

Имено, сега се појавуваат некои хибридни модели во скролувањето. На пр. фиксното скролување во место на UXPin го дава истото интерактивно искуство како и традиционалното долго скролување, но без вертикално растегнување на сајтот.

Photo credit: UXPin

Дали скролувањето е за вас?

Секоја техника и алатка во дизајнот има свои поддржувачи и група на луѓе кои едноставно ја мразат. Во најголемиот број на случаи, никој од двете страни не е потполно во право, ниту греши, па затоа, најважно е да ги измерите сите придобивки и неодататоци за да знаете дали оваа техника одговара на даден проект.

Придобивки од скролувањето:

  • Поттикнува интеракција. Со константната стимулација на елемент кој постојано се менува, ова може да е интересен елемент за раскажување на приказна, кој  води кон интеракција, особено со паралакса скролувањето направено со вкус.
  • Брзина. Долгото скролување е побрзо од кликнувањето низ комплексна патека за навигација и не го забавува, или ограничува, корисничкото искуство. Како и што е опишано во Дизајн за интеракција – најдобри практики, перцепцијата на времето често е поважна и од самото време кое поминува. 
  • Привлекува корисници. Фактот дека  лесно се употребува влијае и на интерактивноста, и на времето поминато на сајтот. Ова е особено точно за сајтовите со неограничено скролување, во кои може да им помогнете на корисниците да откријат содржина која не ни помислиле дака ќе ја најдат на тоа место. 
  • Прилагодлив дизајн. Дизајнирањето на страницата може да стане комплицирано заради различните уреди и големини на екран, но скролувањето помага да се поедностават разликите.
  • Контроли со движење на рака/прст. Скролувањето многу природно се врзува со допирот, и затоа лизгањето на прстот надолу се прима како многу поедноставен процес од притиснувањето на различни области на екранот. Корисниците (особено на мобилни уреди) ова го прифаќаат како начин на прикажување содржина.
  • Преубав дизајн. Неколку кликнувања може да резултираат во побраза интеракција за поапликациско или “погејмерско” корисничко искуство. 
Photo credit: Bauer

Недостатоци на скролувањето:

  • Тврдоглави корисници. Независно од причината, некои корисници секогаш се против новини. Сепак, техниката е широко распространета (особено кај искуствата на мобилен уред), па слободно може да речеме дека мнозинството корисници веќе се имаат прилагодено на неа. 
  • SEO недостатоци. Имањето на само една страница може да има негативен ефект на оптимизацијата кај пребарувачите на страницата. За да видите као да ги надминете овие проблеми, погледнете го ова парче на Moz за паралакса скролување и ова на Quicksprout за бесконечно скролување.
  • Дезориентација. Раздвојувањето на скролувањето и содржината може да ги збуни корисниците.
  • Потешкотии при навигација. Малку е чудно кога треба да се вратите назад на претходната содржина од страницата. За да се справите со ова, може да креирате постојана навигација во горниот дел, каде секој елемент ќе биде засидрен на секција во страницата.
  • Брзина. Големите блокови содржина, како видео галирии и галерии со слики, може да го забават сајтот, особено ако има паралакса скролување кое се потпира на Javascript и jQuery (погледнете го овој туторијал за да научите како да креирате сајт со паралакса без да ја намалите неговата брзина на вчитување.
  • Нема подножје. Со сајтовите со бесконечно скролување препорачуваме фиксно подножје. Во спротивно корисниците ќе се збунат од недостатокот на дополнителна навигација во дното на страницата.

Ако ги тргнеме настрана придобивките и недостатоците, долгото скролување е техника која одговара во некои сајтови, а во некои не е пожелна. Веб сајтовите може да ја искористат оваа техника за својот дизајн и содржина ако:

  • … во најголем дел имаат мобилен сообраќај (повеќето нивни корисници)
  • … вклучуваат чести ажурирања или нови содржини (како блог)
  • … имаат многу информации кои се прикажани на еден начин (како инфографика)
  • … не содржат збогатен медиум, затоа што тоа ќе влијае на времето на вчитување

Сајтовите на социјални медиуми, со константна и екстензивна содржина која е генерирана од корисниците, одлично функционираат со долгото скролување (Facebook и Twitter ја популаризираа ова техника пред неколку години). Од друга страна, страниците кои имаат цел, како сајтовите за е-трговија, имаат потреба од кохерентна навигација и претпочитаат конзервативна должина на страницата.

Photo credit: Amazon
Photo credit: Amazon

Нешто на средина би бил сајт сличен на Etsy, продавница на интернет која употребува хибридно решение: неколку страници на т.н бесконечно скролување кое завршува со копчето за повик на акција “Show Me More” (Покажи повеќе).

Photo credits: Etsy
Photo credits: Etsy

Правилото што важи за сите трендови во веб дизајнот, важи и овде. Немојте да го употребувате долгото скролување само заради тоа што другите сајтови го употребуваат. Вашиот веб сајт треба да ги исполнува критериумите кои ги дискутиравме, па дури потоа да ја употреби оваа техника, затоа што, во спротивно, може да добиете полоша изведба на сајтот.

Најдобри практики за скролување

Долгото скролување, ефектот на паралакса и сличните на нив механизми, се нешто ново во дизајнот ( ~4 години) , но сепак досега имаат успеано, преку грешки, да дојдат до неколку основни, најдобри практики.

Од она што успеавме да го сумираме од Трендови во веб дизајнот, еве неколку секојдневни совети за успешна имплементација на долгото скролување.

  1. Не плашете се да правите комбинации од долго скролување со кратко. Дозволете и на содржината да ја диктира должината на скролувањето, а не обратно. Во ред е (и сосема во тренд) да употребите почетна страница со кратко скролување и страница на пристигнување со долго скролување (како Products, Tour, итн.).
  1. Имајте ја на ум фиксната навигација, како онаа што ја има употребено Free Range Designs, така корисниците секогаш ќе може да се  “вратат назад” или да скокаат од еден елемент во друг.
Photo credits: Free Range Designs
Photo credits: Free Range Designs
  1. Упатете на скролувањето со елементи или алатки во дизајнот, за корисниците да може да сфатат како функционира страницата. Стрелките, анимираните копчиња или некои од другите алатки за кориснички интерфејс на забавен начин ќе им помогнат на корисниците да отидат на она што е следно. Некои сајтови вклучуваат и мали копчиња со инструкции како “Скролувај за повеќе” или “Започни овде” за да ја потпомогнат навигацијата со неконвенционални техники.
  1. Направете јасна разлика помеѓу кликнувањата за скролување или допири, и останатите копчиња со повик за акција, за да ја добиете посакуваната интеракција.
  1. Истражете како корисниците се во интеракција со скролувањето. Во Google Analytics, на пример, може да го отворите јазичето “In Page Analytics” за да видите колку луѓе кликнале под прекршувањето на страницата. Врз основа на податоците, по потреба, може да направите мали измени во дизајнот.
  1. Не претерувајте. Долгото скролување не подразбира 500 страници на непрекината содржина. Тоа може да е и едноставно. Раскажете ја приказната и запрете. Не форсирајте. Deca, подолу, употребува скролување кое е само неколку страници долго.
Photo credits: Decasrl
Photo credits: Decasrl
  1. Фокусирајте се на вашите цели и прифатете го фактот дека дури и сајтовите со бесконечно скролување не се навистина бесконелно долги. Кога креирате сајт со подолго скролување, сфатете дека на корисниците им е потребно чувство за ориентација (нивната моментална локација) и навигација (другите можни патеки).
  1. Вклучете визуелни знаци кои ќе им помогнат на корисниците да се ориентираат при скролувањето, како иконата со кацига од левата страна на The Seven Types of Motorcycle Rider.
Photo credits: MCaleicester
Photo credits: MCaleicester

Скролувањето е меч со две острици, па затоа придржувајте се до препорачаните употреби за да не направите повеќе штета отколку добро.

Дизајн на иднината – дизајн без страници

Долгото скролување нема да оди никаде. Иако видовме и зголемување и намалување на екраните кај популарните уреди, малите екрани сепак остануваат, барем во догледна иднина. А, малите екрани бараат и скролување.

Впрочем, транзицијата од долго скролување до “дизајн без страници” е веќе отпочната, и некои дизајнери (како оние во Digital Telepathy) дури и веруваат дека тоа е иднината на вебот. Како што веб сајтовите продолжуваат да се ослободуваат од ограничувањата за тоа како корисниците размислуваат околу конзумирањето на информации, дизајнерите мора порадикално да размислуваат за најдобрите начини на кои ќе креираат содржина во различни околини.

Photo credits: Photohigh
Photo credits: Photohigh

Дизајнот на интеракции (Interaction design) е основата на веб дизајнот со скролување со долги страници. Ако на корисниците им се допаѓа интерфејсот и сметаат дека е интуитивен и забавен за користење, тогаш нема да имаат ништо против големата должина на страниците (се’ додека не е претерано долга).

Не секогаш е потребно да ги кратите работите – некогаш се’ што е потребно е да направите чекањето да биде позабавно.

извор: designmodo

Ти се допадна овој напис?
Се согласувам моите податоци да бидат префлени на MailChimp ( повеќе информации )
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.