Tag: รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่ (ตอนที่ 3 จบ)

สำหรับผู้ที่ต้องการอ่านบทความก่อนหน้านี้ ตามลิงค์ด้านล่างได้เลยครับ:
รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่ (ตอนที่ 1)
รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่ (ตอนที่ 2)

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

แนวคิดที่ 21 : Try Exposing Options instead of hiding them.
_____แนวคิดนี้กล่าวถึงการนำเอา DropdownList มาใช้สำหรับให้ผู้ใช้เลือกตัวเลือกสำคัญๆในหน้าจอนั้น อาจทำให้ผู้ใช้เลือกตัวเลือกไม่ตรงตามที่ต้องการหรือเกิดข้อผิดพลาดจากการคลิก ทำให้ข้อมูลที่ได้ไม่ตรงตามต้องการ หรือส่งผลให้เป็นการโน้มน้าวใจผู้ใช้ให้เลือกตัวเลือกที่ถูกตั้งค่าเริ่มต้นกรณีที่ผู้ใช้ยังตัดสินใจไม่ได้ หรือในกรณีตัวเลือกที่มีให้เลือกนั้นมีจำนวนน้อย นอกจากการใช้ Dropdownlist ก็อาจเปลี่ยนมาใช้ Radio Button แทนได้ จะทำให้ผู้ใช้สามารถเห็นตัวเลือกได้อย่างชัดเจน ลดขั้นตอนในการทำงานของผู้ใช้ได้อีกด้วย DropdownList จึงเหมาะกับกรณีที่มีตัวเลือกที่หลากหลายมากกว่า

แนวคิดที่ 22 : Try Showing State instead of being state agnostic.
_____ในหัวข้อที่ผ่านมาได้มีการกล่าวถึงการออกแบบให้รองรับสำหรับการแสดงผลแบบตารางกรณีที่ไม่มีค่าข้อมูลหรือเท่ากับ 0 นั้นเอง ซึ่งในหัวข้อนี้จะกล่าวถึงการออกแบบสำหรับกรณีที่มีข้อมูลที่นอกจากจะนำข้อมูลมาแสดงผลแล้ว การแจ้งสถานะของข้อมูลในแต่ละรายการ ก็เป็นส่วนหนึ่งที่จะช่วยให้ผู้ใช้รับทราบถึงผลการทำงานได้ เช่นการแสดงผลของรายการอีเมล์พร้อมทั้งแสดงสถานะว่าอ่านแล้วหรือยังไม่อ่าน รายการเรียกเก็บภาษีพร้อมแสดงสถานะว่ารายการนี้ชำระแล้ว เป็นต้น ส่งผลให้ผู้ใช้รู้ว่าควรจะดำเนินการส่วนไหนต่อ หรือสิ่งที่ได้กระทำลงไปนั้นได้ผลลัพธ์เป็นเช่นไร

แนวคิดที่ 23 : Try Direct Manipulation instead of contextless menus.
_____ก่อนหน้านี้มีแนวคิดเกี่ยวกับการให้รวมเมนูต่างๆที่ซ้ำกัน มาไว้ในที่เดียวกันทั้งหมด เพื่อผู้ใช้จะสะดวกในการเรียกใช้เมนู แต่ในกรณีของแนวคิดนี้จะเป็นการให้เราแยกเมนูต่างๆลงไปยังรายการนั้นๆ เมื่อข้อมูลในแต่ละรายการ มีการเรียกใช้เมนูที่ไม่เหมือนกันหรือผู้ใช้สามารถจัดการกับข้อมูลแต่ละรายการได้มากน้อยไม่เท่ากัน การออกแบบให้เมนูอยู่คู่กับรายการจึงเป็นสิ่งที่ทำให้ผู้ใช้ไม่สับสนได้ว่าทำไมบางรายการถึงกดใช้เมนูในแถบเมนูไม่ได้ และลดขั้นตอนที่ผู้ใช้ต้องทำการเลือกรายการก่อนถึงจะไปเรียกใช้เมนูได้ ถามว่าแนวคิดไหนผิด ผู้เขียนขอตอบว่าไม่มีแบบไหนผิด แต่ขึ้นอยู่กับการนำไปใช้งานมากกว่าครับ

แนวคิดที่ 24 : Try Opt-Out instead of opt-in.
_____ในการออกแบบเงื่อนไขแบบ 2 ตัวเลือกนั้น ปัจจุบันส่วนใหญ่นักออกแบบจะใช้ Checkbox มาใช้ในการเลือกเงื่อนไขกันอย่างแพร่หลาย เช่น ให้ติ๊กยอมรับผล หรือให้ติ๊กถ้าต้องการอีเมล์ตอบรับจากระบบ เป็นต้น แต่ในความเป็นจริงแล้ว การที่เราออกแบบโดยใช้ Checkbox จะทำให้ผู้ใช้เสียโอกาสต่างๆพอสมควรและเป็นการแสดงตัวเลือกได้ไม่ชัดเจนนักเนื่องจากบางครั้งผู้ใช้อาจลืมไม่ได้เลือกติ๊กรายการต่างๆ การเปลี่ยนมาใช้ Radio Button เราจะสามารถทราบถึงผลลัพธ์ ที่แน่นอนกว่าและลดกรณีที่ผู้ใช้ลืมไม่ได้ติ๊กเลือกรายการที่ต้องการได้ และไม่เป็นการเอารัดเอาเปรียบผู้ใช้อีกด้วย

