Case Study 12: It's Engrish, not English

www.engrish.com

Engrish.com is a website that compiles pictures on grammatical mistakes people make around the world on their signs, CDs, even beverages…you name it.  There are two navigation systems on the home page.  One is more broad, consisting of four links, whereas the other one Is a list of “Engrish Categories.”  The make perfect sense, because it is aiming to narrow down the archive of “Engrish-worthy” material that they have on the website.  There is a hierarchy among the navigation systems because the main one is arranged in a tab-like manner, whereas the secondary links are acting as if they are on the page, accessible once you open up the file, which most likely has tabs.  These two navigation links remain throughout the website, while the only thing changing is the photos.  Everything else pretty much stays the same, and the only major change I realize is that sometimes they have long banner-like ads on top of the page, scrunching down everything else that could be seen without it.  Upon clicking a link, for the main navigation link, there is a rollover and a selected state, whereas the secondary links that are on the left-hand side of every page only has a rollover state.  Because of this, it is not always clear where you are within the architecture of the site.  Going back to the homepage is never a problem since one of the main tabs acting as a navigation link is “Home”, and remains there no matter which webpage you visit.  The site does appear to have a deep architecture, despite the fact that they put most of their photos on one page where you scroll to browse through them.  This because of the archives they have on the website.  The architecture is flat in that you can really access any page within the site, and for a website that has a lot of photos, this would be desirable, coming from the perspective of someone who likes to share the hilarious-ness of some “Engrish” material.  The hierarchy of the typography is apparently in that they use contrast, weight, size,  and alignment.  They used a lot of techniques, but I don’t necessarily think they executed it in the best possible way (or ways).  I would clean up the alignment and have it make more sense; as of current, there is an indent for the date, and slight indent for the headline, and then the story, which is not indented in at all.

The labels of the navigation links are very clearly labeled, and due to the nature of the website, the focal point of any page is a photo.  There are some times where the logo is very distracting.  It is very bright, and does not really emanate a hilarious atmosphere.  It seems more like a website a teenaged-girl would regularly visit for gossip and such rather than for humor.  The photos definitely add to the website, but there are times when I have felt some sensory overload.  I would remedy this by changing the logo of Engrish.com to something not so flashy. 

This website uses a lot of icons, but they are very conventional, such as the envelope for emailing someone the particular picture, facebook, twitter, dig, and much more.  On any given page, There are really three colors used, with different shades added to generate more variety and livelihood to the page rather than just boring, solid colors.  I am really not sure why these colors were chosen (white, blue, and red).  They sound patriotic, but the website does not look like so.  The only reasoning I could come up with was the fact that they wanted to people to formulate a lighter opinion on Engrish: Engrish didn’t want to get criticism for being too harsh or mean, and hence tried their hand at altering the market perception of their website.

The objective of this website is just to humor people and realize how people who don’t speak your native language are bound to make mistakes.  It does have a search function, which is pretty useful and accurate, going into the archived files also.  I have been visiting this website for a long time, and although this logo change is quite a surprise, I still nonetheless enjoy the content it provides and, as a frequent visitor, do not remember or have any confusions on this website.

Case Study 11: Building Suspense

www.blairwitch.com

On the home page, there are four main links, clearly labeled and logically grouped under the appropriate categories.  There is a clear hierarchy among the navigation systems; they are distinguished from each other by typographical differences.  The site was designed this way so that visitors to this website could navigate easily through the different pages.  The main navigation never disappears, no matter how far you are in a navigation link; it is always placed at the bottom of your web browser (not at the bottom of the page), and not only is there a way to go back to the home page, but there is also a link that takes you back to the previous page if you happen to enter the last level of the website.  It is clear that it is used to get further into the website since the main navigation system always stays at the bottom of your web browser (NOT the web page), no matter which way you scroll.  In the primary navigation system, once you click on one of them, it disappears, showing you only the links that you are not currently in.  This was most likely to prevent people from blind attempts to go into a section of the website that they are currently in. 

On the secondary level, the look of the links change rather than disappearing like they did on the primary level.  The purpose of not mirroring the “selected” treatment of the main links was most likely done to avoid confusion; adding another subhead would take away from the clean look of the site.  It is not entirely clear at all times about where you are within the architecture of the website.  Since there are really only four main links, with secondary links that take you to another page with a “Back to [Previous Page]” button, getting back to where you came from is pretty easy and intuitive, even though there is an absence of a breadcrumb or some sort.  If there are any tertiary links, these either open a new window or use flash to toggle between different images on the same page.

