Using Comics In The Design Process Upa Boston Cueva

0 %
100 %
Information about Using Comics In The Design Process Upa Boston Cueva

Published on November 7, 2008

Author: AmyCueva

Source: slideshare.net

Description

For years, usability professionals have been using flow diagrams to demonstrate existing and proposed task flows. We have integrated the great thinking from Kevin Cheng and Tom Chi of OK/Cancel into our design process by using the comic strip model to illustrate points of user frustration with existing flows, recommend new approaches, and communicate how the corporation and technology might support the solution. It has proven to be a very engaging communication, combining the persona, their environment, their thoughts, other players, their multi-channel interaction and a high level start to interface design.

Want to start using comics as part of your design process? Amy Cueva, Co-Founder and Chief Experience Officer at Mad*Pow will be conducting a "how to" workshop on how to get going with comics from a strategy, process and tools perspective.

Prepared by: Amy Cueva – Founder & CXO Mad*Pow 603.436.7177 September 20, 2008 Funny Business - Using Comics in the Design Process WORKSHOP FOR UPA BOSTON

Introduction Hey, I’m Amy. I work at Mad*Pow, an Experience Design Firm. We’re really excited about the results, and I’m here to share some tips with you! We’ve been using comics in the design process to help us communicate… Integrating thinking from the work of McCloud, Cheng, Sadaca, and Hardee.

Introduction First off, How many of you have used comics in the design process? What brings you here today? For those who have, how did it work out? For those who haven’t, what have you heard?

Things we will cover… Introduction to Comics Why use Comics? When to use Comics? How to Introduce Comics Samples of Comics Different Methods An Exercise Q&A

Introduction to Comics Com.ics (kom’iks) n. plural in form, used with a singular verb. 1. Juxtaposed pictorial and other images in deliberate sequence, intended to convey information and/or to produce an aesthetic response in the viewer.

Introduction to Comics “ Comics were used by the ancient Egyptians to communicate history and concepts.

Introduction to Comics Will Eisner says comics are “Sequential Art”

Introduction to Comics Scott McCloud (who wrote great book to the right) says “Comics and cartoons are different. One is an approach to picture making, the other is a medium which employs that approach. “

Introduction to Comics Kevin Cheng calls comics the “Universal Language”.

Introduction to Comics Ikea says comics make good directions.

Introduction to Comics The 9/11 Committee thought comics would be a good way to communicate history.

Introduction to Comics Google says comics are a great way to communicate the features of a new product.

Comics & Experience Design – Some History Kevin Cheng has been presenting and promoting the idea since 2006, and many articles have been written about it. The concept has been tried by many and has gained momentum over the past few years. Google made a big splash communicating how users would experience benefits with their new product.

Why Use Comics in the Design Process? Comics can help people understand: Persona: Emotion, Actions, Response Context: Environment, Conditions, Other Actors Time: Sequence, Process Channels: Print, Online, Phone, In Store Interaction: Dialogue, Flow Screen Design: Core Elements

Why Use Comics in the Design Process? Comics can also help people understand: A concept A strategy A change Problems Opportunities Attitudes Dependencies What really goes on with users

Comics may be a better way to tell a story. Comics can communicate: How your product will compete How it will function How it will coordinate with other sites or systems A current process or experience A brand new process or experience Points of frustration or ideas for improvement A multi-channel experience High level findings from research or testing

When to Use Comics When your presentation matters When you have a great idea When you want feedback on a concept When something very new is being introduced When you want people to fully grasp a problem When you want to facilitate a brainstorm To communicate to a diverse team Prior to or during wireframing During and After research or testing When you want to insert the users voice When you need to get quick and dirty

When to Use Comics Comics can be used as: A Concept Document Task Flows Use Cases Informal Walkthrough Materials Research Findings Usability Test Findings Personas “Day in the Life” Training Documentation Marketing Materials

Samples Comics: Promotion of eLearning Tools

Samples Comics: Promotion of eLearning Tools

Samples Comics for Design: Sedaka

Samples Comics: Kevin Cheng Start determining what will be necessary elements on the screen at each step.

Samples Comics: Kevin Cheng Gather feedback on concepts, with the internal team and with users.

Samples Comics: Mad*Pow for Client

Samples Comics: Mad*Pow for Client

Samples Comics: Mad*Pow for Client

Samples Comics: Mad*Pow for Client

Samples Comics: Martin Hardee

Samples Comics: Google

Samples Comics: Mad*Pow for Aetna

Samples Comics: Mad*Pow for Aetna

Methods for Creating Comics: Free Hand Comics are about expression not perfection. We all can hand draw comics.

