Toolbar Features - II

Accessibility: whether anchored or hidden, a toolbar should be instantly accessible without scrolling regardless of the size or the resolution of the screen. The screenshot below shows how the scrolling occurs in between the top and bottom toolbars which are visible and accessible at all times, and thus enhancing usability. If a user chooses to hide the toolbars, then the top and bottom areas of the screen will be “hot” areas. Upon hovering over a hot area, the corresponding toolbar appears without having to scroll, in which case, the toolbar is instantly accessible even though it is not visible because the user chose to hide it.

If scrolling is required, it occurs in between the top and bottom toolbars making them always visible, and if not visible because the user chose to hide them, then they will be accessible by simply hovering over their respective hot area at the top or the bottom.

Toolbar Features - I

Combining some of the best practices found in all worlds (i.e., desktops, mobile devices, appliances, games, and the web), a toolbar should include some of the following common main features:

􀂃

Draggable.

􀂃

Sizeable.

􀂃

Visual distinction of primary versus secondary functions.

􀂃

Special effects on buttons for all states including enabled, disabled, hovered, clicked, and selected.

􀂃

Selection of the functions to be included and those to be excluded in the toolbar.

􀂃

Selection of the order in which functions ought to appear in the toolbar.

􀂃

Multi-functional and context-driven whenever applicable.

􀂃

Remembrance through cookies and/or login of the display mode, location, size, selection of functions, order of functions, etc.

􀂃

Visibility: anchored (displayed at all times), or hidden (displayed upon hovering).

Bottom Toolbar

A webpage could include either a dynamic content such as a record in a database or static content such as the description of a product shown in text, graphics, illustrations, pictures, audios, or videos.

After completing a form of a dynamic webpage, a user might want to execute functions that are related to dynamic content such as saving, submitting, clearing, resetting, cancelling, adding, or deleting.

Similarly, after reading a static webpage, a visitor might want to execute functions that are related to static content such as referring, sharing, tagging, reviewing, noting, or bookmarking the webpage.

Thus, it makes sense for such functions to be grouped together and placed in a bottom toolbar below the dynamic or static content. The bottom toolbar must be intelligent enough to present the appropriate functions that correspond to the type of content. Thus, the bottom toolbar must be multi-functional and context-driven.

Top Toolbar

A website typically has some frequently used functions which are independent of the content of the current webpage. Examples of independent functions are registering, logging, searching, setting, etc. Thus, those independent functions are applicable across all webpages of a website. Such independence bonds those types of functions together in a group placed in the same location throughout the entire website – in a top toolbar. Hence, the main purpose of a top toolbar is to easily, instantly, and consistently access independent functions.

In addition, a top toolbar may also include helpful shortcuts related to certain functions or webpages that the owners of a website would like to encourage or promote to their visitors. Examples would be sending a message, chatting with a customer support representative, calling a sales representative, review the cart, etc.

Independent functions are primary, while shortcuts are secondary. As a result, their respective visual appearance should reflect their importance status. Finally, a top toolbar may include a logo of the company which reinforces the brand as shown in the example below. The logo should be a hyperlink to the webpage that describes the company.

Due to their independence from the current webpage, independent functions should be presented in pop-up windows as shown below. For instance, while reading a webpage, a visitor may decide to register. The action of registering should not cause the loss of the current webpage. Reading the webpage is indeed the main action, while registering is a temporary interruption because once the registration is completed, the natural course of event is to continue reading the current webpage. Same principle applies to other functions such as logging, searching, and setting. While many advocate against any pop-up, this is a good example where pop-ups are not just necessary but desirable in order to increase usability and enhance user experience.

A pop-up window is appropriate for functions such as registering, logging, searching, and setting because once the function is completed, the current webpage would be readily available without having to click on the back button.

Functional Architecture -II

Considering the number of functions, their features, and their actions, it is easy to see how things can get very complicated resulting into messy, disorganized, unfriendly, and unusable websites. The fundamental principle is to abolish the practice of designing websites based on a page-centric approach introduced by artists and technicians that resulted in chaotic mazes. Instead, we should borrow some discipline and best-practices found in desktop and enterprise applications developed by trained software engineers.

Functional architecture attempts to take a holistic approach that covers the entire website rather than being bogged down by the needs of a particular webpage. A good functional architecture starts by asking what functions are needed, how to group them together based on common properties, where to place them, and how to invoke them.

Desktop and enterprise applications have certain minimum industry standards, some best-practices, and certain software engineering disciplines that required a holistic architecture. This led to the creation of toolbars which offered consistency throughout a particular application, and throughout different applications. For example, the “Save” button in Microsoft Word stays in the same exact location throughout the entire product. Furthermore, the “Save” button, in almost all desktop or enterprise applications, is placed in the same spot. Such consistency increases usability within an application and across applications.

Websites on the other hand have been often created by artists who became technicians who fall short of being disciplined engineers. This led to the creation of websites which are page centric instead of being holistic. Those technicians have been designing websites one page at a time. Buttons appear anywhere. Inconsistency is everywhere – within a website and across websites. The lack of discipline in the entire websphere is mind-boggling. Mind you, other industries such as the auto industry or the electronics industry have adopted certain standards. Similarly, software in general, and the web in particular, should be subject to universal standards for the purpose of increasing usability and enhancing user experience.

Functional Architecture -I

Most websites are still nothing more than online brochures. In the future, websites will become web applications that include the following basic and common functions:

Every function has a set of features and a set of actions. For example, the reviewing function includes features such as rich text formatting, polling, filtering, browsing through reviews using a carousel, etc. Examples of actions in a function would be saving, submitting, cancelling, clearing, resetting, adding, deleting, etc. Furthermore, there are certain authoring actions that are related to objects which could be a block of text, graphics, illustrations, pictures, etc. Examples of authoring actions are cutting, copying, pasting, dragging, dropping, sizing, expanding, collapsing, flipping, panning, rotating, zooming, and highlighting.

Frequency

The frequency by which content is refreshed determines the retention rate of regular visitors. Publishers will have difficulty in maintaining such instant and continuous gratification. That is another reason why it is necessary for publishers to encourage collaboration and corroboration in order to satisfy a huge appetite for information collection and knowledge consumption

Taxonomy

The classification and organization of information have critical impact on usability. At the extremes, deep hierarchical taxonomies are simple but slow to navigate through, while flat taxonomies are fast to access but they are cluttered and messy. The information architecture of most websites is based on the publisher’s view of the world and not necessarily their constituents’. Sure enough, the classical taxonomy of websites is currently defined by products, services, specialties, etc. Another approach is to organize the content based on personas (type of visitors) or functions (type of transactions). In addition of providing multiple predefined taxonomies from which users can chose from, the ultimate websites of the future will allow frequent users to define their own taxonomy based on their preferences. By recognizing visitors and presenting to them the content organized in the way they prefer, publishers can bond with their users and turn them into loyal evangelists.

Format

Despite the advent of videos on the web, textual content dominates the websphere. Whenever videos are used, their content complements the textual content of a website. For instance, a webpage that includes a text description and some pictures of a product, may also include a video of the product being used. In this case, the text content which describes the product is different than the video which highlights the usage of the product. With the quick and wide adoption of videos along with the availability and the affordability of broadband, future websites will become true multimedia platforms by expanding the applicability of videos to infomercials, in which case, the same textual information is also conveyed in audio or video. Hence, users will be totally empowered by being able to not just choose the information that they wish to get, but also choose the format that they prefer. In essence, websites will become a combination of publication and television with the advantage of being connected, on-demand, searchable, traceable, customizable, reviewable, and referable.

Information Architecture

Content

Despite the proliferation of User Generated Content (UGC) such as blogs, comments, notes, annotations, recommendations, ratings, reviews, and the like, the great majority of websites are currently limited to content published by their publishers or owners. Future websites will become collages of content coming from different sources including publishers, visitors, users, and contributors like pundits or bloggers. Such collaboration and corroboration make the published content more comprehensive, convincing, connected, and viral causing websites to become hubs which increases their searchability, accessibility, meritocracy, and ultimately, their visibility in the websphere. Vice versa, the absence of such independent validation of the content will lead websites to their mediocrity, and eventually, to their demise.

Summary

The World Wide Web started as a communication tool in the 80’s. By early 90’s, with the advent of the browser, the web became a publishing platform consisting of websites which were nothing more than online brochures. By the end of the 20th century in the late 90’s, the web morphed into a transaction platform in which some websites became online stores. More than just communicating and publishing, web users were transacting at that time, which marked the beginning of the monetization of the web.

Nowadays, a decade later, the web became an application platform supporting all types of applications from enterprise applications to games. This evolution led to the rise of Software-as-a-Service (SaaS) under the Application Service Provider (ASP) model. However, despite this rapid growth of the usage of the web both in volume and diversity of usage, user experience of websites and web applications suffered first due to lack of broadband, and second by the limitations of the browser and HTML.

With the advent of new tools such as HTML 5 and the adoption of new Rich Interactive Application (RIA) frameworks such as Adobe Flex and Microsoft Silverlight, it is time to revamp the web.

This white paper proposes to strengthen the architecture of future websites by adopting five fundamental architectures, namely:

􀂃

Information Architecture that supports a collage of content coming from different sources in a collaborative and corroborative manner, a truly multimedia content, and a flexible taxonomy. While Search Engine Optimization (SEO) is critical for achieving visibility on the web, crawlability, searchability, and indexation should not compromise usability. In other words, finding something that turns out to be not so usable is actually useless.

􀂃

Functional Architecture that supports at least the most common functions including security (register and login), discovery (search and browse), social (share, refer, rate, review, note, tag, bookmark, favorite, and embed), commerce (order, pay, reserve, and track), Communications (e-mail, telephone, chat, post, and blog), contacts (rolodex, locations, maps, and directions), assistance (help, tutor, and wizard), and personalization (settings). Functions should be grouped together based on common criteria or properties and should be placed in toolbars similar to desktop applications.

􀂃

Navigation Architecture that supports a comprehensive website map that can be accessed using different views such as accordion, drop-down-menus, tree, or thumbnails. Such navigation system must be able to handle different types of hierarchical structures of websites – from the very flat to the very deep ones. Similarly, lists are better accessed using parent-child windows which increase productivity and usability. Furthermore, the usage of Rich Interactive Components (RIC) such as the accordion, carousel, docks, wheels, and walls are all necessary to offer an intuitive and pleasant navigation experience.

􀂃

Interface Architecture that supports Graphical User Interfaces (GUI) which are highly attractive, interactive, collaborative, immersive, and engaging. Such Gus offer a very rich user experience that satisfies the values of the brand of the publisher of the website.

􀂃

System Architecture that offers industrial robustness by providing scalability, reusability, flexibility, manageability, maintainability, multi-threading, load balancing, fault-tolerance, recovery, security, internationalization, etc.

Conclusion - II

There are three main navigation paradigms: flat & broad like the one used by Yahoo which was very popular initially, narrow & deep like the one used by Google which became popular due to the success of Google and the desire to imitate them, and hybrid like the one used by Luristic which is currently the paradigm of choice which is gaining ground over the other two paradigms.

Navigation is achieved by using Rich Interactive Components (RIC), which offer interaction, collaboration, personalization, customization, shortcuts, and recommendations based on analyses and intelligent behaviors. There are four criteria necessary to attaining rich navigation, namely: providing a variety of components, matching every component with the appropriate function or content, matching every component with the appropriate persona, and making every component interactive, immersive, and pleasing.

Choosing the right paradigms and the corresponding appropriate RICs cannot be done in vacuum. The selection must be based on the type of content, platform, devices, data volume, functions, space, personas, taxonomy, visibility, universality, and consistency.

Finally, rich navigation offers many important benefits to users and marketers. Specifically, rich navigation enhances browsing, discovery, usage, clarity, productivity, confidence, trust, and loyalty. In addition, Rich navigation offers a great ROI because when users are satisfied, a brand solidifies, gains market share, and increases market penetration, which makes marketers very happy.

Conclusion - I

Navigation is ubiquitous – it applies to any software that interacts with users, which is almost all types of software on almost all platforms. Furthermore, navigation is the heart and soul of usability without which user experience severely suffers. Considering the increasing importance of satisfying users, user experience dominates especially when technologies become commodities and basic needs are covered. Therefore, navigation has become a critical issue for achieving a rich user experience.

In order to provide a rich navigation, the navigation criteria, paradigms, components, interactions, special effects, and intelligent behaviors must be identified and provided. The integration of all those elements of navigation is what produces the richness. In other words, the total of all those elements is greater than the sum of each separate element, requiring a holistic approach to attain richness in navigation.

The two main purposes of navigation is access to information and execution of functions. Depending on the type of software, one role plays a more important role than the other, which dictates the type of navigation required. Navigation can be intentional or incidental. It basically defines the location and the paradigm to get to the desired location to access information or perform a function.

