0

I have a modal that is so boring and ugly I cannot stand to look at it. In a user table, the user can press a button to view all details about the user (the table only shows name, role, etc). This modal ends up looking like

enter image description here

I have bootstrap at my disposal, obviously, but I don't know what I should do to make this look any better.

closed as off-topic by Graham Herrli, Mayo, Devin, nightning, JohnGB Jul 4 '16 at 8:23

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – Graham Herrli, Mayo, Devin, nightning, JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

3

It'd be great to have a photo. Either way, what you need is some good 'ol design here (UX and graphical). There is a lot of pointless text I would eliminate. My emphasis with bold type may be completely out of character for your app, but see my image below for some ideas.

enter image description here

0

Ah, the classic key/value display. I agree with Rashcom- avoid unnecessary text, and use some color to both break up the monochrome and help the user easily read and understand the information. Here's another example: Screenshot of key/value display

Here are some ideas/principles when displaying key/value pairs:

  • Bold and right alignment helps distinguish the keys from the values
  • Color helps the user quickly understand information/status (just like the green check in Rashcom's example)
  • Icons help the user quickly recognize enumerated values (e.g. the "Mail" portfolio is one of only 5 unique values, so the icon can be learned)
  • The dotted line under some values invites a hover over for more detailed information
  • Values are formatted (currency, missing consistently as N/A, etc.)
0

Find some inspiration

This is not the straight forward answer that you want, but it's an answer that is going to help you time and time again when it comes to things like this.

This isn't as much about the user experience as it is about a good looking UI, so it's likely you will face this question again with another part of your project, or while working on a future project. Someone's suggestion here may not hold true for the next time you want to display some information.

Try google searching images for what you're looking for, or just browsing websites that you like, even a simple google search for "beautiful user interfaces" will give you a ton of blog articles and inspiration that you can draw on.

A couple of my favourites are behance and dribbble - try searching on there or narrowing down by tags, and you will find some really great inspiration. I think that this is going to help you to build on some of the ideas that you have for good UIs. As a UI and UX designer myself, I am constantly looking at new designs that I can borrow from replicate in some way.

Take something like this design from Leon Wu on Dribbble for example - it may not be at all right for what you need, but maybe the layout works well, or may the skeuomorphism is something you like. That's the best bit about inspiration, you only have to like a tiny bit of a design and build on that. Keep looking and you'll find something!

Image from dribbble by Leon Wu

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