Introduction to Web Development

N Street Village Site

This is posted entirely too late as well, but I wanted to go ahead and point out some things I liked about this site anyways.

I love the quick links at the top. That way people who have less patience and are computer illiterate can easily get to where they want to go. I guess this is more dealing with the residents, which is similar to the problems we are facing with the 2 different audiences and how to cater to both.

I also like the announcement for the newsletter on the side - giving you a space to easily access them. I think this is a part we will utilize in the Oak Creek site.

Having news and events on the homepage is also great, but I think there is too much writing on N Street's homepage. I think we should just list the news and events with links to more information.

I like the nav on the side with the drop downs as well. The colors are also easy on my eyes, but I don't know how the dark blue on light blue will work for others.

I suspect this is posted entirely too late...

http://www.ae.utexas.edu/%7Efrancejg/index.htm

At first look at this site, the colors just clash. It's a very loud and blaring site. The two main focuses of the site is the large print of Paradigm and a large logo of Paradigm. I think it's unnecessary to have 2 equally enormous indications of the name of the project so close to each other. The summary of the project is lost under the large Paradigm. Most of the other pages don't have much in terms of content yet and it seems the content that is promised to be posted never will since the site was created in 2005. In terms of usability, I do like how the news page is on the main page unlike with the Artemis site. It lets visitors know immediately what has been updated. Other than that, I think this site needs more of a redesign than the Artemis site....

I looked at the aerospace engineering website for Colorado University. The first good thing about it is that there is no content below the fold line. It has its own small search engine to help users navigate the site if they are having trouble finding what they are looking for. Once you begin clicking on some of the links, you find that this website contains a ton of content that is well organized and easy to navigate. This would undoubtedly be a good place to go to get some ideas for our ARTEMIS website. The section that lays out the hardware that the program uses is especially informative and well laid out. There is, however, an awful lot of black text on a white background which is something that I would personally like to keep away from as much as possible when we begin to work on our projects.

http://www.thetech.org/exhibits_events/online/satellite/

The site's Navigation system is clean and easy to use. the site has a well balanced distribution of content and imagery. The site is optimized and accessible to all modern browsers and connections types.

Link: http://www.delfic3.nl/index.php

A typical format for a website as stated in class, I believe this Satellite page models that concept or layout. It contains a global & local navigation toolbar, a logo, content area, contact info, and extra features, plus, all the data fits effectively in an open window.

Roaming the website it is evident that the global and local navigation contain similar links or organization. The one difference is that some of the local navigation links breakdown into specific components. Instead of having the local navigation breakdown into components it would be more useful in the global navigation toolbar.

The data is very well organized but I believe it could be reformatted to better suite the user. Some of the images are missing captions as you scroll over the image. A caption as you scroll over the image would be helpful to know its explanation or purpose.

There are a lot of interesting features like a forum and a search engine to pilfer through the website for certain information. Nice features that enable the user to explore specifics or communication with the project creators.

Link: http://www.lihi.org/__prop_firVillage0001.html

What I really liked about the LIHI website was the straightforward accessible format that they used when they designed it. The home page is easy to navigate and really provides a user friendly way to navigate through the content. It also lets the user know exactly what the Instituition is about, which is a home page's primary concern according to Nielsen.

The design lay out is also very facilitating to the user. The use of drop down menus makes it easy to navigate through each section of the website. Very straightforward and simple.

There's not too much that would inhibit the user in this website, and if the only criticism I could think of would be the layout of the donations page. It doesn't seem to follow the same trend as the other parts of the website, due to the lack of picture and somewhat lack of organization of text.

i thought the artemis site was poorly designed in everything from style to usability.

it's not as developed as the oak creek site, much of the site was not yet designed and and the links left me at the end of the block in my navigational path.

i thought the clickthroughs of satellite images were quick and easy.

the structure of the site seems okay, but i think more links need to be built into the system and nav path.

i'd also like to see links to competitive projects and past projects.

I noticed the very fast load time for the GRACE project as well as the ease of use. The buttons are clear and load directly to the pages specified. The layout was very easly geared towards the lay-person with easy graphics and little hard technical data.

The site was great with what Nielson refers to about graphics in regards to identification of a site. The space graphics and photos of the project itself gave a clear indication of the site and contents.

The games for kids and the subsystem breakdown for those engineers working with the project gives a good breakdown of content for a large variety of audience makeup.