Benefits of Rich Navigation - II

With more clarity comes productivity - users become familiar with their surrounding and they know where to go, what they can do, and how they can do it.
 With more productivity comes confidence, comfort, and trust – users become more
 With more trust comes loyalty – users feel intimate with the system and bond with the brand.
 With loyalty comes testimonial – users become evangelists eager to promote and refer to others.
Users are not alone to benefit from a rich navigation. Marketers benefit as well. Obviously, when users are happy, a brand solidifies, gains market share, and increases market penetration. As a result, revenues and profits increase. Therefore, rich navigation represents a great Return On the Investment (ROI) for marketers.

Benefits of Rich Navigation - I

A rich navigation increases usability and enhances user experience. Specifically:

 Browsing becomes easier, quicker, and more pleasant – users have at their disposal the right components that allow them to wonder around.

 With good browsing comes better discovery – users can find not only what they were seeking but also new things that they haven’t thought about. Discovery is the master of search, which is the most common function on the web.

 With better discovery comes increase usage – users tend to stick around longer and come back more often, especially when they are learning or getting entertained.

 With more usage comes clarity - users are no longer lost or confused. They are aware where they are at and how they got there at all times

Navigation Influencers - V

 Tooltips: icons and buttons with labels, and tabs which always have labels, don’t have to have tooltips even though a tooltip that provides an explanation might be helpful. For example, a button that has a legible “disk” as an icon along with a label that says “Save” does not need to have a tooltip. However, a tooltip for that button that says “You must be logged in to save” might be useful especially when that button is disabled when a user is logged off. In this case, the tooltip clarifies the reason why the button is disabled. Furthermore, in order to enhance the user experience and assist users with disability, tooltips can incorporate an audio that expresses the content of the tooltip, which could be turned on or off based on the user’s preference.

Navigation Influencers - IV

 Labels: labels, which should be preferably centered underneath icons, should always accompany icons even when the icons are recognizable, and especially when they are not. The exception to this rule is when secondary functions represented by icons without labels need to be de-emphasized compared to primary functions represented by icons with labels that need to be emphasized. Thus, the importance of a function represented by an icon is usually determined by the size, the location, and the label (or lack thereof) of the icon. A bad scenario is to use unrecognizable icons without a label for a primary function, and the worst scenario is the absence of any icons or any labels, which leads to a total confusion as shown in the example below. In this case, the navigation of this website consists of bunch of meaningless bubbles that leave visitors totally confused. Specifically:
o A visitor has to guess that those bubbles are actually sections in the website.
o A visitor has to hover over a bubble to discover its corresponding section. In the example below, the user hovered over a bubble and got the “Contact Us” section.
o A visitor cannot tell which bubble belongs to “Contact Us” – it’s mumbo-jumbo. The tooltip position does not properly identify the bubble that it corresponds to.
o A visitor cannot quite catch a bubble because they are so bouncy.
This is a perfect example of the worst possible navigation system. In search of being different, unique, creative, and clever, the designer, who might have thought that the web was created as a showroom to exhibit hi/her artistic talent, ended up being not just annoying but even frustrating to visitors of that website.

Navigation Influencers - III

Icons: icons must be legible and preferably recognizable. As much as possible, standard icons, albeit with different style, should be used for common functions. For example, a “disk” must be used for saving, a “printer” for printing, a “cart” for ordering, a “magnifier” for zooming, a “pen” for reviewing, etc.

Navigation Influencers - II

Functions: the type of functions influences the choice for paradigms and components. For example, a list cannot be sorted in a carousel but can be in a table. Toolbars and ribbons are quite appropriate for common functions that are applicable throughout an application or a website instead of placing buttons at random within a webpage as it is currently done.

 Space: In case of several multiple choices that must be squeezed in a small area on the screen, drop down lists would take far less space than radio buttons even though the former require one click more than the latter.

 Personas: the type of users dictates the choices for navigation paradigms and components. For example, novice users prefer carousels, wheels, thumbnails, touch, and gesture interfaces over hierarchical trees, tables, and shortcut keys.

 Taxonomy: the information architecture has a great influence on navigation. For example, the content of a website could be organized by products or services, by type of visitors, by location, etc. For example, a government agency could organize its website to list all its forms in alphabetical order which would be very helpful for the employees of that agency who are intimately familiar with those forms, but useless for users who have no clue.

 Visibility: Toolbars and menus which include common functions must be visible at all times, or at least displayed upon hovering over a hot area, without having to scroll vertically, not to mention horizontally, which you can consider it at your peril.

 Universality: toolbars, panels, and maps which include common functions must appear on every page of a website.

 Consistency: consistency is a great virtue in usability because it satisfies expectancy. Since we are creatures of our habits, we can get used to the right and wrong things equally, even though we obviously prefer the right things. For example, even if a button has the wrong icon, is placed in the wrong location, and behaves in the wrong way, as long as that button consistently uses the same icon, is placed in the same location, and behaves in the same way every time it is dealt with, users will get used to it.

