presenting visual information(notes)
DESCRIPTION
TRANSCRIPT
Presenting Visual Information
Ben MacNeillUser Interface Designer, eXtension
(in order to get good feedback)
This version of the presentation includes notes. You can view the presentation without notes at http://www.slideshare.net/
chillnc
Slideshare doesn't host Keynote files (this was uploaded as a PDF), but if you'd like a copy, just shoot me an email at
WhichTools?
attribution: http://flickr.com/photos/eliw/351059702/
You have a toolbox. choose the right tools.
Photoshop, Illustrator, Sharpie marker, Skitch... all trade-offs between speed and resolution.
The medium determines the type of feedback you are going to get.
Work Rough to Smooth
• Sketches
• Wireframes
• Image Mock-ups
attribution: http://flickr.com/photos/grufnik/2391851978/
With new ideas, work rough to smooth. Start with low resolution tool and refine your tool as you get feedback on critical
issues. Don't dive straight into Photoshop.
It's frustrating if you send out a design and the feedback misses the issue. It probably means you didn't properly frame the
issue.
Sketch Rough
“When you sketch with a thin tip you tend to draw at a higher resolution and worry a bit too much about making things look good. Sharpies encourage you to ignore details early on.”
37signals
Important! The resolution of your design dictates the resolution of your feedback.
In these designs no one is going to say "The columns don't line up."
That's what you want at this stage.
Wireframes
attribution: http://flickr.com/photos/malloy/133630118/
• Layout
• Elements
• Interactions
Provides a layout of page elements and interactions.
Make decisions about how the elements relate to each other, but not the look and feel of individual elements.
The focus is on blocks of content and interface elements.
Blocks and Text
blocks of content and interface elements.
For example, the article title is going to be important, we don't say how we're going to indicate that importance, only
established its hierarchy.
Color serves an indicator in this wireframe. Blue text are links. the red text identifies the site page
Image Mock-ups
when it's pixel perfect, people will focus on pixels. Don't be surprised by this!
Presentation Tips
Provide a CommonPoint of
Reference
Provide a common point of reference.
Otherwise, it's hard to tell if someone is confusing the page/slide number with the image number.
100%Show Comps at
your audience needs to see it full-size so they can judge relationships, read the text and see crisp lines. Make sure that you
don't scale your images and make sure your presentation tool doesn't either.
Distinguish Edges
borders drop shadows
Use a drop shadow or border distinguish screenshot from the tool you are using to display.
If your design uses a lot of white space, it may be very difficult for someone else to distinguish your design from elements in
the medium in which you are presenting. Goes for email especially.
Don’t let Color Distract
Color is a big issue for some people. solve this problem by presenting mock-ups in grayscale.
It completely takes that issue off the table.
Don’t let Color Distract
If you are going to talk about color, try to only focus on the color. A mistake that some people make when presenting a
series of mock-ups is changing too many variables across a series of mock-ups.
Focus on one variable. Highlight the differences in your mock-ups.
It's too hard to objectively juggle multiple changes without resorting "well, I just like this one better". the problem you are
probably trying to solve an interaction or layout issue. Save the color for last. Get the sign-off on the layout, element
relationships, hierarchy and interaction first.
How to Share? • Email
• Wiki/blog
• Google Presentations
attribution: http://flickr.com/photos/hrossvt/127105038/
send files, email attachments may get shrunk down, stacked up next to each other
wikis and blog have extra chrome - the navigation and interface of the wiki and blog itself
Google Presentation lets you share online at 100%.
Google Presentations
Letter labels. 100%. A little information for context. Bookmarkable.
Be Specific
attribution: http://flickr.com/photos/jasoneppink/14838876/
Define the Design Problem
• Be clear
• Tell your audience what feedback is needed
• Describe the elements being examined
• Use arrows, circle things
Other Sharing Tools
This is the better tool. If you have a mac, you should be using skitch
Jing does 80% of what skitch does, but also does video.
