“Get it” testing - Show them the site and see if they know how it works, it’s purpose, the value proposition, how it is organized, easily navigable.
Key task testing – Ask the user to do something and watch how well they do.

You may find that a combination of the two may yield the best results. Either way, have a few questions prepared for the user to either answer or perform during the session.

The point of testing is not to prove or disprove something. It’s to inform your judgment. What it does provide is valuable input which, when combined with experience, and common sense, will make it easier to make a wise decision about your site. Avoid discussing your site before the test begins. You want to see if the user can use the site from a standing start.

Instructions

• Open the Silverback App and start a new project.
• Name the project with the name of your site.
• After you’ve created a new project, start a new session.
• Enter the test subject’s name and start the session.
• Start the session.
• Export the session as a Quicktime movie.
• Save a review the session with your group members.

Complete user testing on your site with at least two times with two different people. You will turn in to the drop box the following items.

• Exported Quicktime movies (2) of the testing session.
• Documentation of the questions/instructions given to the user and input you received from them. (Text Edit Document)

Put the movies and the written document into a folder named: lastname_testing ex. barnett_testing

After seeing the users reaction to the site it’s time to make those little improvements to the flaws they (hopefully) were able to point out.

Resist the impulse to add things. Instead consider taking something away that was distracting for the user rather than add more stuff to confuse them.

Fix the obvious mistakes with easy solutions right away. Also, focus on the things you can fix with little effort and that are highly visible. Prioritize your tweaks to get the most benefit from the user testing.

Some cool 5 minute upgrades after you’ve completed your testing.

• Increase scannability with meaningful emphasis
• Variety and variation in the title and body fonts
• Header hierarchy
• Using CSS borders for emphasis
• Making your design pop

Absolute and Relative Positioning
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Image Sprites for Navigation

http://css-tricks.com/css-sprites/

Box Model

http://css-tricks.com/the-css-box-model/

and Floats

http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/

UPDATE: This is no longer a required assignment. (You’re welcome) Instead, just see it as a way to learn CSS techniques you can utilize for your final project.

Exceptional comprehension of PSD to HTML/CSS conversion

Use only PSD graphics you created, or downloaded as a theme template, and convert the design into HTML/CSS.

Screencasts and tutorials for PSD/HTML conversion:

• Create A CSS Layout From Scratch
• Converting a Design From PSD to HTML
• Converting a Photoshop Mockup Series: Part 1 of 3
• Build a Sleek Portfolio Site From Scratch
• PSD to HTML Tutorial List
  
• PSD to HTML Conversion for a Set of Web Designs – Advanced
  

Download PSD themes to work with:

• PSD Themes
• Free PSD Template List
• Bevel and Emboss: Free Templates
  

Average understanding of markup and styling

If it’s hard for you to begin coding a design from scratch then start with the code already build into a template. You still need to know how to modify the template and look of the website to make it your own.

Free CSS Templates

Opensource Templates

Mediocre grasp of replacing content and images

You can still use a ready made template but with little or no editing of the css styles or HTML markup.

Questions

1. What are the things YOUR home page will accommodate? Teases? Content or feature promos? Timely content? Deals? Shortcuts?
2. Determine how you will accomplish these abstract objectives.
   • Show the users what they are, and aren’t, looking for.
   • Have a clear starting point for your users. Where to start…
   • Establish credibility and trust?
3. What does “above the fold” mean?
4. Are you going to have a tagline or welcome blurb to help get your message across? What is it?
5. What is your opinion on drop downs?
6. What was Amazon’s tagline in 1998?

The HTML document should meet these standards:

Include both the question and the answer in a few short sentences. All of the questions are topics discussed in chapter 7 of the book.

Post questions to your microsite

Add a new html page to your microsite directory and title it “reading7-8.html”. Then add a link to this assignment on your index page.

The first step you will take in developing your final site is structuring the basic user interface for your homepage and sub pages. This part of the design process will not focus on colors, texture, and typography but rather on clean, logical organization of the information on the page. Read about the benefits and reasoning behind grey boxing from {e} House Studio and Jason Santa Maria before starting on your mockup. You might find it useful to sketch out a rough layout on paper before you take the grey boxing into Photoshop or Illustrator.

