Project 3-Trunk Test

Well, I gave the trunk test to six of my friends concerning the "Men's Felt Hats" page in my redesign project. I got a variety of results. I have listed the results in order from shortest to longest amount of time to find all of the elements in the page:

Participant 1: 34 seconds
Participant 2: 38 seconds
Participant 3: 44 seconds
Participant 4: 50 seconds
Participant 5: 56 seconds
Participant 6: 75 seconds


On last Thursday in class, we were instructed to apply a Gaussian Blur with a radius of 1.5 pixels to our web page and print out some pages for people to look at. Each participant had to find six elements to the page. They were:

1. Site ID
2. Page Name
3. Main Navigation
4. Secondary Navigation
5. A "You are Here" indicator
6. A Search Option

I found that a lot of the participants had trouble locating the secondary navigation of my page, or they were confused to what the secondary navigation actually was. I remember giving them hints like, "what would you think the secondary navigation is?" or "where would you look after you selected from the main navigation?". The amazon.com site was also brought up as an analogy to think of tabs for navigation. The participants also were pretty much talking the whole time while they were trying to find the web page elements. Some would go in order from the list that I gave them and a few would start with the items that they definitely knew (i.e. the search box).

Project 3-Site Redesign and Analysis

Okay, here's the original site that I decided to analyze and redesign, www.millerhats.comHere's my version of the home page:


Here's a scroll down menu to look at what "Men's Hat's" has to offer:

Scroll-down menu for "Women's Hats":


Scroll-down for "Children's Hats":

Scroll-down for "Brands":

Scroll-down menu for "Accessories":
Now we want to see "Men's Felt Hats", so here is the page:


While we're in "Men's Felt Hat's" we want to go to see what kind of "Borsalino" hats that Miller Hats offer.
Finally, if you wanted to click on the "Genoa Hat" , here's the page that you'd see:

I redesigned the navigation, appearance, well.......pretty much the whole site, or at least 4 pages worth. Because the original site had so much information, and so many hats, I decided to break up the sections into separate categories. Five categories were on the top, and then I placed a scroll-down menu for all of these sections. I also made a search engine at the top, along with a basket and checkout button. I forgot to place the "free gift" in my site, but it will be coming soon.

Usability Example-Phones for babies

I came across this article when I was getting my car's oil changed on Friday, February 16th. It was in the magazine, "SmartMoney", yeah I know sounds like a fun read. Anyways this article presented some interesting usability issues. It was suggested that the fastest growing user group for phones were kids (ages 6-12). I have posted some images of phones for kids. The three versions were overly simplified. For example, the "Migo" has no voicemail, no text messaging or color options, and lets the parents program 4 numbers along with a bright-red emergency pad.

The second phone example is the "Firefly". This has 2 quick-dial keys, with mom and dad icons. It also enables the kid to program up to 20 numbers, but it is pin protected so the parents can set the numbers and also block incoming calls from other numbers.

The third example is from Disney, called the "Disney Mobile". This seems more advanced than the other 2 as there are options for text messaging and ringtones. The parent controls include presets for talk, text, and downloads, as well as blocking options and GPS.

I also provided an image of four different carrier plans for family phone plans showing the parent controls, which could present usability issues.

Information Dashboard Design-Ch.1

I finally started reading the book, Information Dashboard Design by Stephen Few. I figured I'd write down the highlights of Chapter 1. The definition of a dashboards is:

A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance.

Dashboards also have small, concise, clear, and intuitive display mechanisms. They are customized as well.

Right away from the beginning Stephen Few suggests that dashboards can provide powerful means to present information, but rarely show this. Instead, most dashboards fail to communicate efficiently not because of inadequate technology, but because of poorly designed implementations.

I am beginning to realize that the communication of any information can be viewed from a designers' angle and can be critiqued to provide better insight into presenting clarity.

"Don't Make Me Think" Ch. 6-8

The reading for me was informative and easy to read. Here are some of the highlights:

Use tabs. Tabs can be an effective way to layout the design of a website. They're self-evident, hard to miss, slick, and they suggest a physical space. Amazon uses tab dividers for navigation very well. www.amazon.com
Remember the trunk test. If you somehow didn't know how you got to a page, do the elements make sense and can you navigate yourself out of it?
Bread crumbs. The use of bread crumbs may be good "You are here" indicators. Some suggestions from the book included:
-put them at the top
-use > between levels
-use tiny type
-use the words "You are here"
-boldface the last item
-don't use them instead of a page name.
Homepage. It has to appeal to everyone who visits the site, no matter how diverse their interests.
Good taglines. They should be just long enough (6-8 words) to convey a full thought, but short enough to absorb easily. They also distinguish the company and site as different and unique.
I basically just took blurbs throughout chapters 6-8 and wrote them in this blog today. Later.

Idiocracy Usability

So I took some screen shots of the Idiocracy movie dvd menu. Try to guess which one is the selected "play"? If you guessed the bottom one, you are...um..... wrong....If you guessed the top one, um.....You good! You real good!

Like I said in my last blog, the DVD menu confused me because the selection indicator was the yellow tint over the box. A lot of the boxes had yellow borders around them already, so it was hard to pinpoint the selection at first glance. Looking at it now, the "play movie" when it is red seems to standout more than if it has the yellow selection tint over it. Anyways, I just thought that this was a good example of bad usability. However, again, maybe they tried to do this to fit with the theme of the movie.

Idiocracy

I am posting this blog to give my critique, not so much on the movie, "Idiocracy" starring Luke Wilson, but to comment on the usability of the DVD display menu. I wish I had a screen shot for you showing the display menu, but ahh....I don't. Instead I'll make up for it by attempting to describe it.

Last week, I watched this movie, in it's entirety, and it took me about 2 minutes to actually start the movie from the menu. Isn't that ironic considering what the movie is titled........ The display menu came on the screen and there were images and signs everywhere, with a lot of colors. The images were designed to mimic televisions screens bordering around the actual menu. When you highlighted what you actually wanted to see, it was really hard to decipher the highlight because there were so many competing colors. The highlight color was yellow, but yellow was on more than half of the other television boxes. Maybe they were trying to somehow relate to the dumbing down of characters in the movie.

The premise of the movie is that Luke Wilson, "Private Joe Bowers", is the definition of "average American", and "is selected by the Pentagon to be the guinea pig for a top-secret hibernation program. He is forgotten about and he awakes 500 years in the future. He discovers a society so incredibly dumbed-down that he's easily the most intelligent person alive." Ummmm..... I don't know if I would recommend the movie, but if you're a Mike Judge fan you'll probably see it or have already seen it.

Project 1- Blog Revisions #2

I have decided to put 2 new links to my blog. I've made a link for the home page of my blog and also a link to the blog for the class. I feel it will be easier for me to go to the class site when I am working on my blog and I feel it will just be easier for anyone in general to go back and forth from these sites.

I have also changed the colors, simply because I think that the green and orange that I had before, was harder on my eyes than the blue and red that I have now. I have kept the same fonts, though (Arial, Trebuchet Bold, Verdana Bold). I'll be back to let everyone know what's the haps with my blog in a little bit.

Project 1: Blog Revisions #1

I am trying to rework this blog right now, and I am not sure where to go with it. I have made some additions to the original blog by simply adding the links to each project (so far just projects 1 and 2). I am toying with the idea of putting a "HOME" link somewhere on the page, because when I click on project 1 or project 2, there isn't an option to get back home unless I hit the back arrow button. Oh well, right now I'll let it be and sit back, eh!?!

Project 2

Here's a link to the original site http://www.analysts.com/pages/SupplementalStaffing.aspx


I have finished modifying the website for class. I have changed the color of the four links on the top left, having the actual "Supplemental Staffing" page blue, and the other three links orange. I felt that this would emphasis the topics more as links. I then took out unnecessary information and condensed the"Overview", as well as the "Why Analysts International". I also left only 2 actual "Customer Stories" and left another link to see the other stories.

I also changed the positioning of the Customer Stories and Contact Information in order for the reader to scan the page diagonal from left to right, leading the last part of the scanning process to see the important contact info. There was also a bit of tweaking with the yellow lines around the main text, simply to work with my layout better than the original.