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!

Here are five amazing Photoshop actions that I use in my designs.  Check em out.  Just click on a pic to download the action…

1. The Lomo Effect

A very popular method of coloring your photos.  Use this action to achieve it with ease.

2. Vintage Washes

A selection of ten actions that can be used to give photos a very vintage feel.

3. Photographer’s Toolkit

Most “professional” actions for pro photographers are not free.  This collection, however, is beautiful, useful, and free.

4. Nite=Fate Actions

Known the world over as a great action creator, these actions by nite=fate are sure to wow you.

5. B & Big Picture

Create a 3D looking montage of photos from your original.  A lengthy action to run, but worth the wait.

BONUS: Turn your photos into polaroids with this action.

Visit Smashing Magazine for more cool Photoshop Actions!

Enjoy!

Below is a short example usability test, as provided by Usability.gov.  It is a nice, informal usability test.  To find out more, or to view other tests and reports, including a formal usability test, visit their site.  

Short Usability Test Report for [Site]

Date of Report: [Month Day, Year]

Date of Test: [Month Day, Year]

Location of Test: [City, State]

Prepared for: [Name]

Phone Number: [XXX-XXX-XXXX]

Email: [name@address.gov]

Prepared by: [Name]

Phone Number: [XXX-XXX-XXXX]

Email: [name@address.gov]

Executive summary

NOTE: This section describes the main goal and rationale of the study. Briefly describe the scenarios that participants completed, how the sessions were conducted, and how many participants took part in the study. This section should also discuss overall trends, such as whether or not participants were able to complete all the tasks. Data should be reported as both a number of completed scenarios as well as a percentage. Is there is a reason why tasks were completed or not? Be sure to give an overall impression (theme) about what the reader will encounter in the report.

Methodology

Who we tested

[Eight] participants, having the following characteristics, evaluated [product name].

NOTE: Add or delete main categories as needed. Refer to screener for main demographic information.

What participants did

NOTE: State about how long participants met with the study facilitator and how many tasks they completed. Describe anything else that participants did, such as filling out questionnaires.

What data we collected

NOTE: Describe the data collected, including paths selected, task completion rates, and verbal feedback. Describe any other data that were collected, such as time on task or satisfaction ratings.

Major findings and recommendations

•  

  • List major issues – Use the bullet format to enable quick scanning.

  • Identify solutions – Spot issues and trends via user testing and then make recommendations.

NOTE: Readers should be able to use this section to get a good grasp of what the issues are and what possible solutions exist. It is not a list of every single problem, but an overview of the major stumbling blocks identified during testing.

Detailed findings and recommendations

Introductory Questions & Tasks

NOTE: List the question followed by the summaries of responses. If you ask participants to define their expectations for a set of labels, it may be useful to put them in a table so they can be compared. Following are two examples.

Sample 1. Summary of introductory questions

 

Sample Questions	Sample Responses
Have you heard of [site]?	None of the participants had been to or heard of the site.
Just from looking at this site, what kinds of information do you think you could get from this site? Please be specific.	All participants correctly defined the purpose of the site. Participants used phrases from major headers and labels to describe the information on the site.
Who do you think this site is designed for? Why?	Participants correctly identified general public. One person suggested doctors and nurses.
Who manages this site?	One participant identified the sponsor from the masthead.

Sample 2. Label expectations by participant

 

Participant No.	What’s New	News	Resources
1	New on the site	Press releases	Web sites
2	New books	Headlines	Books, articles

Scenario 1 – Exercise/Sports; Fitness

You’ve heard that many people get injured due to bike accidents. You want to know if wearing a bike helmet will reduce your chance of injury. Where would you look for this information?

 

Number of participants	X
Percent successful	XX%

 

Sample Findings	Sample Recommendations
X participants completed the task with ease (score of “2”) by finding the [target].  X participants needed prompting or had significant difficult completing the task (score of “1”) X participants did not complete the task (score of “0”).   X participants found the [target] via [path].	State each separate recommendation in the form of an action item.    List as many as needed to resolve the issue, keeping in mind how the recommendations affect the site or application as a whole.

Scenario 2 – Diseases & Conditions

You want to create a diabetes education program at your organization to increase awareness about what diabetes is and how to prevent it. Where would you get this information?

 

Number of participants	X
Percent successful	XX%

 

