3 ms·

Yes, lots of good HyperCard memories for me. One convention that didn't make it to the web browser was having a key (option?) you could press to highlight which

Yes, lots of good HyperCard memories for me. One convention that didn't make it to the web browser was having a key (option?) you could press to highlight which elements were clickable. Lots of modern webapps could use that...

DonHopkins 7y ago
Yes definitely there should be a way to highlight all possible links! And also instead of "disabling" links and buttons and other elements so they are inexplicably useless, they should be dimmed but still enabled, so hovering or clicking on them immediately tells you WHY they're disabled, and WHAT you can do to enable them. HyperTIES was an early hypermedia browser and authoring tool developed at the University of Maryland Human Computer Interaction Lab under the direction of Ben Sheniderman. (I helped develop the NeWS version of HyperTIES in PostScript, FORTH, and Emacs MockLisp on the Sun.) It had both text and graphical "embedded menus" as links, that highlighted text and popped up magnified arbitrarily-shaped cookie-cutter targets with drop-shadows when you pointed at pictures with embedded links, and it highlighted all of the text and graphical links at once when you clicked on the background. We had a cool demo of the The Hubble Space Telescope with a diagram that popped up all the different parts of the telescope. And also a photo with pop-up targets on the three heads of the Sun founders! HCIL Demo - HyperTIES Browsing: https://www.youtube.com/watch?v=fZi4gUjaGAM https://www.youtube.com/watch?v=fZi4gUjaGAM HCIL Demo - HyperTIES Authoring with UniPress Emacs on NeWS: https://www.youtube.com/watch?v=hhmU2B79EDU https://www.youtube.com/watch?v=hhmU2B79EDU User Interface Strategies (UIS) 90 - Ben Shneiderman - Applications sections and demos. HyperTIES Space Telescope Demo. https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=12m42s https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=12m42s Ben also showed a fun NeWS / PostScript / PSIBER / PseudoScientific Visualizer / ARPAnet map demo later in that talk, which also shows clicking in the background of the PSV to highlight everything at once (the X-ray view of the ARPAnet map, at 28:10): https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=24m56s https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=24m56s Designing to Facilitate Browsing: A Look Back at the Hyperties Workstation Browser: By Ben Shneiderman, Catherine Plaisant, Rodrigo Botafogo, Don Hopkins, William Weiland. Published in Hypermedia, vol. 3, 2 (1991)101–117. https://medium.com/@donhopkins/designing-to-facilitate-browsing-a-look-back-at-the-hyperties-workstation-browser-535eab3a3b3c https://medium.com/@donhopkins/designing-to-facilitate-brows... >Implications of Graphics in Hypertext >Hyperties incorporates graphics while preserving the embedded menu approach used for text only documents. A displayed page can mix text and graphics while allowing arbitrarily-shaped regions to be designated as targets, which provide links to other articles. The addition of graphics provides significant advantages (14). Information that is structured in the form of charts, graphs, maps, and images may be explored with the same facility as text. But the use of graphics in hypertext requires more work on the part of the author to produce comprehensible documents. There is no simple technique for emphasizing the targets that is acceptable in all cases, and the author must laboriously link targets to their references (they are not “self-naming”, as in the text case). In the Sun version of Hyperties rudimentary tools have been developed to simplify the author’s job of establishing graphical links between entries. These consist of editors for designating arbitrary regions of an image using rectangles or polygons, associating names with these regions (which are used by the system to locate references), designating their appearance when highlighted, as well as overall management facilities for keeping track of graphics that have been produced. >Identifying Selectable Items >Several existing hypertext systems permit the browsing of mixed graphics and text, but none has carefully addressed the problems inherent in this more complex realm. Apple Computer’s HyperCard (15) makes minimal distinction between textual and graphical elements of a database entry; anything can be selectable (linked to a reference) if the author so chooses, but it is left to the author to provide hints to the user about what is selectable. (However, it is possible to obtain a temporary display of selectable regions, highlighted by bounding rectangles, via a modifier-key combination.) Brown University, in its Intermedia system (16), has, in a sense, eliminated selection of graphical and textual elements entirely; instead, all links are indicated by special icons, which the author may place at will. This scheme has the advantages of simplicity and clarity, but risks obscuring pertinent information in a welter of special symbols, and may introduce ambiguities of reference: for example, in a map of the United States, does a particular icon refer only to New York City, or to the entire state of New York? A slightly different approach is taken by Guide (17), which provides four different types of linkages; the presence of a link and its type are indicated by changes in the appearance of the screen cursor as it is moved about the display and encounters selectable objects. >An important problem is how to indicate to a user the selectable elements of a graphic. It is clear that some scheme is needed to do this — expecting a user to hunt after the targets in an image by trial and error is apt to cause frustration with the system and limit its use. Any scheme chosen must satisfy certain requirements: it must unambiguously identify the location and scope of the target, it must not itself interfere with comprehension of the image, and it must require little effort on the part of the user. Possible solutions include highlighting the targets by dynamic indicators, outlines, inverse video, fixed symbols, color, shading, and image manipulation (13,14). >The approach taken in Hyperties has been to allow arbitrarily-shaped regions of an image to define these link targets. Normally, these regions are not distinguished in any way (other than visual cues that an author may choose to provide); however, when the mouse cursor passes over a target region, it becomes highlighted. The highlighting scheme developed is novel, and has met with favorable comments from users: it is referred to as pop-out, and consists of offsetting the highlighted object vertically and horizontally by a small amount, and placing a drop-shadow beneath. This gives the appearance of having the object pop out of the screen (Figure 5a); in addition, the slight movement of the object makes it readily detectable to the eye. Because of the use of arbitrary regions, there is no ambiguity of reference; because highlighting only occurs in response to user demand, the image itself is not cluttered; and because the targets highlight automatically in response to mouse movements, the interface requires minimal effort. >One remaining problem is that it is not possible to identify the links in an image at a glance. However, certain user behaviors were noticed: when confronted with an image with hidden targets, they tend to sweep across the image until a target is highlighted (becomes designated), or try to select what they think might be a target until one is found. This suggested that the system could highlight all of the targets automatically (for a short time) whenever it appears that the user is searching for targets, as when sweeping the display, or clicking in non-target areas. This latter strategy has been implemented in the NeWS version of Hyperties. Whenever a user attempts to select in a non-selectable region (like the background), all targets are revealed (Figure 5b). This technique was found effective and generally very well received by users. >Figure 5: (5a: left) The main view of the telescope. The cursor is now resting on the Faint Object Spectrograph which “popped out” to show the existence of a link (compare with Figure 1). Of course the dynamic effect cannot be rendered in this figure. (5b right) A click on the background shows all targets available on the picture. https://miro.medium.com/max/1501/1*RWavUqU14c4PVeausFPKAA.png https://miro.medium.com/max/1501/1*RWavUqU14c4PVeausFPKAA.pn...

