0

We are currently having landing page as below.

  • There are 'x' number of entities, each entity is displayed as a square,4 in each row
  • All the information related to that entity will be displayed inside the square

Problems

  • As the number of entities gets increased,the number of squares also gets increased and it doesn't look good on UI and UX is also not that great.

What kind of design i should follow here to improve UI and UX. I can provide more info and screenshots if needed. Thanks in advance

  • Even one screenshot would help alot! – Lisa Tweedie Jun 28 '18 at 6:37
  • @LisaTweedie added screenshot – raviraja Jun 28 '18 at 6:40
  • What is the maximum and minimum of items displayed? – rhauger Jun 28 '18 at 6:53
  • minimun is 4,maximum is between 15-20 – raviraja Jun 28 '18 at 6:54
  • My first impressions, the text is too small and difficult to read (lack of contrast betwene the white and green) and there is a lot of whitespace between the columns. – user40113 Jun 28 '18 at 7:55
2

It's not 100% clear from your question, if you could add any other contextual details it would probably be helpful.

The route you want to go down is: grouping.

Start out by trying to group certain entities if possible. You could then implement filters, folders or color coding to allow your users to better make sense and categorize your data.

Edit: for example you could group squares by connected and not connected PCs.

See the example below:

enter image description here

The entities are divided into sections which makes it much easier for the users to find the information they want.

But then again, (and this is where your question fails to provide context) you don't tell us what these entities do... Are they just info boxes or can the users make actions on them?

  • 1
    Yes, maybe group by connected and not connected pcs – rhauger Jun 28 '18 at 7:30
  • @rhauger Good point. I edited it into the answer, thanks. – RobbyReindeer Jun 28 '18 at 7:37
  • Grouping by connected and disconnected PCs is not the correct way to do it because the number varies from entity to entity, we are thinking of grouping the entities based on their functionality. – raviraja Jun 28 '18 at 9:05
0

I think this is solved many many times in UX design. It is simply the problem of having too much information so then you need a different view. Allow the user to control the view by giving them options. You won't know their viewport.

Responsive design blogs will have lots of solutions for this because the most difficult example is going from the web to a mobile interface. Your solution should be responsive to the data so the view could alter depending on how many items they are.

The Apple finder is a good place to start though - here the user is provided with different views at the top and when they are selected they are clearly displayed.

Image view: Apple finder image view

File view: enter image description here

Another way is to use an accordian list - so minimal information is provide on small cards each of which can be opened

Accordian list in balsamiq

Just look about you and find some examples they are everywhere!

Just a note on your current design ... there is a lot of whitespace betwen the columns! And the typography could do with some work - different font choices and sizes could really improve this. White on blue is not very readable either.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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