# Material Design ข้อมูล 46 การศึกษาเบื้องหลัง M3 Expressive

> ที่มา: https://phygital.co.th/insights/material-design-google-system-guide · เผยแพร่ 31 สิงหาคม 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

Material Design รอบ M3 Expressive ผ่าน 46 การศึกษากับผู้เข้าร่วมกว่า 18,000 คน อ่านตัวเลขที่ทีมวิจัยของ Google เผยแพร่ กรณีที่ผลออกมาไม่ดี และข้อจำกัดก่อนนำไปใช้

## Key Takeaways

- **ทีมวิจัยของ Google Design รายงานว่า Material 3 Expressive ผ่าน 46 การศึกษาแยกกัน กับผู้เข้าร่วมกว่า 18,000 คนทั่วโลก** — ในบทความที่เผยแพร่เมื่อ 13 พฤษภาคม 2025 และเรียกรอบนี้ว่าเป็นการอัปเดตระบบดีไซน์ที่ผ่านการวิจัยมากที่สุดเท่าที่เคยทำ
- **ในการทดลองด้วยแว่นติดตามสายตากับแอป 10 แอป ผู้เข้าร่วมเห็นองค์ประกอบสำคัญบนหน้าจอได้เร็วขึ้นสูงสุด 4 เท่า** — และช่องว่างด้านเวลาระหว่างผู้ใช้อายุ 45 ปีขึ้นไปกับผู้ใช้อายุน้อยแทบหายไป
- **บทความเดียวกันรายงานกรณีที่ผลออกมาไม่ดีด้วย** — เช่น เพลย์ลิสต์ที่วางภาพปกกระจัดกระจาย และปุ่มอีเมลที่ตัดป้ายข้อความออก ซึ่งใช้งานยากขึ้น และยังมีผู้ใช้กลุ่มน้อยที่ชัดเจนซึ่งชอบแบบที่สงบกว่า

ทีมที่ทำแอปหรือเว็บของธุรกิจตามแนวทางของ Google มักได้ยินว่าดีไซน์รุ่นใหม่ใช้สีจัดและปุ่มใหญ่ขึ้น แล้วต้องตัดสินว่าจะเปลี่ยนตามหรือไม่ สิ่งที่ทำให้การเปลี่ยนรอบนี้ต่างจากการเปลี่ยนดีไซน์ทั่วไปคือทีมวิจัยของ Google เผยแพร่ตัวเลขเบื้องหลังการตัดสินใจ บทนี้อ่าน[บทความ Expressive Design: Google's UX Research](https://design.google/library/expressive-material-design-google-research) ของ Google Design แยกตัวเลขที่ธุรกิจนำไปใช้ได้ ออกจากส่วนที่ต้องอ่านอย่างระวัง

Material Design คือระบบดีไซน์ที่ Google ใช้กับแอปของตัวเองและเปิดให้นักพัฒนาทั่วไปใช้ กำหนดทั้งสี รูปทรง ขนาด การเคลื่อนไหว และส่วนประกอบอย่างปุ่มกับการ์ด รุ่นปัจจุบันคือ Material 3 และในปี 2025 Google เพิ่มชุดแนวทางที่เรียกว่า Material 3 Expressive หรือ M3 Expressive ซึ่งใช้สีจัด รูปทรงหลากหลาย และขนาดที่ใหญ่ขึ้น

## Material Design กับรอบ Material 3 Expressive

บทความนี้เขียนโดยทีมวิจัยประสบการณ์ผู้ใช้ของ Google Design ห้าคน นำโดย Frank Bentley ผู้อำนวยการฝ่ายวิจัย UX ต้นเรื่องย้อนไปปี 2022 เมื่อนักศึกษาฝึกงานด้านวิจัยศึกษาความรู้สึกของผู้ใช้ต่อ Material Design ในแอปของ Google แล้วตั้งคำถามว่าทำไมแอปเหล่านี้หน้าตาคล้ายกันและน่าเบื่อ คำถามนั้นนำไปสู่การออกแบบและวิจัยหลายสิบรอบตลอดสามปี

| ข้อมูลการวิจัย     | ตามบทความของ Google Design                                                                                                                      |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| จำนวนการศึกษา      | 46 การศึกษาแยกกัน กับงานออกแบบหลายร้อยแบบ                                                                                                 |
| ผู้เข้าร่วม        | มากกว่า 18,000 คนจากทั่วโลก                                                                                                                    |
| วิธีวิจัย           | แบบสำรวจและกลุ่มสนทนาวัดอารมณ์ต่อดีไซน์ · ทดสอบการใช้งานว่าเข้าใจและใช้หน้าจอได้เร็วแค่ไหน · แว่นติดตามสายตาในห้องทดลอง |
| ระยะเวลา            | ราวสามปี นับจากคำถามแรกในปี 2022                                                                                                           |
| หน่วยที่ทดสอบก่อน | ส่วนประกอบรายชิ้น เช่น ตัวแสดงความคืบหน้า ขนาดปุ่ม และแถบเครื่องมือลอย                                                                |

ที่มา: บทความ Expressive Design: Google's UX Research (13 พฤษภาคม 2025)

### ทีมวิจัยวัดอะไรบ้างนอกจากความชอบ

บทความระบุว่าทีมทดสอบส่วนประกอบรายชิ้นก่อน เช่น เปรียบเทียบตัวแสดงความคืบหน้าหลายแบบว่าแบบไหนทำให้การรอรู้สึกเร็วขึ้น ศึกษาว่าปุ่มใหญ่ได้แค่ไหนก่อนจะเบียดส่วนอื่นบนหน้าจอ และทดสอบแถบเครื่องมือลอยว่าดูทันสมัยและยังใช้งานได้ นอกจากนี้ทีมใช้ชุดคำคุณศัพท์ เช่น สนุก มีพลัง สร้างสรรค์ และเป็นมิตร ให้ผู้เข้าร่วมให้คะแนนดีไซน์แต่ละรอบ แล้วปรับดีไซน์ให้ได้อารมณ์ที่ตั้งเป้าไว้

## ตัวเลขที่ทีมวิจัยเผยแพร่

ตัวเลขในบทความแบ่งได้สามกลุ่ม คือความชอบ ความรู้สึกต่อแบรนด์ และความเร็วในการใช้งาน ตารางนี้รวมตัวเลขทุกตัวที่บทความให้ไว้ พร้อมคำที่บทความใช้กำกับ

| ตัวชี้วัด                                             | ผลที่รายงาน           | คำกำกับในบทความ       |
| ------------------------------------------------------- | ----------------------- | ------------------------ |
| ความชอบดีไซน์แบบ Expressive ในผู้ใช้อายุ 18-24 ปี | สูงถึง 87%             | up to 87%                |
| การรับรู้ว่าแบรนด์ทันสมัย                         | เพิ่มขึ้น 34%          | a 34% boost in modernity |
| การรับรู้ว่าแบรนด์อยู่ในกระแสของกลุ่ม          | เพิ่มขึ้น 32%          | subculture perception    |
| การรับรู้ว่าแบรนด์กล้าแหกกรอบ                    | เพิ่มขึ้น 30%          | rebelliousness           |
| ความเร็วในการเห็นองค์ประกอบสำคัญ                  | เร็วขึ้นสูงสุด 4 เท่า | up to four times faster  |
| เวลาในการแตะปุ่มหลัก                               | ลดลงเป็นหลักวินาที  | decreased by seconds     |

ที่มา: บทความ Expressive Design: Google's UX Research

### ตัวเลข 32% 34% และ 30% วัดจากอะไร

ทั้งสามตัวมาจากการวัดความน่าปรารถนาของดีไซน์ บทความระบุว่าอิงงานวิจัยของ Caleb Warren และคณะ ปี 2019 ซึ่งศึกษาว่าทำไมสินค้าบางชิ้นกลายเป็นของที่ทุกคนอยากได้ ขณะที่สินค้าที่มีคุณสมบัติเท่ากันกลับไม่ได้รับความสนใจแบบเดียวกัน ทีมนำปัจจัยจากงานนั้นมาวัดความรู้สึกของผู้เข้าร่วมต่อดีไซน์ใหม่ บทความไม่ได้บอกว่าตัวเลขเพิ่มขึ้นเทียบกับค่าตั้งต้นเท่าไร จึงควรอ่านเป็นทิศทางของผล ไม่ใช่ค่าที่นำไปคาดการณ์ยอดขายได้

## ปุ่มส่งอีเมลที่เห็นเร็วขึ้นสี่เท่า

ตัวอย่างที่บทความใช้อธิบายชัดที่สุดคือหน้าจอเขียนอีเมล ในดีไซน์เดิม ปุ่มส่งมีขนาดเล็ก อยู่บนแถบเครื่องมือด้านบนของหน้าจอ ปนกับปุ่มอื่นอย่างปุ่มแนบไฟล์ ในดีไซน์ใหม่ ปุ่มส่งใหญ่ขึ้น ย้ายมาอยู่เหนือแป้นพิมพ์ และใช้สีรองของระบบเพื่อดึงความสนใจ

เมื่อให้ผู้เข้าร่วมทำภารกิจ "ส่งอีเมล" สายตาของผู้เข้าร่วมเจอปุ่มในดีไซน์ใหม่เร็วกว่าเดิมสี่เท่า บทความอธิบายว่าการใช้สี ขนาด รูปทรง และการจัดกลุ่มแบบนี้ตามหลักการออกแบบที่ใช้กันมานาน คือดึงความสนใจไปยังสิ่งที่สำคัญที่สุดบนหน้าจอ และรวมสิ่งที่เหมือนกันไว้ด้วยกัน

### บทเรียนจากปุ่มส่งใช้กับหน้าเว็บของธุรกิจได้อย่างไร

หน้าเว็บทุกหน้ามีการกระทำที่ธุรกิจอยากให้ลูกค้าทำมากที่สุดหนึ่งอย่าง เช่น สั่งซื้อ จองคิว หรือทักแชท ตัวอย่างปุ่มส่งอีเมลบอกว่าตำแหน่งและขนาดมีผลกับความเร็วที่ลูกค้าเจอปุ่มนั้นพอ ๆ กับสี ปุ่มที่ใกล้จุดที่นิ้วอยู่ในขณะนั้นและใหญ่กว่าปุ่มรอบข้างเห็นได้เร็วกว่า ธุรกิจทดสอบแบบเดียวกันได้ โดยให้คนที่ไม่เคยเห็นหน้าเว็บทำภารกิจหนึ่งอย่าง แล้วจับเวลาจนกดปุ่มหลักได้ในสองดีไซน์

## ผู้ใช้อายุ 45 ปีขึ้นไปหาปุ่มได้เร็วเท่าคนหนุ่มสาว

ผลที่ทีมวิจัยเรียกว่าน่าตื่นเต้นเป็นพิเศษคือเรื่องอายุ บทความอธิบายว่าการทดสอบการใช้งานทั่วไปมักพบว่าผู้ใช้สูงวัยใช้เวลาหาองค์ประกอบสำคัญบนหน้าจอนานกว่า แต่ในดีไซน์ M3 Expressive ความต่างด้านเวลาจ้องตามอายุแทบหายไป ผู้ใช้อายุ 45 ปีขึ้นไปหาองค์ประกอบที่กดได้เร็วเท่าผู้ใช้อายุน้อยในทั้ง 10 แอปที่ทดสอบ

บทความยังรายงานว่าผู้เข้าร่วมที่มีความสามารถด้านการเคลื่อนไหวและการมองเห็นแตกต่างกันให้คะแนนดีไซน์ใหม่ว่าน่ามอง เข้าใจง่าย และใช้ง่ายกว่า ทีมวิจัยให้เหตุผลว่าปุ่มที่ใหญ่ขึ้นและการใช้กรอบที่ตัดกับพื้นหลังชัดทำให้ทุกคนใช้งานได้ดีขึ้น และระบุว่าในหลายจุดทีมเลือกทำเกินมาตรฐานเดิมเรื่องขนาดพื้นที่แตะและคอนทราสต์ของสี

### ธุรกิจที่ลูกค้าส่วนใหญ่อายุมากควรใช้ดีไซน์แบบนี้ไหม

ข้อมูลชุดนี้ชี้ว่าองค์ประกอบของดีไซน์แบบ Expressive คือปุ่มใหญ่ ตำแหน่งชัด และการจัดกลุ่มที่เห็นง่าย ช่วยผู้ใช้สูงวัยได้จริงในแอปที่ทดสอบ แต่ความชอบโดยรวมของกลุ่มอายุมากต่ำกว่ากลุ่ม 18-24 ปี ธุรกิจที่ลูกค้าส่วนใหญ่อายุมากจึงควรนำส่วนที่ช่วยการใช้งานมาใช้ก่อน เช่น ขนาดและตำแหน่งปุ่ม ส่วนสีและรูปทรงที่จัดจ้านควรทดสอบกับลูกค้ากลุ่มนั้นก่อนตัดสินใจ

## กรณีที่ดีไซน์แบบ Expressive ทำให้ใช้งานแย่ลง

ส่วนที่มีค่าที่สุดของบทความสำหรับการตัดสินใจอาจเป็นกรณีที่ไม่สำเร็จ ทีมวิจัยเขียนว่าดีไซน์แบบ Expressive ไม่ได้เหมาะกับทุกงาน สิ่งที่ได้ผลในแอปเล่นสื่อหรือแอปอีเมลอาจไม่เหมาะกับหน้าจออย่างแอปธนาคาร และผู้สร้างผลิตภัณฑ์ต้องเคารพรูปแบบการใช้งานที่ผู้ใช้คุ้นเคยอยู่แล้ว

| กรณีในบทความ                      | สิ่งที่เปลี่ยน                                                               | ผลที่รายงาน                                                                                               |
| ----------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
| หน้าเพลย์ลิสต์เพลง             | เปลี่ยนรายการเพลงแนวตั้งที่คุ้นเคยเป็นภาพปกอัลบั้มวางกระจัดกระจาย | ผู้ใช้บอกว่าดูทันสมัยและน่าตื่นเต้น แต่คะแนนการใช้งานลดลง และไม่รู้ว่าเป็นเพลย์ลิสต์ |
| ปุ่มคำสั่งในแอปอีเมล           | ตัดป้ายข้อความออกจากปุ่ม                                                  | ใช้งานยากขึ้น                                                                                            |
| ผู้ใช้ที่ไม่คุ้นกับสไตล์ใหม่ | ไม่ได้เปลี่ยนอะไรเพิ่ม                                                     | ความไม่คุ้นเคยลดผลด้านความชอบและการใช้งาน                                                       |
| ความชอบของผู้ใช้ทั้งหมด        | เปรียบเทียบดีไซน์จัดจ้านกับแบบสงบ                                       | ส่วนใหญ่ชอบแบบจัดจ้าน แต่มีกลุ่มน้อยที่ชัดเจนชอบแบบสงบกว่า                                    |

ที่มา: บทความ Expressive Design: Google's UX Research

### ทำไมตัดป้ายข้อความออกจากปุ่มแล้วใช้ยากขึ้น

บทความไม่ได้ให้ตัวเลขของกรณีนี้ รายงานเพียงว่าการตัดป้ายข้อความออกจากคำสั่งในแอปอีเมลทำให้การใช้งานลดลง และสรุปว่าเมื่อรูปแบบการใช้งานพื้นฐานถูกทำลาย ดีไซน์แบบ Expressive อาจทำให้ใช้งานยากหรือเกิดความรู้สึกลบ คำอธิบายที่ใช้ได้คือไอคอนหลายตัวตีความได้หลายแบบ ป้ายข้อความทำให้ผู้ใช้ไม่ต้องเดา ธุรกิจที่อยากให้หน้าจอดูสะอาดด้วยการเหลือแค่ไอคอนจึงควรทดสอบก่อนตัดคำออก

## สิ่งที่ตัวเลขจาก Google ยังไม่ได้บอก

ตัวเลขทั้งหมดในบทนี้มาจากทีมวิจัยของบริษัทที่เป็นเจ้าของระบบดีไซน์เอง และเผยแพร่เป็นบทความบนเว็บไซต์ของบริษัท ไม่ใช่งานวิจัยที่ผ่านการประเมินจากผู้ทรงคุณวุฒิภายนอก บทความไม่ได้บอกจำนวนผู้เข้าร่วมของแต่ละการศึกษา ไม่ได้บอกว่าตัวเลข 87% วัดจากคำถามแบบไหน และตัวเลขความเร็วหลายตัวใช้คำว่า "สูงสุด" ซึ่งหมายถึงผลที่ดีที่สุดในบางแอป ไม่ใช่ค่าเฉลี่ย

การเปรียบเทียบทั้งหมดเป็นการเทียบดีไซน์ใหม่กับ Material 3 รุ่นก่อนของ Google เอง ไม่ได้เทียบกับระบบดีไซน์อื่น บทความยังบอกเองว่าความไม่คุ้นเคยทำให้ผลลดลง ตัวเลขจึงอาจเปลี่ยนเมื่อผู้ใช้เห็นสไตล์นี้บ่อยขึ้น

### ควรเชื่อตัวเลขจากบทความของบริษัทเทคโนโลยีแค่ไหน

เชื่อได้ในฐานะทิศทาง แต่ไม่ควรใช้เป็นตัวเลขคาดการณ์ของธุรกิจตัวเอง บทความของ Google Design ให้ข้อมูลวิธีวิจัยพอสมควร และยอมรับกรณีที่ไม่สำเร็จ ซึ่งเป็นสัญญาณที่ดี แต่แอปที่ทดสอบเป็นแอปของผู้ทดสอบเอง กลุ่มผู้ใช้และบริบทต่างจากลูกค้าของธุรกิจไทยทั่วไป วิธีตรวจว่าผลวิจัยชิ้นหนึ่งเชื่อถือได้แค่ไหนอธิบายไว้ในบทความ [บริการวิจัยตลาด ตรวจอย่างไรว่าผลวิจัยเชื่อถือได้](https://phygital.co.th/insights/market-research-service)

## ทดสอบอะไรก่อนปรับหน้าจอให้สีสันจัดขึ้น

ทีมวิจัยของ Google ปิดบทความด้วยคำแนะนำหกข้อ แปลงเป็นลำดับทดสอบที่ธุรกิจทำเองได้ก่อนลงทุนเปลี่ยนดีไซน์

1. **เริ่มจากความต้องการของผู้ใช้** ระบุภารกิจหลักของหน้าจอก่อนเลือกสีและรูปทรง
2. **วัดเวลาทำภารกิจหลักในดีไซน์เดิม** เป็นค่าตั้งต้นก่อนเปลี่ยนอะไร
3. **เปลี่ยนทีละส่วน** เริ่มจากขนาดและตำแหน่งปุ่มหลัก แบบที่ปุ่มส่งอีเมลในบทความทำ
4. **อย่าตัดป้ายข้อความออกจากปุ่ม** จนกว่าจะทดสอบแล้วว่าผู้ใช้ยังเข้าใจ
5. **ถามความชอบแยกตามกลุ่มลูกค้า** เพราะความชอบในบทความต่างกันตามอายุ และมีกลุ่มที่ชอบแบบสงบ
6. **ทดสอบซ้ำหลังผู้ใช้คุ้นเคย** เพราะความไม่คุ้นเคยทำให้ผลรอบแรกต่ำกว่าจริง

## สรุป

Material Design รอบ M3 Expressive เป็นหนึ่งในการเปลี่ยนระบบดีไซน์ที่มีตัวเลขวิจัยเผยแพร่มากที่สุด ทีมของ Google Design รายงาน 46 การศึกษา ผู้เข้าร่วมกว่า 18,000 คน การเห็นองค์ประกอบสำคัญเร็วขึ้นสูงสุด 4 เท่า และช่องว่างด้านอายุที่แทบหายไป แต่บทความเดียวกันก็รายงานดีไซน์ที่คนชอบแต่ใช้ยาก และผู้ใช้กลุ่มน้อยที่ชอบแบบสงบ ตัวเลขทั้งหมดมาจากเจ้าของระบบเอง ธุรกิจจึงควรใช้เป็นทิศทาง แล้ววัดกับลูกค้าของตัวเองก่อนเปลี่ยนหน้าจอ

## คำถามที่พบบ่อย (FAQ)

### Material Design ต่างจาก Flat Design อย่างไร

Flat Design เป็นแนวทางทั่วไปที่ลดเงาและลายผิว ส่วน Material Design เป็นระบบดีไซน์ของบริษัทหนึ่งที่มีเอกสารกำหนดส่วนประกอบไว้ชัด รอบ M3 Expressive เพิ่มสี รูปทรง และขนาดเข้าไปอีก การถอดขอบปุ่มในการเปิดตัว iOS 7 ปี 2013 อธิบายไว้ในบทความ [Flat Design ปุ่มไม่มีขอบ ลูกค้ารู้ได้อย่างไรว่ากดตรงไหน](https://phygital.co.th/insights/flat-design-ui-history-guide)

### ธุรกิจเล็กทำวิจัยแบบนี้ได้ไหมถ้าไม่มีห้องทดลอง

ทำได้ในขนาดที่เล็กกว่ามาก การจับเวลาว่าคนหาปุ่มหลักเจอภายในกี่วินาทีทำได้ด้วยการอัดหน้าจอขณะให้ผู้ทดสอบทำภารกิจ ส่วนความชอบวัดด้วยแบบสอบถามสั้น ๆ หลังใช้งาน การเลือกระหว่างวิธีเชิงปริมาณกับเชิงคุณภาพอธิบายไว้ในบทความ [บริการวิจัยเชิงปริมาณและคุณภาพ เลือกวิธีไหนให้ตรงคำถาม](https://phygital.co.th/insights/quantitative-qualitative-market-research)

### แว่นติดตามสายตาวัดอะไร

วัดว่าสายตาของผู้ใช้ไปหยุดที่จุดไหนของหน้าจอ และนานเท่าไร ในบทความของ Google ทีมใช้วัดเวลาจนสายตาเจอองค์ประกอบสำคัญ งานวิจัยการมองอีกกลุ่มที่เกี่ยวกับการจัดองค์ประกอบภาพบนหน้าเว็บอธิบายไว้ในบทความ [Rule of Thirds คืออะไร องค์ประกอบภาพตามงานวิจัยการมองจริง](https://phygital.co.th/insights/composition-rule-of-thirds-visual-hierarchy-guide)

### ถ้าแบรนด์เป็นสายหรูและเรียบ ควรใช้ดีไซน์แบบ Expressive ไหม

ไม่จำเป็น บทความของ Google เองแนะนำให้หาสมดุลระหว่างความสดใหม่กับความคุ้นเคย และระหว่างความสนุกกับความเป็นมืออาชีพ แบรนด์ที่ภาพลักษณ์เรียบหรูนำเฉพาะส่วนที่ช่วยการใช้งาน เช่น ขนาดและตำแหน่งปุ่มหลัก มาใช้ได้โดยไม่ต้องเปลี่ยนโทนสีทั้งระบบ

### M3 Expressive ใช้กับเว็บไซต์ได้ไหม หรือใช้ได้แค่แอป Android

บทความเน้นการทดสอบในแอป และแนะนำให้นักออกแบบเริ่มจากชุดไฟล์ออกแบบใน Figma ที่ Google อัปเดตแล้ว หลักที่อยู่เบื้องหลัง คือการใช้สี ขนาด รูปทรง และการจัดกลุ่มดึงความสนใจไปที่สิ่งสำคัญ ใช้กับหน้าเว็บได้ แต่ตัวเลขในบทนี้ทดสอบกับแอป จึงไม่ควรยกไปอ้างเป็นผลของเว็บไซต์โดยตรง

## ถ้าไม่มีตัวเลขก่อนและหลังรีดีไซน์ ไม่มีใครตอบได้ว่างบที่ใช้ไปได้อะไรกลับมา

ก่อนขยายดีไซน์ใหม่ไปทั้งระบบ PHYGITAL AGENCY วัดความชอบและเวลาทำภารกิจหลักกับลูกค้าจริงทั้งก่อนและหลังเปลี่ยน ให้เจ้าของธุรกิจเห็นผลเป็นตัวเลข

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)