Sample Findings	Sample Recommendations
X participants completed the task with ease (score of “2”) by finding the [target].  X participants needed prompting or had significant difficult completing the task (score of “1”) X participants did not complete the task (score of “0”).   X participants found the [target] via [path].	State each separate recommendation in the form of an action item.    List as many as needed to resolve the issue, keeping in mind how the recommendations affect the site or application as a whole.

Scenario 3 – Self-Directed Activity

Now, we’d like to hear about how you might use this site. Please identify an item that you would be interested in finding on this site. Please state your question and then search for the answer. Let me know when you’ve found the information. [Outline the tasks that participants described and their success in attempting those tasks.]

 

Number of participants	X
Percent successful	XX%

 

Sample Findings	Sample Recommendations
X participants completed the task with ease (score of “2”) by finding the [target].  X participants needed prompting or had significant difficult completing the task (score of “1”) X participants did not complete the task (score of “0”).   X participants found the [target] via [path].	State each separate recommendation in the form of an action item.    List as many as needed to resolve the issue, keeping in mind how the recommendations affect the site or application as a whole.

Exit Questions/User Impressions

NOTE: It may be useful to put responses in a table, especially if you want to list all participant responses rather than an overall summary. Following are two examples.

Sample 1. Summary of user impressions

 

Sample Questions	Sample Responses
What is your overall impression to [site]?	Participants liked being able to find health info.
What is your impression of the search capability?	Search worked well, efficiently. Seemed to have the most relevant information at the top.
Do you feel this site is current? Why?	The site is current because the information is dated with information from the past couple of days.
What did you like best about the site?	1) Resources 2) Articles 3) Health tips
What did you like least about the site?	1) No way to share info 2) Everything in PDF 3) Not enough pictures (images, charts, graphs)
If you were the website developer, what would be the first thing you would do to improve the website?	1) “Email a friend” 2) FAQs
Is there anything that you feel is missing on this site?	1) “Email a friend” 2) FAQs
If you were to describe this site to a colleague in a sentence or two, what would you say?	It’s a useful site with a lot of good information.
Do you have any other final comments or questions?	Needs more pictures and color.

Sample 2. User impressions by participant

 

Participant No.	Like best?	Like least?	Improvements
1	Search	Registration	Add more color
2	A-Z index	Pop-ups	Clickable charts

In an attempt to avoid the technology talk, let’s just say that these principles apply to any technology – SAP, SharePoint, etc.  The point is, a portal needs to take these things into consideration when being designed and constructed.

1. Make use of Web 2.0
Web 2.0 has many definitions, and most of them tend to be wrong.  Making use of web 2.0 to web and intranet usability simply means one thing – give your users the information they want without having to hunt around, wait for page reloads, etc.  If you can supply the user with information in real time on the same page they sought the information, you are making the best use of web 2.0.   To harness the power of a portal, the definition is one given by Tim O’Reilly – “Web 2.0 is value created by harnessing the net-effect of users.”  Basically, this means providing a great service and then automatically folding user-behavior back in as new data.  People, and employees, acting in their own self-interest, end up contributing to the common good.

2. Social Networking 
 I know, a lot of executives don’t like to hear this one.  But allowing social networking – defined as a group of connected individuals who share ability, expertise, and interests – has great advantages.  Some benefits emerging from social networking include an improvement in managers’ skill levels, a greater level of team work, redesigning of processes, and a change in the quality, rights, and structure of decision making.  Does this mean your company portal should look and act like mySpace?  Absolutely not.  But allowing communication between peers is essential, and it will increase the productivity of the company while reducing communication gaps and barriers.

3. Stunning Graphics
A lot of people may disagree, but stunning graphics on a portal is very important.  Similar to the web in general, stunning graphics are a direct  correlation to the competency of the company.  Although this statement is not true, it is perceived to be true by users, and countless usability tests.  A perfectly developed portal, with exact functionality as needed, but without great design, seems clunky and poorly made to users.  The point is, a great portal harnesses not only the development and functionality, but a superb look and feel.   This is especially true on a portal’s initial release – you got one chance to wow your users – every release after that will seem like a fix, and not an improvement.  

4. Single Sign-on
Regardless of the technology being used, or combination of technologies, it is very important to  remember the user.  In this case, logging into the portal.  Especially where portals are user centric, and custom tailored to fit individual needs, signing in and  authenticating a user should happen once, on initial load, without the user being informed.  That’s right – no login windows, no extra step needed to get to the information.  You load the portal, and your stuff is there.  It’s that easy.  Having a sign in page, or multiple sign ins and authentications, is just a waste of everyone’s time. 