แนวคิดที่ 25 : Try Smart Defaults instead of asking to do extra work.
_____มาตั้งค่าเริ่มต้นกันเถอะ เมื่อพูดถึงค่าเริ่มต้นในการกรอกข้อมูลแล้ว อาจเป็นสิ่งที่ทำได้ค่อนข้างยาก ยิ่งเป็นระบบที่กลุ่มผู้ใช้หลากหลาย การกำหนดค่าเริ่มต้นจึงทำได้ยากมาก โดยส่วนใหญ่จะยึดค่าเริ่มต้นตามกลุ่มผู้ใช้งานส่วนใหญ่ ซึ่งค่าเหล่านี้ต้องได้มาจากการรวบรวมข้อมูลของกลุ่มผู้ใช้และใช้ประสบการณ์ของผู้ออกแบบมากพอสมควร ซึ่งข้อนี้ผู้เขียนคิดว่าต้องระวังเป็นพิเศษ ถ้าออกแบบมาดีตรงตามกลุ่มผู้ใช้ส่วนใหญ่ ก็จะส่งผลให้ผู้ใช้สะดวกสบายในการกรอกข้อมูลยิ่งขึ้นไปด้วย แถมเป็นการลดเวลาในการใช้งานระบบไปในตัว แต่ถ้าออกแบบมาไม่ดี จะส่งผลให้ผู้ใช้เสียเวลามากขึ้นตามไปด้วยเช่นกัน

แนวคิดที่ 26 : Try Inline Validation instead of delaying errors.
_____การกรอกข้อมูลมักจะมาคู่กับการออกแบบเงื่อนไขเพื่อรองรับความผิดพลาดจากการกรอกข้อมูล ซึ่งผู้ออกแบบสามารถใช้เครื่องมือ Validater มาช่วยในการตรวจสอบข้อมูลตามเงื่อนไขที่เราต้องการได้ และเมื่อผู้ใช้งานกรอกข้อมูลไม่ตรงตามเงื่อนไข ก็ควรที่จะแจ้งเตือนความผิดพลาดทันทีเมื่อจบการทำงานในส่วนของการกรอกข้อมูลช่องนั้นๆ แทนการแจ้งเตือนความผิดพลาดทั้งหมดภายหลัง เพื่อผู้ใช้ไม่ต้องเสียเวลาในการย้อนกลับมาตรวจสอบข้อมูลว่าส่วนไหนของรายการที่ผิดพลาดไป และลดความกลัวหรือกังวลให้กับผู้ใช้ได้กรณีที่ผู้ใช้ทราบผลการแจ้งเตือนของข้อมูลที่ผิดพลาดหลายรายการพร้อมๆกัน

แนวคิดที่ 27 : Try Forgiving Inputs instead of being strict with data.
_____แนวคิดนี้ต่อเนื่องมาจากข้อก่อนหน้านี้ที่พูดถึงการตั้งค่าเงื่อนไขเพื่อตรวจสอบข้อมูลที่ผู้ใช้กรอกเข้าสู่ระบบ ซึ่งควรออกแบบให้มีความหลากหลายในการกรอกข้อมูลแทนที่การจำกัดเงื่อนไขในการกรอกแบบตายตัว ซึ่งจะทำให้ผู้ใช้รู้สึกไม่เป็นมิตรกับระบบได้ แต่การออกแบบให้รองรับการกรอกข้อมูลหลายรูปแบบนั้น ค่อยข้างจะทำได้ยากและเสียเวลาในส่วนของการพัฒนาโปรแกรม เช่นการกรอกข้อมูลเบอร์โทรศัพท์ รูปแบบในการกรอกค่อนข้างมีหลากหลาย ไม่ว่าจะใส่วงเล็บ ใส่เครื่องหมายขีดกลาง แม้กระทั้งเว้นวรรคระหว่างกลุ่มตัวเลข ในด้านการเขียนโปรแกรมอาจเขียนได้ยากพอสมควร แต่สำหรับด้านการใช้งานถือว่าเป็นการอำนวยความสะดวกและลดเวลาในการกรอกข้อมูลแก่ผู้ใช้ได้เช่นกัน

