'

Collaborative Sketching for UX

Понравилась презентация – покажи это...





Слайд 0

Collaborative Sketching for UX Robert Stribley 02/19/14


Слайд 1


Слайд 2

Arguably, we’ve been sketching for eons


Слайд 3

But now, we’re sketching more than ever IdeaPaint Inc makes a paint that turns any surface into a whiteboard Its sales have doubled every year since introduced in 2008 More than ? its business is in the workplace See “Doodling for Dollars,” Wall Street Journal, April 24, 2012


Слайд 4

Why sketch? Enable communication Make abstract concepts concrete Iterate on ideas Jumpstart collaboration Ensure recollection Humanize ideas


Слайд 5

What can I sketch? Home pages Category pages Product pages Wizards & widgets Search results Process Flows Anything, really


Слайд 6

And there’s so much more to sketch for … Smartphones Tablets Google Glass iWatches Responsive design Ubiquitous computing


Слайд 7

Who can sketch? Information architects Interaction designers Graphic designers Content strategists Project managers Business analysts Functional analysts Developers Client directors


Слайд 8

Really, anyone can sketch Cartoon by XKCD


Слайд 9

A few ways we sketch at Razorfish: Solo Sketch to comp Communicate to client Storyboarding As a team – collaboratively


Слайд 10

What sketching isn’t … Sketching isn’t only for designers Sketching isn’t difficult Sketching isn’t drawing You needn’t be Michelangelo to participate


Слайд 11

However, we can learn from the pros


Слайд 12

Who often begin with a sketch


Слайд 13

Adding layers, detail, color


Слайд 14

Until they complete their masterpiece


Слайд 15

A Quick Case Study


Слайд 16

Any idea what this is a sketch of?


Слайд 17

“twttr sketch” Twitter.com Twitter [This sketch] has very special significance – it's hanging in the office somewhere with one other page. Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down. – Jack Dorsey, Twitter


Слайд 18

Some Advice from the Experts


Слайд 19

“The great benefit of drawing is that when you look at something, you see it for the first time.” - Milton Glaser


Слайд 20

“There are techniques and processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching.” - Bill Buxton


Слайд 21

Attributes of a Sketch Quick Timely Inexpensive Disposable Plentiful Clear vocabulary Distinct gesture Minimal detail Appropriate degree of refinement Suggest & explore rather than confirm Ambiguity Bill Buxton Sketching User Experiences


Слайд 22

"There is no more powerful way to prove that we know something well than to draw a simple picture of it. And there is no more powerful way to see hidden solutions than to pick up a pen and draw out the pieces of our problem." Dan Roam The Back of the Napkin


Слайд 23


Слайд 24

Collaborative Sketching


Слайд 25

For the purposes of today’s workshop, sketching is … Quick Simple Collaborative


Слайд 26

All the tools you need: Paper Sharpies Photo by JasonTank, Flickr


Слайд 27

Defining Collaborative Sketching Origins Rooted in Design Studio Methodology Grew out of industrial design and architecture No “rockstars” Different versions/methods For example, Todd Zaki Warfel, Message First, talks about … Create. Pitch. Critique. 6.8.5 game


Слайд 28

Methodology Sketch Limit your time Don’t worry about mistakes or style Goals Benefit from the participation of your colleagues Communicate ideas effectively by visualizing them Quickly generate ideas and refine through iterations


Слайд 29

Process: Discuss Sketch Share Revise


Слайд 30

Discuss Discuss the experience you’re sketching What’s its purpose? What features are necessary? How would you prioritize them? What’s the audience? However, you are not discussing layout or design Just the problem you’re trying to solve No sketching yet


Слайд 31

Sketch Sketch silently Limit your time – 5, 10 minutes Sketch as much has possible, as many different ideas as possible Emphasis is on quantity of ideas not quality of sketches


Слайд 32

Share Review your work with your team Keep it short – 60 seconds each You provide feedback to others What you like Questions about didn’t work for you You’re not grilling your colleagues and this is not a competition


Слайд 33

Revise Now begin your wireframe with a more informed view, more and better ideas And sketch again if you need to


Слайд 34


Слайд 35


Слайд 36

Now, it’s your turn


Слайд 37

Our Exercise


Слайд 38

What to do?


Слайд 39

Our Exercise: A home page for Events.com A website for finding local events Listed by category Listed by date Listed by … what else? Who is the audience? Locals Tourists Event promoters


Слайд 40

Also, consider other event sites you’re familiar with. This will be your “competitive analysis”


Слайд 41

In teams, sketch your ideas Take 10 minutes to discuss what features belong here Sketch your ideas silently for 10 minutes Share your sketches with your team Sketch again, incorporating what you learned from others Discuss Sketch Share Revise Our Exercise:


Слайд 42

Our Exercise: Take 10 minutes to discuss what features belong here


Слайд 43

Our Exercise: 2. Sketch your ideas silently for 10 minutes


Слайд 44

Our Exercise: 3. Share your sketches with your team


Слайд 45

Our Exercise: Sketch again, incorporating what you learned from others


Слайд 46

Some Resources


Слайд 47

Books


Слайд 48

Sketching Tools The following apps are all for the iPad: Adobe Ideas Bamboo Paper Muji Notebook Penultimate SketchBook Pro Paper


Слайд 49

Prototyping AppSeed Currently in development, this Kickstarter project lets you to turn your app sketches into working mobile prototypes “Sketching is simply the fastest way to test ideas and visually brainstorm” – Greg Goralski, AppSeed creator


Слайд 50

Introduction to Design Studio Methodology http://uxmag.com/articles/introduction-to-design-studio-methodology The Design Studio Method – Presentation by Todd Zaki Warfel https://vimeo.com/37861987 Further Study


Слайд 51

Thank you www.slideshare.net/stribs


×

HTML:





Ссылка: