Advanced Web Page Scripting – Sample Assignment

Project Specifications

  • Responsive Design for a “Web App”
  • Multi-user game with avatars
  • Application “User Profile” Screen containing
    • Screen name
    • User ID
    • Location
    • Reputation
    • Status for the last five days
    • Battle Wins
    • Battle Losses
    • Alliances

Apply Progressive Enhancement Design Strategy

  • Download “Week 04 Lab – Media Queries Wireframe” from Doc Sharing
  • Start with the content in the 1-column wireframe
  • Apply Progressive Design Principles
    1. Design for content breaks rather than device breaks
    2. Start small, then work up
    3. Add minor breakpoints as necessary
    4. Text is king, should always be optimized (and trump images) for display
    5. Never completely hide content

Determine Content Breaks

  • Determine design breaks based on content (e.g. typographic principles)
  • Define at least 4 distinct screens
  • Draw screens as a “paper prototype”
  • Estimate at which pixel width each screen breakpoint should be placed

Polyfills (to enable adaptive design for CSS Media Query support)

  • Example of Modernizr feature detector code:


<!–load Modernizr library–>
<script src=”js/lib/modernizr.js”></script>
    <!–use Modernizr to load respond.js, if needed–>

<script>
if(!Modernizr.mq(‘only all screen’)) {
modernizr.load(“js/lib/respond.matchmedia.addListener.min.js”);
}
</script>

References

Create Your Code Prototype

  • Use your default “boilerplate” from Week 03
  • Add the page viewport
  • Size the page to fill the viewport
  • Add HTML markup corresponding to the wireframe
  • Add Webfonts
  • Add default JavaScript file as js/avatar.js
  • Sample code implementing “module pattern”
  • var avatar = (function () {
    //functions and variables go here

    //return stuff into “avatar”
    return {
    init:false
    }; //return “init” as false into avatar
    })(); //immediate execution
    //see what was left in avatar, elevator-like
    console.log(avatar.init); //will print ‘false’

Create Media Queries

  • Create CSS media queries for each breakpoint
    • In the <head> region, or
    • In the CSS file
  • Test the breakpoints by loading and resizing the browser window
  • Add css :before and :after to label the breakpoints
  • Sample CSS Code:
  • /* non-retina iphone, landscape */
    @media only screen
    and (min-width : 479px)
    and (orientation : landscape) {

         body {
             background-color:yellow;
         }
         #reporter:after {
             content: “iphone landscape, 480px”;
         }
    }

Design for Mobile – Sample Assignment

Week 03 – Homework – Interaction Design Flowchart 

For this Homework, you will begin developing a Interaction Design Flowchart for presentation in week 05.

Study Examples

Study Features of Process Flowcharts

Study Features of Ux User Flow Diagrams

Download Additional Examples

  • Download from “Week 03 Homework – Interaction Flowchart Examples” under Doc Sharing

Create a Interaction Flowchart

  • Use the material from your Personas
  • Create Your Storyboard first
  • Create your Customer Journey
  • Your Interaction Design Flowchart should match the “scenes” in your Storyboard
  • Add callouts on your screens to explain
    • Design elements
    • Interaction elements
    • Where the user interacts (often with a little hand icon)

Be Prepared to Share

  • You will share your Interaction Design Flowcharts in Week 04

Information Architecture – Sample Assignment

Week 06 – Lab – Group Content Inventory of Existing Site

In this Lab, you will find a website with a structure suitable for content analysis. You will then scan the site with auditing software, and group classify the data under High-Level Categories. Finally, you will determine a set of meta-data to further classify the content by, and create a scoring system defining content quality.

Scan a Website

Calculate Meta-Data for the Links

For a Content Value Check, you would use

  1. High-Level
    • Page Title
  2. Low-Level
    • Media Type
    • Source (site, 3nd-party, user-generated)
    •  Completeness
    • Writing quality
    • Labeling of information (titles, headers)
    • Findability via the site Search functions
    • Accessibility to the disabled and “browser-challenged”
    •  Relevance to audience
    • Currency (is information up-to-date?)

Develop a Scoring System

  • For each Low-Level content entry, figure out a scoring system
  • The content should suggest likely ways of scoring
    • 1 (ok), 0 (not ok)
    • 1-10
    • 1, 0, -1
    • 3, 2, 1, 0


Get Templates


Map Your Content Scan into the Templates

  • Check the pages for each link, and analyze content
  • Estimate meta-data values for each unit of content
  • Create a column which converts your scoring system to 0-100 (Excel formula)
  • Determine an overall score for each content “chunk”

