web analytics

โปรเจคเว็บบอร์ดในวิชา HCI ของผม

cover

สวัสดีครับ ช่วงนี้ชีวิตผมค่อนข้างออกแนวเบลอๆ บทความนี้เลยมาเขียนถึงโปรเจคสมัยเรียนของผม (อีกแล้ว) ผมอยากจะเอาโปรเจคต่างๆมาเขียนไว้เป็นเสมือนบันทึกไดอารี่ บันทึกความทรงจำ พูดคำว่าสมัยเรียนเหมือนจะผ่านมานานแต่จริงๆก็ไม่นานเท่าไหร่หรอกไม่เกิน 2 ปีเอง โดยผมจะเอาโปรเจคหรือโปรแกรมต่างๆที่ได้พัฒนาขณะที่เรียน ป.ตรี เอามาเขียนบล็อกแล้วก็แจก source code  ถ้าเป็นไปได้ก็จะอธิบายรื้อฟื้นความรู้เรื่องนั้นๆไปในตัวไปด้วยครับ

 

เริ่มต้น

แล้วครั้งนี้ผมก็ไปเจอไฟล์โปรเจคเว็บไซต์ของผมที่เคยเขียนไว้ในวิชา Human Computer Interction (HCI) ซึ่งตอนนั้นผมใช้ Laravel 5.0 เป็น framework ในการทำเว็บ  แต่ว่าวิชานี้ไม่ได้เน้น Programming นะ เน้นเกี่ยวกับเรื่องการออกแบบและก็ปฏิสัมพันธ์กับผู้ใช้เป็นหลัก การเรียนโดยรวมอาจารย์ก็สอนแล้ว ก็มีโปรเจคให้ทำไประหว่างเรียน โดยให้คิดโปรแกรมหรือเว็บอะไรสักอย่างแล้วก็ออกแบบ และพัฒนา ไม่จำเป็นต้องพัฒนาใหม่ก็ได้ เอาโปรแกรมเดิมมาปรับปรุงก็ได้ จากนั้นก็มานำเสนอโดยเอาโปรแกรมมาอธิบายว่าใช้ทฤษฎีอะไรของ HCI ท้ายเทอมก็เอาโปรแกรมมาสรุปผลร่วมกับทฤษฎีต่างๆของวิชานี้ทั้งหมด

โปรเจคนี้ให้อาจารย์ให้ทำเป็นกลุ่ม 4-5 คน และอาจารย์ใช้วิธีสุ่มสมาชิกกลุ่มด้วย ไม่ได้ให้จับกลุ่มเอง ทำให้ผมได้ร่วมกลุ่มกับเพื่อนที่ไม่ค่อยสนิท แล้วเพื่อนในกลุ่มก็ไม่ค่อยมีส่วนร่วมเท่าไหร่ อาจเป็นเพราะเป็นโปรแกรมของผมด้วยแหละ ทำให้เพื่อนวางใจให้ผมทำ ทำให้ตั้งแต่ต้นจนจบ การเขียนโปรแกรม การวิเคราะห์นำทฤษฎีมาอธิบายโปรแกรม ทำสไลด์นำเสนอ ทำไดอะแกรม เตรียมบทพูด ผมทำเองแทบทั้งหมด เรียกได้ว่า 90% ผมเป็นคนทำ แต่ที่ผมเศร้าใจ ผมจำได้ว่าตอนประกาศคะแนน คะแนนโปรเจค 20% ผมได้น้อยที่สุดในกลุ่ม แต่ก็เยอะกว่ากลุ่มอื่นๆนิดหน่อย สุดท้ายวิชานี้ผมได้ A ฮะ เย้

 

วิชา HCI คืออะไร

ขออธิบายสั้นๆนะ Human computer interaction เป็นทฤษฎีเกี่ยวกับ ปฏิสัมพันธ์ ระหว่างคอมพิวเตอร์กับมนุษย์ เช่น หลักการเกี่ยวกับการออกแบบโปรแกรมให้ใช้ง่าย จะวัดประสิทธิภาพของโปรแกรมในมุมมองผู้ใช้ได้อย่างไร ซึ่งวิชานี้ก็มีทฤษฎีต่างๆมาอธิบายนั่นเอง

โปรเจค Benznest Forum

