Tag: kranthi

Coding Q&A With Chris Coyier: SVG Fallback, Vertical Rhythm, CSS Project Structure


  

Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach. We’ll take all kinds.

If you’re interested in exploring more Q&A, there’s a bunch more in my author archive.

CSS Project Structure

Stephen Beiler asks:

“Could you please explain your strategy for building CSS? How do you start and what does the structure of your style sheet look like? Do you use something like tip/comment helpers (e.g. the color style guide) or perhaps the related markup, or anything else? How do you structure your code?”

These days I’m using Sass for all my projects. Sass provides things that I’m sure you are all aware of — like variables and mixins, but it also provides a very simple and vital feature: includes. Just like you might use an include() function in PHP, or render a partial in Rails, you can @import another Sass file in Sass. Unlike the native CSS @import, which simply makes a request for that file, Sass goes and gets that file and includes the file’s content when compiling down to CSS.

I use this feature heavily while organizing and structuring CSS for a project. It allows me to break my styling into whatever files make sense for me, as the author. It allows me an ASCII drawing:

Ascii

On my recent redesign of CSS-Tricks, I ended up with 28 .scss files, most of which were modular bits only ever @imported into bigger style sheets. This worked really well for me, matching how I naturally organize things, and not an organization scheme forced upon me, nor one built from artificial hacks (like enormous files with commented separators).

Regarding the color style guide, one of those .scss files is always one I call _bits.scss, which is were I put all my re-usable “bits” that any of my other .scss files might need. Color variables, my own custom @mixins, etc. I’m a fan of setting up colors as variables right away in a project, so that you can reference them easily whenever needed. If you need variations on that color, you can use Sass functions like darken() and lighten() to adjust.

Slightly controversially, I like naming my colors based on their color, like $red, $blue, and $green, because then it takes me zero seconds to remember and actually use them. Whereas in the past, when I’ve tried to be super semantic about my colors and name them $brand, $secondaryHighlight, and $moduleBackground or things like that, I could never remember my own cleverness, and it slowed me down.

When To Use OOCSS

Michael Winczewski asks:

“Chris, what do you think of OOCSS? Do you use it in your code, and if so, how? When would you advise against using it? And when would you advise using it?”

I think it’s fantastic. It’s more of a way of thinking than a strict set of rules. I doubt that I understand OOCSS in the same way that Nicole Sullivan does, or that I understand SMACSS in the same way Jonathan Snook does. But I think I understand the spirit behind these movements and use them in ways that make sense to me.

What it boils down to for me is usually: write super semantic markup, but use a class name on just about every important “chunk”. Then style things largely based on those class names. It’s about identifying patterns and styling that pattern in a smart way. That way, this pattern can be re-used easily, efficiency is inherent, and no semantics are harmed. And this doesn’t mean going nuts with class names, it means using just the right amount.

Specifically to your question, I think these concepts work for every project. There isn’t anything I can think of that would warrant not doing it this way. It’s just a grown up way to approach CSS.

Selecting All Link Pseudo Classes

Ren Walker asks:

Is there a quick trick in either LESS, Sass, or with the tried and true CSS where you can select all the pseudo classes of an element? For example, instead of writing:

a, a:visited, a:active { }

You could conceivably do:

a:* { }

Sure. If you’re using Sass, you could craft your own @mixin to your needs. For instance:

@mixin all-link-psuedos($col) {
  &:link     { color: darken($col, 10%); }
  &:visisted { color: darken($col, 20%); }
  &:hover    { color: darken($col, 30%); }
  &:active   { color: darken($col, 40%); }
}

$linkColor: red;
a {
  color: $linkColor;
  @include all-link-psuedos($linkColor);
}

There is a selector combiner type of thing in just CSS as well.

:-webkit-any(a:link, a:visited, a:hover, a:active) {
  color: red; 
}
:-moz-any(a:link, a:visited, a:hover, a:active) {
  color: red; 
}

But this isn’t really the intended use case for it, since you could just comma separate those selectors just as easily. Plus, the browser support isn’t great. Double plus, chances are you want different styling for those things instead of the same.

Fallbacks For SVG

Angelo D’Ambrosio asks:

“What’s the simplest and most efficient way to let the browser choose whether to load the SVG or the bitmap version of an img or a CSS background, according to browser support?”

  1. Download a version of Modernizr that is trimmed down to just testing SVG (assuming that’s the only test you need).
  2. Run the test. If it passes, put in the SVG. If it fails, put in the bitmap.

Essentially:

if (!Modernizr.svg) {
  $("#logo").css("background-image", "url(fallback.png)");
}

Modernizr isn’t needed on every website in the world — it’s needed on websites where you need to very specifically fork style or behavior for browsers that do or don’t support a feature. For instance, if you have a geolocation feature on your website (but the feature works just fine by typing in an address manually), you may not need Modernizr to tell you about the lack of support, since you may not need to do anything anyway.

SVG is a perfect use case for Modernizr, because there is no simple native way to provide a fallback.

Modernizr
Modernizr gives you the clean fork you need.

Just for the record: the only reason you would need a fallback for SVG these days if you have to support IE 8 and down, or older Android.

Maintaining Vertical Rhythm

David Casey asks:

“Chris, what’s your strategy for maintaining vertical rhythm for typography / design elements in responsive design?”

Looking at a page of pure typography — where someone has set up a background of lines where you can see the vertical rhythm matching up perfectly — is pretty cool. You can get a sense for why that makes for nice reading (with the lines removed of course):

Baseline Grid

But I think it’s a bit of a fool’s errand to enforce perfection on it up and down every page of a website. One image inside the content will most likely throw the whole thing out of whack. Yeah, we could crop it, but do we want to be making choices like that for the design de jour? We could resize it, but then perhaps it’s not lining up to our vertical grid lines like we want. In a world of flexible media, I don’t think it’s worth it.

If you do think it’s worth it, do note Dan Eden’s Baseline.js which does image resizing to combat the baseline grid issue. Molten leading may also be of interest.

Does it matter if the rhythm gets off? I don’t think so. Well set text will still look good. Remember: the type will still be in rhythm with the text right around it. So who cares if it’s off with text thousands of pixels away from it, and perhaps off screen? Making sure the type looks good in general is far more important than adhering to an invisible grid dogmatically.

Responsive + Retina Background-Image

Smarajit Dasgupta asks:

“How to tackle CSS background images for both responsive and retina display. If we use a background-size of 100% to make sure the image resizes on smaller devices, how do we set the same background-size in media query (-min-device-pixel-ratio: 1.5) to half of the @2x image?

Also, to tackle images this way, should we set initial scale to one in meta viewport that we normally would for responsive websites? Would that be a problem as far as retina displays are concerned?”

This is a difficult question to answer because so much depends on the particular implementation and what your goals are. Presumably, your goals are:

  1. Make it look good all the time.
  2. Don’t waste bandwidth.

I can share with you how this works on a particular area of CSS-Tricks, in which I use a background-image that is both responsive (in that it works in a flexible width area) and retina (looks sharp on retina displays). The area is called The Lodge, and I used a snowy cabin graphic for the background.

The Lodge

That’s actually the “medium” breakpoint (I call it the “mama bear”) that many tablets see. There is a wider and narrower breakpoint as well. Like you, I want this website to look great on retina displays, but also worry about its bandwidth. Serving a background image that is big enough to look great on retina at the largest breakpoint to a non-retina display at the smallest breakpoint is not good.

