تصميم موقع إلكتروني
مُقدَّم| English | المعنى |
|---|---|
| information architecture/ˌɪnfəˈmeɪʃn ˈɑːkɪtektʃə/ | هندسة المعلومات |
| wireframe/ˈwaɪəfreɪm/ | المخطط الهيكلي |
| 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.
أي مهمة تمنح المشارك هدفاً قابلاً للملاحظة؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
إيجاد معلومات محددة يعطي نتيجة يمكنك ملاحظتها والتحقق منها.
اكتب مهمة قابلة للمراقبة لعضو جديد ينضم إلى النادي وي زار الموقع الإلكتروني.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
مثال: "أين يجتمع نادي الروبوتات هذا الخميس؟"
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.
ما الذي يجب أن يجعله النموذج الأولي المبكر المفيد سهلاً للنقاش؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يعمل النموذج الأولي على اختبار التنظيم؛ وتساعد التسميات الواقعية المشارك على فهم المسار المقترح.
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.
إعطاء كل عنصر نفس القدر من التأكيد القوي لا يخلق دائمًا تسلسلًا هرميًا واضحًا.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
التسلسل الهرمي يُعبّر عن الأولويات والعلاقات. التأكيد المتساوي قد يجعل العثور على الإجراء المهم صعبًا.
طابق أداة التصميم بغرضها الرئيسي.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
تعمل هذه الأدوات على مستويات مختلفة: المسار، وتخطيط الصفحة، والتجميع البصري.
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.
أيّ منها يُدرَج في سجل اختبار المهمة؟ حدّد جميع ما ينطبق.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
سجّل ما حدث. يمكن أن يتبع ذلك التفسير، لكن لا يجب تقديم الموهومات كبحث.
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.
رتّب مراحل دورة التصميم والاختبار هذه الأولى.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
المهمة تُعلّم الرسم التخطيطي، والرسم التخطيطي يدعم الاختبار، والملاحظات تُعلّم التعديل. قد تعيد الحلقات اللاحقة النظر في القرارات السابقة.
مسار رباعي النقرات يعمل في الاختبار؛ بينما مسار ثنائي النقرات ملبّس. ماذا تستنتج؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
عدد النقرات هو مجرد ملاحظة واحدة، وليس حكمًا عالميًا على قابلية الاستخدام.