The site does not seem to have a deep architecture, seeing how there are four main links with links pages that either have a slideshow or links that open up a new window.  Some links even take you to a page that could be reached through clicking on a different combination of navigation links.  The architecture is not flat, since there are navigation systems that appear and disappear, and although even without the breadcrumb, because there are not that many pages, it is easy to get to a particular webpage from most pages.  This is not true at all times, however, and although it may not be good for usability purposes, since the website was used as a marketing tool to create suspense for the movie, I believe not being able to access any page within the site at all times is a good thing; giving the user the opportunity to easily read all information on the site at any time would decrease the suspense of what happened.

There is a sense of typographical hierarchy.  This was done through font type, size, contrast, and alignment.  There is much room for improvement in this area, though.  I would go about doing this by varying the size more.  They make good use of different fonts, but I would try to vary the contrast of the font colors.  The only contrast present on a give page, particularly the “Mythology” page, is white and red on a black background, the red text symbolizing a link to another page or a new window.  First, I would kern out the text more, while adding more color to the text rather than just having it all white; I would try to incorporate some grays to create a sense of depth to some of the elements on the page, such as the dates or the events.  I would also bring the webpage down; the headline of each webpage seems to be too close to the top of the web browser.

For the most part, the structure of the pages stay consistent as you go from one page to another, and this is to allow the user to soak up as much information as possible without thinking too hard (aka looking and formulating his/her own opinions, which is the last thing we want if we want to create suspense; we want to feed the user “opinions”).  The focal point of most pages is a photo.  This is because of its color and proximity.  Having a color photo on a black page makes it jump out, and since it is placed at the center of the page right below the headline and the sub links, it is the first thing that catches someone’s attention.  Therefore, the photos and imagery add to the design aspect of the website significantly.  I do not necessarily want to see more photos, but would like to see a feature where I could see all of the photos rather than having to click through one by one or at least be able to see how many photos I have browsed through and how many there are total.  A symbol they used a lot was the arrows to click through photos, and since it is so universal, it did not take long to understand what it did.  The function of this symbol was also clear off the bat, and with a rollover state, it was immediately obvious that it was clickable.

On a given page, black and white are the main colors used, with the content being white.  As mentioned earlier, they could definitely use different shades of black to create depth and separate different types of content from each other (such as the navigation from the content on the page).  These colors were chosen to emanate a dark existence behind the Blair Witch Project.

The objective of this site was to build suspense for the movie and create a false idea that the movie was more like a documentary.  The website does not feature an option to search for certain information.  I do find the main navigation being stationed at the bottom of the web browser to be very convenient.  If I were to design this website and had the time, one change I would make would be to approach the timeline page in a totally different manner.  I would most likely do it in flash and make it more interactive and less text-heavy.  One thing I found confusing was upon clicking on the “Filmmakers” link.  It gives a default set of photos to browse through, but is not one of the secondary links.  This may make someone think that the names of the filmmakers listed below the headline are not links, but just a way to let the user know exactly that, the names.  It would be nice to have a “General” secondary link before the names to make it clear that the names are also links.  As of now, people may browse through the photos and realize that that was all the “Filmmakers” link had to offer, when It has more to show.

Case Study 10: Girls love shoes, bags, and shopping

www.endless.com

The home page of this retail website, created by Amazon.com, that mainly sells shoes and handbags, begins with six main navigation links.  Each link leads to another navigation system that allows you to narrow your “search” of what you are shopping for.  Therefore, the groups make perfect sense.  There is a hierarchy among the navigation systems, since one appears only after you click on one of the main navigation links.  The second set of navigation links also has the headline “Narrow By,” which clearly tells the user that it is secondary to the main link.  The site was designed this way to allow a user to be able to narrow down the list of items they see on a page, which conveniently filters out those that the user would not like to see. 

The main navigation remains in the same place throughout the architecture of the site, which seems pretty complex (not flat).  Once you get into the third level of the site, which is where you actually view a specific item, the second navigation system disappears.  Instead, another set of navigation appears where you can look through all the other items.  This is a logical way of designing this site, because if you still had the opportunity to narrow your search for an item, the one you are currently looking at may not be included in the search, which raises the issue of how to go about displaying the item that was displayed before narrowing down the search…a blank image?

The main links have both a different rollover and selected state.  The second navigation system varies; the first set of secondary links have only a rollover state, but this is because as soon as you click on one of them, it brings up another list of links and creates a breadcrumb right above this list.  Therefore, a selected state is not necessary.  Others have a rollover and selected state; either way, they made sure the user will always know where they are within the architecture of the site, unless they are viewing a particular item.  However, shoppers can soon figure out where they are at by scrolling down and looking at the breadcrumbs given under the “Look for similar items by category” headline.  If not, shoppers should not be able to miss the “Continue shopping” button that takes them back to the page that populated the list of similar items.  Shoppers should also be able to return to the home page at any time by clicking on the “endless” icon strategically placed on the top left-hand corner.