DonHopkins 7y ago

Yes definitely there should be a way to highlight all possible links! And also instead of "disabling" links and buttons and other elements so they are inexplicably useless, they should be dimmed but still enabled, so hovering or clicking on them immediately tells you WHY they're disabled, and WHAT you can do to enable them. HyperTIES was an early hypermedia browser and authoring tool developed at the University of Maryland Human Computer Interaction Lab under the direction of Ben Sheniderman. (I helped develop the NeWS version of HyperTIES in PostScript, FORTH, and Emacs MockLisp on the Sun.) It had both text and graphical "embedded menus" as links, that highlighted text and popped up magnified arbitrarily-shaped cookie-cutter targets with drop-shadows when you pointed at pictures with embedded links, and it highlighted all of the text and graphical links at once when you clicked on the background. We had a cool demo of the The Hubble Space Telescope with a diagram that popped up all the different parts of the telescope. And also a photo with pop-up targets on the three heads of the Sun founders! HCIL Demo - HyperTIES Browsing: https://www.youtube.com/watch?v=fZi4gUjaGAM https://www.youtube.com/watch?v=fZi4gUjaGAM HCIL Demo - HyperTIES Authoring with UniPress Emacs on NeWS: https://www.youtube.com/watch?v=hhmU2B79EDU https://www.youtube.com/watch?v=hhmU2B79EDU User Interface Strategies (UIS) 90 - Ben Shneiderman - Applications sections and demos. HyperTIES Space Telescope Demo. https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=12m42s https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=12m42s Ben also showed a fun NeWS / PostScript / PSIBER / PseudoScientific Visualizer / ARPAnet map demo later in that talk, which also shows clicking in the background of the PSV to highlight everything at once (the X-ray view of the ARPAnet map, at 28:10): https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=24m56s https://www.youtube.com/watch?v=1uyO-xUTt6Y&t=24m56s Designing to Facilitate Browsing: A Look Back at the Hyperties Workstation Browser: By Ben Shneiderman, Catherine Plaisant, Rodrigo Botafogo, Don Hopkins, William Weiland. Published in Hypermedia, vol. 3, 2 (1991)101–117. https://medium.com/@donhopkins/designing-to-facilitate-browsing-a-look-back-at-the-hyperties-workstation-browser-535eab3a3b3c https://medium.com/@donhopkins/designing-to-facilitate-brows... >Implications of Graphics in Hypertext >Hyperties incorporates graphics while preserving the embedded menu approach used for text only documents. A displayed page can mix text and graphics while allowing arbitrarily-shaped regions to be designated as targets, which provide links to other articles. The addition of graphics provides significant advantages (14). Information that is structured in the form of charts, graphs, maps, and images may be explored with the same facility as text. But the use of graphics in hypertext requires more work on the part of the author to produce comprehensible documents. There is no simple technique for emphasizing the targets that is acceptable in all cases, and the author must laboriously link targets to their references (they are not “self-naming”, as in the text case). In the Sun version of Hyperties rudimentary tools have been developed to simplify the author’s job of establishing graphical links between entries. These consist of editors for designating arbitrary regions of an image using rectangles or polygons, associating names with these regions (which are used by the system to locate references), designating their appearance when highlighted, as well as overall management facilities for keeping track of graphics that have been produced. >Identifying Selectable Items >Several existing hypertext systems permit the browsing of mixed graphics and text, but none has carefully addressed the problems inherent in this more complex realm. Apple Computer’s HyperCard (15) makes minimal distinction between textual and graphical elements of a database entry; anything can be selectable (linked to a reference) if the author so chooses, but it is left to the author to provide hints to the user about what is selectable. (However, it is possible to obtain a temporary display of selectable regions, highlighted by bounding rectangles, via a modifier-key combination.) Brown University, in its Intermedia system (16), has, in a sense, eliminated selection of graphical and textual elements entirely; instead, all links are indicated by special icons, which the author may place at will. This scheme has the advantages of simplicity and clarity, but risks obscuring pertinent information in a welter of special symbols, and may introduce ambiguities of reference: for example, in a map of the United States, does a particular icon refer only to New York City, or to the entire state of New York? A slightly different approach is taken by Guide (17), which provides four different types of linkages; the presence of a link and its type are indicated by changes in the appearance of the screen cursor as it is moved about the display and encounters selectable objects. >An important problem is how to indicate to a user the selectable elements of a graphic. It is clear that some scheme is needed to do this — expecting a user to hunt after the targets in an image by trial and error is apt to cause frustration with the system and limit its use. Any scheme chosen must satisfy certain requirements: it must unambiguously identify the location and scope of the target, it must not itself interfere with comprehension of the image, and it must require little effort on the part of the user. Possible solutions include highlighting the targets by dynamic indicators, outlines, inverse video, fixed symbols, color, shading, and image manipulation (13,14). >The approach taken in Hyperties has been to allow arbitrarily-shaped regions of an image to define these link targets. Normally, these regions are not distinguished in any way (other than visual cues that an author may choose to provide); however, when the mouse cursor passes over a target region, it becomes highlighted. The highlighting scheme developed is novel, and has met with favorable comments from users: it is referred to as pop-out, and consists of offsetting the highlighted object vertically and horizontally by a small amount, and placing a drop-shadow beneath. This gives the appearance of having the object pop out of the screen (Figure 5a); in addition, the slight movement of the object makes it readily detectable to the eye. Because of the use of arbitrary regions, there is no ambiguity of reference; because highlighting only occurs in response to user demand, the image itself is not cluttered; and because the targets highlight automatically in response to mouse movements, the interface requires minimal effort. >One remaining problem is that it is not possible to identify the links in an image at a glance. However, certain user behaviors were noticed: when confronted with an image with hidden targets, they tend to sweep across the image until a target is highlighted (becomes designated), or try to select what they think might be a target until one is found. This suggested that the system could highlight all of the targets automatically (for a short time) whenever it appears that the user is searching for targets, as when sweeping the display, or clicking in non-target areas. This latter strategy has been implemented in the NeWS version of Hyperties. Whenever a user attempts to select in a non-selectable region (like the background), all targets are revealed (Figure 5b). This technique was found effective and generally very well received by users. >Figure 5: (5a: left) The main view of the telescope. The cursor is now resting on the Faint Object Spectrograph which “popped out” to show the existence of a link (compare with Figure 1). Of course the dynamic effect cannot be rendered in this figure. (5b right) A click on the background shows all targets available on the picture. https://miro.medium.com/max/1501/1*RWavUqU14c4PVeausFPKAA.png https://miro.medium.com/max/1501/1*RWavUqU14c4PVeausFPKAA.pn...