UI Design Optimization Plan

[pfliu-nlp]

For New Users

• Figma

Homepage

Relevant Discussion:

• Suggestion about changing home page instructions #304

• 1. It is better to have a general introduction of ExplainaBoard in the home page. (proposed by @qjiang002)
• 2. Maybe add an overall instruction of creating a new system at the home page, and add the file format for each task in the overall instruction. (proposed by @qjiang002)
• 3. Maybe add definitions for some terms, for example, 'system', 'bucket' (proposed by @qjiang002)
• 4. The current home page only explains what each tab does. It doesn’t tell users what ExplainaBoard is and what benefits it brings to them. It serves the tech demo purpose but is not self-explainable as a standard-alone website (proposed by Ying)
• 5. One short sentence to state the platform’s value proposition (proposed by Ying)
  • Example: Fair and detailed comparison of AI model performance
• 6. A few bullet points to describe its key benefits to the targeted audiences (proposed by Ying)
  • Example: Quickly evaluate model performance across datasets
  • Example: Compare your models against the others under the same setting
  • Example: Find the best-performed model for your dataset
• 7. Only the white boxes of the two parts of the Home and Terms page use rounded rectangles. Considering that almost all color blocks of the whole website use square rectangles, we can consider the unified style (proposed by Zhoumianze)

Navigation Bar (on the left side)

• 8. the left navigation bar will scroll as the object in the right page scroll (for example when ones browse the datasets), we can consider keeping the navigation bar fixed (proposed by Zhoumianze)

Dataset Page

• 9.Some text in different columns will be overlapped. for example, the dataset of ai2_arc (proposed by Zhoumianze)

System Selection Page

• 10(a).Multi-selection Labeling Issue: For Pairwise and Multiple System Analysis, if you selected multiple systems from the same creator or with the same system name, the bars will be all in the same color so that you cannot differentiate them. (proposed by Ying)
• 10(b) it would be nice if the information of selected systems could be exported (e.g., overall performance, system names)

System Submission Page

• 11.Provide detailed Client API commands in ExplainaBoard Web Platform (Provide detailed Client API commands in ExplainaBoard Web Platform #260, UI Design Suggestion of ExplainaBoard Client explainaboard_client#38)

System Analysis Page

• 12.When hovering over the bar chart, the pop-up window shows the details. The “name” showing there is the name of the x-axis legend (e.g. accuracy), not the name of the selected system or data. Again, you still cannot differentiate what each bar represents. (proposed by Ying)
• 13.Fine-grained Performance: It took all of us a while to understand the relationship between “right/left bounds +/-”, “the number entry boxes”, and the “scroll bar”; what the numbers stand for; and why they need those settings. (proposed by Ying)
• 14.They (test users) were not familiar with some of the metrics. They would love to have more explanations (e.g. what is lexical diversity). (proposed by Ying)
• 15.They didn’t understand the difference between the yellow dot and the red dot. (proposed by Ying)
• 16.Under “Fine-grained Performance”, it says “Click a bar to see detailed cases of the system output at the bottom of the page.” I tried but nothing showed up at the bottom of the page. (proposed by Ying)
• 17.When running Multiple System Analysis, the “Significance Test” section was disabled and it shows “Significance test is not available for Single System Test”. (proposed by Ying)
• 18. It would be nice if statistics existing in these histograms could be exported.
• 19. Summarize fine-grained analysis results in plain and intuitive language
• 19-2: the current design of bar charts are kinda ugly, potential improvements
  • the error bar of confidence interval could be smaller?
  • that bucket name might be written as an interval like (1, 4)
  • Transparency can be added to the border and filling color of each bin.

General Format issue

Some elements are not spaced evenly apart

• 20. benchmark page (proposed by Zhoumianze):
• 21. sign-up page (proposed by Zhoumianze):
  

For Returning Users

Pre-populate

• 22. Select dataset -> leaderboard -> submission form

Cache global most-visited info

• 23. Most-used datasets
• 24. Most-used tasks
• 25. New SOTA?
• 26. Newest datasets

Cache individual most-visited info

• 27. Most-used datasets
• 28. Most-used tasks