Monthly Archives: May 2016

Help Review – Mozilla Firefox

I stumbled across Mozilla Firefox’s help system last week and was interested to find most of the articles were largely written by volunteers. I hadn’t come across this kind of model for documentation before so it raised some interesting questions. For starters, can a group of volunteer technical writers collaborate to produce an effective help system?

2016-05-20 11_32_36-Mozilla Support

Mozilla released Firefox as an open-source web browser back in 2002 and as such the source code is open to anyone. As a non-profit organisation, Mozilla also relied heavily on the code, along with the support and documentation being largely maintained by volunteers. Although the company now has a large workforce of paid employees, an army of volunteers also still contribute to roughly 40% of its work, which includes not only the documentation but also coding tweaks (around 24% of all source code changes) and even the Firefox logo design. The help system was created through the SUMO technical writing program, which invited participants (a mixture of college students and technical writing professionals) to take part in each release cycle in order to produce the documentation. Although the program is not currently active, the participants and other volunteers still seem to be actively involved in maintaining the existing help articles.

Firefox-3

First Impressions

Visually, I think the design and layout of the Mozilla Support homepage is really appealing, with all of the individual products and their logos mapped out in different sections. It just looks cool. The simple grey background, contrasting with the colourful designs of the Mozilla product icons and clearly marked out sections make it very easy to navigate. It was interesting to discover that some of the legacy of Mozilla’s design is down to an interface designer called Steven Garrity wrote an article listing everything that was wrong with Mozilla’s visual identity back in 2003 and was subsequently invited to their head office and asked to head up their new visual identity team which led a re-brand in 2004 when the now well-known Firefox logo, designed by Jon Hicks, was introduced.

2016-05-24 12_55_59-Start

The help is broken down into nine help topics, with multiple articles under each topic. The documentation itself is clearly laid out, although the screenshots are sometimes different sizes and formats (some fade into background, some do not etc.) and it is easy to spot where different technical writers have worked on the same article and used different styles to highlight sections of a screenshot. In the example below, you can see three different contributors’ work, with one opting for a crimson red rectangle to highlight ‘Desktop’, another using a orange-red circle and the third person using a brighter scarlet red oval:

Inconsistent

Each page does actually list the authors of each article so it is possible to see how many people have contributed to each article. This particular article had eight contributors but other have even more, and unfortunately it shows:

2016-05-31 12_31_59-How do I tell if my connection to a website is secure_ _ Firefox Help

In this article, which had 22 contributors, there were little issues like the screenshots being slightly different sizes. While it’s not the end of the world, the different styles of writing and formatting are pretty noticeable, even for someone without mild OCD, and it can look a bit messy and unprofessional. I guess it’s the kind of thing that’s forgivable when you’re using a free open-source browser but it could be easily remedied if Mozilla implemented a style guide for all contributing technical authors to ensure there is more uniformity with terminology, screenshots and how things are highlighted. Alternatively an editor could go through and make edits to clean things up where necessary.

Features

One thing I was really pleased to see in the help was the occasional gif clip and a good number of tutorial videos which ensure the content is dynamic and semi-interactive for its readers. The videos, which have been produced by Mozilla senior UX designer Michael Verdi, are short and well edited so they are very watchable. He has a personal, informal style and friendly tone which is more engaging than a robotic Siri/Cortana-style  narration.

At the top of each article, there is also a drop-down menu on the left-hand side which has some pretty useful features such as a link to any discussion items on the article’s topic, multiple language translations of the article, showing what other articles are linked to the article you are reading and seeing the history of who contributed and edited the article.

2016-05-27 11_44_48-Photos

In terms of help and support, it has three main branches: Twitter, a support forum and help articles. Again, this is a great way for Mozilla to keep all of their bases covered. The other great thing people volunteer to assist with all three of those branches as well, with volunteer contributors on Twitter, volunteers answering questions on the support form and volunteers writing the help articles themselves. These volunteers are prompted to help by various Volunteer for Mozilla Support buttons, as shown in the screenshot  below:

2016-05-26 14_34_31-Start

There is constant encouragement to get involved in things like the “Army of Awesome” (their Twitter helpers) and statistics about how help matters. For example, “1 Tweet can save 1 day” and “1 article can be viewed by 400 million users”. It just has a really positive, pro-active community feel about it.

Another common theme is the carton Firefox character, who is like a superhero-type figure, which appeals to everyone’s inner geek. It’s another simple but effective way to make  the support pages fun and engaging.

