Usability issues - Tabs

Identification of the tabs

In the followint table the tab line of each activity is described.

Tab line of the different activities

ID	Activity	Tab line (default tab in bold)	Justification
1	Quiz	Info, Results, Preview, Edit(with subtabs Quiz, Questions, Categories, Import, Export), Settings, Assign roles, Override permissions
2	Forum	Edit, Settings, Assign roles, Override permissions	Edit would contain the information of "add a discussion topic".
3	Glossary	Edit (with subtabs Add entry, Import, Export), Search, Browse (with subtabs Browse by alphabet, Browse by category, Browse by date, Browse by Author), View, Settings, Assign roles, Override permissions	Edit would contain the information of "add a new entry" in Add entry. The print option will be accessible from View.
4	Chat	Enter to the chat (with subtabs Normal mode and without frames and Javascript), chat history, Settings, Assign roles, Override permissions	I would replace "View past chat sessions" by chat history (it must be taken into account that it has been used the concept "message history" previously at Moodle).
5	Choice	Edit, View responses, Settings, Assign roles, Override permissions
6	Assignments	Edit, View attempts, Settings, Assign roles, Override permissions
7	Database	View list, view single, search, add entry, export, templates, fields, presets, Settings, Assign roles, Override permissions
8	Lesson	Preview, Edit (with subtabs collapsed, expanded), Reports, Grade essays, Settings, Assign roles, Override permissions
9	Survey	Edit, View responses (with subtabs Questions, students, download), Settings, Assign roles, Override permissions
10	Wiki	View, Edit, Links, History, Search wiki, Choose wiki links, Administration, Settings, Assign roles, Override permissions	The "reload this page" button must be maintained in all pages.
11	Journal	View Journals, Edit, Settings, Assign roles, Override permissions
12	Hotpotatoe	View Reports (with subtabs Reports, See all course Grades), Settings, Assign roles, Override permissions	The page hot potatoes quiz should not be changed nor the quiz. However, the description of the subtabs above corresponds when selecting a specific potatoes quiz (http://localhost/mod/hotpot/report.php or screenshot 3 of the hotpotatoes captures)
13	Exercise	Info, Setup Exercise (with subtabs Amend Assessment Elements, Submit Exercise Description, Administration), Allow Student Assessments and Submissions (with subtabs Submissions for Assessment, Administration), Show Overall Grades and League Table (with subtabs Display of Final Grades, Administration), Settings, Assign roles, Override permissions
14	Workshop	Info, Description, Grading grade analysis, Administration, Settings, Assign roles, Override permissions

Next of this classification, an analysis of the name of the tabs and their order have been done:

• The world "history" will be used both for the chat and the wiki history. So the tab will be only called "History"
• The order of the tabs will be followed by this logic: info, preview, edit/enter, view, search, add entry, export, templates, fields, presets, results, Reports, Grade essays, history, links, Choose wiki links, Administration, settings, Assign roles, Override permissions. Depending on if an activity has or not this tabs will be ordered in a determined way.
• Another option will be to group in Update tabs Settings, Assign roles, Override permissions, so the order of tabs will be less (because this three tabs previously mentioned would be subtabs). This would be a good idea to reduce the number of tabs and because this actions won't be done with frequency.
• It must be taken into account that by default it would be displayed the tab and subtab that is used more frequently in the activity and the one that describes more its content.

Conclusion

Final Tab line after the study

ID	Activity	Tab line (default tab in bold)
1	Quiz	Info, Preview, Edit(with subtabs Quiz, Questions, Categories, Import, Export), Results, Update quiz (with subtabs Settings, Assign roles, Override permissions)
2	Forum	Edit, Update Forum (with subtabs Settings, Assign roles, Override permissions)
3	Glossary	Edit (with subtabs Add entry, Import, Export), View, Search, Browse (with subtabs Browse by alphabet, Browse by category, Browse by date, Browse by Author), Update Glossary (with subtabs Settings, Assign roles, Override permissions)
4	Chat	Enter to the chat (with subtabs Normal mode and without frames and Javascript), history, Update chat (with subtabs Settings, Assign roles, Override permissions)
5	Choice	Edit, View responses, Update Choice (with subtabs Settings, Assign roles, Override permissions)
6	Assignments	Edit, View attempts, Update assignments (with subtabs Settings, Assign roles, Override permissions)
7	Database	View list, view single, search, add entry, export, templates, fields, presets, Update database (with subtabs Settings, Assign roles, Override permissions)
8	Lesson	Preview, Edit (with subtabs Collapsed, Expanded), Reports, Grade essays, Update lesson (with subtabs Settings, Assign roles, Override permissions)
9	Survey	Edit, View responses (with subtabs Questions, Students, Download), Update survey (with subtabs Settings, Assign roles, Override permissions)
10	Wiki	Edit, View, Search wiki, History, Links, Choose wiki links, Administration, Update wiki (with subtabs Settings, Assign roles, Override permissions)
11	Journal	Edit, View, Update journal (with subtabs Settings, Assign roles, Override permissions)
12	Hotpotatoes	View Reports (with subtabs Reports, See all course Grades), Update hotpotatoe (with subtabs Settings, Assign roles, Override permissions)
13	Exercise	Info, Setup Exercise (with subtabs Amend Assessment Elements, Submit Exercise Description, Administration), Allow Student Assessments and Submissions (with subtabs Submissions for Assessment, Administration), Show Overall Grades and League Table (with subtabs Display of Final Grades, Administration), Update exercise (with subtabs Settings, Assign roles, Override permissions)
14	Workshop	Info, Description, Grading grade analysis, Administration, Update workshop (with subtabs Settings, Assign roles, Override permissions)

Screenshots

Quiz

Glossary

Chat

Choice

Forum

Assignments

Database

Lesson

Survey

Wiki

Journal

HotPotatoe

Screenshot 1: Taking the hotpotatoe Screenshot 2:Listing hotpotatoes quizes Screenshot 3:Viewing the results of a hotpotatoe quiz

Exercise

Screenshot 1: Exercise main page Screenshot 2:Managing the exercise

Workshop

Possibility of moving tabs using javascript mentioned in the Fluid project (Javascript vs. AJAX)

AJAX just uses javascript to communicate with the server in the form of XML. There's no difference between javascript and AJAX, AJAX is an implementation of javascript.

JAVAX it is great for making sites a bit more responsive. Common examples include filling in drop down sub menus based on the users choice. For example, "please select which country you live in" -> "and the city". The non ajax-y way would be to either load all possible citys for all countries (large and slow), and swap between them with something like an onSelect. Using ajax you can wait for the user to select the country, and bounce back to the server to get the city list, and then swap it in. Should send less data to the user, and be a bit more responsive.

AJAX would perhaps be the best option. It must be noticed, that AJAX is mentioned as an implementation at the tabs analysis of Jakob Nielsen's Website.

There is a nice YUI tool that will make this AJAX behaviour easy - tabview Matt Gibson 12:39, 16 August 2008 (CDT)

Circumstances would tabs cause more confusion or not be recommended

It would be recommended to add tabs and delete buttons like the update activity button because the information of the activity is displayed in the same page and accessing with that button increments too much the number of clicks to update.

Furthermore, the tabs is an apropriately use here as it comprises the points mentioned in Jakob Nielsen's Website(Reference 14)

1. Alternate between views within the same context.
2. It logically chunks the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this "mini-IA" problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.)
3. Users don't need to simultaneously see content from multiple tabs.
4. The tabs are roughly parallel in nature.
5. The currently selected tab is highlighted. This is a really important feature that has not been implemented in Moodle tabs.
6. The unselected tabs are clearly visible and readable.
7. The current tab is connected to the content area, just as it would be if we were shuffling several physical index cards that had tabs stuck to them.
8. The labels are short and use plain language, rather than made-up terms.
9. The labels in the rightmost example above use Title-Style Capitalization: each word's first letter is uppercased.
10. There's only one row of tabs.
11. The row of tabs is on top of the panel — not on the sides or the bottom where users would often overlook them.
12. The scope controlled by the tabs should be obvious from the visual design.
13. Fast response time ensures that clicking a new tab immediately brings the corresponding panel to the front. This is probably achieved through AJAX, but the programming technique is not important. What is important is to make the action fast enough (ideally <0.1 s) that people feel there's a physical connection between their mouse click and the appearance of the chosen panel.