Re-design and simplify admin area. Let's discuss

Hi,

One of the topics we discussed during discussion panel on nopdevdays 2015 was "Re-design and simplify of admin area".

Solution partners and store owners agree that we should make it simpler and more user-friendly. It could be quite complex for a new user (store owner) to start working with nopCommerce. Some pages are just too bloated with settings (e.g. product details page). For example, an option to have less fields during product creation. Better UI/UX. Display some tooltips or tutorials in admin area after installation and first visit to admin area? Responsive admin area?

Let's discuss this topic here. Your suggestions and thoughts are welcome! Then we can summarize all the points and start working on its implementation

P.S. Please find and vote for these work items here and here

Hi Andrei

This is great news, especially for the products page, so many people take a look at the admin and say it is too difficult to use, even after trying to re-assure them that it is not the case.

As you say there is too much going on in one place, and needs to be simplified.

Hi Andrei,
Here are a few things, I think, should be used for admin area.

Relocate the navigation
Instead of putting all the links in the header navigation, it'd be nice to use two column layout. The left sidebar should be used for the links e.g. Dashboard, Catalog, Sales... while on the right side (for smaller screens, only icons can be shown), contents should be displayed in tabs like for Catalog, the tabs would be Categories, Manufacturers, Products, Attributes...
This way, it'll seem like properly organized and store owner at any point of time will know his current location.

Add a Getting Started Page
On the dashboard, show a panel with title "Get Started With NopCommerce" and in it show some items (along with a button next to each item) e.g.
* Add few products [ADD NOW]
Setup a few products to your store

* Add new page [ADD NOW]
Create new pages like About Us, Contact Us etc.

* Configure Payment Methods [CONFIGURE NOW]
See what payment methods you'll be accepting


Show notification counts along with appropriate tabs
Some notification counts should be shown e.g. Order tab will show the number of pending orders, Customer tab will show number of customers registered but not activated etc. They can also be given at the top links where Logout and similar navigation links are shown.

Highlight the Order Status on order listing page
The order status is one of the things that caches the eye of store owner. Why not highlight the status in some way to easily find a specific order. Better user experience can be provided by using ajax based filters for quickly loading orders.

Widget locations for admin areas
I believe this'd be an awesome way for Plugin Vendors to create widgets and plugins for administration as well.


Customer List
The customer lists should provide quick buttons like Send Activation Mail, Edit, Delete etc.

Reports Tab
There should be separate page where all reports can be shown. They may include Best Selling Reports, Customer Satisfaction Reports, Best Reviews Report etc. This'll be useful for vendors as well.

Better Editors
The editors wherever used should show appropriate responses like tooltips, highlights on focus, help text etc.

Native Bulk Import Facility
Store owners should be able to quickly create Excel files for creating product listing and admin should provide native facility to have bulk upload. (Andrei, I did write a windows app for bulk data import which is being used by us for data entry and import to nopcommerce database. We use a fix Excel templates to import the data. I can share the code with you for this function).

Move Widgets to Configuration
A minor thing, but I think currently Widgets link is placed in Content menu, which is a bit wrong. Widgets basically display some programs and they should actually be controlled from Configuration section rather than Content.

Quick Product Editor
This one should do what it says. Show the customer with minimum required fields to create a product. This will be a quick starter for him.

Also the entire administration can be created using some ajax based system like PJAX or framework like AngularJS for fast responses to the owner.

Overall, the emphasis should be 'to show' customer minimum doors to choose the one he wants to rather than showing him with too many and confusing him where to start.
And yes, more the icons, merrier the store owner. :)

I'll get back with some more if I find.

There are some very good open source responsive admin templates based on Bootstrap that I think could provide a great start for a redesigned admin area. Here are a couple of examples but just googling "bootstrap admin" turns up many more.

Gentelella | Demo site

AdminLTE | Demo site

I think a framework like bootstrap is an ideal fit for an admin area where consistent design patterns and usability is more important than customisabilty.

Agree with @petemitch, many examples. Just have a look at http://speckyboy.com/2014/05/16/free-bootstrap-admin-themes/ - just screenshots from admin side panel.

All looks this same.. well, bootstrap. One is quite interesting: http://www.prepbootstrap.com/bootstrap-theme/single-page-admin/preview/index.html because it is different! From the second point of view, if theme will be like many others, store owners will not be shocked.

This what it would be really great - allow users to choose which options put to main side panel, and which hide to, let me call it "advance" or simply "more". What is my point? Some customers use options like discounts more offen then others. So first group could add discount option on main side (main group), second group in this same place can add link to newsletter.

This way you could achive two points - store owners could customize own panel, and such panel will be much more simple for them.