ชื่อโปรเจคตลกใช่มัยล่ะ ขอเล่าก่อนว่า คือช่วงก่อนจะเรียนวิชานี้ ผมได้ไปฝึกงาน ซึ่งที่นั่นมีพี่คนนึงเขาก็สอน แนะนำผมเกี่ยวกับ Larvel  แล้วที่นั่นทำให้ผมได้เรียนรู้ laravel 5.0 ตอนนั้นมันกำลังมาใหม่ๆเลยละ ผมก็เลยคิดว่า อยากจะเข้าใจ laravel 5.0 ระหว่างฝึกงานก็เลยทำโปรเจคอะไรสักอย่างด้วยตัวเอง จะได้เจอปัญหาแล้วเข้าใจมันมากขึ้น โปรเจคนั้นก็คือ เว็บบอร์ด ผมเรียกมันว่า benznest forum ก็ไม่คิดว่าจะได้เอามาใช้ในวิชา HCI ที่จะได้เรียนต่อจากนั้น พอได้เรียนวิชานี้ อาจารย์ให้คิดโปรเจค ผมก็เลยหยิบเว็บบอร์ดมาเป็นโปรเจคของวิชานี้ซะเลย ในขณะนั้น เพื่อนๆกลุ่มอื่นๆก็มี แอปรายรับรายจ่าย โปรแกรมรายดนตรี โปรเช่าอะไรสักอย่าง ฯลฯ ซึ่งก็เอาโปรเจคจากในวิชาก่อนๆมาบ้าง บางกลุ่มก็ทำโปรแกรมใหม่เลยก็มี

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

imag0897

 

การนำเสนอของเพื่อนๆ กลุ่มต่างๆ และอาจารย์จะคอมเม้น

imag0982imag1070 imag1251

 

มาดูตัวเว็บบอร์ดกันว่าเว็บบอร์ดของผมมีความสามารถอะไรบ้าง
จากนั้นจะพาชมหน้าตา แล้วก็จะมาเล่าว่าผมเอา HCI มาใช้อย่างไร

 

ความสามารถของเว็บบอร์ด

สมัครสมาชิก / ล็อคอิน
ตั้งกระทู้ / ตอบกระทู้ / ตอบความคิดเห็นย่อย
แก้ไข / แจ้งลบกระทู้
ระบบแท็ก
ระบบห้อง
ระบบโหวตกระทู้
โปรไฟล์ส่วนตัว / เปลี่ยนรหัสผ่าน / กระทู้ของฉัน
กระทู้โปรด

ระบบหลังบ้านสำหรับแอดมิน
จัดการห้อง
จัดการแท็ก
จัดการกระทู้
จัดการผู้ใช้ สามารถแบนผู้ใช้ได้
จัดการคำร้อง อนุมัติการลบกระทู้
สถิติของเว็บบอร์ด

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

 

หน้าแรก

หน้าเลือกห้อง

1

 

สมัครสมาชิก

หน้าสมัครสมาชิก ใช้ฟอร์มเดิมๆของ Laravel เลย

2

 

ล็อคอิน

หน้าล็อคอินก็ใช้ฟอร์มแบบง่ายๆ

3

 

ตั้งกระทู้

หน้าตั้งกระทู้ ผมใช้ library เสริมให้กับฟอร์มเพื่อให้มันปรับแต่งเนื้อหาได้ เช่น เลือกสี ทำตัวใหญ่
library ชื่อว่า Summernote 

4

 

จากนั้นเลื่อนลงมาข้างล่าง เลือก tag ที่เกี่ยวกับกระทู้

5

 

กระทู้จะไปขึ้นในหน้าห้องต่างๆที่เกี่ยวข้อง

15

 

หน้ากระทู้

จากนั้นก็จะได้กระทู้ขึ้นมา ตอบกระทู้ได้ แก้ไขกระทู้ได้ (เป็นเจ้าของกระทู้)  โหวตกระทู้ แจ้งลบ

6

 

คอมเม้นย่อย

เมื่อกด Reply comment ก็จะสามารถตอบคอมเม้นได้ แล้วจะแสดงเป็นแท็บสีม่วง กดซ่อน แสดงได้
เหมือน Pantip เลย

7

 

แจ้งลบกระทู้

หากกดที่ปุ่มลบกระทู้จะเป็น ฟอร์มสำหรับแจ้งลบ ว่าทำไมถึงต้องการลบ กระทู้ไม่เหมาะสมหรือไม่
อันนี้ผมก็เอา Pantip มาเป็นแบบเหมือนกัน

8

 

โปรไฟล์

ถ้าที่เมนูโปรไฟล์ ก็จะเป็นการแก้ไขข้อมูลโปรไฟล์ของเรา แล้วก็เปลี่ยนรหัสผ่าน

9

 

กระทู้โปรด

ถ้าที่หน้ากระทู้ แล้วกดปุ่มกระทู้โปรด ปุ่มเหลืองๆมันจะมาขึ้นในเมนูกระทู้โปรด

10

 

หน้าสำหรับแอดมิน

หากเราล็อคอินด้วยบัญชีแอดมิน ก็จะมีเมนู Administrator panel ขึ้นมา หากกดเข้าไปก็จะมีเมนูย่อย
เมนูแรก General สำหรับแก้ไขชื่อเว็บบอร์ด

11

 

จัดการหมวดหมู่ (ห้อง)

สามารถเพิ่มห้องได้ แก้ไขห้องได้ ลบห้องได้ หรือจะปิดซ่อนห้องชั่วคราวก็ได้นะ

12

 

จัดการแท็ก

สามารถเพิ่มแท้ก แก้ไขแท็ก ลบแท็ก หรือจะปิดซ่อนแท็ก

13

 

ตัวอย่างการแก้ไขแท็ก

14

 

จัดการผู้ใช้

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

16

 

จัดการคำร้อง

หลังจากกดส่งคำร้องลบกระทู้มาแล้ว มันจะมาขึ้นในหน้า request ของแอดมิน
แอดมินจะเช็คดูว่ากระทู้สมควรโดนลบมัย ถ้าลบก็เข้าที่ Target จะเป็นการเปิดกระทู้นั่นขึ้นมา

17

 

ถ้าเป็นแอดมิน จะมีปุ่ม Admin tool สีเขียวๆ จะสามารถกดลบกระทู้ได้

19

 

 

หน้าสถิติ

หน้าสถิติไม่มีอะไร นอกจากกราฟวงกลมจำนวนกระทู้ในแต่ละห้องครับ
จริงๆ ผมแค่อยากลองทำกราฟหรือแผนภูมิ ดูบ้างเท่านั้นเองแหละ

18

 

HCI กับ Benznest Forum

อย่างที่ผมได้บอกไปแล้วในตอนต้นว่า วิชานี้ไม่ได้เน้น programming แต่เน้นปฏิสัมพันธ์และการออกแบบ โดยมีทฤษฎีต่างๆมาอธิบาย และอาจารย์ก็ให้เอาทฤษฎีนั้นมาอธิบายโปรแกรมของเรา โดยผมจะนำภาพมาจากสไลด์ที่ผมใช้นำเสนอนะ

Familiarity

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

กฏของ Nielsen

ต่อมาคุณลุง Jakob Nielsen ก็คิดกฏขึ้นมา 10 ข้อ มาใช้ในการอธิบายหลักการออกแบบที่ดี
เช่น ควรมีเมนูที่มันเป็นมาตรฐาน ขึ้นทุกหน้าอย่างเหมาะสม ซึ่งเว็บบอร์ดผมมีเมนูด้านบนตลอด
เป็นไปตามกฏของนึงของคุณลุงแล้ว

20

ที่หน้าตั้งกระทู้ผมนำมีฟอร์มรูปแบบที่เรียกว่า WYSIWYG (What you see is what you get) อะไรที่คุณเห็น คือสิ่งที่คุณจะได้
ซึ่งมันเป็นไปตามหลักของ Familiarity ซึ่งผู้ใช้มักจะชินกับเครื่องมือของ Microsoft Office หรือโปรแกรมเอกสาร ทำให้สามารถใช้งานได้ทันที

25

Task migratability

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

23

 

Synthesizability

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

24

 

Customizability

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

26

กฏของ Sheniderman

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

22

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

27

 

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

28

 

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

29

 

หรือจะเป็นการตั้งรหัสผ่านก็ควรมีการป้องกันข้อผิดพลาดเอาไว้ คือการให้ใส่ซ้ำ

31

 

Norman

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

30

 

แผนภาพ GOMS

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

32

 

CSP

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

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

33

 

สรุป

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

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

 

ดาวน์โหลดสไลด์นำเสนอ

อันนี้เป็นไฟล์สไลด์ที่ผมใช้ในตอนนำเสนอ

presentation-project-hci.pttx

 

ดาวน์โหลดโปรเจค

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

https://github.com/benznest/benznestforum

 

ไฟล์ .sql สำหรับ database  โหลดไปแล้วไป import เอา
แต่จริงๆแล้วผมก็เขียน Migration ไว้นะ แต่ว่ามันก็ได้แต่สร้าง Table ให้
มันต้องมีข้อมูลเบื้องต้นด้วย ดังนั้นเอาไฟล์ไป import ง่ายสุด
benznestforum-databse-sql

 

เข้าชมเว็บ

เพื่อให้โปรเจคนี้มีชีวิตอีกครั้ง ผมได้อัพโปรเจคขึ้น host ของผมไว้แล้ว เข้าไปเล่นกันได้ที่ลิงค์ข้างล่างนี้
https://benzneststudios.com/benznestforum/

ถ้ามี error อะไร ผมทำใจไว้แล้ว

ผู้ใช้ทั่วไป
user1@user.com
123456

แอดมิน
admin@admin.com
123456