If you are not a technical expert, it is often a good idea to get someone like myself to re-design your site on your behalf. We understand the latest aspects to consider that keep a site relevant. The things that keep sites like Partypoker, Facebook and Twitter relevant to the times, and reduce others to redundancy.

What are the reasons to re-design though?

Keep it fresh 

When people create a website, they don’t always update it like they could and should. After a while it will become outdated and the site will appear obsolete to potential customers. A re-design will show your visitors that you are pro-actively working to improve your site and benefit them. They will appreciate it. The more active a site appears, the more likely someone is to access it again.

Keep ahead of the competition 

In whatever venture you travel down, there will be competition keeping you on your toes. It is the same with websites. There will be plenty of others offering similar information, and you want to stay ahead of them. By keeping new markets in mind and the new developments in social advertising and networking, you can incorporate this knowledge into keeping your site superior to all others.

New Platforms

New technologies come and go as fast as the seasons, and you will need to update the design on your site to keep up with changes in software. Meanwhile the incorporation of this new technology will also enhance the usability of the site in the long run. Things will never progress if you don’t upgrade.

Tools 

A website is not just about the images and the text any more. A well designed website will incorporate a wide number of tools that include: blogs, social media and forums. Thanks to these developments, there is so much you can achieve with your site.

Let’s take a look at doing it in Photoshop.

For starters, I should point out you can download Photoshop actions to do this for you.  If that is your bag of tea, check this out, where you can get that action and tons of others.

However, you can also do it manually.  Here is what I do to achieve the effect.

First, start off with a nice photo.  Here’s one I took on a recent blues Mecca to Clarksdale MS.

Raw Image

Once your image is open, I always duplicate the layer first so I can save a copy of the original in the file.  Go ahead and duplicate your layer.

On the new layer, which I renamed to Base, selected, create a new adjustment layer for curves.  From the channel drop down box, choose red, and drag the top right of the curve to the left a little bit.  Basically, you want a gentle S.  Don’t click ok yet though!

Now select the blue channel from the dropdown.  Drag the top right point down just a bit…  then drag the bottom left point up a little.  This will add some blue to the shadows.  Don’t click ok yet!

Now select the green channel – and go for another simple S curve.  This will help with the contrast as well.  Once you have all of these fine-tuned to suite your liking, go ahead and click ok.  Just don’t touch the combines RGB channel.

Now for added effect, go ahead and change your new layer (the one I named Base) to the Color blending mode.  This will help it blend in nicely with the original image.

So here is what I have so far….

If you want to, you can always go to Image-> adjustments -> brightness and contrast to fine tune the image’s contrast, which may help.  I adjusted mine a little – here is my new look.

Just to re-create the image the right way, you need to add the final touch.  Create a new layer on top of all your other layers, and fill it with #e1ff00.  This should be a nice yellow color.  Reduce the opacity of the layer to around 10%, and you are done!

In the image below, I decided to add a nice black border, which I like to do to images.  Hope you enjoy!

There are several steps you can take to help prevent this from happening while still using stock photography.  For one, I prefer to try and use stock images – and stock companies – that I don’t see used all over the place.  This is especially important of web design.  In a usability conference I attended last year, I was shown a series of web sites that all contained the same person doing the same thing – essentially the same image – on all the different sites.  This really threw me for a loop.  I mean, our designs have to remain unique, right?

For starters, choose a good stock company.  Personally, I tend to use fotolia.com. The reason for this is two fold.  For one they have a large array of images and assets that are unique.   For two, they have fair prices, and are easy to deal with.

The other thing I tend to do as a designer – and I love Fotolia for this – is I never use a stock photo as it comes.  Usually, I tend to collect assets that I combine together in order to achieve a finished result.  If I am going to use a photo, and it is stock, I tend to adjust the image several times and in several ways in order to get the best results, as well as a unique print.

As a designer, i cannot stress enough the importance of “never using the default.”  This kind of ties into everything.  i never use a default image or asset – I modify it.  Similarly, I never use the default drop shadow in Photoshop – I always adjust it.  i never use the default anything.  It just makes the designs more unique, and relevant.