Determine an Overall Quality Score

  • Based on your meta-data, classify the site according to content quality
  • Use the scoring system you developed for individual meta-data

Upload to your Process


Web Standards – Sample Assignment

Week 03 – Lab – Standards-Based Markup & CSS

In this Lab, you will apply more advanced markup, including:

  • Meta-data

You will also set up your CSS files, including:

  • Base CSS
  • CSS Reset
  • CSS Normalizing styles
  • Responsive Design breakpoints

Create Touch Icons


Create Splash Screens


Create the Site

Make Additional Pages

  • Make other pages on the wrapper site
    • 404.html
    • contact.html
    • about.html

Add ARIA Accessibility Tags

Add Microdata

CSS Files You’ll Need

  • CSS Reset or CSS Normalizer
  • WebFonts File
  • Your CSS styles file

CSS Reset
@link http://meyerweb.com/eric/tools/css/reset/

CSS Normalize
@link http://necolas.github.io/normalize.css/

CSS Responsive Breakpoints

@link http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/


Intermediate Web Design – Sample Assignment

Week 06 – Lab – Final Project DeReConstruct

In this Lab you will study what is needed to complete the Final Project in this course.

This is NOT a graded assignment, but you will need to complete this project by Week 11

Site Selection

  • You should have reviewed sites between Week 05 and Week 06

The Role of Your Process Book

You are expected to keep a Process Book during your site DeConstruct and ReConstruct

  • Formats
    • Written notebook
    • Online blog/discussion area/website (WordPress is good)
  • Check weekly with the Instructor
  • Turn in in Week 11

What to include in your Process Book this week

  • What you’re looking for in a site
  • The top ~5 sites which appeal to you
  • Why you chose your Final Project Site

Download Final Project Descriptions

  • Download from “Week 06 Lab – Final Project Timeline” under Doc Sharing
  • Download “Week 06 Homework – Strategy for Site De-ReConstruction” from Doc Sharing

Site DeConstruction is…

  • Things you don’t (yet) understand in the HTML, CSS, JS
  • Interesting CSS selectors
  • A description of the strategy for how the site layout was created
  • Quality of the site code

Site DeConstruction…

  • Site should be “ripped” apart to its basics
  • A wireframe should be generated, listing code features and Interaction Patterns

Site ReConstruction

  • What you changed in the site
  • Elements left out or added

Fundamentals of Web Page Scripting – Sample Assignment

Unit 3: Week 03 – Homework – Urban Survival Redesign Part I

In this two-week exercise you will analyze a website with poor information design and user interface. You will re-design the site according to standards, and encode a prototype of the new site in HTML and CSS.

Download the description from Doc Sharing

  • Go to Week 03, Doc Sharing, and download “Week 03 Homework – Urban Survival Redesign, Part I.”
  • The Instructor will guide you through the homework, and explain what is required to complete the work
  • You can visit the site on your own at http://www.urbansurvival.com

Note: DO NOT take any HTML or CSS from the existing Urban Survival site. You should start the project with a clean slate.

Create wireframes and a sitemap

Create a sitemap as described in the homework. The sitemap should attempt to organize the site’s 2000 pages by one or more of the following categories:

  • Date of blog post
  • Topic of the post
  • By audience segment
  • By media type

Create a directory structure and default pages

  • Following your wireframe and sitemap, create folders and default web pages.
  • You do not need to style the site to final form using CSS.

Upload your site to Doc Sharing

  • When you have completed the basics, ZIP your site and upload it.
  • You will refine your site’s structure and layout next week.

Additional tutorials:

Unit 4: Week 04 – Lab – Urban Survival Redesign Part II

Hand in your hand-drawn deliverables

  • The Instructor will collect your hand-drawn deliverables
    • Sitemap
    • Hand-drawn wireframe
  • After scoring, the Instructor will give back the hand-drawn material for the next step

Unit 4: Week 04 – Homework – Urban Survival Redesign Part II

Download the Exercise from Doc Sharing

  • Go to Week 04, Doc Sharing, and download “Week 04 Lab – Urban Survival Redesign Part II”
  • Following the Instructor, analyze your wireframes and sitemaps according to
    • Business case (stakeholders)r
    • Information design
    • User experience (Ux)
    • Page layout