This slideshow requires JavaScript.

Conclusion

I am really impressed with the content and support that is being produced by Mozilla, especially given the high percentage of work being done voluntarily. On top of the written content, they are also managing to offer video tutorial content and a Twitter help account which are further supported by a support forum. It would be useful to have a style guide or some kind of lead technical author/editor to iron out any issues with uniformity but overall I think Firefox’s support pages prove that open source projects can be reasonably well-documented through crowd-sourcing volunteer technical writers. I’m not sure this model of documentation would work for everyone but I think Mozilla have proved that volunteers can collaborate to produce an extensive help system, this clearly isn’t just a big work experience project.

Advertisements

How to become a Technical Writer

If you’re an analytical journalist who is looking for a change, a budding writer with an interest in technology or an experienced programmer who is secretly an aspiring wordsmith, then technical writing might just be the answer for you.

What is a Technical Writer?

Technical writers or authors help to communicate technical information and instructions for products, such as software and hardware, in a way that is easy to understand. This can include writing user manuals, online help, release notes, integration guides, fact-sheets, wikis and APIs among others. Other methods of communicating information include producing video tutorials, graphics and illustrations. If you’ve ever read the mini instruction manual that came with your smartphone or clicked the ‘?’ icon or ‘Help’ button while using a piece of software then the content was probably written by a technical writer.

The role is sometimes given other names such as technical communicator, documenter, information designer and content strategist. Occasionally the content is written by developers or business analysts.

Moving from Journalism into Technical Writing

After nearly six years of writing for local newspapers and witnessing more and more job cuts as readership declined, I decided to jump ship and try something new.

Side profile of a journalist typing on a typewriter

My lifesaver came in the form of technical writing, and while it might not be for everybody, I knew straight away that it was the right move for me. Skills I had used for years such as interviewing, writing shorthand and producing accurate copy quickly proved to be very much transferable but instead of interviewing local politicians and press officers to write news stories, I was speaking with developers and testers to produce release notes and user instructions. Similarly, my multimedia skills and experience with Photoshop and video editing came in handy for creating graphics and video tutorials. It certainly helped that I’d always been interested in computers and had worked on blogs (so had some basic knowledge of HTML etc) but I found most aspects of the job just suited my existing skill set.

What Background should a Technical Writer have?

While I have encountered that some companies who would rather hire technical writers with a coding or technical background, I don’t think that should be a stumbling block if you’re interested in pursuing a career in technical writing. I have met technical writers who have previously worked in customer support, higher education and even photography. Although I have personally found my journalistic skills incredibly useful, I think as long as you are a good writer, are able to think analytically and are happy to constantly learn new things then a career in technical writing could be for you.

The sections below will provide tips and advice that will help you if you are considering pursuing a career in technical writing:

1. Qualifications

Some employers will look for a degree in computer science or similar but requirements can depend on the subject matter of what is being documented. Degrees in science, engineering and English are all suitable.

While there aren’t actually too many universities which offer accredited technical writing courses, it certainly wouldn’t hurt your CV to have some kind of formal training in technical communication. The University of Limerick offers a graduate certificate in technical communication (distance learning), while  other universities such Imperial College and Norwich offer more specific or specialists courses such as science communication and communication design.

Introductory and more advanced courses with accreditation by the Institute of Scientific and Technical Communicators (ISTC) are offered by Cherryleaf, Armada and ESTON.

2. Commonly Used Tools

Another key thing that most employers look for is experience with the required publishing tools that their documentation team use or have used. The table below lists many of the products and tools that are commonly used by technical writers, although there are many others:

word_2013  Microsoft Word  Word processing tool.
sharepoint2013  Microsoft SharePoint  Documentation management tool.
default-space-logo-256  Atlassian Confluence  Documentation management/ team collaboration.
icon-flareLargeBgColor  Madcap Flare Help authoring tool.
FM-icon  Adobe FrameMaker  Document processing tool.
2016-05-18 12_27_22-Films & TV  Adobe RoboHelp  Help authoring tool.
Adobe_Acrobat_DC_Icon  Adobe Acrobat  PDF reading and editing tool.
Notepad  Windows Notepad  Plain text editing tool.
notepadplusplus.6.9.1  Notepad + +  Text and source code editor for Windows.
Adobe_Photoshop_CS6_icon.svg  Adobe Photoshop  Image and photo editing software
Visio-icon  Microsoft Visio  Diagram and flow chart creation tool.
visual_studio_2012___windows_startscreen_icon_by_revisionzero-d5qnp17  Microsoft Visual Studio  Integrated development environment.
greenshot_0a  Greenshot  Screenshot capture and editing tool.
img_snagit-icon  Snagit (TechSmith)  Screenshot capture and editing tool.
icon128-2x  Camtasia (TechSmith)  Screen recording and video editing tool.
Adobe_Illustrator_Icon_CS6  Adobe Illustrator  Vector graphics creation tool.

