I really want to get better at this stuff, and make a good class for you and future students, so do them. Pretty please. 🙂
Keep going on your comps. Your presentation next week should tell a story, and your comps need to be able to do most of the work, if not stand on their own. Remember: experience design is about more than just a pretty or clean interface.
Using your storyboards as a guide, prototype some aspect of your interface. Whether it is the role, the look and feel, or the implementation, find out all you can in the shortest amount of time possible. Make sure to get feedback from at least a couple non-designers. Even better, see if you can get feedback from people who are actually in your target demographic.Feel free to use any of the techniques mentioned in the informance (informative performance), bodystorming (brainstorming with your body), Wizards of Oz (the man/woman behind the curtain), replicating physical aspects with improvised materials, video, etc. Make sure to document your tests (photos and text), and post your findings to the blog.
Pick your one direction and start making all the comps/slides necessary to show you interface at work. Remember to capture the context and environment that your interface is meant to be used in, and make your affordances clear in your images. These don’t have to be 100% complete, but it’s better to have more low fidelity images to show your user flow than a few hifi ones.
Research Similar Interfaces/Uses
Include screenshots and descriptions about what the interface does or how it works, and what is similar to your idea. Go for at least 3 examples.
Storyboard (9 frames minimum) your interfaces user flow. When creating storyboards, you are essentially being forced to choose a setting, users, use case(s), and show how/why someone would use your interface. You don’t have to be explicit about these things, but make sure you consider them carefully before you start on your boards.
Watch a SciFi Movie
Pick a Science Fiction movie that deals with technology or clearly incorporates UI into the story’s universe and take note of all of the forms of interface you see throughout the film. Keep in mind that some interfaces are passive/invisible (eg. the automatic doors in Star Trek, or Jarvis the virtual assistant in Iron Man). Then select one of these interfaces and analyze it from a design perspective. What are it’s strengths and weaknesses? Does it make sense for the particular context it’s being used in? Would it be practical in a real world setting?
9 Experimental Interface Concepts
Take at least three of the technologies/concepts that we discussed in class and think about how you could apply them to a user’s needs or problems. Don’t limit yourself to what you know is technologically possible, and money is no object. Create a simple diagram of each, and post them along with a description to the blog. Feel free to go into detail, but your focus should definitely be on getting down as many ideas as possible.
With all this extra time for Project, I want these suckas to be AMAZING. You have all weekend to wrap things, so put in the time to make every detail shine. But don’t work on these all weekend. Remember to save some time to…
Make Amazing Presentations
Remember what we talked about in class on Tuesday about presenting. Try to make your apps connect emotionally with your users (which probably means you shouldn’t be listing features or talking tech specs at any point in your presentation), define who you are making your app for if it isn’t already clear, and help us all understand *why- somebody would ever want your app. You guys did a great job last time; keep up the same level of polish and attention to detail. And don’t forget to PRACTICE!
Keep Designing For those of you not there, Project 2 is now due next Tuesday! While we do have the weekend to put finishing touches on our apps, next class will be the last opportunity to run your ideas by your peers. Make use of the time we have left and, using the feedback you got today, try to make significant progress on your mobile and desktop apps. Post your progress to the blog.
Make Amazing Presentations
We will be doing informal practice presentations in small groups, so you may want to start thinking about the order in which you would showcase your comps and how you can clearly and concisely talk about your app to others.
Mini Presentations If you have not given a mini lecture on one of the topics handed out at the beginning of the term, we’re doing our presentations this Thursday instead of next Tuesday. Be prepared!
Keep Going on Designs
Pick a direction and start designing! This project is due in one week, so we have to move fast now. You should have all of your main pages made by next class. Not necessarily every state of every page, but enough to walk someone through the main user flows without having to explain We want to be able to fully communicate the user flows we worked out this week, so make sure you have every page necessary to make that happen.
First Drafts of Design Comps
See how far you can take your design over the next couple days. I want to see 3 directions (1 comp per direction) exploring color, type, composition, etc. These are meant to be rough, medium fidelity drafts, so don’t spend time on kerning and tweaking pixels. You can work from any or all of your wireframes, but whatever you do, try to be as experimental and divergent as possible. We’ll fine tune things over the weekend.
Keep working on the POP/proto.io prototypes for next week. You should probably have enough wireframes in your prototype to test out the entirety of your user flows. For instance, don’t worry about settings pages if they aren’t central to how your app works. If your login screen would help people understand how the app is customized to them or if it syncs with an outside web service, then it might be worth including. It’s up to you to determine what you need, but do everything you can to make the app feel like a complete experience.
Create Test User Questionnaire
Create a list of questions (probably 4-7) that you can ask your test users to help guide their feedback. Think about what it is you most want to learn about your app ideas (Is the user flow clear? Does it make sense to put the friends list after the map page, or before?) and then create the questions that allow for your testers to concretely address them.
Test your prototype with at least 2 people who haven’t or heard of your app before. You don’t need to take screen shots of them using your app, but do take notes on what they do and say about your app. Are they getting stuck in some particular part of your app? Do they get confused about what a particular feature does? Write down these details, along with their answers to your questionnaire, and post them to the blog.
Using the flow shorthand technique we talked about in class a few weeks ago, document the various states and actions a user can take when using your app. What are the things your users are actually trying to do? Are there multiple ways to navigate? What sort of errors or problems might a user run into? How do you handle them? If you’d rather do this step before you make your prototype, that’s fine. Post your work to WordPress.
I want to see 20 pieces of inspiration/concepts/color palettes/type specimens for how you want to style your app. Post this to the blog as well.
Read Chapter 2 of Design of Everyday Things
Which can be found here.
Read this Article on Rapid Prototyping Design Better, Faster with Rapid Prototyping
As much as I’ve been pounding home the idea of having clear objectives in designing and coding our interfaces, it’s just as important to have clear reasons why you are making a particular prototype. This article does a great job of explaining a thoughtful rationale when devising prototyping strategy.
App Design Questionnaire
Answer these questions and post them to the blog:
Who is your primary audience? Do you have a secondary one?
What are the top three objectives for your app?
What are all of the features that related apps have? Are there any that you have thought of on your own? List as many as you can.
What is the bare minimum in functionality that your web app should be able to do?
What features are unnecessary or don’t lead directly to the objectives you listed above?
What is your “Call to Action” (The first thing a user should do)?
3 Sets of Wireframes
I want to see three distinct directions. You don’t have to design the login screens or anything else that you’ll see in other apps, but I do want to see the layout and core interactions for the main aspects of your app. Consider different layouts, different interactions, and different affordances in each direction. Minimum of 5 frames per direction (15 frames total).
Bring Android or iDevice to Class
Make sure to install POP before you come!
Choose an app you want to make
Look over the list of apps from the Project 2 brief—as well as the apps you have on your computer and on your phone—and pick an app that you’d like to make/remake. Ideally, this would be something that you yourself would use and could integrate well into your daily life.
Research similar apps
Find what your competition is doing; at least 5 similar apps. Make notes (visual and written) on how they accomplish certain features, and start laying out the pros and cons of each. Document what features they have in common, what sets them apart, who their typical user might be, etc. You should be a mini-expert in what is available and how various products act in this field. Post your research to the blog (NOTE: This will almost certainly involve some writing)
Finish Up Designs
All I want you to do is make them perfect. Aesthetics, Usability, everything. Everything perfect.
Make a Presentation
Don’t come to class with just your slides and expect to be able to get full points on this thing. Presenting interactivity isn’t as simple as it looks. Practice what you’re going to say, and make sure all of your slides look perfect. If you are presenting a series of images for your slides, first convert them into a single PDF so that you can have all of them in one document. Presentations should be no longer than 8 minutes, but ideally they can be shown and explained in 5-6. Less is more.
Finish Up Designs
Make it happen, folks. Use whatever suggestions you got from class to push your ideas TO DA MAX. And remember, if you have an idea of how a user interaction should go, we should see at least one screenshot demonstrating that. Be descriptive, but keep your descriptions related only to the elements of your UI that are interesting/important.
Make a Presentation
You won’t have to give a timed, formal presentation, but you should definitely have a good sense of what you want to show and what you want to say. Create a deliberate plan for the order you present your UI features and find ways to smoothly move between each of your apps elements. Don’t come to class with just your slides and expect to be able to get full points on this thing!
Design Make it happen! This project is due next week, so do your best to get stuff done. I’m here to help and give feedback, but it’s up to you to make sure you get this thing done on time. Good luck!
For those of you who aren’t fully clear on the connections and relationships in your data sets, take the time to write down what you have, and make lists and mind maps of all the possibilities. Remember: this project is all about connections. If you make a cool game or quiz, but I can’t see how the data relates to each other, it will be considered as far from successful.
Sketchboards Make 6 very quick sketches on possible layouts and UI ideas. These should be low fidelity and take no more than a few minutes each. Tops. As soon as you have your idea down (with any notes necessary to help you remember your idea), move on to the next one. Here’s a good example.
Make 2 Sets of Wireframes
Use the best ideas from your sketchboards and create three sets of wireframes that express how your site will be laid out and how it will work. Each set of wireframes should showcase at least three ‘views’. If you need only three wireframes to express one direction, that’s fine. If you need more, make more. Make two sets. They don’t need to be in any particularly format, and they don’t need to be overly detailed. If they are clear enough that you could use them to explain your ideas to your cousin, then they are doing a fine job.
Mood Boards/Design Research Your first round of designs will be due next Thursday (two days after our next class), so make sure that you get a head start on it! Do as much as you can, but I’d like to see at least 20 pieces of design inspiration, type studies, color samples and whatever else you need to get started on actually designing something next Tuesday.
Find a web site with something other than the typical top or side nav bar. Look especially for sites that have an interesting or clever way of allowing the user to navigate the site’s content. Then post a link to the site, along with a screenshot and a few sentences on how that page is interesting and/or why you chose it.
Fill out Objectives Questionaire
Copy and paste this questionnaire into a new wordpress post, answer the questions about your Project 1 ideas, and then publish it!
Create User Flows
Based on the mappings you brought in and the survey you filled out, start to create a list of all of the major pieces of functionality your users will need in order to use your app. Then, create user flows based on Ryan Singer’s “Component Flow” method that describe how a user can move between views and accomplish their primary tasks. You should create at least three detailed user flows, and post them to the blog.
Design of Everyday Things, Chapter 1
This book is a classic, and an incredibly smart and easy-to-read look at how design affects usability. We will be reading several select chapters from this book, so it will probably be worth getting a copy for your bookshelf. You can read the first chapter here.
Gather photos, names, brief bios, ages, relationships, job titles, favorite colors, etc. for as many people as you can. Look for patterns and organize a matrix of all your data. Go back at least two generations, and include all of the sub-branches (ie. cousins, aunts, so forth).
Map the Data
Choose two methods of diagraming your data from the list below and explore your content thoroughly:
Flow Chart: Breaks down decisions into yes/no, if/else questions
These can look like however you want; they can be messy, clean, hand-drawn, whatever, and they certainly shouldn’t be in as finished a form as the examples listed above. Just make it so that the relationships between all of your ‘characters’ are clear. Post images of your research (this can be scans or photos of hand drawn work) and a brief explanation to the blog. The more the better.
Find a website that has a frustrating user experience, and list 10 things that are wrong with it from a usability standpoint. Post the site URL, screenshots and your list of problems to WordPress.
Send me an email if you didn’t get an email from the class’ Google Group before 6pm.