Имаге Цароуселс ин Веб Десигн - Предности и најбоље праксе

Нема мањка карусел, слидесховс на Интернету. У ствари, овај тренд није учинио ништа осим расте у протеклих 5-10 година са подршком за више прегледача него икада раније. Али да ли су слика вртуљци заиста вриједни труда? Какве користи они производе и како их треба продуктивно користити у распореду?

Хтео бих да поделим неке заједничке трендове, живе примјере и идеје за веб дизајнере заинтересоване за каруселе за слике. О овим динамичним клизачима се доста расправља, али мислим да они додају вриједност када су израђени у правом контексту.

Производни карусели за е-трговину

Свијет е-трговине је пун ротирајућих вртуљака на почетним страницама и страницама производа. Циљ је да одржава јасну густину информација са фотографијама и текстом испричајте јединствену, али вредну причу да помогне у продаји производа.

Постоје два примарна положаја за клизач производа за е-трговину:

1. На почетној страници продавнице
2. На страници производа

Обоје раде другачије, али служе истом циљу - да продају производе на визуелни начин.

Пример 1: Ау Лит Фине Линенс - почетна страница

Погледајте почетну страницу за Ау Лит Фине Линенс, то користи аутоматски ротирајући карусел преко целог екрана да се покажу различити производи, као што су дуветс, јастуци и покривачи за кревет.

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

Овај клизач може бити застрашујуће када се први пут спусти на страницу, али са линк линк и оверлаи тект то такође може бити веома охрабрујуће за посетиоце који само желе да роне и купују.

Пример 2: Еден цасе цасе - страна производа

Специфичнији пример можете видети на страници производа Еден за телефон. Користи се аутоматски ротирајући клизач да бисте приказали слике производа.

Мислим да је ово мало “превише” у свету е-трговине. Када гледам производ који желим да будем у контроли пребацивања између слика.

Бољи избор је направити галерију слика са контролом која се даје посетиоцу. На пример, страница Дизајн од људи користи сличице за сваку фотографију што је много охрабрујуће и даје више контроле кориснику.

Вртуљак веб портала

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

Пример 1: Бибоун - почетна страница

Француски уметник који ради под именом Бибоун има а карусел клизач на почетној страници са исечцима уметничких дела. Појединачни слајдови воде до интерних страница у портфељу које покрива читав пројекат са више фотографија.

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

Сви делови су еккуисите у Бибоуновом клизачу, и то не заузима много простора било. Иако знам да неки људи мрзе ауто-ротирајуће пројекције слајдова са добрим разлогом, на тако минималистичком изгледу тешко ми је да се жалим на ову особину дизајна.

Пример 2: Вебсајт Арона Блаисеа - почетна страница

Стварно ми се свиђа пример пронађен на Аарон Блаисеовој веб страници јер је он приказује свој рад као портфолио, али углавном користи овај сајт продати своје уметничке видео снимке. Аарон Блаисе је радио у Диснеиу неколико деценија, и он има способност да то докаже.

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

Велики портрет карусел фокусира се на слике, и води посетиоце даље на веб страницу. Ако можете да добијете ове две ствари онда не бих био против овакве функције на личном портфолију.

Заједнички трендови у дизајну

Ако погледате неке од мојих претходних примјера, примијетит ћете да постоје двије различите врсте клизача: цео екран и фиксна ширина.

Ови стилски избори често односе се на распоред и на колико садржаја може да издржи. Ако се распоред простире преко пуне ширине странице онда има смисла проширити и клизач. Али и то вас присиљава на то пронађите слике високог квалитета које још увек изгледају добро на екрану великих монитора резолуције.

Ја лично више волим стил фиксне ширине као што ћете видети у два примера уметничких портфолиа. Су много лакше контролисати, и често су не тако висок - олакшавају посетиоцима једноставно их игноришите ако желе.

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

Ја сам са овим приступом у смислу да је то мање интензивна меморија са мање анимација и покрета у претраживачу, а већина људи не воли нити аутоматске ротирајуће вртуљке - и увијек бисте требали послужи се публици.

Међутим, не могу да кажем да никада не вреди додавати клизач за аутоматско напредовање, поготово зато што са статичким клизачима не добијате онолико погледа, и такође треба направите свој први слајд најважнијим што више корисника неће прећи на следећи слајд. Одлука о томе да ли се клизач аутоматски ротира или не, нажалост је подручје покушаја и грешака.

Шта да избегнемо по сваку цену

Ево једне важне ствари коју ја лично мислим потпада под “избегавати по сваку цену”. Погледајте или кликните на слику испод и покушајте да погодите шта је то.

Интернет презентација кафеа Иозенн користи клизач за заглавље у пуном екрану. Он се не аутоматски ротира, што је одлично, али и слајдови не служи другачије него украс.

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

Ја бих тврдио да ова позадинска клизна особина не додаје много вриједности већ постојећем веб сајту. Ако су слике имале линкове или пратећи текст, оне би бар биле релевантније.

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

Интерактивне функције

Начин на који корисници управљају вртуљком утиче на сам дизајн. Постоје разне стилове навигације, али оне су најпопуларније:

• Навигација заснована на тачкама
• Навигација стрелицама
• Тхумбнаил навигатион
• Листа веза или ставки наслова

Најчешћи је дот навигатион које ћете наћи на стотинама модерних веб страница.

Пример 1: Цхиц ат Хоме - почетна страница

Цхиц ат Хоме је одличан пример три мале тачке испод клизача за означавање навигације. Свака слика се аутоматски ротира, а дотична тачка у серији напуни се црном. Друге две празне тачке означавају потенцијалне слајдове за кориснике.

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

Пример 2: Чисти циклуси - почетна страница

Почетна страница Пуре Цицлес користи а комбинација навигације тачкама и стрелицама. На овај начин корисници имају навигацију напријед и назад, али такође погледајте “свеукупно” навигација кроз тачкасте везе на дну.

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

Пример 3: ИГН - почетна страница

На почетној страници ИГН пронаћи ћете другу ауто-ротирајући карусел који користи насловне везе за навигацију. Ово је врло уобичајено за издаваче који то желе селл хеадлинес радије него производе. Сваки линк иде на појединачни слајд који на крају води до странице чланка.

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

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

Кључне Такеаваис

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

Покушајте да избегавате ауто-ротирајуће вртуљке, и користите их само на главним одредишним страницама (почетна страница је један примјер). Докле год је вртуљак има сврху, и не изгледа као оглас, Ваш дизајн би требао бити добар.

Ако тражите више информација о веб каруселима, погледајте неке од следећих постова:

• Цароуселс би Брад Фрост
• 8 Захтеви УКС-а за дизајнирање каросерије на почетној страни
• Употреба вртуљка: Дизајнирање ефективног корисничког интерфејса за Веб локације са преоптерећењем садржаја