What I do is put all the background-images in media queries.

/* Reverso Baby Bear */
@media (min-width: 320px) {
  .lodge-wrap {
     background: url(lodge-bg-small.jpg);
  }
}

/* Reverso Mama Bear */
@media (min-width: 800px) {
  .lodge-wrap {
     background: url(lodge-bg-medium.jpg);
  }
}

/* Reverso Papa Bear */
@media (min-width: 1400px) {
  .lodge-wrap {
     background: url(lodge-bg-large.jpg);
  }
}

Doing it this way means that only one of those will match and only one resource will be downloaded. There is also is no “default” (outside a media query) which runs the risk of starting to download before being overridden.

I also make each of those three different images larger than they need to be, and let them scale down with background-size: 100%;. That way they are retina ready all the time, whether or not the device is. A bit of a waste sometimes, but at least I’m smart enough not to supply the largest image all the time.

If you want to get extra fancy, you’d need two media queries for each breakpoint: one for retina and one for non-retina. In my case, I’d have six total media queries… they’d be pretty complex, but it’s do-able. Here’s the two for the smallest breakpoint:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

You’d repeat that for the next size breakpoint(s), overriding the background as you go down. Here’s more code and some more information on that.


© Chris Coyier for Smashing Magazine, 2012.


Workflow Tips: Useful Fireworks Techniques And Features For Large Design Teams


  

While Fireworks can be a useful and powerful tool for any screen designer, several aspects of it make it really shine in an enterprise environment when used by both small and large design teams.

What do I mean by “enterprise�? For the purpose of this article, enterprise can be defined as any environment where multiple designers, developers and other stakeholders collaborate on a project. In this situation, Fireworks excels for a variety of reasons.

I’ll share the top five reasons why our user experience (UX) team at Citrix (which consists of about 20 designers, researchers and editors, working on Web, desktop and mobile applications) uses Fireworks. I’ll illustrate my points with a few practical examples, as well as examples from other design firms.

1. The (Smart) Fireworks PNG File Format

A huge benefit of Fireworks is that it saves images in the PNG file format. PNG files are viewable in any browser or image viewer. And Windows Explorer and Mac’s Finder will display thumbnail previews of your Fireworks PNG files when you browse them locally.

Fireworks efficiently embeds all of the vector layer data into the meta data section of the PNG. This means you can view a Fireworks PNG file in any image viewer or directly in a Web browser, and if you open the same PNG in Fireworks, you have full editing capability of the vector paths, layers, pages, live filters, embedded bitmaps, symbols, etc.

The PNG format is also very efficient. In our experience, even complex multi-page documents rarely reach over 5 MB.

What does this mean in the enterprise? Quite a lot, actually!

On our company’s internal network, we have a shared drive that everyone stores files on. When we want to share mockups with stakeholders in the company, we just point them right at the files. For instance, if a PNG file is located at X:/UXGroup/Project/Design.png, we can send a link to anyone in the company (i.e. http://shared/uxgroup/project/Design.png), and they can view the file in their Web browser — no need to export the Fireworks PNG to any other format!

This saves us the additional steps of exporting JPGs (or PNGs) of our design files whenever we want to share them with stakeholders or with anyone who doesn’t have a copy of Fireworks.

I can even edit a file in Fireworks while on the phone with a stakeholder (or fellow designer), and as soon as I hit “Save� in Fireworks, the person on the other end of the line can simply refresh their browser and see the changes I just made! Excellent for quick copy revisions and brainstorming.

Nathan Smith describes a similar process in his article “Fireworks in Enterprise IT�:

“Working as an interface designer at a Fortune 500 company, I used to save my work on a shared network drive. The user experience team had full access to our Adobe Fireworks PNG files, whereas all other stakeholders in the company (of which there were many) had read-only rights. This setup allowed my team to go about working in a typical fashion. When it was time to get sign-off for our mockup designs, rather than performing a batch export of hundreds of PSD files to JPG (or other) image format, we would just send a quick email: “Here are the project comps: http://10.10.10.xx/uxd/project/.â€�

The approval team could then peruse the interface mockups at their leisure, without us having to do anything extra special to allow them to see our designs. Even better: being on a conference call with the primary stakeholders reviewing my PNG file in their browsers, I could edit the design in real time, based on their feedback. I cannot even begin to estimate the amount of time I saved.”

This can also work beautifully with any FTP client or with synchronization software such as Dropbox. Just place your PNGs in your Dropbox folder and send the public URL to your stakeholders or share the folder with them. Now, whenever you hit “Save� in Fireworks, your changes will be instantly synced to everyone you have shared them with.

One caveat to this approach is that browsers display only the first page of a Fireworks file. So, if your document has multiple pages, you will need to export each page to its own PNG file. On the positive side, Fireworks has fairly robust page-exporting options that make the process very easy, allowing you to export multiple pages at once.

2. Layer Management

If you are a Photoshop user, then you are probably very familiar with “layer management.� You have read articles on PSD etiquette and, heck, you might even be a Layer Mayor. While I can appreciate organization, managing layers and layer groups doesn’t sound like fun.

Fireworks Manifesto
(Illustration sources: Dan Rose, Tymn Armstrong, Michel Bozgounov, PhotosPublicDomain.com)

In Fireworks, I hardly ever glance at the Layers panel. Alan Musselman, designer and developer of Android games, sums it up nicely:

“By the time you organized your layers in Photoshop I’m outside enjoying the weather because I’m finished with the project [in Fireworks].”

How is this possible?

Fireworks’ interaction methodology is similar to Illustrator’s: when you hover your mouse over each object on the canvas, the object is highlighted (its outline changes to red), and then you can simply select it by clicking on it (the outline will change to blue). You can also select several objects by clicking on each while holding Shift or simply by dragging the mouse across them all.

Selecting objects on the canvas that are placed underneath other objects is possible, too, as Trevor Kay explains in “Interactive Prototypes and Time-Savers With Adobe Fireworks�:

“The Select Behind tool enables you to select a top-most object and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.”

In practice, this means you don’t need to bounce back and forth between the Layers panel and the canvas to find and select objects — you just work directly with them. I find it a much more intuitive way to work.

What’s more, after selecting one or more objects, you can easily change many of their properties all at once:

  • Resize, skew, rotate and use the 9-Slice Scaling tool;
  • Change the fill or stroke (edit colors, work with gradient fills, change the size and type of stroke, etc.);
  • Add or remove Fireworks live filters (and edit their properties);
  • Apply styles;
  • Change the objects’ blending mode;
  • Add or remove textures and patterns;
  • Change the roundness of rectangle corners;
  • And much more.

In short, what can be done with one object selected on the canvas can be done with multiple objects simultaneously. This really is a big time-saver, freeing you from having to hunt through the Layers panel!

Besides being a much faster and more intuitive way to work, it also makes the process of multiple designers collaborating on the same file or project much easier.

Finally, let me add that while naming layers and objects in Fireworks is often not necessary, it is still a good practice, especially when working on more complex projects. If you foresee opening an archived file years later or frequently sharing files with collaborators, then naming layers and objects will make file organization more efficient.

3. Did I Mention Pages And Master Pages?

Pages are a feature that illustrate a key difference between Fireworks and Photoshop. When working on complex interactions (a shopping-cart check-out flow, for example), showing how interactions unfold over time is essential. Having the ability to create multiple pages allows you to easily do this.

It also helps to keep the number of separate design files low, which, combined with the fact that each page can have its own settings (canvas size, canvas color, export settings, etc.), gives you a ton of flexibility.

And if you are using Pages in Fireworks, you can easily jump from a static design to an interactive prototype, which brings even more benefits (more on that later).

If you use pages, you can also create master pages. Master pages allow you to define common elements that appear across multiple pages. For instance, on the master page, you might put the website’s logo and header. As you create new pages, those elements will automatically appear on them, and if you make a change to any element on the master page, it will appear throughout the document. If you need to modify the header or any other recurring element, this method is far quicker than having to open multiple files and individually edit the given element in each one or having to manually tweak the same elements on multiple pages (or multiple layers).

Let me quickly illustrate this feature. For an example, we’ll use the UI wireframe sketches of Chris Stevens.

Suppose we have a design in which several elements — the header, logo, navigation and footer — will be the same on all pages. Let’s move them to the master page. All of the other pages will display these elements just as they appear on the master page:

Master Page Elements On All Pages
Elements on the master page will automatically appear on all pages.

Next, suppose the design team decides that moving the logo to the right side and moving the navigation to the left would be better. The elements, which exist on the master page, need to be altered only once, then all of the other pages in the design will instantly reflect those changes:

Simultaneous Update On All Pages
Edit an element (or several elements) on the master page and see all pages updated with those changes!

Fireworks has other features that make complex design projects easier. Here are just a few:

  • In Fireworks, you can turn any object or group of objects into a symbol. Just create a symbol and copy it to a few layers and/or pages; then, whenever you edit the symbol, all instances of it throughout the document will automatically update. Symbols can be of different types — graphic symbols, button symbols, and component (rich) symbols — each of which serves a different purpose and has different benefits. (If you want to learn more, the “Symbolsâ€� section in Adobe’s documentation for Fireworks might help.)
  • Fireworks gives you the option to share layers to pages (i.e. share the contents of one layer to selected pages), so if the content of a layer is updated, then the changes are automatically shown on all of the pages on which the shared layer appears).
  • If you work with states, you also have the option to share states to pages.
  • You can use styles in your Fireworks PNG documents (and can even import and export them to reuse in more than one document).

By taking advantage of pages, master pages, symbols and styles, every designer on our team saves a huge amount of time every day!

4. Interactive Prototyping Made Easy

If you are creating a complex interaction that spans multiple pages, being able to prototype the interaction before investing precious development time in coding it is often very beneficial. Again, Fireworks comes to the rescue with its built-in capabilities to create simple click-through prototypes for multi-page documents.

This subject was covered thoroughly by Smashing Magazine in a recent article by André Reinegger, “Create Interactive Prototypes With Adobe Fireworks� (quoted below), and one by Trevor Kay, “Interactive Prototypes And Time-Savers With Adobe Fireworks.� Check them out!

“A click-through prototype is an interactive mockup of a website or application that allows you to click through different pages and states and is packed with key interactions. Creating such a prototype in Adobe Fireworks is very easy. All you have to do is prepare the design for exporting as an interactive prototype: create slices for all interactive areas on the screen, and make pages for all of the different states of the application.”

By defining slices and hotspots, you can quickly link the pages in your document together and export them all at once as HTML files.

Create Interactive Prototypes
André Reinegger explains in detail how to create interactive prototypes with Fireworks. Pages and hotspots are key parts of the process.

For instance, if your shopping cart has a “Buy now� button on the first page, you can specify that, when clicked, the button will take the user to page 2 of the design; and on page 2, you can define more interactions, and so forth. Similarly, you can create simple navigation between the pages or create links that point to external resources. What’s more, any behavior added to the master page will also be active on every other page in the document (so, a navigation bar graphic could serve as a navigation bar in the whole interactive prototype). Build it once and it works everywhere!

Interactive prototypes also help you quickly experience how an interaction feels as you click through it. You can even use these prototypes for user testing, to work out any kinks before investing in the actual development.

Of course, you always have the option to use an external application for the live-interaction part of the design and development process, but for simple interactions, Fireworks does the trick nicely, and we don’t even have to switch to another app.

5. Fireworks Component Library With Evernote

One thing that makes collaboration between designers and developers much easier and more efficient is having a common set of design resources. Fireworks has a “Common Library� panel, but I won’t sugarcoat it: it’s not useful when multiple designers are collaborating and need to share a library of UI resources that needs to be updated over time.

However, taking advantage of Fireworks’ use of vector PNG files, we can use a third-party service — namely, Evernote — with Fireworks to create and maintain a synchronized component library. This will allow all designers on the team to simply drag and drop Fireworks PNG elements into their layouts from a common source. (See “Creating a Pattern Library With Evernote and Fireworks,â€� in which I speak about this technique in greater detail.)

Here are the benefits of this workflow:

  • Easily browsable
    Finding what you’re looking for is easier when you can just see it. And because source Fireworks PNG files can be viewed in the browser just like any regular image file, you can find the right asset in Evernote simply by browsing for it — while examining the previews! (This wouldn’t work with Photoshop, Illustrator or InDesign files because browsers cannot read their proprietary file formats.)
  • Searchable
    If you can’t find it by browsing, just search. And in Evernote, even the text in PNG files is indexed (a truly amazing feature, which, again, is possible because of the PNG format’s openness).
  • Drag and droppable
    Pulling elements into your layout is super-easy. Simply drag and drop them from Evernote into the Fireworks document!
  • Synchronized
    Any change made to a UI element propagates instantly, and everyone on the team always has access to the most recent version. Plus, Fireworks PNG files are fairly small, so synchronization is fast and easy.

Evernote And Fireworks
Evernote and Fireworks can make a component library an easy solution.

Conclusion

It’s fair to say that Fireworks is not perfect and has its limitations. For example, if you exceed a certain number of pages or objects in a file, Fireworks could suffer some drop in performance. The app is not 64-bit, so it cannot use all of the 16 GB of RAM you’ve just installed in your new computer, and its user interface is slightly different than other tools in the Adobe family.

However, in our design practice, we’ve found that the benefits of Fireworks far outweigh the disadvantages.

In one relatively short article, I can’t cover all of the reasons why we use Adobe Fireworks, but if you (and your design team) work in the field of screen design — UI, UX, Web, mobile — then I hope the five above are enough to give you ideas or inspire you to try something new!

Further Reading

Here a few links to articles, tutorials and blog posts that discuss some of Fireworks’ most interesting features, as well a few complex workflows that are possible with it:

(mb al)


© Kris Niles for Smashing Magazine, 2012.


Workflow Tips: Useful Fireworks Techniques And Features For Large Design Teams


  

While Fireworks can be a useful and powerful tool for any screen designer, several aspects of it make it really shine in an enterprise environment when used by both small and large design teams.

What do I mean by “enterprise�? For the purpose of this article, enterprise can be defined as any environment where multiple designers, developers and other stakeholders collaborate on a project. In this situation, Fireworks excels for a variety of reasons.

I’ll share the top five reasons why our user experience (UX) team at Citrix (which consists of about 20 designers, researchers and editors, working on Web, desktop and mobile applications) uses Fireworks. I’ll illustrate my points with a few practical examples, as well as examples from other design firms.

1. The (Smart) Fireworks PNG File Format

A huge benefit of Fireworks is that it saves images in the PNG file format. PNG files are viewable in any browser or image viewer. And Windows Explorer and Mac’s Finder will display thumbnail previews of your Fireworks PNG files when you browse them locally.

Fireworks efficiently embeds all of the vector layer data into the meta data section of the PNG. This means you can view a Fireworks PNG file in any image viewer or directly in a Web browser, and if you open the same PNG in Fireworks, you have full editing capability of the vector paths, layers, pages, live filters, embedded bitmaps, symbols, etc.

The PNG format is also very efficient. In our experience, even complex multi-page documents rarely reach over 5 MB.

What does this mean in the enterprise? Quite a lot, actually!

On our company’s internal network, we have a shared drive that everyone stores files on. When we want to share mockups with stakeholders in the company, we just point them right at the files. For instance, if a PNG file is located at X:/UXGroup/Project/Design.png, we can send a link to anyone in the company (i.e. http://shared/uxgroup/project/Design.png), and they can view the file in their Web browser — no need to export the Fireworks PNG to any other format!

This saves us the additional steps of exporting JPGs (or PNGs) of our design files whenever we want to share them with stakeholders or with anyone who doesn’t have a copy of Fireworks.

I can even edit a file in Fireworks while on the phone with a stakeholder (or fellow designer), and as soon as I hit “Save� in Fireworks, the person on the other end of the line can simply refresh their browser and see the changes I just made! Excellent for quick copy revisions and brainstorming.

Nathan Smith describes a similar process in his article “Fireworks in Enterprise IT�:

“Working as an interface designer at a Fortune 500 company, I used to save my work on a shared network drive. The user experience team had full access to our Adobe Fireworks PNG files, whereas all other stakeholders in the company (of which there were many) had read-only rights. This setup allowed my team to go about working in a typical fashion. When it was time to get sign-off for our mockup designs, rather than performing a batch export of hundreds of PSD files to JPG (or other) image format, we would just send a quick email: “Here are the project comps: http://10.10.10.xx/uxd/project/.â€�

The approval team could then peruse the interface mockups at their leisure, without us having to do anything extra special to allow them to see our designs. Even better: being on a conference call with the primary stakeholders reviewing my PNG file in their browsers, I could edit the design in real time, based on their feedback. I cannot even begin to estimate the amount of time I saved.”

This can also work beautifully with any FTP client or with synchronization software such as Dropbox. Just place your PNGs in your Dropbox folder and send the public URL to your stakeholders or share the folder with them. Now, whenever you hit “Save� in Fireworks, your changes will be instantly synced to everyone you have shared them with.

One caveat to this approach is that browsers display only the first page of a Fireworks file. So, if your document has multiple pages, you will need to export each page to its own PNG file. On the positive side, Fireworks has fairly robust page-exporting options that make the process very easy, allowing you to export multiple pages at once.

2. Layer Management

If you are a Photoshop user, then you are probably very familiar with “layer management.� You have read articles on PSD etiquette and, heck, you might even be a Layer Mayor. While I can appreciate organization, managing layers and layer groups doesn’t sound like fun.

Fireworks Manifesto
(Illustration sources: Dan Rose, Tymn Armstrong, Michel Bozgounov, PhotosPublicDomain.com)

In Fireworks, I hardly ever glance at the Layers panel. Alan Musselman, designer and developer of Android games, sums it up nicely:

“By the time you organized your layers in Photoshop I’m outside enjoying the weather because I’m finished with the project [in Fireworks].”

How is this possible?

Fireworks’ interaction methodology is similar to Illustrator’s: when you hover your mouse over each object on the canvas, the object is highlighted (its outline changes to red), and then you can simply select it by clicking on it (the outline will change to blue). You can also select several objects by clicking on each while holding Shift or simply by dragging the mouse across them all.

Selecting objects on the canvas that are placed underneath other objects is possible, too, as Trevor Kay explains in “Interactive Prototypes and Time-Savers With Adobe Fireworks�:

“The Select Behind tool enables you to select a top-most object and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.”

In practice, this means you don’t need to bounce back and forth between the Layers panel and the canvas to find and select objects — you just work directly with them. I find it a much more intuitive way to work.

What’s more, after selecting one or more objects, you can easily change many of their properties all at once:

  • Resize, skew, rotate and use the 9-Slice Scaling tool;
  • Change the fill or stroke (edit colors, work with gradient fills, change the size and type of stroke, etc.);
  • Add or remove Fireworks live filters (and edit their properties);
  • Apply styles;
  • Change the objects’ blending mode;
  • Add or remove textures and patterns;
  • Change the roundness of rectangle corners;
  • And much more.

In short, what can be done with one object selected on the canvas can be done with multiple objects simultaneously. This really is a big time-saver, freeing you from having to hunt through the Layers panel!

Besides being a much faster and more intuitive way to work, it also makes the process of multiple designers collaborating on the same file or project much easier.

Finally, let me add that while naming layers and objects in Fireworks is often not necessary, it is still a good practice, especially when working on more complex projects. If you foresee opening an archived file years later or frequently sharing files with collaborators, then naming layers and objects will make file organization more efficient.

3. Did I Mention Pages And Master Pages?

Pages are a feature that illustrate a key difference between Fireworks and Photoshop. When working on complex interactions (a shopping-cart check-out flow, for example), showing how interactions unfold over time is essential. Having the ability to create multiple pages allows you to easily do this.

It also helps to keep the number of separate design files low, which, combined with the fact that each page can have its own settings (canvas size, canvas color, export settings, etc.), gives you a ton of flexibility.

And if you are using Pages in Fireworks, you can easily jump from a static design to an interactive prototype, which brings even more benefits (more on that later).

If you use pages, you can also create master pages. Master pages allow you to define common elements that appear across multiple pages. For instance, on the master page, you might put the website’s logo and header. As you create new pages, those elements will automatically appear on them, and if you make a change to any element on the master page, it will appear throughout the document. If you need to modify the header or any other recurring element, this method is far quicker than having to open multiple files and individually edit the given element in each one or having to manually tweak the same elements on multiple pages (or multiple layers).

Let me quickly illustrate this feature. For an example, we’ll use the UI wireframe sketches of Chris Stevens.

Suppose we have a design in which several elements — the header, logo, navigation and footer — will be the same on all pages. Let’s move them to the master page. All of the other pages will display these elements just as they appear on the master page:

Master Page Elements On All Pages
Elements on the master page will automatically appear on all pages.

Next, suppose the design team decides that moving the logo to the right side and moving the navigation to the left would be better. The elements, which exist on the master page, need to be altered only once, then all of the other pages in the design will instantly reflect those changes:

Simultaneous Update On All Pages
Edit an element (or several elements) on the master page and see all pages updated with those changes!

Fireworks has other features that make complex design projects easier. Here are just a few:

  • In Fireworks, you can turn any object or group of objects into a symbol. Just create a symbol and copy it to a few layers and/or pages; then, whenever you edit the symbol, all instances of it throughout the document will automatically update. Symbols can be of different types — graphic symbols, button symbols, and component (rich) symbols — each of which serves a different purpose and has different benefits. (If you want to learn more, the “Symbolsâ€� section in Adobe’s documentation for Fireworks might help.)
  • Fireworks gives you the option to share layers to pages (i.e. share the contents of one layer to selected pages), so if the content of a layer is updated, then the changes are automatically shown on all of the pages on which the shared layer appears).
  • If you work with states, you also have the option to share states to pages.
  • You can use styles in your Fireworks PNG documents (and can even import and export them to reuse in more than one document).

