Mendesain situs web
Diperkenalkan| English | Makna |
|---|---|
| information architecture/ˌɪnfəˈmeɪʃn ˈɑːkɪtektʃə/ | arsitektur informasi |
| wireframe/ˈwaɪəfreɪm/ | wireframe |
| visual hierarchy/ˈvɪʒuːəl ˈhaɪərɑːki/ | hierarki visual |
| whitespace/ˈwaɪtspeɪs/ | ruang putih |
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.
Tugas mana yang memberikan peserta tujuan yang dapat diamati?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Menemukan informasi spesifik menghasilkan hasil yang dapat Anda amati dan periksa.
Tulis tugas yang dapat diamati untuk anggota klub baru yang mengunjungi situs web.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Contoh: “Temukan di mana klub robotika bertemu hari Kamis ini.”
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.
Apa yang harus membuat wireframe awal yang berguna mudah didiskusikan?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Wireframe menguji organisasi; label realistis membantu peserta memahami rute yang diusulkan.
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.
Memberikan penekanan kuat yang sama pada setiap item selalu menciptakan hierarki yang jelas.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Hierarki mengkomunikasikan prioritas dan hubungan. Penekanan yang sama dapat membuat aksi penting sulit ditemukan.
Cocokkan alat desain dengan tujuan utamanya.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Alat-alat ini beroperasi pada tingkat yang berbeda: jalur, tata letak halaman, dan pengelompokan visual.
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.
Manakah yang termasuk dalam catatan tes tugas? Pilih semua yang berlaku.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Catat apa yang terjadi. Interpretasi dapat mengikuti, tetapi observasi fiktif tidak boleh disajikan sebagai penelitian.
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.
Urutkan tahap-tahap siklus rancang-uji pertama ini.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Tugas memberi informasi pada sketsa, sketsa mendukung pengujian, dan observasi memberi informasi untuk revisi. Iterasi selanjutnya mungkin meninjau kembali keputusan sebelumnya.
Jalur empat klik yang jelas berhasil dalam pengujian; jalur dua klik yang membingungkan tidak. Apa yang harus Anda simpulkan?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Jumlah klik adalah satu observasi, bukan verdict universal tentang kegunaan.