21 ms·

Revisiting why hyperlinks are blue

177 points by TangerineDream 5y ago

JulianMorrison 5y ago
Other thoughts: pure blue is a colour that is representable even in very old colour computers. It's also the only readable pure colour. (I'm guessing, human eyes see it badly, so it intrinsically looks "dark" at full brightness.)
livinglist 5y ago
slingnow 5y ago
This writing style is very off-putting. How many times is the author going to throw in references to their destroyed home and "hate mail" before getting to the point? I actually vividly remember the first article, as it was riddled with assumptions about things that were easily verified or looked up. I have no interest in reading the follow-up.
- taneq 5y ago
  Ugh, who cares about this person and their recent experiences? I just want to know about why hyperlinks are blue and they've mentioned their circumstances in both paragraph one and paragraph four, wasting at least four seconds of my time! It's a blog on internet culture, it doesn't need any personal element. /s
  - billyhoffman 5y ago
    When will they get to the fireworks factory!?!?
SeanLuke 5y ago
This is a fun follow-on article building on another fun article. Unfortunately it seems that with a decent probability the entire premise of the first article is wrong. The original article concludes that Marc Andreessen added blue hyperlinks to NCSA Mosaic in 1993, and that's where blue came from in web browsers. This appears to have stemmed from the mistaken notion that WWW.app (Tim Berners-Lee's browser) was only monochrome. And this follow-on article makes the same claim: > It is also interesting to note that WWW.app, the browser he was creating at the time, did not use blue hyperlinks. But that's not true. It's true that WWW.app as originally created didn't have blue hyperlinks because it was written on early NeXT cubes, which were 2-bit monochrome. But NeXTs were color as of 1990. And it's clear that as of 1993 WWW.app had blue links, as we had dug up in https://news.ycombinator.com/item?id=28318055 https://news.ycombinator.com/item?id=28318055 In 1991 Tim Berners Lee had added comments indicating support for color hyperlinks in the immediate future. At some point between 1991 and 1993 this feature was turned on, and links were set to blue. Since they both had or added blue by 1993, it is not clear whether Marc beat Tim to it or vice versa, but it seems to me likely that Tim was first. This is because (1) Since they both chose blue, it seems probable that one was copying the other. NCSA Mosaic was copying WWW.app wholesale in most aspects, and not the other way around AFAIK. And (2) Tim was influenced by earlier hypertext systems which used blue, as discussed in this article. Unfortunately neither of these articles actually ask Tim when he added it: they just assume WWW.app ran only on monochrome machines when, long before 1993, NeXT workstations were in color.
- NoSorryCannot 5y ago
  I feel like the only other plausible color that could have been chosen is green, and even that seems too opinionated. Reasons being mostly associations (red, orange, yellow meaning danger or stop, and green meaning go) and legibility on white or gray backgrounds. Add to that that people seem to disproportionately pick blue as their favorite color and they especially seem to favor it as a conservative or relaxing color choice. That is to say, I think the odds of two people independently picking blue are pretty good.
  - EGreg 5y ago
    Actually, it was green. I am always surprised whenever Mozilla posts this, that no one seems to go straight to the horse’s mouth. So I will: https://www.w3.org/People/Berners-Lee/FAQ.html https://www.w3.org/People/Berners-Lee/FAQ.html Rendition of links Q: I'm a student of visual communications and asked myself why links are blue. I found some answers that might be, for example blue is a color of learning, but I'm not sure what is right. Is there any reason, why links are colored blue ? A: There is no reason why one should use color, or blue, to signify links: it is just a default. I think the first WWW client (WorldWideWeb I wrote for the NeXT) used just underline to represent link, as it was a spare emphasis form which isn't used much in real documents. Blue came in as browsers went color - I don't remember which was the first to use blue. You can change the defaults in most browsers, and certainly in HTML documents, and of course with CSS style sheets. There are many examples of style sheets which use different colors. My guess is that blue is the darkest color and so threatens the legibility least. I used green whenever I could in the early WWW design, for nature and because it is supposed to be relaxing. Robert Cailliau made the WWW icon in many colors but chose green as he had always seen W in his head as green. One of the nicest link renditions was Dave Raggett's "Arena" browser which had a textured parchment background and embossed out the words of the link with a square apparently raised area.*
    - kevingadd 5y ago
      That doesn't seem to suggest that links were green? "I used green whenever I could in the early WWW design" makes it sound like webpages were green, which is why the icon ended up being green.
mattl 5y ago
Called it. https://news.ycombinator.com/item?id=28316634 https://news.ycombinator.com/item?id=28316634
beej71 5y ago
As someone who's colorblind, I'm grateful for blue links. The worst are pages where the links are red and they've turned off the underscore--I have to drag the mouse all over the page to see where the pointer changes so I can find them. :)
- tyingq 5y ago
  The tab key moves to links for me in chrome and puts a border around the current one.