Navigation Influencers - I

Choosing the right navigation paradigm and the right navigation component for a given application requires a good understanding of the navigation influencers which could be the following:

 Content: the most appropriate paradigms to navigate through a list of pictures would be a carousel or a thumbnail panel because a visual selection can be made instantly offering the optimal user experience. On the other hand, a tree would be the most appropriate for a deep hierarchical content such as folder structures.

 Platforms: system software such as operating systems and browsers do influence the types of navigation that a particular platforms supports. For instance, using a standard browser, which was originally design for larger screens, to surf the web on a mobile device still does not offer a good user experience despite the progress made on those tiny devices.

 Devices: desktops, mobile devices, or embedded widgets dictate the space and speed that certain types of navigation require. For example, touch and gesture interfaces are more suitable for mobile devices and appliances than desktops or laptops.

 Volume: the number of items or choices defines the types of navigation that is most appropriate. For example, a large number of items would be much easier to access, sort, arrange, and order in a table rather than a carousel or a wheel.

Navigation Components - II

Behavior: In an RIC, each state such as enabled, disabled, hovered, clicked, and selected are clearly identified and uniquely associated with a behavior (visual effect, sound effect, etc.), style (embossed, engraved, etc.), and action (motion, animation, etc.).

 Analysis: certain RICs should have the capability of collecting and analyzing statistics for the purpose of diagnosing and recommending. For example, the capability of analyzing the content of the current webpage and recommending similar or competing web pages; providing the list of most visited or the highest rated webpages; providing a history of webpages visited or functions executed; and automatically creating shortcuts based on such analyses and recommendations.

 Intelligence: certain RICs should have embedded self-learning intelligence gathered by defaults, preferences, remembrance, and analyses. In essence, an RIC is like wine – it gets better with age. The more an RC is used, the more satisfying it becomes to the point where a user can feel certain intimacy with the system, which in turn creates trust, credibility, and ultimately, a much richer user experience.

 Personalization: users should be able to personalize (not to be confused with customization by the webmaster) the skin, the behavior, and the intelligence of RICs based on their personal preferences.

Navigation Components - I

Navigation is achieved by using components such as toolbars, menus, ribbons, buttons, tabs, panels, maps, accordions, trees, carousels, wheels, tables, thumbnails, hypertext, hyperlinks, and shortcuts. There are four criteria necessary to attaining rich navigation, namely:
 Providing a variety of components.
 Matching every component with the appropriate function or content.
 Matching every component with the appropriate persona.
 Making every component interactive, immersive, and pleasing.
Thus, rich navigation involves the usage of Rich Interactive Components (RIC). The richness of those components is defined through the following elements:
 Identification: items in an RIC should be easily and intuitively identifiable using recognizable icons along with legible and meaningful labels.
 Access: items in an RIC should be easily and quickly accessible from anywhere such as breadcrumbs in a website map.
 Skin: the skin of an RIC consists of basic elements such as lines, borders, background, shadows, and icons. Each of those elements has certain properties such as color, texture, gradient, layout, location, size, and style. In addition of being beautiful, the skin should be customizable to match the desired branding of a company.

Navigation Paradigms