Methods for Creating Comics: Free Hand Emotion

Methods for Creating Comics: Free Hand Position and Motion

Methods for Creating Comics: Free Hand Setting & Props

Methods for Creating Comics: Free Hand Speaking and Thought Bubbles

Methods for Creating Comics: Free Hand

Methods for Creating Comics: Free Hand Pencil Ink Digital

An Exercise Describe yourself: Draw you as a stick figure experiencing an emotion. Place yourself in a setting and give yourself a speaking or thought bubble. Place in other people and props if you want. Start in pencil, and then ink it in.

Methods for Creating Comics: Image Libraries Courtesy of Martin Hardee & Sun

Methods for Creating Comics: Photos I’m pretty psyched about my new hairdo. Amy, Must you take my picture??

Methods for Creating Comics: Photo & Trace

Methods for Creating Comics: Scanned in Drawings

Methods for Creating Comics: Powerpoint Considerations: Point 1 Text. Considerations: Point 1 Considerations: Point 1 Text. Text. Text.

Considerations:

Point 1

Considerations:

Point 1

Considerations:

Point 1

Methods for Creating Comics: Visio

Methods for Creating Comics: Comic Book Creator $49.95 Easy to Use Fairly Flexible

Methods for Creating Comics: BitStrip Free with Registration Many characters and props to work with. Hard to Use

Using Comics Comics can illustrate: Persona, Context, Environment, Behavior, Emotion, Time, Reaction, Thoughts, Words, Actions, Flow, Interaction, Screen Design, Multiple Channels, Other Actors, Technology Support, Operational Dependencies, Strategy, Governance, Design Considerations.

Process for Creating Comics Who is the audience? What is the objective of the communication? What is the essence of the idea? Which personas will be involved? What flows will be illustrated? What is the high level flow or script? Are there any considerations we will point out? What medium will you use to illustrate? How will the comics be presented?

An Exercise Pick one of the following to illustrate: You work at Comcast, and they have decided to integrate live community alongside TV viewing. How will this idea be pitched to Sr. Management to win budget? You work at Comcast and you want to get user feedback on a remote DVR controller concept. You work at Aetna and have just done testing on the tool that’s used to find doctors. You want to communicate where users struggled.

An Exercise Groups of 3 or 4 Pick a situation Answer the Process Questions on the Previous Slide, Brainstorm, and Make Decisions Make your Comic: Use Pencils, Paper, Erase, and Ink/Crayons if you like. 6-12 Frames Share the Findings

An Exercise Tell us your story What was your approach? What was easy? What was difficult? What might you do differently next time?

Questions? Comments? ? ? ?

Resources Kevin Cheng’s Site Bitstream Comic Creator Out of the Box Comics Library, Courtesy of Martin Hardee and Sun Microsystems Comic Fonts

Kevin Cheng’s Site

Bitstream

Comic Creator

Out of the Box Comics Library, Courtesy of Martin Hardee and Sun Microsystems

Comic Fonts

Add a comment

Related presentations

Related pages

404 | Mad*Pow

404. Home; Work; Team; ... Check out some of the amazing artifacts people create in a participatory design workshop @MadPow! cc. @ ... Boston. 179 Lincoln ...
Read more

Usability Marathon. Amy Cueva. Search Interfaces

Search & Filter Interface Round Up: Examples & Best Practices Amy Cueva ... charter members of the NH UPA, ... Using Comics in the Design Process ...
Read more

[EVENT] Reminder: Boston IxDA: Funny Business - Using ...

... Reminder: Boston IxDA: Funny Business - Using Comics in the Design Process. ... 2008. Amy Cueva from Mad*Pow on comics in design hosted at Autodesk ...
Read more

How to Make A Comic Book Creating A Page - YouTube

Check em out here! http://tapastic.com/ericronin Welcome to the next installment of my How To Make A Comic ... process. Here are the page ...
Read more

How an office switch can change everything about the way a ...

How an office switch can change everything ... design process and ... Boston.com. Employees have also started using the ...
Read more

Mobile Technology for Healthcare : Just what the doctor ...

Mobile Technology for Healthcare : Just what ... Amy Cueva is founder and chief ... She also led a panel on Healthcare UX Vignettes at the 2010 UPA Boston ...
Read more

Juhan Sonin: Biography - MIT - Massachusetts Institute of ...

Juhan moved to Boston to take the role of Director of Creative ... as well as business process analysis and design. ... Ignite Boston, IxDA and UPA. ...
Read more

Work - Design for People | Mad*Pow

Defining a transactional responsive experience and supporting design process. ... Using Service Design to Delight ... 179 Lincoln Street Boston, MA 02111 ...
Read more