2

four boxes showing different type of results

I'm working on a web application where I have 4 result types of a data and I'm showing all four on the page in same row with same look & feel of divs (can be seen in picture). The Box_D result is calculated using different techniques so I want to show it slightly different from rest of the results (i.e. from Box_A , Box_B & Box_C) but I don't want to change the look and feel of the Box_D. What will be the best approach to design the div such a way which makes user think its somehow different from other results. I have options of adding a lighter shadow, Border , or making the div smaller/bigger than the rest. Which approach will be the best according to user experience perspective? I'll be thankful for your valuable suggesstions.

3

I would simply separate it a little bit from the group and put a subtle divider in between. White space is a powerful tool for grouping.

enter image description here

  • 1
    Thank you DasBeasto for your suggesstion..Its really a good idea. +1 – Omar Bahir Jul 13 '15 at 16:37
-2

You want to create a class for all divs.

<div class="box"></div>

but for the last div, create an id.

<div class="box" id="rightbox"></div>

then style them via css

    .box {
//Your styles
}

        #rightbox {
// your unique styles for the right box
    }

Make sure that you mark conflicting styles as !important in the #rightbox stylings. e.g if you add a different border style.

  • 2
    I think the question is asking about what's a good way to let users know visually the data in Box D is different than that of the other boxes and not how to implement styling. – nightning Jul 13 '15 at 19:09
  • Kindly read the question again. I'm not asking about code or ways to implement styling for divs. – Omar Bahir Jul 14 '15 at 4:53

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.