Frontend ที่มองไม่เห็น: การตัดสินใจเล็กๆ ที่ช่วยรักษาผลิตภัณฑ์ของคุณไว้ได้
งาน Frontend ที่ดีที่สุดมักจะไม่ปรากฏให้เห็นในการ Demo เลย
ผู้คนไม่ได้แคปหน้าจอเก็บไว้ แต่หากขาดงานส่วนนี้ไป ผู้ใช้จะเลิกใช้ผลิตภัณฑ์ของคุณโดยที่คุณไม่รู้เลยว่าเพราะอะไร งานเหล่านี้เกิดขึ้นในช่องว่างระหว่างหน้าจอ แท็บ และ Backend ของคุณ
นี่คือ 3 ตัวอย่างของการแก้ไขเล็กๆ น้อยๆ ที่ช่วยป้องกันความสูญเสียครั้งใหญ่
1. แก้ไขข้อผิดพลาดในการ Login
ครั้งหนึ่ง Frontend เคยตรวจสอบฟิลด์ status เพื่อดูว่าการ Login สำเร็จหรือไม่ แต่ Backend ส่ง token ที่ถูกต้องมาพร้อมกับสถานะที่เป็น null ผลคือแอปปฏิเสธผู้ใช้ทั้งที่พวกเขามีสิทธิ์เข้าถึงแล้ว
วิธีแก้ไขนั้นง่ายมาก ตอนนี้ Frontend จะตรวจสอบที่ตัว token เองเพื่อยืนยันความสำเร็จ ฟิลด์ที่คลุมเครือในเอกสารเพียงฟิลด์เดียวอาจกลายเป็นประตูที่ปิดตายสำหรับผู้ใช้ได้
2. แก้ไขลิงก์ยืนยันตัวตน
เมื่อผู้ใช้คลิกลิงก์ในแท็บใหม่ แท็บเดิมจะยังคงอยู่ในสถานะที่ไม่ได้ยืนยันตัวตน (unauthenticated) ทำให้ไม่สามารถขอข้อมูลอัปเดตจากเซิร์ฟเวอร์ได้
ผมใช้ browser storage event เมื่อแท็บหนึ่งเขียนข้อมูลลงใน localStorage แท็บอื่นๆ ทั้งหมดจะรับรู้ได้ทันที มันทำหน้าที่เหมือน message bus ฟรีๆ ระหว่างแท็บ ซึ่งช่วยกำจัดทางตันในขั้นตอนการ onboarding ของคุณ
3. แก้ไขตัวนับเวลาถอยหลัง (cooldown timer)
ตัวนับเวลา "ส่งอีเมลใหม่ในอีก 30 วินาที" ที่เก็บไว้ใน app state จะถูกรีเซ็ตเมื่อผู้ใช้รีเฟรชหน้าเว็บ ส่งผลให้ผู้ใช้กดปุ่มรัวๆ (spam) ซึ่งจะไปเพิ่มต้นทุนค่าอีเมลของคุณ
วิธีแก้ไขคือการเก็บค่า deadline แทนที่จะเก็บตัวนับถอยหลัง
- เก็บ timestamp ที่แน่นอนว่า cooldown จะสิ้นสุดเมื่อใด
- คำนวณวินาทีที่เหลือใหม่ทุกครั้งที่มีการรีเฟรช สิ่งนี้ช่วยป้องกันการใช้งานในทางที่ผิดและช่วยรักษาความคุ้มค่าของงบประมาณคุณ
ทำไมเรื่องนี้ถึงสำคัญสำหรับ Founder:
• การแก้ไขเรื่อง Login ช่วยรักษา user activation • สัญญาณระหว่างแท็บช่วยรักษา conversion rates • ตัว cooldown ช่วยรักษา margins และป้องกันการใช้งานในทางที่ผิด
วิศวกรรมที่ยอดเยี่ยมไม่ใช่แค่การทำให้ interface ดูสวยงาม แต่คือการใส่ใจในช่องว่างเล็กๆ เหล่านี้ การแก้ไขแต่ละอย่างใช้โค้ดไม่ถึง 50 บรรทัดด้วยซ้ำ คุณค่าของมันมาจากการสังเกตเห็นปัญหาและแก้ไขมันในจุดที่ถูกต้อง
Source: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl