SlideShare uma empresa Scribd logo
1 de 27
Baixar para ler offline
Cover Sheet




                                                             White Paper



                                    Rich User Experience

                                                           October 2005




                                                       Dr. David Saad
                                                 Chairman, President & CEO
                                                    Calibra Corporation




                                                                   Notice
The information contained in this document reflects Calibra’s current view of the subject matter discussed herein as of the date of
publication. This document is subject to changes and, therefore, it shall not be construed as a commitment by Calibra who does not
guarantee the accuracy or completeness of any information contained in this document after the date of publication.

THIS WHITE PAPER IS PROVIDED “AS IS” FOR INFORMATIONAL PURPOSES ONLY. CALIBRA MAKES NO WARRANTIES,
EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, AND EXPRESSLY DISCLAIMS ANY AND ALL IMPLIED
WARRANTIES, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE, AND NON-INFRINGEMENT.

Calibra may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering the contents of this
document, and Calibra and its licensors retain all right, title, and interest in and to such intellectual property rights. Except as expressly
provided in a written agreement between you and Calibra, the furnishing of this document does not grant you any license, express or
implied, to any such patents, patent applications, trademarks, copyrights, or other intellectual property of Calibra.
                      z
Calibra and B u z are trademarks or registered trademarks Calibra protected by the laws of the United States and other countries.
This white paper may contain some references to trademarks owned by entities other than Calibra, and such trademarks are the property of
their respective owners.
Table of Content

Synopsis ……………………………………………………………………………………………………………….                                   1

Needs ……………………………………………………………………………………………………………….....                                  1

Obstacles ………………………………………………………………………………..…………………………..…                                2

Responsibilities ……………………………………………………………………………………………………..…                             2

Inadequate Current Solutions ……………………………………………………………………………………..…                       2

Future Solutions ……………………………………………………………………………………………………....                            3

    Data Entry …………………………………………………………………………………………………....                               5

    Data Display ………………………………………………………………………………………………....                              6

    Drop Down Lists ……………………………………………………………………………………………..                              7

    Drop Down Lists ……………………………………………………………………………………………..                              7

         Buttons With Appropriate Icons ………………………………………………………………….                     7
         Drop Down List With Radio Buttons …………………………………………………….……….                   7
         Drop Down List With Check Boxes …………………………………………………….….…….                    8
         Drop Down List With Radio Buttons & Icons & Alphabetical Index ………………….……….   8
         Drop Down List With Check Boxes & Alphabetical Index …………………………….……….         9

    Data Entry With Spin Buttons ……………………………………………………………………………… 10

    Data Entry With History …………………………………….………………………………….…………… 10

    Data Entry With Date Picker ……………………………………………..………………………………… 10

    Data Entry With Tree Picker ……………………………………………..………………………………… 11

    Section or Web Site Map With a Tree Picker ………..…………………………..……………….……… 11

    Scrollable Window ………..………………………………………………………...……………….……… 12

    Fonts Picker ………..………………………………………………………………..……………….……… 13

    Bullets Picker ………..………………………………………………………………..……………….…….. 14

    Alignments Picker ………..…………………………………………………………….…………….……… 15

    Spacing Picker ………..………………………………………………………………..……………….…… 16

    Color Picker ………..………………………………………………………………..……………….………                             17

    Gradient Picker ………..………………………………………………………………..……………….….                           18

    Texture Picker ………..………………………………………………………………..………………..….                           19

    Pattern Picker ………..………………………………………………………………..…………………….                            20

    Table ………..………………………………………………………..…………………..……………….….                               21

    Social Networks ……………………………………………………………………………………………..                              22

Conclusion …………………………………………………………………………………………………………….                                  23
SYNOPSIS

All the substantial investment and effort over twenty years of extensive research, development, and deployment
of graphical user interfaces for desktop and client/server applications, have been more or less thrown away with
the introduction of the Browser and HTML. For example, do you know that until today, HTML does not support
some of the most basic widgets such as a Data Entry with Spin Buttons? Appalling!!!. However, things are
improving a bit with the adoption of new technologies such as AJAX and browsers are becoming more than
just surfing tools by including collaborative and social networking features.

After many frustrating years, it is now time to bring all the functionality, usability, and high navigation onto the
web. The next generation of web sites and web-based applications must meet and even exceed some of the
features and standards typically found on desktop and client/server applications.

Considering the overwhelming monopoly of the leaders in the industry in the system software, browsers, and
development tools segments of the industry, it is ample obvious that those leaders have failed their own
customers (i.e., application developers) and must now take on their responsibility by providing the appropriate
platform which will offer the best of both worlds – the rich content and networking inherent in the web, on one
hand, and the high functionality, usability, and navigation typically found in desktop and client/server
applications, on the other.


NEEDS

While the Internet in general, and the web in particular are very rich in content and networking, they fail
miserably on functionality, usability, and navigation. On the other hand, while desktop and client/server
applications are quite rich in functionality, usability, and navigation, they are poor on content and have limited
networking restricted to LAN or WAN. There is a need to have the best of both worlds – the rich content and
the networking capabilities of the web combined with the rich functionality, usability, and navigation of desktop
and client/server applications.

As an analogy, in the very early years of the automobile industry, consumers had not too many choices - cars
came in “black, black, and black”.




Similarly, in the very early years of the Internet, companies had not too many choices either - web sites came in
“flat, flat, and flat” (no disrespect intended to any of the web sites displayed below, even though, we place the
responsibility squarely on their owners).




Today, it is not enough to have fast cars. We also need cars with leather seats, air conditioning, hi-fi stereo,
GPS system, etc. We want to ride with safety, comfort, pleasure, entertainment, and style.

Similarly, it is no longer enough to have web sites that download fast. We also need to have functionality,
usability, easy navigation, nice aesthetic, audio, video, and an overall rich and fulfilling user experience.

                                                         1
OBSTACLES

Historically, due to limited bandwidth and its cost, rich user experience was simply not technically or financially
feasible. Hence, browsers and scripting languages were developed with such restrictions in mind. However,
bandwidth is today plentiful and is relatively affordable. However, web development tools have not evolved at
the rate that they should have to offer a rich user experience. The main reason for such stagnation is the
monopoly that certain leaders in the industry have attained. For example, HTML and browser technologies
have been more or less quite stagnant in the last few years. Lack of competition in those sectors does not
entice existing players to work hard to earn market share while customers can’t complain too much due to lack
of choices.



RESPONSIBILITIES

Application developers ought to concentrate on their domain expertise by focusing on their application and not
on reinventing the wheel and developing system features, tools, or widgets. For example, application
programmers should not be asked to develop spin buttons, drop down lists, font pickers, color pickers, or
tables. All such features must be readily available from companies who develop system software such as
operating systems, browsers, or development tools such as Interactive Development Environments (IDEs).
Those companies have indeed the responsibility to offer such features to application developers allowing them
to be productive by focusing on their application.

System software vendors have the responsibility to make it friction free to application developers to develop and
deploy their applications using such features. Friction free means no compatibility problems, no downloading
necessary, no plug-ins required, no alignment hustles, no delays in deployment, no delays in execution, etc.