I mentioned earlier that the site did not seem to be flat.  This comes along with the fact that there are links that appear and disappear, meaning you can’t access any page within the site any time you would like to.  For a website like this, where it has hundreds of items, this is a good thing, since it forces shoppers to narrow down the list of what they look at to buy.  This keeps the site from giving too much information all at once.  In general, the site does not have that many pages; there is basically the home page, the next page with the secondary links, which narrows your search down, then a page which displays the item you want to take a closer look at, and then the various “buying” pages, such as the “view shopping cart” page and the “purchase” pages which takes you through the step of actually buying items you selected.  Due to the sheer nature of the website, and there being hundreds of merchandise available for sale, there are a lot of different pages, therefore having a very deep architecture.

The hierarchy of the typography is apparent; they made good use of size, weight, contrast, alignment, and lines to separate content and make others more prominent than the others.  The way the text is arranged is very clean, and the only way to improve it would be to kern out the text for the measurements, which seems a bit scrunched together compared to the rest of the text on the page when looking at a specific item.  The labels of the navigation are very clear, seeing how they are very specific (Women’s Shoes, Men’s Shoes, Kid’s Shoes, Bags & Accessories, Sale, Designer).

The structure of the pages vary, but this is due to the fact that there are navigation systems that appear and disappear, and shoppers are very quick to get used to it, since the website itself was designed to be very interactive.  The sections of each page change throughout the website.  This was probably to make the shopper’s experience smooth and easy; as I pointed out earlier, everything was executed logically, so even this variety makes sense to shoppers.

On any given page, the focal point is usually a photo of an item.  This is because of the shape and balance.  The photo(s) offset the amount of text on a given page, and contrasts greatly from the square elements (buttons, navigation, boxes that contain information) on a given page.  The photos definitely add to the design of the site, seeing how they are the main attraction to the website, the items themselves.  I do not want to see any more photos than necessary, seeing how they have multiple (and by multiple, I mean more than just two or three) views for each item.  There are many symbols used, such as the conventional arrows and phone.  The website makes clever use of color tiles under the color family (secondary links), allowing people to narrow their search of shoes or bags by visually seeing the color, rather than by text.  To aid those who are color blind, these tiles have a rollover state where one can see a tag with the color written out.  These symbols did not take long to understand.

On any given page, there are at most, four colors used, white being the background and the color of text on the main navigation buttons.  The navigation buttons themselves are tan, with a rollover state that darkens it and a selected state that transforms them into a purple button.  Borders, lines, shaded and subtle gradient boxes are used to separate content on the page.  These colors were chosen to distance itself from Amazon.com, and to give off a more “sophisticated” vibe to the website and hence, to the merchandise offered on it.

You basically navigate through this retail website by “searching” and narrowing down what you are looking for, but there is also a search feature in which you type in to yield results rather than by clicking.  You can be pretty specific, and takes you instantly to the same page you would have been able to get to by using the navigation links.  A feature I find very useful is the ability to narrow down your search by brand.  Furthermore, the secondary navigation system also populates a list of brands you can narrow it down by.  Therefore, you are not left with trying to guess which brands will be available on this website or not; it is all given to you in a list format.  This website was created with interactivity in mind.  Therefore, there was nothing confusing about the website.  One way to improve it would be to simply offer more items.

Case Study 9: Humor me

www.dribbleglass.com

On the home page, there are 10 main links, with further links as you go deeper into the architecture of the site that are logically grouped.  There is no sense of hierarchy among the navigation systems because it is not necessary; the main navigation system disappears once you click on one of the links, taking you to another page with secondary links.  The site was designed this way because of the sheer amount of content on the website.  A breadcrumb would help, but if the secondary/tertiary links were to remain on the page as you went into the third/fourth level of the site, the links would probably take up half of the page.  For example, the “Rejected Posters” category in the “Pictures” section contains 69 links.  The main navigation moves to the bottom of the page once you leave the home page, and addition links appear that is made obvious by the blue and underlined text conventionally is used to signify a hyperlink. 

There is an absence of a breadcrumb or a selected state, since once you click on a link, it takes you to a new set of links or to a final page that displays what you were looking for.  Therefore, you do not always know where you are within the architecture of the site, which is not flat.  The links are all very specifically and accurately labeled, and there is always a link, no matter what page you are on, at the bottom of each page that takes you back to the home page.

Because of the sheer amount of content, this website has a deep architecture.  For example, http://www.dribbleglass.com/subpages/strange/pictures.htm has well a couple hundred links by itself.  There is a clear sense of typographical hierarchy, but one way to improve on the aesthetics of the text would be to not have a Times New Roman font and decrease the size of it.  Some of the techniques used to distinguish between the headline and subheads from the content were letter-case, weight, and contrast.

