สอนออกแบบ เว็บไซต์

รับสอนทำเว็บไซต์ Web Design จากเริ่มต้น สอนเว็บ E-Commerce ออกแบบร้านค้า ขายของออนไลน์       นิยามของ Interface Design (Kiran j nayak, 2002) Refers to the methods and devices that are used to accommodate interaction between machines and the human beings who use them (uses) Interface Design คือ การออกแบบ ปฏิสัมพันธ์สื่อสารให้เกิดความเหมาะสมระหว่างอุปกรณ์กับคนซึ่งผู้ใช้อุปกรณ์นั้น เช่น ถ้าออกแบบกรรไกรรูปแบบใหม่ขึ้นมา ผู้ใช้ต้องสามารถรู้ถึงวิธีการใช้งานด้วยตนเอง ว่าเครื่องมือดังกล่าวไว้ใช้ตัด และใช้งานได้อย่างถูกต้อง ดังนั้น การออกแบบเพื่อการปฏิสัมพันธ์ (interface design) ดังกล่าว อาจจะอยู่ได้ในหลายรูปแบบ ไม่ว่าจะเป็นผลิตภัณฑ์ต่าง ๆ เช่นผลิตภัณฑ์อุตสาหกรรม เครื่องมือ เครื่องจักร เครื่องใช้สำนักงาน หรือ สิ่งพิมพ์ แม้กระทั่งการออกแบบกราฟิกบนหน้าจอ เช่น ออกแบบเว็บเพจ (webpage) ออกแบบสื่อผสม (multimedia) ด้วยเช่นกัน การออกแบบเพื่อให้ประสบผลสำเร็จนั้น เราต้องคำนึงถึงการสื่อสารให้ข้อมูลจากอุปกรณ์สู้ผู้ใช้ และการสื่อสารให้ข้อมูลจากผู้ใช้สู่อุปกรณ์ (Prateek Deo, 2002)   กฏของการออกแบบปฏิสัมพันธ์ทั่ว ๆ ไป ที่ต้องคำนึงถึง มีดังนี้ (Lisa Baggerman, 2000) 1. ง่ายต่อการเรียนรู้ (ease of learning) เป็นสิ่งที่ต้องพิจารณาก่อนเป็นอันดับแรก งานออกแบบที่ดีจะต้องให้ผู้ใช้สิ่งของที่เราออกแบบเข้าใจและเรียนรู้ได้ด้วยสัญชาตญาณ หรือให้เกิดความเข้าใจโดยการหยั่งรู้ด้วยตนเอง ยกตัวอย่างเช่น ถ้าออกแบบเครื่องถ่ายเอกสาร ผู้ใช้ต้องสามารถคาดเดาวิธีการใช้จากรูปแบบของเครื่องถ่ายเอกสารได้ หรือระลึกถึงประสบการณ์เดิมที่เคยใช้มาก่อน มาประยุกต์ใช้ได้ 2. ประสิทธิผลของการใช้งาน (efficiency of use) ผู้ออกแบบจะต้องออกแบบให้ลดขั้นตอน กระบวนการใช้งานของสิ่งของที่เราออกแบบมาให้สั้นลง เพื่อให้ผู้ใช้ได้ใช้ผลิตภัณฑ์ได้รวดเร็ว นักอกแบบจะต้องสร้างผลงานออกมาให้มีกระบวนการใช้งานหรือขั้นตอนการใช้งานที่ไม่ซับซ้อน และชัดเจนมากที่สุด ยกตัวอย่างเช่น การออกแบบเครื่องใช้ไฟฟ้า ควรแค่เสียบปลั๊กกดปุ่มเปิด ก็ใช้งานได้เลย หรือเมื่อเลือกใช้ก็กดปิด ถอดปลั๊ก เป็นต้น เป็นการลดขั้นตอนให้มากที่สุด 3. การจดจำ (memorability) นอกจากกระบวนการหรือขั้นตอนการใช้งานที่ง่ายแล้ว เราจะต้องออกแบบให้เกิดการจดจำขั้นตอนหรือกระบวนการใช้งานได้ง่ายด้วย นักออกแบบไม่ควรออกแบบให้ผู้ใช้ต้องเรียนรู้ขั้นตอนการใช้งานผลิตภัณฑ์ใหม่ทุกครั้งที่ใช้งาน ยกตัวอย่างเช่น ออกแบบเครื่องซักผ้าการออกแบบขั้นตอนวิธีการใช้ที่ดี จะส่งผลเมื่อผู้ใช้ใช้งานครั้งถัด ๆ ไป ผู้ใช้จะจดจำวิธีการใช้เครื่องซักผ้าได้โดยง่าย โดยไม่ต้องเสียเวลามาเรียนรู้ใหม่