Anyway, if you are looking for stock photography or assets, I suggest using Fotolia.   Go aead, take a look around their site, and tell me what you think.  Personally, I like it.

So its true – fluid layouts are coming on strong in 2011.  It’s a pretty simple process – you just want your content to fit every resolution in every browser imaginable.   Well, it turns out, there is a little formula that will help you out.  Mad props go out to Ethan Marcotte for the formula.

So in a previous post, I covered some things relative to the fluid layout including setting images to be responsive.  Yeah, yeah, I get it – that part was easy.  Well creating the rest of it is easy too.  The difference is instead of using tables, and old school divs set to pixel widths, revert back to – uh oh – the old “em”.

What most developers (and some designers) don’t understand is what exactly the em is.  What unit of measure is it for crying out loud?  Well, that is a fairly simple answer.  Basically, the actual size of an element’s em is computed relative to the font-size of its parent element.  So think of it this way – if you set a font-size to 100%, all the elements in the page will be sized relative to the browser’s default type size.  In most cases, this is 16px.  So now we know exactly what the em can do for us…  But how can we use it?  By using the magical formula, we can set everything to ems!  Yeay!

So for fonts, what you want to do is fairly easy.  You take the target  value for each element’s font-size in pixels and divide it by the font-size of its container (that is, its context). We’re left with the desiredfont-size, expressed in relative, em-friendly terms. Here she is:

target ÷ context = result

So let’s say – for argument sake, you need to make a title of a page roughly 24px.  At least, that’s what it is in your mock up.  So use the formula.  You get:

24 (target) ÷ 16 (context)=1.5em (result)

BAM!  POW!  Basically, we are saying we want that page title to be 1.5 times bigger than the default font size.  We’re in!  We’ve got ems!

This formula will work across the board as well!  Want to make a fluid grid?  Use the same formula for an outer div tag.  Let’s say we designed our mock up at 844 px.  We want to use 988 as our little default layout width…  So apply the formula.

844÷988=0.7085

Just move that decimal over a few spaces, and you get 70.85%.  This is the width you set you outer div tag to.  DONE!

Now your end users have the ability to use browser controls to change the font sizes, and your mock up fits any and all resolutions.  You are well on your way to making perfect fluid layouts!

Safari, Internet Explorer, Chrome, Opera, Firefox.  Ipads, iPhones, Androids, Windows Mobile, Blackberry, Net books, and Galaxy Tabs.  The options these days for a user to view your site are endless.  The thing is, there must be a simple way to design to all of them.  Yes, I know, some people insist of having two sites – a standard one, and one intentionally done for mobile devices.  But why have to maintain two sites?

There are numerous articles out there on flexible grids and flexible layouts.  I have been tinkering with a specific solution as presented by Ethan Marcotte.  I think he is close to a complete solution.  I have looked at other solutions for this, including expanding div layouts, having multiple images that load upon device detection, etc.  This one though, is a comfortable fit.  I tweaked his code, and I have something.

Basically, his idea is to work with a simple CSS principle: max-width=100%.  Adding this to your CSS for the image tag gets you half way home:

img {
max-width: 100%
}

Now the issue here is, the image will degrade in IE when it is resized.  It doesn’t like the whole max-width thing anyway.  to combat that, that, Ethan has a Javascript solution.  Use an IF statement to call this script if the browser is IE, or simply refer to it in the head tag and call it regardless:

var imgSizer = {

Config : {

imgCache : []

,spacer : “images/spacer.gif”

}

,collate : function(aScope) {

var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;

if (isOldIE && document.getElementsByTagName) {

var c = imgSizer;

var imgCache = c.Config.imgCache;

var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName(“img”);

for (var i = 0; i < images.length; i++) {

images[i].origWidth = images[i].offsetWidth;

images[i].origHeight = images[i].offsetHeight;

imgCache.push(images[i]);

c.ieAlpha(images[i]);

images[i].style.width = “100%”;

}

if (imgCache.length) {

c.resize(function() {

for (var i = 0; i < imgCache.length; i++) {

var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);

imgCache[i].style.height = (imgCache[i].origHeight * ratio) + “px”;

}

});

}

}

}

