CS5340 Homework 1

By Lazlo Ring

Examples of Good Interfaces:

Google:

                What made Google as popular a search engine as it is today are two things, it’s great interface design, and how it displayed its results. At the time, many search engine sites had overly complex interfaces that required you to select multiple options in order to do a simple search, and then would return a list of websites with little description of them. Google, on the other hand, had an interface almost identical to the one it has today. The design is simple, yet effective, a textbox where you enter what you are looking for, and a clearly labeled button that says search.

                After you click search, a list of sites appear, with the site names, a short description of the site or the relevant text on the site that is related to what you are searching for, and the url of the site, along with the cached option. The cached option is probably one of the most useful parts of the search results because it will let you find exactly what Google found when it was searching for your result, in highlighted text so that it is easy to see the exact part of the site that you may be interested in.

                In addition to its basic features, the advanced search screen is also clearly labeled and lets you easily apply filters or language restrictions on your search results. This allows more advanced users to have the additional control they need without overwhelming novice users.

TED: www.ted.com

                TED is a website that has video done from the “TED: Ideas worth spreading” conference, and is a good example of how an interface can have complex features, yet be easy to use at the same time.  The center of the site contains several boxes with various pictures and text of different sizes. The size of each of these boxes are related to how popular/recent the featured talks are. The largest boxes are the talks that are most commonly watched/most recent, and the smaller boxes are the talks that are older, or less popular. This allows users to easily see new and interesting talks first, while still allowing them to have easy access to older talks.

                In addition, the side bar has a list of filters you can apply to the center frame which lets you narrow which talks you want to see based on categories or tags on the talks. This interface allows users to quickly sort through a large amount of talks to find ones they might find interesting. Additionally, you can click Speakers on the top of the page to see a list of speakers who have given talks and quick links to their talks.

                The one thing I would improve upon with this site is the search feature. When you type in a term in the search box, it gives back a list of talks related to the search terms, and the link to the video, but it does not give the same visual interface that is on the main webpage. It would be a nice feature to have the visual interface as an option for searching since this would also be a nice way to sort through large amounts of data quickly.

Examples of Bad Interfaces:

Flash CS3:

                Flash CS3 is a tool made by Adobe to create flash applications or websites. Since the amount of computer knowledge a typical user of flash has may vary greatly, Adobe has tried to make an interface that can accommodate both novice and expert users. The problem with this is that they try to help novice users a bit too much and end up giving novice and expert users strange messages that confuse everyone using the program.

                Before I go into the bad points of the interface, I will say that the basic drawing tools and artistic tools are very easily accessible and allow even novice users to create complex interface elements such as interactive buttons and text fields. Additionally, the timeline is easy to manipulate, and the individual windows in the program can be attached to other windows or minimized which allows you to create a layout that works best for the individual user.

                The main problems come from CS3’s attempt to integrate ActionScript, their programming language, into the interface, and trying to allow for backwards compatibility. Depending on if you are using AS2 or AS3, one of two script windows will be displayed. The problem is if you try to open an AS2 and AS3 window at the same time, the active one is shown and the other is black out the other one, which makes it difficult to switch between the languages. A simple solution would be to allow the user to see both, but highlight the currently selected window to let the user know which one they are working on.

                The next problem comes from the debugger that is used to check that the scripts are valid. The first problem is that there is no button that allows you to check the code of your project, you can only check the currently opened script, and any outside references are ignored and assumed to be correct. To actually run the debugger, you have to try and run the movie, which then will give you error messages if there is a script problem. The worst of these errors is the following: “You cannot debug this SWF because it does not contain ActionScript”. This error is very uninformative, and you basically have to go through trial and error to find out if the problem is that the file structure of your project is wrong, or you have a typo in one of the non open script pages. In larger projects this can become a very time consuming task.

                If I were to remake some of the interface elements of CS3, I would add a simple button that compiles the project but does not run it, and elaborate on the script errors so they don’t say things like “error #2304”, but instead say sometime like “HTTP request rejected”. Also, allowing for more integration of the scripting engine into the basic interface would be nice for expert users and make managing large projects easier. By making a project view similar to the one found in Eclipse or Visual Studio, many of the management problems would go away.

Suffolk’s Transit Website : http://www.sct-bus.org/

The Suffolk’s county transit website is a site used for finding bus schedules in and around the Suffolk area. The typical operation a user might want to do is look up the time a bus is coming to a particular stop, or try and find how to get from point A to point B.

This website just happens to be a good example of a very poorly designed interface. Upon going to the website, the first page is a picture of a bus with very small text below saying “click to begin your ride”. This page has no relative information on it, and just slows down the user from getting to any information they may be looking for. After clicking this link, you are presented with a page containing a small sidebar of news, a top bar with poorly divided sections, and another small, un-descriptive text link that says “click to continue your ride”.

                The “continue your ride” link brings you to a page with two scrollbar lists, one with areas, and one with a list of all of the bus routes. If you click on an area, the second scrollbar to display buses that go through that area. If you click on one of the buses the first scrollbar changes to a list of the stops on that bus, and a third scrollbar appears that shows what buses connect to it. If that wasn’t confusing enough, two buttons appear at the bottom of the page that say PDF schedule and LIRR. The schedule button pops up a black and white bus schedule in a PDF, but the LIRR button brings up a small popup window that lists any train stops near the bus spots on that route, with no links to the LIRR site.

                The last really confusing part is if you click map, you get a page that has info on how to download Abode Acrobat (which you would have needed to see the other schedule), and a link in a block of text that links you to the map. This link will open a new window/tab, and has a map of all of Long Island, with colored lines that represent the different bus routes, but there is no legend for the colors. Additionally, you have to manually zoom into any part of the map you are looking at to find the bus you want.

                Some simple suggestions to improve this interface would be to reduce the number of uninformative pages (i.e. the main page and the download Abode page), and to keep more consistency in the interface. If a user clicks on a scrollbar, he or she doesn’t expect the other scrollbar to change, or a third one to appear. Also, if the map was subdivided into smaller areas or interactive such as the ones on the New York MTA website, users would be able to find the information they need without as much of a struggle.