Week 04

02-18-2015

Tog’s Laws
Wireframes and Mockups
PHP & MySQL and CRUD

Introduction

Alright, this week is a fun week. Things we’ve covered will all start coming together this week. For the design half of everything, we’ll finally get to what everyone thinks of as “design”: making pretty things. For the development half of everything, we’ll finally get PHP and MySQL to really start talking to one another and doing some slick stuff.

Interaction Design: Jobs to be Done, Tog’s Laws & Reality Disruption

Cooper’s thinking around understanding the problem your customer is trying to solve is a key one. His promotion of personas really put a dent in the interaction design world. However, he’s often criticized for not going the next step. How do you make the jump from Big Idea to something that works? There are a handful of different ways to go about this, but the most common in digital agencies and digital product development are wireframes and mockups. If you’ve taken IMS222 or IMS257, you’re already familiar with these concepts. You’ll need to be comfortable with the basics of Illustrator and Photoshop. If you need help, let me know and I’ll point you to some resources.

How do you really narrow down what you need to create? Time to look back at your personas. What problems do your personas have? Clayton Christensen, a Harvard Business School prof and researcher, calls this kind of thinking “what’s the job to be done” by your tool? What is it “hired” to do? Listen to the following podcast. Warning, it’s about an hour long, but it’s quite good. You can bail out after the first 28 minutes or so.

http://5by5.tv/criticalpath/19

Welcome back. Alright, so now you know how to narrow down to what problems really matter. Now it’s time to start creating those artifacts of design. At the heart, wireframes are just crude sketches of what you want to do. They’re the bones of a design. Mockups are fake screen shots of what the thing will really look like. They’re the muscle and skin. Please search for the excellent book HTML & CSS: Design and Build Websites by Duckett on the library’s website. Again, you’ll be able to read it for free. Read chapter 18.

Craft your first pass at a series of wireframes on paper. Show a handful of pages of your concept. Get specific. What buttons go where? Then get brutal. Which buttons don’t I really need? What features can you skip and leave for future generations to worry about? Etc. Iterate and revise. Once you have wireframes you’re happy with, create them in Illustrator. Just black and white is fine. Why? Well, normally this would be when I tell you that you should take your wireframes and test them with your users. However, we don’t have time for that. Or I would tell you that nice Illustrator-based mockups are good for clients because they look professional. Well…we don’t have a real client for this project. So, what’s the real reason to do them in Illustrator? Frankly, I believe that you’ll discover loads of mistakes when you move from paper to Illustrator. You’ll realize you still don’t need some functionality. Or you’ll discover that the text is too small. Etc. Moving to Illustrator is one more step towards making your design real. Duckett has a sample wireframe or two, but Google around a bit to see more.

Once you have the wireframes, it’s time to start mocking up the actual interface. This is where colors, fonts, etc. come into play. This stage can be rough for you if you’re more of a developer than designer. That’s okay, just remember that the technical stuff is going to be cake for you, but rough for the designers in the class! Create your mockups in Photoshop or Illustrator. They can be as tall as you’d like, but the number of pixels horizontally should be in the 900-950px range.

As you’re designing, it’s worth recalling Tog’s First Principles of Interaction Design. You can view them here. If you’ve taken IMS222 from Artie, you’ve heard him go on and on about Tog’s First Principles. Here’s the story. Bruce Tognazini (his friends call him “Tog”) was at Apple from 1978 to 1992. Back before there was such thing as a Mac, Apple release the Apple ][. In the early days of personal computing, every program had a different look/feel and user experience. You launched a program, you were in a completely new world. Scroll bars might be different. Buttons looked different. Etc. Soon after being hired, he set to work to change this at Apple. He published The Apple Human Interface Guidelines which became the starting point for user experiences being developed for Apple. Around the same time, he wrote a program that was distributed on every Apple called “Apple Presents…Apple”. It was a brief tutorial on how to use an Apple machine. What’s funny is that Tog wrote it as if all the programs on the Apple ][ would look the same. So, early adopters received their computer, ran “Apple Presents…Apple” where they see Tog’s designs for how the interface will work (lifted from this Interface Guidelines) and just assume that’s how all the programs will work. What’s great is that developers just kind of fell in line and release programs that used Tog’s interface. After the Mac was released and Jobs was forced out of Apple, Tog became in charge of the interface for the Mac and was responsible for many interaction patterns that we still use today. So, read his First Principles and consider your wireframes. Do they break any of his principles? If you think you have his First Principles down pat, prove it by downloading this self-check quiz. Read it, can you answer all the questions quickly?

Project One - Phase Two: Wireframes and mockups

Use paper to create a series of wireframes that shows how your tool will function. Your wireframes should cover at least three pages of the tool. Note, some of you may want just one “page” for your tool. That’s okay, just show it in various states in your wireframes. Once you’ve sketched them and are happy with them, craft black and white versions in Illustrator of all three pages. Be sure to iterate and clean them up as you move from paper to Illustrator. Next, build yourself a mockup in Photoshop to scale (remember, no more than 950px wide). Just one. You don’t need to mockup every page, just one. Looking at the wireframes of multiple pages and the mockup of one should be enough for others to get a sense of where you’re driving the bus.

Interaction Development: PHP & MySQL and CRUD

Watch the following three videos on how to take our simple to do list and make it actually start working.

PHP Forms and MySQL CRUD a (watch this video)
PHP Forms and MySQL CRUD b (watch this video)
PHP Forms and MySQL CRUD c (watch this video)

Assignment

:-)