5. The Ability to Adapt
All portals need to be constructed with the “future” in mind.  That future could be tomorrow, a week from now, or even further down the road.   A Portals code, framework, and design all need to account for changes and adoptions.  Whether the changes come in the form of new technology, new data, or something completely different should be of little consequence.  The point is the portals designed to adapt are the portals that have a future.  Designing a portal specific to one release, or for that matter, to one department, can end up becoming a huge challenge to add functionality in down the road.   Though sharing this vision with an entire company is a challenge in itself, it is important to realize the potential impact these decisions can have.

6. Connect, Engage, and Capture 
It is the primary responsibility or any good portal to connect, engage, and capture the users.  Users have no illusions about a portal – they do not think of a portal as their own personal playground.  They do, however, expect a portal to know their affiliation of organization, location, and role within a company.  They expect a certain level of customization, but they do not want to see burdensome or confusing customization.  The goal of the portal is, obviously, to become a productivity tool for the users.  To achieve this task, having a portal that connects them to the company, engages them with customization and usage tools, and captures their interest with dynamic content (as well as content relative to the specific user).  Anything less is merely a web site with some cool stuff.  A portal needs to achieve more than that.

7. Custom Workspace Solutions
Providing custom workspace solutions to the user is a great thing to have on a portal.  In essence, it is what makes your portal well, a portal.  A custom workspace is a location on the portal (we won’t argue whether this should be the home page or not here)  where a user can go to access their needed tools.  It is the one location of the portal that can be given direct credit for improving performance.  For instance, having certain metrics, tasks, calendars, and more can help a user quickly determine what needs to be done, and how to prioritize certain tasks.  In addition, it also is specific to a user needs and therefore becomes a part of their toolset.   Having these types of customized workspaces greatly help employees and users connect with other users and data, which can often assist a company is becoming more lean.

8. Knowledge Community
Having an knowledge community is a wonderful thing, for all the obvious reasons.  It gives users the chance to become more educated, and more trained, and the ability to share knowledge with peers.  But a knowledge community can provide more than that.  It can provide robust document centers, and can greatly assist with the complex resource management problems most companies face today.  The goal, however, is to not use the knowledge community merely as a way to address the resource management issues,  but to address the business issues, and even more critically, the user adoption issues.  These issues are usually posed by the knowledge work itself, and a good portal aids in that solution.  The portal should take into consideration documentation, knowledge sharing, libraries, and more.  Take the opportunity here to not only make knowledge available for the users, but to also address documentation and information on a company-wide scale.

9. Resource Management
Resource management is very important.  In just the last year, there has been a huge explosion in the number of assets and other resources that need to be integrated into the enterprise portal experience.   These resources, including documents, content snippets, articles, websites, applications, other portals, media objects like video, etc., all must be considered and treated as portal data.  This means developing a schema and providing architectural support for registering these assets with the portal so they can managed through time.  This type of management needs to begin with the conception of the portal.  Although content management technologies play a role in this, they are not a substitute for these practices.    

10. Communication and Collaboration
The logical approach is to have communication and collaboration available on any portal.  Collaboration is in fact why most companies desire a portal, whether realized or not – the ability to collect and manage data while providing users and teams the ability to share knowledge and commitments.  Communication is the same – a portal without communication is in a way pointless, though controlled communication is sometimes the right answer.  The simple thing is, by leveraging communication and collaboration on your portal, you again turn the portal away from the “site” approach and information storage center to a productivity tool that each user can utilize to perform their job functions better.  If your company uses the Agile approach, either in development or otherwise, this is a no-brainer.  Collaboration is a vital part of Agile (as is communication), and leveraging these features in a portal just make sense.

Incorporating these 10 items into your portal will steer your portal towards the edge of greatness.  Please note that these 10 things did not come from my experiences and knowledge alone, but instead represent some of the greatest usability experts, portal specialists, and the like that I could find.

Enjoy!

Today, UI and design experiments are all over the web.  They are often released upon development, and the company or individual uses the general population as the user to test the UI.  This is both good and bad for designers, and also good and bad for users.

For designers, this is a great way to test out a UI, if it is done correctly.  You have the ability to test your actual users by launching your site.  You have the ability to compare apples to apples, and can relatively easily determine if your UI is a success or a failure.  However, there are some negative points.  For one, if your site is e-commerce based, it is risky to experiment with a new UI that users may not understand – it could result in direct losses.  Even if your site is not e-commerce based, you run the risk of scaring users away.  Even with a personal portfolio site, you still stand to risk losing visitors, which is never a good idea.

