Portfolio: Radnet WebShare 2.0 UI design

After doing an expert product review of WebShare v1.0, Radnet asked Interaction Design to help design v2.0, including the new WYSIWYG editor. Other tasks included working with Marketing and Graphic Design on icons and product identity.

There are already a lot of editors for HTML pages, but this one has important and unique features, and was among the first to have them (mid 1990s). They are the result of iterative prototyping, customer meetings and a focus group.

Layout view: an intermediate graphical view. In addition to the standard HTML and Browser views, WebShare has a Layout view. This WYSIWYG view shows extra icons identifying HTML and WebShare items you don't need to see in Browser view (like locations of links, anchors and comments). It also shows table borders for easier selection. This way, the Browser view is free of extra marks indicating line breaks and comments.

Layout view, showing hidden objects and table borders

Table borders and other invisible elements are in the Layout view, but not the Browser view.

Access to all current HTML features. Other products offer property panels, but may only include a subset of HTML. WebShare's property panels include all current HTML features, so users don't ever have to work in the HTML view.

Easier table selection. WebShare makes selecting tables far easier than any other editor. The mouse pointer changes to show where you can select cells, rows, columns and the entire table.

Table selection: note the mouse pointer shape and column outline

The outline shows a column selected, and the mouse pointer changed to indicate the ability to make the selection.

Easier font and color specification. WebShare allows you to specify Web-safe colors or custom colors for any aspect of your page if you don't want the default values. At the time, Typical HTML editors didn't support the HTML font list (a list of fonts for the browser to pick from). They also didn't have a special list of "browser-safe" colors, those that are guaranteed to look the same in any browser on any platform. WebShare implemented both, because it made using the product meet expectations better.

WebShare's color picker has a list of browser-safe colors

Color-selection dialog boxes provided great flexibility

Back to previous page