Tuesday, 30 August 2011

eRaUI Implementation Outline and Storyboard

1. Scenarios for implementing eRaUI.

· A web application or website is in place which has many pages and resources. Users of the website typically want to search for particular items, often the same item. eRaUI can be added on top of the website in order to make it straightforward for people to locate the resource they want.

· A web application with a poorly designed interface is causing difficulty for its users. eRaUI can be added to the website as a widget in order to make the application more navigable.

· A new web application is required and it is unknown how users will interact with it until it is in use. The pathways which users are likely to take through the site are likely to change with time. eRaUI can be added to the homepage and other pages in embedded format to make it easier for people to navigate the site and find the resources they need.

2. eRaUI as a widget over an existing interface – Storyboard

Here is an example of the way in which eRaUI can be added to an existing interface as a browser widget. The interface chosen is that of the NaCTeM website, which provides access to sophisticated research tools but in a way which is not intuitive to newcomers.

Fig 1. The current NaCTeM web interface / portal to services

By adding a few simple files and a line of code to the web pages of the NaCTeM portal, we add eRaUI as a widget:

Fig 2. eRaUI added to NaCTeM as a widget

As can be seen in the screenshot above, eRaUI has been added in widget format to the existing interface. A user coming to NaCTeM will now have the option to:

· Conduct an intelligent search (tailored to the user using machine learning algorithms) using the search box.

· Choose a ‘go to’ suggestion.

· Preview a ‘go to’ suggestion without leaving the current page.

· Specify their user level – i.e. ‘novice, expert etc’ so as to improve the specificity of eRaUI to their particular needs.

Fig 3. The user types a search term into the search box

Searching is easy – just type a term in the search box as shown above. Suggestions are dynamically updated via ajax and commonly searched for suggestions are proposed in the box while the user types. The user may wish to hide the eRaUI search box – in which case they should click the small arrow at the top-right:

Fig 4. eRaUI can be hidden in case it is obscuring material on the page by using the arrow at the top-right

A user may find that the suggestions made by eRaUI are too advanced or simplistic for their needs, in which case they can choose from a serious of pre-set options to specify their user level.

Fig 4. The user can specify their user level to tailor their experience – i.e. by selecting ‘Novice Researcher’

eRaUI is able to provide dynamic previews of content in an adjacent pane, in order to assist in guiding the user towards the content they need. A preview can be generated by clicking the ‘eye’ icon next to a ‘go to’ link:

Fig 5. eRaUI can generate dynamic previews of suggested content

3. eRaUI embedded in an interface

Some developers may wish to add eRaUI to their website or web application as an integrated part of the existing interface. This can be achieved with almost as much ease as the widget implementation. For instance, the screenshot below illustrates an embedded eRaUI on the NaCTeM homepage:

Fig 6. eRaUI embedded on the NaCTeM homepage

The embedded implementation allows for a more seamless experience, and gives the user more options in terms of the style and layout of eRaUI.

Fig 7. Search and dynamic preview on an embedded eRaUI

Thus it can be seen that there are a two principal means in which eRaUI can be implemented over an existing website interface. Adding eRaUI to a website should be very simple for webmasters, typically involving only a line or two of code and possibly the copying of some files on to the target web server. Once implemented, eRaUI makes it easier for users of a website or service to locate the material they are looking for.

4. Proposed technical specifications for eRaUI

· eRaUI would be able to be plugged into any web-based system or website. It would not replace the existing system's interface, but would reside on top of it. In practical terms, this would mean that eRaUI would reside as a helper widget in the corner of a broswer window. An embedded implemtation would also be available, allowing eRaUI to ingrate seamlessly with the target website.

· eRaUI would provide a search box. Putting a query into the box would cause suggestions to be dynamically generated and displayed beneath the box.

· eRaUI would learn from previous searches, and the behaviour of users having made searches. This learning would be reliant upon the data collected on a centralised server over time as users interact with eRaUI.

· eRaUI would also allow the user to choose content by means of links beneath the search box. These links would by dynamically generated according to the contents of the box, the activity of the user and the user's cookie info, IP and other factors.

· eRaUI would be receptive to conditions such as IP address (resolving to a particular country), browser http headers etc.

· eRaUI could show previews of web content by means of cascading windows or some similar mechanism.

· eRaUI would be based around jQuery on the client side for maximum browser acceptance. On the server side, eRaUI would employ PHP (for non-persistent requests) and Java. IFrames may play a significant role in the implementation of eRaUI.

· eRaUI would be configurable to particular types of system, but would also work 'out of the box' for novice installers.

· The eRaUI back end activity could be handled by a single centralised server. This could enable machine-learning across a wide variety of systems.

5. eRaUI – ease of use and deployability

· Generic - can work not only with NaCTeM and MapTube but with any system.

· Practical - could be installed with minimal difficulty on top of any existing interface and improve the usability of an otherwise hard to navigate system.

· The system can make extensive and practical use of machine-learning algorithms.


  1. This is a minor comment, but when I looked at the three categories for users in your storyboard I immediately asked myself where I would classify myself. And the answer is, it depends. I have a PhD, so I could go into that category, but then there would be some areas in which I see myself as an expert and even more areas where I am a novice. So I assume this relates to the content of the resource the widget is embedded in - maybe this could be made more obvious to users who in some cases only spend seconds on sending off a first search and then move on, depending on the results. But as this is the first storyboard I am aware that this is only a mock-up of how things may look like.

  2. That's a good point - on further consideration we are wondering whether to solve the question of determining the user's level of expertise by more general means - i.e. rather than specifically selecting a user level, the widget determines the user's level of expertise by means of other interactions. These could include particular search terms used. It might also be practical to determine whether the user is connecting from a .ac.uk via their IP address. Whatever method is chosen, it is probable that 'level of expertise' will be dealt with internally as a factor used in the machine learning / selection rather than being explicitly set by the user.