SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    11 Week Interface

    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.

    Thanks in advance if you for reading this far ;-)

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,337
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, yes most definitely... i am already using sliders etc on the form but i can't think how i can illustrate the above

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah cool, thanks, that could be an idea...

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    hhmmmm...

    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 ...

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    A few sketches, for what they're worth....

    Drag the green vertical bar to set the time for the first task.
    Drag the brown vertical bar when finished with the second task.

    The weeks scale can show total days for both tasks (the top four) or days per task (the bottom two).

    A JavaScript project, for sure.

    The autoscaling percent scale was added as a personal challenge. Please ignore it.
    11WeekInterface.jpg

  8. #8
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, that will help... 2 sliders should do it nicely... thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •