Alternative to dashboard/portal page menu pattern?

Question

Right now our application's opening page is a bunch of buttons vaguely grouped into categories which link to assorted areas of the application. Some of these links bring you to deeper application pages (settings menus, data tables, etc.) while others bring you to nested dashboard pages.

I want to avoid this design as much as possible because:

• It slows down navigating to deeper pages with actual functionality
• The pages themselves are very sparse, being nothing more than links, which makes them feel more like placeholders than actual destinations
• It's generally just an ugly design pattern

So I'm looking for some alternative designs to try here instead of lists of grids of icons. One idea I've floated has been to turn these pages into summary pages which instead of button links have summary information about the page they're linking to. Another alternative I've considered is just going with a Windows-style dropdown menu, but since this is a responsive webapp that kind of navigation will be hard to implement nicely given the scale of the navigational hierarchy.

EDIT: Below's a quick mockup which is essentially what the current system looks like. The placeholder images are intended to be icons semi-relevant to the section contents and pressing either those icons or the link text will bring you to the page.

Ideas?

Answer 1

Ideally you could provide me exactly what I need without any input. This is, of course, impossible to do with various types of users all wanting different things. The reality is some businesses just have a lot of content that needs to be accessed at different times by different people so here are some things to keep in mind as you redesign your portal pages...

1. Less is More

The paradox of choice is a funny thing. It's possible to give someone so many options that they no longer have any options. This is why the first thing I try and do during a redesign such as this is justify every link. Make sure that it absolutely has a purpose for existing and that its purpose will undoubtedly make someone's life easier.

2. Try Recommending instead of showing equal choices

Users often prefer recommendations because it requires less thinking so if some things are better than others go ahead and make them stand out.

source: goodui.org

3. Group items into bite sized pieces

It sounds like you have already chunked out the navigation links into categories making them easier to digest which is good. Be sure to show the most important groups up top.

source: Khan Academy

4. Progressive Disclosure

When items aren't really accessed that much then you can reduce the cognitive load on your users by hiding them until they ask to see more. Sometimes it isn't possible to rank one group or item above another but when you can do this without guessing then consider showing only the most important Groups as well as the most important items in each group.

5. Test early and test often

Get feedback from a core set of your users as soon as possible to make sure your redesign efforts really will make their life easier. Don't get too attached to any single interaction and allow the process to be iterative. The best patterns will survive.

I hope you find some of these tips useful and good luck in your navigation overhaul.

Answer 2

The two alternatives you've mentioned:

• Summary pages
• Windows-style drop downs

An alternative that I've come up with is almost a combination of those two. Instead of an icon-based dashboard, I've come up with a windowed dashboard:

Each window could list the various sites as links or buttons, with hierarchical links displayed as nested items:

The above screenshot also shows the responsive capabilities, you simply resize individual windows based on the given resolution. If two windows are shown side-by-side in a landscape browser, they could be shown top-down on a smaller mobile browser.

Each window could also be collapsed, allowing for users to customize what they see:

Just some ideas based on dashboards I've used that work well.

Answer 3

I was confronted with this challenge recently as well. There is a desire to have a "cool" portal page with lots of vaguely relevant icons leading to specific functional areas of the app.

The trouble is, the whole thing feels forced. And if your app suite (or set of views and activities) gets very deep, the portal has a tendency to be either too shallow or too cluttered.

Maybe you don't need a portal at all?

What if all you really need is a better information architecture and navigation solution within the actual views of your app? Chances are, you have a few main regions:

1. Major functional areas. These are the generalized buckets for types of activities.
2. Views within those functional areas. This is where an activity gets kicked off.
3. Detail / drilldown pages. These are the supporting elements of an activity.

(Please accept my apologies for the following Googleness — it's the first thing that came to mind and I can't share my work yet)

The major areas

These are like distinct apps (or sub-apps) that interact with one another. You could switch between them like you switch between Google apps, either in response to a step in an activity or explicitly via an app menu. The app menu feels to me like a more modern answer to the portal: it's not a whole page and it can stay with you throughout the app(s).

Secondary views

These are where you dive into specific activities (or tasks, jobs, etc), views within the current app. Tabs seem like a good fit for this and they could work on desktop and mobile.

Detail pages

This is where the user starts to dig down to learn and get things done. In a mobile context, the page title might change and backing up would take you the other direction. These are also a good fit for sub / side nav menus.

User preference

At any point from the second level down, the user may want quick access to a view. They may even want that view with their own set of parameters applied (like filters). This is where you can provide a sort of custom portal, like the app menu but for user "favorites". The FAB menu comes to mind, but imagine it with a star or bookmark icon.

YMMV

That's where I'm headed any way. When I work through my job stories, it just seems like the best experience. I won't be testing one against the other for a few months, but initial guerrilla feedback tells me it's the right track.

Answer 4

While I have no idea of what content you want to display, you could try Google Material's cards , adding your heading as a card, then supplemental actions if needed, and a list of contents for that particular card.

Since cards allows for heterogeneous content, this could be very suitable to your specific needs, not to mention these are very nice elements to "dress up" a desktop version. See image below:

As you may see, you can use a wide variety of contents inside a card. And while technical specifications says you should only use one link, you could go out of the card logic and add as many links as you want, or even links with explanatory text and icons, like a list inside a card. You're not supposed to do it, but nothing wrong will happen if you do!

And while we're in the Material Design lists realm, you could simply take a look to those features to get more ideas. For example, take a look to the images below:

Here you can see a nice display of lists and expanded info behavior. It looks nice on mobile, but of course it will look dumb on desktop, so you may adapt the list to a card or grid list or whatever in order to take advantage of available space.

Anyways, it will depend on your content and the visual reference you want to provide to users. Since you mention images and icons, it's a bit hard to say, but hope these ideas are of help