Is it possible to customise layout of My Tasks screen?

my-tasks
design
ux

#1

Questions about some usability issues on the My Tasks screen.

On clicking “My Tasks”, a panel appears in the centre (horizontally) of the screen, with lots of whitespace either side. This panel contains a list of tasks. On clicking a task this panel jumps and left-justifies (so that a new panel may open to its right) - this jump creates extra visual work to have to look for the information again. I would think that consistently positioning objects in the same place makes a system predictable and easier to use.

However the larger bugbear is that the new panel at right hand side of the screen occupies only about 40% of the screen width. The left 10% is dedicated to the menu (fair enough) but then a full 50% of the screen width is dedicated to the panel listing tasks (in which I just clicked on a task). I would have thought once you click on a task you have made a selection that says “I want to see information about this task” and that the right panel should occupy about 80% of the screen width. As it stands, this view compacts the densest information on the page into a small space that is right-justified - firstly, this makes reading the information tedious because it is dense and a lot of scrolling is required; secondly because typical user interaction with web pages has users scanning in an F-shaped pattern and the right hand edge of the page is one of the least viewed portions of the screen - making searching for information here run against common instinct as well.

Lastly, although the screen is laid out as a series of panels, there are not adjustment tools (that I can find) to re-size those panels so that I can dedicate more screen real estate to the information that counts - the selected task.


#2

You make some valid points IMHO. Two comments:

I think the reason the task list is displayed as it is, taking up some width instead of being extremely compacted, is that drag-and-drop operations between the task list and the selected task are possible and in fact are an important aspect of rearranging subtasks.

I’d argue that placing the detail on the right-hand side goes in accordance with expected UI behavior in that it follows the common pattern of proceeding down the object hierarchy from left to right - teams/projects to the left, tasks within one project to the right of that, individual tasks within that list to the right of the list. Like Outlook, for example: folders on the left, a folder’s email list to the right of that, and a specific selected email to the right of that (yes, I know, the email pane can be positioned below the list but that’s not the default).

I agree with you about the white space, and I DEFINITELY agree with you about not having the ability to re-size panes - that last one is a bit of a head-scratcher to me as to why it hasn’t been provided.


#3

Hi Phil,

Thank you for your comments. In response, I think if you’ve clicked on a task then your attention is going to be toward reviewing that task. If the purpose for reviewing is in order to drag and drop tasks into a new sort order, then at the least the list can be minimised when the task detail pane is open, and when you hover the mouse pointer over the task list it can be expanded over the top of the task details pane so you can read full task titles in order to drag and drop. Mouseout and the pane should shrink again.

Regarding the left-to-right perspective (in cultures that read left-to-right, mind you), I agree the right hand side is the logical position for flow of information; I guess what I mean is that by making it only 40% of the width it really pushes it to the right hand side. If the menu occupied 10% at left, then a collapsed task list occupied another 10 or even 15%, that would leave 85% of the screen space to the task description itself. Yes, it would technically be to the right but its width would give it prominence and focus.

I guess I’m asking whether there is anything I can do to customise this view for myself. In lieu of a “no” answer, then this thread becomes feedback to the designers.


#4

@chris.rehberg. Not as part of Asana itself you can’t. However using CSS Styles you can modify and create your own layout.

If you search in the Community you should find topics on this.

Jason.


#6

Thanks Jason,

I found references to creating a userContent.css file for Firefox - which didn’t work for me.

I then found a suggestion to use a plugin named Stylish - which didn’t work for me.

I then found a suggestion to use a plugin named Stylus - which did work and is easy to use.

Noting these here for others.


#8

Postscript: following are the styles I have applied. Number selections are somewhat arbitrary and some values here unnecessary, but this should give others a start. First two elements style the “My Tasks” view as requested in my original post; last two elements style a saved search.

.PotListPage-gridPane {
    flex: 0 1 500px;
    min-width: 205px;
}

.PotListPage-detailsPane {
    flex: 0 1 1675px;
}

.SearchListPageView-gridPane {

	flex: 0 1 500px;
	min-width: 205px;
}

.SearchListPageView-detailsPane {

	flex: 0 1 1675px;
	min-width: 495px;
}