Archive for July, 2012

Styles of Japan: A Showcase of Manga and Anime Illustration


  

Illustration is a field that is overflowing with imagination. From the various styles and mediums that illustrators have at their disposal, imagination seems to be about the only limit to their work. One area in particular that never seems to be lacking in imagination is the Japanese styles commonly known as manga and anime.

While typically meaning forms of comics and animation, these terms have become somewhat encompassing for particular styles of art. And in both genres, the character work and often exciting, vibrant pieces are ones that do more than just reflect imagination, they exude it. So take a tour of this showcase we’ve prepared for you of manga and anime illustration to get inspired.

Styles of Japan

Cleared by nuriko-kun

Sisters by Pyromaniac

Jellyfish by cherriuki

Anemone and Malevilla by laverinne

Incandescence by JohnSu

Kizutsuku by kandasama

Newborn by Mezamero

Witch of the East by Hachiimi

-Broken but Loved- by naochiko

The Lonely Prince by Muika-Miru

I don’t cry by nuriko-kun

deadB by Sakukko

Bubbles by joodlez

The Power of Goodbye by Yaoi-World

commission – FruityStarburst by ruretto

Greed by mou-S

Dante VS Bayonetta by reiq

Earthling by shirotsuki

Snow + Ice by melodeiia

Excuse me… by Doodlez-Freaky

TraditionalArt vs. DigitalArt by namirenn

Flowers 2 by Clavies

First Sky by zetallis

Marie’s Recital by oh8

– Fairy Comission — by Kurama-chan

LG: Hachiimi by Doodlez-Freaky

Wisteria mirror by BoryChan

Remnants by shirotsuki

strawberry swirlpop by punipunipon

Diseased by InsaneAndroid

Gem of the Forest by pastelAurora

Penelope by Slugbox

Liesbeth by BoryChan

In the End

Through their rich history, these two artforms have evolved and grown, and today are inspiring artists around the world. We hope that some of that magic was captured in this post and passed along to our readers. Did any pieces really stand out to you? Let us know below!

(rb)


Poster Design Contest: Redesign The Web, Redesign The World!


  

Web design has evolved dramatically in recent years. Better browser support and innovative design techniques are changing the way we design websites. In fact, we’ve become quite versed in producing beautiful and performant user experiences. However, this doesn’t hold true for most websites out there, now does it?

How often do you stumble on slow, clunky websites? Websites where text is embedded in images and interfaces are unusable and messy — not to mention that the code is hacky and unmaintainable? Websites that are completely unusable on mobile devices and that are cumbersome to navigate?

We all deserve better than that. With this poster contest, we’d like to raise awareness of the beautiful and accessible Web:

Redesign The Web, Redesign The World

Yes, it’s about time to redesign the Web and, hence, to redesign the world. We can make the Web a better place. But to do that, we need your help.

Where Do We Begin?

As professionals, we do our best to employ the best coding and design practices. We encourage our friends, colleagues and clients to advocate the user’s interests, and we follow recent developments in the industry. However, we probably have to do a bit more if we really want to make the Web a bit more usable. We have to remind ourselves, our colleagues and our clients of the problems that their websites have, and potential solutions to these problems. We have to make it clear that websites require a minor adjustment or a major redesign.

All of the little tasks listed below would take just a couple of minutes each day, but if we use them consistently and stay persistent, our voices eventually will be heard.

Here is what each one of us can do:

  • Create a critique email template that you can use to notify website owners about issues with their website. Then, whenever you come across a poorly designed website, just paste the template into an email and send it to the website owner. Also, if you have a minute to spare, tweet the owner directly using the hashtag #redesigntheweb to raise awareness among your friends and colleagues.

    Subject: Your website is very difficult to use!

    Dear [--Website Owner--],

    I just stumbled on your website [--URL--] and found it very difficult to use. I wasn’t able to [-- perform a certain task / find what I was looking for --], although I am confident that your website does have this information. I would love to use your website, and I am sure you’ve put a lot of time and thought into it, but unfortunately it was more frustrating than helpful. For me, a website’s information and features must be, above all, accessible and useful. It they aren’t, then the website doesn’t serve any real purpose.

    Please consider redesigning the website and improving its user experience so that I can visit it again. Otherwise, I’ll have to keep seeking alternatives.

    Thank you for your time, and I hope to stumble on your (redesigned) website in the future!

    Sincerely yours,
    . . . . . . . . . . . . . .

  • Whenever you see a bug or dark UX pattern on a website, report the issues via the website’s contact form. Explain the issue and suggest solutions for solving the problem if you can.
  • Whenever you stumble upon a truly poor customer service, drop an email to the website owners explaining that you’ll seek an alternative service provider because your experience has been unacceptable. Be concrete in your criticism.
  • Upgrade the browser of your friend, colleague, coworker or relative to the latest version.
  • Propose solutions. Most owners don’t know that their website is inaccessible or slow, so help them help their users. Point them to useful templates and resources that will help them solve their problem.
  • Whenever you see a useful or clever design solution, send a short email to the owners applauding them for their effort and attention to detail.
  • If you are a designer or developer, join the Move the Web Forward campaign and help browser makers and open-source projects do just that. And, of course, recommend only best practices to students and newcomers to the industry.

Or you could also join this contest and create a poster to spread the message!

Join The Poster Design Contest!

We challenge you to design a beautiful, thought-provoking and inspiring A4/A3-sized poster and send it over to us. The poster should encourage everyone to create fast, user-friendly and accessible websites; websites that deliver value and are a pleasure to use. We will then select the most interesting designs, release them for free on Smashing Magazine, and invite everyone to republish them, print them out, post them on walls and send us photos of the posters from across the globe.

Prizes To Win