A navigation system can be:

 Flat & broad, in which case all choices are exposed at once. The main advantage of such system is that it requires the least number of clicks to achieve a task, but the main disadvantage is that it may overwhelm and confuse users with too many choices. A good example of a website with a flat & broad navigation system would be Yahoo.

 Narrow & deep, in which case choices are logically grouped and only a limited number of choices are presented at a time. The main advantage of such system is its simplicity, but its main disadvantage is that it requires users to guess where the choices are categorized, to dig deep into the structure to find what they want, and thus force them to perform a higher number of clicks compared to a flat navigation system. A good example of a website with a narrow & deep navigation system would be Google.

 Hybrid, in which case the system is self-learning, intelligent, and flexible enough to be flat & broad or narrow & deep whenever appropriate based on system defaults, system recommendations, users’ recommendations, users’ preferences, and users’ navigation habits tracked by remembrance capabilities. Essentially, with a hybrid system, navigation molds itself to users giving them an impression that the system is familiar or intimate with them, and hence, offers them a much better satisfying experience. A good example of a website with a hybrid navigation system would be Luristic.

Navigation Definitions - III

Furthermore, in order to provide richness in navigation, some special effects must be introduced in the navigation paradigm in order to promote intuitiveness and richness. Such effects include the colors of different states (enabled, disabled, hovered, clicked, or selected), the impression such as embossed or engraved, the animation such as Genie motion in a dock, and the sound upon certain actions such as hovering, clicking, opening, closing, expanding, collapsing, sizing, dropping, or pasting.

Navigation Definitions - II

Depending on the type of software, one purpose might be more important than the other. In a game for instance, there is not much information to access, and thus, performing functions is far more important than accessing information, yet providing an intuitive navigation system in a game to perform its functions can determine its success or failure. In an enterprise mission critical application, accessing information for analysis or diagnostic purposes is of paramount importance. Since websites have morphed from online brochures to full- fledged applications, accessing information and performing functions have become both equally critical for websites. Therefore, what influences the usability of websites, more than any other type of software, is indeed their navigation system. After all, the web is nothing but a network of websites which themselves consist of a collection of hyperlinked webpages. Hyperlinking, which originated from the Internet and is an integral part of it, is nothing but a form of navigation.
Navigation can be:
 Intentional, in which case, a user has a clear objective as to where to go to access certain information or how to go about performing a certain function; or
 Incidental, in which case, a user has no specific purpose other than discovering things while browsing or searching. By the way, browsing and searching are by far the single most important and common functions performed on the web, reminding us again of how critical navigation is for websites.
Regardless of whether it is intentional or incidental, navigation deals with both location (where) and paradigm (how). In simple terms, navigation answers the following questions:
 Where am I?
 From where, and how, did I get here?
 Where, and how, do I go to access information or perform a function?

Navigation Definitions - I

Navigation in software is quite ubiquitous. It applies to almost any type of software from enterprise to personal applications running on any platform including desktops, hand-held devices, appliances, games, and of course the web. Essentially, whenever there is an interaction between a piece of software and a user, navigation is required.

Navigation has two main purposes:

 Access to information which could be a static content such as an article in a webpage, or a dynamic content such as a record in a database; or

 Perform a function like register, login, logoff, comment, rate, review, refer, share, tag, bookmark, blog, chat, search, categorize, organize, reserve, buy, etc. All such functions require a new screen to be displayed in order to perform its function. Those functions should not be confused with commands such as save, submit, add, delete, edit, post, preview, print, cut, copy, paste, drag, drop, size, or sort all of which are execution commands and not navigation functions – a nuance but an important distinction. Typically, execution commands, which are tightly related to the content, must be in close proximity of the content, preferably in a bottom toolbar below the content as shown in the screenshot below. On the other hand, buttons representing functions, which may or may not have any relationship with the displayed content, can

be placed anywhere, but preferably in a top toolbar.

Summary - II

The elements of a rich navigation are the following:

 Identifying the navigation criteria such as content, function, space, personas, volume, devices, or platforms that influence navigation in a particular system.

 Selecting the appropriate navigation paradigm considering all the applicable navigation criteria which have been identified.

 Selecting the appropriate navigation component for each paradigm selected.

 Providing the appropriate interaction in each navigation component selected.

 Providing the appropriate special effect for each interaction in order to increase intuitiveness and richness.

 Providing intelligent behavior in each navigation component such as remembrance, shortcuts, suggestions, and recommendations based on system defaults, user’s personal preferences, and user’s selection habits.

The integration of all the above elements is what produces the richness. Useful alone, doesn’t mean usable. Usable alone doesn’t mean functional. Functional alone doesn’t mean powerful. Powerful alone doesn’t beautiful. Beautiful alone doesn’t mean desirable. Finally, desirable doesn’t mean useful, and thus, completing a full circle. In other words, the total of all those elements is greater than the sum of each separate element, requiring a holistic approach to attain richness in navigation.

