ออกแบบ UI/UX
ออกแบบ UI/UX ให้หน้าจอที่คนใช้งานได้จริง
เราศึกษาวิธีทำงานของผู้ใช้ ร่างลำดับการใช้งาน ทำต้นแบบใน Figma และทดสอบกับผู้ใช้จริงก่อนเริ่มเขียนโค้ด รวมถึงหน้าจอ ERP ที่พนักงานเปิดใช้วันละหลายสิบครั้ง ไม่ใช่แค่เว็บไซต์การตลาด
- วิจัยผู้ใช้
- ไวร์เฟรม
- ต้นแบบใน Figma
- ระบบดีไซน์
- ทดสอบการใช้งาน
- เลย์เอาต์ทดสอบทั้งอักษรไทยและอังกฤษ
- ตรวจคอนทราสต์และโฟกัสระดับ AA
- ไฟล์ Figma และ design token เป็นของคุณ
- ตอบกลับภายในหนึ่งวันทำการ
สิ่งที่เราออกแบบ
วิจัย ออกแบบ และทดสอบ ครบในทีมเดียว
งานออกแบบจะคุ้มค่าก็ต่อเมื่อถูกพัฒนาออกมาจริง การออกแบบและการพัฒนาอยู่ในทีมเดียวกับที่สร้างเว็บ แอป และหน้าจอ Odoo ของคุณ สิ่งที่ส่งมอบจึงตรงกับสิ่งที่ผ่านการทดสอบ
วิจัยและตรวจ UX
สัมภาษณ์ สังเกตการทำงาน และวิเคราะห์ข้อมูลการใช้งาน เพื่อหาจุดที่ผู้ใช้ติดขัด แล้วเรียบเรียงเป็นรายการแก้ไขตามลำดับความสำคัญ
ไวร์เฟรมและลำดับการใช้งาน
หน้าจอแบบร่างและแผนผังลำดับการใช้งาน เพื่อตกลงโครงสร้างและเนื้อหาก่อนเริ่มออกแบบภาพ
ต้นแบบใน Figma
ต้นแบบที่คลิกได้พร้อมเนื้อหาจริงทั้งไทยและอังกฤษ ให้ผู้เกี่ยวข้องและผู้ใช้ทดลองบนมือถือหรือคอมพิวเตอร์
ระบบดีไซน์
Design token คอมโพเนนต์ และกฎการใช้งานใน Figma ที่ตรงกับคอมโพเนนต์ในโค้ด ทีมเว็บและทีมแอปจึงสร้างจากชิ้นส่วนเดียวกัน
ทดสอบการใช้งาน
ทดสอบกับผู้ใช้จริงประมาณห้าคนต่อรอบ มีผู้ดำเนินการและบันทึกไว้ พร้อมจัดลำดับปัญหาตามความถี่และความรุนแรงที่ขัดขวางงาน
หน้าจอ ERP และระบบหลังบ้าน
ออกแบบฟอร์ม รายการ และแดชบอร์ดใน Odoo ใหม่ตามงานจริง ฟิลด์น้อยลง ค่าเริ่มต้นที่ฉลาดขึ้น และรองรับการใช้คีย์บอร์ดหรือบาร์โค้ด
UX สำหรับ ERP
หน้าจอ ERP ที่ออกแบบตาม คนที่ใช้งานจริง
โครงการ ERP ล้มเหลวแบบเงียบ ๆ เมื่อพนักงานกลับไปใช้ Excel เพราะหน้าจอใช้ยาก เรานั่งดูการทำงานของพนักงานคลังและฝ่ายบัญชี นับจำนวนคลิกในงานที่ทำบ่อยที่สุด แล้วออกแบบหน้าจอ Odoo ใหม่ให้เส้นทางงานประจำวันสั้นลง และฟิลด์ที่นาน ๆ ใช้ครั้งไม่มาขวางทาง
- ฟิลด์น้อยลงบนหน้าจอที่ใช้บ่อย
- ลำดับฟิลด์ตรงกับเอกสารกระดาษ
- ใช้คีย์บอร์ดและบาร์โค้ดได้รวดเร็ว
- ตรวจป้ายกำกับไทยและอังกฤษด้วยความยาวจริง
ดูงานจริง
สังเกตงานจริงที่โต๊ะทำงานหรือในคลังสินค้า
จัดการฟิลด์
ทุกฟิลด์ถูกเก็บ ย้าย หรือซ่อนอย่างมีเหตุผล
ทำต้นแบบหน้าจอ
ฟอร์ม รายการ หรือแดชบอร์ดใหม่ในรูปแบบ Figma
ทดสอบกับคนเดิม
ผู้ใช้ที่เราสังเกตได้ลองใช้ก่อนพัฒนาจริง
ตัวอย่างการใช้งาน
งานออกแบบที่ เปลี่ยนการทำงานประจำวัน
ฟอร์ม Odoo ที่รก กลายเป็นใช้ง่าย
หน้าจอใบสั่งขายที่เต็มไปด้วยฟิลด์ที่ไม่มีใครใช้ กลายเป็นฟอร์มที่กระชับ สร้างจากหน้าจอมาตรฐานของ Odoo การอัปเกรดจึงยังง่าย
พอร์ทัลลูกค้าที่ทดสอบก่อนสร้าง
ก่อนพัฒนาพอร์ทัล เราทำต้นแบบการสั่งซื้อ ดาวน์โหลดใบแจ้งหนี้ และแจ้งปัญหาใน Figma แล้วทดสอบกับลูกค้าของคุณจำนวนหนึ่ง
ระบบดีไซน์เดียวสำหรับเว็บและแอป
ชุด token และคอมโพเนนต์ร่วมกันระหว่างเว็บไซต์ แอปมือถือ และพอร์ทัล ปุ่ม วันที่ หรือราคาจึงหน้าตาเหมือนกันทุกที่
กลุ่มธุรกิจ
ออกแบบสำหรับ หน้าจอที่ขับเคลื่อนงานปฏิบัติการ
การออกแบบที่ดีสำคัญที่สุดกับหน้าจอที่คนต้องใช้ทุกวัน เช่น การรับออเดอร์ การเช็กอิน การหยิบสินค้า และการวางบิล
- การผลิตหน้าจอแท็บเล็ตหน้างานสำหรับใบสั่งผลิต
- ค้าส่งและกระจายสินค้าหน้าจอรับออเดอร์ที่รวดเร็วสำหรับทีมขาย
- ค้าปลีกและอีคอมเมิร์ซขั้นตอนชำระเงินและ POS ที่แตะน้อยลง
- โรงพยาบาลและคลินิกลงทะเบียนผู้ป่วยและการนัดหมาย
- การศึกษาพอร์ทัลผู้ปกครองและนักเรียน
- ขนส่งและโลจิสติกส์แอปคนขับที่อ่านง่ายกลางแดด
- อสังหาริมทรัพย์พอร์ทัลผู้ซื้อพร้อมตารางผ่อนชำระ
- บริการวิชาชีพลงไทม์ชีตเสร็จในไม่กี่วินาที
วิธีการทำงาน
จากการวิจัย สู่การส่งมอบที่พร้อมพัฒนา
1. วิจัย
สัมภาษณ์ สังเกต และวิเคราะห์ข้อมูล เพื่อรู้ว่าผู้ใช้คือใครและติดขัดตรงไหน
2. ไวร์เฟรม
ตกลงลำดับการใช้งานและหน้าจอแบบร่างก่อนลงรายละเอียดภาพ
3. ออกแบบภาพ
หน้าจอตามแบรนด์ พร้อมเนื้อหาจริงภาษาไทยและอังกฤษ และคอนทราสต์ที่อ่านง่าย
4. ต้นแบบและทดสอบ
ต้นแบบ Figma ที่คลิกได้ ทดสอบกับผู้ใช้จริง แล้วปรับปรุง
5. ส่งมอบ
สเปก ไฟล์ และระบบดีไซน์ที่ตรงกับโค้ด โดยนักออกแบบยังร่วมงานระหว่างการพัฒนา
เครื่องมือ
เครื่องมือตั้งแต่ ภาพร่างแรกจนถึงหน้าจอที่ใช้งานจริง
- Figma
- FigJam
- Storybook
- Tailwind CSS
- React
- Next.js
- OWL
- Odoo Studio
- Microsoft Clarity
- Google Analytics 4
- Lighthouse
- axe DevTools
สิ่งที่เรายึดถือ
งานออกแบบที่คุณ เป็นเจ้าของและพัฒนาต่อได้
เราไม่อ้างตัวเลขการใช้งานที่เพิ่มขึ้นจากโครงการของคนอื่น แต่รับปากเรื่องผลงานที่คุณเก็บไว้ได้และมาตรฐานที่เราตรวจจริง
นัดคุยงานออกแบบฟรี- ตรวจระดับ AA ทั้งคอนทราสต์ โฟกัส และขนาดปุ่ม
- ทดสอบข้อความและฟอนต์ทั้งไทยและอังกฤษ
- ขั้นตอนตั้งแต่วิจัยถึงส่งมอบ
- ราคาคงที่ต่อระยะ เป็นลายลักษณ์อักษร
- ตอบกลับภายในหนึ่งวันทำการ
FAQ
คำถามที่ลูกค้าถามบ่อย
UI กับ UX ต่างกันอย่างไร
UX คือการออกแบบว่าผลิตภัณฑ์ทำงานอย่างไร ทั้งลำดับขั้น โครงสร้าง และการตัดสินใจที่ช่วยให้ผู้ใช้ทำงานสำเร็จ ส่วน UI คือหน้าตาและความรู้สึก ทั้งเลย์เอาต์ ตัวอักษร สี และคอมโพเนนต์ เราทำทั้งสองอย่างไปพร้อมกัน เพราะหน้าจอที่สวยแต่ลำดับผิดก็ยังทำให้ผู้ใช้หนีได้
ออกแบบหน้าจอ Odoo ใหม่โดยไม่ทำให้การอัปเกรดมีปัญหาได้หรือไม่
ได้ เราเริ่มจากการปรับหน้าจอมาตรฐาน เช่น ลำดับฟิลด์ การแสดงผล และค่าเริ่มต้น ผ่าน XML view หรือ Odoo Studio และพัฒนาคอมโพเนนต์ OWL เฉพาะหน้าจอที่ต้องการความสามารถที่ Odoo ไม่มี การเปลี่ยนแปลงทั้งหมดอยู่ในโมดูลแยกที่ทดสอบและปรับตามทุกการอัปเกรด ไม่ได้แก้โค้ดของ Odoo โดยตรง
ใช้เครื่องมือออกแบบอะไร และเราจะได้ไฟล์หรือไม่
เราออกแบบด้วย Figma และ FigJam และคุณได้สิทธิ์แก้ไขทุกไฟล์ คลังคอมโพเนนต์ และต้นแบบ Design token ถูกส่งออกให้นักพัฒนา สี ระยะห่าง และตัวอักษรจึงตรงกันในโค้ด ไม่มีอะไรถูกล็อกไว้ในบัญชีของเรา
ทดสอบการใช้งาน (Usability Test) ทำอย่างไร
เราคัดผู้ใช้จริงจำนวนหนึ่งต่อรอบ ส่วนใหญ่เป็นพนักงานหรือลูกค้าของคุณเอง ให้ทำงานจริงบนต้นแบบ Figma หรือระบบที่ใช้อยู่ บันทึกการทดสอบเป็นภาษาไทยหรืออังกฤษ และจัดลำดับปัญหาตามความถี่และความรุนแรง แต่ละรอบนำไปสู่การปรับแบบและทดสอบซ้ำ
ออกแบบรองรับภาษาไทยและอังกฤษพร้อมกันได้หรือไม่
ได้ อักษรไทยต้องการระยะบรรทัดที่สูงกว่าและฟอนต์ที่มีตัวอักษรไทยครบถ้วน ข้อความเดียวกันอาจยาวหรือสั้นกว่าภาษาอังกฤษมาก เราจึงออกแบบด้วยข้อความจริงทั้งสองภาษาตั้งแต่ไวร์เฟรมแรก เลย์เอาต์จึงไม่เพี้ยนเมื่อสลับภาษา
งานออกแบบ UI/UX ใช้เวลานานเท่าไร และราคาเท่าไร
การตรวจ UX ของผลิตภัณฑ์ที่มีอยู่เป็นงานสั้นราคาคงที่ ส่วนการออกแบบผลิตภัณฑ์เต็มรูปแบบแบ่งเป็นระยะตั้งแต่วิจัยจนถึงส่งมอบ เราเสนอราคาคงที่ต่อระยะหลังคุยวางขอบเขตงาน และเพราะทีมเดียวกันพัฒนาต่อได้ คุณจึงไม่ต้องจ้างอีกทีมมาตีความงานออกแบบ
เริ่มต้น
ส่งหน้าจอ ที่ทีมของคุณใช้ยากมาให้เรา
ส่งภาพหน้าจอ ลิงก์ หรือคำอธิบายสั้น ๆ ของงานนั้นมา เราตอบกลับภายในหนึ่งวันทำการ พร้อมข้อสังเกตเบื้องต้นและข้อเสนอระยะงานออกแบบ
- ตอบกลับภายในหนึ่งวันทำการ
- ไฟล์ Figma เป็นของคุณ
- ออกแบบและพัฒนาโดยทีมเดียว
อยากคุยก่อน? โทรหาเรา หรือ แชต WhatsApp.