Survey of Current Computer Timelines on the Web

Haw-ren Fang

Debbie Heisler

Mac/Apple Contributions: Who innovated what http://www.mackido.com/Innovation/

Though this page does not define itself as a timeline, it is definitely one as comparison to some of the timelines on computer history. It has a year by year listing and some events of innovations for the personal computer, which includes many concerning human computer interactions and user interfaces for the Macintosh and PC. It actually does a little comparison between the two as the timeline progresses.

The content is simple. Items rarely spanned more than one line when the browser was full screen. Many of the links jumped to a page which described that feature or topic in more detail. Each year was separated by a header consisting of that year. Under the year, a point by point listing of what occurred in that year.

The timeline gives us an idea of many user interfaces which should be incorporated into our, like plug and play, drag and drop, and manipulations on the desktop. Also, this site as a whole, not just this page, is a great reference on why some things turned out the way they did, especially for the Macintosh via Steve Jobs.

What this page contained in content, it lacked in presentation. Almost all the information was flat on one page—few links to more detailed information. Since all the years and the items under each year were only on one page, a lot of scrolling and searching for information needed to be done. The comments in the brackets for many items were the same color as the links, so I often confused the comments as links. At the top, the comments were color coded for meaning, but as I read through the page, this color coding was often violated. Lastly, this page was extremely opionated and Macintosh-centric, so the information needs to be taken with a grain of salt and/or some supporting information.

This page has/had potential, but it has not been updated since 8/3/1999. I would suggest going to the creator of this site and asking permission to take his information and extend them for our purposes. Though, we would still need to check to make sure the information is correct.

Graphical User Interface Timeline http://www.toastytech.com/guis/guitimeline.html/

This is a visual listing of GUI interface environments from 1973 to 2001. For each year, there is a list of GUI’s created in that year with a screen shot and a limited description, possibly including some features of the interface. Some years have additional descriptions of events that do not correspond to an image. The top level of this web site breaks down the years into 4 chunks, 1973-1984, 1985-1995, and 1996-2001. Each of these time spans is represented by a link off the main page. This is a lot better than it originally was presented, as one large page going from 1973-2001. Each page consistently contains a three links, back to GUIs, previous, and next. The years are separated by a gray bar with white numbers, which often blends in with the screen shots, especially of the earlier black and white GUIs.

This site’s time line is good because it breaks down the information into hierarchies to decrease search time. Yet, the hierarchy is shallow, so there are few clicks to get to the pertinent information. There didn’t seem to be an obvious reason for breaking down the time spans into those listed above other than each “era” contained roughly the same page size.

Though the screen shots are amazing, there is an inconsistency about clicking on the image. Sometimes the image is linked to a larger image, sometimes to a file not found error. I would have liked to have been able to click directly to a particular year on the page in stead of having to scroll down the page and search for it. Also, there is no way to get directly from the first page to the last page without going to the main page as an intermediate. It would be cool if there was a link between the different versions of an interface, so a person could see the progression and changes quickly. The descriptions are sometimes used for other information that may have nothing to do with the image next to it. The images on the left started to blend together, separating them more or with the descriptions might help. Also, it was annoying having to consciously move my eyes back and forth between the two columns.

Lastly, I felt the timeline lacking. More textual descriptions would have been wonderful. Also, some operating system GUI’s were completely ignored in the timeline that were included in other locations of the site, like Unix and Linux. A justification for what was missing and what was not included was given on the last page, but it should have been given in the main page.

Overall, don’t closely mimic this timeline. It can be used as a rough guide, but we would need to be more consistent and more conscious of how information is arranged. Ask permission to use references, information, and graphics from the whole site, not just the timeline. Though, realize there is some bias—there is a whole section on why IE 4 is evil.

Computer Chronicles: from Stone to Silicone http://library.thinkquest.org/22522/

One noticeable thing about this timeline is it hides the details under its links. The main web page describes exactly what the purpose and content of the site is. The years are sectioned into themes or eras of computers. In the main page, each era is briefly described. Also, there is a handy navigator bar on the left that stays there as you explore the site. Not only does it link to different spots in the timeline, it also links to other topics outside of the time line, such as memories and quotes.

Within each era is a listing of the years with a point by point listing of events for that year. You have to scroll down the screen to get to the year of interest. Clicking on the year only brings that year to the top of the web browser screen, which is sort of pointless when you are already there. There are few graphics of interfaces or people. And there are no links to other pages giving more detailed information. The structure is pretty flat.

The font is large and legible. And the format is calm and neat. But the layout is inconsistent. Sometimes, there is an additional timeline on the bottom of the page and sometimes it occurs at the top or not at all. Also, the name of the pages change from one time line to another. This appears to be due to some pages being revised while others are not. This site has a separate quote section for famous words said by famous people in computer science. Many of these “quotes” should have been integrated with the main time line because some of the “quotes” are actually notable or ironic events.