System software vendors must offer WYSIWYG type of development tools with drag and drop capabilities
allowing developers to easily and quickly select any widget among a rich set of widgets in order to design
applications with a rich user experience that offers high functionality, usability, and easy navigation.



INADEQUATE CURRENT SOLUTIONS

There are two main solutions which offer a rich user experience: Java Applets and Active X components. While
those two solutions might be technically elegant in some cases, they are unfortunately not very feasible for the
following reasons:

            Both solutions take a long time to download even under the best scenarios. Users are simply not
            willing to wait. Competition is one click away.

            Both solutions require users to enable the plug-in option in their browser. The majority of users,
            especially novice ones, do not know how to do so. In this case, the inconvenience becomes a
            handcuffing annoyance.

            Both solutions require users to download the appropriate plug-ins after enabling that option on their
            browser, yet another obstacle to deal with.

            Both solutions are poor at synchronizing and controlling the version of plug-ins resulting into an
            incompatibility nightmare.

            Both solutions represent a security hazard resulting into a strong policy from CIOs prohibiting any
            such downloads.

            In a true thin client environment, downloading anything is simply not possible. Hence, unless those
            plug-ins are embedded in the browser or better in the operating system, users with thin client will be
            left out hanging, especially Cyber Café users.

Furthermore, now that Microsoft is no longer required to incorporate Java in Internet Explorer, and considering
that Microsoft owns almost 95% of the browser landscape, the days of the Java Applet solution are counted if
not already gone, unless companies like Sun take immediate actions to resurrect Java on the client side.

                                                         2
FUTURE SOLUTIONS

In order to avoid all the obstacles and problems mentioned above, a rich set of widgets must be provided either
in HTML, in the browser, or even better, in the operating system, even though the latter might cause some
portability problems. In addition to the functionality, usability, and navigation mentioned above, the next
generation of web sites and web-based applications must provide the following:

            Customization of widgets to meet the look and feel of a company’s web site as well as its business
            processes.

            Personalization of widgets by each user who can define a set of preferences for aesthetics,
            functionality, and navigation. For example, based on certain conditions, a user should be able to
            select dynamically a content of a drop down list or a web page to automatically go to.

            Profiling to allow companies to better serve their constituents based on their personal preferences.

            Standard client data validation such as numeric, date, time, e-mail address, URL addresses, etc.

            Standard intelligent business validation such as automatic address processing which intelligently
            completes an address based on the minimum information provided by the user.

            Database centric instead of publication centric. For example, list of contacts or list of addresses
            must be stored in a database and displayed in widgets (like OutLook), instead of being published
            using HTML. The rational behind such paradigm shift is to reduce the maintenance cost. With
            HTML, a company needs an HTML expert to perform mundane tasks such as spelling corrections,
            modification, additions, or deletions all of which could and should be performed by a secretary.
            Hence updating a web page should be no different than update a record in OutLook. Hence, the
            distinction between a desktop application and a web-based application from the user perspective
            should be minimal.

            Collaboration to allow users to share in real-time information, pictures, videos, etc.

            Social Networking to allow users to be part of online communities.




The benefits of such advanced features would be an increase in productivity and a decrease in typing errors.
Hence, to the extent possible, the system must fill up the screen as much as possible with a minimum of typing
on behalf of the user. Therefore, from the above list, rich user experience is not limited to look & feel as it is
generally conceived, but rather to rich functionality which enhances productivity as well.

                                                          3
The following represents a partial list of widgets desired or necessary to offer a rich user experience on the
web:
            Data Entry
            Data Display
            Data Entry with History along with automatic sorting and searching capabilities
            Data Entry Box for inserting images, pictures, etc.
            Data Entry with File Locator
            Data Entry with Spin Buttons that spins on numeric, date, time, and alphabetic data.
            Data Entry with Drop Down List
            Data Entry with Drop Down List and Radio Buttons indicating single selection
            Data Entry with Drop Down List and Check Boxes indicating multiple selections
            Data Entry with Drop Down List and Radio Buttons and Alphabetical Index
            Data Entry with Drop Down List and Radio Buttons and Icons
            Data Entry with Drop Down List and Radio Buttons and Alphabetical Index and Icons
            Data Entry with Drop Down List and Check Boxes and Alphabetical Index
            Data Entry with Drop Down List and Check Boxes and Icons
            Data Entry with Drop Down List and Check Boxes and Alphabetical Index and Icons
            Data Entry with Tree Picker
            Standalone Tree
            Data Entry with Date Picker
            Calendar
            Color Picker
            Gradient Picker
            Texture Picker
            Pattern Picker
            Fonts Picker
            Bullets Picker
            Alignments Picker
            Spacing
            Sound Picker
            Graphic Picker
            Special effects
            Data Entry with Scrollable Window with Ruler and with Rich Text formatting
            Data Display with Scrollable Window with Ruler and with Rich Text support
            Table with extensive features such as searching, filtering, sizing, linking, viewing, grouping, etc.
            Find & Replace
            Progress Bar
            Media Player skins to match the look and feel of corporate web sites as shown below




                                                        4
Data Entry

The Data Entry widget is one of the most common widget which is usually used            Data Entry
with other widgets such Drop Down Lists and Pickers.

The Data Entry widget must provide the following main functions:

              Typing

              Editing with Delete, Backspace, and Insert buttons enabled

              Scrolling right and left using the appropriate arrows on the keyboard

              Data type including:
                         Alphabetic
                         Alphanumeric
                         Numeric Integer
                         Numerical Decimal
                         Currency Integer
                         Currency Decimal
                         Percentage Integer
                         Percentage Decimal
                         Date (mm-dd-yyyy)
                         Time (hh:mm:ss)
                         E-mail Address
                         URL Address

             Font with the capability of choosing the following with a WYSIWYG Font Picker:
                         Type
                         Style
                         Size
                         Color
                         Effect

             Look & Feel:
                        2D engraved look & feel
                        Dimensions: capability of choosing the height and width with a Spin Button
                        Borders: capability of selecting a color using a WYSIWYG Color Picker.
                        Background: capability of selecting a color using a WYSIWYG Color Picker.

             Aligning capability to align the data in the Data Entry Box with a WYSIWYG Alignment Picker that
             includes Left Aligned, Centered, Right Aligned, Justified, etc.

             Explanation message. When a user positions the cursor inside a widget, an explanation message
             must be given to assist the user in typing or selecting data. For example, in a salary field, the
             explanation message could be “Please enter an integer number from $10,000 to $500,000”.

             Error handling. In case the data is not valid, the widget must provide the mechanism of easily
             identifying the errors and correcting them such as turning the erroneous data in red and tabbing
             through the field in errors for a quick and friction free correction of errors.

             Data Validation:
                         Client Validation: date, time, numeric, e-mail address, URL, etc.
                         Server Validation: specific business logic type of validation
                         Special Universal Validation: City, State, Country, County, Area codes, Zip Codes, etc.

             Additional functions such as spinning, selecting, sorting, and searching



                                                         5
Upon right clicking in the Data Entry box, a pop-up with the following functions should be provided:




Data Display

Every widget must have two modes:                                                    Data Display

           Data Entry Mode in which a user can actually either type data or select data from a drop down list
           or a picker.

           Data Display Mode in which data is simply displayed but a user can neither enter data, update data,
           nor select data from a drop down list or a picker.




                                                       6
