Designing a website · 网站设计
| English | 中文 | Pinyin · 拼音 |
|---|---|---|
| information architecture/ˌɪnfəˈmeɪʃn ˈɑːkɪtektʃə/ | 信息架构 | xìn xī jià gòu |
| wireframe/ˈwaɪəfreɪm/ | 线框图 | xiàn kuāng tú |
| visual hierarchy/ˈvɪʒuːəl ˈhaɪərɑːki/ | 视觉层次 | shì jué céng cì |
| whitespace/ˈwaɪtspeɪs/ | 留白 | liú bái |
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.
Which task gives a participant an observable goal?
Finding specific information gives a result you can observe and check.
Write an observable task for a new club member visiting the website.
Example: “Find where the robotics club meets this Thursday.”
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.
What should a useful early wireframe make easy to discuss?
A wireframe tests organisation; realistic labels help a participant understand the proposed route.
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.
Giving every item equal strong emphasis always creates a clear hierarchy.
Hierarchy communicates priority and relationships. Equal emphasis can make the important action hard to find.
Match the design tool to its main purpose.
These tools operate at different levels: route, page layout and visual grouping.
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.
Which belong in a task-test record? Select all that apply.
Record what happened. Interpretation can follow, but fictional observations must not be presented as research.
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.
Arrange the stages of this first design-and-test cycle.
The task informs the sketch, the sketch supports testing, and the observations inform revision. Later iterations may revisit earlier decisions.
A clear four-click route works in testing; a confusing two-click route does not. What should you conclude?
Click count is one observation, not a universal verdict on usability.