The overall hierarchy of the timeline should be emulated: a top level of the site describing what the purpose of the site is, discrete and understandable breakpoints in the years, and a set of links present on every page that allows the user to jump to another section in the site.

Timeline of Computer History http://www.computerhistory.org/timeline/

The first page of the timeline clearly states what this timeline covers and how the user can use it. This page also informs the user that the site will be consistent in having the same timeline at the top of each page. Not only can a user wonder around via the timeline, they can also browse based on topics, such as Computers, People & Pop Culture, and Software. When browsing by year, there is are links at the bottom of the page to the previous and next years. Unfortunately, you cannot browse based on topic and year; any link to a topic brings you to a long page of everything under that topic listed by year, and clicking on a year from there brings you to a general year information page, broken down into all possible topics. But, the timeline does stay at the top of the page like it promised in the main page.

The use of color is simple and consistent. Reading test is black on white. Links are reddish—at least on my screen. The timeline is a graphic, and the decade markers are a different color than the rest of the years, but this makes it easier to find a specific decade in the graphic.

The fonts are large and readable, for the most part. The fonts used for the menu on the left side were on the small side. The use of color with the small font made my eyes hurt a little. The links on the left side were repeated at the bottom of each page in an even smaller font.

The organizational aspect of this timeline is a good one to emulate. Keeping a consistent clickable timeline available on each page is a good idea. Also, keeping a set of links to other parts of the web page hierarchy is a good idea.

A Brief History of Computing: Subject specific/Summary Time Line http://ox.compsoc.net/~swhite/history/timelines.html

This website contains diverse historical information of computing, such as mathematical discoveries important to computing, programming languages, the internet and networking. This website provides a simple but helpful timeline interface of a brief history of computing. The first web page has several links. The first 2 are timeline links. The other links are categories such as operating systems or microprocessors. The timeline pages are described as follows:

1. Summary timeline: One is a 2-column table. Each record has year and 1 line summary. The users can click on the summary to get the brief description.

2. Subject specific timeline: The other is also a 2-column table. Instead 1 line summary, it has a brief description for each event.

The benefit for the first time line page is quick overview and less scrolls, but one more click to get the brief description. On the contrary, the second time line page contains more information in the one page but takes more scrolls. Which is better might depend on the user preferences and the tasks to be achieved.

Chronology of Personal Computers http://www.islandnet.com/~kpolsson/comphist/

As shown in the title, this web site is contains the information of the history of personal computers. There are 5 tab-like time period links near the top. All the events are categorized into these 5 periods of time. In each period of time, there is a timeline web page containing all the events during it. The tab-like time period links do eliminate the scrolls for browsing a bunch of information. This design is convenient for the users who want to browse the events during a certain period of time, or search some event and know when it happened.

Teachers Discovering Computers http://www.scsite.com/tdc/default.cfm?module=time&chap=1

This web site contains abundant information of computers. It has “TimeLine 2000” page in which there are tab-like links near the top. I am confused by the labels if these tab-like links. They are 1.36, 1.37, to 1.45. When I click on them, the labels, I know they are just for certain time periods in sequence. On the timeline of each page containing the information of certain period of time, there are several intersected line segments leading to an event or people, typically with a picture and a short description. When the user clicks on the picture, it will go to the page with detailed article.

http://www.scsite.com/tdc/default.cfm?module=terms&chap=1

In addition to timeline, the “key terms” page is really interesting and impressive. The page contains many key terms sorted alphabetically. When the user clicks on some key term, the page will pop up an animated picture with sounds. Pretty cool.

A History of Computers http://www.maxmon.com/timeline.htm

The design of this link is pretty similar to “A Brief History of Computing: Summary Time Line” with link http://ox.compsoc.net/~swhite/history/timeline-INDEX.html. The only difference in the design is that “A History of Computers” put the link on the “year” instead of “summary” for each event.

Triumph of the Nerds http://www.pbs.org/nerds/timeline/

This is a vertical timeline page. The timeline pages in table form, e.g., “A Brief History of Computing” and “A History of Computers”, can be also categorized into vertical timeline. The benefit of these pages, compared with horizontal time, is that they can easily have textual information on the right. This page, “Triumph of the Nerds” does not take this advantage. The right part of the page is almost blank. Nevertheless, it has a small picture for each event. The pictures give the users a brief idea of the content of the links.

Life on the Internet: Net Timeline http://www.pbs.org/internet/timeline/

This is a really interesting web page. It has a horizontal timeline with a screen on it. When the user clicks on the timeline, the events happened around the time the user clicked on will show on the screen. Unlike most others will jump to some other page, the timeline is always there on the same page. It is quick and convenient for a user to do multiple searches in sequence.

HyperTerrorist's Timeline of Hypertext History http://www.robotwisdom.com/web/timeline.html