Pages have a consistent structure for the most part, but there are some with navigation systems that jump from one place to another.  This does not seem logical, and I believe the site was poorly designed.  Therefore, I cannot come up with a valid explanation as to why the pages were designed this way.

The focal point of most of the pages is either a picture or the title of the page.  In the case for photos, this is due to the fact that it contrasts greatly from the background of the webpage; for the title, it merely has to do with its massive size.  For pages that are largely filled with text, there is an absence of imagery/photos, and it would break up the text-heavy pages well, making the information less overwhelming.  They make minimal use of iconography, such as bullet points, and they could be easily recognizable as to what they meant.

Shades of blue, white, and black are the main colors of the website, and they are used to separate content by having blue indicate a link/button, and black representing the content.  These colors were chosen to go along well with the hundreds of links that are on a page with blue and underlined text, and to match the personality of the website, which serves the purpose of offering useless and trivial/educational facts.  There is a search function that is obscurely placed at the bottom of the website, and can search for specific phrases by using quotations.  It does not have the capacity to filter searches, like specifying the section to search for.

The one and only feature I liked was the options available on the home page.  They were links to which a lot of people would probably be most interested in.  On the other hand, I was easily confused by this site since you either had to hit the back button on the browser most of the time to go back or click on a button that served this same purpose, but was not obvious until after you clicked on it and realized what it did.  Furthermore, the navigation systems jumping in multiple places also frustrated me, although I could easily find them, since they would obviously be somewhere on the page.  I think they could improve it by keeping the navigation in one place so that people can refer back to it rather than look for the navigation before being able to maneuver among pages.  A breadcrumb or having a selected state (the latter would only work if they maintained the position of the navigation systems in the same place) would be another way to improve on the website.

Case Study 8: Website dedicated to those who are half-Korean

www.halfkorean.com

On the home page, there are six main primary links, which stay on the top of each page.  There is another set of these links that stays at the bottom of each webpage, but disappears once you go into the third level of the website.  Once you go into one of them, there are five secondary links on the right side of the page, with tertiary links on the left.  The grouping and the labeling is a little confusing, however. For example, clicking on the “Resources” link takes you to the “Features” secondary link, which will then give you four more links, one which includes “Features.

Also, not having a clear hierarchy among the three navigation systems does not help with being able to comprehend the logic of the website.  I would guess that the secondary links would be on the left side of the page, separated by a vertical bar from the rest of the page.  Each page consists of the content, and more links to the right of it.  It works the other way, however, the secondary links being on the right side of the page, not separated from the rest of the content and the tertiary links being on the left, separated from the rest of the page.

Upon going into the third level of the website, you lose the secondary links, which means that in order to go back, you either click the “Back” button in your browser or click on the main link that you were in, which can be hard to remember since there is no selected state, let alone a rollover one (the secondary and tertiary links have one, but not a selected state).  Because this is the case, the architecture of the site is far from flat.  There also is no breadcrumb, which means there will be times when you do not know where you are within the architecture of the site.  This is something the website can work on; having the user be able to know where they are at within a site is very important and can eliminate a great deal of confusion he/she may be experiencing.  The site does not seem to have a deep architecture, since once you go into the third or fourth level of the site, there is nowhere else you can go other than to go back.  The site visitor can always go back to the home page, though, wherever you are in the website.

The hierarchy of the typography is apparent, but some pages do have them muddled.  For example, in the “Stories” section under the “Resources” link, there is a list of “STORIES AND POEMS.”  Some are bolded and in caps, while others are bolded and not in all caps.  This might have to do with the fact that poems are indicated by all-caps, while stories are not.  This can be fixed easily by having two separate categories of “Stories” and “Poems” rather than grouping them together.  Some of the techniques used to make the headlines more prominent than the others were weight, letter-case, and size.

The structure of the pages stay consistent for the most part, until going into the third level, where the secondary links disappear and either the content expands into the area where the links were previously or is replaced by another navigation system.  The designer of the website kept it this way in order to maintain consistency throughout the pages in order to minimize the confusion users may experience.  There is still, in my opinion, some more cleaning up that can be done to increase the usability of the website.

The home page is really the only page with a focal point, being the photo thumbnails of those interviewed for the website since it differs in terms of color from the rest of the page.  Once you click on a main link, you see text only and no images.  It is only when you go into the third level of the site where you start seeing photos again, placed as a vertical strip down the right side of the page.  I am not sure if I would like to see more photos, since there is considerable number of them.  I think the issue is placement.  Arranging the photos to be more prominent, perhaps on top of the content, would help with making the site more aesthetically pleasing.  There are no icons/symbols used anywhere on the site.  It seems as if there is one at the bottom of the page below the second set of main links, but shows a broken image icon.