แนวคิดที่ 28 : Try Progressive Disclosure instead of overwhelming.
_____ในการออกแบบแบบสอบถามผ่านระบบนั้น ผู้ออกแบบไม่ควรสร้างแบบสอบถามที่แสดงคำถามทั้งหมดให้ผู้ใช้ตอบถึงแม้บางเงื่อนไข ผู้ใช้ไม่จำเป็นที่จะตอบคำถามในข้อนั้นๆ หรือคำถามดังกล่าวไม่เกี่ยวข้องกับผู้ใช้เลย การออกแบบให้การตอบคำถามข้อนั้นๆเป็นการนำไปสู่คำถามข้อถัดไปจะช่วยลดคำถามที่ไม่จำเป็นกับผู้ใช้ได้ ส่งผลให้ผู้ใช้ไม่เกิดความสับสนหรือรู้สึกไม่ดีกับการตอบแบบสอบถาม

แนวคิดที่ 29 : Try Useful Calculations instead of asking to do math.
_____แนวคิดนี้เป็นตัวช่วยที่เอื้ออำนวยความสะดวกให้กับผู้ใช้ได้คล้ายๆกับกรณีที่ให้มีการแจ้งเตือนสถานะของรายการข้อมูล โดยจะกล่าวถึงการคำนวนค่าต่างๆที่สามารถทำได้ในระบบให้ผู้ใช้ทราบได้ เช่นการแจ้งเตือนหมดอายุการเป็นสมาชิกในรายการต่างๆ การบอกระยะเวลาของอีเมล์ที่ได้รับแทนการบอกเป็นวันเวลาแบบตรงๆซึ่งผู้ใช้ต้องเสียเวลาในการคิดคำนวนว่าอีเมล์ดังกล่าวมาถึงนานแล้วหรือไม่ เราอาจนำเอาแนวคิดก่อนหน้านี้มาใช้ร่วมกันได้ เพื่อเพิ่มความสะดวกสบายให้แก่ผู้ใช้งานมากยิ่งขึ้น

แนวคิดที่ 30 : Try Responsive Layouts instead of static ones.
_____เนื่องด้วยปัจจุบันความก้าวหน้าทางเทคโนโลยีและการให้บริการอินเตอร์เน็ตความเร็วสูงมีการพัฒนาอย่างต่อเนื่อง การเข้าถึงข้อมูลข่าวสารเป็นไปได้อย่างรวดเร็วและทั่วถึง รวมถึงในปัจจุบันได้มีเครื่องมือสื่อสารหลายขนาดและรูปแบบ ไม่ว่าจะเป็นโทรศัพท์ Tablet หรือแม้แต่โทรทัศน์เองก็สามารถใช้งานอินเตอร์เน็ตได้เช่นกัน ซึ่งมีคุณสมบัติที่แตกต่างกันออกไป เช่น ความกว้าง ความสูง ความละเอียดหน้าจอ เป็นต้น ทำให้การออกแบบหน้าจอต้องคำนึงถึงการแสดงผลที่รองรับกับอุปกรณ์ต่างๆเช่นกันแทนการออกแบบให้หน้าจอแสดงผลได้เพียงบนคอมพิวเตอร์อย่างเดียว ส่งผลให้ผู้ใช้ได้รับความสะดวกสบายในการใช้งานไม่ว่าจากคอมพิวเตอร์หรือโทรศัพท์ก็ตาม

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

ขอบคุณครับ

ใครยังไม่ได้อ่านตอนที่ 1 แนะนำให้อ่านก่อนครับ ที่: รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่ (ตอนที่ 1)

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

แนวคิดที่ 11 : Try Merging Similar Functions instead of fragmenting the UI.
_____แนวคิดนี้จะพูดถึงการจัดกลุ่มเมนูหรือลิงค์ที่มีการทำงานไปยังส่วนเดียวกันหรือเปิดไปทำงานในอีกหน้าจอ การออกแบบให้สิ่งเหล่านี้กระจายไปอยู่ตามจุดต่างๆของหน้าจอ อาจทำให้ดูเหมือนเข้าถึงได้ง่าย แต่จริงๆแล้วกลับส่งผลให้หน้าจอดูรกขึ้นมาโดยทันที และอาจจะทำให้ผู้ใช้งานสับสนได้กับเมนูที่มีซ้ำกันในหน้าจอ การย้ายเมนูหรือลิงค์ดังกล่าวมาอยู่รวมกันเป็นเมนูเดียวหรือสร้างเป็นเมนูย่อยจะทำให้หน้าจอของเรามีพื้นที่ใช้งานมากขึ้นด้วยครับ