Summary - I

Desktops, mobile devices, and the web have each introduced certain progressions but also some regressions in certain cases. For example, despite the introduction of AJAX (Asynchronous JavaScript And XML), websites and web applications still suffer until today due to the limitation of HTML and the browser, which at their foundation were built as a publication platform that morphed into an application platform, albeit a weak one.
Now that we have been exposed to many different devices with many different platforms, it is possible, if not necessary, to establish some best-practices regarding navigation, which is the single most important criteria for usability and Rich User Experience (RUE). The objective is to raise the bar from the low common denominator of a mundane to a rich navigation that offers engaging, immersive, interactive, collaborative, attractive, and even desirable experience that attracts intrigued visitors and convert them into excited users who become paying customers who finally morphed into loyal evangelists.

Company’s Biography: Luristic - II

 LureBar allows users to select a webpage with Genie effect, to preview the selected webpage in a thumbnail, and to navigate to the selected webpage as shown below.

 LureDoc allows users to navigate, browse, search, and annotate through a document which could be a brochure, a catalogue, a paper, a report, an article, a manual, a book, a slide presentation, or a photo album in many different ways including flipping, sliding, panning, or scrolling. It also allows users to refer, rate, review, share, tag, bookmark, favorite, embed, and download a document.

 LureList allows users to manipulate a list of items by selecting a particular view of the list, sorting the list in ascending or descending order, define the columns to be sorted on, arrange the order of columns, and drill down on a particular item in a list.

 LureMap allows users to navigate through the website by choosing different navigation paradigms such as the accordion, drop down menus, tree, or thumbnails. In addition to some very useful shortcuts, LureMap offers some suggestions for webpages to visit such as similar webpages, top rated webpages, and recommended webpages.

 LureMedia allows user to view a video or a slide presentation. It also allows users to refer, rate, review, share, tag, bookmark, favorite, embed, and download the content.

 LureSurf allows users to navigate through a document with multiple webpages.

Luristic is particularly apt at turning the complex simple, and the simple powerful. We get motivated by demanding customers who want it all – from functionality to efficiency, from reliability to scalability, from flexibility to security, from usability to beauty, from function to form, from art to science, from intuition to analytics, from quantitative to qualitative, and everything in between.

Company’s Biography: Luristic - I

Luristic is a new breed of firm that combines the technical skills of an innovative software company along with the creativity of an avant-garde agency.
Luristic is specialized in Rich User Experience (RUE) for websites, web applications, desktop applications, mobile applications, embedded applications, and games.
Luristic is a leader and a pioneer in RUE – a very exciting yet quite complex multi-disciplinary field which combines function & form, substance & style, and art & science. It requires the precision of a software engineer, the analytics of a computer scientist, the heuristics of a cognitive behaviorist, and the creativity of an artist.
Luristic takes a holistic approach by offering a comprehensive set of products and services that deliver world-class, award-winning, and state-of-the-art applications and websites with very rich user experiences that lure, attract, engage, interact, convert, and retain users with extensive features, robust architecture, logical taxonomy, flexible workflow, intuitive navigation, and stunning graphical user interface.
Luristic’s products complement the two most popular Rich Interactive Applications (RIA) platforms, namely Adobe Flex and Microsoft Silverlight. The products are highly customizable with a very flexible skin which can match the branding of a company. Those products consist of an integrated suite called Lure which includes the following Rich Interactive Components (RIC):

Biographies

Author’s Biography: Dr. David Saad

Dr. David Saad is the founder, Chairman & CEO of Luristic. He is responsible for the overall direction and management of the company. He is a seasoned veteran in the software industry with over 27 years of experience in sales, marketing, engineering, and funding making him uniquely positioned to lead Luristic. Dr. Saad started his career as a system programmer, became a data base consultant, a public speaker, an entrepreneur, and an angel investor.

Prior to Luristic, Dr. Saad was the founder, Chairman & CEO of Clupedia - a social media company that offered clues from crowds. Clupedia was the Wikipedia of opinions. The company won several industry awards for its innovation including the AlwaysOn Media 100 award. During his tenure with Clupedia, Dr. Saad won the Most Promising Investment Award during the 2006 Fast Pitch competition sponsored by Tech Coast Angels (TCA) from whom he raised a Series A round of funding.

