Here is the link to my Instructional Poster....
http://www.personal.kent.edu/~dwahoff/WahoffPoster.ppt
Tuesday, July 8, 2008
Monday, July 7, 2008
Week Five..
80/20 Rule
I love how GUI systems use this concept in designing software. I am the computer support person in an office of users who are on average 60 years old. Most of these users do not want anything to do with the computer, but have to use it everyday as part of their job. The only do exactly what they need to do and do not work outside that box. The old saying, “It is hard to teach an old dog new tricks” is very appropriate in this situation. If all of the functions that were available were displayed at once these users would freak out and get even more overwhelmed than they tend to be on a normal basis. The toolbars are their saving grace.. Heaven forbid when they accidentally close one of them out. I immediately get a call because “some alien has broken into their computer and taken away their print icon because they have made the gods of the universe unhappy”. I have really heard this!!
Cost-Benefit
I must say that I agree with Lidwell in the examples of the Cost – Benefit in advertisements in the form of Pop ups. I do not think that you could give away anything that would be considered enough of a benefit to me concerning these ads. They are so annoying and hopefully the advertisers will wise up and come up with a better design so they are not taking away from the original design that they are interrupting. The book also mentions the Banner Type advertisements which are not as annoying and I would consider them more of a cost-benefit than the Pop ups! I also am one of those people that get annoyed by having to wait too long to download something on a website. I will typically stay away from sites that take longer to download and will return to them when they wise up and figure out how to correct the design problem of the long downloading time. Also, when Cost-Benefit is concerned, I think that it is a good idea to take into account what the user considers a benefit and not just the designers opinion because we know what they say about opinions. :)
I love how GUI systems use this concept in designing software. I am the computer support person in an office of users who are on average 60 years old. Most of these users do not want anything to do with the computer, but have to use it everyday as part of their job. The only do exactly what they need to do and do not work outside that box. The old saying, “It is hard to teach an old dog new tricks” is very appropriate in this situation. If all of the functions that were available were displayed at once these users would freak out and get even more overwhelmed than they tend to be on a normal basis. The toolbars are their saving grace.. Heaven forbid when they accidentally close one of them out. I immediately get a call because “some alien has broken into their computer and taken away their print icon because they have made the gods of the universe unhappy”. I have really heard this!!
Cost-Benefit
I must say that I agree with Lidwell in the examples of the Cost – Benefit in advertisements in the form of Pop ups. I do not think that you could give away anything that would be considered enough of a benefit to me concerning these ads. They are so annoying and hopefully the advertisers will wise up and come up with a better design so they are not taking away from the original design that they are interrupting. The book also mentions the Banner Type advertisements which are not as annoying and I would consider them more of a cost-benefit than the Pop ups! I also am one of those people that get annoyed by having to wait too long to download something on a website. I will typically stay away from sites that take longer to download and will return to them when they wise up and figure out how to correct the design problem of the long downloading time. Also, when Cost-Benefit is concerned, I think that it is a good idea to take into account what the user considers a benefit and not just the designers opinion because we know what they say about opinions. :)
Monday, June 30, 2008
Week 4 Reading...
Picture Superiority Effect
People remember pictures easier than words. In advertising, an ad with a picture and words will help consumers to recall a product when they have seen it associated with a picture. I think of this like signs for McDonalds and Wendy’s and Burger King. The same pictures (emblems) are associated with the name of the restaurants on their signs. Children recognize these establishements long before they can actually read the words.
Recognition over Recall
It is easier to recognize something than it is to recall it. That is why children (and adults) cry when teachers give them essay and fill in the answers tests as opposed to multiple choice. In multiple choice, you might not be able to scream out the answer, but may recognize it once you see it as a choice. Kind of like an agh ha moment.
Serial Position Effects
This is when people try to recall items from a list and how it is easier to recall the items at the beginning and also the ones at the end. Kind of like the middle child syndrome. (I am the oldest and my sister used to cry about this all the time growing up). It was interesting to learn that if you are teaching something visual, you should present the most important facts at the beginning and the opposite if you are teaching something auditory.
People remember pictures easier than words. In advertising, an ad with a picture and words will help consumers to recall a product when they have seen it associated with a picture. I think of this like signs for McDonalds and Wendy’s and Burger King. The same pictures (emblems) are associated with the name of the restaurants on their signs. Children recognize these establishements long before they can actually read the words.
Recognition over Recall
It is easier to recognize something than it is to recall it. That is why children (and adults) cry when teachers give them essay and fill in the answers tests as opposed to multiple choice. In multiple choice, you might not be able to scream out the answer, but may recognize it once you see it as a choice. Kind of like an agh ha moment.
Serial Position Effects
This is when people try to recall items from a list and how it is easier to recall the items at the beginning and also the ones at the end. Kind of like the middle child syndrome. (I am the oldest and my sister used to cry about this all the time growing up). It was interesting to learn that if you are teaching something visual, you should present the most important facts at the beginning and the opposite if you are teaching something auditory.
Friday, June 27, 2008
Website Review Assignment -
Search engine - http://www.google.com/
Google has a non distracting white background, a very simple design. Google needs to portray simplicity because they want users to choose their site with the idea that is it easier to use than other search engines. They need the site to be free of distraction and other non essential hoopla and unnecessary items on the screen to focus on the reason for the website, searching for other websites. The idea is to not spend a lot of time on the website, it is to keep people coming back over and over again. The designers also use the primary colors. I think that this too has users feeling at ease and is associated with feelings of youth and familiarity connected with elementary school. Google will also sometimes change the colors on their logo to coincide with the seasons. I have seen red and green at Christmas and pastel colors around Easter.
The menu bar is at the top left and uses a simple blue lettering. If you choose to click on the different pages of the website, the pages follow the simplistic design of the Home page. The Google Logo is in primary colors and there is very little else on the page. The Map and News tabs are an exception because their function is a little different than the search screens. On the Map page, the background of the map is a lighter blue color that is soothing on the eye, not distracting in any way almost inviting you to use the map. The lettering on the Map is a gray which is cool and calming. Maps can be overwhelming and scary to some (myself included) and I think that the softness says to the viewer, do not be afraid to try it out. The news page is a little busier and is a new addition to the site. The top of the page has the signature Google Logo in its primary colors and a white background. This is underlined by a red line signifying authority. The top of the screen mirrors the tranquility of the other pages. Under the red line there is a lot more text and it not as calm as you would expect from a news site. This particular area of the site is not designed like the rest of the site because its function is different. Overall, I think that Google site was designed with the above ideas in mind and were very successful in doing so.
College Website - http://www.kent.edu/index.cfm
Kent uses its school colors to portray a sense of school spirit. I also nicely uses different tints of the colors by adding white to compliment each other instead of the hue of the color which would deeply contrast each other. White lettering is also used in the top block of the website as a subtle contrast (in the darkest of the three choices of backgrounds). The letters stand out, but are not offending. Another feature that was nice for someone that might have sensitive eyes or poor vision, is that there is an option available to change the color combinations on the website. There is also an option for a text version of the site that removes all of the images and only has a white background with blue text. The text is bright blue and easy to read. This too is an option to help viewers with special needs. I prefer the color combination of the darker blue top with the light blue and yellow. I am not sure what about this combination is more attractive to me. I have been starring at it for several minutes trying to figure this out. I think because in the light blue version there is no contrast on the screen in the top to the bottom and in the yellow version, I am just not a big fan of that tint of yellow (which I want to call a shade automatically but a shade is actually adding black to the hue which would be incorrect!). It is more of a color preference than a design flaw I would say.
It was smart for the designers not to use the pure hue of yellow, as yellow is the hottest color and this would have portrayed a different atmosphere to the website. I believe that the feel that the creators are going for is Prestige and Classical. Using muted colors helps create the targeted atmosphere. Overall, I say that this website was very nicely created.
The web designers also did a very good job of consistently carrying over the same color scheme throughout the website. This applies to the different pages and the sub pages on these pages. An exception to this rule, I found is the Kent’s Sport’s page. I think that it is appropriate to use the bold natural hues of the school’s colors for this section of the website. The yellow signifies the hotness of the Golden Flashes and the bold blue is a great contrast to the yellow. It gives a feeling of boldness or fearless fighting to victory. (this unfortunately does not always carry over into the actual field!). I think that the designers of the Kent State website also did a great job in their design.
Online Retail Website - http://www.anntaylor.com/home.jsp
I love the Ann Taylor clothing store. I do not get to if often because the mall is about 25 minutes from my house and with having two kids, a full time job, a husband and taking graduate classes, I do not have a lot of spare time to drive to the mall. Online shopping at anntaylor.com is the next best thing. I happen to partake of this fun more often than getting to the real brick and mortar store. Before I start evaluating the website with the criteria from required reading article at http://www.colormatters.com/des_ecom.html, I must say that I am not pleased with the sites choice of background color for what is probably its summer look. They chose a bright yellow. I am sure that it is supposed to signify the hot summer months ahead, but I do not think that it goes with Ann Taylor’s conservative look of their clothes. They did not change anything else about the site, just slapped up a bright yellow background. It just does not go with the subtle colors in the rest of the website.
According to the article there are four formulas for success in an online retail store. The first consideration is whether the images are converted into the correct formatting which allows the images to open quickly and also delivers the best color quality. I do not know a lot about the different choices of formatting for pictures on the internet but I can say that the images of the clothes opened in less than two seconds. I think that this is a pretty fast response time and I would say that the site passes the test on the first part of the criteria. The images are also nice and crisp and clear. They are not blurry in any way.
The second part of the evaluation of retail websites is selecting the appropriate colors after analyzing the store’s products and target market. If you omit the awful background color of the site, the main part of the site follows this rule of thumb. The colors are conservative. Light colors, medium gray lettering on top of a mostly gray and some white background. The designer pulls out a dominant color in the clothing of Rose and uses this to contrast items that are on sale and also for some of the sub categories like types of clothing. Again, meeting the second criteria for evaluation.
The third part of the evaluation is using color to move the viewer through the page in the correct sequence. Where they should look first, go next and so forth. When first looking on the Home page my eye is drawn to the bright Rose type telling me about the new June line of clothing. From there I look down to the categories of clothing that I want to look at. I select the appropriate page and then begin browsing the new clothing line. As I move through the new clothes, my eye is brought to some sale items that are highlighted with the rose type. I enjoy a good sale. After I am done browsing and I select my choices, my eye is taken to the top of the page where in the rose color again, I notice the banner that tells me that the shipping on every order is only six dollars. (this color is a nice contrast with the otherwise gray and white type on the site). If I was not going to purchase anything, I think that the sale in shipping would sway my decision. From there I would move to the check out screen and proceed with my purchases. I am not sure how if this is exactly what the designers of the website had planned, but it worked just fine for me. I did not run into any snags and did not have trouble navigating through the site. I would say that they did a great job on this section of criteria too.
The last piece of evaluation suggests that the color should create harmony along all of the pieces of the website (navigation, type, images, merchandise). All of the parts of the website should work together. As I stated earlier all but the background color of this site, which is not a permanent fixture, work together in harmony. The contrasting rose colored type is pulled out from the color that is dominant this season’s clothing in the same rose color. The light gray background with white works in harmony of the darker gray type. Overall, this site was designed very nicely except for the BADLY contrasted hot yellow that they have added for the summer months. I hope this is not a permanent fixture on the site.
Food - http://www.mcdonalds.com/corp.html
I was very surprised at how unexciting McDonald’s website was when I looked it up. The background is black and on the Homepage, the only yellow on the page is one Golden Arch. There are few colors on the website. Black, white, red and then the yellow from the Golden Arch are the only present. There is one tiny picture on the Homepage and it is sort of blurry. I would have expected the McDonald’s website to have the familiar Golden Arc all over its pages and the colors of McDonald’s predominant throughout the website. If you removed the one Arch on the Home page, one would not know they were looking at the McDonald’s website.
There is a nice contrast at the top of the page in the red banner. The designer uses white type in the red banner. This is appealing to the eye. The combination is flipped on the right side of the Homepage, red type in a white box. This is not as pleasing to the eye and frankly hard on the eyes. This theme is carried out throughout the various pages. The designer at least does a good job of using the same repetition of color throughout the site, sticking with the same layout.
The Franchising page is the most pleasing page to the eye and should have been the model of how the whole site was designed. There are various pictures of McDonalds in the middle of the page. The pages accent the Golden Arches and this is pulled out and brings out the yellow in the Arch at the top of the page. This gives you the feel of being a child and eating at McDonalds. This caused an emotional reaction in me and this page would make me want to eat at McDonald’s.
Overall, I have to say that this was a very unprofessional looking website. I am disappointed. As I said above, had the designers used the Franchise page as a guide, the site would have been so much nicer.
Electronics - http://www.bestbuy.com/
When you look at the Best Buy site, you know you where you are. The color alone holds the theme of Best Buy. The designer uses different shades and tones of the Best Buy Blue throughout the site. There is a nice Best Buy Banner in the upper left hand corner of the site and then they carry that color in type throughout the site.
The designers of this site use saturation in the pictures and type. Which is a nice touch since most things on the site are metallic or in the black and gray family already. They use the same colors in the type and it just gives the website a nice crisp feel. Another nice use of color on the site is when you put your cursor over the headings of the different pages, it highlights them in the Best Buy yellow. This is very appealing to the eye.
Best Buy, like all of the other sites reviewed, does a nice job of carrying the repetition of color combinations into the other pages of the site. The top blue bar at the top of the Home Page is exactly the same in each of the different pages.
One last thing that I noticed about the Best Buy site was they had an option to select Spanish as the primary language on the site. They managed to create an identical site by replacing the English language with Spanish. Not technically a special need, but something very helpful to those who do not speak English. This was a very smart move for the designers. This site gets my two thumbs up! I would pick the Best Buy site as the best designed out of the five that I reviewed.
Google has a non distracting white background, a very simple design. Google needs to portray simplicity because they want users to choose their site with the idea that is it easier to use than other search engines. They need the site to be free of distraction and other non essential hoopla and unnecessary items on the screen to focus on the reason for the website, searching for other websites. The idea is to not spend a lot of time on the website, it is to keep people coming back over and over again. The designers also use the primary colors. I think that this too has users feeling at ease and is associated with feelings of youth and familiarity connected with elementary school. Google will also sometimes change the colors on their logo to coincide with the seasons. I have seen red and green at Christmas and pastel colors around Easter.
The menu bar is at the top left and uses a simple blue lettering. If you choose to click on the different pages of the website, the pages follow the simplistic design of the Home page. The Google Logo is in primary colors and there is very little else on the page. The Map and News tabs are an exception because their function is a little different than the search screens. On the Map page, the background of the map is a lighter blue color that is soothing on the eye, not distracting in any way almost inviting you to use the map. The lettering on the Map is a gray which is cool and calming. Maps can be overwhelming and scary to some (myself included) and I think that the softness says to the viewer, do not be afraid to try it out. The news page is a little busier and is a new addition to the site. The top of the page has the signature Google Logo in its primary colors and a white background. This is underlined by a red line signifying authority. The top of the screen mirrors the tranquility of the other pages. Under the red line there is a lot more text and it not as calm as you would expect from a news site. This particular area of the site is not designed like the rest of the site because its function is different. Overall, I think that Google site was designed with the above ideas in mind and were very successful in doing so.
College Website - http://www.kent.edu/index.cfm
Kent uses its school colors to portray a sense of school spirit. I also nicely uses different tints of the colors by adding white to compliment each other instead of the hue of the color which would deeply contrast each other. White lettering is also used in the top block of the website as a subtle contrast (in the darkest of the three choices of backgrounds). The letters stand out, but are not offending. Another feature that was nice for someone that might have sensitive eyes or poor vision, is that there is an option available to change the color combinations on the website. There is also an option for a text version of the site that removes all of the images and only has a white background with blue text. The text is bright blue and easy to read. This too is an option to help viewers with special needs. I prefer the color combination of the darker blue top with the light blue and yellow. I am not sure what about this combination is more attractive to me. I have been starring at it for several minutes trying to figure this out. I think because in the light blue version there is no contrast on the screen in the top to the bottom and in the yellow version, I am just not a big fan of that tint of yellow (which I want to call a shade automatically but a shade is actually adding black to the hue which would be incorrect!). It is more of a color preference than a design flaw I would say.
It was smart for the designers not to use the pure hue of yellow, as yellow is the hottest color and this would have portrayed a different atmosphere to the website. I believe that the feel that the creators are going for is Prestige and Classical. Using muted colors helps create the targeted atmosphere. Overall, I say that this website was very nicely created.
The web designers also did a very good job of consistently carrying over the same color scheme throughout the website. This applies to the different pages and the sub pages on these pages. An exception to this rule, I found is the Kent’s Sport’s page. I think that it is appropriate to use the bold natural hues of the school’s colors for this section of the website. The yellow signifies the hotness of the Golden Flashes and the bold blue is a great contrast to the yellow. It gives a feeling of boldness or fearless fighting to victory. (this unfortunately does not always carry over into the actual field!). I think that the designers of the Kent State website also did a great job in their design.
Online Retail Website - http://www.anntaylor.com/home.jsp
I love the Ann Taylor clothing store. I do not get to if often because the mall is about 25 minutes from my house and with having two kids, a full time job, a husband and taking graduate classes, I do not have a lot of spare time to drive to the mall. Online shopping at anntaylor.com is the next best thing. I happen to partake of this fun more often than getting to the real brick and mortar store. Before I start evaluating the website with the criteria from required reading article at http://www.colormatters.com/des_ecom.html, I must say that I am not pleased with the sites choice of background color for what is probably its summer look. They chose a bright yellow. I am sure that it is supposed to signify the hot summer months ahead, but I do not think that it goes with Ann Taylor’s conservative look of their clothes. They did not change anything else about the site, just slapped up a bright yellow background. It just does not go with the subtle colors in the rest of the website.
According to the article there are four formulas for success in an online retail store. The first consideration is whether the images are converted into the correct formatting which allows the images to open quickly and also delivers the best color quality. I do not know a lot about the different choices of formatting for pictures on the internet but I can say that the images of the clothes opened in less than two seconds. I think that this is a pretty fast response time and I would say that the site passes the test on the first part of the criteria. The images are also nice and crisp and clear. They are not blurry in any way.
The second part of the evaluation of retail websites is selecting the appropriate colors after analyzing the store’s products and target market. If you omit the awful background color of the site, the main part of the site follows this rule of thumb. The colors are conservative. Light colors, medium gray lettering on top of a mostly gray and some white background. The designer pulls out a dominant color in the clothing of Rose and uses this to contrast items that are on sale and also for some of the sub categories like types of clothing. Again, meeting the second criteria for evaluation.
The third part of the evaluation is using color to move the viewer through the page in the correct sequence. Where they should look first, go next and so forth. When first looking on the Home page my eye is drawn to the bright Rose type telling me about the new June line of clothing. From there I look down to the categories of clothing that I want to look at. I select the appropriate page and then begin browsing the new clothing line. As I move through the new clothes, my eye is brought to some sale items that are highlighted with the rose type. I enjoy a good sale. After I am done browsing and I select my choices, my eye is taken to the top of the page where in the rose color again, I notice the banner that tells me that the shipping on every order is only six dollars. (this color is a nice contrast with the otherwise gray and white type on the site). If I was not going to purchase anything, I think that the sale in shipping would sway my decision. From there I would move to the check out screen and proceed with my purchases. I am not sure how if this is exactly what the designers of the website had planned, but it worked just fine for me. I did not run into any snags and did not have trouble navigating through the site. I would say that they did a great job on this section of criteria too.
The last piece of evaluation suggests that the color should create harmony along all of the pieces of the website (navigation, type, images, merchandise). All of the parts of the website should work together. As I stated earlier all but the background color of this site, which is not a permanent fixture, work together in harmony. The contrasting rose colored type is pulled out from the color that is dominant this season’s clothing in the same rose color. The light gray background with white works in harmony of the darker gray type. Overall, this site was designed very nicely except for the BADLY contrasted hot yellow that they have added for the summer months. I hope this is not a permanent fixture on the site.
Food - http://www.mcdonalds.com/corp.html
I was very surprised at how unexciting McDonald’s website was when I looked it up. The background is black and on the Homepage, the only yellow on the page is one Golden Arch. There are few colors on the website. Black, white, red and then the yellow from the Golden Arch are the only present. There is one tiny picture on the Homepage and it is sort of blurry. I would have expected the McDonald’s website to have the familiar Golden Arc all over its pages and the colors of McDonald’s predominant throughout the website. If you removed the one Arch on the Home page, one would not know they were looking at the McDonald’s website.
There is a nice contrast at the top of the page in the red banner. The designer uses white type in the red banner. This is appealing to the eye. The combination is flipped on the right side of the Homepage, red type in a white box. This is not as pleasing to the eye and frankly hard on the eyes. This theme is carried out throughout the various pages. The designer at least does a good job of using the same repetition of color throughout the site, sticking with the same layout.
The Franchising page is the most pleasing page to the eye and should have been the model of how the whole site was designed. There are various pictures of McDonalds in the middle of the page. The pages accent the Golden Arches and this is pulled out and brings out the yellow in the Arch at the top of the page. This gives you the feel of being a child and eating at McDonalds. This caused an emotional reaction in me and this page would make me want to eat at McDonald’s.
Overall, I have to say that this was a very unprofessional looking website. I am disappointed. As I said above, had the designers used the Franchise page as a guide, the site would have been so much nicer.
Electronics - http://www.bestbuy.com/
When you look at the Best Buy site, you know you where you are. The color alone holds the theme of Best Buy. The designer uses different shades and tones of the Best Buy Blue throughout the site. There is a nice Best Buy Banner in the upper left hand corner of the site and then they carry that color in type throughout the site.
The designers of this site use saturation in the pictures and type. Which is a nice touch since most things on the site are metallic or in the black and gray family already. They use the same colors in the type and it just gives the website a nice crisp feel. Another nice use of color on the site is when you put your cursor over the headings of the different pages, it highlights them in the Best Buy yellow. This is very appealing to the eye.
Best Buy, like all of the other sites reviewed, does a nice job of carrying the repetition of color combinations into the other pages of the site. The top blue bar at the top of the Home Page is exactly the same in each of the different pages.
One last thing that I noticed about the Best Buy site was they had an option to select Spanish as the primary language on the site. They managed to create an identical site by replacing the English language with Spanish. Not technically a special need, but something very helpful to those who do not speak English. This was a very smart move for the designers. This site gets my two thumbs up! I would pick the Best Buy site as the best designed out of the five that I reviewed.
Tuesday, June 24, 2008
Color according to Williams
Man.. I should have read her book first.. She has such a great way of simplifying things for the not so savvy designer.... I was able to understand for the first time the Color Wheel. I like the way that she started with the three primary colors and went on to explain where the rest of the color wheel came from and also about white (absence of all color) and black (the combo of all color).
In the color category I think this might be my Wimpiest area!!! I could never see mixing orange and blue.. and then when you get into the crazy triads and split compliment triads. It will probably take me a while to work up to that. I tend to be very conservative. Something that I hope to work through.....
In the color category I think this might be my Wimpiest area!!! I could never see mixing orange and blue.. and then when you get into the crazy triads and split compliment triads. It will probably take me a while to work up to that. I tend to be very conservative. Something that I hope to work through.....
Monday, June 23, 2008
Attractiveness Bias
You see this all the time in advertisement. A pretty, skinny lady is going to sell more bottled water than an over weight unattractive lady. A buff man is going to see a gym membership easier than a man with a potbelly. You even notice good looking people in TV ads and print when the product has nothing to do with exercise or fitness.
I found it very fascinating that babies looked longer at attractive people regardless of their gender, age and race. Though I do question the theory of "Beauty is in the Eye of the Beholder". I wonder how this comes into play in the Attractiveness Bias. Who's idea of attractiveness are we talking about?
I found it very fascinating that babies looked longer at attractive people regardless of their gender, age and race. Though I do question the theory of "Beauty is in the Eye of the Beholder". I wonder how this comes into play in the Attractiveness Bias. Who's idea of attractiveness are we talking about?
Alignment
Wow.. I know, I use this term a lot. What a great example of how important alignment is using the ballot from 2000. It is sad that something so poorly designed is associated with something as important as a Presidential election. That image was almost as powerful as the one on pg 33 with the poor girl that was hit by the drunk driver symbolizing Classical Conditioning.
I tried to use diagonal alignment on my Visual Timeline. This was hard to do. I am not sure what angle mine was at. I did note that if trying to use diagonal alignment in the future, that I should use the 30 degree rule.
I tried to use diagonal alignment on my Visual Timeline. This was hard to do. I am not sure what angle mine was at. I did note that if trying to use diagonal alignment in the future, that I should use the 30 degree rule.
Subscribe to:
Posts (Atom)