Drop Down Lists

Current drop down lists are quite archaic. For example, if a user needs to select multiple entries in a drop down
list, he/she needs to hold the ALT button – how about using Radio Buttons for single selection and Check
Boxes for multiple selections? Wouldn’t that be more intuitive, straight forward, easier, simpler, and richer
experience?

In addition to all the features mentioned above for Data Entry and Data Display widgets, Drop Down Lists
should have the following common functions:

            Buttons with appropriate icons clearly identifying the type of a Drop Down List and not just the
            boring and archaic down arrow.                           Here are some examples below:

                              Drop Down List with Radio Buttons:

                              Drop Down List with Check Boxes:

                              Data Entry with Spin Buttons:

                              Data Entry with Date Picker:

                              Data Entry with Tree Picker:

                              Data Entry with File Locator:

                              Data Entry with Music Picker:

                              Data Entry with Graphics Picker:



            A Drop Down List with Radio Buttons indicating single selection. Each element of this widget could
            be customizable to match the look & feel of a company’s web site or web-based application
            including:

                              Background color of the Drop Down List box and the Data Entry box

                              Dimensions of the Drop Down List box
                                                                                                  Engraving effect upon
                              Border colors                                                       clicking the button

                              Mouse over effect
                                                                                                  Special effect upon mouse
                              Current selection effect                                            over

                              Alignments of items in the list:
                                         Left Aligned                                             Special effect for current
                                         Centered                                                 selection
                                         Right Aligned

            Font of items in the list:
                             Type
                             Style
                             Size
                             Color
                             Effect

            Cursor type & effect

            Every button and elevator should have 4 statuses: normal, mouse over, clicked, and disabled.


                                                           7
A Drop Down List with Check Boxes indicating multiple selections:



        Global Selection & De-selection button


        Current multiple elections


        Special effect upon mouse over
        Indicating current cursor position


        Customizable cursor




    A Drop Down List with Radio Buttons & Icons & Alphabetical Index which is appropriate for single
    selection, for items that have icons such as cities, credit cards, companies’ logo, people’s picture,
    and the like, and for a long list of items which could be accessed quicker and easier with an
    alphabetical index.

    In addition, a tool tip or an explanation balloon for every item in the drop down list which uniquely
    identifies items in case the list includes identical entries is necessary. In the example below, there
    are two cities called Pasadena. Upon mouse over, a turquoise tool tip showing the URL of the
    selected city must be automatically displayed uniquely identifying that city.




                      http://www.ci.pasadena.ca.us/




.                                                8
A Drop Down List with Check Boxes & Alphabetical Index which is appropriate for multiple
            selections, for items that have icons such as cities, credit cards, companies’ logo, people’s picture,
            and the like, and for a long list of items which could be accessed quicker and easier with an
            alphabetical index.

                Global Select / Deselect of current Alphabet Letter

                                    Global Select / Deselect of all letters




Upon right clicking on any of the drop down lists, the following pop-up should appear offering extensive features:


In addition, drop down lists should have the following common settings:

            Status which could be either Data Entry or Data Display

            If the Status is Data Display then the Mode is Non-Editable

            If the Status is Data Entry then the Mode could be:
                         Selection only from the drop down list
                         Addition only by typing in the Data Entry Box
                         Selection or addition

            Search which automatically picks up an item from the drop down list as
            soon as characters are recognized as they are typed in the Data Entry
            Box.

            Sorting of items in the drop down list

            Source which allows the user to select the source from which the items
            in the drop down list should be gotten from

            Boolean which allows the user to specify “AND” or “OR” in case of
            multiple selection. This option applies only to Drop Down List with
            Check Boxes.

            Default value of the widget




                                                         8
                                                         9
Data Entry With Spin Buttons

In addition to all the features and properties found in the Data Entry widget,
the Data Entry with Spin Buttons should spin on the following data types:

            Numeric Integer

            Numerical Decimal

            Currency Integer

            Currency Decimal

            Percentage Integer

            Percentage Decimal

            Time (hh:mm:ss)

            Date: Days, Months, Years, Seasons, etc.


Data Entry With History

In addition to all the features found in the Data Entry widget, the Data Entry
with History should also have some of the properties found in the Drop
Down List with Radio Buttons. More specifically, in this widget, as soon as
a user enters a value, a list of prior entries should be automatically
displayed. The history of entries should be typically stored in cookies.

Typically, Data Entry with History is usually used for common fields such as
login coordinates like User ID and password, or address fields, phone
numbers, e-mail addresses, etc.




Data Entry With Date Picker

The Data Entry with Date Picker should offer the following main features:

            Deselect any date after selecting a date

            Current Date which is continuously updated to the current
            system date

            Fixed Date selected from the drop down calendar

            Spinning on month and year

            Capability of blocking certain dates. In such event, dates in
            the calendar should be disabled.

            Display the day of the year.

            Customizable look & feel including borders, background,
            foreground, mouse over effect, clicking effect, etc.

            Mouse over and selection effects



                                                        10
Data Entry With Tree Picker

The Data Entry with Tree Picker is quite useful when the drop down list is actually a hierarchical structure such
a web site or a hierarchical record.




Section or Web Site Map With a Tree Picker

Drop down menus in HTML are quite ineffective and unreliable. We always seem to be chasing them and have
to be so exact to catch the item desired on the list. Instead, a section or web site map using a Tree Picker
could be provided upon placing a mouse over an item in a menu bar. That pop-up would disappear upon
moving the cursor away from that item in the menu bar, or it could be anchored if desired.

The Tree Picker in the pop-up has the advantage of being reliable, fast, flexible, and with remembrance
capabilities. It also supports a deep hierarchy due to its collapsing and expanding capability, while the deeper
the hierarchy is, the worse drop down menus become.

With a Tree Picker, navigation is also much more effective. For example, instead of having to go through the
entire hierarchy every time the user needs to use the drop down menu, the Tree Picker appears with the prior
selection that the user made, making it very fast and effective to navigate. Furthermore, as shown below, this
widget could be a mini Windows Explorer offering thumbnails, statistics, and other rich options.




                                                        11
Scrollable Window

The Scrollable Window widget should include the following main features:

            Ruler

            Very rich text formatting capabilities

            Insertion of pictures, illustrations, icons, emotions, signatures, etc.

            Font Picker

            Bullets Picker

            Alignments Picker
                      Left Aligned
                      Centered
                      Right Aligned
                      Justified

            Spacing

            Formatting including:
                        Color Picker
                        Gradient Picker
                        Texture Picker
                        Pattern Picker
                        Effects such as animation and sound

            References with:
                       Spelling Checker
                       Grammar Checker
                       Style Checker
                       Dictionary
                       Thesaurus
                       Statistics

Every single element such as background, borders, buttons, elevators, scrollable bars, ruler, handles, and the
like are all customizable to match the look and feel of a company’s web site or web based application.




                                                          12
Fonts Picker

A full fledge WYSIWYG Fonts Picker with features and functions matching or even exceeding the ones found in
desktop applications is necessary. In the drop down list for Type, all fonts should be displayed in their own type
giving the user the opportunity to instantly see the font type. The Preview feature should display the changes in
real-time.




                                                        13
