Michael's Art 328 Process

I believe my 'critique' website should have these attributes:

1. Neutral design that allows the content to be the main focus
2. The design should use minimal graphics but rely on simple metaphors for navigation
3. The user should be able to quickly use any part of the site
4. The main section or home page should offer insight to the website's function and offer a point of departure that's easy to discover.
5. The point of departure should involve some sort of glimpse of each of the 3 websites in review.
6. Besides having a neutral and simple design, it still should engage interactivity and use trends that target our classroom demographic.
7. Styles need to be set up to allow for discrete identification of headings, titles, subtitles, body copy, links, and quotes.
8. A system of presenting screenshots needs to be established
9. A synopsis or concluding statement should be available for each website critique so that if a user does not have the time to read the full review they can still walk away with the gist of the critique. Maybe an optional PDF download.
   
10. Contact information
11. Possibly a biographical page that gives an understanding of the background and why me, the author might be qualified to give such a website critique?
12. The color palette should be quite homogeneous with a few contrasting colors for call to action areas and/or links
13. The theme of the website should be set in a tone that uses real life situations posed as questions that many people are inclined to comment on or investigate - then to make an analog comparison to the website in review. This will divert from a dry website of purely informing the viewer of my findings. To take it a step further these questions and responses could be done in a dry humoristic tone.

I will be using Flash to build my website that critiques bl:nd, DESIGNFLOOD and FOG OF WAR

In order to begin creating my 3 layouts that denote the look and feel, I will need to investigate more thoroughly best practices for such a site.

Looking at designflood.com I already see a version of how to do a similar site. They too are basically just a portal to see other sites and offer a quick way to rate them. What differs in my website is that I will not offer user ratings but instead provide feedback on the selected sites. I like their mission to have the website design remain neutral and let the featured websites take hierarchy. This should be a feature of my website so that the content is the main focus and not my design. What I don't like about their site is the lack of metaphors to help drive navigation and other user interactions. I want it to be clear what to click on and where you can go.

This site, graphic-design.com has a very simple straightforward layout and content arrangement for its critique on websites. The background is white and non intrusive, it's easy to find websites and see a short glimpse of their critique before diving into the full review. Unfortunately to see the full review it takes you to another site that is just a PHP bulletin board. I feel this site change is not fluid and frustrating.

When searching for more websites that critique other websites I found that most of them are all in a bulletin board format to allow for extreme user interactivity. I believe the intention of our website is not to create a forum but more so to create a website to showcase our findings. On that note I am going to change my search criteria to websites that showcase a minimal amount of information in a purely informational fashion.

CSStux does a good job of this although it doesn't provide much feedback on the sites it has listed.

Smashingmagazine.com does a good job of breaking down elements with thorough reviews that have related screenshots to show in detail what the critique is about. I like this style of a linear story with pictures.

Sitecritic.com does the best job of showcasing websites then offering a thorough review with screenshots if you choose to dive in.

Killersites.com's website review section also has a fairly good system of showing their review but I think it doesn't look very pretty.

Commonsensemedia.com is different from the previous sites in that it reviews for a specific audience of concerned parents. This now makes me ask the question about if I should tailor my website critique to tailor a specific audience or style. I think if it did, the site would have more character since it's not just an unbiased critique. For instance I could make my website about how the 3 chosen websites work for a our student demographic and if the design relates well to our asthetic.

3 homepage directions (look and feel) with general examples of a few content elements in relation to the content we have from the website critique. Format should be between 700px - 1000px but all other format options are undefined.

Bring index cards to class for site mapping. Site map may or may not be due the following Wednesday.

Let Krista know by Friday at noon via e-mail if we are going to use Flash or HTML/CSS for this project.

December 1st is an in-class work day.

ScreenShot:


Navigation:
Is it easy to navigate or difficult?
It's very easy to see what to click on but difficult to discern why to click or what clicking might do.

How are you led through the site?
You are led through the site with a date-based navigation after a video plays and shows a date coordinated video next.