แนวคิดที่ 12 : Try Repeating Your Primary Action instead of showing it just once.
_____สำหรับนักออกแบบ UI หลายท่าน การออกแบบให้มีปุ่มหรือลิงค์หลักกับผู้ใช้เพียงจุดเดียวเป็นสิ่งที่ดูเหมาะสมแล้ว แต่เมื่อนำไปใช้งานจริงบางกรณีอาจทำให้ผู้ใช้งานหน้าจอไม่สะดวกในการใช้งาน มักจะเกิดกับหน้าจอที่มีข้อมูลมากส่งผลให้เกิดสกอร์บาร์ขึ้น เมื่อผู้ใช้งานเลื่อนหน้าจอขึ้นลง ปุ่มหรือลิงค์หลักอาจหายไปจากหน้าจอได้ ส่งผลให้ผู้ใช้งานต้องเลื่อนหน้าจอไปมาเพื่อที่จะกลับไปกดปุ่มหรือลิงค์ดังกล่าว กรณีนี้ควรเพิ่มปุ่มหรือลิงค์ขึ้นมาในส่วนล่างสุดและบนสุดของหน้าจอ โดยปุ่มหรือลิงค์ดังกล่าวควรมีหน้าตาที่เหมือนหรือคล้ายกันเพื่อไม่ให้ผู้ใช้เกิดความสับสน

แนวคิดที่ 13 : Try Suggesting Continuity instead of false bottoms.
_____จากที่กล่าวไปแล้วก่อนหน้านี้ในการออกแบบรูปแบบการแสดงผลของบทความแบบคอลัมน์เดียวนั้น กรณีที่บทความนั้นยาวมาก หรือเป็นบทความหลายๆเรื่องต่อๆกันไปนั้น ผู้ออกแบบหน้าจอควรมีการเพิ่มช่องว่างหรือลำดับที่บอกถึงการเปลี่ยนแปลงของบทความเมื่อมีการขึ้นเรื่องใหม่หรือย่อหน้าใหม่ แทนการออกแบบให้บทความนั้นๆยาวต่อกันไปเรื่อยๆ เมื่อผู้ใช้เข้ามาอ่านบทความแล้วจะได้ไม่เกิดความสับสนหรือหาจุดที่อ่านต่อไม่เจอเมื่อมีการเลื่อนสอร์บาร์ แต่ข้อควรระวังคือ อย่าใส่ช่องว่างระหว่างบทความมากจนเกินไป จนทำให้ผู้ใช้รุ้สึกว่าบทความนั้นๆจบแล้ว

แนวคิดที่ 14 : Try Visual Hierarchy instead of dullness.
_____แนวคิดนี้เป็นอีกวิธีหนึ่งที่น่าสนใจในการออกแบบหน้าจอแสดงผลบทความแบบคอมลัมน์เดียว คือการจัดตัวนำสายตาหรือก็คือการจัดหน้าจอแบบการย่อหน้าเป็นลำดับชั้น ถ้านึกภาพไม่ออกให้นึกถึงการใส่เลขที่หัวข้อข้อย่อยในเอกสารจำพวก MS Word จะมีการเลื่อนระดับย่อหน้าเข้าไปเรื่อยๆตามลำดับชั้นที่เล็กลงไป วิธีนี้จะง่ายกับผู้ที่กำลังอ่านบทความได้ เพราะผู้อ่านจะรับรู้ได้ว่าบทความนี้จะจบลงที่ส่วนไหนของหน้าจอและผู้ใช้อาจไม่ต้องเรียนรู้เพิ่มเติมเลย เราสามารถนำวิธีการนี้ไปใช้ร่วมกับการออกแบบในข้อก่อนหน้านี้ได้

แนวคิดที่ 15 : Try Grouping Related Items instead of disordering.
_____การจัดกลุ่มรายการเครื่องมือการใช้งานพื้นฐานก็เป็นอีกสิ่งหนึ่งที่จำเป็นสำหรับการออกแบบเพื่อผู้ใช้โดยเฉพาะ ซึ่งการจัดกลุ่มควรยึดตามหลักพื้นฐานทั่วไปในชีวิตประจำวัน เช่นส้อมต้องคู่กับช้อน เป็นต้น หรือจัดกลุ่มตามประสบการ์ณการทำงานของผู้ใช้ เพราะเป็นสิ่งที่ผู้ใช้เข้าใจได้โดยไม่ต้องเรียนรู้เพิ่มเติม การจัดกลุ่มและเรียงลำดับเครื่องมือจึงช่วยให้ผู้ใช้เข้าใจการทำงานของเครื่องมือๆนั้นได้มากขึ้นและสะดวกยิ่งขึ้น

แนวคิดที่ 16 : Try Thanking instead of simply confirming completion.
_____การขอบคุณดูเป็นเรื่องปกติทั่วไป แต่เมื่อนำมาใช้ใน UI ของเราจะเป็นสิ่งหนึ่งที่ช่วยยกระดับ UI ของเราให้ดูดียิ่งขึ้น โดยให้มีการออกแบบการแสดงผลข้อความขอบคุณเมื่อผู้ใช้มีการกระทำบางอย่างที่เราต้องการในหน้าจอนั้นๆ นอกจากการแสดงผลรับหรือรายงานผลว่าเสร็จสิ้นแล้ว การเพิ่มข้อความขอบคุณผู้ใช้ จะทำให้ผู้ใช้เกิดความรู้สีกว่าตัวเองมีคุณค่าและได้รับความสนใจจากระบบของเรา ส่งผลให้ความรู้สึกของผู้ใช้ต่อระบบในแง่ดีเพิ่มมากขึ้นตามไปด้วย และเป็นการกระตุ้นให้ผู้ใช้กลับมาใช้งานระบบของเราอีกครั้ง