Bullets Picker

A full fledge WYSIWYG Bullets Picker with features and functions matching or even exceeding the ones found in
desktop applications is necessary.

By clicking on the Options button, the user can change the standard bullets type and can import some as well.

Intelligent numbering and outlining of bullets should be available.

The Preview feature should display the changes in real time giving the opportunity to the user to instantly
observe the changes made.




                                                                                          Panama

                                                                                          Miami

                                                                                          New York




                                                         14
Alignments Picker

A full fledge WYSIWYG Alignments Picker with features and functions matching or even exceeding the ones
found in desktop applications is necessary.

The Alignments Picker should offer the following alignment styles:

            Left Aligned

            Centered

            Right Aligned

            Justify with Last Left Aligned

            Justify with Last Centered

            Justify with Last Right Aligned

            Justify All

Furthermore, the user should be able to specify the left and right margins as well as the indentation of the first
line.

The Preview feature should display the changes in real time allowing the user to instantly observe the changes.




                                                         15
Spacing Picker

A full fledge WYSIWYG Spacing Picker with features and functions matching or even exceeding the ones found
in desktop applications is necessary.

The Spacing Picker should provide the capabilities of spacing and numbering lines and paragraphs as well as
specify the coordinates of tabs. Furthermore, the user should be able to display or hide the Ruler.




                                                    16
Color Picker

A full fledge WYSIWYG Color Picker with features and functions matching or even exceeding the ones found in
desktop applications is necessary.

The user should be able to choose the Spectrum of colors which could be low colors (256), high colors (16 bits),
or true colors (32 bits). In addition, the user should be able to choose different Palettes including Gray Scale,
Named, Simple, Standard, and Advanced. In case of Named Palette, a brief history of the Named Color selected
should be given, which would be a unique and interesting feature.

To set the desired color, the user could either enter the appropriate number combination if known, move the
cursor within the Palette, or use the Color Mixer. The palette, the numbers, and the color mixer should all
synchronized.

A user should also be able to save some of the chosen colors by simply clicking on the “Plus” button in the
Custom Colors section.




                                                       17
Gradient Picker

A full fledge WYSIWYG Gradient Picker with features and functions matching or even exceeding the ones found
in desktop applications is necessary.

Standard gradients should be provided along with the capability of importing new ones.

The gradient should consist of one or two colors with the capability of specifying the intensity of each color.

The gradient could take number of different shapes including horizontal, vertical, diagonal up, diagonal down,
corner, and center.

The user could also specify the transparency of the gradient which should be expressed in percentage.

The Preview feature should automatically display the changes in real time giving the user the opportunity to
observe the changes in the gradient.

Finally, the user should be able to save any gradient created for later use.




                                                         18
Texture Picker

A full fledge WYSIWYG Texture Picker with features and functions matching or even exceeding the ones found
in desktop applications is necessary.

Preset textures ought to be provided to users with the capability of importing their own.

In addition, users ought to be able to save any of their selections for later use.




                                                          19
Pattern Picker

A full fledge WYSIWYG Pattern Picker with features and functions matching or even exceeding the ones found in
desktop applications is necessary.

Preset patterns ought to be provided to users with the capability of importing their own.

Using a Color Picker, users should be able to choose the background and foreground colors of each pattern.

In addition, users ought to be able to save any of their selections for later use.




                                                          20
Table

The table below should provide very similar functionalities found in spreadsheets. It should offer the following
main features which are available by either clicking on any of the buttons in the Top Tool Menu Bar or by right
clicking in the table which should make a pop-up appears.

            Cell formatting

            Add a column or a row
            Delete a column or a row
            Rename a column or a row

            Hyperlink fields to web pages
            Import data into the table
            Export data from the table

            Selection of fields from the database to be included
            Views by including or excluding certain columns
            Group rows with expanding and collapsing capabilities

            Sizing rows and column by dragging borders
            Freezing columns and rows
            Sort columns in ascending and descending order

            Searching the table with Find & Replace capabilities
            Filtering the table according to advanced search criteria
            Options

            Help

            Batching records for quick response time

            Closing the Top Tool Menu bar and opening again at will


In addition, the table should include the following features:

            Support of the majority of widgets within a cell. For example, a cell could be any of the drop down
            lists, a spin button, a date picker, a color picker, etc.

            Remembrance capabilities which could be effective across sessions.

            Capability of simultaneously selecting one or several cells, rows, or columns.

                                                                                               100 - 200




                                                                21
Social Networks

Social Network Analysis tools must be provided whenever applicable. The tool must be based on What You
See Is What You Get (WYSIWYG) paradigm and it must provide the following features:

           Different network topologies such as Line, Bus, Tree, Star, Ring, Fully Connected, and Hybrid.

           Zooming/Panning with Tree/Forest view

           Dragging

           Expanding & Collapsing

           Drilling on vertices and edges

           Dynamic addition and deletion of vertices and edges

           Searching The Tree

           View of the trusted circle belonging to a specific vertex.

           Finding shortest path between vertices.

           Call, chat, e-mail, and view the weblog of one or more nodes.

           Filtering the neighborhood.

           Printing tree / cluster




                                                           22
Conclusion

The substantial investment made for many years in developing rich graphical user interfaces for desktop and
client/server applications should be capitalized on, and it is now time to do so.

Web sites and web-based applications are very rich in content and networking but very poor on functionality,
usability, and navigation. On the other hand, desktop and client/server applications are very rich on
functionality, usability, and navigation but poor on content and networking. We should and can have the best of
those two worlds, and it is now time to do so.

While some progress was made in communications, bandwidth, and the like, system software vendors who
develop operating systems, browsers, languages, development tools, and the like have the responsibility
towards application programmers (their customers) to solve some of the lingering problems which are
preventing a rich user experience on the web to materialize. Specifically, those problems include compatibility,
downloading, speed of execution, and security. These problems should and could be solved, and it is now time
to do so.

Application programmers ought to focus on developing their application and not reinventing the wheel every few
years. The responsibility of providing the appropriate platform to develop the next generation of web sites and
web-based applications lies squarely on the shoulder of system software vendors who have so far failed to
deliver due to firstly some technical problems which are now solvable, and secondly due to legal, financial, and
marketing reasons.

A rich set of widgets is necessary in order to develop a rich and intuitive graphical user interface on the web.
Such set of widgets must be embedded within the browser, HTML, operating system, or Interactive
Development Environment (IDE). Examples of such widgets are drop down lists with radio buttons, check
boxes, icons, and alphabetical index, date picker, color picker, gradient picker, texture picker, pattern picker,
sound picker, fonts picker, alignments picker, spacing picker, scrollable window with rich text formatting,
sophisticated table which acts almost like a spreadsheet, etc.

We should and could have the best of both worlds, and it is now time to do so.




                                                           23
1036 Quail Ridge
Irvine, California
92603-4240

Tel: (949) 861-2341
Fax: (949) 861-2342

david.saad@calibra.com
www.calibra.com

Mais conteúdo relacionado

Semelhante a Rich User Experience by Calibra

Semelhante a Rich User Experience by Calibra (20)