By taking advantage of pages, master pages, symbols and styles, every designer on our team saves a huge amount of time every day!

4. Interactive Prototyping Made Easy

If you are creating a complex interaction that spans multiple pages, being able to prototype the interaction before investing precious development time in coding it is often very beneficial. Again, Fireworks comes to the rescue with its built-in capabilities to create simple click-through prototypes for multi-page documents.

This subject was covered thoroughly by Smashing Magazine in a recent article by André Reinegger, “Create Interactive Prototypes With Adobe Fireworks� (quoted below), and one by Trevor Kay, “Interactive Prototypes And Time-Savers With Adobe Fireworks.� Check them out!

“A click-through prototype is an interactive mockup of a website or application that allows you to click through different pages and states and is packed with key interactions. Creating such a prototype in Adobe Fireworks is very easy. All you have to do is prepare the design for exporting as an interactive prototype: create slices for all interactive areas on the screen, and make pages for all of the different states of the application.”

By defining slices and hotspots, you can quickly link the pages in your document together and export them all at once as HTML files.

Create Interactive Prototypes
André Reinegger explains in detail how to create interactive prototypes with Fireworks. Pages and hotspots are key parts of the process.

For instance, if your shopping cart has a “Buy now� button on the first page, you can specify that, when clicked, the button will take the user to page 2 of the design; and on page 2, you can define more interactions, and so forth. Similarly, you can create simple navigation between the pages or create links that point to external resources. What’s more, any behavior added to the master page will also be active on every other page in the document (so, a navigation bar graphic could serve as a navigation bar in the whole interactive prototype). Build it once and it works everywhere!

Interactive prototypes also help you quickly experience how an interaction feels as you click through it. You can even use these prototypes for user testing, to work out any kinks before investing in the actual development.

Of course, you always have the option to use an external application for the live-interaction part of the design and development process, but for simple interactions, Fireworks does the trick nicely, and we don’t even have to switch to another app.

5. Fireworks Component Library With Evernote

One thing that makes collaboration between designers and developers much easier and more efficient is having a common set of design resources. Fireworks has a “Common Library� panel, but I won’t sugarcoat it: it’s not useful when multiple designers are collaborating and need to share a library of UI resources that needs to be updated over time.

However, taking advantage of Fireworks’ use of vector PNG files, we can use a third-party service — namely, Evernote — with Fireworks to create and maintain a synchronized component library. This will allow all designers on the team to simply drag and drop Fireworks PNG elements into their layouts from a common source. (See “Creating a Pattern Library With Evernote and Fireworks,â€� in which I speak about this technique in greater detail.)

Here are the benefits of this workflow:

  • Easily browsable
    Finding what you’re looking for is easier when you can just see it. And because source Fireworks PNG files can be viewed in the browser just like any regular image file, you can find the right asset in Evernote simply by browsing for it — while examining the previews! (This wouldn’t work with Photoshop, Illustrator or InDesign files because browsers cannot read their proprietary file formats.)
  • Searchable
    If you can’t find it by browsing, just search. And in Evernote, even the text in PNG files is indexed (a truly amazing feature, which, again, is possible because of the PNG format’s openness).
  • Drag and droppable
    Pulling elements into your layout is super-easy. Simply drag and drop them from Evernote into the Fireworks document!
  • Synchronized
    Any change made to a UI element propagates instantly, and everyone on the team always has access to the most recent version. Plus, Fireworks PNG files are fairly small, so synchronization is fast and easy.

Evernote And Fireworks
Evernote and Fireworks can make a component library an easy solution.

Conclusion

It’s fair to say that Fireworks is not perfect and has its limitations. For example, if you exceed a certain number of pages or objects in a file, Fireworks could suffer some drop in performance. The app is not 64-bit, so it cannot use all of the 16 GB of RAM you’ve just installed in your new computer, and its user interface is slightly different than other tools in the Adobe family.

However, in our design practice, we’ve found that the benefits of Fireworks far outweigh the disadvantages.

In one relatively short article, I can’t cover all of the reasons why we use Adobe Fireworks, but if you (and your design team) work in the field of screen design — UI, UX, Web, mobile — then I hope the five above are enough to give you ideas or inspire you to try something new!

Further Reading

Here a few links to articles, tutorials and blog posts that discuss some of Fireworks’ most interesting features, as well a few complex workflows that are possible with it:

(mb al)


© Kris Niles for Smashing Magazine, 2012.


Uncompromising Design: Avoiding The Pitfalls Of Free


  

Misaligned interests create tension in the design process that can lead to bad, and potentially unethical, design decisions, that result in inferior products. In this article I will examine how the desire to build a large audience by giving away your products and services free of charge can cause conflicts of interest, which in turn can lead to dubious compromises in the design process that limit the full potential of your work.

The recently launched Twitter competitor, App.net, which has raised over $800,000 in the first month of fund-raising/pre-sales, has started its life as a simple premise: Twitter doesn’t work because the interests of the company and its users, along with the developers creating apps for its platform, are not aligned. They’re not aligned because as a free product Twitter doesn’t make money from its everyday users and developers, and thus does not hold any obligation towards them. Like most other free Web services, Twitter is building its business model on advertising, the advertiser becoming the customer, and its users, bluntly put, the product.

While it is possible that the interests of the multiple parties you are trying to satisfy with your product or service overlap, it is likely that there are also differences in what they want. In those cases where the interests vary, the product designer will have to pick the party whose interests will take precedence in their design decisions.

For example, if you build an audience of users through a free product and then go on to sell advertising, there may arise a conflict of interests on the issue of privacy. The advertiser benefits from knowing more about the users, while some users may wish to keep their information to themselves. The two conflicting interests force the designer to pick a side, either to push for more information sharing in order to make the most out of advertising, or to take a stand on the privacy of their users while losing the potential for more advertising revenue. If they decide to give away user information without their permission they will also be giving away their users’ trust, along with their own integrity.

Nothing Is Free

All work requires compensation, whether monetary or otherwise. Sometimes we choose to work for free, in regards to money, but that choice is always based on some other form of compensation. When we give someone a gift, we receive emotional compensation in return because the action of giving a gift satisfies our desire to please someone we care about. We may give a gift to somebody we do not know, but this also works the same way, providing us with emotional nourishment that satisfies a compassionate soul. Sometimes we create work for ourselves, that is, we work on something because we enjoy the creative process itself, the work being its own goal. In those cases, the process, together with the end product, are our compensation.

An artist may work on a painting for its own sake, the work being its own reward, but they will not work for free when commissioned to produce a piece for somebody else, unless of course they have the desire to present the work as a gift, in which case they must know the person they are working for well enough and care about them enough to feel that the emotional reward outweighs the toil. When this is not the case, when they do not wish to give away their work as a gift, they will seek monetary compensation, for even though they may enjoy the process of creation itself, the act of giving away their finished work and their time — and thus, a little of their life — requires fair compensation.

Money Or Love
The designer’s dilemma lies often in the difficult choice between monetary payment and satisfaction of a job well done. Image by Opensourceway.

Developers of today’s free Web apps and sites do not know their users well enough in order to give away their work as a gift. The bond between them and the recipient is not so strong as to generate enough desire in their hearts to wish to give away their work for free. One exception to this is the open source movement, in which case the work is given away as a gift, though the compensation has less to do with the recipient than with the intended function of the work.

Open source software is first and foremost created to satisfy a certain goal that the developer has, and the fulfillment of this goal is reward enough for them. They then release their work into the world and may derive further benefit, like patches to the software and prestige for themselves, but this further benefit is only an extra, only the icing for the cake which has already been eaten. In a few cases the software takes off and grows at a rapid pace, but the initial compensation has already been paid in giving the developer what they wanted when they first set off to create it.

Contrast this with free products and services that are not open source. Those products are given away free of charge, but they are not given away free from the maker’s desire for compensation. Since compensation does not come from the users it is sought elsewhere.

Advertising: A Gateway To Conflict Of Interests

Typically, this path leads to advertising. If the users aren’t going to pay for their product, the advertiser will pay for the users. The product developer begins to introduce ads and other forms of sponsorship deals. This creates a conflict of interests. On one hand, the product serves a specific purpose for the user, on the other, an ulterior motive is introduced in the form of advertising, which in turn uses the product as a means to sell something else, the product itself being relegated to the status of a promotional vehicle. The focus of the product is split in two:

  1. it must work to perform a certain function for the user, and
  2. it must get the user to click on an ad.

While it is possible to keep these two goals separate, in many situations they are not mutually exclusive, which forces the designer to pick sides and make compromises.

Some product designers and developers proceed to mask this conflict of interests by pretending that the two goals don’t actually point in different directions, and that their primary focus is always on making the best product possible, which in turn brings them more users, and thus more advertising money, the latter being the outcome of the former.

This stance is taken for two reasons. First, telling users that they are the product is not going to go well with them, and neither will admitting that you are compromising design decisions that improve the product to the advantage of the user for design decisions that only benefit the advertisers.

Second, this viewpoint may even be a subconscious reaction to the inner dilemma that the product designer has to face when they are forced to pick between two or more conflicting interests. A good designer does not want to compromise their integrity. They want to make the best product they can, which means a product that best serves its primary purpose, that is, its function for its users, so they try to resolve the conflict with a different explanation.

Twitter Changes
Since Twitter relies on advertising, it had to make quite unpopular decisions recently. The company limited access, enforcing display requirements, and forming guidelines for what sort of apps they want (and don’t want) to see on the platform.

But this doesn’t work. You can pretend the conflict of interests isn’t there but that will not make it disappear. For example, Twitter recently began to push back on developers who make apps for their platform by limiting access, enforcing display requirements, and forming guidelines for what sort of apps they want to see on the platform, and what sort of apps they don’t. Apps that are seen to compete with Twitter’s main offering, i.e. consumer micro-blogging, are discouraged.

Twitter’s initial goal was the creation of a simple micro-blogging service, which they’ve allowed to evolve into different forms to suit its many uses. But now, having to face the reality of needing to make the service pay, they turn to advertising, and in turn are forced to enact much greater control over how the user interacts with their product in order to reshape the service into a viable advertising channel. Now, there is nothing wrong with Twitter taking the advertising route to make money. That’s not the issue. What’s wrong is the situation in which they find themselves, having to strike a compromise between the needs of the advertiser and the needs of the many developers of Twitter apps who have helped get the service to where it is today.

Twitter does not technically owe anything to those developers, but to push them aside when you’ve reaped the rewards of their labor is not a decent thing to do. The roots of the problem are unclear commitments, which have been there from the very beginning. If the developers paid for the service, Twitter could work without hesitation on delivering them the best platform and API for their apps. Without this commitment, the various parties work together on a foggy perception of aligned interests, only to later find themselves in trouble when they discover that their interests aren’t so aligned after all.

Then we have the problems with privacy breaches that pop up all the time with services like Facebook and Google (Wikipedia has whole pages dedicated to listing criticisms of the two companies, here’s one for Facebook, and one for Google). Once again, these companies don’t make money selling a service to the end user, they make money from selling advertising. This creates a conflict where the product developer has to decide whether to focus on satisfying the needs of the user, or making the service more lucrative to advertisers by sometimes breaching the privacy of their users. The issue would not exist if people paid for their search service or for their social network, which would remove the advertiser from the equation and let the company focus solely on delivering the best product for the user, but as this isn’t the case, we are left in a situation where the interests of one party are compromised for the interests of another.

There are also the really obvious dishonest design decisions used in social games like that of Zynga, whose interests lie in promoting the product in order to pull in more users rather than actually making a good product. For example, they have a dialog prompt with only one button that says “Okay�. The dialog asks the user whether they will give the app greater access to their Facebook timeline, i.e. let it make posts on the user’s behalf, but there is no option to close the dialog, only to agree with it.

Upon clicking the button, the actual Facebook permission box pops up which lets the user decide whether or not they wish to give these permissions to the app, but because the previous box has already conditioned them to agree, they are more likely to simply click “Okay� again in order to proceed, rather than stop to make a conscious decision.

Manipulative Zynga Prompt
A manipulative Zynga prompt. The two buttons, “Accept” and “Cancel”, are about sharing a message with your friends, but the wording makes it seem as if they are to do with accepting the reward itself.

On the one hand, the designer is tasked with creating an informative dialog box meant to help the user make a rational decision, on the other, they are tasked with creating a dialog box which will manipulate the user into acceptance, and because they are not committed to delivering the best service they can for the user, they pick the latter. The interesting thing with Zynga is that they actually do make money from their users, but they do so only from the small percentage who pay, not from the whole user base. This means that to make money they have to capture masses of users, like dropping large fishing nets into the ocean to catch the few “whales� (the term used in the industry for large spenders) along with a pile of bycatch.

Lastly, consider all the online blogs and magazines that cram their pages with ads leaving no room for the content, and also the content itself, which takes the ever more sensationalist nature by the day, its only purpose being to bring in more page views, not to enlighten readers. For example, The Huffington Post split tests headlines to arrive at the one that brings in the most hits, thereby trading the experience and judgement of the author for the impulses of the masses. Because the reader is not the one paying, these sites hold little loyalty towards them, leading to design decisions that optimize for page views and ad clicks rather than for the creation of the best possible reading experience. Such sites also like to introduce design tricks like pagination, the goal of which is to once again boost page views, while they try unsuccessfully to convince us that clicking multiple times on a set of small page links somehow leads to a better user experience.

The conflict of interests that arises naturally in free products derails the designer’s core goal of making a great product, that is, a product that aims to fulfill its primary purpose of satisfying the user as best as possible. Loyalty to multiple parties with disparate goals is impossible, which leads to friction in design decisions and in the soul of the designer, forcing them to make dubious compromises in their work. Each small compromise doesn’t seem like a big deal, a little manipulative form box here, a tiny breach of privacy there, but remember that the final product is the sum of its parts, and so in the end, the multitude of small compromises add up into a substantial whole.

If Compromise Isn’t An Option, Free Is Not A Solution

A compromise is a concession on the part of all the parties involved, not just some, and you cannot compromise on principles without destroying them altogether. For example, there can be no compromise between truth and falsehood for you cannot make something just a little less true. In the same way, surrendering your users’ privacy or manipulating them into taking an action for your own gain is to surrender your honesty, and in turn, a part of the moral foundation upon which your work is built.