Hi Andrei,


This is great news - Re-designing the admin panel should certainly be on the roadmap for upcoming version(s).


- A simplified design / layout will certainly make the admin panel more user-friendly

- Here are a few more examples of modern admin panels: DEMO 1 & DEMO 2

- If we notice, there are two common things in all these demo admin panels (includes the ones that other users suggested above): A modern admin panel is response and offers a ton of real-time graphs!

- nopCommerce offers a ton of great features and flexible enough to meet most of the store owners. But, it doesn't change the fact that every store can have some unique requirements / needs. One online business might focus on vendor support and multi-store WHILE other business might focus on marketing features offered by nopCommerce to advertise their product line. So, it would be a great addition if admin panel is based on module system so that every store owner can customize the dashboard as per the business needs by simple drag and drop process.

- Today everything is going mobile - A great addition to compliment the nopCommerce admin panel would be mobile app that can allow store owners to manage their store right from the app on their mobile phones. This can be a lot of work and we all can contribute in the development of an Android / iPhone app. The best way would be, start a project on github (or any other place that everyone prefers) and we all contribute to the code, release the app as beta when we have something that works without any issues / bugs, nopCommerce team can make the app part of the official release.

(Currently, wordpress is offering mobile app: https://wordpress.org/mobile/)

More great news about the short term roadmap!Here are my suggestions:

1) As others recommend, the admin should show only the options required by each store owner. Thus I suggest  to have a new menu tab "Site Setup" where the store options (checked/unchecked) would be set-up and then hide in a kind of ACL from the admin all those tabs/sections/settings which are not required. Example of the sselectable options:
General:
Multi-store
Multi-vendor
Multi-language
Multi-warehouse
Forum
Blog
News
etc. etc.
Product Catalog:
Manufacturers
Grouped products with variants
Product templates
Customer reviews
Gift cards
Rental products
Downloadable products
Customer reviews
Inventory control
Shipping options at product level
Product attributes
Product specification
Tier prices
ACL on products/categories/manufacturers
Etc. etc.
Marketing:
Discounts
Affiliates
Reward points
Etc.
Orders:
Shipping process
Payment process
Returns
Customer:
Customer attributes
Address attributes

Etc., etc.

- This could also be a first page during the store setting for unexperienced store owners who want to build their own store.
- It is important to give a detailled explanation of the features in each option.
- If some options are checked/unchecked some default settings should be set. For example if News option is not checked the "News enabled:" setting should be "false"
- We use a similar checklist (almos 100 options) which has proved to be very usefull to produce very detailed and personalized proposals and quotes for our customers. If you think this is the way to go I could contribute with a more exhaustive checklist.
2) A better product import: There are too many unnecessary columns. Maybe have an option for a simpler import template with just the headings of the columns which are going to be changed. Example for inventory update just the SKU and stock columns.

3) Include the Dashboard in the ACL because some store owners do not want their employees to see their orders or sales amount. Maybe use another info as a home for the admin like the Nop Blog

Hi all,

We wanted to share our thoughts on the suggested admin templates.

We have gone through the list with all the admin templates and two of them stand out with best design and look. These are the Gentellela and AdminLTE which we think will fit best. As it comes down to design we will go for Gentellela - it will fit better in the nopCommerce design, it is more clear, the text is more focused and the navigation is simple. Of course there are some things that can be improved like the tabs navigation and some other small stuff. The AdminLTE is also a good choice - it comes a little bit more colorful for an administration like nopCommerce should have, so if these colorful ribbons all over the controls are removed, and the general colors are not so strong, this template is also a good fit. But this is not a small change to be done.

You should also have in mind how the admin templates are organized and implemented. I am mentioning this because two months ago we had to choose similar controls and we decided to buy one set of controls, but their implementation was a big mess and really hard to integrate and work with, so we had to choose another one. So in terms of design and functionality I think these two are the best and will go for the Gentellela. Just have a look at how the controls are implemented, organized, if they can be easily integrated and worked with when taking your final decision.

I will be more than happy to see what you think and discuss this further, so that the best admin templates are chosen for the nopCommerce administration.

Looking forward to any replies.

petemitch wrote:

Agreed with you.

Andrei,
One thing I think that's must of any user interface is that user should know his current position and any operation performed on any page, should redirect him to proper target page.

e.g. Right now, in case of multi-store website, when I am changing settings that belong to any particular tab (e.g. Localization Settings) and I change the store, the general perception is that I would want to change the Localization settings of another store, but current interfaces takes us Store Information tab.

This thing must be rectified for all the pages where javascript tabs are being used. A possible way could be to use history api or hash values in the url to keep track of user visited tabs.