Creating Web Interfaces

an MSU Denver communication design course (spring '15)

[msudenver-cwi-sp15]

Connecting to the server via FTP

The expectation is that before the start of the crit Wednesday, your project 3 will be uploaded to the multisaft.com webserver, and you will have your browser open to navigate to your project 3 website. You can find the files at multisaft.com/cwi-sp15/.

To upload your project 3 files, use Filezilla and refer to the screenshot below or follow these instructions:

1. Go to File > Site Manager… (or type Cmd + S).

2. Create a New Site (using the button below the left pane).

3. Type the host name: multisaft.com

4. From the Encryption dropdown, choose ‘Only use plain FTP (insecure)’.

5. From the Logon type dropdown, choose Account.

6. Enter the User name: [email protected]

7. Enter the Password. (Email classmate or instructor if you do not have it.)

8. Enter an Account name. I used ‘CWI’.

9. Select ‘Connect’.

10. Wait. Filezilla should connect to the multisaft.com webserver within about 30 or less. You’ll see the green success text in the top pane of the Filezilla window.**  

11. Once it’s connected, use the right side windows to navigate to your student folder. Then drag your whole project 3 folder into your student folder.**

13. Once uploaded, please rename your project 3 folder to ‘proj03′. Context-click (e.g. right-click or ctrl + click on Mac) to rename the folder.

**Email JP or ping them on Slack if you have trouble connecting or uploading files.

[msudenver-cwi-sp15]

For Mon 5/4

Continuing to use Zurb Foundation, have 3 screens (minimum) coded to ~90%: • navigation • grid • buttons • text • image placeholders (use placekitten.com or placehold.it)

[msudenver-cwi-sp15]

Deliverables for Final Crit on 5/13 @ 3:30p

From the Project 3 page:

Milestone 4: Digital Prototype (using Foundation)

Finally, you will translate your paper prototype into a digital prototype using Zurb’s Foundation framework. Your digital prototype will be a refinement of your paper prototype, informed by findings from your usability test, and will be minor reinterpretation of form. Your digital prototype should enable users to walk through a given task and should show each state of the interface as they complete each step of the task. The interface should be cohesive and as comprehensive as you can get it (with regard to completing the task) and should give feedback to your user.

Required deliverables – due Wed 5/13 at 3:30pm:

5 screens, minimum, of your prototype (with some post usability test revisions) coded in Foundation

consistent, user-friendly, navigation across all screens (instructor recommendation: use Top Bar for desktop apps or Icon Bar for mobile apps)

upload your project 3 files to the multisaft.com webserver via an FTP client (like FileZilla); ping JP if you need help

your process compilation as a PDF that includes:

cover page: cover image, your name, date, class name, instructor name, university name

statement of intent

your taskflows (scans of all versions you created)

your wireframes, v1

images of each screen of your paper prototype

your usability findings report

for each screen you code, a screenshot of your code paired with a screenshot of the browser rendering your code

a thoughtful reflection on 1) your user-centered design process over the course of project 3 and 2) how you could apply this process in future projects

[msudenver-cwi-sp15]

What is Information Architecture

http://www.lynda.com/Web-User-Experience-tutorials/What-information-architecture/122427/143768-4.html

[msudenver-cwi-sp15]

Icon Bar, an alternative to Top Bar

If you’re prototyping a mobile app, there’s a good chance you’ll want to use Icon Bar instead of Top Bar. I couldn’t find a video tutorial for it, but if you watch the Top Bar tutorial (video link in the last post), and read the Foundation documentation, you should be able to figure it out, you smart person, you!

[msudenver-cwi-sp15]

for Mon 4/27

Your mission for this Monday is to play around with Foundation for a minimum of 2 hours before the start of class. (The tutorials below should take you 1–2 hours, depending on your own speed.)

I want you to become comfortable with Foundation setup, the grid, and 2 global navigation options. Below are some good places to start (some of which I’ve posted before—watch them again and follow along!).

First, here’s a really clear 5-minute video tutorial on just how the grid works.

Second, read about setting up your javascript links in the HTML < head >.

Third, follow along with 1 of these 3 overview videos – 

Responsive Websites with the Foundation 5 Grid (video): This one is a bit slower than the next and doesn’t include any images, so it may be easier for you to follow (type) along with it. The tutorial covers using the grid system + a custom stylesheet to create an HTML wireframe. It also touches on the HTML 5 elements header, footer, article, and aside.

Foundation 5 Introduction (video): This one moves a little faster and includes images, so it may be harder to follow (type) along with. It explains the file structure and the Javascript ‘<script>’ links. It explains how the math for the 12-column grid system works (in case you’re still confused about that). In it he creates a simple page that includes text, images, and the Foundation Top Bar navigation UI component.

Zurb Foundation Grid (video): The dev is a little goofy (in perhaps a charming way), but his tutorials are pretty comprehensive. The first part in his series covers Foundation setup, the grid, and navigation. Keep in mind that he’s using the nifty Emmet plug-in that I showed y’all a couple weeks back. (You can too, if you’re feeling adventurous!) Correction: He’s using the Jade templating language, which works similarly to Emmet but may be a tad more complex.

Fourth, follow along to create some navigation:

Here’s a 21-minute video tutorial on just implementing the Top Bar Navigation.

Here’s 5-minute video tutorial on creating responsive navigation.

If you make it through each of these 4 sections, you should feel pretty comfortable with using Foundation! We’ll discuss in class on Monday.

[msudenver-cwi-sp15]

Show and Tell

Get excited.

http://static.colourlovers.com/uploads/images/typographic_infographic.html

http://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-typography/

One of these links should bring you to joy and happiness

[msudenver-cwi-sp15]

Familiarize yourself with Foundation

Watch the first part of this video series to learn about how Foundation works! The dev a little goofy, but his tutorials are pretty comprehensive. Keep in mind that he’s using the nifty Emmet plug-in that I showed y’all a couple weeks back. (You can too, if you’re feeling adventurous!)

[msudenver-cwi-sp15]

for Wed 4/22 (part 1)

At the start of class Wednesday, please be prepared to hand in (via email) the following 2 documents as PDFS:

1. Your Discussion Guide (v2) that you used today for your usability test (blank, sans notes). Include your name, class name, and date (4/20/2015).

2. Your Usability Findings and Recommendations Report. Please follow this outline:

cover page: include your name, title: “Usability Testing [app/product name]”, date, awesome photo/ action shot from usability test)

high(er)-res photos of your paper prototype (If you want, you can pair these with the corresponding tasks.)

intro to your product app: purpose, audience) - minimum 1 paragraph

goals of the test - minimum 2 numbered bullets

taskflows and/or tasks being evaluated in usability test

what you heard: summarize impressions and key findings for each participant (3–4 sentences per participant)

photo storyboard (3–4 photos) of action shots, ideally from the same test. You can use the video you took to grab stills.

what it means to you: analysis and synthesis of key findings based on what you heard (1–2 paragraphs)

your recommendations for design revisions or refinements (min. 1 paragraph)

your personal reflection on the paper prototyping & usability testing process (2 paragraphs)

Note: Once you’ve completed the above, please (re)familiarize with Foundation’s Docs and Kitchen Sink. (You can skip the part about SASS.) I’ll post a couple tutorial videos soon.

Heads up: Scans of your process to this point will be due Monday.

[msudenver-cwi-sp15]

reading: Prototyping ch06

Now in Dropbox, chapter 6 of Todd Zaki Warfel’s book, Prototyping, has a lot of photos, tips, and tricks for creating a crafty paper prototype. Check it out.

[msudenver-cwi-sp15]

for Mon 4/20

Come to class prepared to conduct (and participate in) usability tests with your classmates.** Watch the videos below to learn more about paper prototyping. Read this interview with Todd Zaki-Warfel about prototyping.

**This is worth 10% of your overall course grade.

I’ll post a chapter from Zaki-Warfel’s book, Prototyping, tonight.

You’ll need the following at the start of class Monday:

Your paper prototype (i.e. version 2 of your wireframes), covering the scope of a single workflow (at minimum). See tools below that you can use.

Printed, finalized discussion guide with space for you—not your participants—to take notes.

A video recording device (your smartphone is fine) to record at least one test session for your prototype.

Videos to watch:

To give you an idea of what you’ll be doing, here’s an example of a usability test with a paper prototype of an email application.

Here’s an instructional video from Lynda.com on paper prototyping techniques.

Tools for wireframing:

To create digital wireframes, you can use Illustrator or InDesign (which is speedy with Master pages & pagraph styles!), or you can use free wireframing tools such as JustinMind, Balsamiq, or Pencil.

Paper prototyping materials you’ll need:

your wireframes (v2)

cardboard

scotch tape

string

[msudenver-cwi-sp15]

for Wed 4/15

On Monday 4/20, we will be conducting usability testing in class. For Wednesday (4/15), please prepare your first draft of the discussion guide for your usability test, following these steps:

1. Read about how to prepare for a usability test:

- Usability Testing Hints, Tips, and Guidelines (UX for the Masses)

- Turn User Goals into Task Scenarios for Usability Testing (Nielsen Norman)

2. Using the information from the readings above, write your first draft of your task-based discussion guide (script) for your upcoming usability test. Your discussion guide should have 4 major sections:

a. Introduction: Introduce yourself, the app or site’s purpose, and the goal of the usability test (e.g. to understand how easy or difficult tasks X, Y, and Z are)

b. Getting overall impressions: Ask test participants to share their initial thoughts about the concept for the app or site, and their impressions of the home screen

c. Task Scenarios: See second reading (by Nielsen Norman Group) above.

d. Wrap-up: Ask test participants if they have any final thoughts or comments based on what they’ve seen and discussed.

Remember: The mode for your usability test will be asking users how they would go about accomplishing X task—not asking them to click on a certain button or link or explaining to them how to do something.

[msudenver-cwi-sp15]

for Mon 4/13

Finish your thumbnail sketches (For help with how to use thumbnails to express layouts, see the link to UI Tiles in the previous post.)

Read Designing Screens with Cores and Paths and read about wireframing: see this short intro post and this more in-depth  book excerpt (2 chapters) in Dropbox—complete with design principles for wireframing!

Identify which 3–4 screens are the core of your prototype. Which screens provide the most value to your target users? (Ping JP if you need help identifying your core screens; be sure to include a photo/scan of your taskflow/s and thumbnail sketches.)

Using your thumbnail sketches as a starting point, sketch wireframes for your core 3 to 4 screens. 

Note: Please sketch neatly (examples here and here). 

Minimum page size for each screen is 8x10”. You will pin these up.

Come to class ready to pin up. We will do a soft crit and peer review of your thumbnail sketches and wires at the start of class on Monday.

[msudenver-cwi-sp15]

Some helpful tools

Emmet enables you to write HTML quickly, using in shorthand (CSS classes and other abbreviations). Install the extension directly from Brackets (instructions here).

UI Tiles provide a bunch of useful examples of thumbnail layouts (download from the second result on this page). Note: These are meant to be a jumping off point, not a replacement for your creative problem solving.

[msudenver-cwi-sp15]

Fieldtrip: change to meeting location (Wed 4/8)

Class, we have a change to the (previously discussed) order of operations:

4:00p - We’ll meet at Aviano Coffee (map) prior to going to MeasuringU’s office.

4:35p - We’ll walk the few blocks over to their office (map), at which time we’ll

observe the last ~15 minutes of a testing session in progress

talk to Jeff about the matters (and business) of usability and usability testing methods and process

[msudenver-cwi-sp15]

for Mon 4/6

1. Research and finalize your choice of approach and topic (see previous post), or have it at least 75% finalized if you feel stuck.

2. Complete your statement of intent, i.e. who is your audience and what are your goals for your site or app prototype? (Email this to JP if you haven’t already.) Cite at least 3 sources from your research.

3. Determine what process users will go through to accomplish a goal or task. 

4. Read about what distinguishes “task flows” versus “user flows” versus “work flows”. Read about why we create them here.

5. Using pen/cil and paper*, sketch taskflow (or user flow) diagrams to visually represent the sequence of steps or decisions necessary to move through the process. Try to think through a few different versions of the process flow and sketch each of them. Examples here and here. 

*For the first version, you must sketch. Please don’t jump into a digital tool yet.

Once you’ve done that, here are 2 excellent intro videos to Foundation 5 and its grid system. They are each around 17 minutes long and are somewhat similar (and are each done by a bloke with a nice accent—maybe the same person?). Feel free to watch only one; I’ve noted the differences:

Responsive Websites with the Foundation 5 Grid: This one is a bit slower than the next and doesn’t include any images, so it may be easier for you to follow (type) along with it. The tutorial covers using the grid system + a custom stylesheet to create an HTML wireframe. It also touches on the HTML 5 elements header, footer, article, and aside.

Foundation 5 Introduction: This one moves a little faster and includes images, so it may be harder to follow (type) along with. It explains the file structure and the Javascript ‘<script>’ links. It explains how the math for the 12-column grid system works (in case you’re still confused about that). In it he creates a simple page that includes text, images, and the Foundation Top Bar navigation UI component.

[msudenver-cwi-sp15]

for Wed 4/1

1. Review the Project 3 brief. Bring any questions you have to class.

2. Choose one of 3 approaches:

Interactive reference: educate users about a complicated or oft-misunderstood topic

Interactive infographic: explain the facets of an interesting topic or phenomenon

Interactive map: track an interesting phenomenon over space and time (ex: pandemic or secret intelligence)

3. Choose a topic. Here are some suggestions:

economic trends (world or one country)

unemployment

housing

small businesses

outsourcing

history of the estate tax

film: The Corporation

environmental sustainability

alternative energy

electronic waste

climate change

planned obsolescence + consumerism

history of nuclear/ coal/ gas power

film: Manufactured Landscapes

food & agriculture

healthy food access in Denver

history of the USDA

processing & distribution (comparison)

history of the supermarket

film: Food, Inc.

social justice (U.S. or other country)

LGBT rights

human trafficking

domestic violence

gender gaps in society

perspectives on racial profiling

history of the civil rights movement

film: Tough Guise

technology

healthcare/ medical science technology

space exploration technology

mobile telecommunications technology

the Digital Divide

information literacy

Moore’s law & planned obsolescence

history of the personal computer

film: Technocalyps: Part 1: Trans-human