Heuristics เรื่อง ความสอดคล้อง และ การใช้ components มารตรฐาน

Sarawuth Chinbenjapol
odds.team
Published in
2 min readNov 1, 2020

ช่วงหายไปอาทิตย์ สองอาทิตย์ด้วยปัจจัยต่างๆมากมาย ไม่ว่าจะเป็นข่าวการเมือง หรือ เริ่มศึกษาเกี่ยวกับเรื่อง Branding เพิ่มเติมก็สนุกดี ^___^

แต่วันนี้พยายามจะเขียนสั้นๆกว่าตอนก่อนเพราะไม่ได้ตั้งใจจะให้มันเป็นเพื่อความรู้อะไรขนาดนั้น อยากให้เป็นคล้ายๆโน๊ตความจำมากกว่า ฮึ้บบบ…จะพยายามเขียนสั้นๆ(รอบที่2 ฮ่าๆๆๆ)

Consistency and Standard ส่วนตัวคิดว่ามันเป็นสิ่งสำคัญต้นๆในการทำ UI ให้ผู้ใช้งาน “ลดการใช้สมอง ” (Minimize Cognitive Load) ซึ่งเป็นพื้นฐานในการสร้าง Interface ที่ดี ผู้ใช้งานควรใช้พลังงานในการใช้งานกับเรื่อง Values หลักของ App ไม่ใช่มาใช้พลังงานกับการทำความเข้าใจ Interface แล้วพอไปถึงสิ่งที่เค้าต้องทำจริงๆแล้วพลังหมด

ผมขอยกตัวอย่างง่ายๆอย่างการใช้ App ธนาคาร (อีกแล้ว) ในฟีเจอร์การซื้อกองทุนละกัน คือเราต้องออกแบบการใช้งานของฟีเจอร์นี้ให้ผู้ใช้งาน ซื้อกองทุนได้เร็ว ปลอดภัย แล้วปิด App ไปเล่น Facebook, Tweeter หรือ ทำอะไรอย่างอื่นที่พวกเขาชอบ อย่างสบายใจ ไม่ใช่ต้องมาเรียนรู้ Component, Icon, Flow การใช้งานที่ใหม่ๆทั้งหมด (มันเหนื่อยนะพ่อคุณ) เคยโหลด App ใหม่ๆมาแล้วมันใช้ยากมะ แล้วเราก็แบบ “ชั่งแม่งไม่ใช้ก็ได้วะ” (ฮา)

คราวนี้กลับเข้ามาในประเด็นของการลดการใช้สมองซึ่งข้อดีของมันคือ

-ลดการทำความเข้าใจใหม่ (Reduce Learning)

-ลดความสับสนงุนงง (Eliminate Confusion)

โดยการใช้ Components ที่เป็น Standard ของระบบเช่น ถ้าเป็น IOS ก็ให้ใช้ User interaction design ของ Apple และหากเป็นของ Android ก็ใช้ใช้ Material Design ของ Google ไปก่อน เพราะ Components พวกนี้ผู้ใช้งานใช้มันเป็นประจำอยู่แล้วจนแทบไม่ต้องไปเรียนรู้อะไรใหม่

ต่อมาคือเรื่อง Consistency หลายๆคนมักจะละเลยประเด็นนี้ไปครับ คือการค่อยๆป้อนข้อมูลให้กับผู้ใช้งานอย่างชาญฉลาดและแยบยลโดยที่ผู้ใช้งานแทบจะไม่รู้สึกถึงการเรียนรู้นั้นได้เลย เช่น หากเราใช้ปุ่ม CTA (Call To Action คือปุ่มหลักของ App มักจะโดดเด่นเป็นสง่า ) หากเป็นสีฟ้าแล้วเราให้ความหมายเชิงบวกกับมัน (Positive button) เช่น Next, Submit, OK อะไรแบบนี้ผู้ใช้งานก็พอจะเดาได้ว่าหากกดอะไรที่เป็นปุ่มสีฟ้าๆ มันจะเป็น Action หลักของหน้านั้น ไม่ว่ามันจะอยู่ตรงไหนก็ตาม ยกอีกตัวอย่างหนึ่งที่เห็นชัดมาก

สังเกตว่า

ตรง Tabbar ด้านล่างมี Icon ที่เป็นสีฟ้ากำลัง Active ว่าอยู่หน้านี้อยู่ไปสอดคล้องกับปุ่ม “Get” “See All” “Icon” ทำให้รู้ว่าพวกนี้สามารถ Take Action กับมันได้นะ เป็นต้น แล้วการค่อยๆให้ผู้ใช้งานเรียนรู้แบบแยบยลนี้แหละที่สามารถช่วยให้พวกเขาสามารถลดการทำงานหนักของสมองในการเรียนรู้ Interface ได้กับหน้าต่อๆไปใน Appของเรา

หมดแล้ววววววว… ก็ลองไปลองหัดใช้ ลองใช้กันดูครับ ทั้งหมดยังอยู่บนพื้นฐานของการทำ Usability Testing อยู่ตลอดเวลานะครับ อย่าไปเชื่อเยอะ ให้พอเอาเป็นไกด์ไลน์ได้

ทั้งนี้ทั้งนั้นต้องขอขอบคุณ

-พี่จ๊วะมากครับ ที่ทำให้ผมมีแรงผลักดันการเขียนบทความนี้

-ขอบคุณน้องมิวครับน้องเป็นคนให้แรงบันดาลใจกับผมให้เขียนอะไรที่อ่านง่ายๆ

-ขอบคุณพี่เจนมากที่อยากให้ความรู้เรื่อง Ux มันไปแตะกับเรื่องอื่นบ้าง ซึ่งผมได้วาดรูปแปะไว้ใน Cover แล้วให้มันเป็นเรื่องอื่นแทน(ฮา)

และขอบคุณทุกท่านครับ..

--

--