6 & 13 Peer Review

Posted on by

Peer review is an important life skill. Do it effectively and with tact.

Constructive Criticism

Be positive, let your partner know what you liked. Praise, comment, and correct in that order. Make positive comments about the design, its execution and overall effectiveness of the site before explaining what does not meet with expectations. Look at the code to see if it is properly annotated, well organized and correct. If you can help the person achieve their goals, do that.

Critical Review Examples

Detailed critical review feedback can be found on Web Standards Sherpa, a website dedicated to constructive criticism, to highlight standards compliant solution that solve real world problems. You can see articles that review the headlines of the New York Times and there are many others, including a critique of their own site.

The goal of WebStandardsSherpa.com is to provide web professionals the opportunity to receive feedback, glean advice and learn best practices from experts in the field to help improve the quality of their own work. It’s very instructive to see professional and pedagogically useful critique at work.

Reacting to Criticism

You do not have to incorporate your classmate’s suggestions. Trust your own judgement about your design, determine which issues are most important, though pay attention to comments if they are made by more than one peer, and get another opinion if you aren’t sure about something.

User Testing

One way to get feedback is to user test your site. You will use the SilverBack application to record the user test. Download the application, which is free for 30 days.

Doing a user test is straight forward. Create a project, and create a session which will record the your peer review partner’s “user interaction” as they go through your website. When you are finished, export the files at 50% size and low resolution, which is still acceptable, and reduces the file size to around 4mb/minute.

Take notes as your peer review partner “user tests” your site. If you are doing the user testing, try to verbalize your reaction and decision making as you go through the site to make it easier for the site’s owner to note how the site user experience works, or what does not work.

Watch the video of your partner going through your site. I do not see these taking more than a minute or two, which can easily be compressed and emailed to me, or posted on your site. If you go over two minutes, you can place it on your server with a link so I can download it.

The user testing experience will not be under ideal and pristine conditions. Ideally, a user test is done the first time a user uses the site. That may not be possible at school. Set up Silverback as the first thing and do a user test with as few preconceived expectations as possible before revealing anything about your site except who its target audience is and what you are selling.

Though this is not a pristine user experience test — the video isn’t representative of an industry standard user test — it will be a good lesson in highlighting the role of testing user interactivity nonetheless.

Tasks your peer review partner should perform.

  1. Find the product/service/idea that is being sold on the site.
  2. Find out additional information about the product/service/idea.
  3. Contact the seller with a question.
  4. Check the entire site to for completeness.

Here is an example. To see it at full resolution, right -click to open the video in its own window:

Peer Review Check Lists

Two lists of questions. The first is a core list every review has to cover. Be constructive, not just “yes” or “no”. Everyone should go through the second list before handing in your final web site or publishing it on the web. I will use the same lists to check to see if you’ve dotted your “i”s and crossed your “t”s, so to speak.

Don’t worry about browser compatibility. That is included because it is a criteria the real world uses, but note that it is no longer of much consequence, as IE 6-8 usage is below 10%.

You use of the HTML5 boilerplate should make your site work for even the most prehistoric browsers, though they will miss the CSS3 goodness.

These lists are resources for you to ask pertinent questions. Use them to help formulate your critique. They are meant to be helpful to you and your partner.

I will use these lists as my measure for evaluating how well you analyzed your partner’s web site, as well as in grading your final project.

Help Your Partner

Everyone has learned a lot, but in this little time, not everyone will have learned everything equally well. You will have the opportunity of helping your partner fix at least three issues in their website where they may not have figured out the best way to do something.

We are in this all together, and being able to

Core Peer Review Questions

  • Intuitive reaction

    1. Take the five-seconds test. What’s your immediate response? Your split second intuition is often canny in its ability to present an accurate picture that can get lost in more deliberated responses.
    2. How dos the site make you feel?

  • Clarity of Communication

    1. Does the site convey a clear sense of its intended audience?
    2. Does it use language in a way that is familiar to and comfortable for its readers?
    3. Is it conversational in its tone?
    4. Is the experience seamless?
    5. Do the pictures and the design facilitate the communication?

  • Accessibility

    1. Is load time appropriate to content?
    2. Is there an easily discoverable means of communicating with the author or administrator?
    3. Is the HTML semantic (can screen readers to navigate the site)?

  • Consistency

    1. Does the site have a consistent and clearly recognizable “look-&-feel”?
    2. Does it make effective use of repeating visual themes to unify the site?
    3. Is it consistent even without graphics or external style sheet? (it can happen)

  • Navigation

    1. Are the links obvious in their intent and destination?
    2. Is there a convenient, obvious way to maneuver among related pages, and between different sections?

  • Design & maintenance

    1. Does the site make effective use of hyperlinks to tie related items together?
    2. Are there dead links? Broken scripts? Pages that are not completed or look unfinished?
    3. Is page length appropriate to site content?

  • Visual Presentation

    1. Is the site worthy of a design student in its communication?
    2. Does it use distracting animations?
    3. Does it provide feedback? Using Javascript frameworks can enhance user experience, or detract from it.

  • Code

    1. Is the code clean and well documented?
    2. Is it optimized for Search Engines (SEO)?
    3. Does it have Google’s Analytics code?
    4. Does the HTML validate? Use the Unicorn Unified Validator Service and Check the HTML and CSS. You are to report your findings in your conclusion.

  • HTML5 and CSS3 goodness

    1. List the CSS3 features used. Were they used to good effect?
    2. Explain how well the document followed a semantically correct HTML5 document structure.
    3. Is the website future proof? Do they use media queries? Does it work on the iPhone/Android?

  • Overall Assessment?

    A list of fixes, suggestions and possible solutions to any issue that came up when assessing the website using the aforementioned considerations.

    Send this report to your partner later today, if you need more time to write it up than class provides, and send a copy to me.

Detail Checklist

  1. All text free from spelling errors?
  2. Content has been placed consistently?
  3. Page & Content formatting has been tested?
  4. Meta data has been included and is appropriate?
  5. Page titles are descriptive and SEO friendly?
  6. Images have appropriate alt text?
  7. Title attributes are appropriate and SEO friendly?
  8. Favicon has been created and displays correctly?
  9. Footer includes copyright and link to site creator?
  10. HTML has passed validation?
  11. CSS has passed validation?
  12. There are no broken links?
  13. JavaScript is error free?
  14. Displays & functions correctly in ie6? 5% of market share.
  15. Displays & functions correctly in ie7? 10% of market share.
  16. Displays & functions correctly in ie8? 40% of market share.
  17. Displays & functions correctly in Firefox 4 (Mac & PC)?
  18. Displays & functions correctly in Chrome 11 (Mac & PC)?
  19. Displays & functions correctly in Safari 5 (Mac & PC)?
  20. Displays & functions correctly in Opera 11 (Mac & PC)?
  21. Tested on the iPhone?
  22. Tested at 1024 x 768 resolution?
  23. Tested at larger resolutions?
  24. Web Statistics package installed and operational?
  25. 404 page exists and informative?