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.

1. The Elements of Rich Navigation
White Paper
01-04-2010
Dr. David Saad - Chairman & CEO
David.Saad@Luristic.com

2. Table of Content
1. Summary ………………………………………………………………………………………………… 3
2. Navigation Definitions …………………………………………………………………………………… 4
3. Navigation Paradigms ………………………………………………………………….……………….. 6
4. Navigation Components ……………………………………………….……………………………….. 7
5. Navigation Influencers ……………………………………………………………….………………….. 8
6. Benefits of Rich Navigation ………………………………………………..…………………………… 10
7. Conclusion ……………………………………………………………………………………………….. 11
8. Biographies ………………………………………………………………………………………………. 12
8.1. Author’s Biography: Dr. David Saad ……………………………………………………….. 12
8.2. Company’s Biography: Luristic ……………………………………………………………… 13
9. References ……………………………………………………………………………………………….. 14

3. 1. Summary
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.
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.
3

4. 2. Navigation Definitions
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.
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?
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.
4

5. 5

6. 3. 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.
6

7. 4. Navigation Components
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.
 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.
7

8. 5. Navigation Influencers
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.
 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.
8

9.  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.
 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.
 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.
9

10. 6. Benefits of Rich Navigation
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.
 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.
10

11. 7. Conclusion
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.
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.
11

12. 8. 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.
12

13. Company’s Biography: Luristic
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):
 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.
13

14. 9. References
User-Centered Interaction Paradigms for Universal Access in the Information Society, by Christian Stary and
Constantine Stephanidis, June 2004
iPhone User Interface Design Projects – Apps that are more than a pretty face, by David Barnard , Joachim
Bondo, Dan Burcaw, David Kaneda, Craig Kemper, Tim Novikoff, Chris Parrish, Brad Ellis, Keith Peters,
Jurgen Siebert, and Eddie Wilson, 2009, ISBN-13: 978-1-4302-2360-3.
User Interface Design and Evaluation for Mobile Technology, 2008
Web Navigation: Designing the User Experience, by Jennifer Fleming, O;Reilly Media, 1998.
14

15. 1036 Quail Ridge www.Luristic.com
Irvine, California info@Luristic.com
92603 sales@luristic.com
Tel: (949) 678-9930 careers@Luristic.com
© 2010 Luristic Corporation