Usability Heuristic 10 ข้อที่ช่วยให้ UI Design ของคุณดีขึ้น — ตอนที่ 3 Fast Read การออกแบบโดยคำนึงถึงบริบทที่จะขัดขวางให้ผู้ใช้งานไปไม่ถึงเป้าหมาย และเพิ่มทางเลือกให้พวกเค้าสามารถบรรลุเป้าหมายได้นั้น จะช่วยทำให้ผู้ใช้งานรู้สึกว่าเค้าสามารถจัดการกับปัญหาที่เจออยู่ได้ (Control) และมีอิสระที่จะเลือกในสิ่งที่เค้าพอใจเพื่อไปถึงเป้าหมาย (Freedom) วันหนึ่ง ในขณะที่ผมกำลังพูดคุยระหว่างกลุ่ม 2 กลุ่มในแชท กลุ่มแรกเป็นกลุ่มงานที่มีสมาชิกเป็นคนในบริษัททั้งหมด กับอีกกลุ่มเป็นกลุ่มเพื่อน ๆ สมัยมัธยมปลาย ด้วยความที่แชทมันรัวมาก ๆ กลุ่มงานก็คุยเรื่องหาสถานที่ในการทำงาน Outdoor อยู่ กลุ่มเพื่อนก็คุยเรื่องนัดเที่ยวกัน ด้วยความที่ตอนนั้นผมเบลอ หรือละเมออะไรก็ไม่รู้ ดันเผลอส่งข้อความว่า “เออ กูว่างวันนี้แหละ จองห้องพักเลย”…..ลงไปในกลุ่มที่ทำงาน…..ความเขินเริ่มมาเยือน ไม่ชักช้ารีบหาทันทีว่าจะ Unsend ข้อความยังไง บทสรุปสุดท้ายจบที่ว่ามันลบข้อความนั้นไม่ได้ และผมก็ต้องพิมพ์ “ขอโทษครับ ผมส่งผิดกลุ่ม” เป็นตัวเลือกสุดท้าย……

Usability Heuristic 10 ข้อที่ช่วยให้ UI Design ของคุณดีขึ้น — ตอนที่ 2 Fast Read การออกแบบโดยอิงจากโลกความเป็นจริงนั้นจะช่วยให้ผู้ใช้เข้าใจการทำงานของระบบได้ดีขึ้น ไม่ว่าจะเป็นการใช้คำที่สามารถพบเจอได้ในชีวิตประจำวัน การนำเอาหลักการการทำงานของสิ่งของในโลกความเป็นจริงมาปรับใช้กับระบบ ไปจนถึงการจัดวางเนื้อหาให้เหมาะสม การออกแบบระบบที่ดีจะช่วยสะท้อนถึงความเอาใจใส่กับตัวของผู้ใช้ด้วย หลังจากที่ได้เขียนตอนแรกไปแล้ว ในเรื่องของความชัดเจนของระบบ ก็มาต่อกันในตอนที่ 2 ของ Usability Huerisitc…

Usability Heuristic 10 ข้อที่ช่วยให้ UI Design ของคุณดีขึ้น — ตอนที่ 1 Fast Read and Get Summary หากผู้ใช้สามารถรับรู้ได้ว่าสถานะของระบบตอนนี้เป็นอย่างไร ก็จะทำให้พวกเค้าตัดสินใจได้ง่ายขึ้น และการแจ้งสถานะต่าง ๆ ของระบบจะต้องมาในเวลา และรูปแบบที่เหมาะสม หากระบบสามารถสื่อสารออกมาได้ดี ก็จะช่วยสร้างความไว้ใจให้กับผู้ใช้มากขึ้น ในเช้าฝนตกปรอย ๆ ที่แสนน่าเบื่อ ผมนั่งอยู่หลังพวงมาลัยซึ่งติดไฟแดงที่มีตัวเลขนับถอยหลังเรื่อย ๆ ระหว่างนั้นก็มีอีเมลจาก Medium Daily List ส่งเข้ามา มีหัวข้อนึงที่น่าสนใจมากนั่นก็คือ Usability Hueristic สาเหตุที่ทำให้มันน่าสนใจก็คือ มันเป็นสิ่งที่ทำให้เราสามารถเช็คงาน UI Design ของเราเบื้องต้นได้ โดยไม่ต้องเอางานของเราออกไปทำ Usability Test กับคนอื่นเลยแม้แต่น้อย….แต่ แต่ แต่ !! ผมก็ยังแนะนำให้เอา Test…