Content on the GRACE site is good and compact with regards to having important information accessable and up front. The content is all above-fold and clear, with links close to each other and easy to understand.

-------

The reverse side also has a reverse side

Link: http://www.rumfordgrouphomes.org/index.htm

The first important thing that I noticed when the Rumford Group Homes site quickly loaded up into my browser was the fairly large logo located up in the upper left hand corner. Like Nielsen said, I definitely knew exactly where I was and what page I had come to. The only problem that I saw was that logo was not a clickable hyperlink to the homepage as Nielsen suggested, but instead there was a home button provided in the primary navigation bar at the top of the page. The logo as well as the site layout is a constant as you navigate through the site which makes it very user friendly and simplistic. One inconsistency that occured was when I clicked on the "About Us" section, the "News" navigational link disappeared which is something that definitely needs to be fixed.
The structure and navigation of the site was fairly easy to follow, and depending on the main tab clicked, different navigational links pertaining to the subject would appear on the secondary (side) navigational bar.
The main home page appropriately answered the immediate "where am i" and "what does this site do" questions with a short introductory statement and a simple picture of a house. The slight problem though was that the introductory was a mission statement of sorts; something Nielsen warns against. Nevertheless it was easily understood what the site was for.
Finally, using Mozilla's print preview feature on several pages, I found that most of this site would print out fairly nicely.
To sum it up, this site is fairly simplistic and functional in its use, with only a few technical usability errors.

I found http://www.elderoptionsoftexas.com/index.cfm after "searching retirement homes in austin,tx" and was shown a few different options. This webisite, unlike the others, has several features that I would like to incorporate in the overall design for Oakview. For instance, the top navigation bar allows users to see what part of the site they are in as well as other options of where they might want to go. The home page of the site is pretty basic and does not have an overwhelming amount of information. The logo and statement are present on every page, creating a definite sense of consistency.

Like Nielson points out in one of his chapters, it is helpful to display some sort of image to allow users to identify with the main purpose of the site. There is a picture prominently displayed of what seems to be a daughter and her mother, allowing the viewer to understand who the site is catered towards. Also, under the navigation bar are three hypertext or "quick links" that allow a faster flow through the site.

I did not, however, think the information within the interior pages was set-up properly. In the events calender there is no visual distinction between each event because they are put on top of one another. Also, different events taking place in different parts of Texas is confusing to the user because every event is placed on the same page. I think it might be more useful to separate according to place on the events calendar page which then lead to a calendar whose sole purpose is to show which events are occuring in each retirement home.

I think the redesign for Oakview will be able to utitlize a lot of the features in this website but clean out and simplify the information within the site itself.

These are Noah's comments, I am just pasting them here.

The CMAV website screen real estate is mainly geared to content instead of navigation although I think there is too much white space on some pages and not enough on other pages. All the pages download fast onto my computer and everything looks in place except for their MS Project page which has a table that has dates spilling out of the boxes. Links have good descriptions. My biggest complaint is all the black text on white background that goes on continuosly ezpecially on the homepage. Reading it is a chore. Navigating was easy when using the navigation buttons at the top because it changed colors to let me know where I was, but I feel that they should have done the same thing for the navigation buttons on the left side. It wasn't readily apparent where I was unless I started reading the page. It was clear from the CMAV banner at top what the website was generally about. The website was fairly simple all around, although I thought it was too simple with the way that the test was structured.

http://www.colorado.edu/ASEN/SrProjects

I chose a site on the Senior Projects of the Aerospace Engineering students at the University of Colorado. The site, upon first appearance, is very plain. The creator did not take advantage of the white space. It did have a logo repeated in the top left corner of every page, which Nielson says is good, but that is very nearly the only graphic anywhere. While having many graphics will make the page load slower according to Nielson, plain black text on a white background is almost as bad visually.

When I actually got to the projects after searching through other pages for a few minutes, I realized it was pointless. First of all, a site based on the "Senior Projects" should invariably have a link to the projects on the homepage. Second, when I get to the projects, I actually want information about them. There were no links. It listed the group name and words that should have been links to project info, but there were no links. After looking around a while longer, I figured out that the site was under construction. The projects from years past had links, but the current year did not. Nielson specifically warns against releasing a partially finished site.

