การจัดกลุ่มข้อมูลด้วยฟอร์ม

    ฟอร์ม (Form)  เป็นเครื่องมือที่ใช้รับข้อมูลจากผู้ใช้เข้าสู่ระบบ  แล้วนำไปประมวลผลยังเครื่องแม่ข่าย  ซึ่งเป็นผู้ให้บริการของเว็บไซต์นั้นอีกครั้งหนึ่ง  องค์ประกอบของฟอร์มมีหลายชนิด  เช่น Text Box, Checkbox, Radio Buttons และ Drop-down List  เป็นต้น  ด้วยองค์ประกอบที่หลากหลายของฟอร์ม  ผู้ออกแบบจึงต้องให้ความสำคัญต่อการเลือกใช้  และจัดวางองค์ประกอบเหล่านี้เข้าไว้ด้วยกันภายในพื้นที่การใช้งานที่จำกัด

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


สำหรับองค์ประกอบของฟอร์มบนเว็บที่นิยมใช้งาน  มีดังนี้
    ช่องป้อนข้อมูล (Text Field หรือ Text Box)
เป็นส่วนประกอบสำหรับรับข้อมูลแบบอิสระ (Free Foem Information) กล่าวคือ  ผู้ใช้สามารถป้อนข้อมูลด้วยคำบรรยายรูปแบบใดก็ได้ (ทั้งตัวอักษรและตัวเลข)  ภายใต้ชื่อหัวเรื่องที่ผู้ออกแบบกำหนดไว้  ตัวอย่างข้อมูลที่ใช้การออกแบบด้วยองค์ประกอบนี้  เช่น  ชื่อ  นาสกุล  หรือที่อยู่  เป็นต้น  การออกแบบด้วยช่องป้อนข้อมูลมีข้อเสีย  คือ  ผู้ออกแบบไม่สามารถควบคุมรายละเอียดข้อมูลที่ผู้ใช้ป้อนได้  ดังนั้นโอกาสที่จะได้ข้อมูลไม่ครบหรือไม่ตรงตามที่ต้องการจึงมีสูง

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

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

-  ข้อมูลที่ใช้เพื่อแสดงค่าเท่านั้น (ผู้ใช้ไม่สามารถป้อนข้อมูลได้)  มักจะเป็นผลที่ได้จากการคำนวณ  หรือเป็นค่าของระบบที่ต้องป้องกันไว้

-  รหัสผ่าน  เป็นข้อมูลจำเพาะที่ต้องใช้งานควบคู่กับช่องป้อนข้อมูลเสมอ
กำหนดพื้นที่สำหรับแสดงช่องป้อนข้อมูลที่ชัดเจน  ในฟอร์มมักประกอบด้วยช่องป้อนข้อมูลมากกว่า 1 รายการ  ดังนั้นเพื่อให้หน้าฟอร์มเป็นระเบียบ  ง่ายต่อการอ่านและป้อนข้อมูล  จึงควรจัดกลุ่มโดยใช้การสร้าง Fieldset หรือการสร้างเฟรมให้กับองค์ประกอบในฟอร์ม

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

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

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

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

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

-  ข้อมูลที่เป็นตัวอักษร  ควรจัดตำแหน่งข้อมูลให้ชิดซ้าย
-  ข้อมูลที่เป็นตัวเลข  ควรจัดตำแหน่งข้อมูลให้ชิดขวา

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

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

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


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

หมายเหตุ  ควรใส่เรื่องหมาย “โคลอน (:)”  หลังคำอธิบายข้อความทุกครั้ง  เพราะเว็บบราวเซอร์ที่ใช้การเปล่งเสียง  จะเข้าใจการแยกข้อมูลระหว่างคำอธิบายข้อความและช่องป้อนข้อมูล  เมื่อพบเครื่องหมายดังกล่าว


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

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


ข้อเสียของ Drop-down List คือ  ไม่สามารถเลือกรายการได้มากกว่า 1 ตัวเลือก  และผู้ใช้ไม่สามารถเพิ่มรายการอื่นที่นอกเหนือจาก Drop-down List  กำหนดมาให้ได้  รวมทั้งกรณีที่มีรายการตัวเลือกมาก  การรับชมข้อมูลจะทำได้ค่อนข้างยาก  ดังนั้นหากต้องการออกแบบหน้าเว็บโดยใช้ Drop-down List ควรพิจารณาปัจจัยต่อไปนี้

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


  การกำหนดค่าเริ่มต้นของข้อมูล ผูยความสะดวกให้กับผู้ชมได้ โดยกำหนดค่าเริ่มต้นของ Drop-down Listในสถานะปกติ ตามค่ามาตรฐานที่ใช้กันของกลุ่มผู้ใช้ขณะนั้น เช่น Drop-down List ของชื่อประเทศสามารถใช้เกณฑ์กำหนดจากประเทศผู้ใช้เป็นหลัก กล่าวคือ ถ้าเป็นการเปิดหน้าเว็บที่ประเทศไทย ค่าเริ่มต้นควรแสดงเป็นชื่อ “ประเทศไทย” หรือ “Thailand” แต่เมื่อเปิดหน้าเว็บที่ประเทศอังกฤษ ค่าเริ่มต้นก็เปลี่ยนเป็น “England” หรือ “US Kingdom” เป็นต้น

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


Checkbox
     เป็นการนำเสนอตัวเลือกข้อมูลหลายตัวเลือกเช่นเดียวกับ Drop-down list แต่ต่างกันตรงที่ Checkbox จะแสดงรายการตัวเลือกทั้งหมดให้ผู้ใช้เห็น  และผู้ใช้สามารถเลือกรายการที่ต้องการได้มากกว่า 1 รายการ  โดยรูปแบบของ Checkbox ที่ผู้อ่านพบเห็นบ่อยครั้ง  คือ  เป็นกล่องสี่เหลี่ยมขนาดเล็ก  หากผู้ใช้ต้องการรายการใดก็สามารถคลิกที่กล่องสี่เหลี่ยมหน้ารายยการนั้น (จะแสดงเครื่องหมายถูก (P) ที่กล่อง)  แต่ถ้าไม่ต้องการก็ยกเลิกโดยการคลิกซ้ำเพื่อเอาเครื่องหมายดังกล่าวออก

Checkbox มีข้อจำกัดในการแสดงผล  กรณีที่พื้นที่การแสดงผลมีน้อยแต่มีรายการตัวเลือกมาก  ดังนั้น  Checkbox จึงเหมาะสำหรับการแสดงตัวเลือกข้อมูลที่มีจำนวนไม่มากนัก (ประมาณ 2-5 ตัวเลือก)  โดยหลักการออกแบบ Checkbox ที่สำคัญมีดังนี้

    - จัดกลุ่มพื้นที่ข้อมูลของ Checkbox  เมื่อมีรายการตัวเลือกมากกว่า 2 รายการขึ้นไป  ควรจัดกลุ่มพื้นที่ข้อมูลให้กับ Checkbox เพื่อไม่ให้ผู้ใช้เกิดความสับสน  หรือมองข้ามรายการตัวเลือกตัวใดไป

     - การกำหนดค่าให้กับ Checkbox  ค่าของ Checkbox ส่วนมากมักแบ่งออกเป็น 2 ค่า  โดยอัตโนมัติ  กล่าวคือ  ตกลงใช้งาน(เมื่อคลิกเลือก)  และยกเลิกการใช้งาน (เมื่อไม่ได้คลิกเลือก)  ดังนั้นในกรณีที่มีเพียงเงื่อนไขเดียวให้พิจารณาต้องระวังการออกแบบที่สร้าง ความสับสน

    - ตัวอย่างข้างต้นมีข้อระวังในการออกแบบที่สำคัญ  คือ  การกำหนดคำอธิบายที่ขัดแย้งกับการทำงานของ Checkbox  เช่น  กำหนดอธิบายคำว่า “ไม่” ซึ่งในความเป็นจริงหากผู้ใช้ไม่คลิกเลือกที่กล่องสี่เหลี่ยมข้างคำอธิบาย  ก็หมายถึงการปฏิเสธเช่นเดียวกัน

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

