NC State Interaction Design Course Spring 2010
•
1 like•185 views
This document provides an overview of the process for crafting digital interactions, including techniques for innovation, user experience design, strategy, ideation, prototyping, and presenting a design. It discusses topics like identifying themes, creating a value proposition, prioritizing ideas, drafting use cases, wireframing, paper prototyping, and specifying a product. The goal is to illustrate the various tools and techniques used to design interactions, from brainstorming concepts to prototyping and refining a final design.
Recommended
More Related Content
Similar to NC State Interaction Design Course Spring 2010
Similar to NC State Interaction Design Course Spring 2010 (20)
More from Prarthana Johnson
More from Prarthana Johnson (15)
Recently uploaded
Recently uploaded (20)
NC State Interaction Design Course Spring 2010
- 1. 1creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION the various tools & techniques to illustrate interactions CRAFTING INTERACTIONS Presented By: Prarthana Panchal & The !Creation Center
- 2. 2creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION CONTENTS Innovation Process User Experience INTRODUCTION IA Task Flows Mental models UX Sketches Wireframes Interaction Patterns Paper prototyping Prototyping Branding/Render Specifications Present TOOLS EXECUTIONSTRATEGY Brainstorms Identify Themes Value Proposition Prioritize Competition Usecases Product Spec
- 3. 3creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION THE PHASES OF INNOVATION discover synthesize ideate prototype implement Research + Strategy Concepting + Design
- 4. 4creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION USER EXPERIENCE (interaction design) JUST MAKE Make it appropriate. Make it smart. Make it responsive. Make it appealing.
- 5. 5creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION STRATEGY How do you take all the insights and make them into a product?
- 6. 6creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION Sketch your ideas. Rapidly generate many ideas. One concept per sheet. 1-2 sentence description Try to illustrate Give it a title. Don’t spend more than 5 minutes on each concept 50or more Try sketching on post-its, notecards or Half Sheets BRAINSTORM IDEAS
- 7. 7creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION Cluster your ideas. Identify your product themes. Usually have 5 to 10 themes IDENTIFY THEMES Record UploadCommunity Locations/GPSLearn/Master
- 8. 8creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION VALUE PROPOSITION The value proposition should explain why someone would want to purchase this and what the company stands to benefit. The Skateboarding app allows new skaters, seasoned skaters, and skateboarding fans to be connected to a rich conversation about skating in hopes to expand their skills by recording, evaluating, and providing feedback to one another. Write your products’ Value Statement. Use 1 sentence.
- 9. 9creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION PRIORITIZE Your value proposition should help you expand and filter your product features. Rank your themes. Prioritize your subthemes. Record UploadCommunity Locations/GPSLearn/Master 1 43 52 Record Upload Community Locations/GPSLearn/Master 2 3 4 51
- 10. 10creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION COMPETITIVE LANDSCAPE You might want to find a few pieces of inspiration that looks beyond apps. Research similar apps. Isolate yours.
- 11. 11creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION USE CASES Write some use cases. Consider your personas/users. Joe is at the skatepark. He wants to try a new trick called the boardslide, He launches his app and searches for the trick. He watches a video and reads some comments from other skaters on the best way to approach a boardslide as a first timer. 1 Eric has been trying to do a kick flip for the last week, he hands the phone to his fellow skater buddy, and the buddy records Eric attempting a trick. His buddy hands him back his phone. The results are in and an overlay over the video shows him what he needs to aim for. 3 Lindsey is the only girl skater at the skatepark she uses, she is wanting to meet other girl skaters to start a new group that tricks. 2
- 12. 12creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION PRODUCT SPECIFICATION Know the outside. Know the inside. Device Size Hardware buttons Screen Size Pixels Colors Touch Touch target size Speed Hardware Software
- 13. 13creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION TOOLS Crafting techniques for your interactions
- 14. 14creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION IA (INFORMATION ARCHITECTURE) Map your App. Find a home for your themes and features. Consider IA.
- 15. 15creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION MENTAL MODELS Consider your users. Capture what they are thinking. Behavior, Motivation, Philosophy, and Emotion but stay away from statement of fact
- 16. 16creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION TASK FLOW Use your usecases. Answer How do I __________?
- 17. 17creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION UX SKETCHING Never stop sketching. Iterate on your sketches. Paper sketches Form sketches Electronic sketches Video Sketches Quick Useful and Great to test
- 18. 18creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION WIREFRAMES Use your IA. Wireframe every screen.
- 19. 19creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION WIREFRAME TIPS Don’t use color, stay flat, and block level. Wireframe sequentially. Lots of interaction that not easily wireframed, develop a language to communicate and call out animations.
- 20. 20creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION INTERACTION PATTERNS Explore interaction patterns. Improve on them.
- 21. 21creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION PAPER PROTOYPING Make it physical. Try it out.
- 22. 22creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION EXECUTION What happens next?
- 23. 23creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION DIGITAL PROTOYPING Use your wireframes. Start Programming (or hand it off).
- 24. 24creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION BRANDING Figure out your Brand. Make it appealing.
- 25. 25creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION SPECIFICATIONS Specify the size. Include functionality.
- 26. 26creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION PRESENT Know your audience. Present what is appropriate. Stay high level. Identify some of the challenges. Communicate your next steps. Address how you handled them. Communicate who, what, why, how, & where
- 27. 27creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION CONCLUSION Sketch. Iterate. Sketch Again. Wireframe. Test. Iterate. Finalize. Prototype, Update with changes, Make it pretty, and hand off the spec. TOOLS EXECUTIONSTRATEGY Identify your product, themes, and features through the eyes of your user. Prioritize.
- 28. 28creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION THANK YOU. Questions?
- 29. 29creationcenter | COPYRIGHT 2010 T-MOBILE, USA | PROPRIETARY AND CONFIDENTIAL | NOT FOR PUBLIC DISTRIBUTION RESOURCES Books Designing for interactions, Dan Saffer Sketching User Experiences, Bull Buxton URLs http://www.brockcraft.com/tag/interaction-design/ http://tdd.elisava.net/coleccion/25/gordillo-en http://isomorpho.us/phd/proposal/http://theresaneil.wordpress.com/2009/09/16/iphone3g-design-resources/ http://www.dubberly.com/articles/middle-out-design.html http://www.uxmag.com/ http://www.uxbooth.com/ http://celestinechua.com/blog/2009/02/25-brainstorming-techniques/ http://www.louisrosenfeld.com/home/ http://fallinginlovewithmedia.wordpress.com/ http://blog.semanticfoundry.com/ http://www.welie.com/patterns/ http://www.konigi.com/interface http://theresaneil.wordpress.com/2009/09/16/iphone3g-design-resources/
Editor's Notes
- IA, wireframes, paper prototyping, feature lists, mental models.. And any tool you use to craft your interactions for you experience. Its where all the work you have done before will help you identify where and what you should created
- Writing your ideas, start sketching, put your ideas on paper, napkins, use software illustrators powerpoint... For me its about making, its my role at the creation center.. As designers it will most likely be your role...Hopefully you walk away today learning different ways you can show your work…
- Based on your research, propose some questions from your synthesis phase, or you can just use software.. Typically we open this up to the team here or invite people. If you are completely stuck try http://celestinechua.com/blog/2009/02/25-brainstorming-techniques/ But really there are no bad ideas
- Move the posits or ideas around, start clustering similar ideas, by placing them near each other. Try to think about how and what you would call cluster.. Identify those as themes, by titling each cluster. Usually this can be a I want statement, or a product feature title. Its okay to cut out ideas or clusters. For us its might be completely off idea, or for time reasons we choose the top ideas to expand on..
- So based on your insight themes and ideas generate your product’s Goal. What is your products Value proposition? So Jon Man talked a bit about your overall customer Value Proposition, But what is your Product/Software value proposition. What will it allow you to do and what does it promise to your users. Sometimes trying to identify what it is not, can help. I personally am not a writer, usually I work with a few people to help me rewrite the value proposition. Other information on value propositions: http://patoomba.com/2009/05/writing-a-good-value-proposition/ http://www.bnet.com/2410-13241_23-168342.html
- So here are 5 skateboarding app themes. We probably have several features listed below each. Rank the themes into what might be appropriate for your users. You may find that recording is not the essential yet, first and foremost people need to see or learn the trick first. You may have to move it to 1. You might even say you want to make sure people contribute to the community by uploading, if so make it higher up in your priorities. And as you list your features out you want to prioritize those…. I do this to make sure the features that are most important to our consumers are easily approachable first and foremost. Also, I can’t make it all, I can’t fit it all, and the developer may not be able to produce it all. So you need to know what really is the most important features/themes of your app.. You might even find that there are too many features in a theme, you may have to drop a theme all together…. You can’t do it all. Keep it simple.
- This is probably my favorite step, I think mostly cause it allows me to procrastinate, but seeing what is out there is so important. You will not find everything. But you really want to identify how your app is going to be better or different. What works, what doesYou may want to also look beyond apps, find things that inspire you about the theme you are exploring. Clothes, Accessories, Tools, Magazine, New gadgets… You might find that you can take a physical tool or interaction and include it in your applications.. The landscape will also help you with Branding your app, which will come later.
- Come up with lots of use cases. About 20....l Describe a user using your app to accomplish their goal. If you want use your themes….. You will need to filter and rank these.. It will help.
- Know what you are designing inside and out… You may have to adjust your application based on the hardware. Ideally you have considered the whole picture. Viewing on your monitor versus the actual phone will be different. Doesn’t hurt to email it to your phone, or preview it. Make sure you pixels are correct and that your type isn’t too big.. Know your audience and know you can apply it correctly on your phone. Example is optimal but if you are wearing productive gear when skateboarding, should you make the interaction something more deliberate…
- So I am going to give you all the tools I use when trying to show my interactions…Most of these are standard in software industry… others you could skip. Since you are developing a software app on the phone do the exercises that are relevant..
- Basically its what everyone does when designing a website. Where you Draw a square call it a page, figure out what the page would contain. Use pencil/paper or any software that draws shapes. Its where you will consider your users, the content, and the context. It will be your road map. Seriously there are people hired to do this all day all the time. If your app is part of a larger ecosystem you may want to IA the parts connected to the larger system. More on IA http://www.louisrosenfeld.com/home/ http://www.uxbooth.com/blog/complete-beginners-guide-to-information-architecture/
- Go back to your research. Think about what you saw and how people did things. Consider what they were thinking and said what they were thinking. Try to incorporate that in your work. You may have to shift your priorities.. As a designer you may have viewed some things more important. Mental Models: http://www.boxesandarrows.com/view/what-is-your-mental
- Task flows typically used for understanding your user approach into any given screen in your app. This will also identify where the user has to make a choice. Task flows can be used beyond the screen consider a users’ task flow on how they hear about the app or share the app to others. Taskflows: http://fallinginlovewithmedia.wordpress.com/
- User experience sketches can be quick, simple and powerful tools designers use to solve problems or explore opportunities. You can try it with a sketch, test it with a sketch. Some take more time than others to accomplish but most of the time it will help you evaluate your idea to see if it should be passed on to the next iteration. Consider the different types of fidelity for your sketches..
- One type of sketch is a Wireframe also varies in fidelity. Not about pixel placement but about capturing the interaction document all of your features. The blueprint of your application. Example of the house builder Architect example. Don’t use color. Its your skeleton structure of your application. Collaborate, whiteboard if you have to. Consider a sequence using your task flows. Once you do you will find your errors and possibly things you can not do. Once you are ready you can you place your wireframes in a sequence and present them. YES even to stakeholders pretty much one reason you will wireframe. Actually it will be what you use to communicate to your stakeholders, visual designers, and developers. It puts everyone on the same page. Oh make your wireframe with pencil & paper, any software that draws shapes, or specialized software such as visio and omni graffle. Adobe Illustrator is great. http://www.uxmag.com/design/where-wireframes-are-concerned
- One type of sketch is a Wireframe also varies in fidelity. Not about pixel placement but about capturing the interaction document all of your features. The blueprint of your application. Example of the house builder Architect example. Don’t use color. Its your skeleton structure of your application. Collaborate, whiteboard if you have to. Consider a sequence using your task flows. Once you do you will find your errors and possibly things you can not do. Once you are ready you can you place your wireframes in a sequence and present them. YES even to stakeholders pretty much one reason you will wireframe. Actually it will be what you use to communicate to your stakeholders, visual designers, and developers. It puts everyone on the same page. Oh make your wireframe with pencil & paper, any software that draws shapes, or specialized software such as visio and omni graffle. Adobe Illustrator is great. http://www.uxmag.com/design/where-wireframes-are-concerned
- It’s the interaction structure that has been set for any given task. Such as a Search box. You can find patterns anywhere. Most them are in vector format, examples on the web, as well as omnigraffle or visio temples. Literally you can copy and paste. You do want to consider using them because there will be previous and other applications people have used that allow you to do the same thing. People will expect the same or similar interaction. OH and if you know where your app will live, most likely there is interaction guideline that will tell you what to use. Here are some resources http://www.welie.com/patterns/ http://www.konigi.com/interface http://developer.yahoo.com/ypatterns/ http://theresaneil.wordpress.com/2009/09/16/iphone3g-design-resources/
- Means print it out, draw it up, make it physical and test it. The best part of a paper prototype is the ability to rearrange buttons or information.. Especially if you know what items you are focusing on. You can also screen prototype it by creating a sequence in powerpoint or keynote. Or any sequential browser. You can even run it through other people and ask them to try a test rum by completing a few key tasks.
- So I am going to give you all the tools I use when trying to show my interactions…Most of these are standard in software industry… others you could skip. Since you are developing a software app on the phone do the exercises that are relevant..
- Consider some color
- This usually takes time, and hopefully you work for a company that give you some time. But use the standard visual design approach. Create mood boards, understand your audience appeal, and how you can enhance and inform your user with visual elements. Typically want to generate a few styles by skinning a main screen and a key screen. Pick one and run with it. In most cases, or in my experience, when designing interaction we spend more time concerned with the interaction and very little time with the visuals.
- Black and white and usually with callouts. It highlights the dimensions and the core functionality of every element. This will be the instructions that the developer will use to create your app. Not pictured is paragraphs of writing describing the interaction and the reason.
- In general stay high level. I have no idea why anyone would want to sit through the details of any endeavor. Identify the problems, highlight the key improvements or components. Communicate your focus areas or problems. Be creative. If you are showing ideas, show a few sketches, the best ones. Don’t show your doodles or your detailed work throughs.. OH no one ever understands IA.. If you have a few sequences done. Define a task and ask your stakeholder to experience for a one on one. Question what fidelity you want to present. Is it appropriate to share out wireframes? Most of the time it does not. Unless your stakeholder is also a designer. Consider your storyboard and pitch a complete product. Refer to Jon Mann’s deck.