Та өмнө нь тэнд байсан байх. Бид хэрэглэгчдэд модаль харуулахын хооронд хэрхэн сонголт хийх вэ, хэзээ тэдгээрийг тусдаа, шинэ хуудас руу шилжүүлэх вэ? Тэгээд энэ нь огт хамаагүй юу? Яг үнэндээ тэгдэг. Шийдвэр нь хэрэглэгчдийн урсгал, нөхцөл байдал, дэлгэрэнгүй мэдээлэл хайх чадвар, үүнтэй холбоотойгоор алдааны давтамж, даалгаврын гүйцэтгэлд нөлөөлдөг. Аль аль сонголт нь буруу цагт, буруу газар дээр саад учруулж, урам хугарах болно. Тиймээс бид үүнийг зөв хийсэн нь дээр. За, үүнийг хэрхэн хийхийг харцгаая. Modals, Dialogs, Overlays, Lightboxes Бид нэг модаль UI бүрэлдэхүүн хэсгийн талаар байнга ярьдаг ч бүх төрлийн модальуудын хоорондох нарийн, нарийн нюансуудыг үл тоомсорлодог. Үнэн хэрэгтээ, загвар бүр ижил байдаггүй. Модаль, харилцах цонх, давхарлах, гэрэл хайрцаг зэрэг нь бүгд ижил төстэй сонсогдож байгаа ч үнэндээ огт өөр юм.
DialogA "харилцан яриа" гэсэн ерөнхий нэр томъёо (хэрэглэгч ↔ систем). Overlay Хуудасны дээд талд харуулсан жижиг агуулгын самбар. ModalUser нь давхарласан + дэвсгэр идэвхгүйтэй харилцах ёстой. NonmodalUser нь давхарлах + дэвсгэр идэвхжүүлсэн үед харилцан ажиллах ёстой. Модал дээр анхаарлаа төвлөрүүлэхийн тулд Lightbox бүдэг арын дэвсгэр.
Анна Калигийн онцлон тэмдэглэснээр, ихэнх давхаргууд буруу цагт гарч ирдэг, чухал ажлуудын үеэр хэрэглэгчдийг тасалдуулж, үг хэллэг муу хэрэглэж, хэрэглэгчдийн урсгалыг эвддэг. Тэд байгалиасаа тасалддаг бөгөөд ихэвчлэн өндөр түвшний хүндрэлтэй байдаг.
Үйлдлийнхээ үр дагавар нь өндөр үр дагавартай бол хэрэглэгчдийг удаашруулж, тасалдуулах нь гарцаагүй, гэхдээ ихэнх хувилбаруудын хувьд мод бус байдал нь илүү нарийн бөгөөд хэрэглэгчийн анхаарлыг татахад илүү ээлтэй сонголт байдаг. Хэрэв ямар нэгэн зүйл байвал би үүнийг анхдагч болгохыг үргэлж санал болгодог. Модал → Ганц бие даасан даалгавруудад зориулагдсан Загвар зохион бүтээгчдийн хувьд бид загваруудыг хамааралгүй, ядаргаатай гэж үгүйсгэдэг бөгөөд ихэнхдээ тийм байдаг! - Гэсэн хэдий ч тэд өөрсдийн үнэ цэнэтэй байдаг. Эдгээр нь хэрэглэгчдэд болзошгүй алдааны талаар сэрэмжлүүлэх эсвэл өгөгдөл алдагдахаас зайлсхийхэд тусалдаг. Тэд мөн хуудасны одоогийн төлөвийг тасалдуулахгүйгээр холбогдох үйлдлүүдийг гүйцэтгэх эсвэл нарийн ширийн зүйлийг нарийвчлан судлахад тусалж чадна. Гэхдээ модальуудын хамгийн том давуу тал нь хэрэглэгчдэд одоогийн дэлгэцийн контекстийг хадгалахад тусалдаг явдал юм. Энэ нь зөвхөн UI гэсэн үг биш, бас засварласан оролт, гүйлгэх байрлал, баян хуурын байдал, шүүлтүүр сонгох, эрэмбэлэх гэх мэт.
Заримдаа хэрэглэгчид сонголтоо хурдан баталгаажуулах хэрэгтэй (жишээ нь, дээр үзүүлсэн шиг шүүлтүүрүүд), дараа нь тэндээс нэн даруй үргэлжлүүлэх хэрэгтэй. Автоматаар хадгалах нь мэдээжийн хэрэг ижил үр дүнд хүрч чадна, гэхдээ энэ нь үргэлж шаардлагатай эсвэл хүсдэггүй. Мөн UI-г хаах нь ихэвчлэн тийм ч сайн санаа биш юм. Гэсэн хэдий ч модальуудыг ямар ч ажилд ашигладаггүй. Ихэвчлэн бид эдгээрийг хэрэглэгчдэд үсрэн орж, даалгавраа гүйцээж, дараа нь байсан газар руугаа буцах ёстой ганц бие даалгавруудад ашигладаг. Тэд өндөр ач холбогдолтой, богино хугацааны харилцан үйлчлэлд (жишээлбэл, сэрэмжлүүлэг, хор хөнөөлтэй үйлдэл, хурдан баталгаажуулалт) сайн ажилладаг нь гайхмаар зүйл биш юм. Модууд туслах үед: 🚫 Модаль нь ихэвчлэн эвдэрч, түрэмгий, төөрөгдүүлдэг.🚫 Тэдгээр нь харьцуулах, хуулж буулгахад хүндрэл учруулдаг.✅ Гэсэн хэдий ч модаль нь хэрэглэгчдэд олон контекстийг хадгалах боломжийг олгодог.✅ Буцааж болшгүй алдаа, өгөгдөл алдагдахаас сэргийлэхэд тустай.✅ Хэрэглэгчдийг шинэ хуудас руу илгээх нь саад учруулж болзошгүй тохиолдолд ашигтай. ✅ Зөвхөн хэрэглэгчид эвдрэлийг үнэлдэг бол модаль харуулах.✅ Анхдагч байдлаар, блоклохгүй харилцах цонхыг илүүд үзээрэй ("modals").✅ Хэрэглэгчдэд дараа нь харилцах цонхыг багасгах, нуух эсвэл сэргээхийг зөвшөөрнө үү. ✅ Хэрэглэгчдийг удаашруулахын тулд модаль ашиглана уу, жишээ нь, нарийн төвөгтэй оролтыг баталгаажуулна уу. ✅ "Хаах", ESC товчлуураар гарах арга замыг зааж өгөх эсвэл хайрцагны гадна талд дарна уу. Хуудас → Цогцолбор, олон шаттай ажлын урсгалын хувьд Модал доторх шидтэнгүүд эсвэл чихтэй навигаци нь нарийн төвөгтэй аж ахуйн нэгжийн бүтээгдэхүүнд ч тийм ч сайн ажилладаггүй - хажуугийн самбар эсвэл шүүгээ нь ихэвчлэн илүү сайн ажилладаг. Хэрэглэгчид өгөгдлийн цэгүүдийг харьцуулах эсвэл лавлах шаардлагатай үед асуудал эхэлдэг ч модальууд энэ үйлдлийг хаадаг тул нэг хуудсыг олон таб дээр дахин нээдэг.
Илүү төвөгтэй урсгалууд болон олон үе шаттай процессуудын хувьд бие даасан хуудаснууд хамгийн сайн ажилладаг. Хуудсууд нь хэрэглэгчийн анхаарлыг бүхэлд нь татахад илүү сайн ажилладаг бөгөөд өмнөх дэлгэцийг лавлах нь тийм ч тус болохгүй. Мөн шургуулга нь энгийн загварт хэтэрхий төвөгтэй дэд ажлуудад зориулагдсан боловч бүтэн хуудсыг чиглүүлэх шаардлагагүй. Модуудаас хэзээ зайлсхийх вэ: 🚫 Алдааны мэдэгдлийн загвараас зайлсхий.🚫 Онцлогын мэдэгдлийн загвараас зайлсхий.🚫 Нэвтрэх туршлагын загвараас зайлсхий.🚫 Нарийн төвөгтэй, урт олон алхамт даалгаврын загвараас зайлсхий.🚫 Олон тооны үүрлэсэн модлуудаас зайлсхийж, оронд нь өмнөх/next-ийг ашигла.🚫 Автоматаар өдөөх шаардлагагүй горимоос зайлсхий. Хоёуланг нь зайлсхийДавтагдсан даалгаврын хувьд Олон төрлийн нарийн төвөгтэй, хүнд даалгавартай бүтээгдэхүүнд хэрэглэгчид ижил даалгавруудыг дахин дахин хийж байгааг олж харна. Тэнд загварууд болон шинэ хуудасны навигаци нь урсгалыг тасалдуулж эсвэл хэрэглэгчдийг өөр өөр таб эсвэл харагдацын хооронд дутуу өгөгдлийг цуглуулахад хүргэдэг тул үрэлтийг нэмэгдүүлдэг. Ихэнхдээ хэрэглэгчид эцэс төгсгөлгүй баталгаажуулалт, хэтрүүлсэн анхааруулга, дэлгэрэнгүй заавар, эсвэл зүгээр л дутуу лавлагааны цэгүүдээр дүүрэн эвдэрсэн туршлагатай болдог. Саулиус Стебулисын дурьдсанчлан, эдгээр хувилбаруудад өргөтгөх боломжтой хэсгүүд эсвэл газар дээр нь засварлах нь ихэвчлэн илүү сайн ажилладаг - тэдгээр нь даалгаврыг одоогийн дэлгэцэнд бэхэлдэг. Практикт олон хувилбарт хэрэглэгчид даалгавраа тусад нь гүйцэтгэдэггүй. Тэд даалгавраа гүйцэтгэж байхдаа өгөгдөл хайх, утгыг хуулж буулгах, өөр өөр газар дахь оруулгуудыг боловсронгуй болгох, эсвэл ижил төстэй бүртгэлийг шалгах хэрэгтэй. Даалгаврын явцад далд өгөгдөлд хандах хандалтыг хадгалахад давхаргууд болон шүүгээнүүд илүү тустай. Үүний үр дүнд контекст үргэлж байрандаа үлдэж, лавлах эсвэл хуулж буулгах боломжтой. Тасалдал нь үнэ цэнийг нэмдэг, ялангуяа чухал алдаанаас урьдчилан сэргийлэхийн тулд загварууд болон хуудасны навигацийг хадгалаарай. Modals vs. Pages: Шийдвэрийн мод Хэсэг хугацааны өмнө Райан Нойфельд загвар зохион бүтээгчдэд загвар болон хуудасны хооронд сонголт хийхэд нь туслах маш хэрэгтэй гарын авлагыг бэлтгэсэн. Энэ нь PNG-н хялбар хуудсууд болон 7 хэсэгт хуваагдсан асуултууд бүхий Google Doc загвартай хамт ирдэг. Энэ нь урт, маш нарийн, гэхдээ дагахад маш хялбар:
Энэ нь аймшигтай мэт санагдаж болох ч энэ нь маш энгийн 4 алхамт үйл явц юм:
Дэлгэцийн контекст. Эхлээд бид хэрэглэгчид үндсэн дэлгэцийн контекстийг хадгалах шаардлагатай эсэхийг шалгана. Даалгаврын нарийн төвөгтэй байдал ба үргэлжлэх хугацаа. Хялбар, төвлөрсөн, анхаарал сарниулдаггүй даалгаврууд нь загварчлалыг ашиглаж болох боловч урт, төвөгтэй урсгалд хуудас хэрэгтэй. Үндсэн хуудасны лавлагаа. Дараа нь бид хэрэглэгчид далд өгөгдөлд хандах шаардлагатай эсэхийг шалгадаг эсвэл даалгавар нь энгийн баталгаажуулалт эсвэл сонголт мөн эсэхийг шалгадаг. Зөв давхаргыг сонгох нь. Эцэст нь, хэрвээ давхцах нь үнэхээр сайн сонголт бол энэ нь биднийг модаль эсвэл загвар бус (модаль бус руу хазайх) хоёрын аль нэгийг сонгоход чиглүүлдэг.
Боож байна Боломжтой бол UI-г бүхэлд нь хаахаас зайлсхий. UI-г хэсэгчлэн хамарсан боловч навигаци хийх, гүйлгэх, хуулж буулгах боломжтой харилцах цонхтой байх. Эсвэл модны агуулгыг хажуугийн шургуулга болгон харуул. Эсвэл босоо баян хуур ашигла. Эсвэл та маш их зүйлийг харуулах шаардлагатай бол хэрэглэгчдийг тусдаа хуудас руу аваач. Гэхдээ хэрэв та хэрэглэгчдийн үр ашиг, хурдыг нэмэгдүүлэхийг хүсч байвал ямар ч хамаагүй загвараас зайлсхий. Хэрэглэгчдийг удаашруулах, тэдний анхаарлыг төвлөрүүлэх, алдаа гаргахаас урьдчилан сэргийлэхийн тулд тэдгээрийг ашиглана уу. Тереза Фессенденийн тэмдэглэснээр, хэн ч саад болох дургүй, гэхдээ хэрэв шаардлагатай бол энэ нь үнэ цэнэтэй эсэхийг шалгаарай. "Ухаалаг интерфэйсийн дизайны загвар"-тай танилцана уу Та энэ оны сүүлээр шууд UX сургалтаар бодит амьдрал дээрх төслүүдээс 100 гаруй практик жишээ бүхий 15 цагийн видео сургалт болох Ухаалаг интерфэйсийн дизайны загвараас загвар болон өөр хувилбаруудын тухай бүхэл бүтэн хэсгийг олох боломжтой. Жил бүр 5 шинэ сегмент нэмэгддэг мега уналтаас эхлээд нарийн төвөгтэй аж ахуйн нэгжийн хүснэгтүүд хүртэл. Үнэгүй урьдчилан үзэх рүү оч. BIRDIE кодыг ашиглан 15% хямдралтай аваарай. Ухаалаг интерфэйсийн дизайны загвартай танилцаарай, интерфэйс дизайн ба UX-ийн талаарх бидний видео курс.
Видео + UX сургалтЗөвхөн видео видео + UX сургалт$ 495.00 $ 699.00
Видео авах + UX сургалт25 видео хичээл (15 цаг) + UX шууд сургалт. 100 хоногийн мөнгө буцаан олгох баталгаа. Зөвхөн видео $ 300.00$ 395.00
Видео хичээлийг 40 видео хичээл (15 цаг) аваарай. Жил бүр шинэчлэгддэг. Мөн 2 видео курс бүхий UX багц хэлбэрээр авах боломжтой.
Ашигтай нөөц
Төрөл бүрийн попапууд, Анна Кали Uxcel-ийн UI загваруудыг зохион бүтээх шилдэг туршлагууд Бид хэтэрхий олон хараал идсэн загваруудыг ашигладаг: UX удирдамж, Адриан Эггер Терезе Фессенден, Модаль ба Модал бус харилцан яриа Орчин үеийн Enterprise UI дизайн: Modal Dialogs, Жеймс Жейкобс Дизайн систем дэх загварууд