Prior to Clupedia, Dr. Saad was the founder, Chairman & CEO of Calibra - a software company that offered a viral marketing tool that used Social Network Analysis (SNA) in order to identify influencers within a social network for the purpose of launching, managing, and measuring viral campaigns. Calibra was nominated for the Innovative Product of the Year Award by the American Electronics Association (AeA).

Prior to Calibra, Dr. Saad was the founder, Chairman & CEO of Braintec - a software company specialized in Unix kernel development, compilers, computational linguistics, and artificial intelligence. Braintec became the largest Unix engineering firm in Southern California with customers such as AT&T, IBM, Sun, NCR, and Teradata. Braintec was sold to Technisource – an IT firm listed on NASDAQ which was taken private by IntelliMark Holdings.

During his tenure with Braintec, Dr. Saad was also the founder, Chairman & CEO of In-D-Pocket - a label company specialized in R&B, Hip Hop, and rap music. One of the company’s acts was a female group called Foxx Empire whose debut album included couple of hits such as ―Do You Want Me‖, ―Can’t Let Go‖, and a remix of ―Walkin’ in Rhythm‖.

Prior to Braintec, Dr. Saad worked for Mathematica Products Group (MPG) – a software division of Martin Marietta where he was instrumental in establishing the Canadian division. During his stint at MPG, Dr. Saad won several awards for his software sales achievements including the ICP award.

Prior to Mathematica, Dr. Saad worked as a programmer and data base consultant for IST - a consulting and service bureau based in Montreal, Canada.

Dr. Saad earned a PhD in Computer Science with high honors from University of Paris, an M.Sc.A. Cum Laude in Computer Science from McGill University, a B.Sc. in Computer Science from Concordia University, and a D.E.U.G. in Mathematics & Economics from University of Paris. He speaks four languages. He had a very successful athletic career in Judo during which he participated in the European Championships, World Championships, Pan American Games, and the Olympic games. Dr. Saad is a USTA member and regularly participates in league and national tennis championships

Conclusion

Software is everywhere, and with Rich User Experience (RUE), software will finally be somewhere.

With their hay days in the rear view mirror, back-ends have become a commodity, leaving the door wide open for front-ends to dominate the landscape.

With such market conditions, user experiences dominate. What distinguishes one product, one application, one website, or one game from another, is indeed the user experience.

Considering the cost of attracting, let alone retaining, customers when competition is only a click away, user experience is not something but everything. It is the product not just a feature. It is not a nice thing to have but a must have. It is not a vitamin but a medicine.

RUE applications are incredible, extraordinary, and sophisticated applications that are not just useful and usable, but desirable. They are solid on the back-end and stunning on the front-end.

However, designing and incorporating RUE in a product is not an easy task to be left in novice hands. RUE is a complex multi-disciplinary field that combines computer science, software engineering, information architecture, flow architecture, cognitive behavior, and art.

While so far, RUE applications have found their way into some niches where they are most needed such as configurators, dashboards, business analytics, weather systems, and the likes, they are quickly entering the mainstream. The stumbling blocks have been the complexity, availability of experts, lack of standards, and difficulty in measuring success because the intangible overwhelm the tangibles.

Despite such obstacles, which are being surmounted, the benefits derived from RUE are obvious. Whether it is an increase in customer satisfaction, an increase in loyalty, an increase in market share, an increase in productivity, a decrease in cost of development and maintenance, or an increase on ROI, all constituents benefit from RUE from users to marketers, and from engineers to investors.

In conclusion, the time for RUE is now…

Higher ROI

with all the above benefits, RUE increases the return on the investment in applications or websites. Below are few examples of ROI achieved from good user experiences:

Dell 3400% increase in sales over 1.5 years
IBM 400% increase in sales
Standard Life 75% above target in the first year
Staples 75% increase in sales representing $430 million
United Airlines 200% increase in online ticketing

Lower costs –

a good user experience reduces costs by lowering the number of call center calls and the duration of each call. Furthermore, the average call center cost per call is $5.50 while a web self-service is $0.10 (Need to Cut Costs? Improve the Web Site Experience – Forrester Research Report).

Higher profits –

better engagement translates into higher conversion and higher loyalty which translate into higher revenues which result in higher profits.

Stronger brand –

a good user experience attracts consumers to a brand and reminds them of the values that the brand offers by allowing them to interact with the brand.