As always, we have valuable prizes for the best entries. The winners of the contest will be determined by Smashing Magazine’s editorial team. Here are the prizes:

  • Letterpress Prints
    If you love letterpress posters like we do, you can select two of them from Jessica Hische’s collection or Wilkintie collection and we’ll deliver them for you. Alternatively, you can pick the ILoveTypography’s limited edition “A World Without Type” type poster.

    Letterpressed X

    Poster

    I Love Typography Poster

  • 52 Aces Card Deck
    A limited edition poker deck consisting of 52 extremely different cards, each of them individually designed by an international designer or illustrator in their distinct style.

    Card Deck

    Card Deck

    Card Deck

  • Wacom Inkling Drawing Pen
    This pen records your sketches as you draw. Simply transfer the files to your computer and continue working on the sketches digitally. It’s a tool that every modern designer should have.

    Wacom Inkling

  • Bose QuietComfort 15 Acoustic Noise Cancelling Headphones
    According to various tests, the Bose QuietComfort 15s currently offer the best quality sound and silencing capabilities in a pair of noise-canceling headphones. If you want to focus on your work and do not get distracted by subway or cars driving nearby, that’s the headphones you probably need.

    Bose Headphones

How Do I Join the Contest?

To participate in the poster contest, please follow the rules listed below. Please note that we will not consider designs that don’t meet these guidelines.

  1. Come up with an original, beautiful and unique design. It could be an illustration, collage, photographic piece, typographic design — anything! Please make sure the design looks great when printed out, both in color and black and white.
  2. The design should be well formatted for printing: in A4 and A3 sizes, and with a 5-mm print margin.
  3. The design should include a small Smashing Magazine’s logo. You may also include your own logo. Please make sure both logos are readable yet unobtrusive.
  4. Pack up your source files, preferably in a layered PSD, AI, EPS or INDD file, in a ZIP-archive, e.g. [your-name]-[submission's-title].zip would be great.
  5. Submit your poster design by the 23rd of July 2012 to the email address submissions[.at.]smashingmagazine.com, with the subject line Redesign the Web Contest.

Please also give credit where credit is due. Make sure to respect the copyright of designers whose images and words you use in your design. And feel free to submit multiple entries; however, each entry should be unique and distinguishable.

In the future, we’d love to print the best designs in a series of t-shirts (only with your permission, of course), so bear this mind when designing your work. We will feature the selected posters a week after the submission deadline. Feel free to include a link to your portfolio in your submission email; we’d love to link to it in the release post!

Redesign the Web: Inspiration

But what might such a poster look like? Well, we asked five well-respected designers to interpret the “Redesign the Web, Redesign the Worldâ€� theme with their own ideas, creativity and style. The results are striking and inspiring, and they prove once again that cultural diversity turns every task and problem into a unique experience. These are only few interpretations of the theme — there are many more out there!

Nick La interprets the Web as an earth-like eco-system. The Web is situated in an abstract, futuristic environment, with colors and elements that convey an almost mystical atmosphere. The interpretation has a visionary quality to it and shows a touch of Jules Verne. Have you noticed how Nick managed to have both dinosaurs and tweets in one artwork?


by Nick La

Larissa Meek’s first poster concept is strongly geometric and bursts with color. “I wanted to capture the essence of what a more beautiful world would feel like based on the statement ‘Redesign the Web, Redesign the World,’� Larissa says. The result sure catches the eye.


by Larissa Meek

Larissa Meek’s second concept shows another interesting approach, visualizing the various elements that the Web currently consists of. The poster captures techniques such as CSS and HTML, workflow elements such as storytelling and also the daily realities of the professional designer such as deadlines, coffee breaks and ideation. All elements are interconnected in a clever composition using just two main colors: red and orange.


by Larissa Meek

Simon C. Page is known for his abstract geometric styles. His poster design is made up of a variety of shapes and structures that are fundamental to the Web — the world being one of them.


by Simon C. Page

Brazilian designer Ricardo Gimenes’ first concept relies on Smashing Magazine’s familiar cartoon style and introduces what might be considered a <redesign> tag.


by Ricardo Gimenes

Veerle Pieters’ cover design for the Smashing Book 3 reflects the various elements that a redesign has to balance and the various building blocks of Web. Read more about Veerle’s ideas behind the design and the process. If you would like to buy a print of the poster, please visit our Smashing Shop.

Design by Veerle Pieters
Smashing Book #3 and #3â…“ cover designs by Veerle Pieters

It’s Your Turn To “Redesign the World�!

We are excited to see what you are capable of, and we sincerely believe we can all shape the future of the Web together. The poster contest is just a humble attempt to change the way things are, and it will hopefully trigger your creativity and encourage you and others to reinterpret the Web and the world through a new lens.

Good luck, everyone! We are looking forward to receiving many beautiful entries!

Yours truly,
The Smashing Team

“Now is the accepted time, not tomorrow, not some more convenient season. It is today that our best work can be done and not some future day or future year. It is today that we fit ourselves for the greater usefulness of tomorrow. Today is the seed time, now are the hours of work, and tomorrow comes the harvest and the playtime.â€� — W. E. B. DuBois


© Smashing Editorial for Smashing Magazine, 2012.


Essential Design Patterns For Mobile Banking


  

Despite a great deal of mobile innovation, many creators of financial apps still copy their interface patterns from the desktop Web, even though these patterns are not as well suited to the mobile space. Small screens, custom controls, divided attention and fat fingers demand different thinking when designing for mobile.

I previously covered mobile wallet UX considerations in my article “Ultimate Guide to Designing NFC Mobile Apps You Won’t be Ashamed Of.� In this article, we will look specifically at simple mobile transfers of funds from checking to savings accounts, taking what works on the Web and converting it into authentically mobile flows using simple, effective design patterns. Similar analyses and design strategies can be applied to many other areas that involve complex forms, such as mobile e-commerce checkout and social network registration.

We will not name any companies in this article. That is deliberate. If you are looking for company bashing, you won’t find it here. But if you want to know how to make mobile banking work, read on.

Let’s begin with the basic building block: selecting an account. It can be accomplished in two primary ways: via a “picker� (called “spinner� in Android) and via a dedicated selection page (also called “table view�).

Picker/Spinner

For system interactions, many app and mobile website designers start by looking at the desktop Web interface pattern: a form with drop-down menus. Here is a common pattern for me-to-me transfers (i.e. transfers between two of your own accounts, such as checking and savings):


Typical me-to-me transfer via Web form.

The drop-down menu works reasonably well on the desktop Web, assuming the customer has between 1 and about 20 or 30 accounts. Each account can be listed in the drop-down menu by its full name, along with the account balance:


Selecting an account via the Web form’s select control.

How does this translate to mobile? Not very well. Blindly copying the desktop Web is a knee-jerk reaction, and it turns out that it’s mostly unsuccessful, resulting in a subpar experience. Here is why. Instead of the 20 or 30 selections that can be displayed in the drop-down menu, the iPhone’s standard picker control shows only 3 full and 2 partial choices:


Selecting an account via iOS’ picker control.

In Android 4.0 (the latest public Android version, named Ice Cream Sandwich), the situation is slightly better. Instead of the picker, the Android OS uses the spinner overlay, which shows 8 options. Unfortunately, the formatting options are quite limited, and the text area in the overlay is about 20% narrower than the main screen because the spinner is not using the full width of the device. This leads to confusing double and triple wrapping of text and numbers:


Selecting an account via Android’s spinner control.

Interestingly, some online banks use this pattern to display a list of accounts. However, by necessity (and to avoid the confusion of wrapping and truncation on older and smaller low-end devices), they use short codes for account names, such as CHK, SAV and CC1. These abbreviations work reasonably well for text banking, where the short-and-sweet mental model (“C U L8R�) reigns supreme. However, code abbreviations are far from the slick world-class UI elements that consumers have come to expect from their smartphones. Rather, they smack of “dim phones,� BlackBerrys, DOS and enterprise software. Having to remember codes to do mobile banking is a far cry from the experience of playing Angry Birds or shopping on Amazon or Gilt. To create a better experience on mobile, we need another design pattern: a dedicated selection page.

Dedicated Selection Page

A slicker and more usable mobile design pattern for listing accounts than pickers and spinners would be a dedicated selection page (also called “table view�) in which 10 or more account options could be listed comfortably. As Apple’s iOS developer guidelines state, “Consider using a table view, instead of a picker, if you need to display a very large number of values. This is because the greater height of a table view makes scrolling faster.�

This is how it looks wireframed using the agile, lightweight, sticky-note methodology (see the “References� at the end of this article):


Selecting an account via a dedicated selection page (wireframe).

The advantages of using a dedicated selection page over a picker or spinner include the following:

  • Any font and branding you like;
  • A platform-independent experience;
  • Use the entire width of the page;
  • Text wraps as needed, so multiple device profiles can use the page comfortably;
  • Display 10 or more options at a time, with comfortable scrolling.

The bottom line is that, with a dedicated selection page, you can easily display the account’s full name and balance.

How could this pattern be used with a form? One popular pattern is a form with dedicated selection pages. Unfortunately, this often creates very long flows.

Form With Dedicated Selection Pages

The idea behind this pattern is simple: copy the standard desktop Web form but use dedicated selection pages instead of pickers or spinners.

Using this mobile design pattern, our me-to-me transfer flow would look like this:

  1. Blank form;
  2. Dedicated page to select the “From� account;
  3. Back to the form (with the “From� field now filled in);
  4. Dedicated page to select the “To� account;
  5. Back to the form (with both the “To� and “From� fields now filled in);
  6. Fill in the amount, etc., and hit “Continue�;
  7. Verification page.

Here is the flow wireframed using the agile lightweight sticky-note methodology:


Me-to-me transfer via a form with dedicated selection pages (wireframe).

While this pattern works, it makes the flow quite long: seven pages. Could it be shortened? Absolutely. One excellent mobile-first pattern is the dedicated wizard flow.

Dedicated Wizard Flow

This is an extreme adaptation of the desktop Web form. This pattern works extremely well for short forms because it dispenses with desktop forms entirely, using a dedicated page for each attribute of the form.

Using this pattern, our me-to-me transfer flow would look like this:

  1. Dedicated page to select the “From� account;
  2. Dedicated page to select the “To� account;
  3. Dedicated page to enter the amount, with a numeric keyboard;
  4. Verification page.

And here is the flow using the agile methodology:


Me-to-me transfer via a dedicated wizard flow (wireframe).

This pattern works very well for short forms, and it is a great example of Luke Wroblewski’s mobile-first design thinking. The entire flow is accomplished in only four steps. Note that a verification page (allowing the customer to review the entire transaction before tapping the final “Transfer� button) is recommended with this pattern. Note also the use of the breadcrumb pattern, which shows the customer which step of the workflow they are on and how many steps remain. The breadcrumb enhances this design pattern nicely.

Are we done? Should you create a dedicated wizard for every flow on your mobile banking website? Not so fast.

In mobile, nothing comes for free. That includes the dedicated wizard flow, which completely breaks down in longer forms. The basic idea is to have a dedicated page for each element of the form. But if the form has five or more elements, then the flow starts to get too long. Another issue is the inability of this pattern to distinguish between optional elements (such as “Memo�) and required elements (such as “Amount�). With this pattern, each element gets its own entry page with the appropriate keyboard and is likely to be treated as “required�. Even if the customer understands that they don’t need to enter anything, each element requires the customer to at least look at the page and click “Continue.�

So, is there another pattern for a page with five or more elements and many optional fields? I’m glad you asked. One of the most versatile yet underused patterns is the wizard flow with form. And as a bonus, this pattern dispenses with the need for a separate verification page.

Wizard Flow With Form

The idea here is very simple. Start with a dedicated page to select each account, and then show the rest of the fields in a form.

Using this pattern, our me-to-me flow would look like this:

  1. Dedicated page to select the “From� account;
  2. Dedicated page to select the “To� account;
  3. Continue to the form (with both the “To� and “From� fields now filled in);
  4. Fill in the amount, etc., and hit “Continue�.

Here is the wireframe using the agile methodology:


Me-to-me transfer via the wizard flow with form.

This mobile design pattern combines the best features of Web forms, such as the flexibility of having optional fields and multiple input fields, with the vastly improved usability of dedicated, mobile-optimized selection pages. Another boon is the option to dispense completely with the verification page, because the form page itself acts as an editable verification page. Of course, you could always append a separate verification page if you really must.

Editing is also much easier than with most other patterns. Instead of having to go through the entire flow again, the customer only has to edit the fields that need correction. For example, to edit the “To� account, the customer would tap the corresponding field in the form and be taken to the dedicated “To� account page, and then immediately back to the form, without having to go through the entire “From� account → “To� account → Amount flow again.

Mobile: Thinking Differently

As we’ve seen now, mobile design itself is usually not complicated. In fact, because people will be using your app with fat meaty pointers (commonly called “fingers�) in a stressful multitasking environment (commonly called “life�), a less complicated design is virtually guaranteed to perform better. However, designing for mobile is one of the most sophisticated exercises any of us is likely to encounter. Simply copying successful desktop patterns is usually the worst choice, yet it is the one many designers naturally gravitate to.

Designing for mobile requires thinking differently. Remember that in mobile, each form field requires at least an extra tap to bring up the keyboard, picker, dedicated page or other element to enter data. Instead of a vertical flow to guide the person to the next field, consider using a horizontal flow instead. Look for options and inputs to eliminate. Whenever possible, minimize the number of pages the person has to go through in order to complete the workflow; this will reduce input errors and increase customer satisfaction. Last but not least, make user testing the core of your mobile design process, and be sure to user test everything you design as early as possible.

References

(al) (da) (il)


© Greg Nudelman for Smashing Magazine, 2012.


Writing Effective Documentation For WordPress End Users


  

Today I get to write about something close to my heart: documentation. The emails I love the most start with, “I’ve got this new product. Please, document it!� I get a lot of pleasure from learning about someone’s code and making it as clear as possible for users. I love taking a great product and making sure that people get it.

splash image

In this article, we’ll look at writing documentation for a WordPress plugin, theme or product. Most of the information can be applied to documentation for other software types, but we’ll look at some WordPress-specific aspects.

In my experience, the quality of documentation in WordPress plugins and themes varies widely. From poorly documented plugins with one-line readmes to products with user guides, developer APIs and in-depth screencasts, you’ll find every type of documentation in the WordPress ecosystem. Many plugins and themes are built by developers who don’t have the time to write documentation or don’t have the money to pay a technical writer.

Unfortunately, the person who suffers the most from this is the developer. In a blog post, author and front-end developer Nicholas Zakas gives his number-one reason why good JavaScript libraries fail (quoted here — the original is no longer online):

Lack of Documentation:

“No matter how wonderful your library is and how intelligent its design, if you’re the only one who understands it, it doesn’t do any good. Documentation means not just autogenerated API references, but also annotated examples and in-depth tutorials. You need all three to make sure your library can be easily adopted.”

Taking Zakas’ statement as a starting point, let’s look at how to make sure your WordPress product can be easily adopted. We’ll look specifically at how to provide useful documentation to end users, with a brief diversion to writing for developers. But first, let’s dive into some learning theory.

Learning Preferences

A few years ago, I took a teacher-training course while teaching writing to adults. While I don’t teach much anymore, I still integrate an aspect of learning theory into my process when writing documentation. VARK is a theory of learning preferences. It’s an acronym of visual, auditory, read/write, kinesthetic.

VARK captures various preferences for taking in and implementing information where learning is the objective. This makes it extremely useful for writing documentation. Thinking about how your users process your information and how to make it as easy as possible for them is helpful. When writing, think about the different ways that people engage with and process the information your provide; VARK argues that there is a spectrum for the way people do that.

Screenshot
The VARK diagram.

To discover what your VARK learning preference is, you could take a short questionnaire. The results will place you in one of the four different modes — or you could be multimodal, meaning that you prefer a number of styles. There are different learning theories, but I find this one useful for thinking about the different types of documentation that I’ll need when working on a project.

In essence, VARK tells us that people learn in different ways, and in any pedagogical exercise we ought to think about how to make those ways as useful as possible. Let’s look at the different learning preferences and how to make sure you’re making full use of them.

Visual

Visual learners prefer to take in information that appeals to the eye. The VARK website lists the following as relevant techniques:

  • Presenters who use pictures or gestures;
  • Pictures, posters and slides;
  • Books with pictures and diagrams;
  • Flow charts and graphs;
  • Highlighted text, multiple colors and underlining;
  • Symbols and white space.

These suggestions relate to the classroom, but translating them to documentation is not difficult. Visual learners take a holistic approach, trying to see the whole picture rather than breaking it down into discrete parts. They might scan a whole tutorial or section of documentation before getting started to get a sense of the overall picture. Here are some suggestions for reaching visual learners:

  • Use call-outs to draw attention to important tips and notes in the text.
  • Include a lot of useful screenshots, writing on them and using highlights and call-outs.
  • Use a flow chart to demonstrate a process.
  • Highlight important pieces of text, and place key phrases in bold.
  • Incorporate graphics that highlight your point.
  • Create a screencast like SEOmoz’ Whiteboard Friday, which features a person speaking in front of a whiteboard.

Recommended documentation types: in-depth tutorials, screencasts, graphics, infographics

Aural

Aural learners absorb information through talking and listening. The VARK website suggests the following for these learners:

  • Attend classes;
  • Get involved in discussions;
  • Explain ideas to other people;
  • Use a tape recorder;
  • Engage with interesting examples;
  • Describe things to someone else second-hand.

Because online documentation is such a visual medium, figuring out strategies that would appeal to these learners is more difficult. However, with a little lateral thinking, including them is possible, too:

  • Podcasts;
  • Screencasts with detailed narration;
  • Interesting, practical examples;
  • A chat room such as WordPress’ IRC chat, support forums and screensharing on Skype (even though these are not documentation);
  • Webinars.

As the list shows, even if your documentation is highly detailed, there will always be people who prefer to ask questions and have a discussion to find out what they need.

Recommended documentation types: tutorials, screencasts, podcasts, webinars

Read/Write

As you can imagine, read/write learners are pretty easy to target with documentation; they really love to learn by reading. But rather than just come up with big chunks of text, you should use variety to make things a little more interesting. Here are some suggestions:

  • Lists;
  • Headings;
  • Dictionaries;
  • Glossaries;
  • Definitions;
  • A large block of text;
  • Essays;
  • Manuals (computing, technical and laboratory).

picture of a big

While long pieces of documentation are a great way to engage these people, you could do a bit more work to really get them on board. Here are some suggestions:

  • Use ordered and unordered lists;
  • Make use of all heading tags;
  • Include definitions in call-out boxes;
  • Link to definitions elsewhere;
  • Write a user guide;
  • Write a glossary (the one in the WordPress Codex is a great example);
  • Produce an eBook or manual.

Recommended documentation types: tutorials, eBooks, manuals, glossaries, references

Kinesthetic

Kinesthetic learners learn best by doing things. Rather than watch a demonstration, they want to get their hands dirty. Here are some methods from the VARK website:

  • Using all senses (sight, touch, taste, smell, hearing);
  • Going on field trips;
  • Practical examples of abstract principles;
  • Real-life examples;
  • Hands-on approaches;
  • Trial and error;
  • Looking at collections of things (e.g. rock types, plants, shells, grasses, case studies);
  • Exhibits, samples, photographs;
  • Recipes (e.g. solutions to problems, previous exams).

Figuring out what types of documentation these people would like doesn’t take much imagination — tutorials would be a big hit. But go a bit further and you’ll find that producing documentation for kinesthetic learners can be really fun:

  • Step-by-step tutorials;
  • In-depth use cases;
  • Links to practical examples;
  • Real-life (rather than abstract) examples;
  • Interactive learning tools, such as Codecademy;
  • Short, practical tutorials such as those on WpRecipes;
  • Webinars that walk participants through something practical.

Recommended documentation types: practical tutorials, tips and hacks, use cases

Multimodal

Around 60% of the population don’t fit neatly into any of these boxes. If this is you, then you are multimodal (i.e. you prefer two, three or even four categories). You tend to adapt your learning preference to the learners around you and to the medium you are presented with.

Also, it’s possible for your learning preferences to change, according to your life experience. A developer whose head is stuck in code, APIs and references all the time could easily start leaning towards read/write and kinesthetic learning.

The Point

The point of this diversion into learning theory is simple: to show that people learn in different ways; so, make sure your documentation appeals to all of them.

Sometimes clients tell me they just want screencasts. I ask if they have anything else, and if the answer is no, then I strongly recommend they look at other forms of documentation as well. Personally, I find screencasts very difficult to learn from; I prefer to scan tutorials for an overview before getting started. Everyone is different, and if you want your product to be usable by as many people as possible, then you need to think about all of these different learning preferences.

Thankfully, this is very easy to do. A walkthrough tutorial is a great way to appeal to every learning preference.

  • Give kinesthetic learners something practical to do;
  • Appeal to read-write learners with ordered and unordered lists, headings and call-out boxes for definitions;
  • Call-outs are also appreciated by visual learners, and you can keep them even happier with a lot of graphics, diagrams and images;
  • Practical examples will be helpful to aural learners; and to really tick off all of the boxes, you could include a brief screencast.

Don’t spend a lot of time agonizing about this when you get started with the documentation. Just be aware that variation is crucial.

What Types Of Documentation Are There?

As you’ve probably guessed, the umbrella of documentation is pretty large. Anything that documents your plugin, theme or product is documentation. Here are some examples of the types you might find yourself writing:

  • Reference
  • API reference
  • Inline documentation and comments
  • List of requirements
  • Glossary
  • Architecture or design overview
  • Tutorial
  • Manual
  • Readme
  • WordPress help menu
  • FAQ
  • Tooltips
  • User guide
  • Troubleshooting guide
  • Screencast
  • Book and eBook
  • Quick hacks and tips
  • Infographic
  • Screencast
  • Webinar

The types of documentation you adopt will depend largely on two things:

  • Your product type,
  • Your audience.

Screenshot

Many WordPress plugins and themes are developed specifically for end users, rather than being developer tools. With that in mind, let’s look in depth at how to produce effective documentation for end users.

Getting Started

Before getting started with any type of documentation, think about these things:

  • Have you frozen the features?
    Don’t write the documentation while you are still adding features and making major changes to the code.
  • Do you have a plan?
    Write down a structure. Just as a designer would create a wireframe, it would be helpful to sketch out the structure of your documentation, both for individual pieces and for the overall architecture. It will bring a lot coherence to the documentation.
  • How steep is the learning curve?
    If your product is complex, then you’ll need to guide users through the documentation, getting them to the beginners’ information first, through to the intermediate, then to the advanced.
  • Do you have access to the developer?
    If you are the developer, then great; but if not, this is really important. Your first job will be to learn a product that likely does not have documentation, so you will need to ask the developer questions. There’s no point in starting a documentation project if the developer is about to go on vacation.
  • What is the purpose?
    Is the documentation purely to assist users, or is it for marketing, too. A reference doc will be useless for sales, but you might want a tutorial to show off the product to potential customers.

A picture of pens and some writing
The written word (Image: Arslan)

Here are some practical writing tips to keep in mind once you get started.

  • Keep it simple.
    It’s not an opportunity to get poetic or clever. The best technical documentation is clear, concise and engaging.
  • Refer to the user in the second person.
    For example, “When you have logged into WordPress, navigate to the plugin’s admin screen.� Write as though the reader is sitting beside you and you are talking them through the process.
  • Stick to the point.
    Don’t meander off topic because this can distract users.
  • Think about formatting.
    Perhaps you want to use bolding for the key point in each paragraph, or perhaps for instructions. Be consistent in your formatting across the documentation.
  • Write in the present tense.
    Again, as if you were talking to someone who is sitting beside you.
  • Think about tone.
    I recommend friendly and engaging, but you might want the tone to match the rest of your website’s content.
  • Don’t be afraid of short paragraphs.
    Stick to one major point per paragraph so that messages don’t get confused.
  • Be logical.
    Drip-feed your information in a logical order to ensure that readers are able to follow.
  • Proofread.
    And ask someone else to proofread for you. A fresh pair of eyes will pick up things you miss.

End-User Documentation

The end user is the person who will use your product. In the WordPress environment, I get asked to produce documentation for this type of user the most. There is a wide variety of end users, from total novices to savvy users to people who are developers themselves. If they are using (as opposed to developing) the product, we can consider them end users.

When writing documentation for end users, I always recommend aiming for the absolute novice. By doing this, you ensure that everyone is included. More advanced users can skim the doc and take what they need.

1. Research and Prepare

Before putting fingers to keyboard, spend time preparing what you are going to do and how you are going to do it. At this point, your software should be stable and just about ready to go. Rushing through the documentation process just to get it out there is tempting. But here’s some advice from Mike Pope, a technical editor at Microsoft:

“We’ve been known to tell a developer “If it isn’t documented, it doesn’t exist.â€� […] Not only does it have to be doc’d, but it has to be explained and taught and demonstrated. Do that, and people will be excited — not about your documentation, but about your product.”

Keep that in mind: good documentation makes the best of your software.

  • Do you need an installation guide? If your product isn’t in WordPress’ theme or plugin repository, then I recommend preparing a generic guide to show users how to install the plugin or theme via the upload function in WordPress or via FTP.
  • Plan everything beforehand. If your documentation will be big, think about the architecture. How will users navigate it? How will you present it?
  • Draw a list of all of the resources that users will need (such as an FTP client or text editor). Link to the tools that you recommend.
  • Choose the most appropriate documentation type for the product. You might want a general set-up guide or a specific tutorial. For an e-commerce plugin, you could have the following sections: “How to set up this e-commerce pluginâ€� and “Selling your digital product with this e-commerce plugin.â€�
  • Provide easy access to all of the resources and references your users might need. For example, when introducing a new concept, link to a relevant page either on your website or in the WordPress Codex.
  • Anticipate questions users might have. If your users are diligent and read the documentation, then they will spend less time bugging you in the support forums.
  • Think about how to integrate your documentation in WordPress’ administration screens. In WordPress 3.3, for example, the contextual help screens were improved, becoming a great place to assist users.
  • Figure out your point, and stick to it. Don’t meander off topic, or else your message will get confused. The reader should come away with the key message.
  • Do, however, offer examples and anecdotes that will help the user think about the main message from a different angle. This is a great way to emphasize a point.

2. Getting Down to Writing

Remember that the purpose of documentation is to help users use a product quickly and effectively. Step into the shoes of the layman end user and identify what they will need to do just that. Ask questions that an end user would have, and get confused and have doubts like an end user. Never assume that the end user should just know something; your job is to tell them.

Think of your documentation as a story. Like every good story, it needs a beginning, middle and end. Below is an overview of what to include in each part.

The introductory paragraph is crucial. It sets the tone for the documentation and should include the following:

  • Introduces what you’re going to do;
  • Tell the reader how you’re going to do it;
  • List requirements (e.g. WordPress 3.3+);
  • Summarizes what the reader will achieve by the end (if it’s a practical tutorial);
  • Lists resources that the user will need to complete any practical sections.

The main body is the meat of the document. It’s where you get to the point and where your readers start to learn. Here are some tips for writing the main body:

  • If you’re writing a user guide, break up the body into self-contained sections on different topics. Give each section a clear, relevant heading. A user guide on setting up a payment gateway could be broken down into “PayPal,â€� “PayPal Pro,â€� “Authorize.net,â€� etc.
  • Tutorials should be laid out with clearly numbered steps, using headings. Each step should deal with one primary task and logically follow from the previous step. Include everything a user would need to complete the task. Ideally, an advanced user should be able to achieve what they need to do by scanning the headings, while novices can read through. A tutorial for installing a WordPress plugin via FTP might follow these steps:
    1. Download the plugin,
    2. Upload the plugin via FTP to wp-content/plugins/,
    3. Activate the plugin.

    That would be enough for an intermediate user, while the main body text would help the novice.

  • Use call-out boxes to highlight useful pieces of information. I tend to use them for these:
    • Useful tips,
    • Definitions and references,
    • Important pieces of information that I don’t want people who scan to miss,
    • Advanced tips for more experienced users.
  • Use screenshots liberally. These are really useful for visual learners and people who like to scan.
  • Think about including a screencast to provide either a demonstration or walkthrough tutorial.
  • Use a variety of methods in one section of documentation to reach a wide audience: visual, read/write, kinesthetic and aural. This will save you from having to produce a different version for each learning preference.
  • Use a syntax highlighter to improve code readability. If you’re writing your documentation in WordPress, a popular plugin is Syntax Highlighter Reloaded.

The conclusion sums up what you’ve done and provides any additional information:

  • If the guide is massive with a lot of in-depth material, then the conclusion is a good place to remind the user what you’ve covered and what they should now be aware of. This could be a list of main points or takeaways.
  • A practical tutorial could simply finish with a screenshot of what the user should have achieved or with a link to an example.
  • Provide a list of resources or further reading.
  • Provide a list of tutorials to take things further.
  • Link to your support forums or feedback form.

3. Test, Revise, Update

Now that you’ve written the documentation, it’s time to test, revise as necessary and keep it updated.

If I’m writing documentation for a particularly challenging product, I’ll get a representative end user to test it for me. This is usually someone who is familiar with WordPress but not a developer. If it’s a tutorial, I’ll ask them to work through all of the steps as laid out and to highlight anything that’s confusing or that they struggled with. If you are using code snippets, they must be accurate, so explicitly ask your tester to implement them. For a user guide, I’ll ask questions that the tester should know the answers to.

Armed with the suggestions of the tester, I’ll move on to the next phase, revising, and I’ll also have a nice list of questions to include in the obligatory FAQ.

Read through your document and revise. Here’s what to look out for:

  • If you have tested the documentation, incorporate any resulting changes.
  • Get rid of wordiness. For example, “Now it’s time for you to visit the WordPress administration screensâ€� could be revised to “Visit WordPress’ administration screens.â€�
  • Fix all typos and grammatical errors.
  • Add any links you may have missed.

The final step in the process is to update. This could be weeks, months or years after the documentation’s original production. In the world of WordPress, it is more likely to be months. Update the documentation to reflect changes in any of the following:

  • WordPress’ UI (update screencasts and screenshots);
  • New features or functionality in your product;
  • New features or functionality in WordPress;
  • User feedback.

A helpful plugin that I use to track documentation updates is Content Audit. It uses custom taxonomies to help you categorize your content. Being able to mark sections as needing updating straight from WordPress’ UI is helpful. You can also assign WordPress users to be responsible for various pieces of content, as well as write inline comments.

Let’s look at a case study of an end-user documentation project that I recently completed.

Case Study: ManageWP

I was approached by ManageWP at the end of 2011 to rework its documentation. At the time, the documentation was pretty thin and contained numerous grammatical and spelling errors. Here’s what Vladimir Prelovac had to say about it:

“Our initial documentation left a lot to be desired. We did not have it organized in a systematic way, and most topics were added ad hoc. It was hard to search, and it contained a lot of errors as it was sometimes not written by a native speaker.”

At a glance, the documentation looked to be in need of a total rewrite. Here’s the workflow I adopted:

  1. I carried out a full review of the existing documentation and listed challenges and recommendations:
    • The documentation was listed alphabetically. This meant that a new user had no logical order to follow. Everything was jumbled together, making items difficult to find.
    • Many of the paragraphs covered multiple points, making them difficult to follow.
    • There were no screenshots.
    • The formatting did not vary, making the text difficult to read.
  2. I recommended restructuring the documentation to make it more logical (for example, starting with “Getting Started� and then moving through different sections).
  3. I put together a Google spreadsheet listing all of the existing guides, noting the new ones and splitting them up into sections. Vladimir, CMO James Mowery and I reviewed the order to make sure we were all happy.
  4. All of the user guides were rewritten according to the principles outlined above.
  5. We reviewed the docs to add sales and marketing content.
  6. We made the layout and design of the user guide more intuitive for novice users.

You can see the result by checking out ManageWP’s user guides. In the future, we’ll improve the documentation by adding videos that complement the text.

Screenshot
The current incarnation of ManageWP’s user guides.

A Note On Developer Documentation

While end-user documentation is for the people using your plugin or theme, developer documentation is for the people who will be developing, forking or extending it. I get many fewer requests for WordPress developer documentation; I suspect this is primarily because most WordPress developers and designers are producing for end users. Occasionally I am approached to work on documentation for a project for both developers and end users, and I’ll look at such a case below.

My strongest recommendation is to keep the documentation for end users and developers separate. End users don’t need to see developer docs; that would only confuse and, in some cases, intimidate them. Of course, nothing prevents each group from using the other’s documentation, and the groups are not mutually exclusive, but clearly delineating between the two types is important, even if just with a prominent notice, as the WordPress Codex does.

A beautiful example of developer documentation is the recently launched QueryPosts, which is an easily searchable repository of WordPress code.

If you are generating extensive documentation for developers, check out some of these tools:

bbPress and Its Beautiful Inline Documentation

The bbPress plugin has one of the best examples of inline documentation. Below is an extract from the bbpress.php file, which loads the translation file for the current language.

	/**
	 * Load the translation file for current language. Checks the languages
	 * folder inside the bbPress plugin first, and then the default WordPress
	 * languages folder.
	 *
	 * Note that custom translation files inside the bbPress plugin folder
	 * will be removed on bbPress updates. If you're creating custom
	 * translation files, please use the global language folder.
	 *
	 * @since bbPress (r2596)
	 *
	 * @uses apply_filters() Calls 'bbpress_locale' with the
	 *                        {@link get_locale()} value
	 * @uses load_textdomain() To load the textdomain
	 * @return bool True on success, false on failure
	 */
	public function load_textdomain() {

		// Allow locale to be filtered
		$locale = apply_filters( 'bbpress_locale', get_locale() );

		// Get mo file name
		$mofile = sprintf( 'bbpress-%s.mo', $locale );

		// Setup paths to current locale file
		$mofile_local  = $this->lang_dir . '/' . $mofile;
		$mofile_global = WP_LANG_DIR . '/bbpress/' . $mofile;

		// Look in local /wp-content/plugins/bbpress/bbp-languages/ folder
		if ( file_exists( $mofile_local ) )
			return load_textdomain( 'bbpress', $mofile_local );

		// Look in global /wp-content/languages/ folder
		elseif ( file_exists( $mofile_global ) )
			return load_textdomain( 'bbpress', $mofile_global );

		// Nothing found
		return false;
	}

This kind of inline documentation would be helpful to you and to other developers using your code. At a glance, a developer can tell what the code does and see specific instructions (such as to place custom translation files in the global language folder). For an open-source product, this makes the code much more usable to a wider array of people. Read what developer John James Jacoby has to say about this on his blog.

The developers I have spoken with who take inline documentation seriously stress that you should write inline documentation as you are coding, for several reasons:

  • If you are developing alone, you will write the documentation faster;
  • A third party will find it much easier to write the documentation;
  • You can return to the code in the future and instantly remember what you did;
  • Other developers will be able to easily fork your code.

Case Study: Infinity Theming Engine

I was approached by PressCrew to help out with the website content and documentation for its Infinity theming engine. From the start, the developers, Bowe and Marshall, and I knew that it would be a challenge. Unlike everything else I’ve used in WordPress, Infinity uses configuration files to turn features and options on and off. It also supports crazy features such as infinite child themes, which took a mental leap to conceptualize how it could be used.

We spent a considerable amount of time identifying our audiences and figuring out what features to pitching to each. We asked ourselves some questions:

  • What would the average WordPress user use Infinity for?
  • Do we want average WordPress users to be able to make use of Infinity’s most powerful features?
  • What information will developers need in order to make full use of Infinity?
  • How can we make the documentation useful to developers?
  • How do we give developers confidence in Infinity?

With our users identified, we also needed to provide them with two sets of documentation, each with its own strengths:

  • Demonstrative
    Because we needed to introduce developers to a different way of thinking about WordPress — using .ini files instead of messing directly with PHP — we wanted to introduce the concept in a fun way. Bowe came up with minions; a cast of characters each of whom would introduce a configuration file. We used humor and pop culture to make Infinity fun to learn about. Check it out.
    Screenshot
    Infinity’s minions.
  • Practical
    Once the developer has learned what Infinity can do, they need to be able to easily do it. Marshall documented every function and then used phpDocumentor to create documentation from all of the source code. The documentation is written in Markdown and then parsed to both the theme and the library, so it has to be updated only once. As well as offering access from the library, Infinity includes documentation in the dashboard so that developers can access it while working on their theme.
    Screenshot
    Infinity’s UI

A major difficulty has been the speed at which Infinity is updated. Bowe and Marshall asked me to come on board in the beta phase, which saw massive changes. Any docs I wrote would be out of date within a few weeks. I asked Bowe and Marshall what advice they would give to other developers in a similar situation:

“Our advice would be to write down a basic outline of the feature you want to create. When the feature has made it into your product, really take the time to properly document it based on your outline BEFORE you move on to the next feature.”

With a major project like Infinity, an iterative approach is best, documenting as you write the code. Then, after the features have been frozen, you would create the demonstrative documentation.

Conclusion: Sisyphus and I

In Greek mythology, Sisyphus is a king who was condemned to roll a boulder to the top of a hill. Every time he is about to reach the top, the boulder rolls back to the bottom. Up he goes to the top, only for it to fall back down again, and again, for eternity. That’s documentation writing.

With WordPress constantly changing, the documentation for WordPress constantly changes, and so the documentation for anything based on WordPress has to change, too. This could be anything from documentation for full-blown new features to screenshots to reflect UI changes. For me, the most painful moment is when WordPress releases a major UI change. I have to replace all of the screenshots — and screenshots are the most time-consuming part of documentation. Having a process in place, however, takes a lot of the pain out of it. But updating is important indeed because out-of-date documentation gives the impression of out-of-date code.

Don’t assume that your documentation is finished. It’s never complete!

Further Resources

WordPress-Specific

(al) (il)


© Siobhan McKeown for Smashing Magazine, 2012.


Improvising in the Boardroom

I’m ready to admit something: I don’t really prepare for a client pitch. Well, OK, that may be a slight exaggeration. Sometimes I pre-load some web pages in a browser in case there’s no Internet access. If I’m going to show logos or before/after shots, I have been known to throw some images in a PDF template. But I don’t write speeches. I don’t have elaborate slideshows. I don’t really “present” in the traditional sense. So what do I do? And why don’t I run out of the room to throw up when they all turn to me and someone says “we’re really looking forward to seeing what you have to show us?”

One of the bands I used to play in was a free improvised music group called Unstable Ensemble. We would tour the US once a year, and every night the music was different — we just sat down and played.

What I learned from the Unstable years, more than anything else, is that playing music well is about listening. “Open your ears,” we used to say. You hear what the other players are doing, you start to see where they’re going and — when the time is right — you join the conversation. You adjust your playing as you go based on the feedback you’re getting from the other musicians. And the further you go down the road, the clearer the “plan” becomes. Once you’re really all in synch, everybody can see the ending coming a mile away.

This is improvisation. You may have some vague plans about what you’re going to do when you sit down. But you’re always listening, watching, and ready to throw all your plans away if a better avenue presents itself. What you really bring to bear in the moment is not a rehearsed plan, but the sum total of your cumulative knowledge and experience to that point.

In a client meeting, I take a similar approach: I allow the whole group to lead. I listen, and let my potential new clients talk about themselves and their organization. What they think the project is, what they think the problems are. When it seems like the right time, I begin weaving in themes from my own knowledge and experience: how we might approach their problems, examples of similar things we’ve done for other clients, or examples of relevant solutions that other talented people have created that come to mind (explicitly credited, of course). I always try to keep one eye on people’s reactions, and help adjust our trajectory appropriately. When everyone seems bored, it’s time to move on to another subject. When everyone’s suddenly rapt, maybe I should expand a little on what I’m talking about. Following these cues helps keep the experience closer to an interesting conversation, rather than a hit-or-miss presentation.

In college I saw a video of Bill Evans, the famous jazz pianist, talking about improvisation. His primary message was this: to be a great improviser, you must learn music theory and technique so well that it’s automatic. You relegate it to the unconscious, freeing your conscious mind to make creative decisions in the moment.

Meetings are the same. They are a performance, but you are not the only player. If you know your subject well enough (you should, you live it every day) you don’t need to sweat it. Just bring your brain and, just as important, your ears.

I once pitched to a potential client against two large international marketing firms. After we won the (for us) considerable contract, our contact there confided in me that the other firms had superior “dog and pony shows.” But after interacting with us in a less-prepared, conversational manner, he was convinced that we would “get” their project and the challenges involved more than the others.

Ultimately your clients don’t need to be blown away by a fancy presentation. They need to see that they can work well with you for the coming months, or even years. Don’t give them a presentation, give them a demo. This your opportunity to say to them, “this is what we’re like to work with, this is how we listen, collaborate, solve problems.” Wouldn’t you rather hire someone you knew you could work well with, rather than someone you knew could put together a wicked-hot Keynote presentation?

So forget the slideshows. Open your ears. Improvise. Be genuine — the person that you are every day in your job — right there in the room with them. Then you’ll win the clients you should win. And, hell — let someone else have the ones you shouldn’t.

Translations:
Italian


RSS readers: Don't forget to join the discussion!


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress