This is a first mockup for the dashboard for the UTS. We (Bojhan and I) spent half a day trying different approaches for displaying the most essential information of studies. Suggestions are welcome!

Comments

Bojhan’s picture

So after just turning home Nielsbom gave me some insights on what he expected of the information, he found the gray study a bit confusing, is it inactive because it has participants or did it just not have any participants yet?

Completion rate was confusing? Nielsbom thought of the green/red being the success rate of the tasks.

Completion rate > Progress
In development studies > 0 instead of 5 for particpants

boombatower’s picture

Status: Active » Postponed (maintainer needs more info)

How does this relate to #293089: dashboard no-studies.

Bojhan’s picture

That one would be displayed if no study has been made yet.

yoroy’s picture

Only local images are allowed.

Discussed this with bojhan in IRC
- study/task expanded info needs clearer hierarchy and contrast.
- no real issues with the right menu, just a bit unexpected to see a simple menu on the right side.

Overall: nice and compact. Compact is good.

Instead of collapsible fieldsets this feels more like collapsible table-rows. Interesting.

skilip’s picture

Participants in the list should maybe be changed into 'required participants'. That would be more self-explanatory. But that would be a really wide column, and therefore not desirable from the 'eye candy' point of view.

If that's not what we want to display, but instead the number of participants who already participated, then the value of studies in development could be set to 0 indeed. So: what do we want to show?

To clarify the 'completion rate' we could use a tooltip with a little more info about it.

@yoroy: Thanks for your recommendations! I totally agree on all points. About menu on the right: We also tried a block for the menu, but that didn't look as neat as this ;). About the 'Environments': a tooltip could help us out here.

Bojhan’s picture

I think what we want to display the number of participants who participated.

@yoroy : Thanks for the info, we will be working on fixing the contrast

webchick’s picture

Subscribing. This looks verrrrry interestink!

Anonymous’s picture

Comments on the original and on yoroy's version.

- @yoroy - Having the disclosure triangle at the start of the row fixes a confusion point. With it in the second column, it isn't immediately clear what it is.

- The disclosure triangle looks a bit like a "play" button on a media controller. Is departing from the default triangle purely aesthetic, or was there another motivation?

- @yoroy - I agree the expanded study should be highlighted in some way, but I'm not sure about the blue border. What about changing the background colors for the expanded rows a bit? Perhaps bringing the saturation more towards gray?

- I'm not sure what the participant count on each task is trying to tell me. Is it the number of the test total that have completed the task? I.e., 5/5 have completed "Create a menu" and 2/5 have completed "Place menu block in a region"? If so, I think this may be a little redundant with the completion rate bar graph next to it showing the same information. @yoroy - Indenting this number does separate it from the study total, but it now looks like a column with no header.

- Do the bar graphs have tooltips providing numerical data on percentage complete?

- @yoroy - Changing the appearance of the task bar graphs from the study bar graph is good since it indicates they are not equivalent individually with the study. I'm not clear on how these individual graphs are used to compute the parent graph, but that may not be a question that most user ask.

- The button and menu on the right seem really out of place. Are these meant to replace the action tabs normally on top?

- The 'Create Study' button looks a bit like a header for the items below it, and the plus symbol looks a lot like the draggable indicator on the block admin page.

- A button is a call to action -- an interruption in the flow of reading. It's typically used as a sort of punctuation on interfaces. For LTR language readers, the eye will scan across the table header and then to the button. Is this where you want that interruption to happen? Even if it is where you want the reading break to happen, it's very different from the other interfaces the user will have already encountered while using Drupal.

yoroy’s picture

Yeah that's the risk with very designed mockups. My thick blue border around the expanded task wasn' t really an explicit design suggestion, but just pointing out the need of an accent of some kind.

It would be really good to work on more schematic wireframes/mockups because for the moment the design (which is looking really nice) is taking attention away from the real IA/UI issues we must solve first.

Thanks for the extensive review Shannon.

Bojhan’s picture

StatusFileSize
new451.47 KB

To explain a bit further on our process, we provided a high fidelty mockup because we already did wireframes and mockups. Although we could have posted those and went to other interfaces we have a bit of hold up (So we proceeded on just designing a bit more in detail). Due to the fact that some parts of the Analyze UI required a bit more thought and coding then we anticipated, especially as there is still no screen recording plugin yet. This doesn't mean we cant change structural parts of the mockup, if you have a better idea go ahead.

- We are working on the highlighting, from a tab idea purposed in the other issue.

- The play button is a Mac.com thing, we could change it, do you have an idea? I am not sure if Drupal ones applies very well.

- So my idea was, to show the amount of participants who did the study and with the progress bar display how many people acctually successfully completed a task, In case of the study, a combined rate of all the studies success rates.

- They will have tooltips.

- Regarding the graphical bars of tasks, I am not sure what you mean. It is essential information to display.

- Remember, UTS is not a traditional module, it accompanies way more content and forms. Which if placed within the traditional interface will have many problems, for example the tabs are a big usability problem due to the fact that no one sees them.

