Usability | Blog Post #4

The most important part about building a website, is making sure that people are able to use it. That’s when usability comes into play. Things that make a website easier to use is the use of navigation, breadcrumbs, text links, site search, submission forms and error messages.

Breadcrumbs

One aspect of usability that not all websites use but when used, really maximizes the sites usability is breadcrumbs. To quote Spyrestudios in their article Best of Breadcrumbs and How They Enhance Your Website, “There are various reasons why anyone would use breadcrumbs, one of the top choices is the massive gain in usability.” There are three different things this article covers when talking about breadcrumbs; why we should use them, why we need them and the three different types of breadcrumbs. What I got from the article is that we use breadcrumbs so the user can easily know where they are within a site and can easily backtrack if they needed to. The three different types of breadcrumbs are path based, location based and attribute based. A good example of breadcrumbs would be The Glasgow Collective,the first set of breadcrumbs are in blue and show both path based and location based breadcrumbs, that show where they are in the site and the steps they look to get there. The red set of breadcrumbs would be attribute breadcrumbs because once your on that page, it shows more links you can click for more detailed information.

Converse

Converse is a large shoe company that has been around since 1908 and have had to constantly make changes to keep with with the times and I think their site really shows the development in web design and interesting usability.
converse homepage
The image above is the Converse homepage. Everything on the homepage including the images are a form of navigation. the navigation bar in the middle at the top only contains two sections, but with in each section is a drop-down menu of all the choices to choose from for shop and the two choices that drop-down for when you want to create. There is also a set of text links below the navigation menu that when you click one different image links will appear in the homepage to help you figure out where you want to go in the site. The navigation and links are very visual to help the user figure out what shoe they want to buy.
Another thing I found interesting about this site is the color wheel in the center of the text links, this is a really fun and useful feature for this site because a lot of people specifically shop for color when they shop for converse shoes, and when you choose a color, more picture links of featured items for that particular color appear in the homepage.
Overall, the level of usability is targeted at young adults who are familiar with using the internet. This website is a fun website to visit to get information on basketball, music and skateboarding as well as making shopping for shoes fun and interactive. There are many navigation tools, such as the navigation bar at the top as well as the text and picture links. Some of the only critiques I would give this site is that I didn’t really see much use of breadcrumbs that could take the user back to the previous page they were at other than the back button. Also, the converse logo is the only link that will take the user back to the original home page, and its something that has to be figured out by the user instead of them knowing where they will go before they click it.

Canon vs Nikon | Blog Post #3

When making a purchase, especially when it is something expensive like a digital camera, most people tend to do a bit of research comparing brands and products before they make their final decision. The first place most people look for quick answers, price and quality comparison is the internet. When looking for a nice quality digital camera, two competing brands come to mind: Canon and Nikon. When most people are using the internet to decide which brand and type of camera to get, it’s important that the websites for each brand are appealing and easy to use in order to help the customer make a decision. I will be critiquing the official store websites rather than the company website because that is what most people will be looking at when making a purchasing decision.

There are a few things to look at that determine a successful website; How the website is organized such as use of hierarchy, white space, containment, and use of grids. Other elements that give a website style, such as color, texture, imagery, scale, animation and variability.

Organization

Hierarchy

How information is displayed and read is very important. When comparing Canon and Nikon‘s website I notice some similarity in organization with hierarchy. When loading both pages, I see the logo/name of the brand first in the upper left hand corner and then immediately look at the large picture advertisement above the fold, Nikon’s picture is much larger taking up the entire space above the fold. Both sites show that there is more to look at below the fold so the viewer will scroll down to see what else is on the main page, and then they would scroll back up to look that the navigation bar to find what they are looking for. One thing about Canon’s site is that it has two navigation bars and the main one is smaller which could potentially be confusing.

White space

While browsing both websites I immediately notice that Nikon’s website makes better use of white space than Canon. Nikon gives its content and pictures padding and margins so there is plenty of places for the eye to rest, while Canon’s website is still organized and uses borders, padding and margins. It uses less than Nikon and when comparing the two it feels that the information on Canon’s site is too close for comfort.

Grid


Canon's 6 column grid showing types of cameras


example of Canon's 5 column grid for showing the camera choices within a specific style.


The use of grid is used to help organize information on a page and creates unity and balance when the same grid system is used throughout the site. Both websites have a grid system and are fixed width. Nikon’s site has a good use of Modularity because the grid system is used more consistently through out the site because when you make any selection in the navigation bar everything is laid out in the same place. While Canon’s site seems to have two different lay outs if you select a general topic such as ‘cameras’ its organized into what looks like a 6 column grid and when you select something more specific, it looks like it turns into a 5 column.

Style

Color

Color used in both sites is very simple. Black, white and one accent color that relates to the brands logo; red for Canon and yellow for Nikon. Nikon uses its accent color mostly for the button colors, this is helpful to know where to click. Canon used its accent color for the navigation bar text, headings and buttons. Canon’s use of its accent color helps the user with hierarchy and makes it easier to identify the product and price.

Imagery

On a website when you’re shopping for products, imagery is pretty important because the customer has to see what they are purchasing. The imagery is pretty straight forward and is displayed well so the customer can see the product and is able to visually compare one type from another. Nikon’s images are a little bit bigger and makes it a bit easier when shopping. When looking at Canon’s site I felt like I needed to click on the product to get a larger view of the item.

