Hi, i am developing a website and i am finding it difficult to come up with a suitable interface to capture 2 timeframes that they user needs to enter into a form.
This is a difficult problem to explain, so apologies if i don’t get the message across after one read.
The user has 11 weeks (77 days) to carry out an overall task. Each task comprises of 2 sub tasks (task A and task B). When the user is building the task using the task creation form, they have to choose a timeframe for both task A and task B. The user does not have to use all of the 11 weeks, so they could choose to allocate 1 week to task A and 1 week to task B, however i need some way to show that the choice of one timeframe affects and reflects the choices available for the other timeframe.
For example, if the user chooses a timeframe of 2 weeks for task A, then i need the UI to represent that only 1 - 9 weeks are left for task 2 BUT they do not have to choose all of the 9 weeks… OR if the user chose 5 weeks for task A, then the UI needs to show that only 1-6 weeks are now only available for task B.
The UI must clearly illustrate that both of the timeframes are linked… i do not want to use 2 drop downs where the choice of one reflects the choices available in the other drop down as it will not be obvious to the user that these timeframes are dependent and linked to one another.
This sounds like something that should be done ‘graphically’. What I mean is; instead of traditional Web Form elements, maybe you should investigate some more GUI javascript controls.
Allow the user to ‘Click’ or ‘Drag’ elements to demonstrate their intended associations.
I can picture two horizontal bars, one above the other, that start of equal length—one for Task A and the other for Task B—that both start with 5.5 weeks allocated to them. If you drag the right end of the top bar to the left to make it shorter, the figure of 5.5 weeks reduces, say to two weeks, and the text to the right of the bar would not indicate that 2 weeks have been allocated to it. The the line below, for task B, would get longer at the same time, the text at the right indicating that there are now 9 weeks available for this task. If you think you could do it in less that 9 weeks, you’d drag the right of that bar to the left, and set it to—say—three weeks.
Graphical interfaces should always simplify understanding of tasks, however text is the basis of web accessibility.
How bout creating a sprite of an 11 week calendar, days in weeks could be crossed out.
Your application could output the text into an element ( let’s say a DIV) “Weeks remaining (available) for other projects: X weeks”, you could use .js to give the DIV a CSS class concurrent with the # weeks available that would image replace the text with the appropriate section of the calendar sprite.
Additionally, you could color code the text as well, to serve as a fall back for for when images are are off …