Your mockups can be created in Photoshop or Illustrator and should be designed with a grid in mind. Refer to the popular 960 grid system for examples of finished sites and how they make use of the grid. Templates can be downloaded for a variety of graphic applications including PS, Ai, and Omni Graffle.

Use this grey box model as a preliminary mock up of your home page as part of the alpha presentation.


Be sure to include all the important components mentioned in the Trunk Test.

• Site ID
• Page name
• Sections
• Local navigation
• “You are here” indicators
• How can I search?

Introduction:

Title page: name of project, names of team members, group e-mail addresses, title of site, date

Abstract:

150 word paragraph; State the problem, methods to solution, expected results; No references or examples should be included; short and to the point.

Table of contents:

Report should break the project down into components; this is a listing of those.

Body of report:

Introduction: background motivation for the project. This section establishes the need for the project. State primary and secondary audiences.
Statement of objectives: the clear objectives set out for you project, purpose of the site; it’s scope.

Description/Treatment of the project:

Make us “see” the project by describing the proposed look and feel, what strategies you will employ, technical requirements, plug-ins; include a preliminary page mock-up.

Tasks and Milestones:

A graph that divides the life of the project into definable tasks (vertical axis) over time in weeks (horizontal axis). Add ticks to the horizontal axis that include important milestones you are expecting to meet.

Roles each team member will perform:

Titles and responsibilities assumed by team members.

Formalized Pre-Plan Site Map:

This plan will be derived from research/revision of your first draft site map. You should also include a storyboard of your site that will give an idea of how the data will be laid out on the page.

Description of design:

Overall metaphor for the design. Look and feel. How it works, user scenario(s). Navigation. Links to other sites and why.

Technical approach:

Design choices; Tools/applications you will use; workflow/expectation for delivery of required media assets.

Design and project schedule:

Establish a schedule for your project that will give your team the best chance to succeed. Include delivery of media assets (sound, picture, video etc). Each team will agree to upon a schedule and will post their schedule in the classroom. Your team should create a schedule (preferably a WBS (work breakdown structure) based on the end delivery of your prototype website.

What is your testing schedule?

Make sure your project leaves enough time for testing early and often during the actual coding and development process, and of course BEFORE roll out of your prototype.

Maintenance:

Since it is important to keep sites up to date, your team will also be required to present information pertaining to required maintenance of the site after roll out.

Alpha presentations will be made Thursday, May 13th. Be prepared to present in front of the class with at least a grey box model of the mock-up of your homepage as visual support for the presentation. Keynote/Powerpoint and/or other visuals are required to receive an above average grade for this assignment. This alpha presentation, although a preliminary step in the evolving Web development process, is important and should be well thought out and completed thoroughly.

• What site is this? (Site ID)
• What page am I on? (Page name)
• What are the major sections of this site? (Sections)
• What are my options at this level? (Local navigation)
• Where am I in the scheme of things? (“You are here” indicators)
• How can I search?

Pair up with someone and choose two websites for them to do the Trunk Test on. One site should have all these components easily identifiable, while the second may have a few missing.

Trunk Test Assignment

Create a new html document that you will link to from your microsite homepage and name it trunk_test.html.

Evaluate the two sites chosen by your partner and identify each of the important components listed above. For each site include the following:

• Site url (linked to website)
• Screenshot (cmd + shift + 3 / 4 [space] )
• Answers to the questions above

Each person should evaluate two different websites and link to their Trunk Test assignment and update their microsite on the mhccim.com server.

This will begin the final project. You will have an opportunity to pair up with at least one other person to work on the final with. It is optional, however, to have a partner. You can work alone on the project.

Each person, or group of people will turn in one copy of this assignment, but all members of the team should link to this assignment from their microsite.

Gather with your team members and come up with an idea for a website you would like to create. Answer these questions on a new html assignment page.

1. Briefly describe your site (180 words). Describe potential colors, external content (links to other sites etc.) Describe your site visually and what do you think it will look like?
2. What purpose will your site use (other than to fill a requirement for this class)?
3. Who is your target audience? Age, gender, etc.
4. What should your audience expect from your site? (180 words minimum)