Three colors are largely used: black, blue, and white.  The content on each page has a different color; the main links are blue, the text, secondary, and tertiary links are black, and the background of the website is white.  There is also an adjustable white bar with a shadow that separates the tertiary links on the left side of the page from the rest of the content.  These colors were chosen because they are very basic colors, and the site is run and maintained by only one person, the founder.  This may explain why the site is confusing and does not seem well-organized.

The purpose of this site is to increase the online presence of a mixed-Asian heritage community.  It does not include a search feature, but I find the interviews and the list of prominent half-Asian celebrities and figures because it allows you to realize the heritage of someone you may already know.

I have already addressed a few aspects of the website that is confusing.  Another feature that is not clear is the photo gallery in the “People” section.  Upon clicking on one of the links, it only gives you the headline of the website, “HalfKorean.com Pictures,” followed by “Enjoy the pictures…,” without any pictures.  This led me to think that there were no photos.  It took a few seconds for me to realize that there was a list of names – additional links – to see a photo or two.  They could improve upon this by having a default expanded photo, with thumbnails running along the bottom of it (horizontally with arrows)  that allows users to navigate to other pictures.

Case Study 7: Selling the (Kia) Soul

This is a website that is aiming to sell the Kia Soul, an all-new compact SUV.  On the home page, there are five main links, two of which have secondary links.  The navigation systems are grouped logically, and there is a clear hierarchy among the navigation systems.  The secondary links are different in appearance from the main links.  The main links are buttons, whereas the secondary links are bullet points of which you can click on, which either changes the type of Kia Soul displayed on the page or filters the information that the main link provides.  The site was designed this way to divide the information in more manageable parts for people who may be potential buyers.  The navigation remains in the same location on every page, and made clear that it is the main way to browse the site by its placement.  It is placed on the left side of the website as a column, and the links look like a clickable button.

The navigation links have identical rollover and selected states.  The purpose of having a selected state is to let the user know where they are within the site, which brings us to the question of whether visitors to this website know where they are within the architecture of the site or not.  With a selected state and the navigation column staying in the same place, users should always be able to find out where they are at within the site and go back to the home page without any trouble.  Also, with clear labels, users should be able to find what they are looking for without having to wander around the website, at least from the main navigation level.  Once you go into a page, this is another story. 

Going to the “quick facts” or “gallery” page gives a four-by-five layout of graphics squares.  Each square gives the user a different piece of information about the Kia Soul, but the problem is, how do you know which one to go to for a certain specification?  Which one do you click on to find out how many people the Soul can seat?  I understand that the purpose of this website is for the user to explore and find out about “a new way to roll.”  This was also done so that users will go through each one of them and find out more than they ever wanted to about the SUV, but people may become frustrated when trying to go back to a certain piece of information and having to go through more than one graphics square to find out where it was.

The site does not appear to have a deep architecture, since there aren’t too many sub links.  The architecture is not flat, however.  For two of the main links, it is necessary for you to click on it before being able to access any of the filtering links.  In my opinion, this is perfectly fine, seeing how there is no need to access the filters unless you are on the page that requires the option to do so.

The hierarchy of the typography is made apparent by the use of weight.  If I were to improve it, I would perhaps vary the font size of the headline from the rest of the content.  The structure of the pages stay consistent for the most part.  The two pages with graphics squares are identical in arrangement, and the other pages are organized differently to accommodate the content being presented.  The focal point of each page is different.  For some, it is the color of the bar behind the headline, which grabs people’s attention.  For the ones with the graphics squares, because they are so intriguing and unique, it is the artwork that catches your eyes.

Since the website itself without the content uses very little color – shades of white (and light blue) – the imagery/photos is definitely a plus to the site.  I would like to see more photos, however, of the car itself from different perspectives.  This is under “gallery,” but there are some pictures that are in the “quick facts” category that should also be in the “gallery” section.  The colors are used to separate content by creating a white background behind the navigation links, and by adding a colored bar behind headlines and alternating lines of text for a list of specs.  These colors were chosen so as to not create an association with a certain color of the SUV, and also to not detract attention away from the car itself.

The only thing confusing about the site has to do with the graphics squares and not being able to know off the bat which graphics represents what time of information it will display behind the slide, as explained earlier.  They could improve this by showing the headline of what it will tell you behind the square upon rollover, or give some indication as to what the other side of the square will tell you about the Kia Soul without actually having to click on it.

Case Study 6: Mac Apps blog

