To illustrate or not to illustrate
•Download as PPTX, PDF•
1 like•1,316 views
Do audiences want screenshots, conceptual illustrations, and visually pleasing graphics, or not? Does the delivery medium (print, online, Web) affect their expectations? Is a screenshot worth extra effort and expense, particularly if the information product is delivered in multiple languages? And when an illustration is the best choice, what are the best practices for producing it?
Recommended
More Related Content
Similar to To illustrate or not to illustrate
Similar to To illustrate or not to illustrate (20)
More from Steven Jong
More from Steven Jong (10)
Recently uploaded
Recently uploaded (20)
To illustrate or not to illustrate
- 1. TO ILLUSTRATE OR NOT TO ILLUSTRATE Steven Jong (stevefjong@comcast.net) STC New England InterChange Conference March 2015
- 2. The big picture • For this presentation, I focus on some graphic design basics addressing: 1. Screen captures, specifically raster graphics (of software) 2. Photographs (of physical objects) 3. Illustrations, specifically line art (of both) • Common issues, do’s, don’ts • My perspective: writer, not illustrator (amateur, not pro) • Tool- and platform-agnostic (but focused online) To Illustrate or Not to Illustrate | STC NE InterChange 2March 2015
- 3. There is no question: we are wired to see • Over 80% of learning is visual, and our brains process images differently from text—and 60,000 times faster • Users today expect and demand illustrations • In my opinion, customers no longer print, so—free! • Monitors, smartphones, and tablets all support high- resolution, full-color visuals, plus zoom, so—use them A closed plane curve every point of which is equidistant from a fixed point within the curve http://blog.wyzowl.com/power-visual-communication-infographic To Illustrate or Not to Illustrate | STC NE InterChange 3March 2015
- 4. Shared elements of written and visual style Element Written Visual Correctness Yes Clarity Yes Concision Yes Consistency Yes To Illustrate or Not to Illustrate | STC NE InterChange 4March 2015 Increasingly, writers are left to do graphic work, but with little or no guidance on visual style
- 5. Some file formats are better than others Type Proprietary? Compressed? Best For PNG (Portable Network Graphics) No Yes Screen captures, illustrations TIFF (Tagged Image File Format) No Yes Photos, scans SVG (Scalable Vector Graphics) No N/A Illustrations BMP (Bitmap) Yes No Windows screen captures/archives GIF (Graphics Interchange Format) Yes Yes (256 colors) Animations JPG (Joint Photographic Experts Group) Disputed Yes (lossy) Digital photos (only) To Illustrate or Not to Illustrate | STC NE InterChange 5March 2015
- 6. SCREEN CAPTURES (1 of 14 slides) To Illustrate or Not to Illustrate | STC NE InterChange 6March 2015
- 7. Desktops are bigger and more colorful… 1984: 514x344 pixels@72ppi, 1-bit color (176,816 bits) 2014: 1920x1080 pixels@96ppi, 24-bit color (49,766,400 bits) To Illustrate or Not to Illustrate | STC NE InterChange 7March 2015
- 8. … so capture screens, not desktops To Illustrate or Not to Illustrate | STC NE InterChange 8March 2015
- 9. Set up screen—and data—first To Illustrate or Not to Illustrate | STC NE InterChange 9March 2015
- 10. Clarity: Don’t use JPG for screen captures Initial capture After three edits To Illustrate or Not to Illustrate | STC NE InterChange 10March 2015
- 11. Clarity: Camiant (PDF) March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 11
- 12. Clarity: Don’t “resize,” “scale,” or “downsample” Original size Resized down 50% and back To Illustrate or Not to Illustrate | STC NE InterChange 12March 2015
- 13. Clarity: FrameMaker 12 (Help) March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 13 “Multichannel publishing” in FrameMaker 12 Help: http://tinyurl.com/kgjfyno
- 14. When you reduce a screen, you also reduce the size of text on the screen MioMap User Manual, August 2006 To Illustrate or Not to Illustrate | STC NE InterChange 14March 2015
- 15. Concision: don’t show GUIs, show data To Illustrate or Not to Illustrate | STC NE InterChange 15March 2015
- 16. Correctly crop and resize To Illustrate or Not to Illustrate | STC NE InterChange 16March 2015
- 17. This is the menu bar Go back one page; right-click for history Close tab URL Plugin enabled Website does not supply identity information Inconsistent callouts, labels, and leaders March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 17
- 18. Consistent callouts, labels, and leaders To Illustrate or Not to Illustrate | STC NE InterChange 18March 2015
- 19. Screen capture do’s and don’ts • Use for concepts, installs, completion, sample data, reports, complex screens • Make your own • Set up realistic data (first) • Trim edges (work big); size with output in mind • Include with the right step, not before or after • (In Help) Consider linking from text to large screens • Don’t use just to show GUI behavior (“travelogue”) • Don’t copy from others • Don’t use real or test data • Don’t mask edges; don’t make too big to display • Don’t include out of sequence in task • Don’t shrink below legibility (limit ~50%) To Illustrate or Not to Illustrate | STC NE InterChange 19March 2015
- 20. Screen capture recommended process 1. In product: Size equally, minimizing white space 2. In product: Populate fields with realistic data 3. Capture screen (not entire desktop) 4. In tool: Edit data as needed; delete unwanted details 5. In tool: Crop, add border (or use window frames) 6. In tool: If you need callouts, layer them on top, consistently 7. Keep and archive in PNG or BMP, following a content- related file naming convention 8. In display engine: Reduce no more than 50% (preferably in multiples of 36 ppi) To Illustrate or Not to Illustrate | STC NE InterChange 20March 2015
- 21. PHOTOGRAPHS (1 of 12 slides) To Illustrate or Not to Illustrate | STC NE InterChange 22March 2015
- 22. Showing physical reality "Refraction photo" by ajizai - Licensed under Public Domain via Wikimedia Commons To Illustrate or Not to Illustrate | STC NE InterChange 23March 2015
- 23. What something is supposed to look like http://healthylivinginthecity.com/2013/03/27/project-cookbook-snow-pea-scallion-and-radish-salad/ To Illustrate or Not to Illustrate | STC NE InterChange 24March 2015
- 24. One way to show motion Eadweard Muybridge, 1878 [Public domain], via Wikimedia Commons To Illustrate or Not to Illustrate | STC NE InterChange 25March 2015
- 25. Showing parts DieCastForum.com, by SuperKungFu, 20 Oct 2014 (http://tinyurl.com/pjll55m) To Illustrate or Not to Illustrate | STC NE InterChange 26March 2015
- 26. “Max Payload of an A-6,” pinned by Felix Nuts Tomcat (http://tinyurl.com/majg9jn) To Illustrate or Not to Illustrate | STC NE InterChange 27March 2015
- 27. Giving a visual index From A Field Guide to the Birds of Britain and Europe, Peterson, Mountford, and Hollom (1974). http://tinyurl.com/o6mfbeq To Illustrate or Not to Illustrate | STC NE InterChange 28March 2015
- 28. Annotations outside photo To Illustrate or Not to Illustrate | STC NE InterChange 29March 2015
- 29. Annotations inside photo Boston Globe To Illustrate or Not to Illustrate | STC NE InterChange 30March 2015
- 30. Set up your photos March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 31 Driver-pro.com Zhumell Z12 Deluxe Dobsonian Reflector Telescope Owner’s Manual, December 2010
- 31. Photography do’s and don'ts • (Screen-capture do’s apply here too) • Set up lighting and background • Consider the value of, and need for, color • Save and archive in TIF (not RAW) format • (Screen-capture don’ts apply here too) • Don’t just point and shoot • Don’t overwhelm the user’s eye • Don’t discard the originals To Illustrate or Not to Illustrate | STC NE InterChange 32March 2015
- 32. Photography recommended process • Set up lighting and background in advance • In tool: Crop or edit out extraneous details • In tool: If parts require descriptions, better to include in a separate, number-annotated table • Keep and archive finals and originals in TIF To Illustrate or Not to Illustrate | STC NE InterChange 33March 2015
- 33. ILLUSTRATIONS (10 slides) To Illustrate or Not to Illustrate | STC NE InterChange 35March 2015
- 34. Photos versus illustrations Photo details can be visually confusing Illustrations avoid visual clutter and emphasize specific details Driver-pro.com “Interface lg” by JoshGeake at en.wikipedia To Illustrate or Not to Illustrate | STC NE InterChange 36March 2015
- 35. Use corporate clipart whenever possible EAGLE 5 EAGLE XG EAGLE XG EAGLE XG & Tek3-based IAS IMF Application Server ATCA/Blade Server Database (AAA, ENUM Server, HLR, HSS & NP) IAS IMF Rack-mount Server SGW IAS STP SIP Proxy Server SCP SCP Add text for Tekelec Software/Hardware Add Text TekServer 2 TekServer 3 Tekelec Solution Solution AAAAAA To Illustrate or Not to Illustrate | STC NE InterChange 37March 2015
- 36. Incorporate company clipart To Illustrate or Not to Illustrate | STC NE InterChange 38March 2015
- 37. Vector versus raster graphics Resolution dependent Resolution independent (architecturally the same) March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 39
- 38. Be careful about ungrouping objects To Illustrate or Not to Illustrate | STC NE InterChange 40March 2015
- 39. How to show action and fit Lexmark Impact S3000 Series User’s Guide, November 2010 To Illustrate or Not to Illustrate | STC NE InterChange 41March 2015
- 40. Hardware parts and action Nikon Coolpix L830 Reference Manual, © 2014 Nikon Corporation To Illustrate or Not to Illustrate | STC NE InterChange 42March 2015
- 41. Drawing do’s and don’ts • (Screen capture and photography do’s apply) • Prefer making (or buying) your own, or repurposing • Look for clipart (your own company and others’) • Be consistent in style and perspective • Prefer Web-safe, complementary colors (see PowerPoint themes) • (Screen capture and photography don’ts apply) • Don’t just grab whole presentation illustrations • Don’t just use as is—add other elements • Don’t mix styles (abstract/ representational, 2D/3D) • For Web, don’t use “old” styles or distracting bright (primary) or clashing colors To Illustrate or Not to Illustrate | STC NE InterChange 43March 2015
- 42. Drawing recommended process • Adopt a style guide for nomenclature (better to include in a separate table rather than annotate) • Understand how line and shape weight, color, and style emphasize (or deemphasize) elements • Take advantage of (or create) templates and libraries • Group or lock imported objects • Follow consistent structure to add and align elements (lines, boxes, etc.); layer annotations onto bitmaps • Save both source and output • Develop your skill—any level is valuable! To Illustrate or Not to Illustrate | STC NE InterChange 44March 2015
- 43. GALLERY (1 of 12 slides) To Illustrate or Not to Illustrate | STC NE InterChange 46March 2015
- 44. Microsoft PowerPoint Help: Task To Illustrate or Not to Illustrate | STC NE InterChange 47March 2015
- 45. Microsoft PowerPoint Help: Concept To Illustrate or Not to Illustrate | STC NE InterChange 48March 2015
- 46. Apple iTunes Quick Tour To Illustrate or Not to Illustrate | STC NE InterChange 49March 2015
- 47. Apple Magic Mouse description http://www.apple.com/magicmouse/#hero-video To Illustrate or Not to Illustrate | STC NE InterChange 50March 2015
- 48. The Google Chrome Comic Behind the Open Source Browser Project. Words by the Google Chrome team, comics adaptation by Scott McCloud. Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 License (2008) To Illustrate or Not to Illustrate | STC NE InterChange 51March 2015
- 49. Infographics http://tablet-infographics.squarespace.com/#/ice/ To Illustrate or Not to Illustrate | STC NE InterChange 52March 2015
- 50. Animated GIFs "The Horse in Motion-anim" by Eadweard Muybridge, Animation: Nevit Dilmen - Library of Congress Prints and Photographs Division. Licensed under Public Domain via Wikimedia Commons To Illustrate or Not to Illustrate | STC NE InterChange 54March 2015
- 51. Animated GIF: Key and lock http://www.businessinsider.com/9-awesome-animated-gifs-that-show-how-cool-tech-works-2013-5 To Illustrate or Not to Illustrate | STC NE InterChange 56March 2015
- 52. Cinemagraph Scott May (https://www.behance.net/gallery/2969819/Collection-of-Cinemagraphs/) To Illustrate or Not to Illustrate | STC NE InterChange 57March 2015
- 53. Interactive SVG http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg To Illustrate or Not to Illustrate | STC NE InterChange 58March 2015
- 54. Embedded video: Apple Magic Mouse Preferences To Illustrate or Not to Illustrate | STC NE InterChange 59March 2015
- 55. SUMMARY To Illustrate or Not to Illustrate | STC NE InterChange 61March 2015
- 56. Summary • It’s never been easier to communicate visually—and users have never wanted images more • At a high level, you already know visual communication principles—they’re the same as for written communication • You get what you pay for (make v. buy, photo v. illustration) • Learn a bitmap editor, photo editor, drawing package, and your camera—and how to combine the results • Knowing how to create even simple visual communication improves your work, helps users, and is a valuable skill • Options are rapidly expanding—there’s more to come To Illustrate or Not to Illustrate | STC NE InterChange 62March 2015
- 57. For more information: • Elliott, Norbert. MSPTC Editing Guide, Ch. 15 (Graphics). http://elliotmedia.wikispaces.com/Graphics • Giemsa, Bettina. Technical Illustration in the 21st Century: A Primer for Today’s Professionals. Parametric Technology Corporation, 2007. • Tufte, Edward R. The Visual Display of Quantitative Information. Cheshire, CT: Graphics Press, 1983. March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 63
- 58. References 1. “The Power of Visual Communication Infographic,” Matt Byrom, Wyzowl (3 Mar 2014). Retrieved 26 Feb 2015 from http://tinyurl.com/n33v9gy. 2. “Using Illustrations in Technical Communication,” Charles Cave, ASTC Conference (October 2011). Retrieved 24 Feb 2015 from http://tinyurl.com/3mcyq7o. 3. “Visual technical communications—from cost factor to added value,” Corel Corporation (2009). 4. “Effective Infographics: Telling Stories in the Technical Communication Context,” Geoff Hart, TECHWR-L. Posted 3 June 2013, retrieved 25 Feb 2015 from http://tinyurl.com/mkyzdrh. 5. “The Power of Visual Communication,” HP Development Company (2004). 6. “7 tips for designing awesome animated GIFs,” Andy Orsow, InVision. Posted 10 Dec 2014, retrieved 27 Feb 2015 from http://tinyurl.com/m8al76s. 7. “The value of adding images to technical documentation,” V. Berba Velasco Jr. streetdirectory.com. Retrieved 23 Feb 2015 from http://tinyurl.com/n8huq3b. To Illustrate or Not to Illustrate | STC NE InterChange 64March 2015
Editor's Notes
- I am currently a senior technical writer at Oracle, where I have led teams documenting telecommunications products I have more slides than usual, so let’s get right to it
- Though the title of my presentation is a “whether” question, I am trying to answer the questions “why,” “when,” and “how” I’m going to give advice I think is obvious, but they touch on problems we see all the time, so I guess not I am generally avoiding video (let alone Augmented Reality) I know some tools better than others, but I’m not going to recommend any I don’t think I can label anything a best practice, but maybe I have done Web research, attended webcasts by experts, and solicited opinions on issues and best practices on LinkedIn groups and on TECHWR-L
- On Facebook, people are posting 200,000+ photos each minute; on YouTube, 100 hours of video each minute (in 2013!) If you come from a print background, your concerns about the cost and display quality of illustrations (and color) are outmoded: Print quality standard is 600 dpi PDF standard is 300 ppi, full color; I give up on my objections that customers spend money printing color PDFs, because they just don’t—so consider it free Macintosh display 72 ppi, 16.7 million colors (24-bit RBG, 8 bits/channel) Windows display 96 ppi Apple Retina display about triple 72 ppi (~216) All platforms support zooming images
- If you talk to a graphic artist or a photographer, you’ll learn that there are rules of visual grammar, and specific styles of work in their fields. At a high level, the elements of visual style are the same ones we’re familiar with. We have our four C’s; visual artists use the same ones. They also use style guides and templates. Tina Kister: “Visual symbolism is just as important as textual symbolism, and consistency makes it easier for users/readers to interpret. The best way to ensure consistency is to make a short media guide and, if possible, use template(s).” Louise Tincher: “[Use consistent] sizing, resolution, and/or color schemes for all related graphics in a single piece of work (for example, a series of full screen captures, schematics, or hardware photos).”
- Which format to use? Best formats for Web are PNG, GIF, and SVG (although browser support is limited and tools are shaky) Rick Hamilton, XML Press: “You need to know the requirements and keep on top of them (the ebook requirements are especially variable). My main tool for dealing with this diversity is to use SVG for all of our true illustrations (i.e., not screenshots or photographs). That takes care of print, and with good tools you can generate the rest. Then we use DocBook XML conditional processing to select the correct image for each deliverable.” [I use DITA XML.] Best format for PDF (and print) are Encapsulated PostScript (EPS), but it doesn’t display well in creation tools, and I am ignoring it Don’t use imported PDFs as bitmaps (they’re huge, up to 100x the size of other formats for small images)
- We can display more today, so don’t forget the size of the file you create when you capture a desktop This is the original Macintosh desktop on the original Macintosh hardware, and my (relatively cheap) 23-in monitor at home (work monitor’s the same) The original Mac display resolution was 72 ppi (matching the 72-point typography standard); today, for both Mac and Windows PCs, it’s 96 ppi, (a 4:3 ratio)
- OK, this is ridiculous. Most of this screen is empty space. Some people actually mask out the outer portion, retaining all the unneeded bits, but white bits and unused take up just as much file space. Don’t do that! You can make a source file you can’t work with. Michael Devito: “Size screenshots [and] screenshot detail carefully. Not sure which is worse - a screen detail illustration which should be small but is much too large, or a larger screen illustration made so small it's unreadable. The former makes documents look amateurish; the latter frustrates readers and can obscure important information.” (That, and slightly different sizes distract the eye.) So step one is to size your window—particularly important with browser-based interfaces I’ll be specific: Size screens the same, and reduce them the same percentage, whenever practical Then align them and keep them in print area (margins)
- OK, this browser window is sized reasonably (still rectangular, which is more natural). But there are still lots of problems here: Is that a real email address? Is that how many characters are in my password? Does the URL show a sign-in token? What other site was I surfing? The top of the screen is extraneous detail Today’s Windows and Mac OS windows are translucent—what was underneath? GUI rounded-corner effect is lost You need to set up the data you show before you capture the screen!
- I’ve been advising against saving screen captures as JPGs for years, and I can finally demonstrate why JPG compresses files by removing information, especially noticeable at sharp edges Even in the initial screen capture (left), you can see compression artifacts Every edited version of the file is smaller and looks worse
- This was originally captured from a technical presentation, saved as a JPG, and used as shown in a technical document in October 2012
- Kim Schrey: “I led a graphics team for our writing department in the past. One of our guidelines was to always resize in the image editing program because I can get a cleaner, crisper image with less degrading.” Resizing, scaling, or downsampling all reduce the data in the file and interpolate bit colors; for example, reducing 50% means collapsing and averaging four pixels into one. On the right is what you get. Once lost, the data can never be restored. It is literally unclear! Much better is to instruct your display platform to display an image in a smaller area.
- Text is 12-point Ariel Product has a 3.5 in screen (small to begin with); screen captures reduced about 50% We are meant to see what’s on them, but the screen title is now roughly 5.5 pt, and the labels (light grey on dark grey to begin with) are about 5 pt If this were a contract, it would be illegal; it’s certainly illegible
- (I did this for a department policies and procedures manual, in and for FrameMaker) This shows a right-click popup menu and the dialog box that opens as a result, but how the GUI works isn’t the point; the point is the data in the dialog box. This presentation combines three screen captures in one illustration, but the focus is on the data, not the GUI. It is concise and correct. This illustration only makes sense at one point in the procedure it supports: when you’re reached and filled in the Set Up File window, but before you’ve set the values.
- Most SMEs capture screens this way before they send them to you. Don’t use them this way! The faults here are exaggerated, but poorly cropped and distorted screen captures are a hallmark of unprofessional work. If you submitted this to a publications competition you would do badly. Avoid visual complexity the way you would avoid needless words and phrases. What do you want to show? Show only that and nothing more.
- This is a recreation of a graphic an account manager once asked me to include in a document. In my memory it was this bad! Leader lines were inconsistently angled and styled Lines crossed Leader lines called attention to themselves, not what they pointed to Arrowheads obscured object Leader lines pointed ambiguously Callouts were misaligned Callouts were inconsistent sizes and fonts
- Michael Devito: “Highlight or annotate graphics as needed. Especially with screenshots, better to draw attention visually than let readers match instructions to screen zones or prompts. This has to be done carefully, and in moderation. Too many highlight circles and arrows—and/or visually confusing annotation—and the result is far worse than having no highlights at all.” Jim Jones: “The best way to include text with illustrations allows for the text blocks to be editable. This method allows both for easy updating and also for easy translation/localization of the illustrations in a document. Sadly not all illustrations are created this way, even today.” (See Drawings) Louise Tincher: “Avoid floating text boxes in Word for annotations. Instead use another application (graphic editor, Visio, PowerPoint, etc.) and save the annotated figure in a graphic file format.” (I did this) What is “neatness”? A consistently applied underlying structure, which is sensed even if not consciously recognized. Here is the underlying structure. These annotations describe settings that must be used here, but had caused problems in the past. Many subtle good things here: Exact data included Annotations describe the specific settings that people messed up in the past Annotations and lines are in a separate layer over a bitmap; either can be edited independently, and labels can be translated and resized (in FrameMaker) Annotations outside of, and (roughly) equidistant from, the image (I’m annoyed I didn’t do it exactly) Lines are unobtrusively thin, strictly rectilinear (a consistent underlying structure), include white border, and placed not to occlude anything important Text boxes are centered above and below, right-justified to left, left-justified to right
- From the examples I derive this summary Prefer realistic—but not real!—data. Test data isn’t realistic, may be misleading, may show proprietary test setups Consider reducing color depth (reduces file size); GUIs may not use as many colors as available, and it can reduce file size significantly
- Create a style guide Use screen captures when you want to show success or have data to show, but not to show off the GUI’s layout or behavior Work to the image area of your output media. For example, in our PDFs I know the maximum page width is 155 mm. Louise Tincher: “Eliminate (crop, mask, or delete) irrelevant or unwanted elements.” Michael Devito: “Border all screenshots [and] other graphics as appropriate. Use think (1 pt or less) borders, in an unobtrusive color. (I prefer a medium dark grey.) However you do it, be consistent.” Work big. Zoom in when editing to make sure you crop, move, or change exactly. (I use 400%.) If you do have to grab an image for which you don’t have the source or the tool, blow it up as big as possible on screen, then capture the screen so you have more data to work with. (I have done this here.)
- Opinions: David McMurrey: “Don’t wimp out because it seems like too much trouble!” Margaret Cekis: “There has been a lot of heated discussion lately on this list and in other forums on whether screenshots should be used or not. My experience is that if new non-technical users will be using a document to help them learn a program or product, they appreciate screenshots that reassure them that they are in the right place for what they are doing. Developers and IT network management techies don't want them.” [I find that as a user, I often need and appreciate them, especially during installations; “this is what it’s supposed to look like”] In my opinion, text-only Help is going decisively the wrong way Autodesk Help guidelines: “All tooltips that need an image should have an image” Leah Guren: EU directives EU 6209.2001 and IEC 82079-1 require that documentation be clear, complete, and usable, so you can’t just delete screen captures for translation there. They also require GUI translation, so screen captures too—the work must be done. You can use FM or XML conditions to render the versions you want. Rick Hamilton, XML Press: “The biggest problems I run into as a publisher revolve around the challenge of creating illustrations that work in print, web, and multiple eBook formats. That challenge has (at least) two dimensions: (1) Designing and executing an illustration that clearly communicates your intention across media that range from a monochrome Kindle to a phone screen to a tablet to a printed page. (2) Wrestling with vendor (ebook and print) requirements for format, color (RGB vs. CMYK), resolution, transparency, ... etc.” Linda Hughes: Unless you pay attention to file conversion and size, you’ll end up with output too big to use Some people say to label illustration files by their position (like “_fig_1”), which works well if you’re doing a one-off document that won’t be updated or shared. If you’re working on a document that will be updated, or files that will be shared, name them by their content, so they’re easier to find and rearrange.
- In a technical sense, a digital photo is handled as a bitmap, so everything I said about screen captures also applies to photos Many photo-editing tools, some cross-platform, and many price points Thanks to PDF, the Web, smartphones, and tablets, there’s no reason not to include photos wherever needed Since every smartphone and tablet is also a camera, you can always take a high-quality photo. But should you?
- Sometimes nothing beats a photo for showing the world as it is; you have to see it to believe it
- When you do it right, it looks like this (same principle as for screen captures)
- It was once a matter of debate whether a galloping horse ever had all four feet off the ground. The pioneer of stop-motion photography, Eadweard Muybridge, settled it. This famous photographic study was high-tech for its time; today we have even better ways to display this technical information. Notice how the information is grouped. Grouping is an important consideration in visual communication (corresponding to organization). By the way, good scanners are common, and one way to import a photo is to create a high-quality scan, as was done here.
- This photo, from a review of a model kit, shows all the parts that come with a diecast model, beautifully laid out and photographed Notice the perfect symmetry (the underlying structure). I didn’t crop the picture to achieve that; it was laid out and photographed that way Now all you need is annotations
- … Though I have a fondness for the real thing. (Do you see an organizing principle at work here?)
- This is like a parts lists Tracing functions let you turn a photo into an illustration Blogger Graham Shawcross calls this a visual pangram
- Photo annotation follows exactly the same rules as for screen captures (same rule for callout justification I used)
- If you have to layer annotations inside photos you may not be able to use set colors, but the previous recommendations about consistent style, white borders, etc. still apply
- Sometimes you want to show details (like the parts of a bird), and sometimes you don’t (like their silhouettes). The colorful details in the photo on the left are irrelevant and distracting. The same principle applies to photos as to screen captures: show only what you want the user to see. Notice how removing the background from this simple photo makes it more effective. (It shows the parts you need and the order of assembly.) Failure to do so is a photobomb. In fact, everything I’ve said about screen capture editing applies to photo editing, so I won’t repeat it.
- From the examples I derive this summary
- John Dunker: “Technology has made it easier than ever for you to make bad photographs.” Rick Lippincott: “Be consistent in the way information is called out. Some [documents] use index numbers tied to a table with the nomenclature, some use nomenclature text in the illustration. Those that use text in the illustration can become busy and difficult to read.” For annotations, numbers are better than letters (numbers are understood even in Mandarin)
- (Hardware focus) Opinions: Rick Lippincott: “There’s too much reliance on photographs. Sure, photos are the easiest to produce, but they're also the easiest to goof up. Contrast, focus, and exposure all need to be right.” “Changes to the subject aren't always updated in the illustrations. Object configurations change, but the writers aren't always able to capture the changes in doc revisions. Nothing says "I wasn't paying attention when I wrote this" like an illustration containing a view that isn't actually of the product in question.” [This is exactly the same as for screen captures] As with any other kind of illustration, users never say they want fewer of them.
- By “illustrations” I mean vector images, which may also contain bitmaps Use illustrations to illustrate concepts, relationships, sequences; how things fit together, things not normally visible Many kinds: architectural drawings, blueprints, flowcharts, timing diagrams, network diagrams, swim lane diagrams For hardware, engineering drawings can be exported from design tools and used as technical illustrations
- Today cameras are ubiquitous, and photos almost free; illustrations are not. This is a “you get what you pay for” issue. The illustration shows the same thing as the photo, only clearly.
- Your company probably has them (sometimes as PowerPoint icons for presentations) This company (Tekelec) no longer exists, so I can use these examples; these are simple architectural representations, mostly physical but a couple abstract. Notice that they have transparent backgrounds so you can see behind them. Many companies give them away (for example, as Visio stencils) You can buy standard items (like connectors)
- (I did this) You can build a very reasonable architectural diagram using company-approved icon clipart I picked icons with the same perspective Which parts of the network are Tekelec? They’re blue. Readers can tell where the Tekelec products sit in their network Look at how things are aligned (again, a little off; my bad) Items are grouped into a hierarchy Protocol names are all the same font and point size; network elements are a larger size, product names are larger; groupings are the largest Every labeled object and protocol is described in the accompanying text, so it’s concise The only curved arrow is for a label, not a network path (though maybe too subtle to register)
- I replaced the JPG in August 2013 with this illustration, incorporating company clipart The drawing is much neater, in part because its resolution independent, and maintainable if product names change (which they have)
- If you’re using company clipart and a drawing tool, understand whether the clipart is actually assembled from a group of simpler objects, and how the tool handles grouping. Even the humble Tekelec icons are actually constructed from a lot of small objects. (Thanks to Kurt Krober): This Cisco device is freely available as a very nice Visio stencil. I have ungrouped it and taken off the top horizontal rib. The rib is actually drawn using six separate shapes. (The Cisco logo is constructed from 14 separate objects.) Be careful! It is a good idea to group the entire object and not play with its pieces, which you most likely have no right to manipulate. When I mess up, I rely on Undo to save me.
- Color can become a distraction. Here the illustration is greyscale (continuous tone), with effective restriction of color to emphasis (action and ink cartridges) This document covers four models, so the illustration is deliberately somewhat vague (removing unnecessary detail)
- Notice how line weights are used to emphasize (or deemphasize) elements of these illustrations such as the outline The action drawing uses white for emphasis
- From these examples I derive this summary Drawing tools is how you layer on annotations, lines, etc. In my opinion, grabbing illustrations from specs or PowerPoint slides is the same as copying and pasting text from specs—a bad idea HTML can only display a limited set of colors directly, and it’s easier to design using that palette rather than try to force in different colors Don’t mix styles (abstract vs. representational vs. cartoon; 2-D vs. 3-D, orthogonal viewing orientation) Don’t use old styles (3D buttons, flashing buttons, shadows under text, garish colors), which looks amateurish—this is particularly true for Web pages PowerPoint has built-in themes that include palettes of compatible color combinations You can define and share standard objects, but also callout lines, borders, colors, and the textures of objects
- If you’ve layered callouts on a bitmap, save both the bitmap and the drawing file FrameMaker includes a self-contained drawing tool that is fine for annotating bitmaps
- Opinions: Char James-Tanny, usability expert: Section 508 is a requirement for federal contracts; alt text for all non-textual elements is part of that requirement Keith Hood: Copyright (yours and original owners) is a major issue Use exact corporate colors, even if not Web-safe (DEC vermillion, Tekelec blue, Oracle red—PMS 485 C, RGB 55R, 0G, 0B) [Oracle: “Color and typography are two of the most effective elements ensuring a clear and consistent presentation of the Oracle brand identity and are essential to maintaining a strong worldwide brand. The logos must never be reproduced in any other colors or typefaces than those specified.”]
- The screen is pretty small, but it does show the setting described in the step
- This is an illustrated concept (a “screen portrait”), which doesn’t need updating or translating
- This is Web content
- This combines photographs, illustrations, and text All unnecessary details are removed The underlying structure is five equidistant columns
- Scott McCloud, a well-known comic illustrator, was specially commissioned to create this work for Google.
- Geoff Hart: “The word infographic is a portmanteau created by jamming together two words: information that you want to convey in a graphic form. An infographic informs—it helps the viewer to translate raw data into meaningful information...” Infographics tell a story
- Remember that sequence of photos from 1878? Today we can turn them into a movie I could watch this all day
- This is an abstract animated GIF. It would take many words to describe this action. There are tools available to make animated GIFs, and it’s not hard.
- This is a representation illustration. This is an abstract animated GIF. It would take many words to describe this action. There are tools available to make animated GIFs, and it’s not hard. However, animation increases the file size (before compression) to height x width x color depth x frames. For example, this compressed GIF is 6MB.
- As opposed to the somewhat garish GIFs, cinemagraphs (term coined by Kevin Berg and Jamie Beck) are based on still photos with small movements The effect can be subtle, but impossible to achieve in print—it only exists online The process of making animated GIFs is not bad with the right tools, but making cinemagraphs is complex
- Can be included in Help or embedded into PDFs Why is it my preferred format, despite the shaky creation tools? Open format, not proprietary Scalable: no matter how much you zoon in, it’s still sharp Vector: It takes minimal file space to define Interactive and programmable
- The Magic Mouse preferences pane embeds 3-second movies for each option (compare with the Web page descriptions)
- This is a live front end to a database (big data). Instructor pay depends in part on student evaluations. [Look at “effective,” “organized,” “funny”, “brilliant,” “fair”]
- I don’t suggest we can replace graphic artists and illustrators! Don’t ask for more tool than you need and can use (I’m looking at you, Photoshop) Video is here (check out “unboxing” videos); augmented reality is coming