Mock Data ง่าย ๆ ผ่าน Sketch Data และเครื่องมือในการสร้าง Data Mockup ในการทำ Wireframe หรีอแม้กระทั่งการออกแบบ UI นั้น มีสิ่งหนึ่งที่อาจจะเป็นงานลำบาก หรือเป็นงานที่ค่อนข้างจะเปลืองเวลามาก ๆ นั่นก็คือการทำ Mockup Data ให้กับงานออกแบบของเรา เพื่อให้งานของเราดูสมจริงมากยิ่งขึ้น การ Mock Data คือการที่เรานำข้อมูลจำลอง มาใส่ให้กับส่วนที่ต้องแสดงผลข้อมูลในงานออกแบบ เพื่อให้งานออกแบบของเราดูสมจริงมากยิ่งขึ้น เช่น หน้าโปรไฟล์, หน้า Table เป็นต้น ซึ่งดูเหมือนจะเป็นเรื่องง่าย แต่ความยากในงานนี้เท่าที่ผมเจอมาคือข้อมูลประเภท ชื่อคน และรูปภาพ แน่นอนเจอ List หรือ Table ซัก 10–20 รายการ ก็เริ่มคิดชื่อคน หรือหารูปคนให้มันสมจริงไม่ค่อยได้แล้วครับ…

ทำครั้งเดียวใช้ได้หลาย Screen Size งานแรกของผมในอาชีพของ UI Designer คือออกแบบ UI แอปพลิเคชันบน iOS ผมยังจำได้แม่นเลยว่าในช่วงนั้น iPhone มีประมาณ 3 รุ่นที่ Screen Size ต่างกัน นั่นก็คือ iPhone SE, iPhone 6s และ iPhone 6s Plus ซึ่งในการออกแบบนั้นแน่นอนว่ามันก็ต้องทำทั้ง 3 ขนาดนั่นแหละเพื่อดูว่างานที่เราออกแบบนั้นมันแสดงออกมาได้เหมาะสมกับทั้ง 3 ขนาดไหม แน่นอนว่าโปรแกรมที่ผมใช้ก็คือโปรแกรม Sketch (ในตอนนั้นยังไม่มี Adobe XD) และอย่างที่รู้กันว่าในช่วงนั้นโปรแกรม Sketch ยังไม่มี feature ทีเรียกว่า Resizing Constraints ทำให้ผมต้องมานั่งจัด UI Element เองตามแต่ละขนาดหน้าจอ…

จิตวิทยากับการออกแบบ ตอนที่ 2 คำว่า Safe Zone สำหรับยุคนี้อาจจะไม่ใช่ศัพท์ที่แปลกใหม่ หลาย ๆ คนเข้าใจคำนี้ดีว่ามันคืออะไร ถ้าจะให้อธิบายง่าย ๆ มันคือ การที่เราพอใจกับสิ่งที่เป็นอยู่ และไม่อยากที่จะเปลี่ยนแปลงสิ่ง ๆ นั้น แต่ในบทความนี้จะพาเจาะลึกลงไปอีกว่าอาการเหล่านี้มันคืออะไร มาจากอะไร และใช้กับงานออกแบบได้อย่างไรบ้าง Status Quo Bias คือจิตวิทยาข้อหนึ่งที่บอกไว้ว่า “คนเรานั้นชอบให้ทุก ๆ อย่างคงที่ไม่เปลี่ยนแปลง หรือยึดติดอยู่กับการตัดสินใจเก่า ๆ ที่เคยตัดสินใจไปแล้วในอดีต” คนส่วนมากมองว่าการเปลี่ยนแปลงเป็นเรื่องที่น่ากลัว พวกเค้าคิดว่าหากมีอะไรบางอย่างเปลี่ยนจะต้องมีบางเรื่องที่ไม่ดีเกิดขึ้น อาการนี้จะยิ่งรุนแรงขึ้นตามระดับความสำคัญของการตัดสินใจ ยิ่งผลการตัดสินใจมี Impact มาก ๆ ยิ่งทำให้เกิด Status Quo Bias ได้ง่าย…

