Conclusion

Users’ expectations are on the rise. The web is aging and it needs to be revamped.

Now that there are several platforms that users resort to for different needs, with each platform having its own best-offerings, there is a need to converge such best-offerings of each platform in all other platforms whenever applicable to create an ideal and best-of-all-words. For example, there is no reason today why Rich Interactive Components (RIC) such as accordion, carousel, wheel, wall, dock, parent-child panels, configurators, mixers, selectors, and the like, which have been historically available on the desktop, should not also be available on the web.

Websites are morphing into full-fledged web applications of all types from enterprise applications to games. Such transformation requires a more thorough and disciplined approach to architecting websites beyond being online stores, or worse, online brochures. So far, web design has been page-centric suffering from the limitations of the browser and HTML. The websites of the future will be based on RIA platforms. They will have a broad architecture that covers content, functions, navigation, user interface, and system requirements to provide a minimum industrial robustness along with high usability and very rich user experience.

System Architecture

stage. Websites can no longer be considered as a set of interconnected webpages that can be managed by a document management system.

Like any application that requires a minimum level of industrial robustness, websites require a three-tier architecture that includes:

􀂃 A presentation tier that covers the graphical user interface with all its aesthetics and interactions. It allows users to retrieve and enter data.

􀂃 An object tier that covers all the algorithms related to business rules, data validation, work flow, etc. The modules of this second tier reside on a server machine, to assist in resource sharing.

􀂃 A data tier that includes all the static and dynamic content.

This three-tier architecture offers scalability, reusability, flexibility, manageability, maintainability, multi-threading, load balancing, fault-tolerance, recovery, security, internationalization, etc. Code, components, modules, and web services can be created, distributed, and used across the network as required.

Interface Architecture

the following parameters:

􀂃 Layout, which defines the location on a webpage where objects such as toolbars, forms, widgets, text, media players, buttons, sliders, and the like are placed.

􀂃 Aesthetics, which define the shape, style, colors, gradients, and textures of objects. Typically, it is highly desirable that the aesthetics match the properties of the company’s brand.

􀂃 Interactions, which define the colors, textures, gradients, sounds, animations, and special effects for:

o States including enabled, disabled, hovered, clicked, selected, or visited state. For example, an enabled button should be embossed to invite a user to click on it, while a disabled button should be engraved with fading colors to indicate its disabled status.

o Shapes including icons representing the different states of the cursor. For example, a cursor could be normally represented by an arrow which is transformed into a hand upon hovering over a hypertext or a hyperlink to indicate to a user that the text or the object is a link. Different shapes should be used for sizing, dragging, panning, etc.

o Actions including cut, copy, paste, drag, drop, size, collapse, expand, rotate, flip, slide, pan, scroll, etc.

More than just looks, aesthetics, and beauty, the architecture of the different elements of a GUI must have an underlying function beyond their façade. In other words, the elements of a GUI must have a meaningful behavior that makes their usage more intuitive. For instance, when dragging an object, it is necessary to display the shadow of the object to indicate to the user that the object is actually being dragged and to enable the user to drop the object at the desired location. Playing a sound when expanding a window and another sound when collapsing it could enhance the user experience. When users become so accustomed to all such sounds, animation, and special effects, they unconsciously rely on those special effects to conclude whether or not their action was successfully executed. Thus, those special effects become an integral part of the GUI.

Navigation Architecture - VI

Another scenario is navigating a list of items which could be documents, webpages, pictures, products, etc. Conventionally, web designers have used a page-centric approach to managing and accessing lists in which the list of items is presented in one page, and the details of each item are presented in another page that replaces the page that includes the list. So once a user clicks on an item on the list, that page is refreshed and is replaced by a page showing the details of the selected item. If the user needs to see the list again, he/she must click on the back button. In the event that a user is in discovery mode, this paradigm could become quickly quite annoying because the user will have to go back-and-forth between the page that shows the list and the page that shows the details of an item until the desired item is found. By using parent-child windows in an asynchronous manner that does not require refreshing the entire webpage every time an item is selected, navigating through a list of items becomes not just effective but very pleasant.

Parent window that includes a list which could be displayed in different views such as carousel, thumbnails, wheel, wall, and directory or table whose columns could be sized, ordered, and sorted like in a spreadsheet providing desktop features on the web. The parent window itself can be sized, collapsed, expanded within the current webpage, or expanded in a new tab in the browser.

Child window, which is showing the details of the selected item in the list, can include another webpage, a PDF file, a media player, tabs, etc. When a new item is selected from the list, only the child window is refreshed and not the entire webpage. The child window itself can be sized, collapsed, expanded within the current webpage, or expanded in a new tab in the browser.

Navigation Architecture - V

In case of flat hierarchies, or in case of functions to be executed, the usage of a bar or a dock with a wave or Genie effect similar to the Mac Dock would be very appropriate. In such event, websites will start behaving like desktop applications, and vice versa, combining the best practices of both worlds.
A thumbnail appears upon hovering over an icon in the dock similar to what currently Windows 7 offers in its “Status Bar”.
Such feature offer users the capability of visually browsing a website, which is a very effective way of navigating without ever resorting to any click or any refreshing of a webpage.

A bar or a dock with a wave or a Genie effect when hovering over icons offers a very pleasant user experience that users are familiar with on their desktops such as the Mac Dock. No reason why such rich user experience should not be made available on the web.

Navigation Architecture - IV

Navigation Architecture - III