Example of imagery for Canon


Example of imagery for Nikon

Other thoughts

Neither site really had much use of texture, depth, animation or variability. It’s possible that if this type of site used these techniques that it could be distracting for the user when trying to shop or compare a product.

Web Typography | Blog Post #2

The use of typography on the web is very important. With all the distractions the internet has, there needs to be some order to the chaos of information the web has to offer; That’s where typography comes in.

Why Typography Matters?

One of the blogs that I visited wrote an article about why type is important to the web. Typography is important because it can create a mood or feeling for that website depending on the font chosen for the site. They describe web typography as information design because the web is mostly made of text and we need typography to sort this information and create hierarchy for the reader. They break it down with two terms: Macro-Typography and Micro-Typography.
They define the terms:
Macro-typography, which comprises of overall text structure of the document.
Micro-typography, which covers the smaller and much detailed aspects like the font type, line-height and spacing etc.

Another article I read is from the same website but touches on The Eight Important Factors of Good Web Typography. It goes on to reiterate what the first article says about how typography is important because it creates visual hierarchy and makes text easier to read. I found this article helpful because it gives advice and important things to consider when designing a website yourself.

The last article I read was How to Use @Fontface. This article talks about web designers used to face the challenges of designing a site with only a limited choice of web safe fonts. But now there are some services that allow designers to use the fonts they want in their designs. Among those there is one site that is being developed that will solve all font compatibility issues between browsers called @fontface. The way to use @fontface is by implementing it through a few lines in CSS.

This is an example of how to use @fontface in CSS.


The benefits in using @fontface and web-fonts are that when you design a website and choose a specific typeface, every browser will be able to display it, so everyone that views the site will get the same experience.

Web vs. Print

The differences between designing for the web and designing for print are two very different things. When setting type for a magazine ad, billboard or flyer you have to attract the viewers eye and be clear and to the point in a matter of seconds. Designing for the web, we have to consider that there is a lot of information to organize and it is much harder for the viewer to read on screen than in a magazine.

An example of a website that I thought had interesting typography for the web was Coldplay’s website.
I chose this site for a few different reasons. I like the overall look and feel of the site created by typography, illustration and color. I think the hand rendered type for the subtitles contrast well with the serif typeface used for the body copy of the blogs.

Another site that I liked and thought the typography was really interesting was justdot.gr
The illustrative type really works with the concept of their website. Even though the background looks like sketches and equations on a chalkboard. All the information is easily organized and readable by the use of grids and two different typefaces to show hierarchy.

A Critique. Blog Post #1

As a college student I enjoy spending my time procrastinating doing my homework. I pass the time by surfing the web to find any funny article or video to prevent me from actually writing that ten page art history paper. The website I frequent the most is www.collegehumor.com. CollegeHumor is a website that puts out hilarious original articles and sketch comedy videos made by the staff who run the website. They also have a section for users of the site to post funny pictures and videos for the whole community to view.


Here is a screen caption of what is above the fold on the main CollegeHumor page.

The main page shows the top rated and staff picked videos, as the viewer scrolls down they get a glimpse of the newest CH orignal videos and articles. To access other specific areas of the site the viewer is easily informed when they visit the site that they must go to the top banner to view more videos, pictures, articles, hotlinks and more. Another nifty thing which is slightly new to the site is the thin black CHMedia banner at the top. The first link will give you a history of the site and the other links will direct you to the other websites that CHMedia owns and runs such as Dorkly, Sportspickle, TodaysBigThing, and Bustedtees.

Even though I absolutely despise the giant advertisements that take up the frame boarder of the webpage, I do believe that College Humor is a successful website. Following the rules of C.R.A.P, CollegeHumor’s website successfully shows contrast between the ads and the actual content. Let’s compare with a similar site called Topless Robot.

On the left we can tell that the content that is meant to be viewed is grouped together and boxed in with a light blue highlight that contrasts with the ads and even the white space. While on the right, everything seems to have a blue/grey tone that shows no contrast between the featured videos, articles or advertisements.

Another thing that CH is successful with is repetition because they use a grid when laying out the content of the website. Each page is consistent in layout which unifies all the different content to the same site. CollegeHumor’s use of the grid and repetition helps the viewer navigate the site.

Alignment is also achieved with the use of the grid, the text on the banners align with the content of the web page and even in this page the four larger videos align with the six smaller videos below it (also an example of Hierarchy).

The last but not least thing that determines a successful website is proximity. We can compare CollegeHumor again with Topless Robot and see that the grouping and spacing between the four videos shows that they belong together and not to be grouped with the advertisement because it is spaced further apart. If we look at Topless Robot to the right, the banner of links are very close to the videos at the top and pretty much all the videos, articles, and ads are grouped tightly together when they shouldn’t be. The poor proximity makes it harder for the viewer to visually separate the information, making it harder to navigate the page.

Overall, CollegeHumor is a successful website because the content caters to the interests of young adults age 18-34 which are the target audience. The layout is consistent and easy to navigate while still having contrast to keep us away from boredom. So, if you’re ever in need of some entertainment and a good laugh, definitely check out this site.