technical comms user interface nf

www.newfangler.comwww.newfangler.com

Technical Communications: User Technical Communications: User Interface DesignInterface Design

Think VisuallyThink Visually

• Many Readers Look at Visuals FirstMany Readers Look at Visuals First• Visuals Used to Grasp Information Fully Visuals Used to Grasp Information Fully

and Quicklyand Quickly• Use Visuals When Doing the Following:Use Visuals When Doing the Following:

• Giving an OverviewGiving an Overview• Describing a Process or an ArchitectureDescribing a Process or an Architecture• Describing a Grouping or a HierarchyDescribing a Grouping or a Hierarchy• Explaining a Database StructureExplaining a Database Structure• Tracing a Data FlowTracing a Data Flow



Effective Design PrinciplesEffective Design Principles

• Keep Intended Audience in MindKeep Intended Audience in Mind: Use : Use Familiar Familiar Objects and MetaphorsObjects and Metaphors

• Plan for Graphics from the StartPlan for Graphics from the Start: Gain : Gain Reviewer Reviewer Feedback in Early StagesFeedback in Early Stages

• Establish Focus and PurposeEstablish Focus and Purpose: Omit : Omit Distracting Distracting Features and Details Features and Details

• Balance the GraphicBalance the Graphic: Able to Pick Out : Able to Pick Out Visual Visual Center or Focal Point of Graphic Center or Focal Point of Graphic EasilyEasily



Effective Design PrinciplesEffective Design Principles

• Guides Reader’s Eye to MessageGuides Reader’s Eye to Message: Use Print : Use Print Size Size and Boldness; Contrast Object Size, Shape, and Boldness; Contrast Object Size, Shape, ColorColor

• Effective Sense of Direction for Effective Sense of Direction for ComprehensionComprehension: : Top-to-Bottom, Left-to-Right, Top-to-Bottom, Left-to-Right, Consider Tables, No Consider Tables, No Vertical Text! Vertical Text!

• Form a Conceptual GroupForm a Conceptual Group: Same : Same Shapes/Colors to Shapes/Colors to Group Objects, Shading for Similar Group Objects, Shading for Similar or Highlighted or Highlighted Objects, Forms, and Screen Shots Objects, Forms, and Screen Shots

• Intuitive SymbolsIntuitive Symbols: No More than Five Different : No More than Five Different Symbols in a Document = Clutter and Symbols in a Document = Clutter and

ConfusionConfusion



Know Your PurposeKnow Your Purpose

• MarketingMarketing: Colors, White Space, : Colors, White Space, Graphics, Graphics, Various Type Sizes/Styles, Audio, Various Type Sizes/Styles, Audio, and Videoand Video

• ReferenceReference: Horizontal and Vertical Lines, : Horizontal and Vertical Lines, Heading Levels, Indention, TablesHeading Levels, Indention, Tables, , andand

ListsLists



Planning Objectives for GraphicsPlanning Objectives for Graphics

• Information Brief and SimpleInformation Brief and Simple• Only One Topic per GraphicOnly One Topic per Graphic• Label and Caption Carefully/IntuitivelyLabel and Caption Carefully/Intuitively• Include a Key or Legend When NecessaryInclude a Key or Legend When Necessary• Lettering Horizontal for Easy ReadingLettering Horizontal for Easy Reading• Position Graphic Closely After Referring Position Graphic Closely After Referring

TextText• Keep Terminology ConsistentKeep Terminology Consistent• Number Graphics and Tables if There Are Number Graphics and Tables if There Are

Three or Three or MoreMore



Planning Objectives for GraphicsPlanning Objectives for Graphics

• If More Than Five Graphics, Produce List ofIf More Than Five Graphics, Produce List ofFigures, or List of Tables (Title, Figure Figures, or List of Tables (Title, Figure

Number, Number, Page Number) Appearing After Table of Page Number) Appearing After Table of ContentsContents

• Graphics Should be Functional, Not OrnamentalGraphics Should be Functional, Not Ornamental• Should Contribute to Reader’s UnderstandingShould Contribute to Reader’s Understanding• Text Carries Context and Significance for the Text Carries Context and Significance for the