This is a Mac Apps blog which, from the home page, one can see news and updates to the website in chronological order, starting with the most recent being on the top.  There are two navigation systems, the main one having four links (General, Reviews, Roundups, and How-To), and the secondary links varying in number.  The labels of the navigation are made clear by including a short description underneath them.  For example, “Roundups” have a description saying “Best of the Best,” and “How-To” is followed by the explanation “App Tips & Tricks.”  The groups make sense, and there is clearly a hierarchy among the navigation systems, seeing how rolling over the main navigation links gives a dropdown menu of the secondary links.  The site was designed this way to create a clear distinction between some overlapping links.  For example, there is a graphics link under three of the four main links.  If they were to have categorized it in another manner, browsing the website may have become confusing.  Since there is a dropdown menu, and because the main links stay in the same place throughout all the pages, the navigation does not disappear, regardless of where you are in the site.

Once you click on the main navigation links, there is no selected state, which can be a problem when you go to a secondary link such as “Graphics,” where the same sub link exists in other main navigation links.  If they were to improve on the site, adding a selected state for the main links would be something they should consider.  Adding a breadcrumb would be another, since you do not always know where you are within the architecture of the site.  There is a heading on the very top of all the content, but for something like “Graphics,” it is not clear whether you are under the Reviews, Roundups, or How-To section.  Despite this, you can always get back to the home page from any page by clicking on the logo unless you click on a link within an article that takes you to another website.  This is not so much a problem since this is a site that compiles information from different sources (aka, different websites).

The site does not appear to have a deep architecture, seeing how after going into the second level of the site, you get redirected to another site upon clicking on a link.  It is not flat, however.  This is a good thing, because having all the links that take you to another website accessible from any page would be too confusing and would lead to an overload of information.  This website was designed to break up information for users so that it would be more manageable to absorb.

The hierarchy of the typography is apparent, but I would bring down the font size quite a bit.  At the moment, it is too big, and although it was probably intended to catch people’s attention with the headline, it can definitely come down in size and make the text less overwhelming to the eyes.  Some other techniques used to make the headlines more prominent were color and weight.  Color also includes the background color of text, making it look as if it was highlighted.

The structure of the pages stays consistent, with no changes for any section.  This is to minimize the variety users will run into when they are redirected to another website, which will vary greatly.  The focal point on any page is the headline of the section you are in, due to its stunning size.  The headline of the actual article is not the focal point at all times since it is cut off.  One way to remedy this would be to decrease the real estate of the navigation bar on top, along with the search feature and the logo.  It takes up a good two inches of the website, and bringing the font sizes down would help greatly, in both the navigation links and the article itself.

Imagery/photos add a great deal to the site, but unless the font size is decreased, having more photos would mean more scrolling for the user, and a minor case of sensory overload (colorful pictures with big font sizes).  Icons are used extensively, but since they are widely-used (the magnifying glass to search and an envelope for emailing purposes), it took me little to no time to realize what they meant.  Most also had text next to it describing what it was for (mostly for those who would not be able to recognize the Twitter icon and such).

On any given page, the website is largely white, black, and blue.  The white box shows the articles/content, whereas the background of the website has shades of black.  These colors were chosen to give a blog-like feel, and the blue was minimally used to link the content of the website to Macs.

The purpose of this site is to provide information on Mac applications for Mac users, casual and/or professional.  There is a search feature, and it has the capability of returning very specific results.  I found the App Feed the most useful, which is placed on the right hand side of the website.  You do need to scroll down a bit to access these links, but it offers five Mac applications at a glance, and for people who just want to check out applications rather than read through the news and updates, this is the place to go to.  As addressed before, it is confusing when you are under a sub link that exists under other main links, like “Graphics,” and as suggested earlier, it would be a good idea to incorporate a breadcrumb on each page so that people will know exactly where they are at in the website.

Case Study 5: Portfolio website

www.jeremycowart.com

This website is a portfolio website of the photography Jeremy Cowart.  On the home page, there are six main navigation links that are broad, yet clear.  Since a secondary navigation system is not in place, the site does not have a deep architecture.  With a site that has a very flat architecture, there is no hierarchy needed.  Given that there are so many projects that he has completed, in my opinion, the site was designed this way so that visitors can see the best of each category (Music, TV/Film, Celebrity, World, Life, and Advertising) rather than several samples of each project.  If he was to include several photos for each subcategory, the website would have incorporated too many photos, making it hard for users to navigate the pages and appreciate Cowart’s work.