เลือกอะไรดี ตอนที่ 3 หากมีข้อมูลอยู่ชุดนึงที่ต้องนำมาแสดงบนแอปพลิเคชันของเรา ซึ่งอาจจะมีทั้งรูป และข้อความต่าง ๆ มากมาย คำถามในใจของ Designer อย่างเราคือ แล้วจะนำเสนอข้อมูลเหล่านั้นออกมาในรูปแบบไหนดี ? ในการนำเสนอข้อมูลนั้น ก็จะมี Pattern พื้นฐานหลัก ๆ อยู่ 2 ตัว คือ Grid View และ List View แน่นอนว่าทั้งสอง Pattern นี้มีจุดประสงค์ในการนำเสนอข้อมูลที่แตกต่างกัน ดังนั้นเรามาดูกันดีกว่าว่าทั้งสองอันนี้ต่างกันอย่างไร ใช้แบบไหน เพื่อเป็นตัวช่วยในการตัดสินใจครับ

จิตวิทยากับการออกแบบ User Interface ตอนที่ 1 ช่วงนี้ผมรู้สึกสนใจในหลักจิตวิทยาของมนุษย์ ก็เลยหาอ่านบทความเกี่ยวกับจิตวิทยาไปเรื่อย ๆ ประจวบเหมาะกับที่กำลังทำงานสายออกแบบด้วย ก็เลยลองเอาหลักจิตวิทยาเหล่านั้นมาปรับใช้กับงานออกแบบดู บทความนี้อยากจะมาแชร์เรื่องจิตวิทยาของมนุษย์และการนำไปประยุกต์ใช้ในงานออกแบบครับ การหลีกเลี่ยงความสูญเสีย หรือที่เค้าเรียกกันว่า Loss Aversion คือ พฤติกรรมที่มนุษย์เราจะพยายามหลีกหนีการสูญเสีย มากกว่าที่จะพยายามเสี่ยงเพื่อให้ได้ผลตอบแทนที่เยอะ ๆ เพราะลึกลงไปในจิตใจเรานั้น อำนาจของความสูญเสียมีผลต่อจิตใจมากกว่าอำนาจของการได้มาถึง 2 เท่าเลยทีเดียว ถ้าหากว่าเรามีโอกาสได้ กับโอกาสเสีย 50:50 เท่ากัน คนส่วนมากเลือกที่จะได้ แม่ว่าโอกาสเสียจะให้ผลตอบแทนที่มากกว่าก็ตาม ดังนั้นทฤษฎีนี้จึงนำไปสู่ทฤษฎีหลีกเลี่ยงความเสี่ยงด้วยเช่นกัน…

เรากำลังทำอะไร ? เพื่อใคร ? แล้วทำไปทำไม ? น่าจะเป็นความโชคดีของผม ที่เริ่มทำงานในบริษัท Start Up ขนาดไม่ใหญ่มาก และทีมที่ทำงานก็มี Mindset แบบคนรุ่นใหม่จ๋ากันเลยทีเดียว ผมเข้าทำงานครั้งแรกในตำแหน่งของ UI Designer เนื่องจากทีมมีขนาดเล็ก ทำให้ทีม Tech และ C Level ทำงานกันใกล้ชิดมาก และทุกครั้งที่เราอยากได้ Feature อะไรนั้น เราจะคุยกันเหมือนกับการเล่าเรื่อง จึงทำให้ทุกคนในบริษัทมองเห็นภาพเดียวกันว่าเรากำลังทำอะไรอยู่ และทำไปเพื่ออะไร