If you haven’t used any of the software listed above, it is possible to download 30-day trials of some of these (Adobe Software especially) and either play around with them or watch some tutorial videos online and read online help to learn how they work. Many open source tools such as Greenshot and ScreenToGif, which can be used to create .gif files from screen recordings, are completely free to download and use.

Another useful tool to use when starting out as a technical writer is to buy a copy of the Microsoft Manual of Style. This is a great everyday generic style guide that can be used as a guideline for your own technical writing or as a template when creating a style guide for an employer.

3. Coding Skills

While it is not essential, as I said before, having some basic coding knowledge would be extremely beneficial if you are serious about becoming a technical writer. Some people recommend learning the basics of HTML, CSS and some XML at the very least.

coding-future

There are some excellent online resources where you can learn different coding languages. These include:

Codecademyhttps://www.codecademy.com/

Khan Academy – https://www.khanacademy.org/computing/computer-programming

Code School – https://www.codeschool.com/

W3Schools – http://www.w3schools.com/

There are more out there and there are also plenty of forums and tutorial videos available which should give you the basics. Starting a blog or creating a website online is also another great way to learn and develop your HTML skills at the very least.

4. Build a Portfolio

It’s difficult to build a portfolio when you are just starting out and do not have work experience but one option is to go to freelancing websites and find some documentation jobs, write submissions and use them for your portfolio, whether they get accepted or not. Another option is to find an open-source collaborative project such as Mozilla Firefox (and Thunderbird) where the documentation is written by volunteers. Click here for more information.

If all else fails then simply produce dummy documentation samples such as user guides or fact-sheets for existing products. It would be good to have half a dozen or so of different document types, preferably both user-facing and back-end, to really showcase your work.

5. Networking

Once you have the qualifications, knowledge of the tools and a small portfolio, it is important to network and develop contacts in the industry. It is a good idea to look up and contact firms which have existing documentation teams who might need a junior technical writer in the future.

networking

Alternatively, write a list of companies you’d like to work for and either check their career sections or email them speculatively offering your services. Other ways to build your reputation and network is to send your CV out to recruitment agencies who specialise in tech jobs, add contacts on Linkedin and attend technology job fairs in your local area to get your name out there.

Finally, good luck with your search!

Was this post helpful? Let me know if the comment section below.

Help Review – Twitter

My stepmum recently asked for help publicising something online and my first suggestion was Twitter but explaining how to use it was a challenge in itself. Although it’s been around for a decade, I still don’t think it is that intuitive for someone who is unfamiliar with the basic concepts and terminology. As a result, the help is vital in explaining how to use it, what Tweets and Retweets are and the importance of followers.

Twitter’s Help link can be found by left-clicking your profile picture and scrolling down to the word Help or by clicking Help in the bottom dashboard.

Twitter2.jpg

First Impressions

The help homepage is pretty stylish, with a prominent white search panel where users can search for what they’re looking for. Underneath there are six key headings for commonly asked questions and even further down there are further sub-headings, a video tutorial and trending topics. Right at the bottom of the page there is an footer with some Quentin Blake-style cartoon people, presumably a hapless user and some friendly Twitter support staff in their Twitter-Blue uniforms. All very quaint but slightly disjointed if you compare the style of the trendy header with the children’s book illustrations in the footer.

Twitter3.jpg

Just testing it out as a “new” user to get to grips with the basics, there is the ‘Using Twitter’ section which introduces to the general concepts and there is a useful ‘Getting started with Twitter’ page, along with a glossary which even experienced users might find useful.

Features

The Twitter Support account is a great little feature. By creating a support account in their own social networking service, it not only encourages user engagement but the process turning to help becomes a seamless part of the Twitter user experience. It’s very neat.

2016-05-10 21_38_51-Twitter Support (@Support) _ Twitter

Commonly asked questions were mostly account-related, either being locked out or wanting to deactivate an account. For more complex issues that require assistance or intervention, the Twitter staff ask users to log a support case, referring them to this page here.

2016-05-11 11_20_04-Request help signing in to your account. _ Twitter Help Center

