0
Technical Communications: User Interface Design <ul><li>Think Visually </li></ul><ul><ul><li>Many Readers Look at Visuals ...
Technical Communications: User Interface Design <ul><li>Effective Design Principles </li></ul><ul><ul><li>Keep Intended Au...
Technical Communications: User Interface Design <ul><li>Effective Design Principles </li></ul><ul><ul><li>Guides Reader’s ...
Technical Communications: User Interface Design <ul><li>Know Your Purpose </li></ul><ul><ul><li>Marketing : Colors, White ...
Technical Communications: User Interface Design <ul><li>Planning Objectives for Graphics </li></ul><ul><ul><li>Information...
Technical Communications: User Interface Design <ul><li>Planning Objectives for Graphics </li></ul><ul><ul><li>If More Tha...
Technical Communications: User Interface Design <ul><li>Format </li></ul><ul><ul><li>Physical Arrangement of Content </li>...
Technical Communications: User Interface Design <ul><li>Format </li></ul><ul><ul><li>Headers and Footers </li></ul></ul><u...
Technical Communications: User Interface Design <ul><li>Format </li></ul><ul><ul><li>Top Left-Hand Corner Viewed First (We...
Technical Communications: User Interface Design <ul><li>Type and Spacing </li></ul><ul><ul><li>Type Styles (Fonts) and Siz...
Technical Communications: User Interface Design <ul><li>Headings and Indention </li></ul><ul><ul><li>Headings Group Topics...
Technical Communications: User Interface Design <ul><li>Why Use Graphics? </li></ul><ul><ul><li>To Emphasize Points in the...
Technical Communications: User Interface Design <ul><li>Why Use Graphics? </li></ul><ul><ul><li>To Promote Reader Recall <...
Technical Communications: User Interface Design <ul><li>Types of Graphics </li></ul><ul><ul><li>Photographs/Illustrations ...
Technical Communications: User Interface Design <ul><li>Screen Shots </li></ul><ul><ul><li>Show the Process from the User’...
Technical Communications: User Interface Design <ul><li>Flow, Scale, and Proportion </li></ul><ul><ul><li>Flow (Direction)...
Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></u...
Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></u...
Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></u...
Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></u...
Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></u...
Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></u...
Upcoming SlideShare
Loading in...5
×

Technical Comms User Interface Nf

609

Published on

Technical Communications: User Interface

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
609
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Many readers look at visuals first to get the information they need. Most users who do read the text depend on visuals to help them grasp the information fully and quickly. Try to think visually any time you’re doing the following: Giving an overview, describing a process or an architecture, describing a grouping or a hierarchy, explaining a database structure, or tracing a data flow.
  • Effective design principles include using objects and metaphors that are familiar to your reader; giving your reviewers an early opportunity to review the initial graphics (otherwise known as ‘roughs’ or ‘mock-ups’) for appropriateness, clarity, and accuracy; omitting extraneous details and information, and balancing the graphic by providing an obvious visual center or focal point.
  • Other effective techniques include using print or graphic effects, such as size, shape, and color to guide your reader’s eye to the message; using such things as tables, or a top-to-bottom or left-to-right directional flow to speed up your reader’s comprehension; forming a conceptual group of objects with the same color, size, or shape for clear differentiation and improved reader retention; and using no more than five different symbols in a document to avoid confusing your reader.
  • To produce an effective page layout, you must know the purpose of the publication. What is effective for one publication may not be for another type of publication. For example, the purpose of a marketing document is to capture your reader’s attention and sell them something, so you would use a variety of techniques, including color, large amounts of white space, graphics, a variety of type sizes, styles, audio, and video. In contrast, the purpose of a reference document is to present information in a format that makes information retrieval quick and easy for your reader. In this case, you would use lines, different heading levels, indention, tables, and lists to identify different types of information on a page.
  • Keep the following points in mind when planning and designing your graphics: Keep the information as brief and as simple as possible. Try to present only one topic in each graphic. Label or caption each graphic carefully so that it is intuitive for your reader. When necessary, include a key (or legend) that identifies all symbols. Make the lettering horizontal for easy reading. Position the graphic as close as possible after the text that refers to it. Keep terminology consistent. And if three or more graphics or tables are used in the document, number the graphics or tables consecutively.
  • If more than five graphics or tables appear in a report, list them by title, together with the figure and page numbers, under a separate heading (‘List of Figures’ or ‘List of Tables’), which follows the Table of Contents. Except for reinforcing a company brand, or attempting to create a marketing effect, graphics should never be used as ornaments. For technical communications, use a graphic functionally, when it makes a direct contribution to your reader’s understanding of the subject matter. Your writing must provide context and significance for the graphic.
  • Format is the physical arrangement and general appearance of content in a document. The type of writing project normally determines the format you’ll use. Formal reports, memorandums, questionnaires, progress reports, proposals, technical manuals, and the like, have standard formats. Some may, for example, include a preface or an executive abstract, a glossary, a table of contents, a list of figures and tables, an index, or a bibliography.
  • Some documents may use such devices as headers and footers, graphics, indentation, and references or footnotes—others may not.
  • Format can make the document easier on the reader’s eye. In the Western world, the top left-hand corner of the page is where the reader’s eye looks first. By providing quick and easy access to information that’s useful and relevant to your reader, you will have achieved your ultimate objective: the clear and effective delivery and transfer of knowledge and information. Visual uniformity and subordination improves the reader’s understanding of content. A well-thought-out format not only improves readability, it speeds up reader comprehension, and improves knowledge retention.
  • A sound format includes type styles (fonts), type sizes, and spacing arranged in particular typographic conventions that are universally accepted. Spacing is defined as the space between characters, words, lines of type, paragraphs, and the space within the borders of a page. It plays a major part in the visual flow and readability of a page. Good spacing is the range of white space in which typographical elements are neither crowded nor appear incoherent because of too much white space. Spacing can be used by grouping objects together and by dividing a drawing into sections. For example, using consistent spacing among like objects, and using equal spacing between objects in a series.
  • Headings are used to flag important topics and sub-topics, and to provide the typographical continuity and subordination in a section (or chapter) of a document. This can be accomplished by designating the position and size of headings, as well as upper case, lower case, and bold face. Use alpha or numeric sequencing in a document with many internal references and cross-references. Sub-headings, sub-steps, lists, index subentries and procedural sub-steps should be indented, indicating subordination.
  • Here are some reasons for using graphics: Graphics can emphasize points in the text. Graphics can increase your reader’s interest in the material. Graphics can replace, clarify, or simplify technical information. Graphics appeal to right-brain functioning, providing another means for communicating information to your reader. Graphics can increase the ability to skim and scan. Graphics can build a model in the reader’s mind.
  • Graphics can also promote reader recall. Graphics can highlight important information. Graphics can show processes. Graphics can support inexperienced and visual learners. And finally, graphics can highlight relationships that are lost in the text.
  • Using graphics helps your reader absorb the facts and ideas you’re presenting. Some common types of graphics are photographs/illustrations, screen shots, graphs, drawings, flowcharts, organizational charts, pie charts, schematic diagrams, and maps .
  • Screen shots should show the entire process from the user’s perspective. They should show, as nearly as possible, how each screen will appear for the step being discussed. Much information can be conveyed with descriptive and concise captions, which can help reinforce important points in the text. Screen shots are considered figures, name them (according to task or procedure) and number them (if there are more than three figures in the document) accordingly.
  • Maintaining a clear sense of flow or direction in a graphic helps your reader assimilate the contents. Your reader’s attention should be led from one part of a graphic to another in the simplest manner. Varying size (or scale) helps to differentiate objects in a drawing. Size can also indicate the relative importance of objects, while similarity in size and proportion tends to group objects. However, too many different sizes can cause ambiguity or confusion, while using a balanced proportion, promotes harmony between different parts of a graphic. Position and align objects with respect to one another—based on obvious divisions, such as midpoints, endpoints, centers, and quadrants.
  • Web-based and other online user interfaces provide many opportunities to make information delivery more intuitive, realistic, and personal. Streamline your information architecture and keep your web site shallow by consolidating as many information pointers on your home page as possible, while keeping the page layout clean, simple, and clutter-free. Have no more than five or six anchored components on your web page. Use image links, a combination of drop-down (vertical) menu list links, punch-out (horizontal) menu list links, and intuitive labeling for informative drill-downs.
  • Keep your site as shallow as possible. This means drill-downs should be no more than three deep: a user should be able to open any page on your site, or an external site, within three clicks. Think about providing a site-map navigator as your virtual ‘floor plan’ of the site. Roll up components (i.e., topics, headings, and lists of links) and consolidate information even further by grouping and categorizing your roll-ups. Provide your user with an escape hatch to a ‘live’ human voice, such as a link to a telephone connection for help or additional information.
  • Provide audio and video supplements for a more personable and realistic form of information delivery. For example, include a video of the CEO giving a short introduction of the company’s history, products, services, and mission statement. Don’t just tell the user about the product with text, show the user. Put the product into motion so it’s realistic and meaningful to the user; for example, have a ‘Take a Tour’ section. Make the user experience interactive: Provide a dummy form of the product for the user to actually work with; for example, have a ‘Test Drive’ section.
  • If possible, take your user to the next level of interactivity: Present a realistic problem to be solved, or a goal to be achieved, by using your product in a mock exercise that’s slightly challenging for your user. This experience generates a potent effect, allowing your user to feel empowered while creating his or her own product knowledge and perceptions. Also provide user feedback channels via telephone, email, and form submission. Insert these ‘feedback’ points at strategic places. Feedback could include comments about web content or design, about the product or service, or about additional information.
  • Attempt to be Section 508-Compliant, where possible. Section 508 is a US government ruling that requires Federal agencies to make their electronic and information technology accessible to people with disabilities, so that they can obtain and use information quickly and easily. To keep users coming back, otherwise known as ‘stickiness’, it’s a good idea, where appropriate, to develop a community area. And finally, think about ‘communication plumbing’, e.g., using your database to push information to the user, or having the user pull selected information from your web site; using conditional/personalized information, implementing the most effective delivery channels and delivery times…
  • … also one-to-one, one-to-many, and many-to-many communication, and think about your method of developing the information, e.g., should it be sequential? by comparison? spatial? chronological? by order of importance? division and classification? general-to-specific? or by cause and effect? Remember to plan and implement your communications plumbing for the utmost efficacy.
  • Transcript of "Technical Comms User Interface Nf"

    1. 1. Technical Communications: User Interface Design <ul><li>Think Visually </li></ul><ul><ul><li>Many Readers Look at Visuals First </li></ul></ul><ul><ul><li>Visuals Used to Grasp Information Fully and Quickly </li></ul></ul><ul><ul><li>Use Visuals When Doing the Following: </li></ul></ul><ul><ul><ul><li>Giving an Overview </li></ul></ul></ul><ul><ul><ul><li>Describing a Process or an Architecture </li></ul></ul></ul><ul><ul><ul><li>Describing a Grouping or a Hierarchy </li></ul></ul></ul><ul><ul><ul><li>Explaining a Database Structure </li></ul></ul></ul><ul><ul><ul><li>Tracing a Data Flow </li></ul></ul></ul>
    2. 2. Technical Communications: User Interface Design <ul><li>Effective Design Principles </li></ul><ul><ul><li>Keep Intended Audience in Mind : Use Familiar Objects and Metaphors </li></ul></ul><ul><ul><li>Plan for Graphics from the Start : Gain Reviewer Feedback in Early Stages </li></ul></ul><ul><ul><li>Establish Focus and Purpose : Omit Distracting Features and Details </li></ul></ul><ul><ul><li>Balance the Graphic : Able to Pick Out Visual Center or Focal Point of Graphic Easily </li></ul></ul>
    3. 3. Technical Communications: User Interface Design <ul><li>Effective Design Principles </li></ul><ul><ul><li>Guides Reader’s Eye to Message : Use Print Size and Boldness; Contrast Object Size, Shape, Color </li></ul></ul><ul><ul><li>Effective Sense of Direction for Comprehension : Top-to-Bottom, Left-to-Right, Consider Tables, No Vertical Text! </li></ul></ul><ul><ul><li>Form a Conceptual Group : Same Shapes/Colors to Group Objects, Shading for Similar or Highlighted Objects, Forms, and Screen Shots </li></ul></ul><ul><ul><li>Intuitive Symbols : No More than Five Different Symbols in a Document = Clutter and Confusion </li></ul></ul>
    4. 4. Technical Communications: User Interface Design <ul><li>Know Your Purpose </li></ul><ul><ul><li>Marketing : Colors, White Space, Graphics, Various Type Sizes/Styles, Audio, and Video </li></ul></ul><ul><ul><li>Reference : Horizontal and Vertical Lines, Heading Levels, Indention, Tables , and Lists </li></ul></ul>
    5. 5. Technical Communications: User Interface Design <ul><li>Planning Objectives for Graphics </li></ul><ul><ul><li>Information Brief and Simple </li></ul></ul><ul><ul><li>Only One Topic per Graphic </li></ul></ul><ul><ul><li>Label and Caption Carefully/Intuitively </li></ul></ul><ul><ul><li>Include a Key or Legend When Necessary </li></ul></ul><ul><ul><li>Lettering Horizontal for Easy Reading </li></ul></ul><ul><ul><li>Position Graphic Closely After Referring Text </li></ul></ul><ul><ul><li>Keep Terminology Consistent </li></ul></ul><ul><ul><li>Number Graphics and Tables if There Are Three or More </li></ul></ul>
    6. 6. Technical Communications: User Interface Design <ul><li>Planning Objectives for Graphics </li></ul><ul><ul><li>If More Than Five Graphics, Produce List of Figures, or List of Tables (Title, Figure Number, Page Number) Appearing After Table of Contents </li></ul></ul><ul><ul><li>Graphics Should be Functional, Not Ornamental </li></ul></ul><ul><ul><li>Should Contribute to Reader’s Understanding </li></ul></ul><ul><ul><li>Text Carries Context and Significance for the Graphic </li></ul></ul>
    7. 7. Technical Communications: User Interface Design <ul><li>Format </li></ul><ul><ul><li>Physical Arrangement of Content </li></ul></ul><ul><ul><li>Preface or Executive Abstract </li></ul></ul><ul><ul><li>Glossary </li></ul></ul><ul><ul><li>Table of Contents </li></ul></ul><ul><ul><li>List of Figures and Tables </li></ul></ul><ul><ul><li>Index </li></ul></ul><ul><ul><li>Bibliography </li></ul></ul>
    8. 8. Technical Communications: User Interface Design <ul><li>Format </li></ul><ul><ul><li>Headers and Footers </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Indention </li></ul></ul><ul><ul><li>References </li></ul></ul><ul><ul><li>Footnotes </li></ul></ul>
    9. 9. Technical Communications: User Interface Design <ul><li>Format </li></ul><ul><ul><li>Top Left-Hand Corner Viewed First (Western World) </li></ul></ul><ul><ul><li>Aids Quick and Easy Access to Information </li></ul></ul><ul><ul><li>Supports Knowledge Transfer </li></ul></ul><ul><ul><li>Visual Uniformity and Subordination Improves Understanding, Comprehension, and Retention </li></ul></ul>
    10. 10. Technical Communications: User Interface Design <ul><li>Type and Spacing </li></ul><ul><ul><li>Type Styles (Fonts) and Sizes </li></ul></ul><ul><ul><li>Spacing—Between Characters, Words, Lines of Type, Paragraphs, Page Borders </li></ul></ul><ul><ul><li>Supports Visual Flow and Readability </li></ul></ul><ul><ul><li>Spacing Objects for Meaning </li></ul></ul>
    11. 11. Technical Communications: User Interface Design <ul><li>Headings and Indention </li></ul><ul><ul><li>Headings Group Topics by Using Position, Point Size, Bold Type, Upper and Lower Case, and Alpha or Numeric Sequence </li></ul></ul><ul><ul><li>Indent Sub-Headings, Lists, Index Entries, and Procedural Sub-Steps </li></ul></ul>
    12. 12. Technical Communications: User Interface Design <ul><li>Why Use Graphics? </li></ul><ul><ul><li>To Emphasize Points in the Text </li></ul></ul><ul><ul><li>To Increase Reader’s Interest </li></ul></ul><ul><ul><li>To Replace/Clarify/Simplify Technical Information </li></ul></ul><ul><ul><li>To Appeal to Right-Brain Functioning </li></ul></ul><ul><ul><li>To Increase Ability to Skim and Scan </li></ul></ul><ul><ul><li>To Build a Model in the Reader’s Mind </li></ul></ul>
    13. 13. Technical Communications: User Interface Design <ul><li>Why Use Graphics? </li></ul><ul><ul><li>To Promote Reader Recall </li></ul></ul><ul><ul><li>To Highlight Important Information </li></ul></ul><ul><ul><li>To Show Processes </li></ul></ul><ul><ul><li>To Support Inexperienced and Visual Learners </li></ul></ul><ul><ul><li>To Highlight Relationships Lost in the Text </li></ul></ul>
    14. 14. Technical Communications: User Interface Design <ul><li>Types of Graphics </li></ul><ul><ul><li>Photographs/Illustrations </li></ul></ul><ul><ul><li>Screen Shots </li></ul></ul><ul><ul><li>Graphs </li></ul></ul><ul><ul><li>Drawings </li></ul></ul><ul><ul><li>Flowcharts </li></ul></ul><ul><ul><li>Organizational Charts </li></ul></ul><ul><ul><li>Pie Charts </li></ul></ul><ul><ul><li>Schematic Diagrams </li></ul></ul><ul><ul><li>Maps </li></ul></ul>
    15. 15. Technical Communications: User Interface Design <ul><li>Screen Shots </li></ul><ul><ul><li>Show the Process from the User’s View </li></ul></ul><ul><ul><li>Descriptive and Concise Captions Can Help Reinforce Important Points in the Text </li></ul></ul><ul><ul><li>Considered Figures; Name and Number Them Accordingly </li></ul></ul>
    16. 16. Technical Communications: User Interface Design <ul><li>Flow, Scale, and Proportion </li></ul><ul><ul><li>Flow (Direction) Aids Content Assimilation </li></ul></ul><ul><ul><li>Varying Size (Scale) Differentiates Objects, Indicates Importance, Groups Objects </li></ul></ul><ul><ul><li>Too Many Sizes Can Create Ambiguity and Confusion </li></ul></ul><ul><ul><li>Good Proportion = Harmony Between Parts </li></ul></ul><ul><ul><li>Use Clear Divisions to Align Objects: Midpoints, Endpoints, Centers, and Quadrants </li></ul></ul>
    17. 17. Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></ul><ul><ul><li>Can Make Information Delivery More Intuitive, Realistic, and Personal </li></ul></ul><ul><ul><li>Streamline Information Architecture/Keep Site Shallow </li></ul></ul><ul><ul><ul><li>Consolidate as Many Information Pointers on Home Page, While Keeping it Clutter-Free: No More than Five or Six Anchored Components on Your Web Page </li></ul></ul></ul><ul><ul><ul><li>Use Image Links, Drop-Down and Punch-Out Link Lists, Intuitive Labeling for Informative Drill-Downs </li></ul></ul></ul>
    18. 18. Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></ul><ul><ul><li>Keep Site Shallow: No More than Three Clicks to Any Information Page </li></ul></ul><ul><ul><li>Provide a Site Map Navigator </li></ul></ul><ul><ul><li>Roll Up, Group, and Categorize (e.g., FAQs, Links) </li></ul></ul><ul><ul><li>Provide the User with an ‘Escape Hatch’ to a ‘Live’ Human Voice (i.e., a Link to a Telephone Connection for Help or Additional Information) </li></ul></ul>
    19. 19. Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></ul><ul><ul><li>Provide Audio and Video Supplements </li></ul></ul><ul><ul><li>Executive (e.g., CEO) Introducing Company </li></ul></ul><ul><ul><li>Don’t Just Tell—Show </li></ul></ul><ul><ul><li>Put Product into Motion for Realistic and Meaningful Context: Have a ‘Take a Tour’ Section </li></ul></ul><ul><ul><li>Provide User Interactivity with the Product: Have a ’Test Drive’ Section </li></ul></ul>
    20. 20. Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></ul><ul><ul><li>Take Interactivity to Next Level: Let User Solve a Problem or Achieve a Goal by Using the Product. User Feels Empowered While Creating Own Product Knowledge and Perceptions </li></ul></ul><ul><ul><li>Provide User Feedback Channels (Telephone, Email, Form Submission) in Strategic Places </li></ul></ul>
    21. 21. Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></ul><ul><ul><li>Section 508-Compliant (Disabilities) </li></ul></ul><ul><ul><li>Provide a Community Area for ‘Stickiness’ </li></ul></ul><ul><ul><li>Communications ‘Plumbing’, e.g., </li></ul></ul><ul><ul><ul><ul><li>Database Pushing Info/User Pulling Info </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Conditional/Personalized Information </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Effective Delivery Channels and Delivery Times </li></ul></ul></ul></ul>
    22. 22. Technical Communications: User Interface Design <ul><li>Web-Based/Online User Interface Strategies and Techniques </li></ul><ul><ul><li>Using One-to-One, One-to-Many, and Many-to- Many Communication As Appropriate </li></ul></ul><ul><ul><li>Well-Planned Method of Development, e.g., Sequential, Comparison, Spatial, Chronological, Order of Importance, Division and Classification, General-to-Specific, and Cause and Effect </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×