หน้าจอเล็กก็ต้องดูดี

หลายแอปพอดูบนคอมแล้วโอเค แต่พอเปิดบนมือถือ ทุกอย่างเริ่มพังเงียบๆ

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

ลองสังเกตก่อน ว่ามือถือกำลังทำให้แอปคุณเสียตรงไหน

เปิดแอปของคุณบนมือถือจริง หรืออย่างน้อยย่อหน้าต่างให้แคบลงมากๆ แล้วดูใหม่

อย่ามองแค่ว่า “มันยังขึ้นอยู่” แต่ให้ดูว่า มันยังใช้ง่ายอยู่ไหม

ถ้าคุณเริ่มรู้สึกว่า “เหมือนทุกอย่างถูกบีบ” นั่นแปลว่าหน้าจอยังไม่ได้ปรับตามขนาดจริง

หน้าจอเล็กไม่ได้แปลว่าแค่ย่อทุกอย่างลง

หลายคนคิดว่า responsive (ปรับตามขนาดหน้าจอ) คือแค่ทำให้ของเดิมเล็กลง

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

แอปบนมือถือก็ควรทำแบบนั้น เนื้อหาเดิมยังอยู่ แต่การจัดวางต้องเปลี่ยนให้เหมาะกับที่ที่แคบลง

เวลาลงมือถือ สิ่งที่มักต้องเปลี่ยนมีอยู่ไม่กี่อย่าง

อย่างแรกคือของที่เคยวางข้างกันบนคอม มักต้องเรียงลงมาเป็นแนวตั้งบนมือถือ เพื่อให้ยังอ่านง่ายและกดสะดวก

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

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

สิ่งสำคัญไม่ใช่ทำให้มือถือเหมือนคอมให้มากที่สุด แต่คือทำให้คนใช้มือถือยังใช้งานได้โดยไม่หงุดหงิด

ตัวอย่างก่อน — แอปติดตามค่าใช้จ่ายที่ดีบนคอม แต่เหนื่อยบนมือถือ

ลองนึกถึงแอปติดตามค่าใช้จ่ายที่บนคอมดูดีมาก

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

ทีนี้ลองดูเวอร์ชันหลังปรับ

ส่วนยอดรวมลงมาอยู่ด้านบนก่อน ฟอร์มเรียงเป็นแนวตั้ง ช่องกรอกแต่ละอันกดง่ายขึ้น ปุ่มหลักชัดและกว้างพอ ส่วนรายการด้านล่างยังอ่านได้ไม่อึดอัด แม้หน้าจอจะเล็กลง

ความรู้สึกที่เปลี่ยนคือ จากหน้าที่ดูเหมือนถูกบีบ กลายเป็นหน้าที่เหมือนถูกจัดใหม่ให้เหมาะกับมือถือจริงๆ

Prompt template

บทนี้เราจะบอก AI ให้ปรับหน้าจอสำหรับมือถือโดยไม่ไปแตะฟังก์ชัน

Prompt template:

ปรับ [หน้าหรือส่วนที่ต้องการ] ให้ใช้งานได้ดีบนมือถือ
- ให้ layout เรียงตัวใหม่ให้เหมาะกับหน้าจอแคบ
- ให้ปุ่มหลักและช่องกรอกกดง่ายและมองเห็นชัด
- ให้ข้อความและ section ต่างๆ ยังอ่านง่ายโดยไม่แน่นเกินไป
- ให้ทุกอย่างดูเป็นระเบียบทั้งบนจอใหญ่และจอเล็ก
ไม่เปลี่ยนฟังก์ชันใดๆ ที่มีอยู่แล้ว

ตัวอย่างจริง:

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

สังเกตว่าคำสั่งนี้ไม่ได้พูดว่า “ทำ mobile version ใหม่”

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

สำหรับแอปของคุณ ให้เริ่มจากหน้าที่คนใช้บ่อยที่สุด

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

ถ้าหน้านั้นใช้ได้ดีบนมือถือ ส่วนใหญ่ความรู้สึกโดยรวมของแอปจะดีขึ้นมากทันที

เวลาปรับ ให้คิดแบบนี้:

• บนมือถือ คนจะเห็นอะไรก่อน
• อะไรควรถูกดันขึ้นมาไว้ด้านบน
• อะไรควรเรียงลงมาแทนการวางข้างกัน
• อะไรที่กดด้วยนิ้วแล้วควรง่ายขึ้นกว่าบนคอม

ลงมือทำ — ดูบนมือถือจริง แล้วค่อยปรับ

1. เปิดแอปของคุณบนมือถือจริง หรือย่อหน้าต่างให้แคบมาก
2. เลือก 1 หน้าที่สำคัญที่สุด
3. ดูก่อนว่ามีอะไรแตก เบียด กดยาก หรืออ่านยาก
4. เอา prompt template ไปปรับให้เข้ากับแอปของคุณ
5. ส่ง prompt แล้วกลับมาดูอีกครั้งทั้งบนคอมและบนมือถือ

หลังจาก AI ปรับแล้ว ลองเช็กง่ายๆ:

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

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

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

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

คุณยังไม่ได้กลายเป็น designer ในความหมายแบบอาชีพ และคอร์สนี้ก็ไม่ได้ต้องการแบบนั้น

แต่ตอนนี้คุณมีทักษะที่สำคัญมากแล้ว: คุณเริ่มอธิบายความรู้สึกของหน้าจอเป็นคำได้ และเปลี่ยนคำพวกนั้นให้กลายเป็น prompt ที่ทำให้แอปดูดีขึ้นจริง