Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am looking for ideas on how to bridge the externally facing part of a website with the logged in version.

The externally facing website is fairly regular with a horizontal menu and a number of sub-pages. However, when logged in there is more of a web-application interface (like Google Analytics) with a left-hand navigation.

My concern is that I want logged in users to be able to navigate the external content as well as the web application. At the same time I do not want to clutter the web application with a menu bar for all items pertaining to the regular website.

Any ideas?

share|improve this question
    
We might need more information in order to help. Are both sides (internal and external) exclusive in features, or is there overlap? –  EdGG Feb 4 at 10:27
    
Well, the overlap is that logged in users should have access to the regular website contents while their primary focus is on the web application capabilities in the "logged in" mode. I see a few options: a) keep the website main menu (risks cluttering), b) hide the website main menu (small icon with hover functionality), c) change the main menu and include a new option - Dashboard - indicating logged in mode (External item 1, External item 2, Dashboard). Thanks. –  dani Feb 4 at 10:36
add comment

4 Answers

You can think of something similar to the HSBC website. HSBC website shows fewer options to the general visitor and shows more options to the logged in User. i am not sure about your user base and the business..but you can certainly try this.

Example enter image description here

share|improve this answer
add comment

With the information you provide, the answer has to be a bit generic.

Lets call A the site for non logged in and B the logged in site.

The first thing to consider, is position of objects, for instance if you have a left or right menu on B, but there is no need for in on A, then just leave that space white on A. It it's too wide, you can reduce a bit the space since the perception won't be affected and the use of A would be improved.

If you can provide generic information on A, the use it as place holder for the equivalent interaction on B. On A it would just be an image, and on B you provide a way to interact with that image/graph/block.

If there are navigation links that are going to appear on B, as a block, then try to leave that space empty on A. If you can't, make obvious that those links are "new" on B. By that I mean, make them different from the common links. For instance, you can put them on a box on the left or right side, or if they are on the horizontal menu, put them on the right or left, all together.

If there are too many, just create a new bar that goes below the common one and make it visibly different.

If each page is going to have a lot of changes, then there is no way to do it smoothly.

share|improve this answer
add comment

In the interface you describe I imagine that the company logo is in the upper lefthand corner.

What if: When the user clicks on the logo they get the logged out set of links, but stay logged in and have a link back to the web app and an indication that they are still logged in, probably their name and account links in the upper righthand corner.

This way users can toggle between your public facing site and the logged-in functionality without clutter.

(Not sure I've imagined the placement of things right)

share|improve this answer
add comment

Is good idea to use " Drawers " style for internal interface, when user make click in specific menu or admin areas it will display division like Drawers that could be in another color like more dark that the front in order to give the feel that your customer are getting inside something. You can see a good example of drawers in this framework. http://gumbyframework.com/docs/components/#!/intrinsic-ratio-video

Another idea that I like to use inside for admin area is tabs and transitions, see this template http://www.99lime.com/elements/#tabc2

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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