,ieAlpha : function(img) {

var c = imgSizer;

if (img.oldSrc) {

img.src = img.oldSrc;

}

var src = img.src;

img.style.width = img.offsetWidth + “px”;

img.style.height = img.offsetHeight + “px”;

img.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + src + “‘, sizingMethod=’scale’)”

img.oldSrc = src;

img.src = c.Config.spacer;

}

,resize : function(func) {

var oldonresize = window.onresize;

if (typeof window.onresize != ‘function’) {

window.onresize = func;

} else {

window.onresize = function() {

if (oldonresize) {

oldonresize();

}

func();

}

}

}

}

addLoadEvent(function() {

imgSizer.collate();

});

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != ‘function’) {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}

So, there are a lot of tutorials out there discussing the “how-to” of HDR.  They talk about Photomatrix, Photoshop, tonal mapping, etc, etc etc.  But here’s the thing – I want to know how to capture those three images on my D3000 with the different exposures.  The rest I can do – I can compile, and edit, and tone map – but how do I get those shots in the first place?  Well, there are two methods that I have found that work for me.

First of all, the D3000 does not have auto-bracketing.  So, you will need to do this manually.  Here are my two methods.

Method 1

1. Set your Nikon D3000 on your tripod, obviously pointing at the direction of the subject.  make sure you put the camera exactly where you intend to shoot before you actually take the photos. (Please note at this point my camera is set to capture fine Jpegs)

2. Set the dial on your D3000 to the “A” setting.  This is Aperture Priority.  It will allow you to set the aperture, and let the camera take care of everything else.  For more on aperture, click here.  After you set the aperture using the thumb dial, take a few test photos to make sure you got the setting right, and the lighting looks good.

3. Next, locate the exposure compensation button.  It is towards the front of the camera, and has a “+/-” on it.  Alright!  Now you are ready to shoot.

4. Make sure the exposure compensation is registered at 0.0, and snap your first shot.  Then, hold down the exposure compensation button, and increase the comp using the thumb dial.  Increase it to 2.0, and snap your second shot.  Then hold down that exposure compensation button and use the thumb dial to set the exposure to -2.0 and snap your third shot.  If you are only using 3 photos to combine to HDR, you’re good to go!  Otherwise, you can continue snapping away using different exposures for later creation of HDR.  Me myself, I like to start off with three.

5. Take your three images, and use either Photoshop of Photomatrix to combine your images into an HDR masterpiece.  There are many tutorials out there on his process.

Method 2

1. With this method, set your Nikon D3000 on the tripod.  This time, set your D3000 to capture in RAW format.  This will allow you to later use the in-camera editing feature.

2. Point and shoot at your intended subject.  With this method, you can shoot in any mode you want – manual, auto… it makes no difference.  Just point and shoot away!  You will still need to capture three images though.  So, shoot three pics!

3. Once three pictures have been taken, hit the “play” button on the back of the camera.  Leave the first picture you took alone.  Advance to the second picture, and hit the “ok” button.  This will bring up a menu, and you need to select the NEF raw editing feature.

4.  From there, change the exposure on the second photo to 2.0.   Save it by choosing the ‘EXE” option.  Change the exposure on the third picture to -2.0.  Save it.   Now when you transfer these to your computer, you will have three images – one with 0.0 exposure, one with 2.0, and one with -2.0.

5. Again, you can use those three photos in the application of your choice to be combines into an HDR image.   I have played with both Photomatrix and Photoshop, and both are pretty useful. You can check other blogs out there for ongoing flame wars on the subject.

Check out some beautiful HDR pictures here.