There is a nice and simple video tutorial about how to mute or block users featuring the same Quentin Blake cartoons. It is nicely put together but I think it’s a shame there aren’t more of these, like a bank of different tutorial videos. The only example I could find on the help site was how to mute a person on Twitter (I’m guessing this was the most commonly asked question the support team were asked):

I checked Twitter’s YouTube channel and there is a slightly longer version of this video, detailing how to block and report users but that was all. I think they’ve missed a trick here but I guess any answered questions can be Tweeted to their support account.

Hidden Features

It’s not so much a hidden feature but something I didn’t know about are the Twitter keyboard shortcuts. This list can be accessed by clicking on your profile picture and clicking Keyboard Shortcuts on the menu.

2016-05-10 22_04_21-Cortana

Another neat trick is the ability to embed Tweets. This can be done by either clicking the   ••• More (ellipsis) icon and selecting Copy Link to Tweet or Embed Tweet.

It’s quite a nice way to enhance content on a webpage. News sites in particular use this feature as a way to embed quotes from people, normally famous people or politicians, who have written something newsworthy on Twitter.

Conclusion

While it has some cool features, I would have thought Twitter could have added some more innovative aspects to their help, videos or maybe Vines in particular. I think the Twitter Support account is a good idea and it’s clearly being used quite actively. However, this could also be an indication that not enough people are using the help. Additional videos on recovering passwords, unblocking an account and deactivating accounts and sharing them on their Support account would probably halve the number of Tweets they receive. Despite this, I did like the style of the documentation itself, the familiar cartoon illustrations make it approachable and the content itself is a happy medium between informal and informative.

 

Atlassian Confluence: Hints & Tips

I’ve been using Atlassian Confluence for several years now and I think it’s an incredibly fun and useful tool when it comes to creating a wiki or online help. The list below includes useful hints, tips and time-saving shortcuts when using the software:

1. Watch the Atlassian Tutorials

If you’re a total noob and have never used JIRA or Confluence before then a great place to start and learn the ropes is to watch Atlassian’s tutorial videos on YouTube.

There are introductory videos, some with a slight Australian twang, which explain the general concepts and the basic Confluence hierarchy of child pages, parent pages and spaces. These can be found here.

One of the most useful videos, How to Build a Kick Ass Confluence Page, introduces a number of key features such as using macros, images and columns. This can be found below:

2. Using the Shortcuts

