การเปลี่ยนฉากมีประโยชน์มากมายสำหรับผู้ใช้ ซึ่งรวมถึงการช่วยให้ผู้ใช้อยู่ในบริบทและลดความล่าช้าที่ผู้ใช้รับรู้ นักพัฒนาแอปต้องการสร้างการเปลี่ยนหน้าเว็บอย่างราบรื่น ซึ่งจะช่วยเพิ่มการมีส่วนร่วมของผู้ใช้กับเว็บไซต์
อย่างไรก็ตาม การเปิดใช้การเปลี่ยนสถานะนั้นทำได้ยากมาก เนื่องจากนักพัฒนาแอปต้องจัดการสถานะขององค์ประกอบ 2 รายการที่แตกต่างกัน แม้แต่การเฟดเสียงแบบง่ายๆ ก็ยังเกี่ยวข้องกับทั้ง 2 สถานะพร้อมกัน ซึ่งทำให้เกิดปัญหาด้านความสามารถในการใช้งาน เช่น การจัดการการโต้ตอบเพิ่มเติมในองค์ประกอบขาออก สําหรับผู้ใช้อุปกรณ์ช่วยเหลือ จะมีช่วงเวลาที่ทั้งสถานะก่อนและหลังอยู่ใน DOM พร้อมกัน นอกจากนี้ สิ่งต่างๆ อาจเคลื่อนไหวไปรอบๆ แผนภูมิในลักษณะที่มองเห็นได้ชัดเจน แต่อาจทำให้เสียตำแหน่งการอ่านและโฟกัสได้ง่าย
View Transitions API ที่เปิดตัวใน Chrome 111 ช่วยให้คุณสร้างการเปลี่ยนหน้าเว็บได้อย่างราบรื่นและง่ายดาย ซึ่งช่วยให้คุณทําการเปลี่ยนแปลง DOM ได้โดยไม่ทับซ้อนกันระหว่างสถานะต่างๆ และมีภาพเคลื่อนไหวการเปลี่ยนระหว่างสถานะโดยใช้มุมมองที่บันทึกภาพ
คุณอาจสงสัยว่าใช้งานได้ง่ายเพียงใด กรณีการใช้งานมีประเภทใดบ้าง นักพัฒนาแอปรายอื่นๆ ใช้ทรานซิชันของมุมมองอย่างไร
บทความนี้จะอธิบายการใช้งาน View Transitions ในเว็บไซต์ 4 แห่ง ได้แก่ RedBus (การเดินทาง), CyberAgent (ผู้เผยแพร่ข่าว/บล็อก), Nykaa (อีคอมเมิร์ซ) และ PolicyBazaar (ประกันภัย) และวิธีที่เว็บไซต์ต่างๆ ได้รับประโยชน์ในลักษณะต่างๆ โดยใช้ View Transitions API
redBus
redBus ซึ่งเป็นส่วนหนึ่งของกลุ่ม MakeMyTrip เป็นเว็บไซต์การจองตั๋วรถประจำทางที่มีสำนักงานใหญ่ในบังกาลอร์ อินเดีย และมีการดำเนินงานในภูมิภาคต่างๆ ทั่วโลก โดยเป็นหนึ่งในเว็บไซต์แรกๆ ที่นำประสบการณ์การใช้งานโดยใช้ View Transitions API มาใช้
เหตุใด Redbus จึงใช้การเปลี่ยนมุมมอง
ทีม redBus เชื่อมั่นอย่างยิ่งในการให้บริการประสบการณ์การใช้งานเว็บแบบรวมศูนย์ที่คล้ายกับแอป ซึ่งใกล้เคียงกับแอปที่มาพร้อมเครื่องมากที่สุด ความจริงแล้ว แบรนด์ได้ใช้โซลูชันที่ปรับแต่งหลายรายการในช่วงหลายปีที่ผ่านมา เช่น เปิดตัวภาพเคลื่อนไหวที่ปรับแต่งเองซึ่งอิงตาม JavaScript และ CSS สําหรับการเปลี่ยนหน้าเว็บ ก่อนที่จะพัฒนา View Transitions API แต่นั่นหมายความว่าพวกเขาต้องจัดการกับการจัดการประสิทธิภาพในเครือข่ายและอุปกรณ์ระดับล่าง ซึ่งบางครั้งอาจทําให้ประสบการณ์การใช้งานแตกต่างกันไปเมื่อใช้กลยุทธ์การโหลดแบบปรับเปลี่ยนได้
redBus ใช้การเปลี่ยนมุมมองสําหรับเส้นทางของผู้ใช้หลายเส้นทาง เช่น ในส่วนความช่วยเหลือตนเองภายในแอปบนอุปกรณ์เคลื่อนที่ซึ่งเปิดหน้าเว็บในแท็บ Chrome ที่กําหนดเอง และใน Funnel การจองตั๋วรถประจำทางที่ผู้ใช้ไปยังหน้าข้อมูลสินค้าคงคลังจากหน้าการชำระเงิน ในกรณีหลัง การเปลี่ยนภาพทําให้ไปยังหน้าต่างๆ ได้อย่างราบรื่นขึ้นและส่งผลให้อัตรา Conversion เพิ่มขึ้น ผลลัพธ์นี้มาจากประสบการณ์ของผู้ใช้ที่ดีขึ้นและประสิทธิภาพที่รับรู้ได้ดีขึ้นขณะที่ดำเนินการที่หนักหน่วง เช่น การดึงข้อมูลพื้นที่โฆษณาที่อัปเดตล่าสุด
รายละเอียดทางเทคนิคของการใช้งาน
redBus ใช้ React และ EJS เป็นแพลตฟอร์มเทคโนโลยีฝั่งไคลเอ็นต์ โดยรวม SPA และ MPA ไว้ในเส้นทางต่างๆ ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้ทรานซิชันของมุมมอง
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
ใน CSS ต่อไปนี้ slide-to-right, slide-to-left, slide-from-right และ slide-from-left คือคีย์เฟรมภาพเคลื่อนไหว CSS
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
ผลกระทบทางธุรกิจ
redBus เลือกใช้การเปลี่ยนมุมมองพร้อมกับการปรับปรุง INP ในเว็บไซต์ ซึ่งส่งผลให้ยอดขายเพิ่มขึ้น 7% Amit Kumar ผู้จัดการอาวุโสฝ่ายวิศวกรของ redBus กล่าวว่าการเปลี่ยนมุมมองเป็นฟีเจอร์ที่ยอดเยี่ยมมากสําหรับผู้ที่ต้องการให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้นอย่างแท้จริงและต้องการลดค่าใช้จ่ายในการบำรุงรักษา
เราได้จัดเซสชันความคิดเห็นของผู้ใช้อย่างครอบคลุม โดยรวมข้อมูลเชิงลึกที่มีคุณค่าจากกลุ่มผู้ใช้ที่หลากหลาย ความเข้าใจอย่างลึกซึ้งเกี่ยวกับฐานผู้ใช้ (รถประจำทางและรถไฟ) และความต้องการ รวมถึงความเชี่ยวชาญของเราทําให้เราเชื่อว่าฟีเจอร์นี้จะให้คุณค่าที่สําคัญตั้งแต่เริ่มต้นโดยไม่ต้องทำการทดสอบ A/B การเปลี่ยนมุมมองเป็นก้าวสำคัญในการเชื่อมโยงแอปและเว็บเข้าด้วยกันด้วยประสบการณ์การไปยังส่วนต่างๆ ที่ราบรื่น
Anoop Menon, CTO ของ redBus
CyberAgent
CyberAgent เป็นบริษัทไอทีในญี่ปุ่นที่ให้บริการออนไลน์มากมาย รวมถึงการเผยแพร่บล็อกและข่าว
เหตุใด CyberAgent จึงใช้การเปลี่ยนมุมมอง
ก่อนหน้านี้ CyberAgent ได้พิจารณาใช้ภาพเคลื่อนไหว CSS หรือใช้เฟรมเวิร์กเพื่อใช้ทรานซิชันภาพเคลื่อนไหวเพื่อปรับปรุงประสบการณ์ของผู้ใช้ แต่กังวลเรื่องประสิทธิภาพการเรนเดอร์ DOM และความยากง่ายในการบำรุงรักษาโค้ด เมื่อ Chrome รองรับ View Transitions API แล้ว ทีมก็ตื่นเต้นที่จะใช้ API นี้เพื่อสร้างทรานซิชันหน้าเว็บที่น่าสนใจซึ่งช่วยแก้ปัญหาเหล่านี้ได้
CyberAgent ใช้การเปลี่ยนมุมมองระหว่างรายการบล็อกกับหน้าบล็อก สังเกตว่ามีการใส่การเปลี่ยนองค์ประกอบลงในรูปภาพหลักอย่างไร คุณสามารถไปที่เว็บไซต์และทดลองใช้ฟีเจอร์นี้ได้เลย
นอกจากนี้ ยังใช้คิวรีสื่อเพื่อออกแบบประสบการณ์ภาพเคลื่อนไหวที่แตกต่างกันสำหรับอุปกรณ์แต่ละประเภท สำหรับหน้าในอุปกรณ์เคลื่อนที่ ลูกค้าได้ใส่ทรานซิชันขององค์ประกอบ แต่เอฟเฟกต์นี้เคลื่อนไหวมากเกินไปสำหรับเดสก์ท็อป
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
รายละเอียดทางเทคนิคของการใช้งาน
CyberAgent ใช้ Next.js เพื่อสร้าง SPA ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้ View Transition API
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
ดูตัวอย่างโค้ด Next.js เพิ่มเติม
ดูทรานซิชันสำหรับ MPA ด้วยเทคโนโลยีการแสดงผลล่วงหน้า
นอกจากนี้ CyberAgent ยังทดลองใช้ View Transitions API สำหรับแอปหลายหน้า (MPA) ใหม่ของเรา (ปัจจุบันอยู่ภายใต้ Flag chrome://flags/#view-transition-on-navigation) ในบริการชื่อ Ameba News ซึ่งเป็นเว็บไซต์พอร์ทัลข่าว
การเปลี่ยนมุมมองมี 2 ตำแหน่ง ได้แก่ ตำแหน่งแรกคือเมื่อเปลี่ยนหมวดหมู่ของข่าว ซึ่งแสดงในวิดีโอต่อไปนี้
ส่วนที่สองคือระหว่างหน้าไฮไลต์ข่าวที่แสดงข้อความที่ตัดตอนมาจากเนื้อหา และเมื่อผู้ใช้คลิกดูรายละเอียดเพิ่มเติม บทความที่เหลือจะค่อยๆ ปรากฏขึ้น
สิ่งที่น่าสนใจคือมีการเพิ่มภาพเคลื่อนไหวเฉพาะในส่วนที่จะเปลี่ยนแปลงหลังจากมีการคลิกปุ่มเท่านั้น การปรับแต่งการออกแบบภาพเคลื่อนไหวเล็กน้อยนี้ทำให้หน้า MPA ดูเหมือน SPA มากขึ้นจากมุมมองของผู้ใช้ โดยมีเพียงเนื้อหาใหม่เท่านั้นที่เคลื่อนไหว
โดยกำหนด view-transition-name ที่แตกต่างกันให้กับส่วนต่างๆ ของหน้า เช่น กำหนด view-transition-name รายการหนึ่งไว้ในส่วนบนของบทความ อีกรายการหนึ่งไว้ในส่วนล่าง และไม่ได้เพิ่มภาพเคลื่อนไหวในส่วนบน
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
อีกสิ่งที่น่าสนใจเกี่ยวกับการใช้ View Transitions API ของ CyberAgent คือการใช้ Quick Link เพื่อติดตั้งใช้งานกฎการแสดงผลล่วงหน้าในหน้ารายละเอียดได้อย่างง่ายดาย โค้ดตัวอย่างมีดังนี้
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
อ่านข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งานลิงก์ด่วนได้จากบทความนี้
ข้อความรับรอง
Kazunari Hara ซึ่งเป็นหัวหน้าทีมเทคโนโลยีของบริการ Ameba ใน CyberAgent กล่าวว่าการเปลี่ยนแปลงการดูอาจส่งผลต่อธุรกิจอย่างมากด้วยเหตุผล 2 ข้อ
ประการแรกคือช่วยแนะนำผู้ใช้ในหน้าเว็บ การเปลี่ยนมุมมองช่วยให้ผู้ใช้เห็นข้อความที่สําคัญที่สุดและช่วยให้ได้รับประโยชน์สูงสุดจากหน้าเว็บ นอกจากนี้ ยังช่วยเพิ่มประสิทธิภาพและเน้นแบรนด์ด้วยภาพเคลื่อนไหว CyberAgent มีการออกแบบภาพเคลื่อนไหวที่กำหนดไว้เพื่อสื่อสารแบรนด์ การเปลี่ยนมุมมองช่วยให้ลูกค้าใช้ประสบการณ์การใช้งานที่มีแบรนด์นี้ได้โดยไม่มีค่าใช้จ่ายเพิ่มเติมในการดูแลรักษาไลบรารีภายนอก
View Transitions เป็น API รายการโปรดของฉัน ความสามารถในการเพิ่มภาพเคลื่อนไหวเป็นฟีเจอร์มาตรฐานของเบราว์เซอร์ช่วยให้คุณติดตั้งใช้งานและดูแลรักษาการเปลี่ยนมุมมองได้ง่ายขึ้นเมื่อเทียบกับโซลูชันอื่นๆ ที่ต้องอาศัยไลบรารี เราหวังว่าจะได้นำทรานซิชันของมุมมองไปใช้กับบริการอื่นๆ มากขึ้นเพื่อสื่อสารแบรนด์ของเรา
Kazunari Hara CTO ของ Ameba
Nykaa
Nykaa เป็นแพลตฟอร์มอีคอมเมิร์ซด้านแฟชั่นและความงามที่ใหญ่ที่สุดของอินเดีย โดยมุ่งมั่นที่จะทำให้ประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ใกล้เคียงกับประสบการณ์การใช้งานแอปเนทีฟมากที่สุด เมื่อก่อนหน้านี้พยายามใช้ภาพเคลื่อนไหวของทรานซิชัน พวกเขาประสบปัญหาในการเขียน JavaScript ที่กําหนดเองที่ซับซ้อน ซึ่งส่งผลต่อประสิทธิภาพของเว็บไซต์เพียงเล็กน้อย
เหตุใด Nykaa จึงใช้การเปลี่ยนมุมมอง
เมื่อฟีเจอร์การเปลี่ยนมุมมองพร้อมใช้งาน ทีมของ Nykaa มองเห็นโอกาสที่การเปลี่ยนเหล่านี้จะพร้อมใช้งานตั้งแต่ต้น ซึ่งหมายความว่า UX ของการเปลี่ยนหน้าเว็บจะได้รับการปรับปรุงอย่างมากโดยที่ประสิทธิภาพไม่ได้รับผลกระทบ Nykaa ใช้ทรานซิชันของมุมมองอย่างมากเพื่อเปลี่ยนจากหน้ารายละเอียดผลิตภัณฑ์ไปยังหน้าข้อมูลผลิตภัณฑ์
รายละเอียดทางเทคนิคของการใช้งาน
Nykaa ใช้ React และ Emotion เพื่อสร้าง SPA ดูโค้ดตัวอย่างเพิ่มเติมเกี่ยวกับวิธีใช้การเปลี่ยนเฟรมด้วย React ได้ที่นี่
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS สำหรับภาพเคลื่อนไหวของลิ้นชักด้านข้าง
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
ข้อความรับรอง
Sunit Jindal หัวหน้าฝ่ายแอปของ Nykaa กล่าวว่าประโยชน์ที่ใหญ่ที่สุดของการเปลี่ยนมุมมองคือ "การรับรู้ถึงความเร็ว" Nykaa ใช้เอฟเฟกต์ชิมเมอร์เพื่อรอให้เนื้อหาโหลดจากแบ็กเอนด์ แต่พบว่าการแสดงเอฟเฟกต์ชิมเมอร์ไม่ได้บอกผู้ใช้ว่าจะต้องรอนานแค่ไหนกว่าที่เนื้อหาจะโหลด การเปลี่ยนมุมมองช่วยให้ผู้ใช้รู้สึกว่า "กำลังจะมีบางอย่างเกิดขึ้น" ซึ่งทำให้รอได้สบายขึ้น
Nykaa รู้สึกตื่นเต้นมากกับ UX ที่ปรับปรุงใหม่ของหน้าเว็บด้วยการเปลี่ยนภาพ และพร้อมที่จะใช้การเปลี่ยนภาพในหน้าอื่นๆ ด้วย มาดูสิ่งที่รองประธานฝ่ายออกแบบของทีมนี้พูดกัน
เรามุ่งมั่นที่จะใช้การเปลี่ยนมุมมองในฟีเจอร์ทั้งหมดที่กำลังจะเปิดตัว ซึ่งการเปลี่ยนมุมมองจะเหมาะสม เราได้ระบุพื้นที่บางส่วนแล้ว และทีมกําลังลงทุนในพื้นที่เหล่านั้นอย่างจริงจัง
Krishna R V รองประธานฝ่ายออกแบบ
PolicyBazaar
PolicyBazaar มีสำนักงานใหญ่อยู่ในกูร์กาน เป็นบริษัทเทคโนโลยีทางการเงินข้ามชาติและบริษัทรวบรวมข้อมูลประกันภัยที่ใหญ่ที่สุดของอินเดีย
เหตุใด PolicyBazaar จึงใช้การเปลี่ยนมุมมอง
ในฐานะบริษัทที่เน้นทางเว็บเป็นหลัก ทีม PolicyBazaar มุ่งมั่นที่จะมอบประสบการณ์การใช้งานที่ดีที่สุดให้แก่ผู้ใช้ตลอดเส้นทางที่สำคัญของผู้ใช้เสมอมา การใช้ทรานซิชันที่กําหนดเองโดยใช้ JavaScript และ CSS เป็นแนวทางปฏิบัติทั่วไปก่อนที่จะเปิดตัว View Transitions API เนื่องจากช่วยปรับปรุงประสบการณ์ของผู้ใช้ สร้างเส้นทางการนําทางที่ราบรื่น และปรับปรุงภาพรวมของเว็บไซต์ให้น่าสนใจยิ่งขึ้น
อย่างไรก็ตาม การใช้งานที่กําหนดเองเหล่านี้ทําให้เกิดความล่าช้าตามประสิทธิภาพเป็นครั้งคราว ความซับซ้อนในการดูแลรักษาโค้ด และความเข้ากันได้ที่ไม่เหมาะสมกับเฟรมเวิร์กที่ใช้ View Transitions API ช่วยให้พวกเขาเอาชนะปัญหาเหล่านี้ได้ส่วนใหญ่ด้วยอินเทอร์เฟซที่ใช้งานง่ายพร้อมด้วยประโยชน์ด้านประสิทธิภาพที่พร้อมใช้งานตั้งแต่ต้น
PolicyBazaar ใช้การเปลี่ยนมุมมองในองค์ประกอบต่างๆ ในเส้นทางก่อนขอใบเสนอราคาเพื่อให้ผู้มีโอกาสเป็นผู้ซื้อตื่นเต้นที่จะให้รายละเอียดที่จำเป็นสำหรับการซื้อนโยบายประกัน
รายละเอียดทางเทคนิคของการใช้งาน
โดยใช้แนวทางเฟรมเวิร์กแบบผสมผสานโดยมี Angular และ React เป็นโค้ดเบสส่วนใหญ่ ต่อไปนี้คือ VT ที่ตัดตอนมาจากโค้ดที่เขียนด้วย Angular และแชร์โดย Aman Soni (นักพัฒนาส่วนหน้าระดับอาวุโสของ PolicyBazaar)
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
ข้อความรับรอง
Rishabh Mehrotra หัวหน้าฝ่ายออกแบบ (Life BU) กล่าวว่าทรานซิชันของมุมมองมีบทบาทสําคัญในการปรับปรุงประสบการณ์การใช้งานเว็บไซต์สําหรับผู้ใช้ด้วยการปรับปรุงความสามารถในการใช้งาน การมีส่วนร่วม และความพึงพอใจโดยรวม ซึ่งช่วยให้การไปยังส่วนต่างๆ เป็นไปอย่างราบรื่น มีการโต้ตอบแบบมีคําแนะนํา ลดความซับซ้อนของข้อมูล รูปลักษณ์ทันสมัย และอื่นๆ อีกมากมาย
การยกระดับประสบการณ์การใช้งานเว็บเป็นวัตถุประสงค์สําคัญของ PB และ VT พิสูจน์แล้วว่าเป็นเครื่องมือสําคัญในการบรรลุเป้าหมายนี้ได้อย่างราบรื่น ความน่าสนใจที่แพร่หลายทั้งในชุมชนนักพัฒนาแอปและฐานผู้ใช้ของเราทำให้ทีมของเรามีความกระตือรือร้น ขณะพิจารณาการผสานรวมกับ POD ที่หลากหลาย เราคาดว่าการผสานรวมนี้จะส่งผลเชิงบวกอย่างมากต่อระดับความพึงพอใจและความเป็นเลิศในการดําเนินการ
Saurabh Tiwari (CTO, PolicyBazaar)
ขั้นตอนถัดไป
คุณสนใจลองใช้ทรานซิชันของมุมมองไหม แหล่งข้อมูลบางส่วนที่คุณดูข้อมูลเพิ่มเติมได้มีดังนี้