Whenever you feel a tension in making a design decision that you think is caused by a conflict of interest, ask yourself exactly what compromise you’re asked to make. Are you asked to make a fair concession between one party and another from which both will derive benefit, or are you asked to take something from your users without their permission, or make them do something they have not agreed to do? Are you asked to make a decision that will compromise the integrity of your work?

Faced with this dilemma, what do you do? The answer is simple, and is the very thing you should have been doing all along: charge money for your products. By selling your work instead of giving it away for free your interests and those of your customers — who are no longer just users — are aligned: they provide you with the compensation for your work, not some outside party, leaving you free to focus on delivering the best product, for them. This is not only moral in that you no longer have to compromise the interests of one party for those of another, it is also a much simpler solution. You make a product and sell it directly to the customer, no need for other parties, nor conflicting interests, nor dubious design decisions.

App.net
App.net proclaims ad-free social networking in their banner. Because the membership fees are placed right next to it, the user never wonders where the catch is.

It works, too. A great example is the App.net project which I’ve mentioned at the start of the article. Its creator, Dalton Caldwell, wasn’t satisfied with the way Twitter was treating its developers, so he set off to create his own micro-messaging service, with the difference being that this service would be paid for at the outset by its users and developers. Caldwell set a minimum of $500,000 for his fundraising month during which people could sign up for a year of service to a product that didn’t yet exist.

In just a month he raised over $800,000 and has launched an alpha version of the service. His critics have been saying that nobody would ever pay for a Twitter-like service, but clearly there is enough value there for some to sign up for a paid alternative. It is far too early to judge the future of the venture, but the initial fundraising success shows that people are prepared to pay for services they care about, even with the presence of free, established alternatives.

Charging For Online Content Works

On December 10th 2011, the stand-up comedian Louis C.K. decided to release his full-length special Live at the Beacon Theater on his website as a DRM-free download for $5. Two weeks later, sales from this self-published special exceeded $1 million. The download was DRM-free, meaning that people could easily pirate it, but given the fairness of the price and the package that route just wasn’t worth it. Yes, not everyone can re-create the success of Louis C.K., but that’s not the point. Of course to drive product sales you need to generate enough excitement and interest — that’s the job of marketing. The point is that selling digital goods on the Web is possible, and, when you have something people genuinely want, can be very lucrative. The success of Louis C.K. has since inspired other comedians, namely Aziz Anasari and Jim Gaffigan, to adopt a similar distribution model.

Last year, The New York Times put up a paywall around its online articles. The paywall allowed visitors to read 10 articles a month free of charge, but required a paid subscription for subsequent access. The implementation of the wall was very porous, meaning that it was very easy to get past it with a variety of simple steps, and so many critics believed that people wouldn’t be fooled into a paid subscription. Just four months after the implementation of the paywall, 224,000 readers have already signed up to the paid subscription, not far short of the company’s goal of reaching 300,000 subscribers within a year. Combined with sign-ups through other channels, such as Kindle and Nook subscriptions, the total of digital subscribers rose to around 400,000. Although this number still makes up a small portion of the newspaper’s revenues, it highlights healthy growth and proves that charging for online content can work, even in the face of everyone else giving theirs away for free.

The New York Times Paywall
The New York Times paywall prompt. Even though there are simple tricks to get past it, many people still prefer to pay for their content.

Other newspapers like The Wall Street Journal and The Economist successfully use the same model by keeping most of their content accessible only to paid subscribers. When you charge your readers for content, you no longer need to run after page views by creating sensationalist work, nor does your website need to try and squeeze ever more page loads out of each visitor through design tricks like pagination. Once your readers have subscribed and paid, they’re going to read what you have to say no matter how attention grabbing or plain your headlines are, freeing your authors and journalists to focus on creating work that enlightens your readers, not shallow content designed to spread.

For an example of design related publishing consider the success of Nathan Barry and Sacha Grief, whose two eBooks combined have made them $39,000 worth of revenue — and are still selling. Bloggers like to give away their experience for free, and while this is great for the readers, it doesn’t help pay the author’s bills. Some put up a few ads on their site, but unless they consistently generate a lot of traffic, the revenue generated by the ads won’t amount to much. Instead of chasing after advertising pennies, why not package your experience into a book? If your audience is tech savvy, you won’t even need to print the book — just offer a DRM-free eBook package that your readers will be able to consume on any device of their choice. The success of Barry and Grief shows that people are ready and willing to pay for good content, you just have to give them the opportunity to do so.

As for an example of well implemented advertising, consider The DECK ad network, which includes some of the top tech sites around the Web like the Signal vs. Noise blog from 37signals, Dribbble, Instapaper, A List Apart and many more. The ad network uses a very unobtrusive 120×90 pixel banner, with a sentence or two of text underneath. Its small size shows respect for the end user by keeping advertising within strict limits. It’s a subtle way to advertise which has inspired other networks to offer the same format, such as AdPacks from BuySellAds. This small format won’t work for everyone — most of the sites that use The DECK rely on other sources of revenue — but it is a good way to deliver a cleaner experience for the user while still providing an advertising channel.

Summing Up

Free products themselves are not the problem. We give gifts all the time and the giving of them to the people we care about is reward enough for us. The problem is the giving away of free products and services while still expecting compensation. If the compensation does not come directly from the user, the developer proceeds to extract it by other means, which usually involves bringing in other parties to the table, leading to a conflict of interests. When the interests of the user and the product maker are not aligned, not only do you get a neglect in the feature set, but a product of a wholly different nature. The conflict is not just external, it exists inside the mind of the designer, and a battle is fought every time they are put into a situation where they have to limit their full creative potential by compromising the interests of the user.

It doesn’t have to be this way. People will pay for design and content created to serve them, not to exploit them. People have paid for centuries, and they will continue paying for goods and services that give them value. Instead of picking the path of free design, take the road of moral design — design firmly based on the moral values that guide your life and your work. By turning your users into your customers you eliminate the conflict of interests and thus free your mind to work fully on the problem at hand, and any compromises that you make will be real and fair compromises, that is, design judgements that improve your product by taking it in the direction you want it to go, not dubious choices that surrender your values, limit your creativity and cripple your work.

(vf)


© Dmitry Fadeyev for Smashing Magazine, 2012.


Entrepreneurship: Lean Startup Is Great UX Packaging


  

When Albert Einstein was a professor at Princeton University in the 1940s, there came the time for the final exam of his physics class. His assistants passed the exam forms to the hundreds of students, and the hall was dead silent. One of the assistants suddenly noticed something was wrong.

She approached Einstein and told him that a mistake had been made with the exam form and that the questions were the same as those in the previous year’s exam. Einstein glanced over the exam form and said that it was OK. He explained that physics had changed so much in the last year that the answers to the questions were now different.

The lean startup movement, like Einstein’s physics exam, talks about the same things that UX people have talked about for decades. The difference is that people are now listening. Lean UX is an approach that quickly followed the lean startup movement. It is not a new thing. It’s just a new name for things that were always around. The difference is in the packaging of these ideas.