So i cannot include the actual source file due to legality issues.  But  can provide the actual WORKING code.  Yes it is working, and tested.  The code will assume you set up your flash file the right way, so let me go over a few checkpoints here.

- The File is set up for ActionScript 2.0
- It includes a progress bar (progressBar) as well as a percentage loaded text field (percentageTxt)
- It auto plays after load
- It does not loop the video
- The “external Video” on the stage is named “myVideo”
- video2.flv is my flv.  Replace it with the correct name and path to your own.
- I have a movie clip named “btn_playpause”  I have the pause graphic in frame one, and the play graphic in frame 2.  I have a “stop” action-script on both frames 1 and 2.  Doing this will allow the code below to work.
- The mute button is rigged.  I have the mute button named “sound_btn” (a movieclip) with an empty second frame.  So when you click the button, it plays that movie clip into an empty frame.  This shows the second sound button below it (named sound_btn2).  Tough to follow, so email me if you have questions.
- my fast forw3ard rewind are named “seek_ahead” and “seek_bhnd”.  They are movie clips on the main timeline as well. 
- I have two dynamic text fields on the stage as well, “timet” which is the total time of the FLV, and “time_txt” which is the amount of time that has played, and counts as the flv plays. 

As always, let me know if you have questions.  The code does work if you set it up right….

/**

* Preloading FLVs with progressbar

*/

 

// open a net connection

var nc:NetConnection = new NetConnection();

 

// null connection for progressive download

nc.connect(null);

 

// create a stream

myNetStream = new NetStream(nc);

myVideo.attachVideo(myNetStream);

 

// load video

myNetStream.play(“video2.flv”);

 

// pause video to hide it from the stage

myNetStream.pause();

 

// resize video onload, based on meta data

myNetStream.onMetaData = function(obj)

{

myVideo._height = obj.height;

myVideo._width = obj.width;

// show load progress

percentageTxt._visible = true;

percentageTxt._visible = true;

};

 

// listen for the ‘Stop’ status event, and stop video from looping

myNetStream.onStatus = function(info)

{

if (info.code == “NetStream.Play.Stop”)

{

this.seek(0);

btn_playpause.gotoAndStop(2);

this.pause();

}

};

 

// create a preload interval to check load progress every 1 millisecond

myInterval = setInterval(checkBytesLoaded, 1, myNetStream);

 

// preload loop progress

function checkBytesLoaded(mns)

{

// calculate percentage of video that has downloaded

var pctLoaded = Math.round(mns.bytesLoaded / mns.bytesTotal * 100);

 

// update textfield on the stage

percentageTxt.text = pctLoaded + “%”;

 

// update progress bar on the stage

progressBar._xscale = pctLoaded;

 

if (pctLoaded >= 100) {

// the video has fully downloaded

_root.percentageTxt.text = “loaded”;

// play video from the beginning

mns.seek(0);

mns.play(“video2.flv”);

 

 

//play/pause button

btn_playpause.onRelease = function() {

  mns.pause();

  btn_playpause.play();

}

 

//mute button

var globalVolume:Sound = new Sound();

 

sound_btn.onRelease = function():Void {

 globalVolume.setVolume(0);

 sound_btn.play();

}

sound_btn2.onRelease = function():Void {

 globalVolume.setVolume(100);

 sound_btn.play();

}

 

 

//fastforward/rewind

var id:Number;

 

seek_ahead.onPress = function():Void {

 id = setInterval(function():Void {

    mns.seek(mns.time + 0.5);

  }, 100);

}

seek_ahead.onRelease = function():Void {

  clearInterval(id);

}

 

seek_bhnd.onPress = function():Void {

  var dest:Number = mns.time;

  id = setInterval(function():Void {

    mns.seek(dest -= 2);

  }, 100);

}

seek_bhnd.onRelease = function():Void {

  clearInterval(id);

}

 

 

 

// clear interval

clearInterval(myInterval);

}

//show time

//this gets my duration

mns.onMetaData = function(metadata) {

duration = metadata.duration;

var dur_seconds:Number = duration;

var minutes_dspl = Math.floor(dur_seconds/60);

var seconds_dspl = Math.floor(dur_seconds%60);

if (minutes_dspl<10) {

minutes_dspl = (“0″+minutes_dspl);

}

if (seconds_dspl<10) {

seconds_dspl = (“0″+seconds_dspl);

}

//timet is the variable name for the text field

timet.text = minutes_dspl+”:”+seconds_dspl;

};

 

var time_interval:Number = setInterval(checkTime, 500, mns);

function checkTime(mns:NetStream) {

   var ns_seconds:Number = mns.time;

   var minutes:Number = Math.floor(ns_seconds/60);

   var seconds = Math.floor(ns_seconds%60);

   if (seconds<10) {

      seconds = “0″+seconds;

   }

   time_txt.text = minutes+”:”+seconds;

}

}