What visual clues are given to tell you how to interact?
There are dates, small icons and areas of white that denote links.

Does the designer use a metaphors to get you to move through the website?
Yes.

What Kind of metaphors are used? Organizational Metaphors = (organized by type, kind etc…); Functional Metaphors = performs a “real world” function (in Photoshop you can figuratively “cut” and “paste”) or Visual Metaphors (common graphic elements familiar to most – the traditional “play”, “fast-forward”, “rewind” buttons found on CD players)
The designer uses icons that represent what the text next to it is describing. There are also more abstract buttons in the form of a play and pause button to control the videos and slide the date chooser around.

Information Architecture:
Does the information in the site make sense?
At first it doesn't because I don't understand why the dates are there; probably because I haven't seen the movie. After a lot of poking around and watching the trailer I understand why the information is there but it's not apparent at first.

Can you access the content you want easily?
Yes the content is all on one page and within very short distances to each other.

How is the content organized? (By location, alphabet, timeline, category, etc? )
The content is organized by date in the middle and then organized by suggested user relevance on the left of the circle.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
Yes, the dates are larger and start playing movies without even interacting with them whereas the links on the left side are small and less engaging.

Usability
Is this site easy to use?
Most of the site is easy to use but I had no idea you could actually turn the date element until I randomly clicked on the odd button in-between the play and pause buttons.

How do the above two concepts, navigation and information architecture, work in terms of making the site usable or not? Do the metaphors make sense with the content?
They work together by containing a simple radial structure and keeping the layout focused in the middle and all on one page. The navigation resonates the radial structure and plays off a similar grid.

Overall- does the site sustain your interest and engagement?
No because I felt the text content and the content of the videos was almost educational style and relayed too much boring information. I believe I am not the targeted audience for this film/website.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
The designer creates meaning by illustrating the importance of the content. You are meant to discover this film in a timeline by reading and watching videos in a documentary fashion.

Are they using metaphor? (Remember, metaphor is very common in our experience with computers, sometimes so common we don’t even realize we are using it, i.e. the desktop, cutting and pasting, file systems, buttons, etc.).
Yes, through the use of icons like old TVs, arrows, play+pause buttons, sun dials, etc.

Is there a narrative, story or event that unfolds over time?
Yes, it unfolds over the course of Robert McNamara's life as shown with the dates.

Is this narrative linear, non-linear, or multi-linear?
The narrative is set up in a linear fashion but still allows the user to jump to any point in time.

Reflection of the User:
Is there a reflection of you, as the user, on this site?
Yes through feedback of interaction.

Does it change according to your specific visit?
No.

Do you receive mouse feedback? text feedback?
Yes you receive both mouse and text feedback when you click on any of the interactive elements.

Does the site store any choices you have made?
Yes in small bits when you click on a date and then click again to view its related text, the site will remember what date you were on. The same goes for other links.

Are you engaged enough in the site to linger and explore?
Not really. If it wasn't apart of the assignment to go through the website and learn about it I wouldn't have dove in as far. The site simply did not make the film seem appealing to my tastes.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself?
It leads you to pay more attention to the content as the design has a very minimal feel and does not protrude much from the main content elements.

Does the design feel transparent or “natural”, leading you to focus on the content
and forget the design completely? Or – Is attention called more to the design itself?
Yes it feels transparent but not completely as it does a good job of containing the content so you know its bounds.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?
Yes the amount of transparency of the design helps keep focus on expressing the film and it's supporting content.

ScreenShot:


Navigation:
Is it easy to navigate or difficult?
It's easy to navigate with the simple text-link navigation at the top

How are you led through the site?
II am led through the site with text links at the top and color header bars in the main content area. Also I see text bleeding below the fold so I am led to believe there is more content beneath.

What visual clues are given to tell you how to interact?
The clues are the color and the mouse over color changing effects on the links. The links are also separated from the main content with a background bar to highlight the link area. There are also small arrows on the top left corners of the news items along with icons at the base of each news item.

Does the designer use a metaphors to get you to move through the website?
Yes

