Powerpoint mockup revisions

Turn in a new copy of your powerpoint mockup.  Revise the mockup based on

  • feedback from in class presentations.
  • results of your paper prototype study

Include a paragraph that describes why you made the changes you made and why you ignored any feedback or results that you ignored.

Turn in one powerpoint presentation per group on learning suite.

Responsive Layout in HTML

The point here is to learn how to do responsive column based layout in HTML using CSS.  This will give you a tool for making prototypes simply and easily.  There are more than 1 tools and sites for doing this automatically.  We are going to roll our own for two reasons.  First, you need to know how it works.  Second, it’s not that hard.

What to do

Modify your “star trek” and “star wars” movie results pages from the JSON project so that the the movies are laid out in rows and columns.  If the window width is greater than 500 pixels, arrange the movies in rows with 4 movies per row.  If the window width is less than or equal to 500 pixels, arrange the movies in rows with only 2 movies per row.


The big thing to keep in mind is that the blocks of data (ie each cell containing a single movie) is nothing more than a block of text that is just the right width so that n of them fit across the browser window (where n = the number of columns).   The width of a cell is expressed as a % so that the cells change size as the browser window changes size.

Each cell should take 1/4 of the row.  Create a “cell” class in CSS that defines a cell. Cells should be arranged within a “section” class.

For example, if your page contained

	<div class="section">
		<div class="cell">
			Star Trek I
		<div class="cell">
			Star Trek II
		<div class="cell">
			Star Trek III
		<div class="cell">
			Star Trek IV

Then each of the Star Trek Titles would appear in their own column if the widow is wider than 500 pixels.

This can all be done using blocks in CSS.  Here’s a few places to look:

What to turn in

A link to your page as before.  Turn it on on learning suite.

First Group Project: Critiques and Final Report

Designing a solution story for your first group project will involve two in-class critiques and a final report.  Your final report should be informed by your contextual inquiry results and both critiques.  You don’t have to make changes based on every comment made in every critique, but you do need to acknowledge all of the critiques even if you ignore some parts.

Critique #1

The purpose of this assignment is for your group to broaden the set of solutions to 10 possible solutions and then to narrow that down to 1 solution candidate for in-class presentation.   And then to get feedback on that solution idea from the class.  This is a six part assignment.

  1. Generate 10 solution ideas.  These can be new ideas ore refinements of ideas you’ve already discussed or presented.
  2. Write 2 pages on these ideas and on how you generated them and why you chose the one you chose for the next step.
  3. Select one of your 10 solution ideas for final presentation.
  4. Prepare a PowerPoint deck that contains:1 slide with your problem VAOW statement, 1 slide with a short description of your solution, 1 slide of rational for why your solution reflects your user observations, 4-6 slides of storyboard sketches showing how your solution solves the problem.
  5. Select one person to make the presentation (who has not presented before) and one person as critique scribe.
  6. Create a word document which contains the following
    1. Your powerpoint slides as used in class (you’ll need to insert the slides into the word document).
    2. The 2 page writeup described above.

Submit that document through learning suite.

Critique #2

The purpose of this assignment is for your group to revise your solution idea based on the critique #1. This is a three part assignment.

  1. Based on the feedback you received in Critique #1, your contextual inquiry and your own insights, revise your solution story.
  2. Prepare a new presentation of your revised solution.  Include a slide at the end which describes how you changed your solution and presentation based on critique #1.  Be specific.
  3. Present the new presentation in class.  Choose a presenter who has not presented before.

Submit the powerpoint slides through learning suite.

Final Report

The purpose of the final report is to synthesize your observations, critiques and thoughts into a coherent report.  This is the time to avoid intellectual laziness.

Prepare a 4-5 page report which does the following:

  • Summarizes your key observations from the contextual inquiry.
  • Tells the story of how your solution works (with pictures).
  • Show how your solution is grounded in observation from contextual inquiry.
  • Describe how your solution evolved in response to critiques.

Be very specific about how your solution story is grounded in your contextual inquiry.


Overview of the First Group Project

There are two tasks for you to complete in this project:

  1. Problem formulation.  What problem are we going to solve?
  2. The solution story.  What’s a story that tells how the solution is going to solve the problem?