Create the redesigned site

  • Download the “urbane survival” starter website (has a few default files) from Week 04 Doc Sharing
  • Create a directory structure (suitable for your information design)
  • Create a default page layout for the home page
  • Create a default page layout for a blog post page
  • Add basic CSS styling, if you can
  • Add your Photoshop logo, if completed (See Week 03 Homework – Photoshop Identity for Urban Survival)

Upload to Dropbox

  • Archive your completed starter redesign
  • Upload to Dropbox under “Week 04 Lab – Urban Survival Redesign, Part II”

Experience Design – Sample Assignment

Week 07 – Homework – Task Completion Testing

In this User test, you will check your User Flow via Paper Prototypes, and confirm the tasks you assumed to lead Users through the User Flow in fact do exist and work.  Looking at high-level tasks (e.g., ordering a product from a website), you will confirm that Users understand and can do the task in your Prototype.

  • The test is similar to that you conducted in USER TEST 3 with a Paper Prototype, but should be conducted onscreen.
  • You will do PROTOTYPING IN CODE with respect to User Interaction
  • If possible, do the Prototype layout and design using code as well

Define Your Testing System Prototype

  • Prototype must be onscreen
  • You can use scanned images of Paper Prototypes
  • Keep the Prototype in a “wire-framey” mode, rather than a complete Page Comp
  • At a minimum, add code that, upon a “click” on the page, jumps the User to the next page in your User Flow

Upload your Prototype

  • This will allow you to pull the site from any location
  • This will allow testing on desktop and mobile

Define High-Level Tasks

  • Examine the User Flow, Scenario, Storyboard for high-level tasks
  • Write down a list of at least 5 of these High-Level tasks
  • Define the “widget” (e.g. something from a Ui) kit that provides visual affordance for the task
  • There may be more than one widget – you are testing a task with several smaller sub-tasks

Create a Question Set out of Each Task

  • The Task: Log into an existing account
  • The Question:
  • If you already had a Username and Password, and were trying to Log in to your site, what would you click next?
  • …and what would you do next?
  • …and what you you click to finish

Get Users to Test

  • Invite Users to your testing
  • Time required will be 10-15 minutes
  • Test both interfaces
    • Desktop (will have to be in the class)
    • Mobile (will have to test ON the mobile)


Write Down the Results

  • Score how many times a User completes a task
  • Score partials for partial completion of a task
  • Derive a numerical % score for each task

User Experience 3: Project Dev – Sample Assignment

Week 8: Week 08 – Lab – SEO Page Testing

In this Lab, you will test the draft prototype page which describes one of your complete Ux projects.

Testing is for understanding, legibility, readibility, and findability.

User Priming

  • Their Persona is a “creative director” or “employer” looking to hire you
  • Their task is to understand your skills and abilities
  • Their goal is to evaluate you as a good/bad hire
  • Additionally they are evaluating your page for completeness
  • They carry out the task by scrolling through your page
  • They are looking for things you left out
  • They are looking for typos, bad images, and other errors

BEFORE THE TEST

  1. Do Google searches for Ux portfolios. Write down the keywords that tend to bring up Ux portfolio sites
  2. Use Google Adwords, Bing Webmaster Tools, or other keyword search tools to find terms related to your portfolio site
  3. Look at the results, and compile a list of keyword and key phrases your Employer site Persona would be likely to type in to find your site
  4. Adjust your page content, title and headers to match common keywords from your compiled list

Add Keywords SEO to your Site

  1. Add meta tags <meta name=”keywords”…> to your page with the keywords
  2. Add meta tag <meta name=”description”…> to your page which use the keywords and phrases to describe your site
  3. Add Facebook OGP tags to your page
  4. Add Twitter Card tags to your page


Sample Meta Tags


< meta name=”keywords” content=”user experience, ux, experience design”>
< meta name=”description” content=”I am a Ux designer with user experience portfolio work and interaction design experience as well”>

@link https://searchenginewatch.com/sew/how-to/2067564/how-to-use-html-meta-tags

Facebook OGP Tags

<meta property=”og:title” content=”Facebook Open Graph META Tags”/>
< meta property=”og:image” content=”https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png”/>
< meta property=”og:site_name” content=”David Walsh Blog”/> <meta property=”og:description” content=”Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects”/>

Tutorials for Adding Facebook OGP
@link https://davidwalsh.name/facebook-meta-tags

Facebook OGP Debugger
@link https://developers.facebook.com/tools/debug/

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Twitter Card Tutorials
@link https://dev.twitter.com/cards/overview

Twitter Card Validator
@link https://cards-dev.twitter.com/validator

