5

Specification:

  1. The aim of the design below is to create one module by using 3 set of templates.

  2. Each template is having list of templates which are coming from different database tables.

  3. Template set selection is an optional thing. Users can select multiple templates from each template set.

  4. Name, Description and Price are required fields.

I have designed a screen as shown in the image below as per the above specification.

Image 1: First design is a tabular layout in which 3 template sets are shown in one table in 3 different columns. This is a technically challenging thing.

Note 1: We can't build a one table layout because all three datasources are going to bind dynamically and we will not able to bind the data which comes from a single table.

Image 2: Therefore designed the second layout which has a separate table for each template set.

Note:

  1. We can build a 3 tables layout but design of the three tables will change in accordance with the data, so all table rows will not appear in one line.

  2. I am not using multi-select dropdowns because I want to show all templates on the screen.

The layout is not looking so attractive from a UX perspective. Can anyone suggest a better UX than this or any improvement I can do for the UX?

Image 1:

enter image description here


Image 2:

enter image description here

1 Answer 1

1

Solution for three column table design;
a) remove main checkbox left to the title, instead place option with "select all" in first row just above the first checkbox
b) limit all 3 columns to equal number of rows, e.x. 4
c) under 4th row, place "toggle more" that toggles rest of rows. or place scroller inside column

Solution for 3 tables, stacked below each other a) same again - remove check from title and place it on top of first row
b) make all titles accordion style, when clicked they expand or collapse row below
c) make first table / section, toggled on by default, and two others closed.
d) place icon for togling on / of (can be chevron up vs chevron down, plus vs minus...)

This second accordion solution should be ok also for mobile usage. For mobile you can make this Publish and Cancel buttons sticky to bottom so they are always there with scroll.
Also I would recommend always making not only checkbox clickable, than also a title next to it.

Additional design attractivnes you can acomplish with having no borders tables, hovers efects, toggle animation and so on.

Your Answer

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

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