This is the first big project of the class.  There will only be two big projects.  We will work with this design for about about a month.  This is not enough time to understand a problem then design or prototype a solution.  So our focus will be on problem formulation and refining a solution story.  We will skip elements like layout, color scheme, interaction flow.  But we will get to those elements in the second project.

The project involves several individual and group elements listed below.  You will be in groups for this project and we will reorganize the groups for the second project.

  1. Group: Finding a user problem.
  2. Individual: See VAOW Statements
  3. Group: Contextual Inquiry prep work
  4. Group: Solution Design Critique 1
  5. Individual:  Doing the Contextual Inquiry
  6. Group: Report on the Contextual Inquiry
  7. Group: Solution Design Critique 2
  8. Group: Solution Design Final Report

Drag and Drop


Give your pages interactivity by adding “drag and drop”  Take your star wars or star trek list of movies (just a list, not the responsive layout) and add functionality so that the user can re-order the movies by dragging and dropping them.

This is a test of the model-view-controller architecture and walks you through some functionality built in to HTML.

Where to Learn More


These are suggestions not requirements.

Store your movies as objects in a javascript array.  When a movie is dropped into a new position, update the JavaScript array to reflect the new ordering and then rebuild the HTML displayed as you’ve done before as if a button had been pressed.

Write a method, I called mine “showTheMovies”, which goes through your array of movies in order and writes them to the screen in divs.  Don’t forget to call this function after reordering the movie array.

In each div for each movie, set the div id =”n” where n = the index of the movie in the array.  For example, the first movie in the array is written into a div as follows <div id=”0″ … > Star Wars … </div> (that’s a zero in the quotes, the font is a little unfortunate here).  Later you can use the div id as an index into the array of movies.

Inside a drop event handler, the phrase

var targetID = ev.target.id; 
var $targetBlock = jQuery('#'+ev.target.id);

means the following: Assuming that ev is the event passed into the handler, get the ID of the target and store it in targetID. Then use jQuery to get the block with that id. Store the block in $targetBlock.

In the drag event handler, you might add something like the following


This adds the id of the div being dragged for handy reference later in the drop handler. Then in the drop handler, you can get the block being dragged as:

var sourceID = ev.dataTransfer.getData("id");
var $sourceBlock = jQuery('#'+sourceID);

You can use the sourceID variable as an index into the movies array.

Here’s a starting point for JSON and jQuery from before.

What to do

Modify your JSON assignment so that you can drag a movie to a different place in the list.

Submission Instructions

Same as before:  make a page on your CS account and submit the link through Learning Suite.


Layout in HTML


The goal is to learn how to control the position of objects and use a grid system to assist in the layout of a user interface.  When a page is viewed on a device with a smaller screen, the page layout should respond to the size change.  The class schedule for this class does that.  To see this, view the page on your cell phone or reduce the width of your browser window until the schedule table is reformatted.  

A significant consequence of responsive design is that you won’t layout pages and experiences by placing a button or widget precisely at a certain location on the screen.  Instead you’ll think of layout as assigning elements to columns.  The number of columns and assignment of elemetns to columns will change with the screen size while maintaining a (hopefully) useful design for each size.

Where to Learn More

What to do

Create a CSS layout scheme that will adapt to varying widths of windows. Your scheme should define a class “section” whose contents will occupy the entire width of the browser window. A <div> tag with this class will basically create a row across your window.

Create a class “column” that will define a column within a section. You should define your columns so that each column occupies up to 1/4 of the width of the window. There should be 20 pixel gutters (white space) between the columns.

When the window width becomes less than 500 pixels, your columns should switch to widths of 100%. This will cause the columns to stack vertically rather than lay out horizontally.

Create a web site of your choosing that demonstrates the correct functioning of your layout scheme.

Example use:

	<link rel="stylesheet" type="text/css" href="mystylesheet.css">
	<div class="section">
		<div class="column">
			name: George
		<div class="column">
			address: 2690 Burklaun Dr., Montgommery, AL 36111
		<div class="column">
			phone: (123) 456-7890
		<div class="column">
			George was born in Alabama at a very early age. His closest relatives
			were his mother and father. He had seven brothers and 4 sisters as well
			as two dogs and a pig.  He loved golf but never excelled at it.

