Forum Storyboard and Dialogue design

Storyboard And state transition network

Menu

Sign in and Register

Familiarity (Learnability) Icon look like object in real world. Nielsen, Consistency and standards one menu every where. ไอคอนที่คุ้นเคย และเป็นวัตถุที่มีในชีวิตประจำวัน , Neilsen บอกว่าควรทำให้เป็นมาตรฐานในทุกๆที่

Menu

Register

Shneiderman’s rule Strive for consistency , sort by priority.

Task migratability (Flexibility) System feedback mistake to user. User edit it. มีการแลกเปลี่ยนงานกันระหว่างระบบกับผู้ใช้ ในที่นี้คือ การตรวจสอบชื่อ อีเมล

Register

Sign in

Task migratability (Flexibility) System feedback mistake to user. มีการแลกเปลี่ยนงานกันระหว่างระบบกับผู้ใช้ ในที่นี้คือ การตรวจสอบชื่อ อีเมล

Login

Category room Slide 3

Synthesizability (Learnability) Link change color when cursor hover ผู้ใช้สามารถประเมินจากผลกระทำในอดีต ในที่นี้คือเอาเม้าไปชี้แล้วสีเปลี่ยนทำให้ผู้ใช้เข้าใจว่า คลิกได้

Topic room Slide 3

Familiarity (Learnability) Icon easy understand. Synthesizability (Learnability) Link change color when cursor hover. ปุ่มตั้งกระทู้ใหม่ มี affordance คือ มันสามารถกดได้ มีไอคอนสื่อความหมาย , และลิงค์เปลี่ยนสีได้

Create topic

Nielsen's Familiarity (Learnability) WYSIWYG editor ,Tool look like tool in Microsoft word. Nielsen's Aesthetic and minimalist design Neilsen บอกว่า ฟอร์มควรมีคำบอกว่าควรกรอกอะไร , ส่วนช่องกรอกเนื้อหากระทู้ใช้ WYSIWYG (what you see is what you get) คือ ใส่อะไรลงไปก็จะเป็นแบบนั้น ซึ่งคุ้นเคยกันดีใน MS word

Customizability adaptability (Flexibility) Custom size content textbox. สามารถเปลี่ยนขนาดของ ช่องกรอกข้อความได้

Choose tag topic

Nielsen's Sneiderman’s Enable frequent users to use shortcuts. Filter tag , easy to choose tag for topic. Sneiderman บอกว่าถ้าเป็นไปได้ควรมีทางลัดให้ผู้ใช้ ในที่นี้คือระบบกรองแท็ก ให้เลือกง่ายๆ ., Neisen บอกว่า ช่องกรอกควรบอกด้วยว่า ให้ใส่อะไร Nielsen's Aesthetic and minimalist design

Create topic

Topic

Familiarity (Learnability) Affordance and visibility ปุ่มโหวตมี Affordance คือ ผู้ใช้เห็นแล้วก็รู้เลยว่าทำอะไรได้ ในที่นี้คือมันมี สามเหลี่ยมชี้บนล่างมีเลขตรงกลาง ผู้ใช้คุ้นเคยคล้ายๆกับปุ่มลิฟท์

Shneiderman Strive for consistency Color button consistency. Sheiderman บอกว่า ควรมีความสอดคล้องของสี ข้อความ วัตถุที่ใช้ อารมณ์ที่สื่อถึง

Topic detail

ช่องกรอกข้อความ สามารถเปลี่ยนขนาดได้ Customizability adaptability (Flexibility) Custom size content textbox.

Comment

Synthesizability (Learnability) Link change color when cursor hover ปุ่มกดแสดง คอมเม้น เมื่อเอาเม้าไปชี้ จะเปลี่ยนสีได้

เปลี่ยนขนาดของช่องกรอกได้ Customizability adaptability (Flexibility) Custom size content textbox.

Reply comment

Jakob Nielsen , Match between system and the real world. Language system easy understand. Nielsen บอกว่า ข้อความที่ระบบใช้ควรมีคำพูดที่ตรงกับโลกความจริง เข้าใจง่าย

Sheiderman , Sheiderman , Design dialogs to yield closure , Offer information feedback Sheiderman บอกว่า ทำอะไรแล้วควรมีอะไรตอบกลับผู้ใช้ด้วย , และบอกว่าผลลัพธ์หลังจากผู้ใช้ทำไปคืออะไร ในที่นี้คือบอกว่า ok นะ

Request remove

Administrator panel

Administrator menu

Familiarity (Learnability) Icon look like object in real world. Icon เข้าใจง่าย คุ้นเคย

Admin menu Category Management Category Management Account Management Select Category Select General Account Management Select Account Start Admin panel Select Tag Tag Management Admin menu

General management

Nielsen's Aesthetic and minimalist design

Nielsen's Sneiderman’s Enable frequent users to use shortcuts. Filter category, by name and status. Sheiderman บอกว่า ถ้าเป็นไปได้ควรมีทางลัด ให้ผู้ใช้ด้วย , Nielsen บอกว่าต้องมีบอกด้วยว่าควรใส่อะไร Nielsen's Aesthetic and minimalist design

Familiarity (Learnability) Icon easy understand. Shneiderman Strive for consistency Color button consistency. คุ้นเคยกับไอคอน , sheiderman บอกสี ตัวอักษรควรสอดคล้อง

Shneiderman Shneiderman , Strive for consistency Color button consistency. Shneiderman , Recognition rather than recall Sheiderman บอกว่า ไดอาลอก ไม่ควรต้องนึกอะไรมาก , สีควรสอดคล้องกับตัวอักษร อารมที่จะสื่อ

Category management

Familiarity (Learnability) Icon easy understand. Shneiderman Strive for consistency Color button consistency. คุ้นเคยกับไอคอน , sheiderman บอกสี ตัวอักษรควรสอดคล้อง

Shneiderman Sheiderman , Recognition rather than recall. ผู้ใช้ไม่ต้องนึกอะไรมาก ทำอะไรได้ง่าย , สีสอดค้อง Shneiderman Strive for consistency Color button consistency.

Tag management

Nielsen's Sneiderman’s Enable frequent users to use shortcuts. Filter category, by name and status. มีทางลัด , มีตัวอักษรบอกว่าควรกรอกอะไร Nielsen's Aesthetic and minimalist design

Familiarity (Learnability) Icon easy understand. Shneiderman Strive for consistency Color button consistency. คุ้นเคยกับไอคอน , สี สอดคล้อง

Nielsen's Shneiderman Error prevention. User confirm action. Strive for consistency Color button consistency. ป้องกันข้อผิดพลาด , สีปุ่มสอดคล้อง

Account management

Profile

Norman Simplify the structure of tasks Choose date from calendar. ทำให้งานง่ายขึ้น

Nielsen's Shneiderman Error prevention. User confirm action. เรียงตามลำดับความสำคัญ , ป้องกันข้อผิดพลาด คือให้ใส่รหัสเดิมด้วย Nielsen's Error prevention. User confirm action. Shneiderman Strive for consistency , sort by priority.

Sheiderman , Sheiderman , Design dialogs to yield closure , Offer information feedback มีข้อความตอบกลับ , บอกผุ้ใช้ว่าผลลัพคืออะไร

Edit profile

Change password

Search topic

Search

Question & Answer Thank you