- notRobot 5y ago
  I wrote a quick userscript for you: colorLinks("blue"); function colorLinks(hex) { var links = document.getElementsByTagName("a"); for(var i=0;i<links.length;i++) { if(links[i].href) { links[i].style.color = hex; links[i].style.textDecoration = "underline"; links[i].style.textDecorationStyle = "solid"; links[i].style.textDecorationColor = hex; } } } Will make all links blue and underlined. You can use this tool to convert it into a handy bookmarklet: https://caiorss.github.io/bookmarklet-maker/ https://caiorss.github.io/bookmarklet-maker/ Alternatively, you can paste it into the JS console, or install it with an extension like greasemonkey. Hope this helps!
  - chrismorgan 5y ago
    This is more easily, faster and better done as a user stylesheet: a { color: blue !important; text-decoration: underline !important; text-decoration-style: solid !important; text-decoration-color: blue !important; } (Unfortunately, extensions like Stylus <https://github.com/openstyles/stylus https://github.com/openstyles/stylus> don’t handle user stylesheet priorities correctly: !important in a user stylesheet should override absolutely all site stylesheets, including inline style attributes. But because of lousy technical limitations, they load stylesheets at the site priority rather than the user priority. But then, what you presented doesn’t conquer a site !important spec anyway. See https://wattenberger.com/blog/css-cascade#origin https://wattenberger.com/blog/css-cascade#origin for a really good explanation of all this stuff.)
pcj-github 5y ago
I recall purchasing Framemaker in a PC brick-and-mortar store around those early times for something like $650, it was by far the most expensive piece of software I'd purchased. I'm not sure I've personally bought any software for that much in the decades since.
- dylan604 5y ago
  Do you use any software where you pay $50/month?
- DonHopkins 5y ago
  I used to call it "Painmaker", because it was "Riddled With Features". The NeWS Toolkit version of Framemaker had a spelling checker that was uncannily apt in its cheeky suggestion for correcting the spelling of "xmodmap". https://www.donhopkins.com/home/catalog/images/smegmas.gif https://www.donhopkins.com/home/catalog/images/smegmas.gif I used The NeWS Toolit version of FrameMaker 2.1.1 on OpenWindows (whose user interface was developed by the legendary NeWS hacker Stan Switzer) to write the manuals for the version of SimCity that ran on NeWS (whose user interface was written in and rendered with PostScript), and HyperLook (which was like a networked PostScript based HyperCard for NeWS). Both manuals credit Framemaker on the second page. I was using the PostScript version of FrameMaker to write more PostScript code to document even more PostScript code! https://donhopkins.com/home/HyperLook-SimCity-Manual.pdf https://donhopkins.com/home/HyperLook-SimCity-Manual.pdf https://donhopkins.com/home/HyperLook-Manual-Part-1-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-1-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-2-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-2-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-3-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-3-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-4-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-4-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-5-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-5-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-6-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-6-of-6.pdf Speaking of writing PostScript with PostScript, Stan also wrote an elegant PostScript Quine, which is even shorter than the Lisp Quine (PostScript is like a cross between Lisp and Forth, but homomorphic and more like Lisp actually -- but PostScript is even homomorphicier than Lisp because it has an even shorter Quine!): https://www.donhopkins.com/home/archive/NeWS/news-tape/fun/quine/quine https://www.donhopkins.com/home/archive/NeWS/news-tape/fun/q... Date: Thu, 14 Sep 89 20:29:28 -0400 To: NeWS-makers@brillig.umd.edu Subject: A PostScript Quine From: spectral!sjs@bellcore.com (Stan Switzer) "'Yields falsehood when preceded by itself in quotes" yields falsehood when preceded by itself in quotes." -- W. V. O. Quine (paraphrase) A "quine" is a program which when evaluated yields its own representation. A quine can be formally described as a fixed point of a language's denotation function. Trivial evaluations (e.g.: literals) are excluded and the program cannot require any input data (e.g.: "cat cat.c"). In my experience, the merit of a language is inversely related to the length of its shortest quine. (Though I _am_ prejudiced toward reflective semantics.) For the heck of it, let's say a PostScript quine is a procedure "{...}" which when followed by "n { exec } repeat" yields the same (or equivalent) value for any non-negative integer value of "n" (including 0). The shortest I have found for PostScript is {{[ exch /dup load /exec load ] cvx} dup exec} Compare to Lisp: ((lambda(f)(list f (list 'quote f))) '(lambda(f)(list f (list 'quote f)))) or (ASCII) C: char*f="char*f=%c%s%c;main(){printf(f,042,f,042,012);}%c";main(){printf(f,042,f,042,012);} Not that it'll change your life or anything... Enjoy, Stan Switzer sjs@bellcore.com The only problem I have with Stan's theory about the merit of a language being inversely related to the length of its shortest Quine is the existence of "10 LIST" in BASIC, which is a decidedly un-meritorious language. But to its credit, DECSYSTEM 10 BASIC even has a "LISTREVERSE" command, which might be useful for implementing a Eniuq. For what it's worth, "10 LIST" and "10 LISTREVERSE" are also Line-by-Line Palendromic Quines, since single line programs are the same listed forwards and backwards. https://news.ycombinator.com/item?id=20007960 https://news.ycombinator.com/item?id=20007960 >LISTREVERSE and LISTNHREVERSE print the contents of the user's memory area in order of descending line numbers. LISTREVERSE precedes the output with a heading, LISTNHREVERSE eliminates the heading. Stan now works at Adobe (of course, how could they NOT hire him after he wrote that beautiful PostScript Quine! ;) ): https://www.linkedin.com/in/sjswitzer/ https://www.linkedin.com/in/sjswitzer/ Homomorphism: https://en.wikipedia.org/wiki/Homomorphism https://en.wikipedia.org/wiki/Homomorphism Quine: https://en.wikipedia.org/wiki/Quine_(computing) https://en.wikipedia.org/wiki/Quine_(computing) HyperLook SimCity Demo Transcript: This is a transcript of a video taped demonstration of SimCity on HyperLook in NeWS. https://donhopkins.medium.com/hyperlook-simcity-demo-transcript-17f627eab14a https://donhopkins.medium.com/hyperlook-simcity-demo-transcr... SimCity, Cellular Automata, and Happy Tool for HyperLook (nee HyperNeWS (nee GoodNeWS)): HyperLook was like HyperCard for NeWS, with PostScript graphics and scripting plus networking. Here are three unique and wacky examples that plug together to show what HyperNeWS was all about, and where we could go in the future! https://donhopkins.medium.com/hyperlook-nee-hypernews-nee-goodnews-99f411e58ce4 https://donhopkins.medium.com/hyperlook-nee-hypernews-nee-go...
simonblack 5y ago
by 1993, blue was becoming the industry standard for interaction for hypertext. The operative words here are "industry standard". In other words blue links are merely a convention, like driving on the left. Many websites don't conform to the 'industry standard', and use colors like red unaccessed links, followed by another 'non-standard' color for an accessed link instead of the purplish color that most websites use.
tiffanyh 5y ago
Grey was the default browser background color. Folks forget this but browsers defaulted to grey as the background color. As such, you needed the hyperlink color to provide enough contrast to grey. Examples of early Internet websites. https://jamesaltucher.com/blog/whats-changed-in-the-past-17-years/ https://jamesaltucher.com/blog/whats-changed-in-the-past-17-...
- toastal 5y ago
  This still causes issues for me from time to time with a dark GTK theme + Firefox on Linux. Developers like to set the default color to something like #222 and leaving the background as default, or unreadable black on black. Mozilla also still lets you set different defaults if you want. People shouldn't assume a default background color and if you want white, set it to white.
sriramk 5y ago
Marc himself just commented on this https://twitter.com/pmarca/status/1481095915427577856?s=21 https://twitter.com/pmarca/status/1481095915427577856?s=21 And https://twitter.com/pmarca/status/1481098552658956290?s=21 https://twitter.com/pmarca/status/1481098552658956290?s=21
- samth 5y ago
  "I just happened to choose the color that everyone else in the industry was choosing for no reason at all" is not very persuasive, especially 28 years later.
  - gwern 5y ago
    On the contrary, it's very persuasive, because if it was mere fashion, plenty of people would dissent, while if it was convergent evolution because it was the only feasible choice...
atarian 5y ago
typos are red hyperlinks are blue browsers like cookies and so do you
suhail 5y ago
Answer from Marc Andreessen: https://twitter.com/pmarca/status/1481095915427577856?s=20 https://twitter.com/pmarca/status/1481095915427577856?s=20
- kragen 5y ago
  That's not an answer.
- DonHopkins 5y ago
  I really appreciate Elise Blanchard following up and publishing a timeline combining all the information she gathered! Regardless of whether it was parallel evolution, or people just copying things they’d seen somewhere without remembering where it was, the fact is that Ben Shneiderman arrived at the color blue by user testing and scientifically measuring comprehension and recollection, and widely published papers and software to the other academics and researchers who were bothering to pay attention at the time, like Tim Berners-Lee, who he discussed it with. While Marc Andreesen is apparently implying that Netscape just got lucky by choosing the only color that wasn’t yet used. Personally I prefer user interfaces whose designs are conscientiously based on peer reviewed published scientific research and sound scientific theories like Fitt's Law (which inspired pie menus), rather than blind luck and cargo-cult cloning of shallow surface features, and I hope that more commercial companies look to, credit, and support academic research and history for inspiration of their designs, instead of just hoping to get lucky. We certainly appreciate and acknowledge all the generous support that companies like Apple, Sun, NCR, Elographics, Microtouch, and other institutions like Smithsonian Museums and the Library of Congress gave us at HCIL. I wish more companies, investors, and government organizations strategically supported the academic research and open source software development they so wisely and successfully exploit. https://hcil.umd.edu/getting-value/ https://hcil.umd.edu/getting-value/ >There are many ways for companies, institutions, and non-profits to engage with HCI at UMD and many reasons for doing so, including sharing real-world challenges and perspectives with our talented students and getting fresh perspectives on your design challenges. Below is an overview of opportunities for your consideration. [...] https://en.wikipedia.org/wiki/Fitts%27s_law https://en.wikipedia.org/wiki/Fitts%27s_law >Fitts's law (often cited as Fitts' law) is a predictive model of human movement primarily used in human–computer interaction and ergonomics. This scientific law predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. Fitts's law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer monitor using a pointing device. https://en.wikipedia.org/wiki/Pie_menu#Comparison_with_other_interaction_techniques https://en.wikipedia.org/wiki/Pie_menu#Comparison_with_other... >Comparison with other interaction techniques: Pie menus are faster and more reliable to select from than linear menus, because selection depends on direction instead of distance. The circular menu slices are large in size and near the pointer for fast interaction (see Fitts's law). Experienced users use muscle memory without looking at the menu while selecting from it. Nested pie menus can efficiently offer many options, and some pie menus can pop up linear menus, and combine linear and radial items in the same menu. Pie menus just like any popup menu are shown only when requested, resulting in less visual distraction and cognitive load than toolbars and menu bars that are always shown. https://elists.isoc.org/pipermail/internet-history/2020-April/005956.html https://elists.isoc.org/pipermail/internet-history/2020-Apri... >My students conducted more than a dozen experiments (unpublished) on different ways of highlighting and selection using current screens, e.g. green screens only permitted, bold, underscore, blinking, and I think italic(???). When we had a color screen we tried different color highlighted links. While red made the links easier to spot, user comprehension and recollection of the content declined. We chose the light blue, which Tim adopted. >His systems with embedded menus (or hot spots), where a significant user interface improvement over early systems such as Gopher. But Tim told me at the time that he was influenced by our design as he saw it in the Hypertext on Hypertext project that we used Hyperties to build for the July 1988 CACM that held the articles from the July 1987 Hypertext conference at the University of North Carolina. The ACM sold 4000 copies of our Hypertext on Hypertext disks. http://www.cs.umd.edu/projects/hcil/touchscreens/ http://www.cs.umd.edu/projects/hcil/touchscreens/ >Between 1988 and 1993 Apple was a sponsor of the HCIL lab, Steve Jobs visited in person in 1988, and Ben Shneiderman was a consultant for Apple at several occasions. Demos were also shown to our lab’s visitors, and videos shown during invited lectures at conferences or during industry visits (see Ben Shneiderman’s resume for a partial list) [...] >During 1989–1991, we worked on a home automation system and explored several direct manipulation designs (e.g. clocks and calendars to schedule devices to go on and off, ON-OFF switches with buttons or sliders) . A playful fingerpainting exploration tool and toy called Playpen was developed. Finally we worked with National Cash Register (NCR) to explore how touchscreens might be used to replace keyboards when store cashiers needed to enter a little bit of data about shopppers (such as phone numbers or addresses). We stopped doing research on touchscreens as successful applications found their ways in museums or cash registers. Pen interfaces, made popular by the Palm Pilots, continued the work as they afforded a similar sense of “real” direct manipulation. Eventually touchcreens came back as the input device of choice of mobile devices, especially after the launch of the iPhone is 2007. [...] >High-Precision touchscreen: the next step was to try to stabilize the touchscreen so that the cursor would stay put when the finger didn’t move. This was accomplished with a clever time-dependant averaging of the positions returned by the device. Now, individual pixels could be selected (in the 480x350 high resolution screen of the time). An experiment showed that there was significant difference in selection times and error rates between mouse and touchscreen for targets down to about 1mm2, when using a lift-off strategy with a stabilized touchcreen. Companies such as Elographics and Microtouch, with whom we had good relations, integrated stabilization techniques into the drivers of their touchscreens. From then on, high-precision was possible, and designers could do everything with the touchscreen that they could do with the mouse. [...]
flohofwoe 5y ago
Don't know if this is related at all, but some 80's home computers used white or yellow text on blue background because of all color combinations that was best readable with the "worst case" TV connection (coax cable) - the blue seems to have been very "analog signal" friendly.
nixpulvis 5y ago
Next question. When did Microsoft Word start using green for grammar? Does it even still do that?
- 2143 5y ago
  I've just been hit with a big wave of nostalgia. Haven't used MS Office for over a decade, but I remember those green underlines. So if red was wrong spelling, and green was grammatical errors, then what were blue underlines used for? Or was there no blue at all?
  - nixpulvis 5y ago
    I cannot recall.
bullen 5y ago
The first thing I do on a new homepage is this: a:link, a:hover, a:active, a:visited { color: #000000; }
DonHopkins 5y ago
HyperTIES Discussions from Hacker News: I’m putting this lightly edited archive of a bunch of different discussions and email about HyperTIES, all together in one place here on Medium. Please forgive the rough wall of text and redundancy, but I haven’t yet had time to distill it all down into one sentence. I will just include the email I sent to Ben Shneiderman summarizing the interesting posts and links, for now. Here goes: https://donhopkins.medium.com/hyperties-discussions-from-hacker-news-937d156f0330 https://donhopkins.medium.com/hyperties-discussions-from-hac... [...]
DonHopkins 5y ago
Multimedia and HyperText: The Internet and Beyond, by Jakob Nielsen, SunSoft (1995). https://books.google.nl/books?id=KgZXCCfP0rQC&pg=PA469&lpg=PA469&dq=%22NaviText+SAM%22&source=bl&ots=OIpk-ZClGi&sig=ACfU3U3Yj2_iAht2rueCrn-CVuWw1I8K1w&hl=en&sa=X&ved=2ahUKEwinsb6kp7D1AhUP-6QKHaKXDvMQ6AF6BAgTEAM#v=onepage&q&f=false https://books.google.nl/books?id=KgZXCCfP0rQC&pg=PA469&lpg=P... https://www.amazon.de/-/en/Jakob-Nielsen/dp/0125184085/ref=sr_1_1?crid=360LNDHJNLLLT&keywords=Multimedia+and+HyperText%3A+The+Internet+and+Beyond&qid=1642133996&sprefix=multimedia+and+hypertext+the+internet+and+beyond%2Caps%2C77&sr=8-1 https://www.amazon.de/-/en/Jakob-Nielsen/dp/0125184085/ref=s... I hadn't come across this book before, but I popped for the Kindle edition, and found an excerpt about HyperTIES. It also goes into fascinating detail about many other early hypermedia systems. Jakob Nielsen writes deep well-researched books and articles about usability and user interface design, and he gives excellent talks and keynotes! (He's aka "guru of Web page usability", "king of usability", and "usability Pope", but definitely not "usability Godfather"! ;) ) https://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consultant) https://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consu... https://www.nngroup.com/people/jakob-nielsen/ https://www.nngroup.com/people/jakob-nielsen/ His raises important points about Hyperties' design being focused on ease-of-use by museum visitors and ease-of-authoring by museum curators and historians, the simple consistent keyboard interface, configurable link colors, and the definition window at the bottom of the screen that previews descriptions of link targets in context before you even visit them (often making it not necessary to even follow a link and lose your context). And he describes the different touchscreen interfaces like the "Lift-Off" strategy that Rich Potter designed and empirically evaluated with Hyperties. Some of these ideas are useful but missing features that I wish modern web browsers would natively support (like pie menus, of course). What Jakob Nelson's book didn't mention was that the Sun NeWS research version also featured built-in and use-defined pie menus for navigation, window management, font and color selection, embedded PostScript applets with interactive widgets, scalable color PostScript pictures and animations, pop-up cut-out embedded graphical links, as well as tabbed windows in the emacs based authoring tool. >Hyperties (1983) >Hyperties was started as a research project by Ben Shneiderman [Shneiderman 1987b] at the University of Maryland around 1983. It was originally called TIES as an abbreviation for The Interactive Encyclopedia System, but since that name was trademark by somebody else, the name was changes to Hyperties to indicate the use of hypertext concepts in the system. >Since 1987 Hyperties has been available as a commercial product on standard PCs from Cognetics Corporation. Research continues at the University of Maryland, where a workstation version has been implemented on Sun workstations. >One of the interesting aspects of the commercial version of Hyperties is that it works with the plain text screen shown in Figure 3.3. It is thus suited for DOS users. Hyperties also works with the main graphics formats on PCs and PS/2s and can display color images if the screen can handle them. >The interaction techniques in Hyperties are extremely simple and allow the interface to be operated without a mouse. Some of the text on the screen is highlighted and the user can activate those anchors either by clicking on them with a mouse, touching if a touch screen is available, or simply by using the arrow keys to move the cursor until it is over the text and then hitting ENTER. Hyperties uses the arrow keys in a special manner called "jump keys," which cause the cursor to jump in a single step directly to the next active anchor in the direction of the arrow. This way of using arrow keys has been optimized for hypertext where there are normally only a few areas on the screen that the user can point to and the use of keys has been measured to be slightly faster than the mouse (see Chapter 6). Figure 3.3: https://i.imgur.com/0fooyZs.png https://i.imgur.com/0fooyZs.png >In the example in Figure 3.3, the user is activating the string "Xerox PARC," which is indicated by inverse video. In the color version of Hyperties it is possible for the user to edit a preference file to determine other types of feedback for selections such as the use of contrasting color. >Instead of taking the user directly to the destination node as almost all other hypertext systems do, Hyperties at first lets the user stay at the same navigational location and displays only a small "definition" at the bottom of the screen. This definition provides the user with a prospective view of what would happen if the link were indeed followed to its destination and it allows the user to see the information in the context of the anchor point. In many cases just seeing the definition is enough. Otherwise the user can of course choose to complete the link. >A Hyperties link points to an entire "article," which may consist of several pages. Users following the link will always be taken to the first page of the article and will have to page through it themselves. This set-up is in contrast to the KMS model, where a link always points to a single page, and to the Intermedia model where a link points to a specific text string within an article. The advantage of the Hyperties model is that authors do not need to specify destinations very precisely. They just indicate the name of the article they want to link to, and the authoring system completes the link. >The same text phrase will always point to the same article in Hyperties, which again simplifies the authoring interface but makes the system less flexible. Many applications call for having different destinations, depending on the context of perhaps on the system's model of the user's level of expertise. >Many of the design choices in Hyperties follow from the original emphasis on applications like museum information systems. These applications need a very simple reading interface without advanced facilities like overview diagrams (which cannot be supported on plain DOS machines anyway). Furthermore, the writers of the hypertexts were museum curators and historians who are mostly not very motivated for learning complex high-technology solutions, so the similarity of the Hyperties authoring facilities to traditional text processing was well suited for the initial users. Now Hyperties is being used for a much wider spectrum of applications. >The commercial version of Hyperties uses a full-screen user interface as shown in Figure 3.3, whereas the research system on the Sun uses a two-frame approach similar to that of KMS. He compares and contrasts the designs and features of many different hypertext systems. Here's a section on pointing devices that discusses the "Lift-Off" touch screen strategy developed for Hyperties, which explains the importance of performing empirical user studies, and measuring the performance of specific applications, as opposed to just guessing colors and whinging input handing strategies: >Pointing Devices >Almost all current hypertext systems are used with a mouse as the pointing device. Several human factors studies of computer interfaces in general have shown that the mouse is a good pointing device, and it has certainly seen wide use in recent years. >Ewing et al. [1986] compared the mouse with a special use of the keyboard arrow keys for activating hypertext anchors in Hyperties. This special use of the arrow keys has them jump the cursor in a single step to the hypertext anchor that is nearest to the previous cursor location in the direction indicated by the arrow key pushed by the user. It turned out that the mouse was somewhat slower than this special use of the arrow keys (3.3 min. vs. 2.8 min. for anchors that are close by and 3.5 min. vs. 3.3 min. for anchors farther away). >For some hypertext applications, such as information kiosks, the mouse is too fragile to be used. In these situations it is common to use a touch screen as the pointing device instead. Touch screens are not used in the standard protected office environment because having to raise their arms quickly becomes tiresome for users and because the touch screens are normally less precise than the mouse. >The simplest implementations of touch screens emulate the mouse and can therefore be used with any hypertext system without any need to change the software. >Touch screens can, however, be used in several different ways to activate hypertext anchors. Potter et al. [1989] tested several strategies for activating anchors in Hyperties, including the "land-on" strategy, which activates a point on the screen the moment the user touches that point (similar to a MouseDown event in mouse-driven interfaces); and the "take-off" strategy, which activates the point which the user last touched when the hand is taken off the screen (similar to MouseUp events). Users performed about the same with these two strategies but had a tendency to be slightly slower with the take-off screens. Error rates were significantly lower with the take-off strategy since users could see what they had selected before lifting their fingers. >Potter et al. also tested a touch screen strategy called "first-contact", which activates the first selectable area on the screen entered by the user's finger. If the user touches down on selectable area, the result is the same as the land-on strategy, but if the user touches down on a blank area, nothing is selected until the user's finger has moved to the first active region on the screen (similar to a combination of MouseEnter and MouseWithin events in a mouse system) There was no statistically significant difference between the first-contact and the take-off strategies in this experiment done with Hyperties, even though fairly large and significant differences had been found in an earlier experiment [Potter et al. 1988] on selection in a traditional text environment. In the earlier, non-hypertext experiment, subjects had to select targets that were two characters in width and were separated by a two character space. For such a task, the first-contact strategy gave rise to a lot more errors but was somewhat faster than the lift-off strategy where users could see what they were selecting. In Hyperties, however, the anchors are typically whole words which are far apart on the screen so users have a much smaller risk of touching something by mistake and they don't need to rely as much on the feedback. The different outcome of these two experiments shows the importance of conducting usability tests of as high a validity as possible with regard to the actual final use of whatever is being tested. For selecting hypertext anchors, the first-contact and take-off strategies performed about the same, so the take-off strategy might be chosen by a designer because it is the simplest to explain to users. But for a text editing application, one should choose the first-contact strategy. >Potter, R., Berman, M., and Shneiderman, B. (1989). An experimental evaluation of three touch screen strategies within a hypertext database. Intl. J. Human-Computer Interaction 1, 1, 41-52. >Touch screen were more usable when a take-off strategy rather than a land-on (touch-down) strategy was used for registering user selections. http://www.cs.umd.edu/hcil/trs/88-04/88-04.ps http://www.cs.umd.edu/hcil/trs/88-04/88-04.ps Here's another discussion of the lessons learned by Hyperties: >In contrast, Shneiderman [1989], in his discussion of the lessons learnt from building more than thirty hypertext structures for Hyperties, emphasized the key lesson that each project was different and had to have its information structured according to a principle that was suited for its specific domain. Shneiderman's experience also showed, however, that it is necessary to have a single managing editor to coordinate a project and to copy edit the final result. So there is certainly the potential for tension among the people whose work it will be to create future, large information bases. Just as software developers may feel frustrated by user interface standards restricting their design options, information base developers may be frustrated by having to place consistency over their individual creativity. One hopes that the unique individual needs of each project will provide enough variation to keep this problem to a minimum, but only further experience can tell. >Shneiderman, B. (1989). Reflections on authoring, editing, and managing hypertext. In Barrett, E. (Ed.): The Society of Text, MIT Press, Cambridge, MA, 115-31. >Surveys several Hyperties applications, including one about the Hubble Space Telescope implemented in a two-frame version of a Sun workstation. The chapter also contains a discussion of the authoring aids in Hyperties. A large part of the chapter is dedicated to the lessons learnt from building more than 30 hypertext structures for Hyperties. One key lesson is that each project was different and had to have its information structured according to a principle that was suited for its specific domain. Experience shows that it is necessary to have a single managing editor to coordinate a project and to copy edit the final result. https://www.cs.umd.edu/~ben/papers/Shneiderman1989Reflections.pdf https://www.cs.umd.edu/~ben/papers/Shneiderman1989Reflection... Here's a reference and description of an early hypermedia system called "gIBIS" that used color links, however it doesn't mention and I don't know which colors it used -- but according to Marc Andreesen, there are only four good ones, so you can probably guess ;) . >Conklin, J., and Begeman, M. L. (1988). gIBIS: A hypertext tool for exploratory policy discussion. ACM Trans. Office Information Systems 6, 4 (October 1988), 303-331. Also in Proc. 2nd Conf. Computer Supported Cooperative Work (Portland, OR, 26-28 September) 140-152. >Describes the gIBIS system (graphical Issue-Based Information System). gIBIS is used in the MCC Design Journal project to provide a computerized record of a software design process with special emphasis on capturing the rationale behind the design decisions through hypertext links among issues, positions and arguments. gIBIS is designed for color workstations and uses color to indicate node and link status (for a color screen shot, see [Begeman and Conklin 1988]). Preliminary empirical observations indicate that users had a greater tendency to add supporting comments than to add objecting ones. Some users complained about the danger of premature segmentation of new ideas and would have liked a proto-node" simply to record ideas before structuring them. The first half of this paper (describing the system itself but not the empirical evidence about its actual use) can also be found in [Begeman and Conklin 1988]. Unfortunately this PDF is not color, but here is the Begeman and Conklin 1988 iBIS paper: http://csis.pace.edu/~marchese/CS835/Readings/p303-conklin_gibis.pdf http://csis.pace.edu/~marchese/CS835/Readings/p303-conklin_g... Hypermedia systems covered in this book: Memex (1945), Augment/NLS (1962-1976), Xanadu (1965), Hypertext Editing System (1967) and FRESS (1968), Aspen Movie Map (1978), KMS (1983), Hyperties (1983), NoteCards (1985), Symbolics Document Examiner (1985), Intermedia (1985), Guide (1986), HyperCard (1987), The World Wide Web and Mosaic, HTML, Hyper-G and Harmony, Navitext SAM, gIBIS, Half-Dead Hypertext and the Electronic Business Card, conversions of The Manual of Medical Therapeutics and Oxford English Dictionary, and a comprehensively annotated bibliography of surveys, societies, compendium, conferences, journals and magazines, videotapes, books about the Internet, and references to classics like: Bush, V (1945) As we may think. Atlantic Monthly, July, pp. 101-108. https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/ https://www.theatlantic.com/magazine/archive/1945/07/as-we-m... https://en.wikipedia.org/wiki/As_We_May_Think https://en.wikipedia.org/wiki/As_We_May_Think Engelbart, D. C. and English, W. K. (1968). A research center for augmenting human intellect. https://www.lri.fr/~mbl/ENS/FONDIHM/2020/papers/Englebart-Augmenting62.pdf https://www.lri.fr/~mbl/ENS/FONDIHM/2020/papers/Englebart-Au... Kay, A. and Goldberg, A. (1977) Personal dynamic media. IEEE Computer 10, 3 (March) 31-41. http://augmentingcognition.com/assets/Kay1977.pdf http://augmentingcognition.com/assets/Kay1977.pdf Lippman, A. (1980). Movie-Maps: An application of the optical videodisk to computer graphics. Computer Graphics 14, 3, 32-42. https://en.wikipedia.org/wiki/Aspen_Movie_Map https://en.wikipedia.org/wiki/Aspen_Movie_Map https://dl.acm.org/doi/10.1145/965105.807465 https://dl.acm.org/doi/10.1145/965105.807465 (does anyone know a link to a pdf of this, please?) Nelson, T. (1974). Computer Lib / Dream Machines. https://en.wikipedia.org/wiki/Computer_Lib/Dream_Machines https://en.wikipedia.org/wiki/Computer_Lib/Dream_Machines http://worrydream.com/refs/Nelson-ComputerLibDreamMachines1975.pdf http://worrydream.com/refs/Nelson-ComputerLibDreamMachines19... [Also check out the other great stuff in the same directory -- thanks Bret Victor for hosting it:] http://worrydream.com/refs/ http://worrydream.com/refs/ Nelson, T.: Literary Machines. https://en.wikipedia.org/wiki/Literary_Machines https://en.wikipedia.org/wiki/Literary_Machines http://www.eastgate.com/catalog/LiteraryMachines.html http://www.eastgate.com/catalog/LiteraryMachines.html [Here's Ted Nelson talking about Jump Links:] https://www.youtube.com/watch?v=1gPM3GqjMR4 https://www.youtube.com/watch?v=1gPM3GqjMR4 Rheingold, H. (1985). Tools for Thought: The People and Ideas behind the Next Computer Revolution. https://www.rheingold.com/texts/tft/ https://www.rheingold.com/texts/tft/

Other thoughts: pure blue is a colour that is representable even in very old colour computers. It's also the only readable pure colour. (I'm guessing, human eyes see it badly, so it intrinsically looks "dark" at full brightness.)

livinglist 5y ago

slingnow 5y ago

This writing style is very off-putting. How many times is the author going to throw in references to their destroyed home and "hate mail" before getting to the point? I actually vividly remember the first article, as it was riddled with assumptions about things that were easily verified or looked up. I have no interest in reading the follow-up.

taneq 5y ago
Ugh, who cares about this person and their recent experiences? I just want to know about why hyperlinks are blue and they've mentioned their circumstances in both paragraph one and paragraph four, wasting at least four seconds of my time! It's a blog on internet culture, it doesn't need any personal element. /s
- billyhoffman 5y ago
  When will they get to the fireworks factory!?!?

SeanLuke 5y ago

This is a fun follow-on article building on another fun article. Unfortunately it seems that with a decent probability the entire premise of the first article is wrong. The original article concludes that Marc Andreessen added blue hyperlinks to NCSA Mosaic in 1993, and that's where blue came from in web browsers. This appears to have stemmed from the mistaken notion that WWW.app (Tim Berners-Lee's browser) was only monochrome. And this follow-on article makes the same claim: > It is also interesting to note that WWW.app, the browser he was creating at the time, did not use blue hyperlinks. But that's not true. It's true that WWW.app as originally created didn't have blue hyperlinks because it was written on early NeXT cubes, which were 2-bit monochrome. But NeXTs were color as of 1990. And it's clear that as of 1993 WWW.app had blue links, as we had dug up in https://news.ycombinator.com/item?id=28318055 https://news.ycombinator.com/item?id=28318055 In 1991 Tim Berners Lee had added comments indicating support for color hyperlinks in the immediate future. At some point between 1991 and 1993 this feature was turned on, and links were set to blue. Since they both had or added blue by 1993, it is not clear whether Marc beat Tim to it or vice versa, but it seems to me likely that Tim was first. This is because (1) Since they both chose blue, it seems probable that one was copying the other. NCSA Mosaic was copying WWW.app wholesale in most aspects, and not the other way around AFAIK. And (2) Tim was influenced by earlier hypertext systems which used blue, as discussed in this article. Unfortunately neither of these articles actually ask Tim when he added it: they just assume WWW.app ran only on monochrome machines when, long before 1993, NeXT workstations were in color.

NoSorryCannot 5y ago
I feel like the only other plausible color that could have been chosen is green, and even that seems too opinionated. Reasons being mostly associations (red, orange, yellow meaning danger or stop, and green meaning go) and legibility on white or gray backgrounds. Add to that that people seem to disproportionately pick blue as their favorite color and they especially seem to favor it as a conservative or relaxing color choice. That is to say, I think the odds of two people independently picking blue are pretty good.
- EGreg 5y ago
  Actually, it was green. I am always surprised whenever Mozilla posts this, that no one seems to go straight to the horse’s mouth. So I will: https://www.w3.org/People/Berners-Lee/FAQ.html https://www.w3.org/People/Berners-Lee/FAQ.html Rendition of links Q: I'm a student of visual communications and asked myself why links are blue. I found some answers that might be, for example blue is a color of learning, but I'm not sure what is right. Is there any reason, why links are colored blue ? A: There is no reason why one should use color, or blue, to signify links: it is just a default. I think the first WWW client (WorldWideWeb I wrote for the NeXT) used just underline to represent link, as it was a spare emphasis form which isn't used much in real documents. Blue came in as browsers went color - I don't remember which was the first to use blue. You can change the defaults in most browsers, and certainly in HTML documents, and of course with CSS style sheets. There are many examples of style sheets which use different colors. My guess is that blue is the darkest color and so threatens the legibility least. I used green whenever I could in the early WWW design, for nature and because it is supposed to be relaxing. Robert Cailliau made the WWW icon in many colors but chose green as he had always seen W in his head as green. One of the nicest link renditions was Dave Raggett's "Arena" browser which had a textured parchment background and embossed out the words of the link with a square apparently raised area.*
  - kevingadd 5y ago
    That doesn't seem to suggest that links were green? "I used green whenever I could in the early WWW design" makes it sound like webpages were green, which is why the icon ended up being green.

mattl 5y ago

Called it. https://news.ycombinator.com/item?id=28316634 https://news.ycombinator.com/item?id=28316634

beej71 5y ago

As someone who's colorblind, I'm grateful for blue links. The worst are pages where the links are red and they've turned off the underscore--I have to drag the mouse all over the page to see where the pointer changes so I can find them. :)

tyingq 5y ago
The tab key moves to links for me in chrome and puts a border around the current one.
notRobot 5y ago
I wrote a quick userscript for you: colorLinks("blue"); function colorLinks(hex) { var links = document.getElementsByTagName("a"); for(var i=0;i<links.length;i++) { if(links[i].href) { links[i].style.color = hex; links[i].style.textDecoration = "underline"; links[i].style.textDecorationStyle = "solid"; links[i].style.textDecorationColor = hex; } } } Will make all links blue and underlined. You can use this tool to convert it into a handy bookmarklet: https://caiorss.github.io/bookmarklet-maker/ https://caiorss.github.io/bookmarklet-maker/ Alternatively, you can paste it into the JS console, or install it with an extension like greasemonkey. Hope this helps!
- chrismorgan 5y ago
  This is more easily, faster and better done as a user stylesheet: a { color: blue !important; text-decoration: underline !important; text-decoration-style: solid !important; text-decoration-color: blue !important; } (Unfortunately, extensions like Stylus <https://github.com/openstyles/stylus https://github.com/openstyles/stylus> don’t handle user stylesheet priorities correctly: !important in a user stylesheet should override absolutely all site stylesheets, including inline style attributes. But because of lousy technical limitations, they load stylesheets at the site priority rather than the user priority. But then, what you presented doesn’t conquer a site !important spec anyway. See https://wattenberger.com/blog/css-cascade#origin https://wattenberger.com/blog/css-cascade#origin for a really good explanation of all this stuff.)

pcj-github 5y ago

I recall purchasing Framemaker in a PC brick-and-mortar store around those early times for something like $650, it was by far the most expensive piece of software I'd purchased. I'm not sure I've personally bought any software for that much in the decades since.

dylan604 5y ago
Do you use any software where you pay $50/month?
DonHopkins 5y ago
I used to call it "Painmaker", because it was "Riddled With Features". The NeWS Toolkit version of Framemaker had a spelling checker that was uncannily apt in its cheeky suggestion for correcting the spelling of "xmodmap". https://www.donhopkins.com/home/catalog/images/smegmas.gif https://www.donhopkins.com/home/catalog/images/smegmas.gif I used The NeWS Toolit version of FrameMaker 2.1.1 on OpenWindows (whose user interface was developed by the legendary NeWS hacker Stan Switzer) to write the manuals for the version of SimCity that ran on NeWS (whose user interface was written in and rendered with PostScript), and HyperLook (which was like a networked PostScript based HyperCard for NeWS). Both manuals credit Framemaker on the second page. I was using the PostScript version of FrameMaker to write more PostScript code to document even more PostScript code! https://donhopkins.com/home/HyperLook-SimCity-Manual.pdf https://donhopkins.com/home/HyperLook-SimCity-Manual.pdf https://donhopkins.com/home/HyperLook-Manual-Part-1-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-1-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-2-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-2-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-3-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-3-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-4-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-4-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-5-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-5-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-6-of-6.pdf https://donhopkins.com/home/HyperLook-Manual-Part-6-of-6.pdf Speaking of writing PostScript with PostScript, Stan also wrote an elegant PostScript Quine, which is even shorter than the Lisp Quine (PostScript is like a cross between Lisp and Forth, but homomorphic and more like Lisp actually -- but PostScript is even homomorphicier than Lisp because it has an even shorter Quine!): https://www.donhopkins.com/home/archive/NeWS/news-tape/fun/quine/quine https://www.donhopkins.com/home/archive/NeWS/news-tape/fun/q... Date: Thu, 14 Sep 89 20:29:28 -0400 To: NeWS-makers@brillig.umd.edu Subject: A PostScript Quine From: spectral!sjs@bellcore.com (Stan Switzer) "'Yields falsehood when preceded by itself in quotes" yields falsehood when preceded by itself in quotes." -- W. V. O. Quine (paraphrase) A "quine" is a program which when evaluated yields its own representation. A quine can be formally described as a fixed point of a language's denotation function. Trivial evaluations (e.g.: literals) are excluded and the program cannot require any input data (e.g.: "cat cat.c"). In my experience, the merit of a language is inversely related to the length of its shortest quine. (Though I _am_ prejudiced toward reflective semantics.) For the heck of it, let's say a PostScript quine is a procedure "{...}" which when followed by "n { exec } repeat" yields the same (or equivalent) value for any non-negative integer value of "n" (including 0). The shortest I have found for PostScript is {{[ exch /dup load /exec load ] cvx} dup exec} Compare to Lisp: ((lambda(f)(list f (list 'quote f))) '(lambda(f)(list f (list 'quote f)))) or (ASCII) C: char*f="char*f=%c%s%c;main(){printf(f,042,f,042,012);}%c";main(){printf(f,042,f,042,012);} Not that it'll change your life or anything... Enjoy, Stan Switzer sjs@bellcore.com The only problem I have with Stan's theory about the merit of a language being inversely related to the length of its shortest Quine is the existence of "10 LIST" in BASIC, which is a decidedly un-meritorious language. But to its credit, DECSYSTEM 10 BASIC even has a "LISTREVERSE" command, which might be useful for implementing a Eniuq. For what it's worth, "10 LIST" and "10 LISTREVERSE" are also Line-by-Line Palendromic Quines, since single line programs are the same listed forwards and backwards. https://news.ycombinator.com/item?id=20007960 https://news.ycombinator.com/item?id=20007960 >LISTREVERSE and LISTNHREVERSE print the contents of the user's memory area in order of descending line numbers. LISTREVERSE precedes the output with a heading, LISTNHREVERSE eliminates the heading. Stan now works at Adobe (of course, how could they NOT hire him after he wrote that beautiful PostScript Quine! ;) ): https://www.linkedin.com/in/sjswitzer/ https://www.linkedin.com/in/sjswitzer/ Homomorphism: https://en.wikipedia.org/wiki/Homomorphism https://en.wikipedia.org/wiki/Homomorphism Quine: https://en.wikipedia.org/wiki/Quine_(computing) https://en.wikipedia.org/wiki/Quine_(computing) HyperLook SimCity Demo Transcript: This is a transcript of a video taped demonstration of SimCity on HyperLook in NeWS. https://donhopkins.medium.com/hyperlook-simcity-demo-transcript-17f627eab14a https://donhopkins.medium.com/hyperlook-simcity-demo-transcr... SimCity, Cellular Automata, and Happy Tool for HyperLook (nee HyperNeWS (nee GoodNeWS)): HyperLook was like HyperCard for NeWS, with PostScript graphics and scripting plus networking. Here are three unique and wacky examples that plug together to show what HyperNeWS was all about, and where we could go in the future! https://donhopkins.medium.com/hyperlook-nee-hypernews-nee-goodnews-99f411e58ce4 https://donhopkins.medium.com/hyperlook-nee-hypernews-nee-go...

simonblack 5y ago

by 1993, blue was becoming the industry standard for interaction for hypertext. The operative words here are "industry standard". In other words blue links are merely a convention, like driving on the left. Many websites don't conform to the 'industry standard', and use colors like red unaccessed links, followed by another 'non-standard' color for an accessed link instead of the purplish color that most websites use.

tiffanyh 5y ago

Grey was the default browser background color. Folks forget this but browsers defaulted to grey as the background color. As such, you needed the hyperlink color to provide enough contrast to grey. Examples of early Internet websites. https://jamesaltucher.com/blog/whats-changed-in-the-past-17-years/ https://jamesaltucher.com/blog/whats-changed-in-the-past-17-...

toastal 5y ago
This still causes issues for me from time to time with a dark GTK theme + Firefox on Linux. Developers like to set the default color to something like #222 and leaving the background as default, or unreadable black on black. Mozilla also still lets you set different defaults if you want. People shouldn't assume a default background color and if you want white, set it to white.

sriramk 5y ago

Marc himself just commented on this https://twitter.com/pmarca/status/1481095915427577856?s=21 https://twitter.com/pmarca/status/1481095915427577856?s=21 And https://twitter.com/pmarca/status/1481098552658956290?s=21 https://twitter.com/pmarca/status/1481098552658956290?s=21

samth 5y ago
"I just happened to choose the color that everyone else in the industry was choosing for no reason at all" is not very persuasive, especially 28 years later.
- gwern 5y ago
  On the contrary, it's very persuasive, because if it was mere fashion, plenty of people would dissent, while if it was convergent evolution because it was the only feasible choice...

atarian 5y ago

typos are red hyperlinks are blue browsers like cookies and so do you

suhail 5y ago

Answer from Marc Andreessen: https://twitter.com/pmarca/status/1481095915427577856?s=20 https://twitter.com/pmarca/status/1481095915427577856?s=20

kragen 5y ago
That's not an answer.
DonHopkins 5y ago
I really appreciate Elise Blanchard following up and publishing a timeline combining all the information she gathered! Regardless of whether it was parallel evolution, or people just copying things they’d seen somewhere without remembering where it was, the fact is that Ben Shneiderman arrived at the color blue by user testing and scientifically measuring comprehension and recollection, and widely published papers and software to the other academics and researchers who were bothering to pay attention at the time, like Tim Berners-Lee, who he discussed it with. While Marc Andreesen is apparently implying that Netscape just got lucky by choosing the only color that wasn’t yet used. Personally I prefer user interfaces whose designs are conscientiously based on peer reviewed published scientific research and sound scientific theories like Fitt's Law (which inspired pie menus), rather than blind luck and cargo-cult cloning of shallow surface features, and I hope that more commercial companies look to, credit, and support academic research and history for inspiration of their designs, instead of just hoping to get lucky. We certainly appreciate and acknowledge all the generous support that companies like Apple, Sun, NCR, Elographics, Microtouch, and other institutions like Smithsonian Museums and the Library of Congress gave us at HCIL. I wish more companies, investors, and government organizations strategically supported the academic research and open source software development they so wisely and successfully exploit. https://hcil.umd.edu/getting-value/ https://hcil.umd.edu/getting-value/ >There are many ways for companies, institutions, and non-profits to engage with HCI at UMD and many reasons for doing so, including sharing real-world challenges and perspectives with our talented students and getting fresh perspectives on your design challenges. Below is an overview of opportunities for your consideration. [...] https://en.wikipedia.org/wiki/Fitts%27s_law https://en.wikipedia.org/wiki/Fitts%27s_law >Fitts's law (often cited as Fitts' law) is a predictive model of human movement primarily used in human–computer interaction and ergonomics. This scientific law predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. Fitts's law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer monitor using a pointing device. https://en.wikipedia.org/wiki/Pie_menu#Comparison_with_other_interaction_techniques https://en.wikipedia.org/wiki/Pie_menu#Comparison_with_other... >Comparison with other interaction techniques: Pie menus are faster and more reliable to select from than linear menus, because selection depends on direction instead of distance. The circular menu slices are large in size and near the pointer for fast interaction (see Fitts's law). Experienced users use muscle memory without looking at the menu while selecting from it. Nested pie menus can efficiently offer many options, and some pie menus can pop up linear menus, and combine linear and radial items in the same menu. Pie menus just like any popup menu are shown only when requested, resulting in less visual distraction and cognitive load than toolbars and menu bars that are always shown. https://elists.isoc.org/pipermail/internet-history/2020-April/005956.html https://elists.isoc.org/pipermail/internet-history/2020-Apri... >My students conducted more than a dozen experiments (unpublished) on different ways of highlighting and selection using current screens, e.g. green screens only permitted, bold, underscore, blinking, and I think italic(???). When we had a color screen we tried different color highlighted links. While red made the links easier to spot, user comprehension and recollection of the content declined. We chose the light blue, which Tim adopted. >His systems with embedded menus (or hot spots), where a significant user interface improvement over early systems such as Gopher. But Tim told me at the time that he was influenced by our design as he saw it in the Hypertext on Hypertext project that we used Hyperties to build for the July 1988 CACM that held the articles from the July 1987 Hypertext conference at the University of North Carolina. The ACM sold 4000 copies of our Hypertext on Hypertext disks. http://www.cs.umd.edu/projects/hcil/touchscreens/ http://www.cs.umd.edu/projects/hcil/touchscreens/ >Between 1988 and 1993 Apple was a sponsor of the HCIL lab, Steve Jobs visited in person in 1988, and Ben Shneiderman was a consultant for Apple at several occasions. Demos were also shown to our lab’s visitors, and videos shown during invited lectures at conferences or during industry visits (see Ben Shneiderman’s resume for a partial list) [...] >During 1989–1991, we worked on a home automation system and explored several direct manipulation designs (e.g. clocks and calendars to schedule devices to go on and off, ON-OFF switches with buttons or sliders) . A playful fingerpainting exploration tool and toy called Playpen was developed. Finally we worked with National Cash Register (NCR) to explore how touchscreens might be used to replace keyboards when store cashiers needed to enter a little bit of data about shopppers (such as phone numbers or addresses). We stopped doing research on touchscreens as successful applications found their ways in museums or cash registers. Pen interfaces, made popular by the Palm Pilots, continued the work as they afforded a similar sense of “real” direct manipulation. Eventually touchcreens came back as the input device of choice of mobile devices, especially after the launch of the iPhone is 2007. [...] >High-Precision touchscreen: the next step was to try to stabilize the touchscreen so that the cursor would stay put when the finger didn’t move. This was accomplished with a clever time-dependant averaging of the positions returned by the device. Now, individual pixels could be selected (in the 480x350 high resolution screen of the time). An experiment showed that there was significant difference in selection times and error rates between mouse and touchscreen for targets down to about 1mm2, when using a lift-off strategy with a stabilized touchcreen. Companies such as Elographics and Microtouch, with whom we had good relations, integrated stabilization techniques into the drivers of their touchscreens. From then on, high-precision was possible, and designers could do everything with the touchscreen that they could do with the mouse. [...]

flohofwoe 5y ago

Don't know if this is related at all, but some 80's home computers used white or yellow text on blue background because of all color combinations that was best readable with the "worst case" TV connection (coax cable) - the blue seems to have been very "analog signal" friendly.

nixpulvis 5y ago

Next question. When did Microsoft Word start using green for grammar? Does it even still do that?

2143 5y ago
I've just been hit with a big wave of nostalgia. Haven't used MS Office for over a decade, but I remember those green underlines. So if red was wrong spelling, and green was grammatical errors, then what were blue underlines used for? Or was there no blue at all?
- nixpulvis 5y ago
  I cannot recall.

bullen 5y ago

The first thing I do on a new homepage is this: a:link, a:hover, a:active, a:visited { color: #000000; }

DonHopkins 5y ago

HyperTIES Discussions from Hacker News: I’m putting this lightly edited archive of a bunch of different discussions and email about HyperTIES, all together in one place here on Medium. Please forgive the rough wall of text and redundancy, but I haven’t yet had time to distill it all down into one sentence. I will just include the email I sent to Ben Shneiderman summarizing the interesting posts and links, for now. Here goes: https://donhopkins.medium.com/hyperties-discussions-from-hacker-news-937d156f0330 https://donhopkins.medium.com/hyperties-discussions-from-hac... [...]

DonHopkins 5y ago

Multimedia and HyperText: The Internet and Beyond, by Jakob Nielsen, SunSoft (1995). https://books.google.nl/books?id=KgZXCCfP0rQC&pg=PA469&lpg=PA469&dq=%22NaviText+SAM%22&source=bl&ots=OIpk-ZClGi&sig=ACfU3U3Yj2_iAht2rueCrn-CVuWw1I8K1w&hl=en&sa=X&ved=2ahUKEwinsb6kp7D1AhUP-6QKHaKXDvMQ6AF6BAgTEAM#v=onepage&q&f=false https://books.google.nl/books?id=KgZXCCfP0rQC&pg=PA469&lpg=P... https://www.amazon.de/-/en/Jakob-Nielsen/dp/0125184085/ref=sr_1_1?crid=360LNDHJNLLLT&keywords=Multimedia+and+HyperText%3A+The+Internet+and+Beyond&qid=1642133996&sprefix=multimedia+and+hypertext+the+internet+and+beyond%2Caps%2C77&sr=8-1 https://www.amazon.de/-/en/Jakob-Nielsen/dp/0125184085/ref=s... I hadn't come across this book before, but I popped for the Kindle edition, and found an excerpt about HyperTIES. It also goes into fascinating detail about many other early hypermedia systems. Jakob Nielsen writes deep well-researched books and articles about usability and user interface design, and he gives excellent talks and keynotes! (He's aka "guru of Web page usability", "king of usability", and "usability Pope", but definitely not "usability Godfather"! ;) ) https://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consultant) https://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consu... https://www.nngroup.com/people/jakob-nielsen/ https://www.nngroup.com/people/jakob-nielsen/ His raises important points about Hyperties' design being focused on ease-of-use by museum visitors and ease-of-authoring by museum curators and historians, the simple consistent keyboard interface, configurable link colors, and the definition window at the bottom of the screen that previews descriptions of link targets in context before you even visit them (often making it not necessary to even follow a link and lose your context). And he describes the different touchscreen interfaces like the "Lift-Off" strategy that Rich Potter designed and empirically evaluated with Hyperties. Some of these ideas are useful but missing features that I wish modern web browsers would natively support (like pie menus, of course). What Jakob Nelson's book didn't mention was that the Sun NeWS research version also featured built-in and use-defined pie menus for navigation, window management, font and color selection, embedded PostScript applets with interactive widgets, scalable color PostScript pictures and animations, pop-up cut-out embedded graphical links, as well as tabbed windows in the emacs based authoring tool. >Hyperties (1983) >Hyperties was started as a research project by Ben Shneiderman [Shneiderman 1987b] at the University of Maryland around 1983. It was originally called TIES as an abbreviation for The Interactive Encyclopedia System, but since that name was trademark by somebody else, the name was changes to Hyperties to indicate the use of hypertext concepts in the system. >Since 1987 Hyperties has been available as a commercial product on standard PCs from Cognetics Corporation. Research continues at the University of Maryland, where a workstation version has been implemented on Sun workstations. >One of the interesting aspects of the commercial version of Hyperties is that it works with the plain text screen shown in Figure 3.3. It is thus suited for DOS users. Hyperties also works with the main graphics formats on PCs and PS/2s and can display color images if the screen can handle them. >The interaction techniques in Hyperties are extremely simple and allow the interface to be operated without a mouse. Some of the text on the screen is highlighted and the user can activate those anchors either by clicking on them with a mouse, touching if a touch screen is available, or simply by using the arrow keys to move the cursor until it is over the text and then hitting ENTER. Hyperties uses the arrow keys in a special manner called "jump keys," which cause the cursor to jump in a single step directly to the next active anchor in the direction of the arrow. This way of using arrow keys has been optimized for hypertext where there are normally only a few areas on the screen that the user can point to and the use of keys has been measured to be slightly faster than the mouse (see Chapter 6). Figure 3.3: https://i.imgur.com/0fooyZs.png https://i.imgur.com/0fooyZs.png >In the example in Figure 3.3, the user is activating the string "Xerox PARC," which is indicated by inverse video. In the color version of Hyperties it is possible for the user to edit a preference file to determine other types of feedback for selections such as the use of contrasting color. >Instead of taking the user directly to the destination node as almost all other hypertext systems do, Hyperties at first lets the user stay at the same navigational location and displays only a small "definition" at the bottom of the screen. This definition provides the user with a prospective view of what would happen if the link were indeed followed to its destination and it allows the user to see the information in the context of the anchor point. In many cases just seeing the definition is enough. Otherwise the user can of course choose to complete the link. >A Hyperties link points to an entire "article," which may consist of several pages. Users following the link will always be taken to the first page of the article and will have to page through it themselves. This set-up is in contrast to the KMS model, where a link always points to a single page, and to the Intermedia model where a link points to a specific text string within an article. The advantage of the Hyperties model is that authors do not need to specify destinations very precisely. They just indicate the name of the article they want to link to, and the authoring system completes the link. >The same text phrase will always point to the same article in Hyperties, which again simplifies the authoring interface but makes the system less flexible. Many applications call for having different destinations, depending on the context of perhaps on the system's model of the user's level of expertise. >Many of the design choices in Hyperties follow from the original emphasis on applications like museum information systems. These applications need a very simple reading interface without advanced facilities like overview diagrams (which cannot be supported on plain DOS machines anyway). Furthermore, the writers of the hypertexts were museum curators and historians who are mostly not very motivated for learning complex high-technology solutions, so the similarity of the Hyperties authoring facilities to traditional text processing was well suited for the initial users. Now Hyperties is being used for a much wider spectrum of applications. >The commercial version of Hyperties uses a full-screen user interface as shown in Figure 3.3, whereas the research system on the Sun uses a two-frame approach similar to that of KMS. He compares and contrasts the designs and features of many different hypertext systems. Here's a section on pointing devices that discusses the "Lift-Off" touch screen strategy developed for Hyperties, which explains the importance of performing empirical user studies, and measuring the performance of specific applications, as opposed to just guessing colors and whinging input handing strategies: >Pointing Devices >Almost all current hypertext systems are used with a mouse as the pointing device. Several human factors studies of computer interfaces in general have shown that the mouse is a good pointing device, and it has certainly seen wide use in recent years. >Ewing et al. [1986] compared the mouse with a special use of the keyboard arrow keys for activating hypertext anchors in Hyperties. This special use of the arrow keys has them jump the cursor in a single step to the hypertext anchor that is nearest to the previous cursor location in the direction indicated by the arrow key pushed by the user. It turned out that the mouse was somewhat slower than this special use of the arrow keys (3.3 min. vs. 2.8 min. for anchors that are close by and 3.5 min. vs. 3.3 min. for anchors farther away). >For some hypertext applications, such as information kiosks, the mouse is too fragile to be used. In these situations it is common to use a touch screen as the pointing device instead. Touch screens are not used in the standard protected office environment because having to raise their arms quickly becomes tiresome for users and because the touch screens are normally less precise than the mouse. >The simplest implementations of touch screens emulate the mouse and can therefore be used with any hypertext system without any need to change the software. >Touch screens can, however, be used in several different ways to activate hypertext anchors. Potter et al. [1989] tested several strategies for activating anchors in Hyperties, including the "land-on" strategy, which activates a point on the screen the moment the user touches that point (similar to a MouseDown event in mouse-driven interfaces); and the "take-off" strategy, which activates the point which the user last touched when the hand is taken off the screen (similar to MouseUp events). Users performed about the same with these two strategies but had a tendency to be slightly slower with the take-off screens. Error rates were significantly lower with the take-off strategy since users could see what they had selected before lifting their fingers. >Potter et al. also tested a touch screen strategy called "first-contact", which activates the first selectable area on the screen entered by the user's finger. If the user touches down on selectable area, the result is the same as the land-on strategy, but if the user touches down on a blank area, nothing is selected until the user's finger has moved to the first active region on the screen (similar to a combination of MouseEnter and MouseWithin events in a mouse system) There was no statistically significant difference between the first-contact and the take-off strategies in this experiment done with Hyperties, even though fairly large and significant differences had been found in an earlier experiment [Potter et al. 1988] on selection in a traditional text environment. In the earlier, non-hypertext experiment, subjects had to select targets that were two characters in width and were separated by a two character space. For such a task, the first-contact strategy gave rise to a lot more errors but was somewhat faster than the lift-off strategy where users could see what they were selecting. In Hyperties, however, the anchors are typically whole words which are far apart on the screen so users have a much smaller risk of touching something by mistake and they don't need to rely as much on the feedback. The different outcome of these two experiments shows the importance of conducting usability tests of as high a validity as possible with regard to the actual final use of whatever is being tested. For selecting hypertext anchors, the first-contact and take-off strategies performed about the same, so the take-off strategy might be chosen by a designer because it is the simplest to explain to users. But for a text editing application, one should choose the first-contact strategy. >Potter, R., Berman, M., and Shneiderman, B. (1989). An experimental evaluation of three touch screen strategies within a hypertext database. Intl. J. Human-Computer Interaction 1, 1, 41-52. >Touch screen were more usable when a take-off strategy rather than a land-on (touch-down) strategy was used for registering user selections. http://www.cs.umd.edu/hcil/trs/88-04/88-04.ps http://www.cs.umd.edu/hcil/trs/88-04/88-04.ps Here's another discussion of the lessons learned by Hyperties: >In contrast, Shneiderman [1989], in his discussion of the lessons learnt from building more than thirty hypertext structures for Hyperties, emphasized the key lesson that each project was different and had to have its information structured according to a principle that was suited for its specific domain. Shneiderman's experience also showed, however, that it is necessary to have a single managing editor to coordinate a project and to copy edit the final result. So there is certainly the potential for tension among the people whose work it will be to create future, large information bases. Just as software developers may feel frustrated by user interface standards restricting their design options, information base developers may be frustrated by having to place consistency over their individual creativity. One hopes that the unique individual needs of each project will provide enough variation to keep this problem to a minimum, but only further experience can tell. >Shneiderman, B. (1989). Reflections on authoring, editing, and managing hypertext. In Barrett, E. (Ed.): The Society of Text, MIT Press, Cambridge, MA, 115-31. >Surveys several Hyperties applications, including one about the Hubble Space Telescope implemented in a two-frame version of a Sun workstation. The chapter also contains a discussion of the authoring aids in Hyperties. A large part of the chapter is dedicated to the lessons learnt from building more than 30 hypertext structures for Hyperties. One key lesson is that each project was different and had to have its information structured according to a principle that was suited for its specific domain. Experience shows that it is necessary to have a single managing editor to coordinate a project and to copy edit the final result. https://www.cs.umd.edu/~ben/papers/Shneiderman1989Reflections.pdf https://www.cs.umd.edu/~ben/papers/Shneiderman1989Reflection... Here's a reference and description of an early hypermedia system called "gIBIS" that used color links, however it doesn't mention and I don't know which colors it used -- but according to Marc Andreesen, there are only four good ones, so you can probably guess ;) . >Conklin, J., and Begeman, M. L. (1988). gIBIS: A hypertext tool for exploratory policy discussion. ACM Trans. Office Information Systems 6, 4 (October 1988), 303-331. Also in Proc. 2nd Conf. Computer Supported Cooperative Work (Portland, OR, 26-28 September) 140-152. >Describes the gIBIS system (graphical Issue-Based Information System). gIBIS is used in the MCC Design Journal project to provide a computerized record of a software design process with special emphasis on capturing the rationale behind the design decisions through hypertext links among issues, positions and arguments. gIBIS is designed for color workstations and uses color to indicate node and link status (for a color screen shot, see [Begeman and Conklin 1988]). Preliminary empirical observations indicate that users had a greater tendency to add supporting comments than to add objecting ones. Some users complained about the danger of premature segmentation of new ideas and would have liked a proto-node" simply to record ideas before structuring them. The first half of this paper (describing the system itself but not the empirical evidence about its actual use) can also be found in [Begeman and Conklin 1988]. Unfortunately this PDF is not color, but here is the Begeman and Conklin 1988 iBIS paper: http://csis.pace.edu/~marchese/CS835/Readings/p303-conklin_gibis.pdf http://csis.pace.edu/~marchese/CS835/Readings/p303-conklin_g... Hypermedia systems covered in this book: Memex (1945), Augment/NLS (1962-1976), Xanadu (1965), Hypertext Editing System (1967) and FRESS (1968), Aspen Movie Map (1978), KMS (1983), Hyperties (1983), NoteCards (1985), Symbolics Document Examiner (1985), Intermedia (1985), Guide (1986), HyperCard (1987), The World Wide Web and Mosaic, HTML, Hyper-G and Harmony, Navitext SAM, gIBIS, Half-Dead Hypertext and the Electronic Business Card, conversions of The Manual of Medical Therapeutics and Oxford English Dictionary, and a comprehensively annotated bibliography of surveys, societies, compendium, conferences, journals and magazines, videotapes, books about the Internet, and references to classics like: Bush, V (1945) As we may think. Atlantic Monthly, July, pp. 101-108. https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/ https://www.theatlantic.com/magazine/archive/1945/07/as-we-m... https://en.wikipedia.org/wiki/As_We_May_Think https://en.wikipedia.org/wiki/As_We_May_Think Engelbart, D. C. and English, W. K. (1968). A research center for augmenting human intellect. https://www.lri.fr/~mbl/ENS/FONDIHM/2020/papers/Englebart-Augmenting62.pdf https://www.lri.fr/~mbl/ENS/FONDIHM/2020/papers/Englebart-Au... Kay, A. and Goldberg, A. (1977) Personal dynamic media. IEEE Computer 10, 3 (March) 31-41. http://augmentingcognition.com/assets/Kay1977.pdf http://augmentingcognition.com/assets/Kay1977.pdf Lippman, A. (1980). Movie-Maps: An application of the optical videodisk to computer graphics. Computer Graphics 14, 3, 32-42. https://en.wikipedia.org/wiki/Aspen_Movie_Map https://en.wikipedia.org/wiki/Aspen_Movie_Map https://dl.acm.org/doi/10.1145/965105.807465 https://dl.acm.org/doi/10.1145/965105.807465 (does anyone know a link to a pdf of this, please?) Nelson, T. (1974). Computer Lib / Dream Machines. https://en.wikipedia.org/wiki/Computer_Lib/Dream_Machines https://en.wikipedia.org/wiki/Computer_Lib/Dream_Machines http://worrydream.com/refs/Nelson-ComputerLibDreamMachines1975.pdf http://worrydream.com/refs/Nelson-ComputerLibDreamMachines19... [Also check out the other great stuff in the same directory -- thanks Bret Victor for hosting it:] http://worrydream.com/refs/ http://worrydream.com/refs/ Nelson, T.: Literary Machines. https://en.wikipedia.org/wiki/Literary_Machines https://en.wikipedia.org/wiki/Literary_Machines http://www.eastgate.com/catalog/LiteraryMachines.html http://www.eastgate.com/catalog/LiteraryMachines.html [Here's Ted Nelson talking about Jump Links:] https://www.youtube.com/watch?v=1gPM3GqjMR4 https://www.youtube.com/watch?v=1gPM3GqjMR4 Rheingold, H. (1985). Tools for Thought: The People and Ideas behind the Next Computer Revolution. https://www.rheingold.com/texts/tft/ https://www.rheingold.com/texts/tft/