การออกแบบเว็บไซต์
| English | ไทย |
|---|---|
| information architecture/ˌɪnfəˈmeɪʃn ˈɑːkɪtektʃə/ | สถาปัตยกรรมข้อมูล |
| wireframe/ˈwaɪəfreɪm/ | Wireframe |
| visual hierarchy/ˈvɪʒuːəl ˈhaɪərɑːki/ | ลำดับความสำคัญทางภาพ |
| whitespace/ˈwaɪtspeɪs/ | พื้นที่ว่าง |
A new member cannot find the meeting place
- A school club homepage shows a large photo, but the room and meeting time are hidden. The visitor leaves without knowing how to join.
- Start with the audience and a task you can observe: “Find this week's meeting time and room.” Ask a classmate to try it before deciding the design works.
งานใดที่จะมอบเป้าหมายที่สังเกตได้สำหรับผู้เข้าร่วม?
การค้นหาข้อมูลเฉพาะเจาะจงให้ผลลัพธ์ที่คุณสามารถสังเกตและตรวจสอบได้
เขียนงานที่วัดผลได้สำหรับสมาชิกใหม่ที่มาเยือนเว็บไซต์
ตัวอย่าง: “ค้นหาว่าชมรมหุ่นยนต์ประชุมกันเมื่อวันพฤหัสบดีนี้ที่ไหน”
Give information a useful home
- Information architecture 信息架构 groups content and connects pages. List the information a visitor needs, then choose clear page and link names.
- A short route helps, but there is no universal three-click rule. A clear longer path can be easier than a short path with confusing labels.
Sketch a structure you can test
- A wireframe 线框图 is a simple page sketch. Use boxes for layout, but include realistic labels and key content so a partner can understand the choices.
- A template can save time if it fits the tasks. Check its navigation, readability and content space rather than accepting every section it supplies.
For a new member, put “Thursday, 4 pm, room 12” near a clearly labelled “How to join” link. A returning member may need the current project instead. Test both tasks rather than assuming one homepage suits everyone.
กรอบร่างต้นแบบที่มีประโยชน์ควรทำให้สิ่งใดง่ายต่อการพูดคุยในขั้นต้น?
กรอบร่างต้นแบบทดสอบการจัดระเบียบ; ป้ายชื่อที่สมจริงช่วยให้ผู้เข้าร่วมเข้าใจเส้นทางที่เสนอ
Show what matters first
- Visual hierarchy 视觉层次 uses headings, size, spacing and contrast to show relationships. Whitespace 留白 separates groups so they are easier to scan.
- Use a readable heading for each section and a clear label for each action. Colour should support the structure, not be the only sign that something is clickable.
การให้ความสำคัญเท่ากันทุกalways creates a clear hierarchy.
hierarchy สื่อถึงความสำคัญและความสัมพันธ์ การให้ความสำคัญเท่ากันอาจทำให้การกระทำที่สำคัญหาได้ยาก
จับคู่เครื่องมือออกแบบเข้ากับวัตถุประสงค์หลัก
เครื่องมือเหล่านี้ทำงานในระดับที่แตกต่างกัน: เส้นทาง, การจัดหน้าเว็บ และกลุ่มภาพรวม
Test the task, not just the appearance
- Give a partner the task without explaining where to click. Record where they hesitate, which label they choose and whether they find the right answer.
- Change the confusing part and repeat the task. A task test can reveal a problem that a screenshot does not show.
A good-looking page is not proof of a usable route. Do not invent a user quote or call your own opinion user research. Keep actual observations separate from your interpretation.
สิ่งใดควรอยู่ในบันทึกการทดสอบงาน? เลือกทั้งหมดที่ถูกต้อง
บันทึกสิ่งที่เกิดขึ้น การตีความสามารถตามได้ แต่ต้องไม่นำเสนอข้อสังเกตที่แต่งขึ้นเป็นการวิจัย
Turn findings into a design decision
- Create a page list, one wireframe and a short record of two task tests. Explain one revision using what the participants actually did.
- Keep the first version and the revised version so your reasoning is visible. Check the task brief for any required design evidence.
Audience → observable task → content structure → wireframe → task test → revision. Templates and click counts are tools, not guarantees.
เรียงลำดับขั้นตอนของรอบออกแบบและทดสอบครั้งแรกนี้
งานกำหนดให้ร่างแผน, แผนรองรับการทดสอบ และการสังเกตนำไปสู่การปรับปรุง การทำซ้ำในภายหลังอาจทบทวนการตัดสินใจเดิมๆ
เส้นทางสี่คลิกทำงานได้ดีในการทดสอบ ในขณะที่เส้นทางสองคลิกทำให้สับสน คุณควรสรุปอะไร?
จำนวนคลิกเป็นเพียงข้อสังเกตหนึ่ง ไม่ใช่คำตัดสินเรื่องการใช้งานที่เป็นสากล