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

1. เรื่องอะไร บอกว่า แต่ละเว็บเพจ เสนอ เนื้อหา หัวข้อ หรือประเด็นอะไร

2. เชื่อมโยงอย่างไร แสดงว่า แต่ละเว็บเพจมีการเชื่อมโยง (Link) อย่างไร เพื่อให้เห็นภาพว่า เมื่อผู้ชมเว็บไซต์ดูข้อมูลอยู่ที่เว็บเพจหนึ่ง แล้วจะเดินทางไปดูเว็บเพจอื่นอะไรได้บ้าง

รูปแบบโครงสร้างเว็บไซต์ แบ่งออกเป็น 4 รูปแบบ ดังนี้

1. โครงสร้างแบบเรียงลำดับ (Sequential Structure) 

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

2. โครงสร้างแบบลำดับขั้น (Hierarchical Structure)

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

3. โครงสร้างแบบตาราง (Grid Structure)

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

4. โครงสร้างแบบใยแมงมุม (Web Structure)

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

ขอบคุณที่มา : ASRIA 

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

ซึ่งเมื่อก่อนไม่มี Library อย่าง jQuery มาให้เราใช้เหมือนปัจจุบัน นักออกแบบจะต้องใช้ Program ที่ชื่อ Macromedia Flash เพื่อสร้างวิดีโอมาใช้ในงานเว็บเท่านั้น ปัจจุบันมีเครื่องมือมากมายที่เราสามารถนำมาเป็นหนึ่งในองค์ประกอบต่างๆ ที่ใช้ในทำเว็บไซต์ให้มีสวยงาม เพิ่มลูกเล่นในการนำเสนอ ซึ่งเราจะมาแนะนำในบทความต่อๆ ไป แต่ครั้งนี้เราจะมาแนะนำหลักสำคัญในการออกแบบหน้าเว็บไซต์ต้องคำนึงถึงองค์ประกอบสำคัญอะไรบ้าง

• การออกแบบเว็บไซต์ให้เรียบง่าย เข้าใจง่าย

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

• สร้างความโดดเด่นให้ ความเป็นเอกลักษณ์

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

• เมนู หรือ Navigation ที่ใช้งานง่าย

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

• คุณภาพของเว็บไซต์

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

• ความถูกต้องและอัพเดทอยู่เสมอ

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

• ความทันสมัยและสะดวกในการเข้าชมเว็บไซต์

ปัจจุบันการเข้าชมเว็บไซต์เป็นเรื่องง่าย เข้าถึงได้สะดวกมากขึ้นไม่ว่าคุณจะอยู่ที่ไหนก็สามารถเข้าชมเว็บไซต์ได้อย่างสะดวกมากขึ้นไม่ว่าจะเป็นการเข้าจากเครื่อง Notebook, Tablet หรือ Mobile เรียกได้ว่าสะดวกมากๆ แต่ความทันสมัยของการออกแบบเว็บไซต์ก็เป็นสิ่งสำคัญอย่างหลีกเลี่ยงไม่ได้ อย่างเช่นการออกแบบเว็บไซต์ให้เข้ากับทุก Platform หรือที่เรียกว่า “Responsive” เว็บไซต์นั่นเอง

• Call to Action ที่สะดวกและใช้งานง่าย

นับว่าเป็นเรื่องที่สำคัญไม่น้อยสำหรับการออกแบบเว็บไซต์ เพราะช่องทางการติดต่อเป็นเรื่องที่สำคัญและจำเป็นมากๆ ไม่ว่าจะเป็น ชื่อ ที่อยู่ เบอรโทรศัพท์ อีเมล แผนที่ Social network หรือแม่กระทั่งแบบฟอร์มการติดต่อที่ง่ายต่อการติดต่อก็สำคัญเช่นกัน

• การเลือกใช้สี (Color), ฟอนต์ (Font), รูปภาพ (Picture)

การเลือกสี, ฟอนต์ และรูปภาพ เพื่อบ่งบอกอารมณ์และ Mood & Tone ให้เข้ากับธุรกิจขององค์กร บริษัทก็เป็นสิ่งสำคัญ

ความแตกต่างระหว่าง UX & UI  

UX = เน้นให้ความสำคัญกับอารมณ์และความรู้สึกของผู้ใช้

UI = เน้นให้ความสำคัญกับความสวยงาม การติดต่อกับผู้ใช้ และข้อมูลทางด้านเทคนิคอื่น ๆ มองง่าย ๆ ก็คือ ส่วนที่ผู้ใช้มองเห็นและกระทำการบางอย่างกับมัน (interface และ interact)

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

ฉะนั้นจึงต้องมี Designer ที่เป็นตำแหน่ง UX/UI  โดยจะเป็นนักออกแบบที่เข้าใจผู้ใช้งานในระดับหนึ่ง รู้ว่าผู้ใช้งานชอบแบบไหน ไม่ชอบแบบไหน เพื่อให้มีข้อมูลในการนำมาออกแบบผลิตภัณฑ์ของเรานั่นเอง

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

ขอบคุณที่มา : NB Digital

การออกแบบเว็บไซต์ จะต้องศึกษาหลักการของกระบวนการคิดเชิงออกแบบ (Design Thinking Process) ซึ่ง กระบวนการคิดเชิงออกแบบประกอบด้วย 5 ขั้นตอน คือ

ขั้นตอนที่ 1 Empathize การทำความเข้าใจกลุ่มเป้าหมายอย่างลึกซึ้ง เช่น การสัมภาษณ์ การสังเกต

ขั้นตอนที่ 2 Define การตั้งกรอบโจทย์

ขั้นตอนที่ 3 Ideate การสร้างความคิด ด้วยการระดมสมอง หาไอเดีย แบ่งปันไอเดีย 

ขั้นตอนที่ 4 Prototype การสร้างต้นแบบ หรือแบบจำลองตามแนวคิดเพื่อตอบโจทย์ปัญหา

ขั้นตอนที่ 5 Test การทดสอบแนวคิดกับตัวแทนกลุ่มเป้าหมายและพัฒนาต้นแบบ เพื่อให้ได้แนวทางหรือนวัตกรรมที่มีคุณภาพและมีคุณค่าต่อกลุ่มเป้าหมายอย่างแท้จริง