Each week we critiqued a site based on a theme. Below you will find my entries.
A quick find for our genre of Global Warming was FightGlobalWarming.com. The largest headings on the home page were Get the Facts and Get Involved but it was hard to tell who ran the site. The logo for Environmental Defense was very small and plain. On the one hand this made the message of the site come across very clearly, but all but hid whom the message was coming from.
The Environmental Defense's website uses lots of bright cheery colors to separate the different sections of the webpage. The navigation is clearly defined by an offsetting, distinguished orange. The links on the site are clearly defined by either a background change when the mouse hovers over the link or an underline and different colored text from the rest of the body. Having a successful navigation scheme is most important when designing a website because it allows the visitors to easily get to the information they are looking for.
I liked the spacing technique of FightGlobalWarming.com the best. There was clear separation from the heading, navigation, and body of the page. The non-profit organization promoted their cause and message over promoting themselves. The color scheme itself also promoted their message of a cleaner planet. Overall the site communicates well with a good design and plenty of interactive content to keep the visitors engaged.
The first thing I noticed when I came across this page was the tiled background image. It didn't interfere with reading the text on the site but it still stuck out in any black space on the page. Besides the background image there were very few other images on the page. A scanned image was used in the header and customized bullet points were used in the many lists that made up most of the page�s content. The content of the page was nothing more than a bunch of lists of links.
All of the links go to other pages inside of the site (i.e. no external links), which means this page serves as the navigation page for this guy�s entire �speed cubing� site. This type of navigation isn�t very useful because you always have to return to this particular navigation page after you are done with each internal page. This becomes very time consuming and doesn�t help the flow of the site at all. The whole page could be organized into one simple navigation menu to be placed on every page as either a sidebar or across the top. This would better organize the site and make it a lot easier to use.
I wouldn�t take any techniques from this page. It is a very good example of how not to organize a website. The design concepts are very outdated. Any student in our class could reproduce this site after only a few weeks of XHTML and CSS. The site could be improved if all of its content was condensed into a menu that could be placed on all of the sub pages. This would drastically improve the usability of the entire site.
The official site of the Punxsutawney Groundhog Club is simple and to the point. The center image of the page is the only thing that is colored when you first come to the page so it really grabs your attention. After grabbing your attention, it gives you the essential information: the organization that runs the site, the prediction from the groundhog, and a picture underneath the text encapsulating it all. This main colored image is surrounded by black and white thumbnails that serve as the links into the rest of the site.
This minimalist approach is very effective for the index page of a website. The graphical approach for navigation is unique. Just as with text links, something happens when you mouse over these thumbnails- their color is restored. Traditional text links are also included in the footer of the page for users that may not adapt to the unique graphical navigation approach. One downside about this approach is that the site is fixed in its pixel size so visitors with smaller displays will need to use a horizontal scrollbar to view the entire site and cannot take in the site as a whole because of this scrolling.
Upon following a link into the site, the design changes to be more traditional and works better for displaying more content. There is a header, body, and a sidebar of text navigation. This more traditional way of displaying a webpage is better for usability because of the familiarity of it to regular web surfers. Overall, the groundhog.org index page is a good example of what can be done with tables, which we just learned in lab. It also showcases some simple image editing techniques that we learned we could do in Adobe Photoshop.
This Anti-Valentine site has a very simple, web 2.0 look. The header is actually plain text, a repeating background, and a few instances of an image although it looks as if it were one big image. The star badge to the right with the date has the classic web 2.0 gradient, tilt, and easily readable text. The links across the top are much like the header-simple and text based. The actual body is short and to the point so it’s easy to figure out what the page is about very quickly. The rest of the page is filled with thumbnails neatly arranged in tables linked to the sending page for the e-cards.
White space is used to perfection throughout the site. The extra space makes it easy to navigate, read, and use. A problem I noticed, though, is that the white space is only so inviting and useful with a large browser window. When I resized my browser to see what would happen, the entire page crumbled and reformed to try and squish to the new dimensions. The header becomes ruined and the icon on the right floats in behind the text that forms multiple, unreadable new lines. The table of thumbnails remains four across, but there doesn’t appear to be any cell padding so the images scrunch up against each other.
When I first came across this site I loved how it looked, but with a simple resize of my browser it lost all of its appeal. The obvious fix is to implement stricter widths, heights, margins, and padding to keep everything properly aligned and spaced. The simple techniques are ones we have already covered in class and are well implemented with only minor fixes to perfect it. I would like to be able to create a repeating background image to create a nice header like this designer. Another observation that I wasn’t able to figure out was why the site’s colors looked different in Safari versus Firefox.
I found a Nintendo Wii website that serves its community with an abundance of news about all things Wii. My first impression of the site was that it was overcrowded and cramped with information. There was no wasted space, everywhere you looked was filled with a box of information. The site has a very tabular look with easy to read headings. The top header graphic is pretty cool. If the rest of the site had the sort of spacing demonstrated in the header graphic it would be much easier to read and get information from.
The thumbnail graphics found throughout the site add to the content significantly. If you can identify with one you are more likely to find what you want quicker. I was surprised at how quickly the site loaded with all of its graphics. They have all been well optimized for the web. I was surprised to see that the top header graphic was a GIF since it had some gradients and details of the Wii console in it. I would like to see the same image optimized as a PNG or JPEG.
This site does stand up to the “trunk test”. The column of links on both the right and left sides appear on every inner page so you always have optimal navigation options. The color scheme of this site works well because text is easy to read and links are easy to distinguish. I think the roll-over color should be changed on the left column navigation because the white makes it hard to read on the gray background. If I could change anything about this site it would be the spacing. All of the boxes of information are so scrunched together that it’s hard to find what you are looking for. However, this could be a daunting task because there is so much information to organize.
CBS Sportsline: NCAA Basketball
I have never liked going to sports sites such as those that cover NCAA basketball. They always seem to have too much going on. There are scores, highlights, stories, headlines, polls to vote on, and now videos to watch. On top of all this, there are tons of advertisements, links to other sports the sites usually cover, and finally a header logo for who is covering all of this. Fitting all of this content on one page is quite a challenge for designers. I always feel like I spend more time figuring out how to get to the information I want on these massive sports than I do reading or taking in that information. After all this, the trunk test doesn’t always work.
For CBS’s Sportsline website on NCAA basketball, all of the above is true. There are all kinds of content all over the place. If your team isn’t the top story, it is going to take some time to find their story. They offer a feature called “My Headlines” that would display localized headlines, making it easier to find what you want out of the chaos of information. Among it, there is a distinct three-column approach for organization. Top stories and other information that needs longest to read are placed to the left, quick read information such as scores and headlines are placed in the middle and the right side of the page is reserved for ads and video clips. Keeping the graphics separated makes it easier to take in.
These sports sites are all designed the same way. There is no originality, no distinguishing features. If you place CBS’s site alongside their biggest rival ESPN’s you won’t notice many differences. Both use the same three-column setup with their content in the exact same places. Both offer video, up to the minute score updates, fantasy games, and an army of staff riders. I suppose the big idea of designing things this way is to have every visitor can apply knowledge of using other sites to the one they are on. This keeps visitors browsing and ads displaying, thus creating revenue. It would be nice if all the big guns in sports media got together to make their sites a little easier to sift through.
I picked a flashy dynamic site called visitflorida.com this week. I liked it right away because of its large navigation section in the header of the site. It is completely done in Flash. Each button unveils many other options once it is rolled over. There is a cool interactive map that appears when you roll over the ‘destinations’ tab. It works somewhat like an image map, but has lots added functionality because of Flash such as rollover coloring and changing text.
There are two arrows at the right most part of the links. It switches the background image that is masked over when the other links are activated. There is also a series of colored boxes under the tab bar of links. When these are clicked, the entire site’s theme is changed. The pictures that you can scroll through with the right most arrows are also changed when the theme is changed. The theme sticks with you as you navigate to different parts of the site, which I personally liked. The rest of the site is pretty plain with its standard links and annoying graphical ads. If the rest of the site were as great as its navigation movie, it would be a great site overall.
The functions of the navigation are important to custom tailor the site to different types of visitors. The site can be changed on the fly to appeal to a family, newly weds, older folks, or golf enthusiasts. I bet this sort of tailoring keeps more visitors browsing the page longer. The content of the site is vast so the separation by color-coding categories of visitors makes it more personal and easier to distinguish. I would like to incorporate some sort of theme changing with my T284 site, but I’ll probably need to find a good tutorial.
When researching scientific topics such as the vernal equinox, an encyclopedia is often referenced, but on the Internet there is a free encyclopedia site collaboratively written by volunteers and reviewed by their peers known as Wikipedia.org. The idea of the site being built and maintained by its visitors makes the site’s usability salient. The design must effectively display the content clearly, but also allow new visitors to be able to easily edit that content. The remainder of this critique will focus on the Vernal Equinox entry, but much of it can be applied to any Wikipedia entry.
The first view of the site is mostly text with a large heading of the entry. There is a small Wikipedia logo in the top left hand corner. Its text is surprisingly smaller than the entry heading, but this does allow the visitor to realize the purpose of the site quicker. There are no ads anywhere on the site, which further directs the visitor’s attention to the content. The color scheme, consisting of white background, black text, and blue links, has a familiar feeling and is easy on the eyes. The graphics about the article are aligned to the far right, keeping out of the way of the text. The text entry itself is organized by a gray contents box linked to subheadings and is formatted like one would expect an encyclopedia to be only other keywords in the text are linked to other Wikipedia articles. It is very easy to find information on this site because of its simplicity of structure and spacing. The last thing I noticed were the navigation links to the far left. Those links are more focused on Wikipedia, rather than the Equinox article so I would say they have done an excellent job focusing visitors’ attention to the content first and to themselves second.
I took a quick look at how you would edit an article if you thought you could add more to it or found an error that needed to be corrected. The interface they use is very similar to any word processor that almost all computer users would be familiar using. However, there is a fair amount of ‘Wiki markup’ for formatting purposes that would be cumbersome to anyone without any markup language experience. Overall, it is fairly easy to put your two cents in.
In conclusion, the Wikipedia is an incredible resource! It presents its content clearly and even more importantly in a logical manner. The only thing I would like to see from this site is more multimedia content such as videos, but I guess that is up to the authors of the articles and at the end of the day it is still an encyclopedia where old fashioned text is the main medium. Nevertheless whether you are looking up the latest celebrity name dropped on Family Guy or brushing up on Coulomb’s law, Wikipedia can help you out.
Finding interesting sites about our topic this week was rather difficult. Most of the search results I got were for Wikipedia (last week’s journal entry) and the rest weren’t cool sites at all. Alas, I chose a simplistic, grayscale, report-styled GooglePage.
Since it is a GooglePage, it is hard to tell whether the site’s design is a template of some sort or if the author of the page came up with this layout; either way, it is very boring. The page’s background is gray. The text is gray. The text background is gray. The heading and title are both gray. Even the pictures are mostly gray, and wouldn’t you know, the Google ads that run down the right side of the page are gray, too! All of this gray didn’t make me want to learn anything about the Boeing X-43, but rather my attention was drawn to the “Get Firefox” button above the Google ads on the right side because of it’s white and orange coloring that contrasted with all of the gray. It was hard enough to find information about this hypersonic aircraft without being distracted by an ad I have come across hundreds, if not thousands, of times.
Like I’ve said, this site isn’t very impressive at all from a design standpoint. It delivers its information much like you would in a middle-school report- 5 paragraphs and a picture to match each. This brief, to-the-point style did seem fitting for the page’s title “Quick Aviation Links”, so the site did succeed there. If the color palette for this site was altered to offer more contrast, I think it would be much more efficient in delivering information even quicker with more meaning. All of the shades of gray worked together, but items on the site that were white, orange, blue, and even black stuck out more.
In future designs for myself, I will make sure not to get too “matchy” and offer some contrast so that my site doesn’t turn into a cloudy day. Color scheme generators are available everywhere online for free. Too bad this author hasn’t considered one.
My first impression when I came across t his page was, “I must be in the right place.” The faded newspaper background, an image of a typewriter, and a black and white headshot made me feel like I was here to learn about a writer. The rest of the site was also very aesthetically pleasing. There is no guess work required anywhere from a usability standpoint.
The links have no mouse-over effects, which I didn’t like at first, but since I knew they were links before I even put my mouse over them, it works. The top row of links is outlined in a border that sets them apart and since the link names are very common ones it was very apparent what was going on. The links on the side were on a different colored background and underlined so they, too, stuck out. The conventional underlining of these links made it clear that they were links but it was unclear as to what they were links to. This designer’s choice to not use a mouse-over, roll-over, hover, etc effect on their links was definitely a risk since some sort of action has become so commonplace on web pages. Taking advantage of other common practices such as underlines and vocabulary allows it all to work without confusion.
The rest of the site is very simple – a huge, long dump of text in the body. The side links skip down the page to the different writing samples so as to keep it so that you only have to visit one page for everything about a certain author. While this seems convenient for some, it could intimidate others. A quick print preview shows that it would take 15 pages to print this all out. Each link destination within the page is accompanied by a link back to the top of the page which is a crucial feature. I’m not a big reader to begin with so I wouldn’t be sticking around to skim this short novel. One last observation, the top left corner of the body container is a right angle while every other corner on the page is rounded, including the border around Ginsberg’s headshot. It’s small and probably unnoticed by most, but odd nonetheless.
