Jump To Section:
| Introduction |
| Motivations |
| Layout/Design Overview |
| HCI Education |
| Website Review |
| Design/Layout Analysis |
| Legacy |
MUIseum: The
http://www.glue.umd.edu/~cohenn
Natan Cohen
Histories are as perfect as the Historian is wise,
and gifted with an eye and a soul.
--Thomas Carlyle,
The Letters and Speeches
of Oliver Cromwell. Introduction (1845)
The history of computing is young, and the history of user interface design is younger still. In the past 25 years, the modern computer has undergone a dynamic transformation. In the next 25 years, a similar transformation will occur with the user interface – the bridge between the user and machine. As user interfaces continue to be improved by designers, it is important to recognize the contributions of key individuals to this endeavor.
“MUIseum” is an online museum of user interfaces. It is a chronicle of the pioneers, components, systems and applications which comprise the field of human-computer interaction. My role in this project is primarily designing the structure of this website and contributing some content. I hope to establish various goals and guidelines as “MUIseum” continues to evolve. A brief discussion of the motivations, design choices and goals for the project follows, concluding with a review of key websites that influence the design and layout of this site.
>Early Encounters
in HCI
My first encounter with human-computer interaction (HCI) was an introductory course in HCI, offered as an upper-level class by the University of Maryland Computer Science Department. Much like other areas of study where the subject material is people, HCI is regarded as mere common sense by the scientific and technical community. However, this acceptance of contemporary user interfaces is the result of years of research into user interface design. It is easy to use Microsoft Windows and conclude that visual representation is superior to text-driven commands. It is not coincidental that direct manipulation, the visual representation of objects and actions, better accommodates the human mind. Part of my inspiration for this project stems from this common reaction to successful user interfaces. I thought it is important to recognize the scientists, engineers, entrepreneurs and visionaries who dedicate themselves to bringing novel user interfaces to the computer community.
>Introductions to
“MUIseum”
Dr. Ben Shneiderman, my professor for human-computer interaction, conceived the idea of the “MUIseum”. At the time it was a supplementary project for the graduate students in the class, who put together a website with lots of content but only modest coordination. Dr. Shneiderman, who is now my advisor, helped give the project spirit. The focus is not quantity but rather conceptual design that will be an appropriate foundation for continuing expansion. Focusing on all the content that will eventually go onto the site would not yield satisfying results in the semester timeframe that is allotted for this project. Consequently, focusing my energies on developing the “People” section of the website yields a better end-result and allows for future development by willing participants and students.
>User Interfaces:
Heroic Design
A hero is a person endowed with courage and celebrated for
his or her bold exploits. Heroics in
user interface design emerge when the goal is to empower the user. Dan Bricklin is a
hero in the business world for the development of spreadsheets capable of
dynamic query. Steve Jobs and Steve
Wozniak are heroes for simplifying computers and enabling users to accomplish
their tasks and meet their goals. The paradigms
of user interface design researched by Jakob Nielsen,
Stuart Card, Ben Shneiderman, David Canfield-Smith, Alan Newell and Don Norman
(to name a few) permeate the user interfaces and common tasks available to
enhance the productivity of the user. As
heroes of the modern computing era, it is a goal for “MUIseum” to recognize the lifetime
achievements of these user interface pioneers.
>Homepage
The homepage is likely to be the most frequently visited
page on this website. A unique visual
appearance for the homepage is important to distinguish it from the other
sections of the website. In Jakob Nielsen’s book, Homepage
Usability, he comments, “…use a slightly different visual design [for the
homepage]…This visual distinction…ensures that users can recognize their
starting point…” (Nielsen 11) As the
other sections of the website comprise the content, keeping the homepage
“clean” with minimal content is a design goal.
A link is provided to the Human-Computer Interaction Lab of the
The menu contains 5 links: one link for each major branch of the website and a link to return to the homepage for improved navigability. Nielsen suggests to, “Begin links with the information-carrying word, because users often scan through the first word or two of links to compare them.” (Nielsen 18) Each link is a keyword which represents the content a user can expect to find there. All navigational links on the homepage appear in the menu adjacent to the main body.
Michael Quade, a graphic designer, created a graphic for the homepage. Beneath the graphic is a quote that encapsulates the goal of good user interface design. Two short paragraphs follow, each answering a key question that a visitor to the website might have. Future questions will be answered in a FAQ. Below the paragraphs is a place to provide feedback and commentary on the website. The e-mail addresses for my advisor and I are provided, and a forum should be included in the future for users to discuss the site. For the benefit of visitors to the site Nielsen writes, “Show users the time that content was last updated…Clearly indicate this distinction, with a phrase such as ‘Updated <date, time>’.” (Nielsen 33) The bottom of the homepage contains the date and time of the last update to the site so users know when to expect changes.
>Profile Listings
Regardless of the type of listing chosen, the layout of the profiles is preserved. A picture of each person with their name across the top appears adjacent to a carefully chosen title. The title is the most important attribute because it gives the user an idea about each specific user-interface pioneer and his or her contributions to user interface design. Familiar faces such as Steve Jobs and Bill Gates need no introduction, but a means to accentuate pioneers like Brenda Laurel and Doug Engelbart is essential for the user’s benefit.
>Profiles
The design for the online exhibition of a user-interface pioneer took several weeks. One particular site (discussed later in detail) with a very effective and aesthetically pleasing layout helped shape the design for the profiles. The name of the person appears at the top using a graphical representation rather than basic fonts. The purpose of including a single quote was twofold – provide a means for the casual browser to benefit from skimming the profiles and give the user a feel for each pioneer’s unique outlook on user interface design. Placing the picture of each pioneer adjacent to a single paragraph constrains the allowable size for the picture and paragraph. Keeping the paragraph short and complete provides readers with enough information to learn about each specific pioneer’s work without delving into distracting details. Jonathan Lazar, in his book User-Centered Web Development, writes that, “Most users do not read all of the text on a web page. Instead, users tend to scan the content to find exactly what they are looking for.” (Lazar 161) For users who wish to scan the content, keywords are hyperlinked to provide fast and easy connectivity to information sought.
Below the paragraph and picture are two columns: additional material and key objects related to that user-interface pioneer. The additional material is a link to a biography or an interview. When applicable, links will be provided for key publications and awards.
The links in the adjacent column are key products, designs, or concepts contributed by specific pioneers. Providing off-site links to such material helps the user distinguish the content of this website from other websites. Jared Spool and his team of engineers, in their book Web Site Usability, indicate that, “Users did not realize that some links took them to other sites…Users who ended up at another site but did not realize it found themselves in a perplexing situation.” (Spool 46) To prevent this confusion, off-site links open in new browser windows to elucidate unaffiliated content.
The intended audience for this site is students and educators; however the majority of viewers will be students. “MUIseum” can enhance the teaching of human-computer interaction by offering students a portal to user interface design. “MUIseum” is accessible to those unfamiliar or very familiar with user interface design. Teachers will expeditiously find information and gain a solid foundation to seek more detail on a specific topic or person. Students will have the option of discovering new concepts in conjunction with their associated pioneers. From there, students can choose to learn more about a specific topic or opt to search different themes or time periods. With so much information on the Internet, it is imperative to blaze a trail for experienced and inexperienced users alike.
Fostering a user community for “MUIseum” is an important future
design goal. Interactive features and a
user forum are two ways to encourage users and students to become involved with
human-computer interaction. An extensive
user database with information such as location, affiliation and e-mail address
provide a way for users to communicate.
Interactive features like timelines and audio/video clips enhance the learning
experience. Online demonstrations of
programs such as Ivan Sutherland’s “Sketchpad” and Joseph Weizenbaum’s
“ELIZA” create an interactive and engaging learning experience.
Goals
The present goal is to construct 50 profiles for the “People” section, supporting alphabetical, chronological or theme-oriented listings. If time permits, I would like to build a list of the “Top 100” people in HCI or “Top 10 Men/Women in HCI”. A usability test of 10-15 users should be conducted in order to evaluate the usability of the website in terms of layout and navigation.
A future goal is to recruit other prospective volunteers to
work on the content for the remaining sections of the website. It will be important to establish guidelines
for these sections to maintain the style and overall “look and feel” of the
site. Dr. Shneiderman and I hope that “MUIseum” will
eventually become a site where people can discover and learn about the history
of user interface design. We hope that
students will find both a resource as well as an enjoyable learning experience.
>Introduction
A broad range of history websites have been chosen for this review. Some are professional websites while others are student projects. The last two sites contain some good examples of how a timeline is implemented for a museum site. A brief overview of each site is given followed by a short paragraph discussing the layout, design and content of the site. Many of the sites chosen here have been a direct influence on the design for “MUIseum”.
The
Website: http://americanhistory.si.edu
>Overview
The National Museum of American History is a member of the
Smithsonian Institution in
>Layout/Design/Content
The link for “Virtual Exhibitions” is accessible via the
homepage, and “The American Presidency:
A Glorious Burden” is one of many virtual exhibitions. The authors of this exhibition chose to use
Macromedia Flash to create a smooth, visually appealing layout for the
content. The top of each presidential
profile contains a scrolling visual list of all the
MacTutor History of Mathematics
Website: http://www-groups.dcs.st-and.ac.uk/~history
>Overview
This website was created by two professors of mathematics at
the
>Layout/Design/Content
The main page contains a few navigational links to pages like the biographical section, the topics section and a special page for mathematical shapes and curves. Each link brings the viewer to a new page containing a rather intimidating list of items to choose from. Clicking the biographical link brings up a new page with several ways to look at the entries. One can choose from a selected time period, a full alphabetical listing, a full chronological listing or a special section for female mathematicians. The biographies are displayed on a full page of HTML with a menu at the top for selecting the next/previous in either alphabetical or chronological order. The biographies are quite lengthy but well written, giving the viewer an idea of what this person contributed to mathematics along with some insight into their individual personalities. The colors used throughout the entire site are a bit awkward and not always uniform. The casual reader might not choose to read the entirety of each profile, as some span over three pages of text. The search function makes it easy to sift through all the information, and this site is invaluable for those who know what they are looking for.
Internet Pioneers
Website: http://www.ibiblio.org/pioneers
>Overview
Internet Pioneers is a site I consulted numerous times
during the initial development of “MUIseum”. It was
created by Scott Griffin, a master’s student in Journalism & Mass
Communication at the
>Layout/Design/Content
The homepage contains a sidebar with links to all ten of the
pioneers he chose for the project.
Adjacent to the menu is a short but carefully written introduction about
the people and the history behind the Internet.
Each profile contains multiple pictures and is divided into different
periods of the person’s life. The
remaining profiles are accessible at the bottom of each profile. The choice to keep the biographies short and
divided into multiple timeframes accentuates this website amongst others. References are well documented and most have
hyperlinks. The dark, uniform colors are
easy on the eyes as well as his choice of font.
Some profiles, such as Vint Cerf’s, even include links to audio interviews and
talks. Some of the profiles could use
more hyperlinks to related subject matter but I have enjoyed reading them and
keep in contact with the author.
Renaissance
Personalities
Website: http://www.yesnet.yk.ca/schools/projects/renaissance/index.html
>Overview
“Renaissance Personalities” is a website created by an 8th
grade Humanities class at a middle school in the
>Layout/Design/Content
The homepage has a total of eleven links to different professions of people during the Renaissance, including two links for the “Renaissance Man/Woman”. Each link is accompanied by a picture of “The David” which is a bit overused. Each profile was written by a pair of students and is organized into five sections: introduction, background, accomplishments, impact, and bibliography. Every profile has a picture associated with each person; a portrait, a painting, a sculpture. All the profiles are short and give the viewer a brief overview of the person’s life and their major contributions to humanity. It is unfortunate that the teacher did not keep the background images uniform, as all the backgrounds are wildly different and some detract from the content like the profile for musician, Guillaume Dufay.
The
Website: http://www.metmuseum.org
>Overview
The Metropolitan Museum of Art is a world famous art museum
in the heart of
>Layout/Design/Content
It would be naďve to describe the layout and design as perfect, but there are not too many aspects to the design that are lacking. Clicking on “The Collection” brings the viewer to an entirely new page with a sidebar containing links to art from several different cultures. The main page contains various featured highlights. The most innovative design element of this page is the four options at the top. There is a link to search the collection, a link to view new additions, a personalized gallery for members, and a sampling of the best exhibits entitled “Director’s Selection”. When the user chooses a particular culture from the sidebar, a similar page appears with the same design at the top. The choices are now search, view ten at a time (with or without text), view one at a time, or view a large sampling of highlights. The highlights view is particularly useful since it allows the user to select art that is visually appealing without sifting through reams of pages. Each piece of art is photographed and accompanied by a short paragraph description along with its time period and physical dimensions. The colors and layout of the entire website are uniform and well-designed, making this website a unique and enjoyable online museum experience.
Website: http://www.inventorsmuseum.com/museum_map.htm
>Overview
The
>Layout/Design/Content
The homepage is very simplistic with a small sidebar on the left-hand side. The “search” function is well placed and clearly visible as the first option in the menu. The remaining links are reserved for information about the owners of the site, contact information, advertisement options, and the latest updates. The designers of this site chose to place the menu for the content in the center, making it easy to see what options the user can choose from. There are fourteen links in the center with a unique sub-link feature. While this design feature stands out from other museum sites, it is fairly limited in terms of usability as only one or two sub-links can be selected. Selecting “African-American Inventors” brings up a new page with a sidebar containing a list of the available inventors. Each profile contains a picture of the inventor and about a page of text describing them. The brown and light yellow colors blend well, but the columns for the text are too thin. Removing the brown strip down the right side would widen the text and give the site a more uniform design.
The
Website: http://www.poetspath.com
>Overview
The
>Layout/Design/Content
The homepage contains a very vibrant mixture of loud colors and the design is atypical of most museum sites. There is a short introduction adjacent to a collage of graphical links that lead to indexes and featured exhibitions. Clicking on the “Links” graphic produces a new page with bright green links to other poetry sites. The main exhibition is the link to “American Poet Greats”. This site has a unique way of presenting the profiles. The author divides the poets into short two-year periods when they were submitted by the independent authors. Selecting one poet from a list brings up a page containing all the poets in the selected group. Each profile is short but contains links to related videos containing most of the profile’s content.
History of Biology
Website: http://www.ucmp.berkeley.edu/help/topic/history.html
>Overview
This is not a professional website but surprisingly appears
at the top of the list in a search engine when looking for history of biology
sites. It is part of the
>Layout/Design/Content
The main page simply presents a crude listing of the featured biologists. Each profile is written on a full page with the name of the biologist at the top and a picture beneath. This site chooses to include a designated quote for most of the profiles. The profile design is unfortunately non-uniform; some profiles are divided into sections while others are not. The choice to provide a section for biographical data and scientific thought is a good decision for the content. Most of the profiles have hyperlink trails scattered throughout the profile, and links to the main page are included uniformly at the bottom.
Website: http://www.computerhistory.org/index.page
>Overview
The
>Layout/Design/Content
The timeline is the highlight of this website. Since the history of computers is very young, the timeline is broken down into single years from 1945 to 1990. The timeline features computer components, software technology, networks and culture. Clicking on a single year will bring a full page of text and graphics sorted amongst the various timeline topics. The graphics are large and the text is adjacent to the picture, making it easy to consult the picture while reading the text. After each short descriptive paragraph, a link is provided if the viewer wishes to learn more about a particular subject. I initially envisioned a timeline for “MUIseum” broken down by decade, but perhaps a timeline broken down by a single year is more appropriate.
Toasty Tech Graphical
User Interface Timeline
Website: http://toastytech.com/guis/guitimeline.html
>Overview
This timeline is owned by Nathan Lineback of Toasty Tech, a long-time protagonist of Microsoft and Bill Gates. Despite his hatred of Microsoft, he did manage to create a very good timeline of graphical user interfaces. The timeline is broken down into segments of years that inadvertently give the viewer an idea of when most of the variety in GUI was developed.
>Layout/Design/Content
The timeline is laid out across four time periods on four
separate pages. Each year is given a
rather large block to accommodate the large illustrations of the various
GUIs. Each picture has a brief
description adjacent to the image.
Nathan provides a good template for creating timelines that have more graphics
than text. It would have been better to
move some of the short descriptions underneath the pictures, as the large
images look somewhat awkward next to one line of text.
Homepage
>Layout
The use of frames is considered poor style and is associated with usability problems. Lazar comments that, “It is important to note that frames can cause some confusion for users. Many users do not understand the concept of a frame, and therefore, may have problems printing framed documents and bookmarking framed documents.” (Lazar 210) The frames for the homepage of this website are properly labeled and used for navigational purposes. For improved usability, it is necessary to maintain the navigational links and the banner throughout the website. From any page within the site, the user is provided a means of returning to the homepage and a frame of reference to indicate that the user has not left the site. Content for this website is constrained to specified proportions (647x481 pixels) to prevent horizontal scrolling. Additionally, these specified proportions prevent the need to resize windows that may inadvertently cause text warping.
The menu is placed in the left-most frame since most users look left for navigational links. David Farkas, in Principles of Web Design, indicates that, “Vertical lists of links aligned at the left margin are more readable than lists that are centered or right aligned…Left alignment is more readable because the user’s eye more quickly and easily finds the beginning of each new line.” (Farkas 207) The navigational links remain on the left throughout the entire website.
>Design
The colors for the homepage complement each other and maintain a theme of light shades of blue and yellow. The banner is Times New Roman 14-point font and bolded to stand out from the text which is standard 12-point. The “U” and the “I” of “MUIseum” are italicized to accentuate the user interface theme of this museum. A light yellow background is applied to the text to highlight the banner. Inspired by Scott Griffin’s design for Internet Pioneers, the menu uses light blue with a gradient applied in the center, fading white to match the background of the main body. Each unvisited hyperlink is yellow and visited hyperlinks are purple. Lazar suggests that, “The color of text must have a planned contrast to the background color. A good guideline is to use dark text on a light background, or light text on a dark background.” (Lazar 159) The decision to stray from default hyperlink colors is due to the dark blue background of the menu.
Profile Listings
>Layout
Two types of listings are available: alphabetic and thematic. The default listing is alphabetic, and the first ten profiles appear on the default page. Two hyperlinks, “Next” and “Previous”, give the user access to the remaining profiles. The name of each pioneer appears above his or her picture, and the title is placed adjacent to the picture. The decision to list ten profiles on a page prevents vertical scrolling and stretching of the pictures. On the topic of download speed, Lazar writes, “When requesting any web page, the user wants it to appear in a short amount of time. The human-computer interaction research is clear on this; users want a quick response to their request.” (Lazar 154) Limiting ten profiles per page reduces the amount of download time; pictures are approximately 50K each.
>Design
The title is Times New Roman font, italicized and bolded to attract the user’s attention. Each picture is constrained to a uniform size for visual continuity. Most of the pictures are JPEG format; a JPEG takes considerably less time to download than other graphic file formats. The white background enables the default blue for hyperlinks.
Profiles
>Layout
The profiles for “MUIseum” have a consistent layout. Like the American Presidency exhibit for the National Museum of American History, the name of each pioneer is placed at the top of each page. Below the name is a carefully selected quote that represents the work, beliefs or personality of each pioneer. The remaining content for the profiles is placed in a table with constrained proportions to prevent horizontal scrolling of text. The picture of each pioneer is placed left of the text. The column beneath the picture is entitled “More About This Person” and contains links to interviews, biographies, publications and awards. The column beneath the text is called “Material Related To This Person” and contains links to major works, products, companies and other contributions to user interface design. Clustering these links in columns develops meaningful relationships between them. Ben Shneiderman, in his book Designing the User Interface, writes that, “Within a page…designers must consider carefully the sequencing, clustering, and emphasis for objects…More important items can be emphasized with large fonts, color highlights, and surrounding boxes.” (Shneiderman 576) The use of small graphics as links, like Bill Gates’ profile, places additional emphasis on links and attracts the user’s attention.
>Design
The details for the design of the profiles came after much deliberation on the overall appearance. Initial designs included more graphics with moderate Flash programming.
The idea of a vast graphical website with animated features became an early source of frustration; the possibilities were overwhelming. An initial goal established at the beginning of the project helped direct my design. The creation of a visually appealing website with well-written content does not necessitate the need for large, colorful graphics and animation. The development of a uniform, attractive style was the end-result and is implemented for the profiles.
The title contains the name, year of birth and, when applicable,
the year of death. Each title is
designed using Adobe Photoshop, and the uniform size for each title is 8 inches
by 1 inch. The font is 36pt
The quotes are designed in Photoshop to utilize the available graphics. The quotes are standard Times New Roman 18pt font, but an elongated hyphen is needed to indicate the speaker. Rather than relying on Microsoft FrontPage for special characters, Photoshop gives the designer more freedom for custom graphics. Since quotes do not have a uniform size, the height is not constrained but the width remains 8 inches.
Content is placed in a table with 678x493 pixels designated
for the size. The paragraph accompanying
each profile is 100 words or less in Times New Roman 12pt font; most users do
not wish to read an entire page of text.
The titles for each column are
The pioneers of user interface design compose a fraction of the material for this website. The “Systems” area will introduce the user to operating systems for any type of computer. An excellent timeline for the Windows operating system already exists, and additional timelines for other operating systems will establish a framework of development for the user. Detailed discussions of the various components of a user interface will populate the “Components” area of this website. Text fields, radio buttons, scrollbars, windows and checkboxes are all a part of successful user interface design. An area designated “Applications” will introduce visitors to novel user interfaces like Internet browsers, word processors, media players, graphics studios and programming languages. The development of “MUIseum” is challenging but rewarding. The human mind, augmented by computers and enabled with user interfaces, demonstrates the limitless possibilities and the exciting potential for the future.
Acknowledgements
The development of “MUIseum” is my independent study project for the Fall 2002 semester. I
thank Dr. Ben Shneiderman for the opportunity to manage this project and for
his invaluable guidance along the way. I
also thank Alex Aris, Hawren
Fang, Debbie Heisler, Eric Lee, Cihan
Tas and Nan Zou for their contributions to “MUIseum”; their work may be viewed
at http://www.cs.umd.edu/class/spring2002/cmsc434-0101/MUIseum.
References
Farkas, David K. and Farkas, Jean B. Principles of Web Design, Pearson Education, Inc., (2002).
Lazar, Jonathan. User-Centered Web Development, Jones and
Nielsen, Jakob and Tahir, Marie. Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, (2002).
Spool, Jared M., Scanlon,