2

In this software a user can enter a query and the system produces an image or an output. Attached to the output is a toolbar that modifies The output based on user input. however with the current design, I'm unable to come with a responsive layout.

enter image description here

1 - When the width of the suggestion bar is reduced how can I make sure that user is able to use the options provided by the suggestions bar.

2 - Some of the items in the suggestion bar contain additional features. How can my responsive bar accommodate them?

3 - On clicking more, a table of additional choices are produced as shown in the image. How can my design accommodate this table?

My initial idea to solve this problem was to let the items in the suggestion bar overflow. But for some reason that does not convince me much. I even considered bootstrap style responsive menu, with nested elements opening up as accordions.

I wonder if there is an interesting style that could be applied here. Thank you for your help in advance.

P.s: Yes, the current design is kinda messy and cannot be completely omitted.

Improve this question
1
  • Could you give a little more context? Are users customizing multiple controls (as in an e-commerce context, customizing the product they want to order) or are they selecting something from a hierarchy, or selecting multiple things? Is the toolbar used to modify the output or is it really modifying the query, indirectly modifying the output? Having a better idea of the interaction might help people come up with suggestions more easily.
    – Nate Green
    Commented Dec 28, 2015 at 21:54

1 Answer 1

Reset to default
2
+50

Attaching a suggestion.

1) Its an accordion suggested which opens up a sub-menu (Sliced, Chopped etc) if available. 2) More is avoided, and scroll takes care of more content. 3) If there are categories like seen in your sketch, a tab is suggested.enter image description here

UPDATE based on comment and more context:

enter image description here

Improve this answer
2
  • Thank you for the response. Your suggestion assumes that there are 3 Menu items { Fruits, Veggies, Dressings}.. However, this list could extensively large for a different query like " eg: " image of an animal " or "Continents and countries". I thought about the accordion, but unfortunately, in this case I don't think it will work.
    – Nodnin
    Commented Dec 22, 2015 at 20:01
  • @Nodnin this context was not clear from the image - I updated the comment above to reflect a possibility. See if that helps - but I have retained accordion, as since it would be used for few options, I think it works well here.
    – Amit Jain
    Commented Dec 22, 2015 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.