Even after looking at the past year's projects, I was still slightly disappointed. The information was presented with organization and while it was still black on white it got the point across. However, some parts were done with so many graphics that it took forever to load everything. They had no concept of the use of graphics, from where to put them to how many to use.

All in all, the site was a usability disaster. It tried to get the point across in the most minimal way possible but became visually boring. It was definitly designed for student use and not public, but I imagine even the students probably had a hard time with it. In general, it was as unfriendly to users as it could get.

LIHI does a good job of keeping the content and nagivation toolbar to an 80/20 ratio as discussed by Neilsen. The simplicity of the nav bar and the page also make the site look very clean and organized. The page, possibly due to the simplicity of content, also has a very efficient response time and allows for user satisfaction when downloading. Keeping it simple in the graphics and staying away from video content is a good choice. Alt tags are also used efficiently. I would suggest moving the site map to the bottom of the page as it should not be organized within the nav bar due to low usage. Link descriptions are also used effectively by staying away from "Click Here"'s and sticking to making the actual words and contact the link distinguished by a specific color. According to Nielsen the hompage should not have a home button, but I disagree with the frustration that he beleives users have from this. I believe many readers are not as frustrated with this. I also feel that the LIHI site should have their logo image linked back to the homepage as many website commonly do this and users are used to this inteeraction

Link: http://www.lihi.org/

I googled "Low Income Housing Institute"
and i came across this website. At first glance, this site looked very simple and to the point.
On the home page, the logo is nice and large, which lets you know where you are.
The sub pages has a smaller logo and the navigation is much higher, which also works well as that differentiates the home page from the sub pages.
The site has a fixed width; 735 pixels, and it would not load properly on a smaller monitor. On the home page, there is a lot of waste of space, with images and such which could have been used in a much better way. The drop down navigation menu provides a lot of useful links.
The address for this organization is listed at the bottom of the page and it saves the user the time to click through a couple of extra pages and can get the information right from the home page.
The site, nevertheless, lacked any copyright information on the home page.
Looking through the drop down menu, I noticed that a 2 line link was not displaying properly, and the text overlapped.
Their site map link was also very useful in getting to certain information as the links are simple and self-explanatory.
The site does not show what pages you have visited, as the links in the drop down menu does not change color after visiting a page. Also, if you are on a page, the link for that page is not disabled, hence not letting the user know that he or she is on a certain page.

Maanit Shah
Computer Science

As far as screen real estate goes, I feel as though they did a pretty good job of giving the main content the majority of the screen. The site navigation is mostly at the top of the page which makes it comfortably out of the user's way until he or she needs it. Also, the graphics aren't so heavy that they would take a lengthy period of time to download. They're roughly in the 30-40kb range for most of the images. When I pbservevd the print previews in Firefox, everything lined up cleanly and looked to reproduce the general look and feel of the site on paper. However, not surprisingly, IE would have cut an image in half to fit portions of it on two separate pages according to its print preview. Semantic encoding is used to specify section headings using the h2 tag. I would think that most of the traffic on the site would be coming from people closely involved with the project. Since the main intent of the site seems to be to inform people of what is going on, rather than entertain, I feel as though it does a good job of getting the information across as to what the mission of their organization is, and showcasing with minimal graphics, the results of their work.

Link: http://www.lihi.org/__prop_firVillage0001.html

My first opinion of this page was that it is well organized, simple and yet still effective. But now I will start to analyze it in Nielsen's opinion. The width of this page is commendable, I adjust the resolution on my computer screen from the highest screen resolution, to the lowest, and even at the lowest resolution, I was still not required to use side-scrolling, which is a key aspect according to Nielsen. The next topic Nielsen talks about is the the title on the home page. Nielsen states that a good title does not have to be the biggest text on the page, but should at least be in the upper-left corner of the screen. Now this website did just that, they do have their title, or more of their logo with title, up in the left hand corner and it is certainly not the biggest text on the screen, but even though Nielsen agrees and accepts this title, I belive that it would make a stronger impact for the site if the title/logo were just a bit larger. The next big topic that Nielsen discussed was the navigation of the website. Nielsen informs us that the key to the navigation is to always allow the user to know 1. Where they are, 2. Where they have been, 3. Where they can go, and also have an easy access to the home page from every inner page. So according to Nielsen, this website has exceptional navigation throughout the site because the site is easy to move around, easy to get back home from any page, and also easy to understand where each link will take you because the links themselves are broken into sections of other links that is completely user friendly. So now we know that this website is extremely acceptable in Nielsen's opinion, but here is my opinion as an everyday user. I played around with the site for like 30 minutes, asking myself what kind of question I would have if I really need the site, then checked how long it took me to find the answers within the site. The site was superb, well organized, easily accesible, and even though the colors used for the borders of the web page (which is the only complaint I had) are a little plain, blan and neutral, the web page design has a strong impact with the images they included. The images were great views of the product that the actual users would be inqiring on, and the images weren't oversized so each page loaded in a timely fasion. This is a great site to browse through, and I am sure that in my future web developement, this site will be a great reference tool.