Whats New In Change Auditor - 5.5
Whats New In Change Auditor - 5.5Whats New In Change Auditor - 5.5
Whats New In Change Auditor - 5.5
 
Force.com fundamentals
Force.com fundamentalsForce.com fundamentals
Force.com fundamentals
 
Iaas+FD,+Oracle+Special+5th+Edition+9781119909538.pdf
Iaas+FD,+Oracle+Special+5th+Edition+9781119909538.pdfIaas+FD,+Oracle+Special+5th+Edition+9781119909538.pdf
Iaas+FD,+Oracle+Special+5th+Edition+9781119909538.pdf
 
Rstutorialbook
RstutorialbookRstutorialbook
Rstutorialbook
 
Oracle® Fusion Middleware
Oracle® Fusion MiddlewareOracle® Fusion Middleware
Oracle® Fusion Middleware
 
Sample Business Plan
Sample Business PlanSample Business Plan
Sample Business Plan
 
01 introduction tovulcanmanual_v81_20120817-libre
01 introduction tovulcanmanual_v81_20120817-libre01 introduction tovulcanmanual_v81_20120817-libre
01 introduction tovulcanmanual_v81_20120817-libre
 
Concorde_TechBooklet_6.1.16
Concorde_TechBooklet_6.1.16Concorde_TechBooklet_6.1.16
Concorde_TechBooklet_6.1.16
 
Whitepaper Channel Cloud Computing Paper 4
Whitepaper Channel Cloud Computing Paper 4Whitepaper Channel Cloud Computing Paper 4
Whitepaper Channel Cloud Computing Paper 4
 
Sdnfordummies
SdnfordummiesSdnfordummies
Sdnfordummies
 
Whitepaper Channel Cloud Computing paper 1
Whitepaper Channel Cloud Computing paper 1Whitepaper Channel Cloud Computing paper 1
Whitepaper Channel Cloud Computing paper 1
 
Cloud view platform-highlights-web3
Cloud view platform-highlights-web3Cloud view platform-highlights-web3
Cloud view platform-highlights-web3
 
ISE-802.1X-MAB
ISE-802.1X-MABISE-802.1X-MAB
ISE-802.1X-MAB
 
Adf tutorial oracle
Adf tutorial oracleAdf tutorial oracle
Adf tutorial oracle
 
Sql Adv
Sql AdvSql Adv
Sql Adv
 
SDWAN for Dummies
SDWAN for DummiesSDWAN for Dummies
SDWAN for Dummies
 
Cloud Analytics for Dummies
Cloud Analytics for DummiesCloud Analytics for Dummies
Cloud Analytics for Dummies
 
Cloud analytics for dummies
Cloud analytics for dummiesCloud analytics for dummies
Cloud analytics for dummies
 
Vba uk
Vba ukVba uk
Vba uk
 
Peoplesoft AWE_hcm_delegation_framework
Peoplesoft  AWE_hcm_delegation_frameworkPeoplesoft  AWE_hcm_delegation_framework
Peoplesoft AWE_hcm_delegation_framework
 

Último

WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 

Último (20)

WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 

Rich User Experience by Calibra

  • 1.
  • 2. Cover Sheet White Paper Rich User Experience October 2005 Dr. David Saad Chairman, President & CEO Calibra Corporation Notice The information contained in this document reflects Calibra’s current view of the subject matter discussed herein as of the date of publication. This document is subject to changes and, therefore, it shall not be construed as a commitment by Calibra who does not guarantee the accuracy or completeness of any information contained in this document after the date of publication. THIS WHITE PAPER IS PROVIDED “AS IS” FOR INFORMATIONAL PURPOSES ONLY. CALIBRA MAKES NO WARRANTIES, EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, AND EXPRESSLY DISCLAIMS ANY AND ALL IMPLIED WARRANTIES, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. Calibra may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering the contents of this document, and Calibra and its licensors retain all right, title, and interest in and to such intellectual property rights. Except as expressly provided in a written agreement between you and Calibra, the furnishing of this document does not grant you any license, express or implied, to any such patents, patent applications, trademarks, copyrights, or other intellectual property of Calibra. z Calibra and B u z are trademarks or registered trademarks Calibra protected by the laws of the United States and other countries. This white paper may contain some references to trademarks owned by entities other than Calibra, and such trademarks are the property of their respective owners.
  • 3. Table of Content Synopsis ………………………………………………………………………………………………………………. 1 Needs ………………………………………………………………………………………………………………..... 1 Obstacles ………………………………………………………………………………..…………………………..… 2 Responsibilities ……………………………………………………………………………………………………..… 2 Inadequate Current Solutions ……………………………………………………………………………………..… 2 Future Solutions …………………………………………………………………………………………………….... 3 Data Entry ………………………………………………………………………………………………….... 5 Data Display ……………………………………………………………………………………………….... 6 Drop Down Lists …………………………………………………………………………………………….. 7 Drop Down Lists …………………………………………………………………………………………….. 7 Buttons With Appropriate Icons …………………………………………………………………. 7 Drop Down List With Radio Buttons …………………………………………………….………. 7 Drop Down List With Check Boxes …………………………………………………….….……. 8 Drop Down List With Radio Buttons & Icons & Alphabetical Index ………………….………. 8 Drop Down List With Check Boxes & Alphabetical Index …………………………….………. 9 Data Entry With Spin Buttons ……………………………………………………………………………… 10 Data Entry With History …………………………………….………………………………….…………… 10 Data Entry With Date Picker ……………………………………………..………………………………… 10 Data Entry With Tree Picker ……………………………………………..………………………………… 11 Section or Web Site Map With a Tree Picker ………..…………………………..……………….……… 11 Scrollable Window ………..………………………………………………………...……………….……… 12 Fonts Picker ………..………………………………………………………………..……………….……… 13 Bullets Picker ………..………………………………………………………………..……………….…….. 14 Alignments Picker ………..…………………………………………………………….…………….……… 15 Spacing Picker ………..………………………………………………………………..……………….…… 16 Color Picker ………..………………………………………………………………..……………….……… 17 Gradient Picker ………..………………………………………………………………..……………….…. 18 Texture Picker ………..………………………………………………………………..………………..…. 19 Pattern Picker ………..………………………………………………………………..……………………. 20 Table ………..………………………………………………………..…………………..……………….…. 21 Social Networks …………………………………………………………………………………………….. 22 Conclusion ……………………………………………………………………………………………………………. 23
  • 4. SYNOPSIS All the substantial investment and effort over twenty years of extensive research, development, and deployment of graphical user interfaces for desktop and client/server applications, have been more or less thrown away with the introduction of the Browser and HTML. For example, do you know that until today, HTML does not support some of the most basic widgets such as a Data Entry with Spin Buttons? Appalling!!!. However, things are improving a bit with the adoption of new technologies such as AJAX and browsers are becoming more than just surfing tools by including collaborative and social networking features. After many frustrating years, it is now time to bring all the functionality, usability, and high navigation onto the web. The next generation of web sites and web-based applications must meet and even exceed some of the features and standards typically found on desktop and client/server applications. Considering the overwhelming monopoly of the leaders in the industry in the system software, browsers, and development tools segments of the industry, it is ample obvious that those leaders have failed their own customers (i.e., application developers) and must now take on their responsibility by providing the appropriate platform which will offer the best of both worlds – the rich content and networking inherent in the web, on one hand, and the high functionality, usability, and navigation typically found in desktop and client/server applications, on the other. NEEDS While the Internet in general, and the web in particular are very rich in content and networking, they fail miserably on functionality, usability, and navigation. On the other hand, while desktop and client/server applications are quite rich in functionality, usability, and navigation, they are poor on content and have limited networking restricted to LAN or WAN. There is a need to have the best of both worlds – the rich content and the networking capabilities of the web combined with the rich functionality, usability, and navigation of desktop and client/server applications. As an analogy, in the very early years of the automobile industry, consumers had not too many choices - cars came in “black, black, and black”. Similarly, in the very early years of the Internet, companies had not too many choices either - web sites came in “flat, flat, and flat” (no disrespect intended to any of the web sites displayed below, even though, we place the responsibility squarely on their owners). Today, it is not enough to have fast cars. We also need cars with leather seats, air conditioning, hi-fi stereo, GPS system, etc. We want to ride with safety, comfort, pleasure, entertainment, and style. Similarly, it is no longer enough to have web sites that download fast. We also need to have functionality, usability, easy navigation, nice aesthetic, audio, video, and an overall rich and fulfilling user experience. 1
  • 5. OBSTACLES Historically, due to limited bandwidth and its cost, rich user experience was simply not technically or financially feasible. Hence, browsers and scripting languages were developed with such restrictions in mind. However, bandwidth is today plentiful and is relatively affordable. However, web development tools have not evolved at the rate that they should have to offer a rich user experience. The main reason for such stagnation is the monopoly that certain leaders in the industry have attained. For example, HTML and browser technologies have been more or less quite stagnant in the last few years. Lack of competition in those sectors does not entice existing players to work hard to earn market share while customers can’t complain too much due to lack of choices. RESPONSIBILITIES Application developers ought to concentrate on their domain expertise by focusing on their application and not on reinventing the wheel and developing system features, tools, or widgets. For example, application programmers should not be asked to develop spin buttons, drop down lists, font pickers, color pickers, or tables. All such features must be readily available from companies who develop system software such as operating systems, browsers, or development tools such as Interactive Development Environments (IDEs). Those companies have indeed the responsibility to offer such features to application developers allowing them to be productive by focusing on their application. System software vendors have the responsibility to make it friction free to application developers to develop and deploy their applications using such features. Friction free means no compatibility problems, no downloading necessary, no plug-ins required, no alignment hustles, no delays in deployment, no delays in execution, etc. System software vendors must offer WYSIWYG type of development tools with drag and drop capabilities allowing developers to easily and quickly select any widget among a rich set of widgets in order to design applications with a rich user experience that offers high functionality, usability, and easy navigation. INADEQUATE CURRENT SOLUTIONS There are two main solutions which offer a rich user experience: Java Applets and Active X components. While those two solutions might be technically elegant in some cases, they are unfortunately not very feasible for the following reasons: Both solutions take a long time to download even under the best scenarios. Users are simply not willing to wait. Competition is one click away. Both solutions require users to enable the plug-in option in their browser. The majority of users, especially novice ones, do not know how to do so. In this case, the inconvenience becomes a handcuffing annoyance. Both solutions require users to download the appropriate plug-ins after enabling that option on their browser, yet another obstacle to deal with. Both solutions are poor at synchronizing and controlling the version of plug-ins resulting into an incompatibility nightmare. Both solutions represent a security hazard resulting into a strong policy from CIOs prohibiting any such downloads. In a true thin client environment, downloading anything is simply not possible. Hence, unless those plug-ins are embedded in the browser or better in the operating system, users with thin client will be left out hanging, especially Cyber Café users. Furthermore, now that Microsoft is no longer required to incorporate Java in Internet Explorer, and considering that Microsoft owns almost 95% of the browser landscape, the days of the Java Applet solution are counted if not already gone, unless companies like Sun take immediate actions to resurrect Java on the client side. 2
  • 6. FUTURE SOLUTIONS In order to avoid all the obstacles and problems mentioned above, a rich set of widgets must be provided either in HTML, in the browser, or even better, in the operating system, even though the latter might cause some portability problems. In addition to the functionality, usability, and navigation mentioned above, the next generation of web sites and web-based applications must provide the following: Customization of widgets to meet the look and feel of a company’s web site as well as its business processes. Personalization of widgets by each user who can define a set of preferences for aesthetics, functionality, and navigation. For example, based on certain conditions, a user should be able to select dynamically a content of a drop down list or a web page to automatically go to. Profiling to allow companies to better serve their constituents based on their personal preferences. Standard client data validation such as numeric, date, time, e-mail address, URL addresses, etc. Standard intelligent business validation such as automatic address processing which intelligently completes an address based on the minimum information provided by the user. Database centric instead of publication centric. For example, list of contacts or list of addresses must be stored in a database and displayed in widgets (like OutLook), instead of being published using HTML. The rational behind such paradigm shift is to reduce the maintenance cost. With HTML, a company needs an HTML expert to perform mundane tasks such as spelling corrections, modification, additions, or deletions all of which could and should be performed by a secretary. Hence updating a web page should be no different than update a record in OutLook. Hence, the distinction between a desktop application and a web-based application from the user perspective should be minimal. Collaboration to allow users to share in real-time information, pictures, videos, etc. Social Networking to allow users to be part of online communities. The benefits of such advanced features would be an increase in productivity and a decrease in typing errors. Hence, to the extent possible, the system must fill up the screen as much as possible with a minimum of typing on behalf of the user. Therefore, from the above list, rich user experience is not limited to look & feel as it is generally conceived, but rather to rich functionality which enhances productivity as well. 3
  • 7. The following represents a partial list of widgets desired or necessary to offer a rich user experience on the web: Data Entry Data Display Data Entry with History along with automatic sorting and searching capabilities Data Entry Box for inserting images, pictures, etc. Data Entry with File Locator Data Entry with Spin Buttons that spins on numeric, date, time, and alphabetic data. Data Entry with Drop Down List Data Entry with Drop Down List and Radio Buttons indicating single selection Data Entry with Drop Down List and Check Boxes indicating multiple selections Data Entry with Drop Down List and Radio Buttons and Alphabetical Index Data Entry with Drop Down List and Radio Buttons and Icons Data Entry with Drop Down List and Radio Buttons and Alphabetical Index and Icons Data Entry with Drop Down List and Check Boxes and Alphabetical Index Data Entry with Drop Down List and Check Boxes and Icons Data Entry with Drop Down List and Check Boxes and Alphabetical Index and Icons Data Entry with Tree Picker Standalone Tree Data Entry with Date Picker Calendar Color Picker Gradient Picker Texture Picker Pattern Picker Fonts Picker Bullets Picker Alignments Picker Spacing Sound Picker Graphic Picker Special effects Data Entry with Scrollable Window with Ruler and with Rich Text formatting Data Display with Scrollable Window with Ruler and with Rich Text support Table with extensive features such as searching, filtering, sizing, linking, viewing, grouping, etc. Find & Replace Progress Bar Media Player skins to match the look and feel of corporate web sites as shown below 4
  • 8. Data Entry The Data Entry widget is one of the most common widget which is usually used Data Entry with other widgets such Drop Down Lists and Pickers. The Data Entry widget must provide the following main functions: Typing Editing with Delete, Backspace, and Insert buttons enabled Scrolling right and left using the appropriate arrows on the keyboard Data type including: Alphabetic Alphanumeric Numeric Integer Numerical Decimal Currency Integer Currency Decimal Percentage Integer Percentage Decimal Date (mm-dd-yyyy) Time (hh:mm:ss) E-mail Address URL Address Font with the capability of choosing the following with a WYSIWYG Font Picker: Type Style Size Color Effect Look & Feel: 2D engraved look & feel Dimensions: capability of choosing the height and width with a Spin Button Borders: capability of selecting a color using a WYSIWYG Color Picker. Background: capability of selecting a color using a WYSIWYG Color Picker. Aligning capability to align the data in the Data Entry Box with a WYSIWYG Alignment Picker that includes Left Aligned, Centered, Right Aligned, Justified, etc. Explanation message. When a user positions the cursor inside a widget, an explanation message must be given to assist the user in typing or selecting data. For example, in a salary field, the explanation message could be “Please enter an integer number from $10,000 to $500,000”. Error handling. In case the data is not valid, the widget must provide the mechanism of easily identifying the errors and correcting them such as turning the erroneous data in red and tabbing through the field in errors for a quick and friction free correction of errors. Data Validation: Client Validation: date, time, numeric, e-mail address, URL, etc. Server Validation: specific business logic type of validation Special Universal Validation: City, State, Country, County, Area codes, Zip Codes, etc. Additional functions such as spinning, selecting, sorting, and searching 5
  • 9. Upon right clicking in the Data Entry box, a pop-up with the following functions should be provided: Data Display Every widget must have two modes: Data Display Data Entry Mode in which a user can actually either type data or select data from a drop down list or a picker. Data Display Mode in which data is simply displayed but a user can neither enter data, update data, nor select data from a drop down list or a picker. 6
  • 10. Drop Down Lists Current drop down lists are quite archaic. For example, if a user needs to select multiple entries in a drop down list, he/she needs to hold the ALT button – how about using Radio Buttons for single selection and Check Boxes for multiple selections? Wouldn’t that be more intuitive, straight forward, easier, simpler, and richer experience? In addition to all the features mentioned above for Data Entry and Data Display widgets, Drop Down Lists should have the following common functions: Buttons with appropriate icons clearly identifying the type of a Drop Down List and not just the boring and archaic down arrow. Here are some examples below: Drop Down List with Radio Buttons: Drop Down List with Check Boxes: Data Entry with Spin Buttons: Data Entry with Date Picker: Data Entry with Tree Picker: Data Entry with File Locator: Data Entry with Music Picker: Data Entry with Graphics Picker: A Drop Down List with Radio Buttons indicating single selection. Each element of this widget could be customizable to match the look & feel of a company’s web site or web-based application including: Background color of the Drop Down List box and the Data Entry box Dimensions of the Drop Down List box Engraving effect upon Border colors clicking the button Mouse over effect Special effect upon mouse Current selection effect over Alignments of items in the list: Left Aligned Special effect for current Centered selection Right Aligned Font of items in the list: Type Style Size Color Effect Cursor type & effect Every button and elevator should have 4 statuses: normal, mouse over, clicked, and disabled. 7
  • 11. A Drop Down List with Check Boxes indicating multiple selections: Global Selection & De-selection button Current multiple elections Special effect upon mouse over Indicating current cursor position Customizable cursor A Drop Down List with Radio Buttons & Icons & Alphabetical Index which is appropriate for single selection, for items that have icons such as cities, credit cards, companies’ logo, people’s picture, and the like, and for a long list of items which could be accessed quicker and easier with an alphabetical index. In addition, a tool tip or an explanation balloon for every item in the drop down list which uniquely identifies items in case the list includes identical entries is necessary. In the example below, there are two cities called Pasadena. Upon mouse over, a turquoise tool tip showing the URL of the selected city must be automatically displayed uniquely identifying that city. http://www.ci.pasadena.ca.us/ . 8
  • 12. A Drop Down List with Check Boxes & Alphabetical Index which is appropriate for multiple selections, for items that have icons such as cities, credit cards, companies’ logo, people’s picture, and the like, and for a long list of items which could be accessed quicker and easier with an alphabetical index. Global Select / Deselect of current Alphabet Letter Global Select / Deselect of all letters Upon right clicking on any of the drop down lists, the following pop-up should appear offering extensive features: In addition, drop down lists should have the following common settings: Status which could be either Data Entry or Data Display If the Status is Data Display then the Mode is Non-Editable If the Status is Data Entry then the Mode could be: Selection only from the drop down list Addition only by typing in the Data Entry Box Selection or addition Search which automatically picks up an item from the drop down list as soon as characters are recognized as they are typed in the Data Entry Box. Sorting of items in the drop down list Source which allows the user to select the source from which the items in the drop down list should be gotten from Boolean which allows the user to specify “AND” or “OR” in case of multiple selection. This option applies only to Drop Down List with Check Boxes. Default value of the widget 8 9
  • 13. Data Entry With Spin Buttons In addition to all the features and properties found in the Data Entry widget, the Data Entry with Spin Buttons should spin on the following data types: Numeric Integer Numerical Decimal Currency Integer Currency Decimal Percentage Integer Percentage Decimal Time (hh:mm:ss) Date: Days, Months, Years, Seasons, etc. Data Entry With History In addition to all the features found in the Data Entry widget, the Data Entry with History should also have some of the properties found in the Drop Down List with Radio Buttons. More specifically, in this widget, as soon as a user enters a value, a list of prior entries should be automatically displayed. The history of entries should be typically stored in cookies. Typically, Data Entry with History is usually used for common fields such as login coordinates like User ID and password, or address fields, phone numbers, e-mail addresses, etc. Data Entry With Date Picker The Data Entry with Date Picker should offer the following main features: Deselect any date after selecting a date Current Date which is continuously updated to the current system date Fixed Date selected from the drop down calendar Spinning on month and year Capability of blocking certain dates. In such event, dates in the calendar should be disabled. Display the day of the year. Customizable look & feel including borders, background, foreground, mouse over effect, clicking effect, etc. Mouse over and selection effects 10
  • 14. Data Entry With Tree Picker The Data Entry with Tree Picker is quite useful when the drop down list is actually a hierarchical structure such a web site or a hierarchical record. Section or Web Site Map With a Tree Picker Drop down menus in HTML are quite ineffective and unreliable. We always seem to be chasing them and have to be so exact to catch the item desired on the list. Instead, a section or web site map using a Tree Picker could be provided upon placing a mouse over an item in a menu bar. That pop-up would disappear upon moving the cursor away from that item in the menu bar, or it could be anchored if desired. The Tree Picker in the pop-up has the advantage of being reliable, fast, flexible, and with remembrance capabilities. It also supports a deep hierarchy due to its collapsing and expanding capability, while the deeper the hierarchy is, the worse drop down menus become. With a Tree Picker, navigation is also much more effective. For example, instead of having to go through the entire hierarchy every time the user needs to use the drop down menu, the Tree Picker appears with the prior selection that the user made, making it very fast and effective to navigate. Furthermore, as shown below, this widget could be a mini Windows Explorer offering thumbnails, statistics, and other rich options. 11
  • 15. Scrollable Window The Scrollable Window widget should include the following main features: Ruler Very rich text formatting capabilities Insertion of pictures, illustrations, icons, emotions, signatures, etc. Font Picker Bullets Picker Alignments Picker Left Aligned Centered Right Aligned Justified Spacing Formatting including: Color Picker Gradient Picker Texture Picker Pattern Picker Effects such as animation and sound References with: Spelling Checker Grammar Checker Style Checker Dictionary Thesaurus Statistics Every single element such as background, borders, buttons, elevators, scrollable bars, ruler, handles, and the like are all customizable to match the look and feel of a company’s web site or web based application. 12
  • 16. Fonts Picker A full fledge WYSIWYG Fonts Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. In the drop down list for Type, all fonts should be displayed in their own type giving the user the opportunity to instantly see the font type. The Preview feature should display the changes in real-time. 13
  • 17. Bullets Picker A full fledge WYSIWYG Bullets Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. By clicking on the Options button, the user can change the standard bullets type and can import some as well. Intelligent numbering and outlining of bullets should be available. The Preview feature should display the changes in real time giving the opportunity to the user to instantly observe the changes made. Panama Miami New York 14
  • 18. Alignments Picker A full fledge WYSIWYG Alignments Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. The Alignments Picker should offer the following alignment styles: Left Aligned Centered Right Aligned Justify with Last Left Aligned Justify with Last Centered Justify with Last Right Aligned Justify All Furthermore, the user should be able to specify the left and right margins as well as the indentation of the first line. The Preview feature should display the changes in real time allowing the user to instantly observe the changes. 15
  • 19. Spacing Picker A full fledge WYSIWYG Spacing Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. The Spacing Picker should provide the capabilities of spacing and numbering lines and paragraphs as well as specify the coordinates of tabs. Furthermore, the user should be able to display or hide the Ruler. 16
  • 20. Color Picker A full fledge WYSIWYG Color Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. The user should be able to choose the Spectrum of colors which could be low colors (256), high colors (16 bits), or true colors (32 bits). In addition, the user should be able to choose different Palettes including Gray Scale, Named, Simple, Standard, and Advanced. In case of Named Palette, a brief history of the Named Color selected should be given, which would be a unique and interesting feature. To set the desired color, the user could either enter the appropriate number combination if known, move the cursor within the Palette, or use the Color Mixer. The palette, the numbers, and the color mixer should all synchronized. A user should also be able to save some of the chosen colors by simply clicking on the “Plus” button in the Custom Colors section. 17
  • 21. Gradient Picker A full fledge WYSIWYG Gradient Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. Standard gradients should be provided along with the capability of importing new ones. The gradient should consist of one or two colors with the capability of specifying the intensity of each color. The gradient could take number of different shapes including horizontal, vertical, diagonal up, diagonal down, corner, and center. The user could also specify the transparency of the gradient which should be expressed in percentage. The Preview feature should automatically display the changes in real time giving the user the opportunity to observe the changes in the gradient. Finally, the user should be able to save any gradient created for later use. 18
  • 22. Texture Picker A full fledge WYSIWYG Texture Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. Preset textures ought to be provided to users with the capability of importing their own. In addition, users ought to be able to save any of their selections for later use. 19
  • 23. Pattern Picker A full fledge WYSIWYG Pattern Picker with features and functions matching or even exceeding the ones found in desktop applications is necessary. Preset patterns ought to be provided to users with the capability of importing their own. Using a Color Picker, users should be able to choose the background and foreground colors of each pattern. In addition, users ought to be able to save any of their selections for later use. 20
  • 24. Table The table below should provide very similar functionalities found in spreadsheets. It should offer the following main features which are available by either clicking on any of the buttons in the Top Tool Menu Bar or by right clicking in the table which should make a pop-up appears. Cell formatting Add a column or a row Delete a column or a row Rename a column or a row Hyperlink fields to web pages Import data into the table Export data from the table Selection of fields from the database to be included Views by including or excluding certain columns Group rows with expanding and collapsing capabilities Sizing rows and column by dragging borders Freezing columns and rows Sort columns in ascending and descending order Searching the table with Find & Replace capabilities Filtering the table according to advanced search criteria Options Help Batching records for quick response time Closing the Top Tool Menu bar and opening again at will In addition, the table should include the following features: Support of the majority of widgets within a cell. For example, a cell could be any of the drop down lists, a spin button, a date picker, a color picker, etc. Remembrance capabilities which could be effective across sessions. Capability of simultaneously selecting one or several cells, rows, or columns. 100 - 200 21
  • 25. Social Networks Social Network Analysis tools must be provided whenever applicable. The tool must be based on What You See Is What You Get (WYSIWYG) paradigm and it must provide the following features: Different network topologies such as Line, Bus, Tree, Star, Ring, Fully Connected, and Hybrid. Zooming/Panning with Tree/Forest view Dragging Expanding & Collapsing Drilling on vertices and edges Dynamic addition and deletion of vertices and edges Searching The Tree View of the trusted circle belonging to a specific vertex. Finding shortest path between vertices. Call, chat, e-mail, and view the weblog of one or more nodes. Filtering the neighborhood. Printing tree / cluster 22
  • 26. Conclusion The substantial investment made for many years in developing rich graphical user interfaces for desktop and client/server applications should be capitalized on, and it is now time to do so. Web sites and web-based applications are very rich in content and networking but very poor on functionality, usability, and navigation. On the other hand, desktop and client/server applications are very rich on functionality, usability, and navigation but poor on content and networking. We should and can have the best of those two worlds, and it is now time to do so. While some progress was made in communications, bandwidth, and the like, system software vendors who develop operating systems, browsers, languages, development tools, and the like have the responsibility towards application programmers (their customers) to solve some of the lingering problems which are preventing a rich user experience on the web to materialize. Specifically, those problems include compatibility, downloading, speed of execution, and security. These problems should and could be solved, and it is now time to do so. Application programmers ought to focus on developing their application and not reinventing the wheel every few years. The responsibility of providing the appropriate platform to develop the next generation of web sites and web-based applications lies squarely on the shoulder of system software vendors who have so far failed to deliver due to firstly some technical problems which are now solvable, and secondly due to legal, financial, and marketing reasons. A rich set of widgets is necessary in order to develop a rich and intuitive graphical user interface on the web. Such set of widgets must be embedded within the browser, HTML, operating system, or Interactive Development Environment (IDE). Examples of such widgets are drop down lists with radio buttons, check boxes, icons, and alphabetical index, date picker, color picker, gradient picker, texture picker, pattern picker, sound picker, fonts picker, alignments picker, spacing picker, scrollable window with rich text formatting, sophisticated table which acts almost like a spreadsheet, etc. We should and could have the best of both worlds, and it is now time to do so. 23
  • 27. 1036 Quail Ridge Irvine, California 92603-4240 Tel: (949) 861-2341 Fax: (949) 861-2342 david.saad@calibra.com www.calibra.com