Cover Sheet                                                             White Paper                                    Ric...
Table of ContentSynopsis ……………………………………………………………………………………………………………….                                   1Needs ………………………………...
SYNOPSISAll the substantial investment and effort over twenty years of extensive research, development, and deploymentof g...
OBSTACLESHistorically, due to limited bandwidth and its cost, rich user experience was simply not technically or financial...
FUTURE SOLUTIONSIn order to avoid all the obstacles and problems mentioned above, a rich set of widgets must be provided e...
The following represents a partial list of widgets desired or necessary to offer a rich user experience on theweb:        ...
Data EntryThe Data Entry widget is one of the most common widget which is usually used            Data Entrywith other wid...
Upon right clicking in the Data Entry box, a pop-up with the following functions should be provided:Data DisplayEvery widg...
Drop Down ListsCurrent drop down lists are quite archaic. For example, if a user needs to select multiple entries in a dro...
A Drop Down List with Check Boxes indicating multiple selections:        Global Selection & De-selection button        Cur...
A Drop Down List with Check Boxes & Alphabetical Index which is appropriate for multiple            selections, for items ...
Data Entry With Spin ButtonsIn addition to all the features and properties found in the Data Entry widget,the Data Entry w...
Data Entry With Tree PickerThe Data Entry with Tree Picker is quite useful when the drop down list is actually a hierarchi...
Scrollable WindowThe Scrollable Window widget should include the following main features:            Ruler            Very...
Fonts PickerA full fledge WYSIWYG Fonts Picker with features and functions matching or even exceeding the ones found indes...
Bullets PickerA full fledge WYSIWYG Bullets Picker with features and functions matching or even exceeding the ones found i...
Alignments PickerA full fledge WYSIWYG Alignments Picker with features and functions matching or even exceeding the onesfo...
Spacing PickerA full fledge WYSIWYG Spacing Picker with features and functions matching or even exceeding the ones foundin...
Color PickerA full fledge WYSIWYG Color Picker with features and functions matching or even exceeding the ones found indes...
Gradient PickerA full fledge WYSIWYG Gradient Picker with features and functions matching or even exceeding the ones found...
Texture PickerA full fledge WYSIWYG Texture Picker with features and functions matching or even exceeding the ones foundin...
Pattern PickerA full fledge WYSIWYG Pattern Picker with features and functions matching or even exceeding the ones found i...
TableThe table below should provide very similar functionalities found in spreadsheets. It should offer the followingmain ...
Social NetworksSocial Network Analysis tools must be provided whenever applicable. The tool must be based on What YouSee I...
ConclusionThe substantial investment made for many years in developing rich graphical user interfaces for desktop andclien...
1036 Quail RidgeIrvine, California92603-4240Tel: (949) 861-2341Fax: (949) 861-2342david.saad@calibra.comwww.calibra.com
Rich User Experience by Calibra
Upcoming SlideShare
Loading in...5
×

Rich User Experience by Calibra