It your stylesheet is correctly defined, the above information should appear across the page in 4 equal columns. Each column should wrap if there is more information than will fit. If the window is shrunk to less than 500 pixels then this information should stack vertically rather than horizontally.


Use display:block to make certain that each of your div tags is laid out in a rectangular block rather than flowing into other tags.

Use float:left so that your columns will stack up across the window left to right.

Use padding to generate the gutter space

Use @media to control when your columns will lay out left to right and when they will stack vertically.

Use :first-child and :last-child as well as padding-left and padding-right to eliminate gutters to the left and right of the entire section.

Start with an assumption that your display is 960 pixels across and then remove the 3 gutters and divide by 4. This will give you your column width. But you don’t want the width in pixels because that is not flexible as the window size changes. Convert your widths into % and then they will flex with the window width.

Submission Instructions

You do your assignments by creating web pages within your CS department account. (You may also use any other location that lets you publish web pages). Build the requested web pages and then submit the URL for the start of your assignment through Learning Suite.

If your CS account name is “kermit” then the URL for your personal website is “http://students.cs.byu.edu/~kermit/”. In the file storage for your CS account is a folder called “public_html”. Anything you put in this folder or its subfolders will be available through your personal website.

For example: if you created a file called “george.html” and put it in the folder “public_html/people” then that file could be reached by the URL “http://students.cs.byu.edu/~kermit/people/george.html”

JSON and Javascript


JSON is a data exchange format designed for Javascript.  There are excellent tools for working with JSON but you are going to do this by hand.  This will make sure that your project doesn’t depend on libraries that are known by only a few members of your group.

In this project you’ll do the following:

  • Download JSON files from a web site.
  • Convert JSON data into JavaScript objects.
  • Convert JavaScript objects into HTML that dynamically appears in a web page.

Where to learn more

What to do

There are two files located at the below links. These files each contain a list of movies and release dates. You will use json to download the list and javascript (not jquery) to format and display on the web page. In the next json assignment you’ll basically repeat this assignment with different movies and more complex JSON but you will use jquery.

  • https://dl.dropboxusercontent.com/u/5771520/256/movies/pixar.json
  • https://dl.dropboxusercontent.com/u/5771520/256/movies/disney.json

(Apologies to those people who attempted this lab early. The links were http instead of https. JSON is picky about urls.)

These are the specs for your web page:

1) You should display 2 buttons (they should be styled nicely and react appropriately).
   a) One button says Pixar and the other says Disney.
   b) When a button is clicked it should display the list of all of the movies nicely formatted with column titles, such as “movie title” and “release year”, and good readable style.
You’ll probably html tables to achieve this. Some thoughts about tables are given below.

2) Above the table of movies should be the name and release year of the most recently released movie in the list. This should be clearly labeled.

3) The displayed data should change whenever the button for the other studio is pressed.


You do your assignments by creating web pages within your CS department account. (You may also use any other location that lets you publish web pages). Build the requested web pages and then submit the URL for the start of your assignment through Learning Suite.

If your CS account name is “waldo” then the URL for your personal website is “http://students.cs.byu.edu/~waldo/”. In the file storage for your CS account is a folder called “public_html”. Anything you put in this folder or its subfolders will be available through your personal website.

For example: if you created a file called “george.html” and put it in the folder “public_html/people” then that file could be reached by the URL “http://students.cs.byu.edu/~kermit/people/george.html”


Notes About Tables Courtesy of Sam’s teach yourself HTML, CSS, & Javascript:

Tables are not easy to style. In addition to the styling of the outer edge of a table you can do (like to any other element), each cell, row, and column of the table have their own style tag.

Its useful to apply styles and alignment (text-align, margin, padding, etc) to the <tr> tag to save yourself a lot of trouble, since it will then be applied to each cell in the row.

Commonly used style=”vertical-align:” property values: top, middle, bottom, text-top, text-bottom, baseline. Items are horizontally centered through the standard ” text-align:center”