One other factor that has changed dramatically is the audience. Entrepreneurs and startup founders have always been asking themselves how to develop great products. The answer that UX practitioners, usability professionals and UX researchers have been giving them was too complicated. UX people (me included) have been using disastrous jargon that only we understand. We have been talking about usability tests, personas, field studies and areas of interest in eye-tracking studies.

The lean startup answer to the same question uses plain language that people understand. When I say, “We need to conduct a contextual inquiry,� I usually get a deer-in-the-headlights reaction. When a lean startup person says they are “getting out of the building,� it is a whole different story. We mean the same thing; we use different words.

Does it matter? I think it does. Who would have thought that startup companies would be looking for UX people and UX founders, and would become interested in doing usability testing, iterative design and customer interviews?

This article takes the principles of the lean startup and suggests their UX research equivalents. Hopefully, it sheds some light on why the lean startup concept is so very well accepted in the entrepreneurial world and why startups suddenly want to do UX research and design.

Validated Learning And Usability Testing

The lean startup movement claims that startups exist not just to make stuff, but to learn how to build sustainable businesses. This learning can be validated scientifically by running frequent experiments that enable entrepreneurs to test each element of their vision, as outlined by Eric Ries in his book The Lean Startup. In my interview with Ries (embedded below), the most familiar voice of the lean startup movement, for my book It’s Our Research, he calls for entrepreneurs to double-check their assumptions to verify that they are right. He determines that validated learning exists to help entrepreneurs test which elements of their vision are brilliant and which are crazy.

In the UX world, we call in the product development people to evaluate their design assumptions in usability tests. We urge them to ask users to complete tasks while using the think-aloud protocol and to identify usability problems.


An interview with Eric Ries about getting stakeholder buy-in for UX research and how it relates to the Lean Startup ideas.

When entrepreneurs hear “validated learning,� they can see the benefit. They understand that this concept refers to proving or disproving their assumptions. When they hear “usability testing,� they associate it with a time-consuming, money-eating, academically oriented project.

Validated Learning
Validated learning: You believe you’ll find a new continent if you keep sailing west. So, you test your idea and verify the route using scientific methods and measurements.

Build-Measure-Learn And Think-Make-Check

The fundamental activity of a startup is to turn ideas into products, to measure how customers respond and then to learn whether to pivot or persevere. All successful startup processes should be geared to accelerate that feedback loop. As Ries explains, the feedback loop includes three primary activities: build (the product), measure (data) and learn (new ideas).

Build-Measure-Learn And Think-Make-Check
Eric Ries’s Build-Measure-Learn feedback loop and the Think-Make-Check UX cycle.

The lean UX approach calls for a slightly different cycle: Think-Make-Check. The difference, according to Janice Fraser (cofounder and first CEO of Adaptive Path), is that this latter feedback loop incorporates your own thoughts as a designer, not just ideas learned through measurement. Janice, who now leads LUXr, indicates that the pattern of a lean startup is an endless loop consisting of two steps: Prove-Improve, Prove-Improve, Prove-Improve. This means that you design something, learn about it, make it better, learn again and so on. There is no room for people who are afraid to put their creations on the line for testing. These two feedback loops are very similar and are making a lot of sense to people in both the entrepreneurial and the UX worlds.

Build-Measure-Learn
Build-Measure-Learn: How do you build the fastest ship? You try to build and test your hypothesis; you measure the result; and then you learn new knowledge that you can bring to your next ship design.

MVP, And “Test Early And Often�

The minimum viable product (MVP), as Ries explains it, is a version of the product that enables a full turn of the Build-Measure-Learn loop with a minimum amount of effort and the least amount of development time. How many times have UX people told their stakeholders that for every dollar spent on solving a problem during product design, $10 would be spent on the same problem during development, and $100 if the problem had to be solved after the product is released?

We’ve known for years that product prototypes are to be evaluated early in the development process (not just prior to launch). We’ve also known that these evaluations are most valuable if they are repeated throughout the process. The MVP is, in fact, an early prototype that serves as a tool to learn and test the team’s assumptions.

<br />
Minimum Viable Product
MVP: You want to build a huge ship, but instead of building the ship right from the beginning, you start by testing your idea with minimal design to see if it floats.

Pivot And Iterate

To use the analogy of a basketball “pivot,� one foot of a business is always firmly rooted in what the team has learned so far, while the other foot is moving and exploring new ideas for the business. Instead of taking the big risks of developing something huge, lean startups take small steps forward, developing things and pivoting to better directions. This way, if they fail, the fall will be less painful and will allow them to bounce back and continue. On the other hand, if they had climbed a big cliff, the potential fall would be deadly.

This reminds me of why we pitch for an iterative design process or for using the RITE methodology (rapid iterative testing and evaluation). Many product development decision-makers feel that the best time to conduct a usability test is near launch time, when things look good and are “ready� for users to play with. Many UX research practitioners know that when they agree to conduct a usability test right before a product is launched, especially if this is the first usability test for the product, the following is most likely to happen:

  1. The study will result in a long list of defects (i.e. usability problems);
  2. The product team will be presented with a long list of issues exactly when they are trying to shorten the list of issues;
  3. Only the easiest problems to fix will be taken care of;
  4. The most important problems will be ignored and the product will be launched;
  5. By the time the team is ready to start working on the next version, there’s already a long list of new features to be developed, leaving the usability issues low down on (or off) the priority list.

The solution to all of this is to adopt an iterative design process that involves fast rounds of small-scale usability tests. Jakob Nielsen has been preaching this for years now. And then along comes Eric Ries, who talks in the most natural way about pivoting companies, directions, customer segments and design. People don’t iterate, they pivot.

Pivot
Pivot: You want to defeat your opponent, but it is difficult to win instantly by launching a full-scale attack in one shot. The proper way would be to advance and attack step by step, always keeping one foot on the ground and ever ready to bounce back in case an attack is not successful.

Customer Development And Fieldwork

The term “customer development� was coined by Stanford University professor Steve Blank, one of the fathers of the lean startup movement. Customer development means developing your own understanding of who your customers are, what they are like and what their needs are. This is done through an approach guided by the mantra “Get out of the building.� This mantra urges entrepreneurs to interview potential customers, to observe them in their own environment and to try to make sense of it. What a revelation to our UX research ears, huh? We UX people have been getting out of the building for a living for decades now. We call it by different names: ethnography, fieldwork, generative research, exploratory research, discovery research, user research, design research. Phew!

Customer Development
Customer development: You want to trade with a country in the Far East. However, when you finally get to talking with the people of the country, you realize that they prefer to trade with your scientific equipment rather than your gold coins.

The Bottom Line

The lean startup movement, like the story of Einstein’s physics exam, talks about the same things that UX people have talked about for decades. The difference is that people are now listening. The lean startup movement, followed by the lean UX approach, did not reveal any new UX concept. Lean startup thought-leaders do a terrific job and do an awesome service to UX people who struggle to get buy-in for design thinking and UX research.

The secret sauce of lean startup people is that they advocate for user experience research and design as one of the primary solutions to their business problems, and they do it using plain language. I highly encourage UX practitioners to closely monitor the developments and thought-leadership in the lean startup world to see how they can use what they learn in their own organizations, “lean� or not.

Learn More About The Lean Startup Movement

Books

Videos

Illustrations by Calvin C. Chan, (@calvincchan), UX designer, Hong Kong.

(al)


© Tomer Sharon for Smashing Magazine, 2012.


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