The six main links remain in the same place throughout the website upon leaving the home page, and are made clear that they are links by having it in a column on the left side of the site.  When you click on one of the navigation links, it allows the user to see where they are in the website by having a selected state – the text becomes white with a blue strikethrough.  The navigation system is not the only element that stays consistent; the structure of the pages does so, also.  There are no sections that change.  This is due to the fact that this is a website that does not present much information; it lets the photos speak for themselves. 

Once you leave the home page by clicking on a main link, you cannot go back unless you refresh the page.  Since you can access everything on the home page once you leave it (being only the navigation links), it is not a huge problem.  For those who would like to go back to the main page and appreciate the artistic view, however, this may be a problem and takes a few seconds to realize that there is only one way to get back to the home page – by refreshing the page.

Since this website is mainly to showcase photos, the pages are largely filled with photos rather than text.  In pages where there is the need to present information through words, such as the “About” and “Contact” pages, there is a clear hierarchy in the typography.  One way to improve the typography would be to increase the leading because the lines of text seem to sit very close to each other.  Doing so would make the presentation of the information more pleasant to the eyes.  Currently, the hierarchy of the typography is controlled only by the color, size, and weight of the text, and incorporating some small spacing elements would make the information more logical and aesthetically pleasing.

There is a great deal of consistency on this website.  To make the task of browsing photos seem less tedious/frustrating (the usability factor is low for navigating through photos, which I will address later), the structure of the pages stay consistent throughout.  The focal point of each page is the first photo, which is defaulted to be in its selected state, in color (the unselected state being smaller in size and with a black and white overlay).  This is the first item that grabs your attention on the page because of the contrast in color with the background, which is dominated by shades of black and white to separate content on the page through shaded boxes.  Since the website is not as lively in terms of its color palette, the photos definitely add to the design of the website.  These colors were chosen so as to not detract attention from the photos, which is the main attraction to the website.  I could always go for more or less photos; it all has to do with whether they will complement Cowart’s portfolio as a whole or not.

There is some iconography used in this website which gave you a vague idea of what it was, but was not too obvious.  There is one that allows the user to expand the window of the website, and one to show thumbnails of pictures, which were pretty easy to understand.  A keyboard icon sits below after the six navigation links on the left-hand side of the page.  It seems pretty clear after you find out that it gives a list of keyboard shortcuts to browse through the site.  This was not obvious off the bat, however, since keyboard shortcuts are rarely defined within a website.

The purpose of this website is to exhibit the works of photographer Jeremy Cowart and sell his artistic abilities.  There is no search feature on this website, but I find the feature of panning out to see thumbnails of photos very useful, since you can only see 3 photos at a time in the expanded view.  This can be frustrating when you don’t want to click every single time you want to see one more photo.  They could improve it by adding a double-arrow button (much like the fast forward button), which allows visitors to see the next set of three photos rather than just generating one new photo upon clicking.  They could also improve it by including thumbnails on the bottom of the expanded photos so that one does not need to go to a new page to see the thumbnails.  It would be convenient for users to see the expanded photos and the thumbnails of other photos at the same time rather than having to jump from one page to another.

Case Study 4: Univ. of Nebraska in Lincoln's school newspaper website

www.dailynebraskan.com

On the home page of the University of Nebraska newspaper’s website, there are a total of eight main links with a drop-down menu upon rolling over the links.  They are labeled clearly, and the groups make sense, but there is no distinction between the primary and secondary links.  Both types share the same font size and weight, with the identical rollover treatments.  The navigation remains in the same place, however, no matter how deep you go into the site, which makes people easily make their way back to another page without having to go back. 

The home page is always accessible also by clicking on the “Daily Nebraskan” logo on the top of the page.  There is no selected state, which would be helpful in letting people know visually where they are at in the architecture of the website, which seems pretty flat, thanks to the drop-down menu on rolling over the main links.  The architecture seems moderately deep, seeing how it is a news website.  There are a lot of pages, since there is a plethora of articles and videos.  Additional links do appear; however, as you go further into the site, which is good because the objective of a website is to break down information into smaller pieces, and if the links to all the articles were to be available on each page, the website would be a disorganized pile of information.

The hierarchy of the typography is very obvious, since they employed a variety of techniques to create a distinction between headlines and the content with the use of size, weight, color, and alignment.  The structures of the pages stay consistent as you go from one page to another.  This was done intentionally so that people can find the information they are looking for in the expected places.

The focal point of any page is the ad that is on top of the page, above the “Daily Nebraskan” logo.  This is due to the fact that most news stories are not accompanied by photos or graphics.  Therefore, the ads are the elements of a given page that stand out in color and placement, since you see the ad before the “Daily Nebraskan” logo.  Since there is a lack of photos on the site, I would like to see more of them to supplement the content on the pages, which is mostly text.  The website makes light use of icons, and seeing how they are conventional and have a word next to it to describe what It means, it did not take long for me to understand the meaning of them.

