Pre-class assignment

  1. Complete this form (to identify a good web page design and a bad web page design, be ready to discuss what you liked/didn't like about them)

Week 1

10-20-2015

Goal: Welcome and learn what makes a website "good"

On Your Own 1

Techie stuff to do your work for this class

All assignments and projects for this week need to be submitted by putting the files in your Universal Disk Space (UDS) on a Miami server. To do that you will need to configure your web space (did you know that you have web space?). You can use NetDisk to set it up. Once you have your space setup, I will walk you through how to upload files. It's very important that you get this done before our next class. I want to use our week's class time to discuss other things. As an alternative to FTPing your files to the server, I will also show you (later on the page) how to mount your universal (i.e. web) disk space just like another folder on your computer for easier access.

I am using a Mac; if you're using Windows, go ahead and watch the videos to get an idea of the goals. There are several different flavors of Windows, each with their own nuances. You can always refer to IT Help for details on doing things in Windows.

Using your Universal Disk Space (UDS/Netdisk/M-drive) (watch this video)

If you're off campus and you want to work with your Universal Disk Space (UDS) you will need to use a VPN client. You do not need to do this from on campus. You only need to watch this next video (and setup a VPN client) if you plan to work from off campus.

VPN for Off Campus Connections (watch this video)

As an alternative to the FTP option shown earlier, (on a Mac) click on the desktop (to bring Finder to the foreground)...Go...Connect to Server, then enter smb://it.muohio.edu/files/MyFiles/U/UNIQUEID where U is the first letter of your last name, and then your UniqueID. Mine is: smb://it.muohio.edu/files/MyFiles/H/HOPKINKS. Now you can use Finder to open and edit your web pages. Also note that while using muohio.edu still works, the university prefers that you use miamioh.edu now. Here's a tutorial on how do this for those of you who are more of a visual learner.

Mounting UDS on your Mac (watch this video)

Understanding the needs of your user/customer

There are a variety of ways to get at the heart of this, but a great way to jump start it is leveraging the techniques developed by the internationally-famous design firm IDEO. They call their process the "Deep Dive".
IDEO Shopping Cart Project (watch this video)

What is interactive design?

Design is how it works. Style is how it looks. This week will be about how to design and how to build interactions. Here's a look at designing.
Read this article

The Deep Dive and Interaction Design


Download and read pages 667-681 from http://www.designinginteractions.com/download/DesigningInteractions_10.pdf (or use this alternate download location)

IDEO Method Cards

Exercise: Your client is Honda. They want to make a new vehicle for retired people. They've found that they're simply not selling enough cars to them and want to know why. Which six of the Method Cards would you use to understand why? List the order that you would do the Method Cards (like "I'd start with the 5 Whys", then I'd do ...) and why each card. What would you hope to get out of each card?
Read this article

Project: Recipe Site

The Problem

College-aged people eat out too much. It’s expensive and not very healthy. You will develop a three page (minimum) website as a proof of concept for a new way to present recipes online. This proof of concept will be functioning HTML and CSS code that students wrote by hand. Before any design or any code is created, you will learn the full interaction design process as used by firms like IDEO, beginning with team-based research.

Primary (Group) Research

So far, you have engaged in "Secondary Research", which are readings and studies that already exist. Now you'll engage in "Ethnographic Research" as a group. The goal is to find out why college students don't cook at home. You should end up with a big list of problems. As a group, determine which IDEO Method Cards your team should try to accomplish. Identify who will do which cards and in which order. It's okay if just one person does a card. It's okay if multiple people do the same card. It's okay if you find ways to collaborate. Once you've done your research, as a team synthesize the research and each person on the team will use the research to later build a unique persona (info on personas shown below).

Research for the Recipe Site (due 10-29-2015 by 5pm)

Personas

A persona is an imaginary caricature of specific demographics that share a common set of problems. For instance, a persona for home buyers might be first time home buyers. While their ages and income levels might vary greatly, they all share the same set of problems. They don't know exactly what to look for. They've never done this and they're very worried because their afraid they'll waste their money and look foolish. BUT, they also share a common set of opportunities. They don't need to sell their old home before they move so they're flexible on timeline.

There's a great book that we site in interaction design all the time called About Face by Alan Cooper. Cooper is very respected in the interaction design community. It's available for free if you search for it. You can connect to the Safari Books Online and read it for free (well, not for free! Your tuition is paying for this awesome service, but you get the idea).
Read chapters 1 (Goal-Directed Design), 4 (Understanding Users: Qualitative Research) and 5 (Modeling Users: Personas and Goals)

Creating personas - intro to Photoshop and Illustrator

There are a variety of ways to get at the heart of this, but a great way to jump start it is leveraging the techniques developed by the internationally-famous design firm IDEO. They call their process the "Deep Dive".
Photoshop & Illustrator Personas (watch this video)
:-)
:-)