Userfly is indeed a great service.  Eseentailly, here is what Userfly does:

By installing a simple script on your site, Userfly can record your users actions for usability and testing purposes.  Upon playback, you get a number of cool features including exact click locations of the user, their exact paths, and even mouse movements.  The system records all of the movements of the user and plays them back to the usability expert (or whomever) for review.

So why do I feel that applications like this are not only ahead of their time, but a needed tool in the old toolbox (besides the obvious)?

Overseas testing within companies.
Simple.  In today’s day and age, with companies doing more and more business overseas, it becomes increasingly difficult to test sites and applications with users in different countries.  You basically have three options to run a userability test overseas.  You can:

- Travel there.
- Ask someone at that location to run the test.
- You attempt to run the test remotely.

Some of these may sound doable, but keeping in mind language constraints as well as cultural differences, it is far easier – and might I add reliable – to run these tests using something like Userfly.  This way, not only are you the one implementing the test, but also the one reviewing it.  Instructions to the user become clearer.   Analyzing the results becomes a snap.  Reliance on other people (except users) becomes nil.  

Testing sites with overseas customers.
Obviously, there is money to be made on the internet.  Quite frankly, the sites with more of an international customer base tend to fare the best.  So how does your site stack up to international customers?  With Userfly, you can find out.  You can poll users overseas and record their actions as they navigate your site.  It makes it easy to pinpoint cultural design differences, as well as international design flaws.  It shows you exactly how easy it is for international customers to use your site.   Honestly, the list goes on and on.

Optimizing usability tests.
When running usability tests, asking users to think aloud, trying to track mouse movements by eye, etc, all are a large part of the test.  Even asking them to perform tasks can often illicit questions in return.   Most usability experts even recommend you video tape your user tests to capture the test, as well as to show the customer.  Userfly puts all that in the past.  Userfly records the testing without a video camera, which some believe, can hinder the test.  There are no questions by the user.  Also, as I like to point out, you can actually test users in a normal user environment.  They don’t have to go to a lab, or have you peering over their shoulder.  This is what I refer to as “naturalizing” user testing.   This is a great reason to use Userfly.

So are there negatives?

Yes, there are some, but not many.  One negative is attempting to use Userfly on a large scale.  Though I am sure the software can handle it, larger companies are very wary of this type of tool.  It can record keystrokes, passwords, etc.  Now of course, for security reasons, Userfly doesn’t exactly do this – in fact, they make it a point NOT to record passwords.  But try telling the CEO of a multi-billion dollar company that…

Secondly, I don’t feel Userfly should replace standard testing, but instead accompany it.  (For the record, Userfly does not claim it should replace anything either.)  Standard user tests will still have their place in the world.  But this is one fine tool to use in the arsenal.

All in all, Userfly is a great product, and one I highly recommend.  They have great pricing points, and even offer a free subscription.  For those of you interested, I suggest   you visit their site for more at www.Userfly.com.

Basic Idea

First of all, the sliding door technique using CSS is quite simple, really.   It allows for layering of background images, allowing them to slide over each other to obtain certain effects.  A great example of this is the tab navigation in SAP EP.  Using CSS sliding doors, we can not only give the tabs a new look and feel, but we can also give them rounded corners.  Lets look at the basic concept first:

