Design Success and Failure in Relation to Syntactical Guidelines

In my opinion, the website for XX Boys, a pin-up style site for transgender models, is a good example of web page design. The perception of this web page design is that it toes the line between masculine and feminine, which works perfectly towards the goal of the site. The background is feminine and the main color is pink, but the font is rough and most of the page is dominated by a masculine-looking guy. The image is dynamically balanced, which the title in the lower right, the logo in the upper left, and the boy's face dead center. The menus are off-center but they overlap in the middle to create balance and relative symmetry. Behind the boy is a diagonal, creating mild stress in the image, but works to highlight the words on the page. The viewer projects a horizontal base and is drawn to the words in the site navigation menu. The stark vertical lines in the background help balance the stress of the pink horizontal lines in the picture. The image is clearly sharpened on the image of the boy, giving the viewer a clear idea what the site is about: modeling. The title sort of works in positive/negative space. The font is pink with a white shadow that draws the viewer's attention to the words.


The image above is of a terrible website from some kind of religious group (found at http://www.dokimos.org/ajff/). Visiting the actual site, the viewer is stunned by a background that is not only jarring neon rainbow, but animated. The rainbow background scrolls to the right. A notification comes down from the top of the screen that says "click here" to save your eternal soul. The initial perception of the website is that it was designed by crazy people with no real goal besides somehow shocking the viewer so much that they follow whatever religion it is they are trying to advertise. The moving background is completely distracting and off-balance, making it almost impossible to retain any actual information from the page. Stress in the design is simple there, it does not really emphasize any one element of the web page. The page is certainly not level, and there is no attraction or grouping. Elements on the page seem to all be completely independent of one another. The background only becomes the negative object when the viewer's eyes are drawn to the black font in the center, the positive object. The title ("accept Jesus, forever forgiven") is almost the last thing one looks at because the bright orange 3D font makes it irritating to look at. The menu is almost impossible the read, and even harder to navigate. The negative and positive contrast is not visible enough. If the purpose of this site is to spread the word of their religion, they make it very hard and uncomfortable to try and learn more about it.

Visual vs. Symbolic Lanuage

Responses:
face hidden
crying? sleeping?
despair
shame
giving up
cold
hungry
messy penmanship
ambiguous ethnicity
strong build
monochromatic image
Starbucks cup- drinking or for change?

Symbols:
language- "very hungry," "please" (might say "please help"?)
Starbucks logo- America?
color- nearly everything is gray, depressing, downcast

A man is sitting at the side of a gray concrete-looking building. He looks like he could be in his 40's. His ethnicity is unclear, but his skin is sort of dark. He is built, not large or skinny, and looks pretty tall. His salt and pepper hair is cut very short, but he is not balding. He is wearing a bluish gray bomber-type padded jacket and dark jeans. He is not wearing a wedding ring or any other visible jewelry. He sitting with his knees drawn up and spread apart. He is clutching a sign in his arms. He holds the bottom of the sign in his left hand, and his right hand is crossed in front of the sign holding a white Starbucks coffee cup. His face is hidden behind the sign, he is hunched over resting his head on the sign. The sign is recycled cardboard and says, "very hungry," and underneath that, "please." It looks like the man is unemployed, possibly homeless, and desperate or ashamed.

Visual Thinking Research

I had my sister Nickie complete the visual puzzles (her puzzle is above). On the triangle puzzle, we had to count how many triangles made up a geometric shape. She took longer to finish hers than I did to finish mine, and she found 2 more triangles than I did. We were both many triangles short of the solution, which was 35. Nickie and I found that we used similar methods to find our solutions. We both visually traced the triangles using pattern recognition, specifically the "finding" function. She told me that she went around and around the shape in a circular pattern, outlining all the triangles she saw, thus utilizing the "categorizing" function.

I found that using a pen actually didn't help very much, as all the shapes eventually blended together and I couldn't remember which triangles I had already counted. I tried "matching" all the triangles that looked alike to me. I grouped them by similarity, rather than proximity as my sister seemed to do.

Above is my sister's solution to the spiral puzzle, where we had to see if we could tell which spiral was made up of two ropes. We both ended up finding the correct solution, the spiral on the right. My sister sort of cheated, against my urgent protests, and used the end of a pen to trace the ropes. She was basically using the "finding" technique in pattern-searching.

To solve this problem, I used a version of the "fill-in" pattern-finding technique. I tried to fill in the rope so that it would be easier to differentiate between rope and space, which is the main obstacle in solving this puzzle. I also used the "finding" technique, training my eyes to see ends of the rope. This process definitely took longer than my sister's, and it made my eyes hurt. After seeing the ends of the ropes in the middle of the spiral on the right, the solution seems obvious and I was surprised it took me so long to find it.

Feature Hierarchy and Visual Search

http://www.autostraddle.com/

I love the idea of designing for an online magazine. There are so many layout options that aren't always possible in print media. Autostraddle is one of my favorite online magazines. The title image is colored and sized perfectly so that it's visible without being distracting. The largest imagine is always what I look at first, usually 3 or 4 of the top stories for the day. Next, my attention goes to the site menu between the title and the top story. The site is exceptionally easy to navigate. There is enough on the home page to be captivating, and the menu is easy to find in black against colored dots. In my opinion, this website does a great job of being exciting without being overwhelming, as some online magazines can be.

Top-Down Visual Processing

http://www.google.com/

The Google interface is an ultimate example of goal-driven web design. It does a stellar job of directing a user's attention to a singular goal. People go to Google with a purpose. Almost the entire screen is dedicated to the one goal: searching. The design directs the eye to the name "Google" in bright colors in the center of the page. The search bar is directly under that, easily located because it is pretty much the only other object on the page. Users have only two main options when seeing the Google homepage, both options used for searching.
There is also eye movement and re-linking between actions and cognition required when using the Google homepage. When a user types on their search query, Google tries to guess what they are typing. The user's attention goes to the list with the goal of finding their query, then must return to their typing. When Google performs the search, the user has the further task of looking down the page and identifying which results match their query.