locked
Creating Floating Toolboxes

    Question

  • Hello,

    I am developing drawing app for W8.1 based on a Silverlight app I have already built.

    The current app has side-toolbars with the drawing tools, similar to most drawing/graphics application out there. The user can also open multiple drawings which are displayed in a series of tabs which can also be re-ordered. The user can print the drawings per tab-order as a single printed document.

    What I'd like to do in W8.1 is:

    a) Allow the user to open multiple drawings and instantiate a new page for each drawing (straight forward)

    b) Have the drawing tools toolboxes floating (or fixed) to the left and right side so that the user can swipe between diagrams but still keep the toolboxes visible and available (not so easy, need help)

    c) depending on how a) and b) are solved, somehow allow the user to change drawing-order (for later printing).  (not easy, need help)

    All underlying architecture will remain much the same as the SL app but I want the UI to conform to W8.1 guidlines as much as possible.

    Can someone advise on a UI approach to this?

    Point me at samples covering solutions similar requirements?

    BTW, the same app will be available for WP8.1 but the toolboxes will popup as needed and I'm not sure if I'll allow opening multiple drawings in the phone app... A similar UI behavior will apply to phablets and split-screen in W8.1 (I think)

    Thanks




    • Edited by blmiles Friday, July 11, 2014 5:40 PM
    Friday, July 11, 2014 5:32 PM

Answers

  • Swiping from the left and right already have global meaning (switch apps and charms) so you probably don't want to put your toolboxes there.

    The navigation bar at the top of the screen would be a good place to allow navigation between tabs.

    The typical place for tools would be off of an AppBar at the bottom of the screen. Pulling them out as palettes isn't a typical part of the design guidelines, but that seems very reasonable for your scenario.

    For a sample UI, take a look at the Fresh Paint app. It allows navigation between a portfolio view and a painting view, so the portfolio can be much richer than just tabbing between documents. Within the painting view the tools are available on the top app bar. For normal use the user has access to the full screen, but can easily swap tools by pulling down the palette.

    If you need implementation help please post specific questions in an appropriate forum (this one is specifically for design)

    --Rob

    Friday, July 11, 2014 6:41 PM
    Owner

All replies

  • Swiping from the left and right already have global meaning (switch apps and charms) so you probably don't want to put your toolboxes there.

    The navigation bar at the top of the screen would be a good place to allow navigation between tabs.

    The typical place for tools would be off of an AppBar at the bottom of the screen. Pulling them out as palettes isn't a typical part of the design guidelines, but that seems very reasonable for your scenario.

    For a sample UI, take a look at the Fresh Paint app. It allows navigation between a portfolio view and a painting view, so the portfolio can be much richer than just tabbing between documents. Within the painting view the tools are available on the top app bar. For normal use the user has access to the full screen, but can easily swap tools by pulling down the palette.

    If you need implementation help please post specific questions in an appropriate forum (this one is specifically for design)

    --Rob

    Friday, July 11, 2014 6:41 PM
    Owner
  • Thanks Rob, I'll look at that app.

    I thought my post appropriate here as it is UI design for Store apps, no?

    Where else should I have posted it?

    Thanks

    Friday, July 11, 2014 6:55 PM
  • This is the right place for the current thread. Followups on how to implement the design would go elsewhere.
    Friday, July 11, 2014 7:16 PM
    Owner