ทฤษฎี UIเรื่องเด๊นเด่น ออกแบบ UI สำหรับอุปกรณ์หน้าจอสัมผัส By uiblogaziner March 20, 20165295 views ShareTweet 0 การออกแบบ UI สำหรับอุปกรณ์หน้าจอสัมผัส เช่น สมาร์ทโฟน (Smart Phones), แท็บเล็ต (Tablets) จะมีหลายจุดที่แตกต่างจากการออกแบบ UI สำหรับใช้งานผ่านคอมพิวเตอร์ตั้งโต๊ะ (Desktop) และแล็ปท็อป ซึ่งมีเมาส์และคีย์บอร์ดเป็นอุปกรณ์ที่ใช้ในการเลือกและสั่งงาน UI ขณะที่อุปกรณ์หน้าจอสัมผัสจะใช้นิ้วมือเป็นหลัก ในบทความนี้ ผมขออนุญาตแนะนำวิธีการออกแบบ UI สำหรับอุปกรณ์หน้าจอสัมผัสในจุดที่ผมคิดว่าสำคัญซึ่งเป็นแนวทางและเทคนิคที่น่ารู้อย่างยิ่งยวดสำหรับ designer 1. ไม่มีเหตุการณ์การวางเมาส์บนวัตถุ (No Mouseover Event) ตัวอย่าง UI ที่มีการออกแบบเหตุการณ์ตอนเอาเมาส์วางบนรูป สมมติผมออกแบบ UI แกลอรี่หน้าประกาศผลรางวัลรูปถ่ายยอดเยี่ยมตาม design ด้านบน การแสดงผลเมื่อมีเหตุการณ์เมาส์วางบนรูป และออกแบบเหตุการณ์ว่าเมื่อยูสเซอร์นำเมาส์ไปวางไว้บนภาพ (Mouseover) จะขึ้นปุ่ม ‘ดูภาพใหญ่’ เพื่อสื่อว่ารูปภาพสามารถคลิกได้ โดยฟังก์ชันการทำงานคือการดูภาพขยายใหญ่ พร้อมแสดงชื่อผู้ถ่ายอยู่ที่มุมขวาล่างของภาพด้วย แต่เพราะว่าอุปกรณ์หน้าจอสัมผัสไม่มีเมาส์ การออกแบบ UI แบบนี้จึงไม่ครอบคลุมการใช้งานบนมือถือหรือบนแท็บเล็ต เวลาออกแบบเว็บ responsive (เว็บที่รองรับการแสดงผลทุกอุปกรณ์) จึงต้องคำนึงถึงข้อเท็จจริงตรงนี้เสมอนะครับ ดูแล้วเป็นเรื่องง่ายๆ แต่มักจะหลงลืมกันง่ายๆ ด้วยเช่นกัน หากจำเป็นต้องใช้ ก็ไม่ควรซ่อนปุ่ม action หรือข้อมูลที่สำคัญๆ ในตอนเอาเมาส์ไปวางนะครับ ทางเลือกในการออกแบบหากเลี่ยงเหตุการณ์เมาส์วางบนรูป หนทางแก้ไขก็แสนง่าย เราก็เพียงนำสิ่งที่ซ่อนมาแสดงผลให้เห็นเลย แน่นอนว่าเราต้องเสียพื้นที่สำหรับข้อมูลในส่วนที่เพิ่มเติมนี้ แต่ก็คุ้มค่ากับประสบการณ์ที่สอดคล้องกันบนทุกอุปกรณ์ 2. อย่าฝ่าฝืนมาตรฐาน (Don’t violate standards) การซูมหน้าด้วยการถ่างนิ้วออก การใช้นิ้วชี้และนิ้วโป้งทำจีบแล้วถ่างออกจะเป็นท่าทาง (gesture) ที่ไว้สำหรับการซูมดูข้อมูลบนหน้าจอสัมผัส แม้ว่าในการเขียนโปรแกรมจะยอมให้เราล็อคการซูมหน้าจอของเบราเซอร์บนมือถือได้ แต่ผมแนะนำว่า ควรหลีกเลี่ยงโดยเด็ดขาด เพราะมันเป็นมาตรฐานการใช้งานที่ทราบกันทั่วไปแล้ว การจะทำอะไรที่ผิดแปลกจากมาตรฐานต้องลองพิจารณาดูว่าคุ้มไหมที่จะทำ ผลเสียของการฝ่าฝืนมาตรฐานคือ การที่ยูสเซอร์ต้องเสียเวลาเรียนรู้อะไรใหม่ และขัดแย้งกับความคาดหวังของยูสเซอร์ (ถ่างนิ้วแล้ว ข้อมูลต้องขยาย หากไม่เป็นไปตามคาด ยูสเซอร์จะหงุดหงิด อารมณ์เสียได้ง่ายๆ) ซึ่งเป็นสิ่งที่ร้ายแรงมากในกฎการออกแบบ UI 3. ทำปุ่มใช้งานประจำให้เห็นตลอด (Sticky buttons) กำหนดให้ปุ่มติดยึดอยู่ด้านล่างตลอดเพื่อให้กดใช้งานได้ตลอด เราสามารถทำปุ่มหลัก (Call-to-Action button) หรือปุ่มฟังก์ชันหลักที่ใช้งานบ่อยในหน้านั้นๆ ให้แสดงติดยึดอยู่ด้านล่างของหน้าจอตลอดได้ (sticky-footer button) ซึ่งจะใช้งานได้ดีสำหรับหน้าเว็บหรือ app ที่มีเนื้อหาค่อนข้างยาว ยูสเซอร์สามารถเข้าถึง action หลักได้ทุกเวลาโดยไม่จำเป็นต้องเลื่อนหน้าขึ้นไปด้านบนสุดหรือด้านล่างสุด พื้นที่ที่เสียไปกับปุ่มที่ไม่ใช่ฟังก์ชันหลัก มีบางเว็บแสดงปุ่มที่ติดยึดด้านข้างของหน้าอยู่ตลอดเวลา เช่น ปุ่ม Help, ปุ่มแชร์ เป็นต้น ซึ่งปุ่มเหล่านี้ไม่ใช่ปุ่มหลักของหน้า แต่กลับแสดงไว้เกะกะกินพื้นที่ ทบทวนแล้วเอาออกเถอะครับ 4. ทำฟอร์มให้เห็นปุ่ม (Visible button) ปุ่มของฟอร์มที่ถูกคีย์บอร์ดบัง (ซ้าย) และการออกแบบฟอร์มทางเลือกเพื่อไม่ให้ปุ่มถูกทับ การออกแบบฟอร์มเพื่อให้มองเห็นปุ่มค่อนข้างยากบนมือถือ แต่อย่างน้อยฟอร์มล็อคอินก็ดูไม่ใช่เรื่องยากเกินไป จากที่ปุ่มต้องถูกคีย์บอร์ดทับขณะพิมพ์ข้อมูลเข้าใช้งาน เราอาจออกแบบฟอร์มให้ใช้พื้นที่น้อยลง อย่างเช่นตัวอย่างด้านขวา หน้าจอปรับตำแหน่งให้เหมาะสมตามตำแหน่งการพิมพ์ อีกวิธีคือ เมื่อเราคลิกเลือกกรอก password หน้าจอจะเลื่อนขึ้นมา พอให้เห็นปุ่มแล่บโผล่พ้นคีย์บอร์ด 5. แสดงข้อมูลเพิ่มเติมแบบฝังบนหน้า (In-page appendix) การแสดงข้อมูลเสริมแบบโผล่เป็นส่วนหนึ่งของหน้า การแสดงข้อมูลเพิ่มเติมแบบฝังบนหน้าจะทำให้ยูสเซอร์สามารถทำงานได้อย่างต่อเนื่อง โดยข้อมูลที่เราเรียกดูนั้นไม่ไปบดบังข้อมูลอื่นและหากเป็นข้อมูลที่ค่อนข้างเยอะ การแสดงผลแบบ responsive ก็ทำได้ง่ายกว่าด้วย ตัวอย่างด้านบน เมื่อเรากดดูข้อมูลเพิ่มเติมจากลิงค์ ดูข้อตกลงการนำไปใช้ แทนที่จะแสดงเป็น Tooltip หรือ Popup ผมเลือกแสดงเนื้อหาให้โผล่แทรกเข้ามาทางด้านล่างของลิงค์เลย ซึ่งจะเห็นว่าการทำเช่นนี้ ยูสเซอร์สามารถเลือกกดปุ่ม ดูรูปต่อไป ได้เลย โดยไม่ถูกข้อมูลเพิ่มเติมนี้ขัดขวางแต่อย่างใด ข้อมูลเพิ่มเติมในมุมมอง Landscape การแสดงผลแบบ responsive ก็สามารถทำได้ง่ายและยืดหยุ่น โดยรองรับข้อมูลที่ยาวได้อย่างสบายๆ Tooltip แสดงผลทับปุ่ม และไม่ปรับขนาดตามความกว้างของหน้าที่เพิ่มขึ้น ในอีกทางหนึ่ง หากผมเลือกแสดงเนื้อหาเพิ่มเติมด้วยการใช้ Tooltip จะเห็นชัดเลยว่า Tooltip อาจไปบังปุ่มที่เราอยากจะกดต่อไปได้ ทำให้ต้องเสียเวลากดลิงค์อีกครั้งเพื่อปิด Tooltip ส่วนการแสดงผล Responsive ของ Tooltip (รูปทางขวา) ก็อาจทำได้ยากกว่าวิธีฝังข้อมูลลงไปในหน้า เพราะวิธ๊การแบบหลัง การแสดงผลจะอยู่บนพื้นฐานระบบโครงสร้างกริดของเว็บไซต์ ดูต่างกันแต่พื้นฐานเดียวกัน ผมได้ชี้จุดข้อควรระวังและทิปเล็กๆ น้อยๆ ที่จะช่วยให้การออกแบบ UI บนอุปกรณ์หน้าจอสัมผัสเกิดประสบการณ์ที่ดีแก่ยูสเซอร์ ถึงแม้ผมจะบอกว่ามันป็นสิ่งที่แตกต่างกับการออกแบบ UI สำหรับอุปกรณ์ที่ต้องใช้เมาส์ แต่โดยรวมแล้ว พื้นฐานที่ต้องใช้ในการออกแบบแทบไม่ได้ต่างกันเลย เช่น พื้นฐานเรื่องสี การจัดวางลำดับชั้นของข้อมูล ความต่างของสีพื้นหลังกับองค์ประกอบหลัก ความรู้เหล่านี้จึงล้วนสามารถนำมาประยุกต์ใช้ข้ามอุปกรณ์ได้อย่างไม่มีข้อจำกัด ไม่มีขอบเขต
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 8: คิดประสบการณ์ใหม่ในการดื่มกาแฟ By uiblogazinerAugust 23, 20171
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 7: เรียนรู้จากเจ้าของธุรกิจที่ชื่นชอบ By uiblogazinerAugust 1, 20170
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 6: คิดสร้างสรรค์ด้วยการเล่นไพ่ By uiblogazinerJuly 25, 20170
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 5: สร้างสินค้าใหม่ใน 30 นาที By uiblogazinerJuly 10, 20170