This web page is pretty similar to “A Brief History of Computing”. The difference is that it divides the history into multiple ages. The disadvantage of design is that it takes too much scrolls. Besides, it is too plain to be attractive. No pictures, only black words on white background and some links. The ages are pretty just like time periods. Thus, it is better to have tab-like links for quick search.

Full Timeline http://www.warbaby.com/FG_test/Timeline.html

This web page has a table with 5 fields, Date, Computer history, Internet history, Business history, and World events, in sequence. When I first looked at the web page, the poor layout (too many blank cells) is apparent and noticeable; plus, the blank cells are distracting. It is a really long page, and the column headers only appear at the top. It takes some time to scroll to the end. What surprises me is that no links occur in the page. Besides, it has 1 row for each year but some rows contain no information, e.g., year 1999. These rows should be dropped. Apparently it has several weaknesses in design to be improved.

Timeline of Computing History http://www.computer.org/computer/timeline/

The timeline is a long horizontal strip in several 68 pages in PDF file. No links. It has pictures with short descriptions. The descriptions are in black with leading year in red. The background is light yellow (amber). This document is successful in color. Near the button of each page is the year or year period. The layout makes me feel comfortable because the pictures and texts are organized well.

Timeline of Computer History http://wwwcsif.cs.ucdavis.edu/~csclub/museum/timeline.html

This website focuses on the hardware aspect of computer interfaces. It presents several complete computer hardware systems, including monitor, keyboard, and/or CPU. The interface of this web page is simple. A label for each year with the titles of the events happened in that year following. The interface design is really poor. The whole right part of the page is blank, since the title is usually short. It is inconsistent, too. Some titles have a small picture while the others do not. Some have a link to the detailed document whereas the others do not link to a description of the system.

A Historical Timeline of Computer Graphics http://www.accad.ohio-state.edu/~waynec/history/timeline.html

The web page has its strengths and weaknesses. It is good to have quick links near the top, to have colorful background being attractive, and to have table lines to separate events by year. However, the font of the years is inconsistent, and the font of the descriptions is kind of small. The idea of “link” and “image” icons seems good, because the user can easily know where to click.

Milestones in Computer Development http://www.cis.usouthal.edu/faculty/daigle/project1/timeline.htm

First, this page contains the information that interests CS majors (interests me, at least). The interface design is simple and neat. Two columns, one is the year and the other is the summary of the event. There is a link on the year to the brief description.

CBC4Kids: History of Inventions http://www.cbc4kids.ca/general/the-lab/history-of-invention/timeline.html

This web page is successful for attracting kids. It is colorful and always has a comic picture for each invention. However, the timeline is too long. Users need to scroll horizontally to browse. It may be better to be cropped into multiple sub-timelines listed vertically in sequence to avoid scrolls.

CHM: Timeline of Computer History http://ox.compsoc.net/~swhite/history/timeline.html

The interface design is relatively sophisticated, compared with several naive ones above. It has time tags listed in sequence near the top. Users may click on the time tag. It will list the events with pictures and brief descriptions. The “next year” and “previous year” buttons near the bottom are good for searching events in close years. One feature of this web page is that it has “More on this topic” link. When clicked, it will show all the related events in different years. On this page, it is funny that there is “next topic” button but no “previous topic” near the bottom. Besides, there is a “More on this year” link for each event. When clicked, it will show all the events happened in the same year.

Summary

It is a good idea to survey the existing timeline web page in order to design a good one. We summarize the important components of a good timeline interface design based on the timelines we looked at.

1. As always, consistency is important for interface design.

2. If there are many events in the time line (say more than 20 events or several screen-fulls), we should divide it into several time periods or ages, to avoid scrolls. And make the overall structure a shallow hierarchy.

3. The top web page of the timeline should clearly state the purpose of the timeline, how things are broken down, and possibly give a brief description characterizing each time period or age.

4. If there are only titles on the timeline, users may not get the ideas of the events. If there are long descriptions on the time line, the pages may be too long and take time to get an overview. A good idea is one or few summary lines of the events on the timeline with links to detailed description.
The arrows below represent html links, but not all of them. Each box represents a page. This is just to illustrate the structure of the timeline not the formatting of the information.

5. A tab along the side containing consistent links or quick links are good for quick search and navigation of the web site. This can be done using frames in html.

6. Colors are important to make the web pages attractive. No colors makes the pages plain. But poor color design can disturb the users. We do suggest using color as indicators of topics, links, and headers and leaving text for reading as uncluttered as possible.

7. Pictures let the users get quick ideas of the interfaces and events. Animations are definitely attractive but may be painfully slow for modem users. However, neither of these things should be over used. Thumbnails in the main and general period pages are preferable to large ones. The larger ones and/or a large concentration of images could/should only occur on the detailed page. However, the large full screen-sized images could/should only be a link from these thumbnails.

8. The main web page of the site should clearly state what the site is about.