แนวคิดที่ 17 : Try Softer Prompts instead of modal windows.
_____Popup ถือเป็นส่วนหนึ่งในการตอบโต้กับผู้ใช้ ซึ่งผู้เขียนได้กล่าวถึงไปแล้วในข้อก่อนหน้านี้ ซึ่งในปัจจุบัน popup ที่นักออกแบบนิยมใช้งานกันอย่างแพร่หลายก็คงไม่พ้น modal popup ข้อดีของมันคือไม่มีการเรียกใช้จาวาสคริปแบบ popup รุ่นก่อนๆส่งผลให้รองรับการทำงานทุกเบราเซอร์และจุดเด่นอีกอย่างคือการล๊อคหน้าจอไม่ให้ผู้ใช้งานทำงานในส่วนของเบื้องหลังได้กรณีที่ popup ทำงานอยู่ แต่จุดเด่นข้อนี้จะกลายเป็นข้อเสียทันทีเมื่อเรานำไปใช้แบบผิดวิธี เช่นการ popup ให้กรอกข้อมูล ที่มีความเกี่ยวเนื่องกับข้อมูลที่อยู่ด้านหลัง popup ซึ่งส่งผลให้ผู้ใช้ย้อนไปดูข้อมูลหรือนำข้อมูลดังกล่าวมาอ้างอิงในการตัดสินใจได้ หรือกรณี popup ทำการแจ้งเตือนอัตโนมัติเมื่อผู้ใช้ไม่ทำการบันทึกข้อมูลเป็นเวลานานๆ หรือผู้ใช้ที่กำลังจดจ่อกับการกรอกข้อมูลหรือกำลังทำงานบางอย่างกับหน้าจออยู่ เมื่อมีการแสดผล popup ขึ้นมา จะเป็นการรบกวนสมาธิหรือขัดจังหวะผู้ใช้งานได้ ส่งผลให้ผู้ใช้งานไม่พอใจหรือตกใจได้ ดังนั้นการนำ popup ประเภทนี้ไปใช้งาน ผู้ออกแบบควรพิจารณาว่าเหมาะสมกับหน้าจอนั้นๆด้วยหรือไม่

แนวคิดที่ 18 : Try Expectation Setting instead of being ignorant.
_____การออกแบบหน้าจอให้มีการแจ้งเตือนสถานะของผู้ใช้ในปัจจุบันหรือการแสดงให้ผู้ใช้ทราบว่ากำลังทำงานอยู่ในขั้นตอนไหน และยังเหลืออีกกี่ขั้นตอน หรืออาจออกแบบไปถึงขั้นตอนที่บอกว่าจะได้อะไรในการทำงานในหน้าจอนี้ ส่งผลให้ผู้ใช้งานระบบรู้ถึงจุดประสงค์ของการทำงานในแต่ละขั้นตอนหรือหน้าจอได้ และยังทำให้ผู้ใช้ไม่รู้สึกเป็นกังวลว่ายังเหลือสิ่งที่ต้องทำอีกมากน้อยเพียงใดหรือทำไปเพื่ออะไร

แนวคิดที่ 19 : Try Providing Feedback instead of silence.
_____สำหรับแนวคิดนี้ อาจจะดูเป็นเรื่องที่ขาดไม่ได้ในการออกแบบหน้าจอ เพื่อใช้ในการตอบโต้กับผู้ใช้ ทำให้ผู้ใช้รู้สึกว่าระบบมีความเป็นมนุษย์มากขึ้น ซ้ำยังช่วยให้ผู้ใช้ทราบถึงผลลัพธ์จากการกระทำบางอย่างของผู้ใช้ด้วย เช่นเมื่อมีการบันทึกหรือลบข้อมูล หลังจากทำกระบวนการเสร็จสิ้นแล้ว ก็ควรมีข้อความแจ้งเตือนบอกผู้ใช้ให้ทราบถึงผลลัพธ์ว่าสำเร็จลุล่วงหรือไม่ เป็นต้น ส่วนรูปแบบการแสดงผลตอบสนองกับผู้ใช้ก็สามารถออกแบบได้หลายรูปแบบไม่ว่าจะเป็น ในส่วนของ popup หรือแถบข้อความแจกเตือนในหน้าจอ