4. ให้เกิดความผิดพลาดน้อยที่สุด (minimize errors) การออกแบบที่ดีจะต้องนำสิ่งที่เราออกแบบมาทดลองใช้ก่อนเพื่อหาข้อผิดพลาดโดยใช้กลุ่มตัวอย่างที่เป็นกลุ่มเป้าหมาย ทั้งนี้เราต้องคำนึงถึงความแตกต่างกันระหว่างบุคคล ดังนั้นนักออกแบบจะต้องขจัดความผิดพลาด จากความเข้าใจผิดของการใช้งานของผู้ใช้ออกไปให้มากที่สุด นักออกแบบที่ดีจะต้องออกแบบให้ผู้ใช้นะลึกต่อรูปแบบการใช้งานได้อย่างรวดเร็ว 5. สนองความพอใจของผู้ใช้ (satisfy the user) นักออกแบบจะต้องออกแบบภาพลักษณ์ของสินค้าหรือผลิตภัณฑ์ให้ออกมาอย่างมีคุณภาพและมีรูปลักษณ์ที่สวยงาม และเป็นเอกลักษณ์

  นิยามของการออกแบบกราฟิก (graphic design) นั้นมีความแตกต่างจาก interface design เพราะการออกแบบกราฟิก จะออกแบบมาเพื่อให้เกิดความรู้สึกในด้านสื่อสาร โดยใช้รูปร่าง ภาพประกอบ รวมถึงสีสัน   จากที่กล่าวมาขั้นต้น ดังนั้น graphic user interface ก็คือการออกแบบและจัดวางองค์ประกอบต่าง ๆ ในโปรแกรม เพื่อปฏิสัมพันธ์ที่สามารถแสดงผลบนหน้าจอคอมพิวเตอร์ ทั้งนี้การออกแบบดั้งกล่าวจะต้องสามารถสื่อสาร และปฏิสัมพันธ์โต้ตอบระหว่างตัวสื่อดิจิทัลเองกับผู้ใช้ได้อย่างเหมาะสม องค์ประกอบต่าง ๆ อาจได้แก่ ปุ่ม รายการ หัวข้อ ภาพประกอบ และสิ่งอื่น ๆ ที่ปรากฏบนหน้าจอคอมพิวเตอร์ วิธีการจัดวางองค์ประกอบ จะใช้พื้นฐานทางด้านออกแบบกราฟิก แต่เน้นให้สามารถสื่อสารและสร้างปฏิสัมพันธ์ระหว่างองค์ประกอบซึ่งปรากฏอยู่บนหน้าจอ กับผู้ใช้ได้   องค์ประกอบต่าง ๆ ได้แก่

1. ปุ่ม (buttons) เป็นป้ายเครื่องมือมีรูปร่างแตกต่างกัน ประกอบด้วย OK , Cancel ตัวหนังสือจะมีหรือไม่มีก็ได้ มีหน้าที่ในการรับคำสั่งและส่งคำสั่งไปประมวลผล
2. แบบกรอกข้อมูล (forms) ใช้เมื่อมีการกรอกข้อมูลหลาย ๆ ข้อมูลพร้อมกัน เช่น กล่องข้อความ (check boxes) ปุ่มวิทยุ (radio buttons) กล่องความแบบเลือกเมนู (pulldown menu) ตัวรับข้อมูลเหล่านี้ไม่ได้มีหน้าที่รับคำสั่งไปประมวลผล
3. สัญลักษณ์บอกตำแหน่ง (cursors or pointers) มีความสำคัญมากต่อการมองเห็น เป็นสัญลักษณ์ที่เคลื่อนตามอุปกรณ์นำเข้าอย่าง เมาส์ (mouse) หรือ คีย์บอร์ด (keyboard) ไปตามส่วนต่าง ๆ ของหน้าจอ และ สามารถโต้ตอบกับองค์ประกอบอื่น ๆ ได้
4. กล่องสนทนา (dialog boxes) เป็นกล่องข้อความสนทนาโต้ตอบกับผู้ใช้บนหน้าจอ มีหน้าที่บอกข้อมูล ทางเลือก ให้ผู้ใช้ก่อนจะส่งข้อมูลต่าง ๆ ในบางครั้งอาจแจ้งเตือน โดยมากกล่องข้อมูลจะมีปุ่มรองรับการยืนยันการส่งข้อมูล เช่น มีปุ่มตกลง หรือ ปุ่มยกเลิก เป็นต้น
5. สัญลักษณ์รูปภาพ (icon) เป็นรูปภาพที่ใช้แทนประโยชน์ใช้สอย (function) ในการทำงานของโปรแกรมรูปที่แสดงออกมาเป็นสัญลักษณ์ของอุปกรณ์ รูปภาพดังกล่าวอาจจะแสดงเป็นลักษณะ ภาพที่ถูกลด สกัด หรือตัดทอนออกมาในรูปแบบของสัญลักษณ์ (symbol) หรือเครื่องหมาย (pictogram) ก็ได้