Post #4 – Breadcrumbs in web usability

The article I found most informative on breadcrumbs in web usability is from Smashing Magazine. The article is a couple of years old but still very relevant to us today. The article is titled Breadcrumbs in Web Design: Examples and Best Practices by Jacob Gube. The article starts off my explaining exactly what breadcrumbs are to avoid any confusion with trying to use them. Jacob explains that there are three different types of breadcrumbs and when you should use them. Location-based is used to represent the website’s hierarchy, Attribute-based display the attributes of a particular page, and Path-based  shows steps the users taken to arrive at a particular page.

Another important section was the benefits of using breadcrumbs:

• Convenient for users
• Reduces clicks or actions to return to higher-level pages
• Doesn’t usually hog screen space
• Doesn’t usually hog screen space

Jacob also states that,  like everything in design, there are wrong ways of using breadcrumbs. Some sites have been known
to use breadcrumbs when they don’t actually need to. The breadcrumbs become repeating links of the primary navigation. Another mistake is using breadcrumbs solely as the primary navigation. This can sometimes become very confusing if the navigation is lost somewhere in the body of the website and not in one consistent location. The last mistake is when a website uses breadcrumbs on a page that has multiple categories. This results in difficultly classifying a neat structured category.

The website that I decided to review is ebay.com because of its simple usability. This is a website that use pretty often and noticed after reading chapter 7, that eBay uses almost all of the elements of usability list in the chapter. They have a simple four link primary navigation with drop down menus for each. The design is plain with text only separated by thin vertical lines.

Ebay also uses breadcrumbs pretty loosely. They only appear if you start your search through the site search menus. Design is simply again with a magenta color for visited and a bold black for current page location.

Also text links are everywhere on the home page. There are links such as buyer protection, news, sign in icons, and different advertisements.

Ebay has two different site search drop down menus. This could be a little confusing I suppose however they are very different in style and in content. The left side menu drops out to the right with categories to get you started, and the right side menu is a standard drop down of all the content in alphabetical order.

Submission forms are not exactly used in the standard use of writing a question to the company. However the new register form is probably the closest to this subject of usability.

Ebay also has a simple informative way of let you know when you come to an error from misspelling or something of that nature. If you are close to your possible search it will ask you “did you mean…” However if your search is so far out there than an error message will appear informing you how to search properly.

Post #3 – Gibson vs. Fender

Gibson and Fender have been two of the most competitive guitar brands
in the history of rock ‘n’ roll.

Starting with Gibson, after close review of their website I found that the
overall organization of the Homepage was pretty good. The most important
thing on the page is in the feature section at the top under the navigation bar.
The navigation bar in itself is pretty clean and simple with its regular san serif
typeface on modern grey buttons The homepage also has no background,
just content and images on a white background which really lightens up the
page bringing emphasis to the color images. However the homepage does not
hint to the viewer that there is more underneath the fold. Also it seems that the
name Gibson itself as a brand mark is not very large. This might be due to the
fact that the name is already one of the biggest in the industry, and this place-
ment represents some sense of humility from the company.

Moving a level deeper into the products tag of Gibson, they use a basic 4 column grid to display their different categories products. The top of the page still has the large feature of their next line of guitars, and the use of the white background is still consistent with the homepage. The site overall has no other textures, graphics, or design elements that are part of
the grid itself.

As for Fender, they use a very similar look and feel however they have a darker gray header and footer that stand out against the featured image. They also seem to use white space a little bit more effectively than the Gibson homepage. The typeface used in the fender site is a lighter style of a san serif which makes the overall content pretty dense and yet fitting overall. The brand mark in the header is slightly bigger than the navigation tags and a little more effective for hierarchy. I also like the fact that fender shows the user there is more information beneath the fold.

If you navigate deeper into Fenders product page they seem to have set the layout of product category’s into a 3 column grid with bigger images per section. Unlike fender they do not have a feature section at the top of the page, but this allowed them more real estate to design with the bigger images. They also have the footer all of their pages allowing more navigation to get around from the bottom of each page. The outside margins also balance the content area well by not bringing the information to the sides of the page.

Post #2- Typography and the web

Article #1 is titled “On Web Typography” by Jason Santa Maria.
This is an article written in November of 2009 talking about the
release of css3 @face-time. I guess this was about the time that
it was starting to be talking about and what exactly the new
software was going to do it was going to do. Jason talks about
new idea being great in theory but also very bad for web designers
world-wide. Web Designers in the past have always had a limited
amount of web safe typefaces that were able to be used as defaults
for all browsers. Now being able to embed type faces in your css
you basically have no boundaries as to what you can design with
typographically. The rest of the article Jason informs the reader
about typography and stresses that with this “Brave New World”
opening up for us we need to be even stronger in the realm of
type than ever before.