แนวคิดที่ 20 : Try Explaining instead of assuming the obvious.
_____แนวคิดข้อนี้จะพูดถึงเกี่ยวกับการใช้คำแนะนำมาช่วยขยายความหัวข้อของการกรอกฟอร์มข้อมูล โดยปกติการออกแบบฟอร์มกรอกข้อมูลจะประกอบไปด้วยส่วนของหัวข้อและส่วนของกล่องข้อความหรือเครื่องมืออื่นๆเช่น dropdownlist checkbox เป็นต้น เพื่อทำให้ฟอร์มนั้นๆดูกระชับน่าใช้งาน แต่บางครั้งคำที่เรานำมาเขียนเป็นหัวข้อนั้นเราคิดว่าอธิบายความหมายหรือสิ่งที่เราต้องการได้หมดครบถ้วนแล้ว แต่สำหรับผู้ใช้บางคำอาจทำให้เกิดความสับสนหรือเข้าใจผิด ส่งผลให้ข้อมูลที่ได้มาจากฟอร์มอาจผิดพลาด การใช้คำมาช่วยอธิบายเพิ่มเติมหรือเขียนเป็นคำถามปลายเปิด จะช่วยให้ผู้ใช้เข้าใจสิ่งที่เราต้องการจากผู้ใช้มากขึ้น

---

สำหรับบทความชุด “รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่” ตอนที่ 2 ขอจบแต่เพียเท่านี้ สามารถอ่านตอนที่ 3 ได้ตามลิงคด้านล่างเลยครับ

รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่ (ตอนที่ 3 จบ)

ขอบคุณครับ

     ปัจจุบันในการทำงานด้าน IT นั้น ผู้ทำงานต้องมีความสามารถหลายๆด้านเพื่อให้รองรับกับงานที่ได้รับ โดยงานส่วนใหญ่ก็คือการพัฒนาเว็บไซต์เป็นหลัก ซึ่งทำตั้งแต่เก็บ Requirement จนถึงส่งมอบลูกค้า ปัญหาใหญ่ของคนที่เป็นโปรแกรมเมอร์  เวลาทำเว็บไซต์ / แอพ คือจะขาดเซ้นส์ด้านดีไซน์  ไม่ว่าจะลองออกแบบยังไงก็เลือกสีได้ไม่โดน เลือกฟ้อนต์ได้ไม่สวยสักที หน้าจอผสมกันออกมาดูเละเทะ

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

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

แนวคิดที่ 1 : Try A One Column Layout instead of multicolumns.
_____การจัดรูปแบบบทความให้มีเพียงคอลัมน์เดียวจะช่วยทำให้เราสามารถควบคุมความต่อเนื่องของบทความได้ดี ช่วยอำนวยความสะดวกและสามารถกำหนดทิศทางการอ่านบทความของผู้อ่านได้อย่างแม่นยำ เนื่องจากมีเพียงการเลื่อนขึ้นและลงเท่านั้น ในขณะที่การจัดบทความแบบหลายคอลัมน์จะทำให้ผู้อ่านเกิดความสับสน ส่งผลให้ผู้อ่านเสียสมาธิหรือหมดความสนใจในบทความดังกล่าวได้

แนวคิดที่ 2 : Try Distinct Clickable/Selected Styles instead of blurring them.
_____ในการออกแบบหน้าจอโดยเฉพาะส่วนของ links, buttons สิ่งที่กำลังถูกเลือก(chosen items) และข้อความ(text)หรือบทความ(content) ควรออกแบบให้ไปในรูปแบบเดียวกันหมดทุกๆหน้าจอ เพื่อช่วยให้ผู้ใช้งานไม่สับสนหรือต้องทำความเข้าใจเพิ่มเติมในรูปแบบพื้นฐานที่ได้ออกแบบไว้ ดังตัวอย่างภาพทางด้านซ้าย โดยผู้ออกแบบเลือกสีฟ้าแทนในส่วนของ links, buttonsและสีดำแทนส่วนที่กำลังถูกเลือก(chosen items) และสีเทาแทนข้อความโดยในแต่ละองค์ประกอบใช้รูปแบบเดียวกันภายในองค์ประกอบนั้น ส่วนในภาพทางด้านขวา เป็นการเลือกสีและรูปแบบที่หลากหลายในองค์ประกอบเดียวกันซึ่งจะส่งผลให้ผู้ใช้สับสนกับหน้าจอดังกล่าวได้

แนวคิดที่ 3 : Try More Contrast instead of similarity.
_____การเพิ่มความน่าสนใจหรือการยกระดับความคมชัดในส่วนขององค์ประกอบสำคัญๆส่งผลให้เกิดความแตกต่างจากองค์ประกอบรวมอื่นๆในหน้าจอจะเป็นการยกระดับ UI ของคุณให้มีประสิทธ์ภาพมากขึ้น ไม่ว่าจะเป็นการใช้โทนสีที่เข้มขึ้น การไล่เฉดสีหรือการใส่เงาให้กับองค์ประกอบนั้นๆทำให้ผู้ใช้งานรับรู้ถึงองค์ประกอบสำคัญนั้นได้ทันทีจากการเข้าใช้งาน ช่วยให้ผู้ใช้งานสะดวกและเข้าใจการทำงานของหน้าจอได้ง่ายยิ่งขึ้น