Black, red, and white are the primary colors of the website.  The colors are used in text to create a typographical hierarchy, red to indicate the navigation bar, and black as the background with a white box that contains the content.  These colors were chosen to emulate the school colors.

The purpose of this site is to provide news that would concern University of Nebraska students and to supplement the print edition of the paper.  There is a search feature that has the ability to look for very specific articles.  To search for a phrase, quotes can be used, and you can also indicate the time frame of issues in which to look into.  A feature that I find the most useful is the multimedia that is available on this website.  The articles can always be accessible in print, whereas videos cannot.

This website seems to be very simple.  It is fairly easy to understand how to navigate through pages, and with a breadcrumb, you can see at a glance where you are within the website.

Case Study 3: Website for Muse

www.muse.mu

On the home page, there are eleven main navigation links that remain in the same location.  The groups within the links are very minimal, which explains the lack of a breadcrumb, meaning there is no hierarchy present.  You get the secondary levels once you go into the main link. 

There is one problem, though.  The navigation links are on the top right-hand corner, and is animated.  This makes it difficult to click on a link.  It was only when I scrolled down to the end of the page that I realized the fact that there are unanimated links, which are much easier to click on.  It may have to do with the fact that I am in a tabbed browser (Firefox), but I have not realized the more easily accessible links on the bottom of the page until actually reviewing the website for this assignment.  The login and password fields are also on the bottom of the page, when they are typically on top where people readily see it.

The links (both on the top and the bottom of the site) have a rollover state, but only the ones on the bottom of the website have a selected state.  It does not make sense to not have a selected state for the links that are on the top right-hand corner of the site, since this is what users will see first, but it may have to do with the fact that it was not such an easy task, since it is animated. Maybe.  The links on the bottom have a rollover and selected state so that people know where they are within the site.  Another way to know is by seeing the title of the page.  Since the secondary/tertiary links are within the page, users should not run into the problem of not knowing where they are within the architecture of the site and should be able to get back to the home page at any time.  The architecture is not flat, and to get to the secondary links, you must click on the correct main link first, since there is no way to see a list of secondary links without going to the page itself.  With eleven very specific and clearly-labeled main navigation links, this is not necessarily a problem.  It would be nice to be able to see the secondary links upon rolling over the main links, but this may add clutter to the website and take away from its clean look.

The site does not have that many pages, seeing how most (if not all) of it is done in flash.  For example, once you click on the MEDIA link, you are given the option of “Audio” and “Video,” and the option to listen to songs or watch music videos.  Clicking on the “Audio” and “Video” tabs do not take you to a new page, however, but just give you a list of media links while remaining on the same page.  Probably the page with the most information would be news, seeing how it has “Latest News” and “News Archive.”  This website manages to not take you to a new page, but display a given article within the same page.  Again, this is possible due to the fact that the website is flash-based.

With only two sets of typography, there is very minimal hierarchy present.  Adding more may help, but the website makes good use of color and shading to make the difference clear.  Some other techniques that were employed to create a distinction between the headlines and the body are alignment and the placing of the text.  For example, “Video” and the list of videos along with the links to watch them are all the same.  However, “Video” is a tab, which makes it clear that it is not a part of the list of videos, and the links are blue rather than white.

Jumping from one page to another, the structure of the pages stay consistent.  The content is the only section that varies.  This is to accommodate the clean look of the pages, and to present the information in a logical manner.

If there is a picture on the page, that is the first thing one notices.  However, if the page is largely text-based, then the focal point of it is the background.  Since a lot of the boxes filled with text are transparent, and because you see the change in the background while the content loads, it captures your attention.  This adds to the design of the site because it determines the color palette of the website, largely being black, white, and blue.

Lightening the background image may help with creating a focal point on the content rather than the aesthetics of the website.  There is very little use of icons, the only ones being the conventional play, stop, skip forward/backward buttons, and volume.  Since they are widely used, it took me no time to realize what they meant.

To separate content on a page, shades of black were used to fill in the boxes in which the different contents are in.

The purpose of this site is to promote and sell Muse, the British alternative rock band.  There is an option to search the website, but does not allow you to search for phrases.  For example, when I typed in “Black Holes and Revelations,” the title to one of their albums, it returns a list of pages that include the phrase and each word independently.

I find the playing music feature the most useful, which makes sense because, to promote and sell the band, one would need to get an idea of what their music sounds like, and see if it fits their musical taste.  If there was anything confusing about the site, it would be the navigation system.  They could improve it by making the page shorter so that people notice that there is an easier way to navigate, and perhaps give the bottom navigation links a rollover state even when you are rolling over the animated links on the top right-hand corner.