http://www.alistapart.com/articles/on-web-typography/

My second article is title “A basic look at typography in web design” by Shannon Noack. The article was written in April of 2010 and is a basic guideline/history of web design from the beginning and where it going now. She touches on taking control of your fonts in css and font replacement settings like we learned in class also.  Shannon says that “Current CSS3 specs allow you to choose from any licensed OpenType or TrueType font at your disposal.” Also @font-face is not the only way to embed your fonts into css. Shannon says that other softwares such as Cufon and sIFR are good solution as well. The end of the article is screenshots of many great examples of good type in web.

http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/

Article #3 is a short overview of css3 embedding @font-face from the website ZEN elements. The author is unknown however he explains that @font-face does not only speak css3 but that it was css2 and appeared for the first time in css 2.1. He explains exactly how to use it and also and the several different font formats that it can render as. They are  “truetype” (ttf), “opentype” (otf), “embedded-opentype” (eot) and “scalable-vector-graphic” (svg,svgz). Also effects like text shadows, gradients and opacity’s can be done as well.

http://www.zenelements.com/blog/css3-embed-font-face/

This is an example of a clean well design website. Blue Pixel is a set up in a basic four column grid with the use of interesting imagery with small amounts of content. This website uses two different san serif typefaces that work very well together. Also the limited amount of color with the neutral grays and blues make for a very clean tone.

Another good example of an interesting website was this on for Information Highway. I feel that this is a much more unique website with its use of typography and unusual layout. The heading of the site is vertical on the left side in contrast with the 3 other bold important elements on the page, the brandmark, the home link and the hire me link at the bottom of the page. The color palette is warm with a good use of color and texture that only adds its good use of type.

Type setting for print is much different from web in the fact that type faces for print are created to be used in small sizes of body copy without have thick parts of the letters peppering the page. As for the overall layout of information, the goal in print is to keep the reader relaxed because they will most likely be retaining the information for quite some time. The web however, is all about fast readings. Viewer take bits of information at a time while scanning the pages for something particular. Your goal in web typesetting is to tease them with the information and keep them navigating through the site. I believe the @font-face software has opened up great possibilities for us designers to have more of the creative freedom that is available to us in print. If trained to use these new tools appropriately designing for web can only become more efficient.

 

Post #1-useful website

A useful website that I myself visit almost daily is monex. It is a brokerage site dealing in precious metals that offers live pricing on gold, silver, platinum and palladium. Not to long ago a friend got me into the last value of gold and silver here in the US and I began collecting all of the gold and silver I could for investment.

Starting with the home page of this site body copy above the fold  has some key subtitles of news in the stock exchange, product a, how to buy, and why invest in precious metals. The sidebar offers advertisements, a video of two professionals talking about the rising value of precious metals and a chart of the live prices over the past year. Excluding the home page this site contains 7 other pages with most of them having a drop down menu with each tab for more precise navigation. These tabs include About Monex, Our Products, Live Prices, Inside Info, Special Offers, Resources, and a Contact Us.

As for the over all design of this website it is not so good. Starting with the header, the brand mark is rather small in size compared to the text of the information on the header. It is very crowded with more information than needed for the header of this site. The featured area and the body content are out of alignment with each other because of an image in the top right corner and the video on the sidebar to the top right. I do not believe that a solid grid was used on this site and this site was probably built by a technician or a non design personnel. The colors use are also a little distracting, the header is gold on black with white type and the rest of the site is white  with black columns of type that have light blue links throughout the content. The footer is also a black bar with white text in the middle asking you to call.

However unpleasing this website is I believe the targeted audience of stock brokers, investors and collectors don’t really stay on the site very long. I myself can deal with the lack of design because it takes me 10 seconds to check the live pricing of gold and silver and then I’m moving on. Great information and good resource for precious metals.

Hello world!

Welcome to WordPress.com. After you read this, you should delete and write your own post, with a new title above. Or hit Add New on the left (of the admin dashboard) to start a fresh post.

Here are some suggestions for your first post.

1. You can find new ideas for what to blog about by reading the Daily Post.
2. Add PressThis to your browser. It creates a new blog post for you about any interesting  page you read on the web.
3. Make some changes to this page, and then hit preview on the right. You can always preview any post or edit it before you share it to the world.