แนวคิดที่ 4 : Try Fewer Borders instead of wasting attention.
_____การจัดรูปแบบองค์ประกอบโดยใช้เส้นเป็นอีกสิ่งหนึ่งที่มีการนำมาใช้เพื่อเพิ่มจุดน่าสนใจให้กับตัวUI ทั้งยังสามารถนำมาจัดหรือแบ่งขอบเขตของกลุ่มองค์ประกอบในหน้าจอได้อย่างชัดเจน จนบางครั้งนักออกแบบก็ใช้งานการจัดองค์ประกอบแบบนี้มากจนเกินจำเป็นไปในแต่ละส่วนของหน้าจอส่งผลให้กลุ่มองค์ประกอบนั้นถูกตัดขาดออกจากกันอย่างสิ้นเชิงและทำให้การควบคุมทิศทางของหน้าจอผิดจากที่ได้ตั้งเอาไว้ ดังนั้นการเลือกใช้เส้น ควรใช้แค่พอจำเป็นจนไม่ทำให้หน้าจอดูรกจนเกินไป เราอาจจะใช้วิธีอื่นๆมาช่วยในการจัดกลุ่มองค์ประกอบได้ ไม่ว่าจะใช้ช่องว่างระหว่างกลุ่มองค์ประกอบ การเน้นตัวอักษรหรือสีเป็นต้น

แนวคิดที่ 5 : Try Designing For Zero Data instead of just data heavy cases.
_____โดยทั่วไปแล้วเรามักจะออกแบบหน้าจอให้รองรับกับการแสดงข้อมูล ไม่ว่าเป็น 1, 10, 100 หรือเป็น 1000 ข้อมูลโดยบางทีเราอาจลืมออกแบบสำหรับกรณีที่ข้อมูลเป็น 0 ส่งผลให้เวลาแสดงหน้าจอ อาจเป็นหน้าจอว่างๆหรือมีการแจ้งเตือนว่าไม่พบรายการหรือข้อมูล โดยสำหรับนักออกแบบแล้วอาจคิดว่าไม่ส่งผลกระทบใดๆกับหน้าจอมากนัก แต่สำหรับผู้ใช้งานระบบที่เจอหน้าจอที่ว่างเปล่าแล้วอาจเกิดข้อสงสัยได้ว่าเกิดอะไรขึ้นหรือเกิดความสับสนว่าจะทำอะไรในขั้นตอนต่อไป ดังนั้นการออกแบบในส่วนของกรณีที่ไม่พบข้อมูลหรือรายการ อาจใส่ข้อความอธิบายถึงสาเหตุที่ทำให้ไม่พบข้อมูลหรือแนะนำขั้นตอนที่จะทำให้เกิดข้อมูลต่างๆได้ ส่งผลให้ผู้ใช้ไม่สะดุดและสะดวกกับการใช้งานระบบได้มากยิ่งขึ้น

แนวคิดที่ 6 : Try Conventions instead of reinventing the wheel.
_____การสื่อสารกับผู้ใช้ถือเป็นอีกส่วนที่มีความสำคัญในการออกแบบหน้าจอ ซึ่งในการออกแบบนั้น เราควรออกแบบให้สอดคล้องกับการใช้งานของผู้ใช้ระบบหรือความเคยชินที่ผู้ใช้เคยได้ทำมาโดยตลอด ส่งผลให้หน้าจอที่ได้ออกแบบไว้ตอบสนองความต้องการและลดเวลาในการเรียนรู้หน้าจอเพิ่มเติม ซึ่งโดยทั่วไปแล้วจะมีรูปแบบหลักๆอยู่พอสมควร เช่นการให้มีปุ้มปิดหน้าจอมุมบนขวา ปุ่มกดถัดไปอยุ่ด้านขวาและย้อนกลับอยู่ด้านซ้าย สัญลักษณ์รูปเฟืองสื่อถึงการตั้งค่า เป็นต้น

แนวคิดที่ 7 : Try Bigger Click Areas instead of tiny ones.
_____จากหัวข้อที่ 3 นี้ก็เป็นอีกแนวคิดหนึ่งที่จะเพิ่มความน่าสนใจให้กับองค์ประกอบประเภท links, buttons ได้ คือการเพิ่มขยายหรือขอบเขตในการกดองค์ประกอบนั้นๆ เพราะในปัจจุบัน หน้าจอที่ได้ออกแบบไว้ถูกนำไปใช้งานในอุปกรณ์ที่หลากหลายมากขึ้นการออกแบบให้สิ่งเหล่านี้มีขนาดที่เหมาะสมในหน้าจอหนึ่ง อาจจะไม่สะดวกที่จะใช้งานในอีกหน้าจอหนึ่ง หรือการออกแบบให้ปุ่มกดหรือลิงค์เล็กจนเกินไป อาจส่งผลให้ผู้ใช้ไม่สะดวกกับการหาหรือกดสิ่งเหล่านั้นได้การขยายขนาดหรือขอบเขตของการกดจะช่วยให้ผู้ใช้สะดวกมากอีกขึ้น และยังมีวิธีการเพิ่มข้อความให้มีความยาวมากขึ้น หรือใช้ไอคอนร่วมกับข้อความ เป็นต้น

