iUXUI Journey V — Low Calorie & Environmentally-Friendly UI

2 min readFeb 22, 2021

ทริปทริคในการออกแบบ UI ให้ user ใช้พลังงานน้อย และรักษ์โลก

ต้นฉบับ low calorie, envi-friendly จาก designil.com

หมวดแรก LOW CALORIE UI

#1 Click (คลิก) VS Scroll (เลื่อนขึ้นลง)

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

ฉะนั้น ควรออกแบบให้ใช้ scroll ขึ้นลงดีกว่า หน้าแรกให้ใส่เนื้อหาหลัก ที่กระชับ ส่วนอื่นๆ เอาไปยัดไว้หน้ารองที่อยู่ด้านล่าง ลองดูตัวอย่างที่เว็ปของ apple ได้

#2 Type (พิมพ์) VS Click (คลิก)

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

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

#3 Drag (ลาก) VS Click (คลิก)

ตัวเลือกแบบให้เลื่อนเพื่อเลือกค่า เช่น ราคา ระยะทาง แบบนี้เป็น UI ที่ไม่ดี เพราะผู้ใช้ต้องเกร็งมือ และต้องเพ่ง เพื่อให้ได้ค่าที่ต้องการ

ควรเปลี่ยนมาเป็นให้คลิกแทน ดังตัวอย่าง ที่สร้างตัวเลือกช่วงราคาให้ผู้ใช้เลือกแทน ดูง่าย เห็นปุ๊บจิ้มได้เลย ไม่ต้องเกร็ง เดี๋ยวนิ้วล็อค

#4 Press (กดค้าง) VS Click (คลิก)

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

เพิ่มอีกนิด คือแสดงให้ผู้ใช้เห็นด้วยว่าเลือกอะไรไปบ้าง จะใช้ไอคอน หรือเซ็ตกรอบหนา ก็ว่ากันไป

#5 Swipe (เลื่อนปัดซ้าย/ขวา) VS Scroll (เลื่อนขึ้นลง)

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

#6 Remember (จดจำ) VS Recall (ระลึก)

ข้อนี้เป็นกระบวนการละ ไม่ใช่การกระทำ

ยกตัวอย่างเช่น หากเราจะถอนเงิน UI ที่ดีต้องแสดงยอดเงินคงเหลือให้เรารู้ก่อน เพื่อจะได้ไม่ถอนเกิน (แต่ทางด้านความปลอดภัย อันนี้ไม่แน่ใจว่าควรทำไหมนะ) แบบนี้คือ การระลึก ไม่ใช่ให้ผู้ใช้ นึกเอาเอง (จดจำ)

ฉะนั้น เลี่ยงการออกแบบ ที่จะต้องให้ผู้ใช้จดจำข้อมูล ที่ระบบเราสามารถตอบได้ ข้อนี้ critical มากๆ เน้นฝุดๆ

#7 UI VS Natural Language, Voice (ภาษาพูด)

อันนี้เป็น conceptual มวักมวั๊ก

เพราะอยากได้ input command แบบที่เป็น ภาษาพูด เพราะการพูดแบบที่มนุษย์ใช้ มันธรรมชาติที่สุด เราเลยเปลืองพลังสมองน้อยสุด สั่งการได้เลย โดยไม่ต้องผ่าน เมาส์ คีย์บอร์ด หรือ ทัชสกรีน

หมวดสอง ENVIRONMENTALLY-FRIENDLY UI

#1 ตัด UI ที่ไม่จำเป็น

อันนี้ขอบเขตกว้างมว๊าก มันต้องเอา user journey มาดูกันเลยเทียว ว่าไอที่เราใส่เข้าไปนะ เพื่ออะไร ไม่มีแล้วผู้ใช้ชีวิตดีขึ้นไหม ไม่ใช่ใส่มาเพื่อเพิ่มฟีเจอร์ให้ดูเยอะเข้าไว้

#2 ลดความเข้มข้นของเส้น

จากดำเข้ม ก็ให้เป็นเทาซะ เพราะยิ่ง contrast มาก สายตาของผู้ใช้จะโดนดึงดูดมาก ไม่ได้ focus ไปที่ content สำคัญ ที่เราอยากสื่อ

ไม่เด่น ก็อย่าทำตัวเด่น (Oops!!!)

#3 เพิ่มพื้นที่ว่าง

หนึ่งในทริคที่หลายสำนักบอกมาเลย ขอ space เยอะๆ เพื่อให้ เรียบหรูและดูดี

#4 นำ UI กลับมาใช้ใหม่

element ของ html ต่างๆ เช่น ปุ่ม, select box, calendar ชิ้นส่วนต่างๆ พวกนี้ ควรใช้แบบเดียวกันทั้งระบบ (คีย์เวริ์ด stencil ของ UI)

ปัญหานี้เคยเจอตอนแยกงานกันทำ สามคนก็สามแบบ จริงๆ ควรมี template กลาง ที่คุยกันไว้ก่อนว่าให้ใช้แบบนี้นะ มันจะได้ออกมาโทนเดียวกัน

#5 เพิ่มข้อความข้างสีหรือใช้ Icon ประกอบ

ข้อนี้เป็นรายละเอียดปลีกย่อย ที่จะแสดงว่าเราใส่ใจผู้ใช้มากแค่ไหน บางคนตาบอดสี ควรมีข้อความบอกว่าสีที่แสดงนี้ สีอะไร

ส่วนการใช้ icon ก็เพื่อสื่อความ เพราะคนเข้าใจภาษาภาพมากกว่าภาษาเขียน

จบไปอีกหนึ่ง รายละเอียดมันเยอะจริมๆ หวังว่าตอนตรวจงานพี่ๆ ทีม GUI จะไม่ลืมนะ 😁