Friday, December 20, 2013

Improving WebCenter Content User Experience with Information Architecture

Information Architecture (IA) is the "Structural design of shared information environments". It goes hand in hand with User Experience Management (UEM) as it makes your information more usable and your business users more productive. 
Before engaging in the IA exercise you need to make sure that you understand how your information is used and the type of the information assets you'll be managing and the functionality you'll be making available.
The diagram below shows the main principles of Information Architecture. 

Now let's review each of them so you'll be able to use them when designing your sites and your web applications.


Design your site or your app in such a way that it will still function well when your content multiplies by a factor of ten and more.
The cost of storage continues to go down and a well designed site will continue to attract visitors and contributors alike. This means that more content will most likely be coming in then taken out with expiry and other mechanisms. This is an important consideration to keep in mind when looking at all the other principles we will be looking at here.


Your content is a living thing. It has it’s attributes and it’s lifecycle. When you define different types of content that lives on your site or your web app, think of different relationships that it will have with other types of content and it’s lifecycle and also about its relevancy over time. 
News stories age quickly and then they store in archive and eventually expire. Winter road tips become relevant in the winter and need to be take out of view for the summer.


If I feel like getting a spicy sauce at the store and the Condiments section has 3 types of sauce - I'll most likely pick one and walk away happy. Now if I see 15 different types of sauce, with each brand represented by 5 varieties - and I've only got 5 min to pick one - I'll most likely leave the section empty handed. 
Large number of choices makes it hard for us to make a decision so you should keep a list of choices for each particular scenario small. 
This applies to your navigation, list of options available for an operation and number of matches you return from a typical search. Small, focused lists also saves time it takes to make a selection and people will less likely pick up the phone instead of using your intranet site!


Only show enough information for people to understand what comes next and make a decision. Think layers and start with a list of short descriptions or snippets before showing an item. This is what Google is doing on its search. It’s not showing you full web pages and it’s not just showing you the titles either. It shows you just enough information to decide if you'd like to browse to that page or not.


Dan Brown suggest that we "Describe the content of categories by showing examples of  content". This is a much more effective approach then describing the category. Examples may also double as quick access links to familiar and popular content. This is because we as humans internally describe our  categories as networks of familiar examples.
For instance, Forms section  of your intranet may have Expense Report, Contractor Timesheet and your Equipment Request form. Showing 2..3 items in a category with a link to see more items will work a lot better than a category name by itself or a category description.


Do not assume that everybody will always use your home page to enter your site. People will be bookmarking your pages, come in from the search engines and external links and so on, so the large percentage of your visitors will come in through an arbitrary page instead of your home page.
This really means two things - your  site template must have all required navigation elements to add value to the actual piece of content displayed on the page and show what other content is also available on the site and can take you there. 
The second thing is that your home page should not be the do all page. Instead it should focus on welcoming and properly introducing your new users to the site.


Consider using multiple different classifications on your site or app. People use different ways when they're looking for information. This is why Gmail has moved away from folders and allows you to apply many labels to any given email.
An online store may let you find clothing by size, color and type. A corporate intranet may let you browse by topic like benefits or standards, type, like form or a guideline and by department. 
Diverse Classification is a good thing but taken too far it may overwhelm and confuse your users and it will also take more effort to maintain. 


Names that most shops are using to refer to their navigation blocks like the 'Top Nav' and 'Left Nav' make you focus on the block location instead of the actual type of navigation this block offers! This is extremely important. When you start to think of your "Top  Nav" as 'Department Nav' and your left nav will be your 'Topic Nav' - you will be well under way in your  Diverse Classification department. Instead of that, developers get confused by these names and simply duplicate parts of their left nav on the top and so on.


User Experience Management is a bigger topic that includes the IA and your design. It also includes planning of your information flows and usability testing. Many times if your IA is solid and you have a good set of use cases - you'll get great results by just focusing on your information flows and your most important usage scenarios.
We'll wrap up this whitepaper by looking at case study that shows how a study of user behavior and top use cases allowed us to improve user experience with Oracle Content Server itself.


Content Server UI is a frequent target for end user complaints. Let's see how applying just a few of the IA principles has transformed user experience of one of our clients:
First we learnt how users interact with Content Server. Essentially, they were following the pattern of Gradual Disclosure - running a search, looking at Content Information, proceeding with Document Preview on selected items and then they were downloading and updating a few selected documents. 

The main problem we found was latency in the system - and it was not related to performance of the server!

Our most popular user path in the system - from browsing and search to content information to document preview entails a lot of waiting. To get Content Info or preview you have to repeat these steps for each content item:
  • Click on the link and wait
  • Then go back and wait for results to load again
  • Find the row you just clicked on and click on the next one

Another thing is that the use of screen real estate can be greatly improved:

Out of the box Search Results fit 20 rows per screen... and nothing else. Green on the screenshot above shows useful space.
Another thing they complained about was pagination. Pagination may work well on a web site, but in a web app it can slow things down. Going to the next page involves waiting. Mass update operations that span multiple pages have to be performed multiple times (for each page) – which means:
    • More waiting
    • Risk of error – as you have to repeat update instructions for every page

So here's the UI prototype that we built:

Fits almost twice more search results on the screen without feeling crowded. The scrolling is seamless, using the lazy load patterns. The UI gets more records as you continue to scroll, so there's never a need to click the 'Next Page' button and wait.

It also offers seamless Document Preview – without leaving Search Results... 

and it lets you resize panes, hide and show as needed.

You can do multiple selection the Windows way - Shift – Click and Ctrl-Click select multiple rows. 
Right – click delivers context – sensitive menu – just like Word or Excel. And different menus delivered for single and multiple selection...

And here's another screen that get more mileage of looking at content as an object - the search screen :

Refine search criteria – and see results update every time you hit Enter (or hit Run Search button). No need to leave the search form or wait for “Search Within” form to load. This increases productivity because users no longer lose focus while waiting for screens to load.
Overall these improvements allow users to perform tasks faster – without requiring faster hardware and database. It you see a lot more – without having to get a bigger or dual monitor and having to switch browser windows and tabs 


This article introduced you to major components of modern User Experience Management and Information Architecture and with Oracle WebCenter Products. We then reviewied how a simple excersise of analyzing the use cases allowed us to transform WebCenter Content User Experience.

No comments:

Post a Comment