The Elements of Rich Navigation

White Paper

01-04-2010

Dr. David Saad - Chairman & CEO

David.Saad@Luristic.com

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

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

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

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

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

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

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

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

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

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

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

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

1036 Quail Ridge Irvine, California 92603 Tel: (949) 678-9930

www.Luristic.com info@Luristic.com sales@luristic.com careers@Luristic.com

© 2010 Luristic Corporation