What Kind of metaphors are used? Organizational Metaphors = (organized by type, kind etc…); Functional Metaphors = performs a “real world” function (in Photoshop you can figuratively “cut” and “paste”) or Visual Metaphors (common graphic elements familiar to most – the traditional “play”, “fast-forward”, “rewind” buttons found on CD players)
Icons are used as metaphors to show the user what the icon-link will do for them. In this case there is a small tv, envelope, and word bubble to illustrate that you can watch, email and comment respectively.

Information Architecture:
Does the information in the site make sense?
Yes it makes sense. It's clear that it is a site for showcasing Bl:d's work.

Can you access the content you want easily?
Yes, quite easily.

How is the content organized? (By location, alphabet, timeline, category, etc? )
It is organized chronologically and in subsections of the site it can be user organized either alphabetically or chronologically.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
IcYes via the black, white and teal color scheme. The black areas tend to be informational areas or places where you find main navigational links whereas the white ares denote where you will find content and the teal areas highlight the headers for content sections.

Usability
Is this site easy to use?
Yes it's easy to use.

How do the above two concepts, navigation and information architecture, work in terms of making the site usable or not? Do the metaphors make sense with the content?
YesThe navigation is simple and in plain site while the architecture is also simple and supports the simplistic theme. The two together work well to show content and navigational elements without being overbearing to the user.

Overall- does the site sustain your interest and engagement?
Yes, it brings me in with the cool top graphic and titles that engage me to learn more. Also the content itself is quite interesting to watch and learn from.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
The designer creates meaning with engaging content. There are questions posed that solve problems and images to show solutions.

Are they using metaphor? (Remember, metaphor is very common in our experience with computers, sometimes so common we don’t even realize we are using it, i.e. the desktop, cutting and pasting, file systems, buttons, etc.).
There is slight use of metaphors in the use of icons for call to action areas at the bottom of content sections. They are as I previously described: tv, envelope and word bubble.

Is there a narrative, story or event that unfolds over time?
The narrative is a chonological discovery of their work and about them as a company. There are also micro narratives in their motion work. When you click on the TV icon to watch a piece of content a story unfolds of their solution.

Is this narrative linear, non-linear, or multi-linear?
The narrative is quite linear but you can jump around within the linear sequence.

Reflection of the User:
Is there a reflection of you, as the user, on this site?
In small amounts.

Does it change according to your specific visit?
No.

Do you receive mouse feedback? text feedback?
Yes when you mouse over links they change. There text feedback occurs after you comment or email something.

Does the site store any choices you have made?
Yes, the site stored information about the choices I made when contacting them.

Are you engaged enough in the site to linger and explore?
Yes because the substance of the content and the simple design that allows quick and easy access to most of their content.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself?
At first the design has my attention from the radical top graphic but then is quickly diminished by the content. So overall the content is what I pay attention to the most.

Does the design feel transparent or “natural”, leading you to focus on the content
and forget the design completely? Or – Is attention called more to the design itself?
The design is to call attention to itself only for a short time so that you understand the company knows a thing or too about design. But the lasting impression is to understand how good they are through their work.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?
Yes the transparency works well with the intended meaning.

ScreenShot:


Navigation:
Is it easy to navigate or difficult?
It is easy to navigate on the top half of the page but difficult to access content below the fold without scrolling. There are plain text links at the top that provide access to all the pages along with a useful search box.

How are you led through the site?
You are led with links in the color gray and blunt words like "vote now", "rate this website" and with simple numbers to crawl other pages. Because of the innate nature of wanting to click on images, the images take you to the referring website.

What visual clues are given to tell you how to interact?
As mentioned above the color grey is used as the link color and call to action areas. Also larger type helps direct your eye to interactive areas. These areas are also highlighted with a thick white border around the content divisions. Closely cropped images make you inclined to click and see more.

Does the designer use a metaphors to get you to move through the website?
There are really no metaphors used on this site to encourage interactivity or movement. It relies solely on plain text/graphics and slight shift in color to activate the user.