http://aerospace.engin.umich.edu/

The website's style is both simplistic and functional, implementing many of Nielsen's style suggestions. While the site has a fixed size, the width is fairly small enough to fit most monitors. The minimal color scheme and the concise nature of the site led to fast load times.

The top part of the page has a bunch of useful links to farther up the directory tree (homepages for the university, the engineering college, or the aerospace division), as well as links for contact information and a textual site map. To the left, you can clearly see what the site is about with the Michigan and Aerospace Engineering logos - both hyperlinked for your convenience.

The body of the page is also well-thought out. The first feature that caught my attention was the font size option built into the page itself. It may be superfluous, since the user can change the general font size through the browser settings, but the feature's minimal footprint makes it an acceptable feature. The ubiquitous search box is also shown in a minimal fashion on the "welcome page."

To the left, all the different sections on the website are displayed, with their inner divisions displayed below the top banner when you hover your mouse over a section name. It also has a yellow icon on the section that you're in as well as blue text on the inner division that you're currently reading.

At the very bottom, general contact and copyright information is shown, along with a Michigan icon to take you back to the university website. The only thing missing is update information - the news box seems to be the only way of finding out if the site has been updated or not.

The only element I couldn't initially understand about the site was the huge banner on the top. It turned out to be randomly generated, using images that are supposedly related to aerospace. While some images have an obvious reference (a picture of a sign labeling the aerospace building), some other images seem to have no relevance whatsoever (skyline windows of a building, rolling hills, etc).

I also had mixed feelings about the news section. The scrolling feature makes it feel like a real news ticker, but it would be more convenient if the user could simply see all the headlines at once, since there aren't that many to begin with.

While browsing through the rest of the site, I noticed that they did a good job with presenting their information and keeping the number of images to a minimum. Only one page had a noticeable problem. In the "Wind Tunnel" subsection under "Research," there is a huge amount of white space between the end of the content and the contact information at the bottom. I can only assume that there was some more content in the past that eventually got removed, and someone forgot to reset the spacing.

I had a very easy time navigating through the site and finding what I needed. Very well-planned and user-friendly.

When the home page first appeared, it was a big blue screen, I wasn't sure why, until the flash images started appearing. It took up too much of the window. Nielson suggests the website have designated place for the organization's name, but it shouldn't have taken up so much space. There was a lot of scrolling down, and when I did, discovered it wasn't anything truly worth scrolling for. The navigational tools were smack in the middle of the window, which I found to be a bit odd. However, they were very helpful and got me where I needed to be. Whichever page I was on, there was an explicit home button for me to click on. Also, there were links to the ongoing projects under their organization, but was a different division. I found that to be helpful. The site did use framing, which Nielson suggested against, but I didn't find it a hassle. On the very bottom of the page is also a helpful Google search box for within the site and over the web. Overall, the site wasn't too visually stimulating, but it's an informational site and served its purpose.

Link:
http://www.easthillwoods.com/home/default.asp

The East Hill Woods site loaded quickly. The first item that loaded was text, which gave me a preview of what the site was about before the images and other content loaded. The home page offers two of the three features Nielsen says a home page should have. It has a directory of the site's main content areas and a summary of the most important information, but does not include a search function. The structural navigation links or buttons were easy to locate and labeled appropriately for the information they provided. Also, there is an icon that appears next to the link you are currently on. This helps the user answer the question, “Where am I?," that Nielsen brings up. Also, the user can easily answer the question, "Where Can I Go?," since the navigation bar is visible on every page. On the other hand, the question of, "Where Have I Been?," can not be answered since the links do not signify the users path by changing. Overall, I think this site is pretty easy to use since the structure is clearly laid out by the navigation bar, the home page gives you a good preview of the site, and the site loads in a short amount of time.