GraphicGraphic



FormatFormat

• Physical Arrangement of ContentPhysical Arrangement of Content• Preface or Executive AbstractPreface or Executive Abstract• GlossaryGlossary• Table of ContentsTable of Contents• List of Figures and TablesList of Figures and Tables• Index Index • BibliographyBibliography



FormatFormat

• Headers and FootersHeaders and Footers• GraphicsGraphics• IndentionIndention• ReferencesReferences• FootnotesFootnotes



FormatFormat

• Top Left-Hand Corner Viewed First Top Left-Hand Corner Viewed First (Western (Western World)World)

• Aids Quick and Easy Access to Aids Quick and Easy Access to InformationInformation

• Supports Knowledge TransferSupports Knowledge Transfer• Visual Uniformity and Subordination Visual Uniformity and Subordination

Improves Improves Understanding, Comprehension, Understanding, Comprehension, and Retentionand Retention



Type and SpacingType and Spacing

• Type Styles (Fonts) and SizesType Styles (Fonts) and Sizes• Spacing—Between Characters, Words, Spacing—Between Characters, Words,

Lines of Lines of Type, Paragraphs, Page Borders Type, Paragraphs, Page Borders • Supports Visual Flow and ReadabilitySupports Visual Flow and Readability• Spacing Objects for MeaningSpacing Objects for Meaning



Headings and IndentionHeadings and Indention

• Headings Group Topics by Using Position, Headings Group Topics by Using Position, Point Size, Point Size, Bold Type, Upper and Lower Case, Bold Type, Upper and Lower Case, and Alpha or and Alpha or Numeric Sequence Numeric Sequence

• Indent Sub-Headings, Lists, Index Entries, Indent Sub-Headings, Lists, Index Entries, and and Procedural Sub-StepsProcedural Sub-Steps



Why Use Graphics?Why Use Graphics?

• To Emphasize Points in the TextTo Emphasize Points in the Text• To Increase Reader’s InterestTo Increase Reader’s Interest• To Replace/Clarify/Simplify Technical To Replace/Clarify/Simplify Technical

InformationInformation• To Appeal to Right-Brain FunctioningTo Appeal to Right-Brain Functioning• To Increase Ability to Skim and ScanTo Increase Ability to Skim and Scan• To Build a Model in the Reader’s Mind To Build a Model in the Reader’s Mind



Why Use Graphics?Why Use Graphics?

• To Promote Reader RecallTo Promote Reader Recall• To Highlight Important InformationTo Highlight Important Information• To Show ProcessesTo Show Processes• To Support Inexperienced and Visual To Support Inexperienced and Visual

LearnersLearners• To Highlight Relationships Lost in the TextTo Highlight Relationships Lost in the Text



Types of GraphicsTypes of Graphics

• Photographs/IllustrationsPhotographs/Illustrations• Screen ShotsScreen Shots• GraphsGraphs• DrawingsDrawings• FlowchartsFlowcharts• Organizational ChartsOrganizational Charts• Pie ChartsPie Charts• Schematic DiagramsSchematic Diagrams• MapsMaps



Screen ShotsScreen Shots

• Show the Process from the User’s ViewShow the Process from the User’s View• Descriptive and Concise Captions Can Descriptive and Concise Captions Can

Help Help Reinforce Important Points in the Text Reinforce Important Points in the Text • Considered Figures; Name and Number Considered Figures; Name and Number

Them Them AccordinglyAccordingly



Flow, Scale, and ProportionFlow, Scale, and Proportion

• Flow (Direction) Aids Content Assimilation Flow (Direction) Aids Content Assimilation • Varying Size (Scale) Differentiates Objects, Varying Size (Scale) Differentiates Objects,

Indicates Importance, Groups Objects Indicates Importance, Groups Objects • Too Many Sizes Can Create Ambiguity and Too Many Sizes Can Create Ambiguity and

ConfusionConfusion• Good Proportion = Harmony Between PartsGood Proportion = Harmony Between Parts• Use Clear Divisions to Align Objects: Midpoints, Use Clear Divisions to Align Objects: Midpoints,