For users, this is a way to see some of the latest and greatest ideas from the web community.  Often times these fresh UIs also are more fun to navigate, or even in some cases, to play with.  Also, it is a great way to become more familiar with concepts that might direct the future of the web.  Let’s be honest – most users, for all intents and purposes, like to see something new and fresh.  As long as it doesn’t get in their way.  However, it is also bad for users.  Why?  Because it will get in their way.   Abiding by certain web conventions make it easy for the user to get through any given site.  Drastically changing Is can prevent them from achieving their end goal, which is never a good thing.  

This is where design darwinism comes into play.  With experiments happening in real time all the time, you will notice that the poorly designed UI – whether its a new UI idea or not – will fail.  Users will avoid them.   In this day and age, where information is key and user time is the new currency, anything not supporting this model is a hinderance, and will not survive.  Design darwinism is not something designers or users can control – it is happening now, and will continue to happen indefinitely.  Great designs, and for that matter, solid designs, will survive.  All others will simply fade away…

Deep linking is of course a very common thing.  Most companies I talk to about this look at me like I have three heads when I mention it.  This is, of course, because no one ever has an issue adding a page to their list of bookmarks.  Therefore, when designs are being suggested and created, deep linking is seldom ever taken into account.  Why?  Well for one thing, it is taken for granted.  For another, it is assumed that modern day browsers can add the bookmark, and the world is right.  So what’s the problem?

The issue is, no one ever seems to consider deep linking anymore when designing.  In the complex world of usability, it is imperative to keep in mind the conventions of the web that can turn bookmarking a page into a marketing plus for your site.  Another thing to consider is that most people will stumble across your site form a search engine.  Depending on the search criteria, it is also common for users to wind up on one of your pages other than the home page.  

Also, in the world of corporate portals, or companies running SharePoint, deep linking needs to be considered from the beginning, as the structure is being determined.   SharePoint sites have the wonderful ability to adapt, grow, and change with the company.  These things can actually create havoc when deep linking is not considered.  Here are some further explanations into deep linking and usability.

Does your site meet the criteria?
This has a lot to do with the structure and design of your site.  Is the logo in the common place (according to web conventions, that’s the upper left corner on all pages in the US)?  Can a user answer the following questions with little thought:  Where am I on this site?  Where am I on the web?  Where can I go from here?   In other words, a user should be able to identify your site, what your site does, where they are on your site, and what links and information are available on your site from any page.  This is often not the case, and can create confusion.  Here is the key to meeting this criteria: Your site should be able to identify itself and provide useful navigation and content on every page.

Do your Page Titles meet the criteria?
When a user wants to bookmark one of your pages, the option in the browser allows for the user to enter in the title of the bookmark.  However, most users skip this step, and just hit okay.  If your page titles are sub par, so is your bookmark.  For instance, if every page is named something like “++ Mark and Rusty Design++” , then what good is bookmarking a page if the title provides no insight as to what the page has on it?  Also, if your titles are something like “Learn how to design a website yourself in ten easy steps as described by industry experts” you have missed the point as well.  Here is the key to meeting this criteria: Page titles need to be short, descriptive, unique identifiers for users who look to bookmark the page.  

Does your Structure meet the criteria?
Organizing your site structure is key.  In a world where software like SharePoint is becoming popular, it is important to have a sound structure.  This involves deep linking as well.  Sites that have content structured in an orderly fashion tend to see a rise in bookmarking.  Users know, or can make an educated guess, where to link to items, etc.  An example would be a collaboration space in SharePoint.  One would assume that all collaboration spaces would be in the same area.  So to find one would be to find them all.  Easy to bookmark, or link to.   On the other hand, if the collaboration site is buried with each division’s pages, it is harder to bookmark and access.  Why?  If a user found team site A buried under HR, and they book marked it, where would they think team site B is?  Buried somewhere else under a different division?  Is there even a team site B?  Wait, where am I?  How many clicks form team site A to team site B is it?    Here is the key to meeting this criteria: Your structure should be organized how users will seek out information, and not structured how the company is structured.

Obviously, forcing users to start at your home page on every visit is ridiculous.  It is not user friendly.  It is a mistake that will cost you time and money.

Enjoy!