0

I am a software engineer. Every app I work on includes the need to create, read, update, and delete records. There is a list of records. You can add a new record. You can view, edit, or delete a record.

I mostly use Ruby on Rails. Rails provides a great tool for getting a UI built quickly (called the "scaffolding generator") which generates the layouts for create, read, update, and delete, but it's not exactly pretty. Frameworks like Twitter Bootstrap have become a great resource for quickly building attractive layouts using common UI elements, so most of my projects use Twitter Bootstrap. Yet, I've never seen any design examples of listing and editing records. I want to find best-practice examples of these layouts that I can imitate.

I have questions like:

  • Where should I put the "Add New" button on the list page. Should it be next to the heading, floated right, below the list, etc.?
  • Should the "view" page display an "Edit" button. Same questions apply: where should it be placed?

Can you provide examples of these layouts, or a link to view design patterns that I can imitate?

Update:

To clarify, I'm not interested in admin dashboards. Examples of dashboards are easy to find. http://ui-patterns.com is a great example of what I'm looking for because it details the problem, solution, and when to use it. However, even on UI Patterns, I can't find an example of simply "adding and editing data".

Improve this question
  • 1
    You shouldn't ask us to tell you where to find examples of something. There's no correct answer there. We are a community of UX practicioners / experts, so ask us the actual question and we'll answer it. Such as "Where should the 'Add New' button go on a list page". (Some people here may be insulted that you don't think we're good enough to solve UX issues, and are only useful for providing links to places where good things have been seen). We do 'good stuff' here in our professions on a daily basis, so make the most of the community! ;) – JonW♦ Oct 1 '14 at 15:24
  • @JonW Yes, I understand. That's why I included my questions. – Andrew Oct 1 '14 at 20:24
1

To answer your questions first:

  • the "Add New" button needs to be immediately visible, regardless of the user's screen size or the list's length. That being said, at the top of the list seems to be the most logical (or KISS) choice. What I'd argue is equally important is to make that button really stand out (using color, size, whitespace...).
  • As for the "view " page - the "Edit" button you asked about would then presumably be available for each of the entries, right? If that's the case, then something simple like Twitter's way of hinting tools for each tweet and then making them completely visible when the item is hovered should suffice.

enter image description here

As for the inspiration in Dashboard design, I'd always recommend checking out PatternTap first, as it has listed mostly already implemented UI, already put to work. You could start with http://patterntap.com/?sort_by=created&type=81&style=All&platform=All&page=1 and modify the search as desired.

Other places where you could look for inspiration are Pinterest or Dribbble, but the latter is certainly more about interesting and nice looking ideas than it is about validated solutions. However, depending on the need, both can be quite useful.

Hope this helps!

Improve this answer
0

You should also check out the site UI Patters. You might find inspirations that would spark you with ideas of what you could do, but also (and sometimes more importantly) what not to do :)

You could also check out Dribble for inspiration.

Finally, you should read this post about "The Laws of Sh!&^y Dashboards" ... it's a great read

Also, I don't agree with all the trends listed here, but [this is a good article][3] that summaries a lot of insights.

Improve this answer
  • UI Patterns is a great resource. Thanks for sharing! However, I still can't find a basic example of adding and editing data. – Andrew Oct 1 '14 at 20:25

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.