- I am not sure on your notions of the right menu, it is definitely a completely different way of navigating in Drupal is it therefore out of place aesthetic?

- We definitely want that interruption to happen, it is one of the most important tasks on this page.

We'r not scared, trow anything you got at it and we will see if it's something we can work on. I think like 5/10 diffrent mockups atleast is required to get to a final screen.

Update : I attached a sketch, I was hoping to also scan in the other two but the lines dont seem visible. Maybe I will post them later.

Anonymous’s picture

> - We are working on the highlighting, from a tab idea purposed in the other issue.

The highlighting ideas in #307946: Study Dashboard are looking really nice.

> - The play button is a Mac.com thing, we could change it, do you have an idea?
> I am not sure if Drupal ones applies very well.

I think moving the triangle to the left of the text removes most of the ambiguity. Next to the number, it might be taken as a control to start the study. Apple uses a solid triangle on their desktop UI for disclosure areas. Microsoft uses a round button with two downward chevrons to indicate an area will expand; the chevrons point upward when the area is expanded.

> - Regarding the graphical bars of tasks, I am not sure what you mean. It is
> essential information to display.

I didn't mean the bar graphs themselves; I was referring to the indented participant count for each task. That number seems redundant and a bit out of place. For the study itself, the number in the participants column means how many people have started that study. For the task rows, the context of that number changes to be the number of participants that have completed the task. Completion rate has the same context for study and task.

> - I am not sure on your notions of the right menu, it is definitely a completely
> different way of navigating in Drupal is it therefore out of place aesthetic?

I don't think I understand the context of the items in this menu. Are they all top level actions, or are some of them contextual? The items in this menu changes when viewing an individual task (mock-up in 307946).

I'm not sure there is an existing precedent in Drupal for adding this sort of functionality. I'd look at some other modules that add large blocks of functionality such as CCK, Views, and Panels. I don't think there's a consistent pattern, but possibly some ideas, and probably something that should be touched on in the HIG.

> - We definitely want that interruption to happen, it is one of the most
> important tasks on this page.

What about putting a header over that section with a label like "Actions" and changing create into a link like the items below it? Elsewhere in Drupal, a button is an action on the current form or is in the context of a previous action (confirming a delete, for example); this is breaking that pattern.

Is there documentation such as use cases on how you intend the user to move through UTS performing various tasks?

Looking at this and the other related UTS user interface issues, the project is looking really good.

skilip’s picture

StatusFileSize
new191.45 KB

Bojhan and I took some time to take all suggestions / comments to an new mockup for the UTS Dashboard.

Anonymous’s picture

This looks really nice.

I only have two suggestions on this one:

  1. Change "Progress tasks" to "Task progress" for the English strings.
  2. In the tooltip over task such as the "Add several menu-items" task that you've annotated, provide information has to why 5/5 isn't fully complete. That may be needed the first time someone is using UTS to indicate how the participant count / participant slot ratio differs from the task progress bar.

Great work!

Bojhan’s picture

Yup, I definitly agree on 1. I think 2. could use some work, I will test it with real people but I am quite doubtful it is clear to them, so we might design it better somehow (yoroy also noted this one).

boombatower’s picture

Title: UTS Dashboard » dashboard with studies
Bojhan’s picture

This is ready for implementation.

boombatower’s picture

Assigned: Unassigned » boombatower
Status: Postponed (maintainer needs more info) » Active

I have begun.

boombatower’s picture

StatusFileSize
new6.13 KB

Got some basics working, I will decide how to make the drop-down stuff work later.

This is how far I got today:

skilip’s picture

Here's the PSD.

eigentor’s picture

Just a detail: how about reducing the saturation of the green and red a bit. Huh, pure RGB red and green... Reducing it would Improve scannability and readability.

Marquis’s picture

Subscribing

boombatower’s picture

Status: Active » Needs review
StatusFileSize
new6.03 KB

Early development.

Display study summary and collection task completion information, but doesn't display it.

boombatower’s picture

StatusFileSize
new16.51 KB
new6.76 KB

This displays all the task information and contains some re-factored code.
dashboard
Note: the 7 / 8 participants has no correlation to the progress bar as desired.

boombatower’s picture

StatusFileSize
new9.81 KB

This version in functionally complete!

The collapse/expand js is in place. The only thing missing is additional themeing if necessary.

I decided to remove the links on the right which seem to be duplicate of the menu links that display anyway. Is that alright?

boombatower’s picture

StatusFileSize
new8.7 KB
new9.91 KB

This looks like a committable version. Added a bit more themeing tweaks and fix one logic error.
dashboard

boombatower’s picture

Status: Needs review » Fixed
StatusFileSize
new10.49 KB

Added documentation and committed.

Please open additional issues for further changes. Although it isn't identical in looks it functions the same so I think we should focus on getting all the parts functional for 1.0 and worry about theme tweaking later.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.