ความคิดสร้างสรรค์เป็นสิ่งที่ขาดไม่ได้เลยในงานด้าน design และมันก็ไม่ใช่สิ่งยากที่จะทำด้วยครับ ความคิดสร้างสรรค์ไม่จำเป็นต้องเป็นสิ่งใหม่และมีประโยชน์ใช้งานได้ (เพราะสมัยนี้ หาสิ่งใหม่ 100% แทบไม่มีแล้ว) โดยมีแนวคิดภายใต้กรอบวิธีการง่ายๆ ดังนี้ ขยายให้ใหญ่ ย่อให้เล็ก เปลี่ยนสี, รสชาด, ผิวสัมผัส, เสียงบรรเลง ผสมปนเป รู้จักสังเกตพฤติกรรมและปัญหา แน่นอนครับ แนวทางการออกแบบ UI เชิงสร้างสรรค์ก็สามารถใช้แนวคิดนี้ได้เช่นกัน ผมจึงลองนำเอา UI ...

ผมย้ำเสมอว่า การรอคอยเป็นสิ่งที่น่าเบื่อและทรมานสำหรับยูสเซอร์ และได้เคยนำเสนอในบทความ “รอให้ดู“ว่าการรอคือโอกาสงามที่เราสามารถนำเสนอข้อมูลที่เป็นประโยชน์กับแบรนด์บริษัทหรือแม้แต่ขายของก็ยังได้เลยครับ นี่เป็นการตอบสนองอย่างหนึ่งที่เรียกว่า feedback ซึ่งเกิดขึ้นเมื่อระบบกำลัง process ข้อมูลที่อาจใช้เวลาสักระยะ ไอคอนโหลดข้อมูลของ facebook (ซ้าย) และไอคอนโหลดข้อมูลของ iOS (ขวา) App ระดับโลกอย่าง Facebook ก็มีการแสดง feedback ตอบสนองให้กับยูสเซอร์ได้รับทราบเมื่อ app กำลังโหลดข้อมูลอยู่ ...

  UI นี้พัฒนาโดย Mark Szulyovszky ซึ่งจะทำให้การดูรายละเอียดข้อมูลที่เป็นรายการรวดเร็วและเป็นธรรมชาติขึ้น จากที่ต้องคลิกเพื่อดูรายละเอียดเพิ่มเติมของแต่ละรายการ ก็ห้นมาใช้การเลื่อน (swipe) แทน มันสะดวกกว่าเยอะนะ คือพอเลื่อนดูเสร็จแว่บๆ (ยังเลื่อนไม่สุด) ก็เห็นว่าไม่ใช้สิ่งที่เราอยากอ่านต่อ ก็สามารถชักนิ้วกลับได้โดยทันควัน เห็นม่ะ แค่ต่างกันเล็กน้อย แต่ประสบการณ์ต่างกันเยอะแยะ ที่มา: http://www.itchingpixels.com/anatomy-of-a-touch-interaction-swipe-to-peep/

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