หมายเหตุ   Radio Button จะต้องมีการเลือกค่าในรายการตัวเลือกของ Radio Button  เสมอ (ไม่สามารถปล่อยให้ค่าในสัญลักษณ์วงกลมของ Radio Button ว่างได้)  ในขณะที่ Checkbox ผู้ใช้อาจจะไม่เลือกค่าใดๆจากรายการตัวเลือกทั้งหมดเลยก็ได้

    บ่อยครั้งที่ผู้อ่านจะพบว่า Radio Button ถูกนำมาใช้แทนที่ Checkbox ซึ่งเมื่อพิจารณาจากชนิดข้อมูลแล้ว  สามารถใช้งานแทนกันได้  อย่างไรก็ตามหากต้องการเลือกการใช้งาน Radio Button ต้องคำนึงถึงหลักการออกแบบที่สำคัญ  ดังนี้

    จัดกลุ่มพื้นที่ข้อมูลของ Radio Button  เมื่อมีรายการตัวเลือกมากกว่า 2 รายการขึ้นไป  ควรจัดกลุ่มพื้นที่ข้อมูลให้กับ Radio Button เพื่อไม่ให้ผู้ใช้เกิดความสับสน  หรือมองข้ามรายการตัวเลือกตัวใดไป  นอกจากนี้ไม่ควรกำหนดให้รายการตัวเลือกใน Radio Button เกินกว่า 7 รายการ  เพราะจะทำให้ยากต่อการรับชมข้อมูล
การกำหนดค่าให้กับ Radio Button  ค่าใน Radio Button จำเป็นต้องมีการเลือกเสมอ  ดังนั้นกรณีที่มีเงื่อนไขเดียวให้พิจารณา  จะไม่สามารถสร้างทางเลือกภายใต้คำอธิบายข้อมูลเพียงรายการเดียวเหมือนกับ Checkbox ได้  

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

Button 
     ปุ่ม (Button)  เป็นเครื่องมือที่ใช้เพื่อยืนยันการส่งค่าหรือทำงานตามขั้นตอนที่กำหนดไว้  โดยมากการออกแบบเว็บเพจจะใช้ปุ่มเพื่อทำงาน 3 ลักษณะ  คือ  ยืนยันการรับ-ส่งข้อมูล  บันทึกข้อมูล  และปฏิบัติตามขั้นตอนที่กำหนดไว้  โดยผู้ออกแบบจะกำหนดปุ่มเครื่องมือเป็นทางเลือกให้กับผู้ใช้  ซึ่งผู้ใช้สามารถเลือกค่าการทำงานได้เพียงปุ่มเดียวเท่านั้น  ยกตัวอย่างเช่น  การส่งข้อมูลตามแบบฟอร์มที่ผู้ใช้ป้อน  กำหนดค่าปุ่มให้เป็น “ตกลง”  หรือ “ยกเลิก”ลักษณะเช่นนี้  ผู้ใช้จะสามารถเลือกได้เพียงค่าเดียวเท่านั้น

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

 ขนาดของปุ่ม  กรณีที่ชื่อปุ่มมีความยาวไม่ต่างกันมากนัก  ควรกำหนดขนาดของปุ่มให้เป็นขนาดเดียวกันตลอดทั้งหน้าเว็บ (กำหนดจากชื่อที่ปุ่มมีความยาวมากที่สุด) ยกเว้นกรณีที่ชื่อปุ่มบนหน้าเว็บมีความยาวแตกต่างกันมากและมีจำนวนหลายปุ่ม ลักษณะนี้สามารถแบ่งปุ่มออกเป็น 2 ขนาดได้

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


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

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

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