แนวคิดที่ 8 : Try Icon Labels instead of opening for interpretation.
_____ถ้าพุดถึงเรื่องของไอคอนแล้ว ไอคอนมีส่วนช่วยให้หน้าจอของเราดูดีขึ้นได้และยังทำให้ผู้ใช้งานสามารถเข้าใจถึงการทำงานของไอคอนนั้นได้เกือบทันที แต่ในบางครั้งกลุ่มผู้ใช้งานบางกลุ่ม อาจจะไม่สามารถตีความหมายของไอคอนตามวัตถุประสงค์การใช้งานที่เราได้ออกแบบเอาไว้ หรือไอคอนที่เรานำมาใช้ อาจไม่แสดงความหมายได้คลุมเครือ ดังนั้นวิธีที่จะช่วยให้ไอคอนสามารถแสดงวัตถุได้อย่างชัดเจนคือการเพิ่มข้อความควบคู่ไปกับตัวไอคอนด้วย จะทำให้ผู้ใช้งานหน้าจอเข้าใจได้ทันทีและไม่สับสนกับความหมายที่จะสื่อถึง และบางกรณีไอคอนที่นำมาใช้อาจเล็กหรือสีที่ใช้ดูกลมกลืนไปกับองค์ประกอบอื่นๆ การใส่ข้อความจึงเป็นการช่วยให้ไอคอนดูคมชัดมากขึ้น

แนวคิดที่ 9 : Try Natural Language instead of dry text.
_____แนวคิดข้อนี้ออกจะแปลกตาสำหรับผู้เขียนสักหน่อย เพราะเป็นการนำภาษาธรรมชาติ (ภาษาพูด)มาใช้เป็นคำอธิบายแทนการใช้คำทางการหรือราชการที่ปัจจุบันเราใช้กันอย่างแพร่หลาย ซึ่งการนำภาษาธรรมชาติมาใช้ช่วยเขียนคำชี้แจ้ง จะทำให้ผู้ใช้เข้าใจถึงจุดหมายที่ผู้ใช้จะต้องกระทำกับหน้าจอ แต่ในเว็บไซต์ที่ใช้งานในเชิงราชการ อาจดูไม่ค่อยเหมาะสมหรือไม่เป็นที่ชอบใจของผู้ใช้งานได้ ข้อนี้จึงขึ้นอยู่กับว่าเราจะไปใช้ในลักษณะไหน มากน้อยเพียงไหนขึ้นอยุ่กับกลุ่มผู้ใช้งานระบบด้วย แต่อาจนำมาใช้ผสมกับคำที่เป็นทางการในบางจุดได้ เพื่อให้ผู้ใช้งานเข้าใจมากขึ้นและไม่ดูน่าเกลียดจนเกินไป แต่ในอนาคตอาจการเป็นที่นิยมแทนการใช้คำทางราชการก็เป็นได้

แนวคิดที่ 10 : Try Extra Padding instead of overcrowding elements.
_____ช่องว่างสำคัญไฉน เมื่อพูดถึงช่องว่างนักออกแบบบางท่านอาจบอกว่าไม่ค่อยสำคัญมากนัก แต่จริงๆแล้วช่องว่างก็เป็นส่วนหนึ่งที่จะทำให้หน้าจอเราดูสะอาดตามากขึ้น และสามารถนำช่องว่างมาใช้สำหรับแยกกลุ่มองค์ประกอบได้ นอกจากการใช้เส้นแล้ว เราสามารถนำช่องว่างมาแยกข้อความในตารางให้รับรู้ได้ง่ายยิ่งขึ้นด้วย เพราะบางกรณีที่มีการแสดงผลแบบตาราง จะมีการนำข้อมูลจำนวนมากมาแสดงให้ผู้ใช้งานรับรู้ แต่กลับไม่ได้ออกแบบส่วนของการแบ่งแยกขอบเขตของcolumn หรือ row ไว้เลย ส่งผลให้ข้อมูลที่นำมาแสดงอาจติดกันยาวเหยียดจนผู้ใช้สับสนกับจุดสิ้นสุดของข้อมูลได้ การเพิ่มช่องว่างก็เป็นอีกวิธีที่สามารถนำมาใช้ได้ หรือเราอาจนำมาใช้ควบคู่กับเส้นก็เป็นอีกวิธีที่ดีเช่นกัน

---

สำหรับบทความชุด “รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่” ตอนที่ 1 ขอจบที่ 10 ข้อแรกติดตามตอนที่ 2 ได้ตามลิงค์ด้านล่างเลยครับ

รวมเทคนิคการออกแบบ UI ให้สวยงามสำหรับ Designer มือใหม่ (ตอนที่ 2)

ขอบคุณครับ