UI Blogazine

ทฤษฎี UI

ออกแบบ UI สำหรับอุปกรณ์หน้าจอสัมผัส

touch-screen-ui-design-featuring-01

การออกแบบ UI สำหรับอุปกรณ์หน้าจอสัมผัส เช่น สมาร์ทโฟน (Smart Phones),  แท็บเล็ต (Tablets) จะมีหลายจุดที่แตกต่างจากการออกแบบ UI สำหรับใช้งานผ่านคอมพิวเตอร์ตั้งโต๊ะ (Desktop) และแล็ปท็อป ซึ่งมีเมาส์และคีย์บอร์ดเป็นอุปกรณ์ที่ใช้ในการเลือกและสั่งงาน UI ขณะที่อุปกรณ์หน้าจอสัมผัสจะใช้นิ้วมือเป็นหลัก

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

1. ไม่มีเหตุการณ์การวางเมาส์บนวัตถุ (No Mouseover Event)

touch-device-design-01

ตัวอย่าง UI ที่มีการออกแบบเหตุการณ์ตอนเอาเมาส์วางบนรูป

สมมติผมออกแบบ UI แกลอรี่หน้าประกาศผลรางวัลรูปถ่ายยอดเยี่ยมตาม design ด้านบน

touch-device-design-02

การแสดงผลเมื่อมีเหตุการณ์เมาส์วางบนรูป

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

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

touch-device-design-03

ทางเลือกในการออกแบบหากเลี่ยงเหตุการณ์เมาส์วางบนรูป

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

2. อย่าฝ่าฝืนมาตรฐาน (Don’t violate standards)

touch-device-design-04

การซูมหน้าด้วยการถ่างนิ้วออก

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

3. ทำปุ่มใช้งานประจำให้เห็นตลอด (Sticky buttons)

touch-device-design-05

กำหนดให้ปุ่มติดยึดอยู่ด้านล่างตลอดเพื่อให้กดใช้งานได้ตลอด

เราสามารถทำปุ่มหลัก (Call-to-Action button) หรือปุ่มฟังก์ชันหลักที่ใช้งานบ่อยในหน้านั้นๆ ให้แสดงติดยึดอยู่ด้านล่างของหน้าจอตลอดได้ (sticky-footer button) ซึ่งจะใช้งานได้ดีสำหรับหน้าเว็บหรือ app ที่มีเนื้อหาค่อนข้างยาว ยูสเซอร์สามารถเข้าถึง action หลักได้ทุกเวลาโดยไม่จำเป็นต้องเลื่อนหน้าขึ้นไปด้านบนสุดหรือด้านล่างสุด

touch-device-design-06

พื้นที่ที่เสียไปกับปุ่มที่ไม่ใช่ฟังก์ชันหลัก

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

4. ทำฟอร์มให้เห็นปุ่ม (Visible button)

touch-device-design-07

ปุ่มของฟอร์มที่ถูกคีย์บอร์ดบัง (ซ้าย) และการออกแบบฟอร์มทางเลือกเพื่อไม่ให้ปุ่มถูกทับ

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

touch-device-design-08หน้าจอปรับตำแหน่งให้เหมาะสมตามตำแหน่งการพิมพ์

อีกวิธีคือ เมื่อเราคลิกเลือกกรอก password หน้าจอจะเลื่อนขึ้นมา พอให้เห็นปุ่มแล่บโผล่พ้นคีย์บอร์ด

5. แสดงข้อมูลเพิ่มเติมแบบฝังบนหน้า (In-page appendix)

touch-device-design-09

การแสดงข้อมูลเสริมแบบโผล่เป็นส่วนหนึ่งของหน้า

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

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

touch-device-design-10ข้อมูลเพิ่มเติมในมุมมอง Landscape

การแสดงผลแบบ responsive ก็สามารถทำได้ง่ายและยืดหยุ่น โดยรองรับข้อมูลที่ยาวได้อย่างสบายๆ

touch-device-design-11Tooltip แสดงผลทับปุ่ม และไม่ปรับขนาดตามความกว้างของหน้าที่เพิ่มขึ้น

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

ส่วนการแสดงผล Responsive ของ Tooltip (รูปทางขวา) ก็อาจทำได้ยากกว่าวิธีฝังข้อมูลลงไปในหน้า เพราะวิธ๊การแบบหลัง การแสดงผลจะอยู่บนพื้นฐานระบบโครงสร้างกริดของเว็บไซต์

ดูต่างกันแต่พื้นฐานเดียวกัน

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

Tagged , , , ,

About uiblogaziner

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

View all posts by uiblogaziner →

Leave a Reply

Your email address will not be published. Required fields are marked *

บทความล่าสุด