Basically, to achieve this effect, you create two images – a “left” image, or end cap, and a “right” image, which is longer in length, and will “slide” in the background to allow for expanding text and tabs.  Here are my two images:

                           
Left image                                             Right Image

Basically, we will need to use CSS to allow for this look and feel.  I have named my two images above as follows:

- Left image = left.gif
- Right image = right.gif (for those of you curious, it is 300 pixels in length to accommodate SAP EP tabs)

Both images are GIFs with corner transparency, allowing for the tabs to look good on top of any background.  For my SAP EP project, this was a must, as we need to support IE 6 and 7 (so no PNGs), and we have a graphical banner behind the tabs.

Next, we implement the CSS as follows:

div.cssbutton { overflow: hidden; width: 100%; }

div.cssbutton a { background: transparent url(‘/images/left.gif’) no-repeat top left; display: block; float: left; font: bold 12px Arial; line-height: 13px; height: 17px; padding-left: 8px; text-decoration: none; }

div.cssbutton a:link, div.cssbutton a:visited, div.cssbutton a:active { color: #FFF; }

div.cssbutton a span { background: transparent url(‘/images/right.gif’) no-repeat top right; display: block; padding: 2px 8px 2px 0; }

div.cssbutton a:hover { background-position: bottom left; text-decoration: none; }

div.cssbutton a:hover span { background-position: bottom right; color: black; text-decoration: none; }

 

Then, with some simple mark-up below, we can have the CSS take effect and create our sliding door.

And there you have it!  A result like this:

For more, you can follow this link.

Implementation into SAP EP

To implement into SAP EP, a couple of things need to change.  Since SAP EP has a “selected” state of a tab, as well as an “unselected” state of a tab, we need to change the CSS a little bit to allow for both states.  Please keep in mind that would mean creating four images:  A left and right image for the selected tab, and a left and right image for the unselected tab.  So we have to create separate CSS classes for these. The CSS would look like this: (notice we defined the images earlier in the SAP EP code, so we do not directly reference them in the CSS)

div.cssbutton-sel { overflow: hidden; width: 100%; }

div.cssbutton-sel a { background: transparent url(‘<%=selLeftCap%>‘) no-repeat top left; display: block; float: left; font: bold 11px Arial; line-height: 14px; height: 18px; padding-left: 11px; text-decoration: none; }

div.cssbutton-sel a:link, div.cssbutton a:visited, div.cssbutton a:active, a:visited { color: #FFF; }

div.cssbutton-sel a span { background: transparent url(‘<%=selRightCap%>‘) no-repeat top right; display: block; padding: 2px 8px 2px 0; }

div.cssbutton-sel a:hover { background-position: bottom left; text-decoration: none; color:#FFF; }

div.cssbutton-sel a:hover span { background-position: bottom right; text-decoration: none; color:#FFF; }

div.cssbutton { overflow: hidden; width: 100%; }

div.cssbutton a { background: transparent url(‘<%=unselLeftCap%>‘) no-repeat top left; display: block; float: left; font: bold 11px Arial; line-height: 14px; height: 18px; padding-left: 11px; text-decoration: none; }

div.cssbutton a:link, div.cssbutton a:visited, div.cssbutton a:active, a:visited { color: #FFF; }

div.cssbutton a span { background: transparent url(‘<%=unselRightCap%>‘) no-repeat top right; display: block; padding: 2px 8px 2px 0; }

div.cssbutton a:hover { background-position: bottom left; text-decoration: none; color: #C6EBFF; }

div.cssbutton a:hover span { background-position: bottom right; text-decoration: none;  color: #C6EBFF; }

 

Next, we need to alter the SAP EP code a little bit to allow for these CSS styles to take effect.  That code looks something like this: 

<div class=“cssbutton-sel”>

                                    <nav:navNodeAnchor navigationMethod=“byURL” urlParameters=“InitialNodeFirstLevel=true” title=“”>

                                          <span><nav:navNodeTitle/></span>

                                    </nav:navNodeAnchor>

                              </div>

                        </TD>          

                        <nav:storeNavNode/>            

                  </nav:ifNavNodeInSelectedPath>

                  <nav:ifNotNavNodeInSelectedPath>

                        <TD>

                              <div class=“cssbutton”>

                                    <nav:navNodeAnchor navigationMethod=“byURL” urlParameters=“InitialNodeFirstLevel=true” title=“”>

                                          <span><nav:navNodeTitle/></span>

                                    </nav:navNodeAnchor>

                              </div>

 

Make sure you take note of the use of both a span tag as well as a div tag to achieve the desired effect.

And there you have it!

Final Result:

You can click on the image for a full size shot.

When designing a company intranet or portal, it is easy to become tangled up in a web of decisions being made by managers, executives, department leads, and more.  Often times, the downfall of a portal or intranet is the fact that too many people have their hands in the proverbial cookie jar.  The answer, is to keep it as simple as possible.  One way to do that is to simply try to achieve three easy goals.

Efficiency.

This one is easy enough right?  Simply put, any well designed or thought out portal or intranet is going to increase user efficiency.  In a way, that is kind of the whole point of a portal, right?  A well designed and planned portal/intranet will allow a user to increase efficiency, and therefore, productivity.  As we all know, an increase in productivity will directly positively effect the bottom line of any company, large or small.  So how do you achieve efficiency?  Easy – give the users the tools they need to do their job, in only a few clicks, while avoiding confusion.  make use of web 2.0 features.  Allow for customization.  Allow for expansion both of the portal itself, and of user-centric tools.  Use social networking tools to your advantage.  Make communication easier.  Allow for integration for your portal into office-based software.  Use dashboards and metrics.  Basically, make it easy for a user to use.  

Memorability.

Often considered more of a challenge than efficiency, I feel this one is actually a little easier – and it all comes down to design and structure.  Quite simply, a company portal/intranet differs from the world wide web in one major way:  Users cannot “leave” the portal to do their work on another.  In other words, you can “train” your user base a lot more efficiently because the users will continue to use your portal.  Once a user locates the search box, for example, they will know where it on subsequent visits.   However, most designers attempt to take advantage of this in the wrong way.  This is not an excuse to avoid using web trends and begin placing elements on a page wherever a designer/developer sees fit.   Usually, that is the excuse i get.  ”well, I know it isn’t normal to put the search in the bottom left of the page, but I am training the users”.    This is completely wrong.  Instead, using web trends and common-sense structure will make it easier for users to memorize where information lives on the portal.  This means avoiding portal restructures, deleting pages or moving information, and so on.  The point is, the more web trends and conventions you use, the less the user needs to learn.  The less they need to learn, the more room they have in their brain for memorizing where information lives, or how certain portal functions work.

Error Reduction.

It kind of says it all, doesn’t it?  Reducing the number of errors a user comes across is a big one.  And it is kind of easy, too.  Simply make sure your portal tests well.  Remember - errors don’t necessarily mean that their is a bug in the code, or that a part of the portal doesn’t work.  It also means “user errors”.  Designing a portal to reduce or eliminate user errors will greatly improve the portal as a productivity tool.   Another tip is to make custom error screens that actually help the user try to solve their problem.  If the page is no longer there (it should be!) the error page that comes up in its place should allow for searching and other links to point the user to the right direction.  Here is an example that I work by:  If a user thinks the menu should have drop down menus, then it should – if it doesn’t, then it is an error.  Sounds a bit harsh, I know, but hey – you want a portal the people will user, right?

In conclusion, achieving these three goals may be a bit of a challenge, but remembering them as you wage internal wars over the portal is key.  Everyone will want the same thing – a functional, productive portal that employees will respect, and more importantly, use.  Coming up with the what is the easy part.  The how is more of a challenge.  Use these three goals to simplify the situation, and go from there!