What Kind of metaphors are used? Organizational Metaphors = (organized by type, kind etc…); Functional Metaphors = performs a “real world” function (in Photoshop you can figuratively “cut” and “paste”) or Visual Metaphors (common graphic elements familiar to most – the traditional “play”, “fast-forward”, “rewind” buttons found on CD players)
N/A

Information Architecture:
Does the information in the site make sense?
At first it is slightly difficult to understand the information on the site without arbitrarily clicking a link to see what happens. There is a FAQ at the top of the page that describes why the particular information is on the site but it's not very evident at first glance.

Can you access the content you want easily?
The content is very easy to access as there is no clutter or excess information and only the minimum needed. A simple cropped image, vote now links and feedback about the votes. Previous content is also very accessible via the simple page navigation on top.

How is the content organized? (By location, alphabet, timeline, category, etc? )
The content is organized chronologically by the order in which the author published a submitted link. Otherwise the user can also re-organize the content by using the organizational links at the top.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
The hierarchy relies in the size of text and if something is gray or black. The words "VOTE NOW" bring your eye over to the subdivision of a content area and then encourage you to read and understand that you need to select a rating below with the words, "Rate This Website:". The image to the left of this area is much larger and the only content in color so that stands out the strongest and with most users, encourages them to click. It is not plainly described that you should click to view the site first before rating.

Usability
Is this site easy to use?
It is easy to use but arguably hard to understand which call to action you are to begin with.

How do the above two concepts, navigation and information architecture, work in terms of making the site usable or not? Do the metaphors make sense with the content?
The two concepts make the site usable by allowing extreme focus on the content with no other interruptive elements or metaphors. There are no extraneous graphics or cues which may or may not be helpful since most website users are led with stronger visual cues.

Overall- does the site sustain your interest and engagement?
For me, the site does not sustain my interest for very long. The site is lacking in visual interest and the cropped images just look pretty and do not engage me to interact.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
I believe that the designer wasn't trying to create meaning in this site other than showcasing other people's work. He or she simply wanted a user driven site to give feedback to other users about what everyone is looking at and finding interesting. This establishes that the meaning is to rate websites but isn't clear on what should compose your attributes for rating; simply a number to denote whatever you want it to mean.

Are they using metaphor? (Remember, metaphor is very common in our experience with computers, sometimes so common we don’t even realize we are using it, i.e. the desktop, cutting and pasting, file systems, buttons, etc.)
They are not using any metaphors because they do not want to take away from or distract the user from the image or rather the website needing to be rated.

Is there a narrative, story or event that unfolds over time?
Not really. One can see that there are many previously rated websites that are shown by numbered links to older pages. They do not unfold overtime because the user must interact to see older material.

Is this narrative linear, non-linear, or multi-linear?
This website has a linear face but you can access older pages without going through each section sequentially in a non-linear fashion.

Reflection of the User:
Is there a reflection of you, as the user, on this site?
There is. The reflection is shown after I have clicked a rating link. The site then reacts and shows my vote increasing the vote count and the resultant vote average rating.

Does it change according to your specific visit?
Yes it does change by remembering which sites you voted on and denoting the rating you picked and removing the "VOTE NOW" words to be replaced with the current rating.

Do you receive mouse feedback? text feedback?
When the mouse hovers over gray links the links turn white. As mentioned above when I click the rating link it gives me text feedback about my vote.

Does the site store any choices you have made?
Yes, the site stores my rating choice and probably my general internet information that cookies and webstats usually acquire.

Are you engaged enough in the site to linger and explore?
No I am not engaged. It's too simple and bland with poor visual cues.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself?
The site design does a very good job of portraying the content and taking your attention away from the site design by using a muted color scheme and no metaphors.

Does the design feel transparent or “natural”, leading you to focus on the content
and forget the design completely? Or – Is attention called more to the design itself?
It feels quite transparent and calls little attention to itself.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?
The transparency makes perfect sense for the intended purpose of the site wanting to showcase other websites and not its own.