Endpoints, Centers, and QuadrantsEndpoints, Centers, and Quadrants



Web-Based/Online User Interface Web-Based/Online User Interface Strategies and TechniquesStrategies and Techniques

• Can Make Information Delivery More Can Make Information Delivery More Intuitive, Intuitive, Realistic, and PersonalRealistic, and Personal

• Streamline Information Architecture/Keep Streamline Information Architecture/Keep Site Site ShallowShallow

• Consolidate as Many Information Pointers on Home Consolidate as Many Information Pointers on Home Page, While Keeping it Clutter-Free: No More than Page, While Keeping it Clutter-Free: No More than Five or Six Anchored Components on Your Web PageFive or Six Anchored Components on Your Web Page

• Use Image Links, Drop-Down and Punch-Out Link Use Image Links, Drop-Down and Punch-Out Link Lists, Intuitive Labeling for Informative Drill-DownsLists, Intuitive Labeling for Informative Drill-Downs



Web-Based/Online User Interface Strategies Web-Based/Online User Interface Strategies and Techniquesand Techniques

• Keep Site Shallow: No More than Three Clicks Keep Site Shallow: No More than Three Clicks to to Any Information PageAny Information Page

• Provide a Site Map Navigator Provide a Site Map Navigator • Roll Up, Group, and Categorize (e.g., FAQs, Roll Up, Group, and Categorize (e.g., FAQs,

Links)Links)• Provide the User with an ‘Escape Hatch’ to a Provide the User with an ‘Escape Hatch’ to a

‘Live’ ‘Live’ Human Voice (i.e., a Link to a Human Voice (i.e., a Link to a Telephone Telephone Connection for Help or Additional Connection for Help or Additional Information)Information)




• Provide Audio and Video SupplementsProvide Audio and Video Supplements• Executive (e.g., CEO) Introducing CompanyExecutive (e.g., CEO) Introducing Company• Don’t Just Tell—ShowDon’t Just Tell—Show• Put Product into Motion for Realistic and Put Product into Motion for Realistic and

Meaningful Context: Have a ‘Take a Tour’ Section Meaningful Context: Have a ‘Take a Tour’ Section • Provide User Interactivity with the Product: Provide User Interactivity with the Product:

Have Have a ’Test Drive’ Sectiona ’Test Drive’ Section




• Take Interactivity to Next Level: Let User Take Interactivity to Next Level: Let User Solve a Solve a Problem or Achieve a Goal by Using the Problem or Achieve a Goal by Using the Product. Product. User Feels Empowered While Creating User Feels Empowered While Creating Own Own Product Knowledge and PerceptionsProduct Knowledge and Perceptions

• Provide User Feedback Channels (Telephone, Provide User Feedback Channels (Telephone, Email, Form Submission) in Strategic PlacesEmail, Form Submission) in Strategic Places




• Section 508-Compliant (Disabilities)Section 508-Compliant (Disabilities)• Provide a Community Area for ‘Stickiness’Provide a Community Area for ‘Stickiness’• Communications ‘Plumbing’, e.g.,Communications ‘Plumbing’, e.g.,

• DatabaseDatabase Pushing Info/User Pulling Pushing Info/User Pulling InfoInfo

• Conditional/Personalized Information Conditional/Personalized Information • Effective Delivery Channels and Effective Delivery Channels and

Delivery TimesDelivery Times



Web-Based/Online User Interface Web-Based/Online User Interface Strategies and TechniquesStrategies and Techniques

• Using One-to-One, One-to-Many, and Using One-to-One, One-to-Many, and Many-to-Many-to- Many Many Communication As Communication As AppropriateAppropriate

• Well-Planned Method of Development, Well-Planned Method of Development, e.g., e.g., Sequential, Comparison, Spatial, Sequential, Comparison, Spatial, Chronological, Chronological, Order of Importance, Division Order of Importance, Division and Classification, and Classification, General-to-Specific, General-to-Specific, and Cause and Effect and Cause and Effect

technical comms user interface nf

Business