541

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
541
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rich User Experience by Calibra

  1. 1. Cover Sheet White Paper Rich User Experience October 2005 Dr. David Saad Chairman, President & CEO Calibra Corporation NoticeThe information contained in this document reflects Calibra’s current view of the subject matter discussed herein as of the date ofpublication. This document is subject to changes and, therefore, it shall not be construed as a commitment by Calibra who does notguarantee 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 IMPLIEDWARRANTIES, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR APARTICULAR PURPOSE, AND NON-INFRINGEMENT.Calibra may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering the contents of thisdocument, and Calibra and its licensors retain all right, title, and interest in and to such intellectual property rights. Except as expresslyprovided in a written agreement between you and Calibra, the furnishing of this document does not grant you any license, express orimplied, to any such patents, patent applications, trademarks, copyrights, or other intellectual property of Calibra. zCalibra 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 oftheir respective owners.
  2. 2. Table of ContentSynopsis ………………………………………………………………………………………………………………. 1Needs ………………………………………………………………………………………………………………..... 1Obstacles ………………………………………………………………………………..…………………………..… 2Responsibilities ……………………………………………………………………………………………………..… 2Inadequate Current Solutions ……………………………………………………………………………………..… 2Future 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 …………………………………………………………………………………………….. 22Conclusion ……………………………………………………………………………………………………………. 23
  3. 3. SYNOPSISAll the substantial investment and effort over twenty years of extensive research, development, and deploymentof graphical user interfaces for desktop and client/server applications, have been more or less thrown away withthe introduction of the Browser and HTML. For example, do you know that until today, HTML does not supportsome of the most basic widgets such as a Data Entry with Spin Buttons? Appalling!!!. However, things areimproving a bit with the adoption of new technologies such as AJAX and browsers are becoming more thanjust 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 theweb. The next generation of web sites and web-based applications must meet and even exceed some of thefeatures 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, anddevelopment tools segments of the industry, it is ample obvious that those leaders have failed their owncustomers (i.e., application developers) and must now take on their responsibility by providing the appropriateplatform which will offer the best of both worlds – the rich content and networking inherent in the web, on onehand, and the high functionality, usability, and navigation typically found in desktop and client/serverapplications, on the other.NEEDSWhile the Internet in general, and the web in particular are very rich in content and networking, they failmiserably on functionality, usability, and navigation. On the other hand, while desktop and client/serverapplications are quite rich in functionality, usability, and navigation, they are poor on content and have limitednetworking restricted to LAN or WAN. There is a need to have the best of both worlds – the rich content andthe networking capabilities of the web combined with the rich functionality, usability, and navigation of desktopand client/server applications.As an analogy, in the very early years of the automobile industry, consumers had not too many choices - carscame 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 theresponsibility 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
  4. 4. OBSTACLESHistorically, due to limited bandwidth and its cost, rich user experience was simply not technically or financiallyfeasible. 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 atthe rate that they should have to offer a rich user experience. The main reason for such stagnation is themonopoly that certain leaders in the industry have attained. For example, HTML and browser technologieshave been more or less quite stagnant in the last few years. Lack of competition in those sectors does notentice existing players to work hard to earn market share while customers can’t complain too much due to lackof choices.RESPONSIBILITIESApplication developers ought to concentrate on their domain expertise by focusing on their application and noton reinventing the wheel and developing system features, tools, or widgets. For example, applicationprogrammers should not be asked to develop spin buttons, drop down lists, font pickers, color pickers, ortables. All such features must be readily available from companies who develop system software such asoperating 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 themto be productive by focusing on their application.System software vendors have the responsibility to make it friction free to application developers to develop anddeploy their applications using such features. Friction free means no compatibility problems, no downloadingnecessary, 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 capabilitiesallowing developers to easily and quickly select any widget among a rich set of widgets in order to designapplications with a rich user experience that offers high functionality, usability, and easy navigation.INADEQUATE CURRENT SOLUTIONSThere are two main solutions which offer a rich user experience: Java Applets and Active X components. Whilethose two solutions might be technically elegant in some cases, they are unfortunately not very feasible for thefollowing 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 consideringthat Microsoft owns almost 95% of the browser landscape, the days of the Java Applet solution are counted ifnot already gone, unless companies like Sun take immediate actions to resurrect Java on the client side. 2
  5. 5. FUTURE SOLUTIONSIn order to avoid all the obstacles and problems mentioned above, a rich set of widgets must be provided eitherin HTML, in the browser, or even better, in the operating system, even though the latter might cause someportability problems. In addition to the functionality, usability, and navigation mentioned above, the nextgeneration 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 typingon behalf of the user. Therefore, from the above list, rich user experience is not limited to look & feel as it isgenerally conceived, but rather to rich functionality which enhances productivity as well. 3
  6. 6. The following represents a partial list of widgets desired or necessary to offer a rich user experience on theweb: 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
  7. 7. Data EntryThe Data Entry widget is one of the most common widget which is usually used Data Entrywith 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
  8. 8. Upon right clicking in the Data Entry box, a pop-up with the following functions should be provided:Data DisplayEvery 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
  9. 9. Drop Down ListsCurrent drop down lists are quite archaic. For example, if a user needs to select multiple entries in a drop downlist, he/she needs to hold the ALT button – how about using Radio Buttons for single selection and CheckBoxes for multiple selections? Wouldn’t that be more intuitive, straight forward, easier, simpler, and richerexperience?In addition to all the features mentioned above for Data Entry and Data Display widgets, Drop Down Listsshould 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
  10. 10. 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
  11. 11. 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 lettersUpon 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
  12. 12. Data Entry With Spin ButtonsIn 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 HistoryIn addition to all the features found in the Data Entry widget, the Data Entrywith History should also have some of the properties found in the DropDown List with Radio Buttons. More specifically, in this widget, as soon asa user enters a value, a list of prior entries should be automaticallydisplayed. The history of entries should be typically stored in cookies.Typically, Data Entry with History is usually used for common fields such aslogin coordinates like User ID and password, or address fields, phonenumbers, e-mail addresses, etc.Data Entry With Date PickerThe 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
  13. 13. Data Entry With Tree PickerThe Data Entry with Tree Picker is quite useful when the drop down list is actually a hierarchical structure sucha web site or a hierarchical record.Section or Web Site Map With a Tree PickerDrop down menus in HTML are quite ineffective and unreliable. We always seem to be chasing them and haveto be so exact to catch the item desired on the list. Instead, a section or web site map using a Tree Pickercould be provided upon placing a mouse over an item in a menu bar. That pop-up would disappear uponmoving 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 remembrancecapabilities. It also supports a deep hierarchy due to its collapsing and expanding capability, while the deeperthe 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 theentire hierarchy every time the user needs to use the drop down menu, the Tree Picker appears with the priorselection that the user made, making it very fast and effective to navigate. Furthermore, as shown below, thiswidget could be a mini Windows Explorer offering thumbnails, statistics, and other rich options. 11
  14. 14. Scrollable WindowThe 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 StatisticsEvery single element such as background, borders, buttons, elevators, scrollable bars, ruler, handles, and thelike are all customizable to match the look and feel of a company’s web site or web based application. 12
  15. 15. Fonts PickerA full fledge WYSIWYG Fonts Picker with features and functions matching or even exceeding the ones found indesktop applications is necessary. In the drop down list for Type, all fonts should be displayed in their own typegiving the user the opportunity to instantly see the font type. The Preview feature should display the changes inreal-time. 13
  16. 16. Bullets PickerA full fledge WYSIWYG Bullets Picker with features and functions matching or even exceeding the ones found indesktop 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 instantlyobserve the changes made. Panama Miami New York 14
  17. 17. Alignments PickerA full fledge WYSIWYG Alignments Picker with features and functions matching or even exceeding the onesfound 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 AllFurthermore, the user should be able to specify the left and right margins as well as the indentation of the firstline.The Preview feature should display the changes in real time allowing the user to instantly observe the changes. 15
  18. 18. Spacing PickerA full fledge WYSIWYG Spacing Picker with features and functions matching or even exceeding the ones foundin desktop applications is necessary.The Spacing Picker should provide the capabilities of spacing and numbering lines and paragraphs as well asspecify the coordinates of tabs. Furthermore, the user should be able to display or hide the Ruler. 16
  19. 19. Color PickerA full fledge WYSIWYG Color Picker with features and functions matching or even exceeding the ones found indesktop 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 selectedshould 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 thecursor within the Palette, or use the Color Mixer. The palette, the numbers, and the color mixer should allsynchronized.A user should also be able to save some of the chosen colors by simply clicking on the “Plus” button in theCustom Colors section. 17
  20. 20. Gradient PickerA full fledge WYSIWYG Gradient Picker with features and functions matching or even exceeding the ones foundin 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 toobserve the changes in the gradient.Finally, the user should be able to save any gradient created for later use. 18
  21. 21. Texture PickerA full fledge WYSIWYG Texture Picker with features and functions matching or even exceeding the ones foundin 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
  22. 22. Pattern PickerA full fledge WYSIWYG Pattern Picker with features and functions matching or even exceeding the ones found indesktop 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
  23. 23. TableThe table below should provide very similar functionalities found in spreadsheets. It should offer the followingmain features which are available by either clicking on any of the buttons in the Top Tool Menu Bar or by rightclicking 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 willIn 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
  24. 24. Social NetworksSocial Network Analysis tools must be provided whenever applicable. The tool must be based on What YouSee 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
  25. 25. ConclusionThe substantial investment made for many years in developing rich graphical user interfaces for desktop andclient/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 onfunctionality, usability, and navigation but poor on content and networking. We should and can have the best ofthose two worlds, and it is now time to do so.While some progress was made in communications, bandwidth, and the like, system software vendors whodevelop operating systems, browsers, languages, development tools, and the like have the responsibilitytowards application programmers (their customers) to solve some of the lingering problems which arepreventing 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 timeto do so.Application programmers ought to focus on developing their application and not reinventing the wheel every fewyears. The responsibility of providing the appropriate platform to develop the next generation of web sites andweb-based applications lies squarely on the shoulder of system software vendors who have so far failed todeliver due to firstly some technical problems which are now solvable, and secondly due to legal, financial, andmarketing 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 InteractiveDevelopment Environment (IDE). Examples of such widgets are drop down lists with radio buttons, checkboxes, 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
  26. 26. 1036 Quail RidgeIrvine, California92603-4240Tel: (949) 861-2341Fax: (949) 861-2342david.saad@calibra.comwww.calibra.com

×