There are multiple shortcuts that can be used to make working with Confluence more efficient. The most useful is the { macro shortcut (called a “brace” in US or “curly bracket” in UK). Macros are tools which offer functionality to your page. These include a page tree, inserting a PDF, creating a panel, etc. Typing a letter will bring up macros names beginning with that letter. Other shortcuts include:

e – opens the edit screen.
// – allows you to select a date from a calendar pop-up.
@ – mention a colleague.
[ – add a link to another Confluence page or an external link.
w – will make you a watcher of the page.
Ctrl + Shift + e – will open the preview of the screen.

To view a summary of the shortcuts click the ? help key while in edit mode. Alternatively the full list can be found here.

3. Working with Tables

Tables are a great way to add images and align them with text. See example below:

Applebanana.jpg

These can be added using the table button and dragging to select the required size. Alternatively you can press Ctrl + Shift + I to create a table.

To remove table borders, open the source editor using the <> button (this will need to be enabled in configuration) and enter the following:

<table>
<tbody>
<tr>
<td style=”border: 0.0px;”>test </td>
<td style=”border: 0.0px;”>test </td>
</tr>
<tr>
<td style=”border: 0.0px;”>test </td>
<td style=”border: 0.0px;”>test </td>
</tr>
</tbody>
</table>

This example will create a 2 x 2 table of cells with no borders.

applebanana2.jpg

The code for this table is shown below:

<table>
<tbody>
<tr>
<td style=”border: 0.0px;”>
<ac:image ac:thumbnail=”true” ac:width=”25″>
<ri:attachment ri:filename=”apple.png”/>
</ac:image>
</td>
<td style=”border: 0.0px;”>Apple</td>
</tr>
<tr>
<td style=”border: 0.0px;”>
<ac:image ac:thumbnail=”true” ac:width=”25″>
<ri:attachment ri:filename=”banana.jpg”/>
</ac:image>
</td>
<td style=”border: 0.0px;”>Banana</td>
</tr>
</tbody>
</table>

4. Creating a Note, Warning, Tip or Info Box

A great way to highlight an important piece of text or information and break up long pieces of writing is to use the Confluence note, warning, tip and info boxes. These can be created using the following shortcuts:

{note
{tip
{warning
{info

These will appear as shown in the screenshot below. Any important text can be added inside the panels in the edit screen as normal.

Notes2.jpg

5. Exporting Pages in Different Formats

If there are certain pages that a consultant or colleague in sales wants to show to a client or external partner who can’t access Confluence, it is possible to export them as Word or PDF documents.

To do this, go to the top right hand corner of your screen, click the menu icon and select the required action:

2015_Kick_Off__London__-_UK___BENELUX_-_Hoyster

Clicking either ‘Export to PDF’ or ‘Export to Word’ will start a conversion of the page which will be downloaded and saved to your machine. The header and footer of the downloaded PDF can be customised in configuration.

6. Watchers, Shares and Mentions

If you want a certain user or group of users to read a page you have created or edited, this can be done three ways:

  • Watchers – watchers can be added and managed using the menu on the right hand side. Any users set as watchers for a page will receive email notifications when it is published or edited. This can be turned on and off using the “Notify watchers” Boolean flag at the bottom of the screen.
  • Shares – another way to inform Confluence users that a page, such as release notes, has been published is to share the page and manually enter the users names. They will all receive an email in the same way watchers do.
  • Mentions – if a user is mentioned in a page (using the @ macro) they will also receive an email notification. This is a direct but effective way to get users to read the content of a page.

7. Using Space or Page Templates

If you know you’re going to be creating a lot of similar pages where you want the content in the same format and layout then it might be worth creating a template. I only use templates for release notes but they are a great time saver.

To use a template, click the ellipsis button (…) but select the required template:

2015_Kick_Off__London__-_UK___BENELUX_-_Hoyster

8. Reordering Connected Pages

If you’ve created the skeleton of your Confluence space and you want to amend the order of your pages, this can be done by clicking the Reorder Pages button:

Who_is_who__-_UK___BENELUX_-_Hoyster.jpg

This will open a new window. To reorder the pages, click the arrow to expand the full hierarchy of the pages and click and drag the page names to the required positions. Dropping a page onto another will turn it into a child page of that page.

Reorder_Pages_-_UK___BENELUX_-_Hoyster.jpg

9. Creating Anchor Links

It is possible to create an anchor link to a section of content on the same page or on another page. To do this, you can user the anchor macro:

Type {anchor and then enter the name of the anchor. E.g. Banana.

Edit_-_2015_Kick_Off__London__-_UK___BENELUX_-_Hoyster

If you want to link to this anchor from the same page, simply add a link using the link button, selected ‘Advanced’ and enter the anchor name with a hashtag # E.g.#anchorname.

Edit_-_2015_Kick_Off__London__-_UK___BENELUX_-_Hoyster.jpg

Linking to another page is a bit more tricky and will require the full name of the page, followed by the page name and the anchor name. See format below:

Confluencesitename.com/Spacename/Pagename#Pagename-Anchorname

10. Linking with JIRA to create release notes

If you work alongside a development team using Atlassian’s issue tracking tool JIRA, there is a great way to quickly create release notes in Confluence using the JIRA filter macro.

To use this type ‘{‘ and then ‘JIRA‘:

JIRA

Next, using JIRA Query Language (JQL) in the search bar it is possible to filter for cases by JIRA project, release version, issue type etc. The example below shows the JQL for all cases that are new features linked to a project called “APP2” with version number “2.o1”:

project = APP2 AND fixVersion = “2.01” and issuetype = “New Feature” ORDER BY issuetype DESC, due ASC, priority DESC, created ASC

When inserted into a table, the release notes will appear as follows:

2016-05-06 16_27_52-Photos

The columns (issue type, key, summary, reporter, assignee or status etc) can be altered by clicking Edit on the filter. Next click Display Options to view the editing options.

columns.jpg

Begin typing to add more columns or click the ‘x‘ to remove specific columns.

To change the order they appear in open the source editor using the <> button and in search for “columns” and manual rearrange the order of the column names. See highlighted section below:

column-order.jpg

By using tables with filters for each issue type in a template page, it is possible for the release notes to literally populate themselves as the JIRA cases are added to a live project. By using this method for the products I work on, apart from editing the case names if they aren’t clear enough, the only documentation I need to write is for new features and cases where functionality changes or new settings have been added. It’s not only a great way to save time but it also ensures no JIRA cases are ever missed.