10 судалгаанд тулгуурласан вэб дизайн зөвлөмжүүд: Хэрхэн ажилладаг вэб сайт боловсруулах
Үр дүнд хүрэх вэбсайтыг хэрхэн зохион бүтээх талаар бидний хамгийн сайн зөвлөгөө, санаа, урам зоригийг энд оруулав. Сайхан харагддаг сайт, зочдыг хөрвүүлдэг, тэдгээр хатуу олсон айлчлал нэг бүрээс илүү үнэ цэнийг авдаг.
Вэбсайтын бүтцийн зохион байгуулалт
Вэбсайтууд нь сав, агуулга гэсэн хоер зүйл юм. Сав нь бүтэц, хэв маяг гэсэн хоер зүйл юм. Эхнийх нь эхэлье. Эдгээр зөвлөмжүүд нь хуудасны бүтэц, зохион байгуулалтын тухай юм.
1. Харааны шатлалыг хөшүүрэг болгох
Хуудас бүр харааны шатлалтай. Хэрэв та энэ ойлголтыг мэдэхгүй бол бидний тодорхойлолт энд байна:
Харааны шатлал гэдэг нь харааны элементүүдийн зохион байгуулалт, хэмжээ, өнгө, ялгаатай байдлыг хэлдэг. Энэ нь тэдний харьцангуй нэр хүнд, хүний нүдээр харж буй дарааллыг тодорхойлдог.
Вэб дизайнерууд эхлээд зочдын анхаарлыг чухал элементүүдэд чиглүүлэх харааны шатлалыг ашигладаг. Вэбсайтын зохион байгуулалт нь байрлал (хуудсан дээрх өндөр эсвэл бага), хэмжээ (том эсвэл жижиг), үзүүлэн (Видео, зураг, дүрс), тодосгогч (өнгө, цагаан зай) орно.
Талыг хослуулах нь тэдний үр нөлөөг үржүүлдэг. Хүн бүр том видео, хуудсан дээр өндөр харах болно. Цөөн тооны хүмүүс зургаар хүрээлэгдсэн бага тодосгогч текстийг харах болно.
Харааны шатлал бол таны нүд интернетэд зочилсон хуудас бүр дээр тодорхой замыг дагадаг. Санаатайгаар ашиглахдаа энэ нь зочдын анхаарлыг цуврал мессежээр дамжуулан, үйл ажиллагааны дуудлага руу чиглүүлдэг.
2. Нүүр хуудсан дээр тайлбар, түлхүүр үгээр чиглэсэн гарчиг өндөр ашиглах
Нүүр хуудасны дээд талд (мөн хуудас бүр) гарчиг нь тайлбар эсвэл үгүй. Хэрэв үгүй бол зочин эхний асуултанд хариулах боломжгүй байж магадгүй юм: “Би зөв газартаа байна уу?”
Энэ нь зорилтот түлхүүр үгийг ашиглах, хамаарлыг заах боломж юм. Гэхдээ маш олон маркетерууд оронд нь ухаантай эсвэл бүрхэг зүйл бичдэг. Гэхдээ тодорхой ухаантай илүү сайн байдаг.
Сонирхолтой, гэхдээ тодорхой бус гарчиг бичихийн оронд ямар нэг тайлбар бич. Та компани хуудсан дээр хүртэл өндөр вэ юу тайлбарлаж байгаа эсэхийг шалгаарай, дахин дээш.
Хүлээгээрэй, атираа нь хэвээр байна уу?
Тийм ээ, дахин байна. Дэлгэц бүр дээр зочлох бүрт харах боломжтой газар байдаг. Доод талд нь алдартай Атираа байна. Энэ шугамын доор юу ч харахын тулд, тэр зочин гүйлгэж байх естой.
Яагаад, энэ вэб дизайн чухал бол hotly маргаантай сэдэв юм. Энд хамгийн сайн нэмэлт өгөгдлүүд нь хоер юм: “ямар ч дахин байдаг!”vs” дахин ч чухал.”
Мэдээжийн хэрэг, жижигхэн, асар том хэмжээтэй мянга мянган дэлгэцийн хэмжээ байдаг. Энэ вэб сайт дээр үзсэн 958 өнгөрсөн сард өөр өөр хэмжээтэй дэлгэц. Тиймээс зарим дизайнерууд дахин холбогдох ямар ч урт юм хэлж байна.
Гэхдээ энд доод шугам юм (үүнийг авах?) Бүх айлчлалын хувьд Дахин, одоо ч гэсэн бүх айлчлалын хувьд дундаж дахин байсаар байна. Hotjar гэх мэт хэрэгслүүд үүнийг scroll heatmap дахь мөр болгон тодорхой харуулж байна, ширээний/зөөврийн компьютер, гар утас, таблет.
Тийм ээ, дахин байдаг бөгөөд энэ нь та дээр, доор тавьж юу чухал. Нэгэн судалгаагаар жуулчид цагийнхаа 80% – ийг нугалаас дээгүүр өнгөрөөдөг байна.
Тэгэхээр таны үнэ цэнэ саналаа тавих, та юу гэж 8 үг хувилбар, хуудсан дээр өндөр, дахин дээш.
3. Гэхдээ бүх дуудлагаа үйлдэл дээр нь дээд зэргээр бүү тавь
Жуулчид тэнд илүү их цаг зарцуулж магадгүй ч энэ нь арга хэмжээ авахад бэлэн гэсэн үг биш юм. Маш олон ятгалга хуудас цаашаа болдог.
Chartbeat дүн шинжилгээ хийх үед 25 сая айлчлал тэд хамгийн оролцоо дахин доор юу болохыг тогтоожээ. Дээд хэсэгт агуулга харагдаж болно, энэ нь заавал үйл ажиллагаа нь таны дуудлага тавих хамгийн үр дүнтэй газар байх болно гэсэн үг биш юм.
Энэ талаар нэг анхаарах нарийн зүйлс байнга-иш татсан судалгаа: Chartbeat мэдээ вэб сайт нь ихэвчлэн ашиглаж байна, маркетингийн вэб сайт нь маш их ялгаатай байдаг бөгөөд. Хэн ч мэдээ вэб сайт дээр дахин их вэ! Ердийн вэб дизайны зөвлөмжүүд хамаарахгүй.
Хүү өндөр байх магадлалтай аль ч газарт, хуудсыг доош хол үйл ажиллагаа дуудлага тавих эсэхийг шалгаарай.
4. Энэ нь өндөр хуудас болгох. Таны бүх зочдын асуултанд хариулах.
Илүү пиксел гэдэг нь асуултанд хариулах, эсэргүүцлийг шийдвэрлэх, дэмжих нотолгоог нэмэх илүү их зай гэсэн үг юм. Хэрэв зочин чухал асуултын хариуг олохгүй бол тэд зүгээр л хуудсыг үргэлжлүүлэн хөдөлгөж болно. Тэд сэтгэл хангалуун болсны дараа тэд зүгээр л уншихаа болих болно.
Хамгийн үр дүнтэй борлуулалтын хуудсууд нь борлуулалтын яриаг дуурайдаг.
Та борлуулалтын уулзалтын үеэр хэн нэгнийг хэзээ ч таслахгүй, тэдний асуултанд хариулахаа болино биз дээ? Энэ нь бүх богино хуудас хийдэг юм; энэ нь асуултанд хариулахаа болино.
Галзуу өндөгнөөс алдартай судалгаа орж ирдэг газар энд байна. Тэд үзэгчдээ судалж, Тэдний шилдэг асуулт, санаа зовнилыг олж илрүүлж, бүх зүйлийг тусгасан өндөр хуудсыг барьсан.
5. Нэг удаад нэг зүйлийг харуул
“Би цэвэр, орчин үеийн загварт дуртай.”Энэ бол манай үйлчлүүлэгчдийн ихэнх нь вэб дизайны төслийг эхлүүлэх үед бидэнд хэлдэг зүйл юм. Тэд ихэвчлэн жишээ болгон Apple-ийн вэб сайтад хандана.
Жуулчид чимээ дургүй байдаг. Бид цагаан арьстнуудад дуртай. Өөрөөр хэлбэл, бид бага харааны төвөгтэй дуртай.
2012 онд Google-ийн вэб сайт ямар төрлийн жуулчдад сайхан гэж үзэж байна олж тогтоосон. Энэ бол маш төвөгтэй нэртэй энгийн байдлын талаархи судалгаа юм: вэбсайтуудын анхны сэтгэгдэлтэй холбоотой харааны нарийн төвөгтэй байдал, прототипийн үүрэг: гоо зүйн шүүлтийг ойлгох чиглэлээр ажилладаг.
Тэд илүү нарийн төвөгтэй загвар нь үзэсгэлэнтэй гэж үзэх магадлал багатай гэдгийг мэдсэн.
Энэ нь нэг багана байрлал, өндөр хуудас руу чиг хандлагыг тайлбарласан. Олон багана бүхий загвар (зүүн талын навигаци, агуулгын талбай, Баруун төмөр зам) нь илүү төвөгтэй бөгөөд зочдын харааны талбарт илүү харааны элементүүдтэй байдаг.
Тиймээс чимээ бууруулах. Хоер элементийн аль нэгийг гүйлгэх гүн бүрт анхаарлаа төвлөрүүл.
6. Стандарт байрлал зөөгч
Google-ийн хийсэн ижил судалгаагаар “өндөр прототипийн байдал” нь Хүлээн зөвшөөрөгдсөн гоо үзэсгэлэнтэй хамааралтай болохыг тогтоожээ. Өөрөөр хэлбэл сонин ер нь хөөрхөн биш. Вэб дизайны стандартыг дагаж мөрддөг вэбсайт нь илүү их дуртай байдаг.
Хамгийн үзэсгэлэнтэй гэж тооцогддог сайтууд нь өндөр прототипийн шинж чанар, харааны нарийн төвөгтэй байдал багатай байдаг. Тэд энгийн, цэвэр аль аль нь байдаг.
Үүнийг ингэж бодоод үзээрэй, танай брэндийг ялгах нь сайн хэрэг, гэхдээ байршил нь үүнийг хийх газар биш юм. Та юу гэж хэлэх нь өөр өөр байх. Харин таны сайт хэрхэн ашиглаж байгаа нь ердийн байх.
Зарим машин үнэхээр гайхалтай харагдаж байна. Тэд өөр. Тэд үзэсгэлэнтэй. Гэхдээ тэд хажуу талдаа хаалгатай, доод талдаа дугуйтай, урд талдаа гэрэлтэй хэвээр байна.
Гэхдээ стандарт гэж юу вэ? Бидний хийсэн судалгаагаар эдгээр нь вэбсайтын стандарт элементүүд юм:
Өндөр прототиптэй” стандарт ” вэбсайт нь дараахь зүйлийг агуулдаг:
Зүүн дээд хэсэгт лого
Толгой дахь хэвтээ навигаци
Дээд талд хайх бар
Доод хэсэгт байрлах нийгмийн дүрсүүд
Гар утасны мэдрэмжтэй дизайн
7. “Хуурамч ероол” – оос болгоомжил”
Орчин үеийн маркетингийн вэбсайтууд, ялангуяа борлуулалтын хуудсууд нь хуудасны блокоор бүтээгдсэн байдаг. Эдгээр нь агуулгын эгнээ бөгөөд ихэвчлэн нэг талд нь дүрс, нөгөө талд нь текст, нэг баганад байгаа хуудсыг доош урсдаг.
Энд хар тугалга үеийн вэб сайт дээр ердийн үйлчилгээний хуудасны анатоми юм.
Диаграмаас харахад footer нь бараан дэвсгэр өнгөтэй байна. Маш олон сайтууд жуулчид одоо бараан дэвсгэр нь өөрчлөх хуудасны доод гэсэн үг гэж бодож үүнийг хийх.
Гэхдээ хэрэв загвар нь харанхуй дэвсгэртэй pageblock – той бол зочин ероолыг нь цохиж, гүйлгэхээ больсон гэж бодож магадгүй юм. Энэ бол хуурамч ероол.
Тайлбар: Би энэ талаар өөрийн дизайнеруудтай мэтгэлцдэг. Манай бүтээлч захирал Курт Крузе маш сайн цэг тавьдаг. Арын өнгөний өөрчлөлт нь зочдод агуулгын төрөл өөрчлөгдөж байгааг мэдэгдэх маш сайн арга юм. Би чамайг сонсож байна, Курт!
Хуудасны блокуудын арын өнгийг сонгохдоо зүгээр л санаатай байх хэрэгтэй. Аюулгүй байхын тулд зөвхөн бага зэргийн өөрчлөлтийг сонгох эсвэл зүгээр л үргэлж цагаан эсвэл цайвар саарал өнгийг ашигладаг. Дараа нь доод хэсэгт хар саарал эсвэл хар өнгөтэй шилжинэ.
8. Эргэлддэг тоглоом болон эргэдэг гулгагч зайлсхий
Тэд олон жилийн турш алдартай байсан бөгөөд үйлчлүүлэгчид тэднийг хайрладаг. Гэхдээ Нүүр хуудас слайд нь асуудал байна: жуулчид зөвхөн эхний слайдыг харж болох юм.
Үүнтэй ижил дүгнэлтэд хүрсэн олон судалгаа бий. Дараагийн слайдууд дээрх мэдээллүүд харагдах магадлал бага бөгөөд үйлдэлд дуудлага хийх нь дарагдах магадлал бага байдаг. Зүгээр л их сургуулийн вэб сайт дээр слайд нь хувь дамжуулан дарж харах.
Тэд батлуулахад хялбар байдаг тул тэд алдартай байж магадгүй юм. Өөр өөр хэлтсийн янз бүрийн оролцогч талууд бүгд нугалаас дээгүүр пиксель авдаг. Тэд зочдод биш дотоод улс төрд сайн.
Homepage slideshows нь хүмүүсийг хурлын өрөөнд бие биенээ хутгалахаас хамгаалахад сайн байдаг.
Тэгвэл оронд нь юу хийх вэ?
Слайдуудыг үдэх тул зочин хуудсыг доош гүйлгэж тус бүрийг харах боломжтой. Тэд гэнэт их харагдах болно.
Баатар болгон хамгийн үр нөлөөтэй слайдыг ашиглан онцлох зургийг ашиглана уу. Энэ үйл ажиллагаа нь сайн дуудлага өг!
9. Таб, баян хуураас зайлсхий
Энд нуугдаж гарч зүйлийг авах өөр нэг арга зам юм: тав болон агуулгын тэлэх хайрцаг зайлсхий.
Вэбсайтын зочдын 76% хүртэл нь скан хийж байгааг мэдсэнээр та ямар нэг зүйлийг илчлэхийн тулд дарах шаардлагагүй, бүх зүйлийг ил болгосноор таны агуулгыг тэдэнд илүү тод харагдуулж чадна.
Табууд болон тэлэх баян хуур үр дүнтэй байсан бол, Магадгүй та Амазон тэднийг харах болно.
Гүйлгэх нь товшихоос илүү хурдан бөгөөд хялбар гэдгийг санаарай. Хэрэв зочид ямар нэгэн зүйлийг үзэх боломжтой байхын тулд зорьж, товших эсвэл таб хийх шаардлагатай бол тэд үүнийг харах магадлал бага байдаг.
10. Хүмүүс зураг ашиглах
Нүүр царай бол хосгүй хүчирхэг зураглал. Төрсөн цагаасаа эхлэн бид өөр юунаас ч илүү нүүр рүү ширтэж байдаг. Хүмүүсийн зургийн соронзон хүч нь вэб дизайн хийхэд маш их хэрэгтэй байдаг.
Зөвхөн нүүр царай нь анхаарал татаад зогсохгүй хөрвөлттэй хамааралтай байдаг. Basecamp-ийн алдартай кейс судалгаа нь борлуулалтын хуудсан дээр нүүр царай, сэтгэгдлийг нэгтгэхэд үр дүн нь асар их өргөлтийг харуулсан.