الأسبوع 7 · الدرس ١ «مبادئ تصميم واجهات احترافية شيقة للمواقع الإلكترونية» (١): تجربة المستخدم UX ومبادئها · 3 دروس
2
Easy to find: navigation
ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 42–46
GoalDesign a simple main menu with four or five clear items.
New words
navigation · moving around a website or an app to find what you needmain menu · the list of main places in a site or appbutton · a part of the screen you press to do somethingmenu item · one choice in a menu
Explanation
Navigation is how you move around an app to find what you need. The main menu is the map of an app. A good main menu has only a few clear buttons, four or five, with names that say what they do, such as Home, Lessons, Homework and Help. A poor menu is long, hides choices inside other choices and uses names nobody understands. When a menu is too long, people give up. A good rule is that a user should reach any page in only a few steps. On paper you can plan a menu like a wireframe: a simple drawing in boxes that shows where the menu items go before any real work starts. The names must be short and in the same order on every page.
A
1
School app: main menu
2
Home
3
Lessons
4
Homework
5
Quiz
6
Help
Worked examples
Before
After
buttons
14
5
steps to the timetable
many
one
A student app has a menu with fourteen buttons, some inside others. A new student looks for the timetable for two minutes and gives up. The team cuts the menu to five clear buttons. Now the timetable is one tap away.
draw the menu→say the names to a friend→does the friend guess?→fix unclear names
Hana draws her own menu on paper for an invented school club app: Home, Events, Photos, Contact. She says each name aloud to a friend, who guesses what is behind each button. The friend guesses all four, so the names are clear.
Class activity
Plan a main menu for an invented school club app with four or five items. Draw it as a list of boxes. Test it on a family member: say each name and ask what they think is behind it. Change any name they do not understand.
Practice
1
What is a main menu?
The list of the main places in a site or app.
2
How many items should a good main menu have, roughly?
A few clear ones, such as four or five.
3
Why is a menu with many hidden choices a problem?
People get lost, tired and give up.
4
Write good names for four buttons of a school app.