TEST 1: Run the Google Search Test (SEO)

  • Have your testers try to find your website in Google
  • Have your testers try to find your website in Bing
  • What keywords did they use?
  • How do their keywords compare to your list?

TEST 2: Run the Main Page Test (non-SEO)

  • Have your “Final Project” Ux Page onscreen (or the home page of your portfolio) with keywords and phrases optimized from above
  • Use at least 3 Testers
  • Use a Note-taking test strategy:
    • User explore the page, making comments as they go
    • You write down their comments
    • After they have scrolled around for a while, you can ask them specific questions to see if they understood what you were trying to say
    • At the end, ask them if they would hire you(!)


TEST 3: Social Network Testing (SEO)

  • Have your testers log into their Facebook and/or Linkedin account
  • Have your testers type in the address to your website
  • Ask them what they learn by what appears
  • Ask them if they would visit your site, based on what they saw in the social network

User Experience 2: Prototyping – Sample Assignment

Week 6: Week 06 – Homework – Develop Usability Test for Your Prototype, Part II

For the Homework, you will develop a second usability test. This test will use your Visual Design “clickthrough” prototype, and will hone in on details of the designed “user journey” for your project. In addition, you will create a summary “dashboard” deliverable recording test results.

Type of Test

  • Summative (access current usability of a prototype)
  • Task completion
  • Use metrics to describe prototype quality

@link http://www.measuringu.com/blog/formative-summative.php

Users to Test

  • Ideally, test within your project demographic
  • Testing can work with users which only partly fit the demographic

Setting Tasks

  • Ask testers to complete a “customer journey” (a.k.a. a high-level task)
  • Examples:
    • Order a product
    • Login or register
    • Connect to a social sharing link
    • Search for information on the site
    • Identify the appropriate page for said Persona to use
  • Use at least 2 distinct customer journeys
  • Run the same test with the desktop and mobile prototypes

@link http://www.uxforthemasses.com/usability-testing/

Priming Document

  • Describe the Project, and the Customer Persona
  • Describe the specific task
  • If you’re “faking” server interaction, you may need to give your tester a specific name, password, etc. compatible with your static pages

Running the Test

  • Allow 3-5 minutes per customer journey
  • Ask testers to comment as they work
  • DO NOT help them at all!
  • Write down problems, insights as the test proceeds
  • Don’t ask about “feelings” – just ask users to complete your tasks

@link https://www.adaptivelab.com/blog/5-principles-for-lean-ux-testing

Metrics Possibilities

  • Numerical scores required!
  • Possible ways of generating numbers
  • Time spent on task, or subtasks within the user flow
  • Score task completion
  • Users scale satisfaction with interface (1-10)
  • Score individual pass/fail for steps in the task, giving a numerical score (e.g. 6/10)
  • Score hesitancy, stops, confusion during task completion

@link http://www.userfocus.co.uk/articles/dashboard.html

Build Your Plan into a Dashboard

  • A deliverable for your client/manager
  • Build the template now
  • You will “fill in” the template after conducting tests next week
  • Format
    • Infographic style
    • Suitable for delivery to clients, managers
    • Suitable for onscreen or printed consumption

@link http://www.userfocus.co.uk/articles/usability_test_plan_dashboard.html


Advanced Web Design – Sample Assignment

Week 6: Week 06 – Lab – Role Model Review

In this Lab, you will showcase your “role model” website choices to the class. After each student has presented, you will work in a group to determine the feature list required for the site. Finally, you will create a “first pass” wireframe in an online design tool, AND by sketching.

Part I – Presentations

  • Students present their 5 top websites, informally, to the rest of the class
  • Recommendation: chose a site with a “one-page” format, or a small nu
  • Discuss
    • Your site rankings (1 to 5)
    • The 3 best design features of the site
    • The 3 techniques using HTML, CSS, JavaScript you think are being used on the site
    • At the end of the process, student indicates which site want to emulate

Part II – Feature List

  • As a group, students examine each other’s choices
  • Inspect for
    • Visual design
    • Layout
    • Typography
    • Motion graphics
    • Interactivity
  • Each student then recommends their choice for the other student
  • Each student will have a recommendation from their list from every other student

Part III – Commit!

Part IV – Upload

  • A screen capture of your “quickie” wireframe for your Role Model site, done in a design tool
  • A scan of SKETCHED version
  • Put both in a folder, and compress
  • Upload to “Week 06 Lab – Role Model Review” under Dropbox