You can set width of the entire table like you would any other element, example: <table style=”width:500px; height:400px”>

You can set each column to have its width be a defined percent of the total table or have a specific size. Same for cells.

You can force a cell to stretch across more than one column or row (a process known as spanning) by using colspan=”<some int inserted here>” or rowspan=”<some int inserted here>”  (they are their own attributes separate from the style attribute, much like href and src are in the <a> tag).

You can set uniform border size, as well as padding and spacing  between the cells in the table by using
<table border=”<some px>” cellpadding=”<some px>” cellspacing=”<some px>”> .

Example for setting width of columns (done by setting width of headers):

<!– Sports example –>
<th style=”width:35px”>Logo</th>
<th style=”width:175px”>Team</th>
<th style=”width:25px”>W</th>
<th style=”width:25px”>L</th>
<th style=”width:25px”>GB</th>
<td><img src=”sanfrancisco.gif” alt=”SanFranGiants”></img></td>
<td>San Francisco Giants</td>

Example for cells:
<table style=”width:100%” border=”2″>
<td style=”width:20%”>skinny cell</td>
<td style=”width:80%”>fat cell</td>

Javascript 2: Buttons


Same as the Basic Javascript assignment.

Where to learn more

Same as the Basic Javascript assignment.

What to do

Use Photoshop or GIMP to create three images that implement a button. When your button is inactive it should show a large number 3. When the mouse hovers over your button the image should change to the same number 3 in a brighter color. When your button is pressed it should change to a -5 (minus 5). When your button is clicked you should add all of the numbers that are multiples of 3 between 0 and 300 to the bottom of your web page. It should exclude any multiples of 5. For example “0, 3, 6, 9, 12, 18, 21, 24, 27, 33 … “. It should only do this once. On the second and any subsequent clicks your button should pop-up an alert dialog that says “No More”. You should draw your own images rather than downloading them with Google.

Mouse click and mouse press are not the same thing.  Handle each correctly.

What not to do

Don’t use JQuery.  (We’ll add that in a later assignment.)  It’s good to know Javascript so that you can write your own code to do things that are not easy in JQuery.  Hopefully you’ll have straight Javascript and Javascript/JQuery in your box of tools when you are done and can chose the right tool for the right job.


You do your assignments by creating web pages within your CS department account. (You may also use any other location that lets you publish web pages). Build the requested web pages and then submit the URL for the start of your assignment through Learning Suite.

If your CS account name is “kermit” then the URL for your personal website is “http://students.cs.byu.edu/~kermit/”. In the file storage for your CS account is a folder called “public_html”. Anything you put in this folder or its subfolders will be available through your personal website.

For example: if you created a file called “george.html” and put it in the folder “public_html/people” then that file could be reached by the URL “http://students.cs.byu.edu/~kermit/people/george.html”

Talk Aloud Study and Powerpoint Mockup Revisions


Find out what users are thinking when they use your solution.

The Study

Put the fully linked powerpoint mockup in front of a user.  Ask the user to perform a task.  This task should be something interesting and relevant.  You know what is likely to be interesting and relevant because you have completed a contextual inquiry and card sorting study.

Ask the user to talk aloud while they use the mockup.  They should say what they are thinking and what they are trying to do.

Make notes but do not record the conversation.  You are trying to keep track of what surprises you about their interaction.  Where did they get stuck?  When did they click on something you weren’t expecting?  When did their model of the problem and how to solve it not match your design?

Repeat this process for two or three tasks

Repeat the process for three users.

Individual Submission

Turn in a word document which contains the following

  • A list of the tasks you asked users to perform.
  • A list of problems you identified with the wireframe design during the study.

Processing the Study

As a group, review your individual observations.  Synthesize these observations into a set of changes to the powerpoint mockup.  Sometimes you’ll finding conflicting observations and sometimes you’ll have a user that is significantly different than other users.  Make good decisions about what changes to make.  Don’t avoid changes that are difficult to make simply because they are difficult.

Group Submission

Turn in a powerpoint document with a revised powerpoint mockup.

Turn in a word document with your rationale for each change.  Include the rationale for at least one change you decided not to make.  Your rationale should be directly connected to observations made in the talk aloud study.