Getting people to signup is a marketing and conversion issue not covered in this article, but the signup experience itself is your user’s first impression of using the product for their own benefit. I’d love to hear your thoughts about this design and see other great examples of signup processes. Link me up!

But those are just the accoutrement needed to set the stage. An interaction designer must rely on one or more tools with which to turn the brilliance bursting forth from highly stimulated and caffeinated synapses, into pure bottom line revenue. Well, ideally at least.

I have my staples, those products I cannot and will not live without, which happen to all be owned by the same company these days. Adobe Photoshop, Illustrator, and Dreamweaver have fueled the development of most software products I have worked on. Though they will always be used for my ultimate design and final polishing, I’ve recently discovered a few products that make creating a prototype almost as easy as having a thought, and I want to share these finds in case other user experience professionals or developers looking to prototype new features might benefit from them.

Balsamiq Mockups Makes Rapid Prototyping Fun!

I happened onto Balsamiq Mockups via a Twitter comment by Alex Horstmann about how great this product is. One of the big back-and-forth debates among information architects and user experience designers is the level of prototype that should be created and presented. Info architects generally rely on wireframes… the outlining of sections and navigation elements and the like. People who design the product line branding and comprehensive user experience like I do, often go whole-hog and want to communicate all their creative ideas, along with the taxonomy, navigation, etc. It can be time-consuming to do that, and sometimes even a visual designer just needs to show a simple feature interaction concept. Historically, I love to sketch with pencil and paper. It’s been the fastest way for me to work a design problem out for myself. But then I usually want or need to share it with developers, and I have a sketch. Do I scan it, recreate it using one of my standard tools, or just get on the phone and describe it???

With Balsamiq Mockups, I can grab and place “sketchy” elements such as dropdowns, icons and other form elements onto a blank notebook page online, then save and send it to my team. Peldi Guilizzoni, owner of Balsamiq and developer of the product, sets a new standard for customer service, which is one reason why this product will always draw raves from me, despite my occasional gripes about Adobe Air, which is the platform the product is built upon. Meet Peldi and you will agree with me. This product was and is “designed for users” by Peldi himself. If you have a problem, he strives to fix it, and uses the excellent Get Satisfaction site to stay in constant contact with users who need help. If you have a request, Peldi will seriously consider it, usually implement it, and if he cannot or shouldn’t, he provides the research behind his decision and fully explains why not. That is RARE, even in this day of more transparent and more open applications.

And now maybe Peldi will know why it took me so long to put this review up – I can’t stop blathering on about how great he is with his customers, and stay focused on the software itself, which is why you’re here. So go see the software for yourself!

>> Try it now, before you buy it!
>> Twitter Balsamiq

Skitch Takes Screenshots to a New Level of Convenience

Working with software, I’ve taken a lot of screenshots. I’ve taken them into Photoshop and refashioned them completely, I’ve drawn circles and put giant pink “Please do not do this!!” messages on them, and I have often had to take multiple shots of a long web screen and then put together the hacked up pieces in a Photoshop file so I can have the long screen to work on or annotate. Thankfully, a new Adobe Air tool called Websnapshot has eliminated that issue, as long as you have a direct link to point to.

But Skitch, though it doesn’t take a screenshot of the entire web page, does so much more, that it is well worth the money you don’t have to pay for it. It’s in Beta and Free as of this writing. Here’s what Skitch does, brilliantly and easily: find something you need to take a screenshot of, open the Skitch application, snap the portion of the screen you want, draw circles, boxes and write notes on it to explain your issue, post it to your online account, then share the link with the people you choose. Nathen Harvey, Director of Operations at VisualCV, turned me onto this modern miracle. He uses it to communicate with users and developers, because he can snap a screen and put notes on it and distribute it within minutes. The ability to post a screenshot online and grab the link to send in an email, rather than having to save and send an attachment from your own hard disk space is truly awesome. Learn the lingo and try it! I love this tool.

>> It’s free… nothing to lose but a moment of time. Try it!
>> Twitter Skitch
>> See Nathen’s Skitch Message Online

GUIMags & GUIMagnets Makes Whiteboard Collaboration Productive Beyond the Meeting

Gathering in a conference room, brainstorming with smart people, the smell of fresh markers permeating the air… nothing beats it (sometimes!) But after hours spent in a conference room, what do you have? A lot of stuff on a whiteboard that has to be transcribed, remembered and implemented immediately, or all the hours of work are at risk of being lost forever.

Enter these little whiteboard magnets that are so obvious, you’ll wonder how you lived without them all these years. I love the GUImags story… the lead designer had some carpal tunnel issues, and was stuck at home healing. He used refrigerator magnets to make interface elements, and the Eureka! moment struck him: he needed magnets of interface elements to make design faster and easier. (And less physically debilitating!)

GUIMagnets is a similar product of laminated form elements. Rik Schot, a User Experience Designer in Nederland, was working on a website form (and no doubt, making frequent changes) when he realized there had to be a better way to prototype.

Now, there is a trick to this – you will have to take pictures and distribute them of the whiteboard designs, until GUImags partners with someone like Polyvision or Scanr, or designs a unique solution themselves. Output of the meeting is a critical element of this process and I hope they will come up with a full solution soon, because I think this could be a really valuable product in team settings. GUIMags mentions several other products coming soon that will aid your prototyping & collaboration: GUIBoards is a neat whiteboard with built-in resolution sizes that looks like a helpful concept.

GUIMagnets are sold on a laminated sheet, but GUImags come in a little briefcase – you’ll look so official when you show up for meetings!

>> Learn more about GUIMags
>> Learn more about GUIMagnets

Additional Products for User Interface Designers

Gliffy Does Diagrams in a Jiffy!

I so couldn’t help that headline. But Gliffy does seem really cool. I have known about them for several years, and they’ve rebranded themselves to focus on using their tool for online wireframing, diagrams, storyboards, etc. This tool is easy to use and would really come in handy for professional sitemaps and interaction flowcharts. They offer a free one-month trial, and paid subscriptions following that. I haven’t tried the wireframing options they offer, but it looks pretty neat. Check them out.

Dabbleboard – A Powerful Online Whiteboard

I just discovered Dabbleboard but have only dabbled in it so far… it takes a bit of getting used to. The concept is really cool though – you can draw online, instead of offline using pencil and paper, and then show your lovely sketches to others much quicker than you could sketch, scan and send.

I tried making a user interface as lovely as the Dappleboard example shown here, but couldn’t in the few minutes I spent with the product. I think you have to add some elements or something from this UI Toolkit. I’ll explore the product more when I have time. For me, Balsamiq Mockups was faster and easier to get started with, but Dabbleboard has one key thing I like, which is the idea of drawing electronically so I can avoid the step of scanning, or recreating sketches in a full-blown prototype before showing them to people. You don’t have to sign up to play, which is awesome, so try Dabbleboard out today and let me know what you think.

Have I missed any other cool prototyping or user interface-related products? I’d love to hear about them if you use something not mentioned here!
 

This picture, from Cooking Cute, a website by dedicated mother and Bento-designer Ngoc, is just one of many examples of a Bento-styled lunch. Audrey is her niece, and this meal really is a thing of beauty… what a treat to open your lunchbox and find something like this in it!

I cannot help but think the Bento concept is adorable, while simultaneously being thankful I have no school-age children to prepare these time-consuming treats for. The Oilman likely would not appreciate the gesture of having cute food on his plate, though he has gotten used to every meal having a “theme” such as Greek, Italian, French or my personal favorite, Tex-Mex, featuring authentic Texas flavors, such as mesquite-grilled meats and veggies. No Kansas hickory for me, thank you!

Continue reading for Bento resources and pictures… because no plate of food you serve should go undesigned. And if you like pretty things as much as I do, you won’t want to miss seeing these visual treats.

Bento 101
Alanna Kellogg provides a great introduction to Bento over at BlogHer. If you’ve never before heard of Bento, or are new to this designer food craze, start here for six easy lessons for taking Bento back to school this year.

Cooking Cute
The definitive site for all things Bento… pictures, recipes, tips, links, resources, an A-Z glossary and more!

LuckySundae’s Beautiful Bento Design – 180 Meals!
This Bento designer’s work was featured in the book “Face Food” and you’ll see why after looking at these photos… very creative, charming and whimsical… not to mention edible!

Face Food: The Visual Creativity of Japanese Bento Boxes
Book description: “All across Japan, parents come up with unique ways to bring attention to their children’s lunch boxes. And what better way to make children eat than to turn their midday meals into a cartoon? With Face Food, Christopher D Salyers documents the very real phenomenon of crafting food into visually creative and appealing forms, such as Pikachu, Daraemon and Cindarella, bringing health, heart and imagination to the bento box.”

Bento Lunchbox with Nested Containers
Very neat modular lunch box with 5 microwave-safe containers that fit inside, from Reusable Bags. Perfect for kids or adults who want to take lunch to work.

Cooking Cute’s Bento Box Collection
I covet these beautifully decorated lunchboxes… they’re enough to make me want to try serving Bento lunches around here after all! Fortunately, Ngoc has posted links to retailers where she purchased them, so be sure to check them out for even more Bento container options.

Fun Food Blog
Packed with love, for you… great Bento-centric blog with lots of tasty photos and food for thought, though it makes me yearn to eat lunch apart from The Oilman instead of with him as we usually do, just so I can leave him sticky notes with adorable drawings on them with his packed meal.

Do you have any Bento-making experience? I’d love to hear your comments and see photos if you have them to share.

Wordle’s Word Cloud Generator
One tool I learned about that helps people create a visual resume is called Wordle. If you like playing with graphics and text and colors, this excellent Java-based web application will occupy you for hours. The colors and layouts are all customizable, and the designs it creates actually look good. You take the text from your resume, copy and paste it, and then play with the output until you’re satisfied with the results. Here is one version of my resume in Wordle form… does this word cloud approach communicate capabilities effectively? You could design so many cool pieces with this art… like a blog header or presentation cover. I just love Wordle!

A Resume in Pictures
Karen Storer is a visual thinker who presents information using maps and diagrams, so it only made sense for her to present her resume in the same way. Can you picture her solving your communication problems like this?

Do Diagrams Help Depict Capabilities?
I also took a stab at using a Venn Diagram of my “universal experience” concept as a visual resume. What’s missing in this image is any sort of dates or companies… but would this add anything to a traditional resume, because you can see a lot in a glance?

Resume Presentations
Some folks have used Slideshare to create moving graphic resumes. Alihadi has created an autobiography that made me laugh, as well as educated me on his work history.

This format lends itself to creating and defining your own personal brand. I wonder what an HR director would think, if sent the link to this? I’d love to know, since I may be tempted to make my own Slideshare resume someday.

>> Slideshare Samples

Timeline Resumes
NavAgility is in the business of visual timelines, which can be used to depict a person’s work history. I believe you can drill down into the different work experiences shown, and get the full-blown text of that job history, making this more like an interactive site.

But, Do Visual Resumes Work?
Some design professionals expect their portfolio to serve as a “visual resume.” But portfolio images are typically just work samples, unless dated and laid out chronologically. What I want to know, is if depicting your work history graphically is effective at getting the attention of the right people, or if they are just novelties meant to amuse graphic-inclined folks like me who find them interesting to study. I assume the traditional resume would also be required, but I’m not sure if that’s correct, if you can fit the dates and companies to depict your work history inside the visual presentation.

I’d love to hear it straight from human resource professionals and recruiters, if they’d be willing to take this short survey or leave comments here, to give job hunters some insight.

>> Take the Survey

Fine. We can work with that, because the purpose of this discussion is primarily about design and branding. What I DO know, and in this area thankfully, I have some expertise, is what Web 2.0 is NOT. And Web 2.0 is not a brand.

These fun, cool graphics do not provide a substitute for the necessity of a brand, they cannot distinguish you from competitors (anymore) and they do not, in and of themselves, provide the critical distinction that a great brand experience offers, that moves a company leagues beyond the pack.

I read an artist’s definition of Web 2.0, and she described it this way: “Designs that conform to strict generic conventions, leaving little space for originality.” Harsh, but fair. The de facto standard these days, to “prove” you are indeed Web 2.0, seems to be the use of glossy, shiny bits of icons, buttons and other artwork. I have clients that say, “Make me look Web 2.0, please!” but they don’t fully understand the point of this phrase, and their confusion is partly caused by the prevalence of look-a-like sites. To be Web 2.0 requires more than a glossy, shiny, look, and in fact, those elements are NOT the best illustrations for any and every company and organization. It’s so easy to get behind these days, with all the millions of social media sites and mashups and opportunities to connect, but at its heart, a Web 2.0 site or application should remain more about connecting to others, collaborating and sharing resources, and ultimately ensuring the natural flow of information that the internet itself allows.

There is something that needs to wrap around all the user-defined, personalized, socially-connected text, audio and video, sort of like the universe envelopes the globe. That something is your BRAND. Your organization’s brand needs to be a unique entity, very much like you are as a person, with inherent traits, ways of being and interacting with others, and a sparkling, distinct personality. For some brands, “sparkling” can be captured visually in shiny, glossy buttons and bits of graphic fluff, and the content, tone, products, services and people behind the company, organization, or individual will match the graphic image. Others require a different approach, and it is for this reason I became disturbed when I noticed that Quicken has altered their site to look and feel “Web 2.0 compliant”, possibly with unintentional results. (Enlarge the image to see my pithy design comments.)

I mean no ill will toward the designers of this site – I don’t know anything about the decisions behind this design update, such as marketing pressure or personal preferences. What comes to mind when I see it, is that I don’t feel this is a sustainable brand, and therein lies my problem with it. If we change our branding every time a trend is hot, guess what happens over time? We lose all brand identity, all the brand equity (or we never build any) and our old brand assets will now become brand liabilities, as we scramble to redo everything.

The folks at cpseo.com define Web 2.0 as a trend in web design and development – a perceived second generation of web-based communities and hosted services (such as social-networking sites, wikis and blogs) which aim to facilitate creativity, collaboration, and sharing between users.

The word perceived is very important, and accurate, for the real world of web development. Designing your site to look like a blog, or finding some cute n’ shiny buttons to use, or even developing the most perfect site code using tableless xhtml and css, does not create loyal customers or have define the brand experience. You should take advantage of new technology and use the best visual imagery you can afford, but the real crux of offering a more advanced web site or application, at the end of the day, lies in good old-fashioned brand definition and user experience planning, by people who care about users, customers and site visitors.

A man named Markus Angermeier designed a great visual mindmap image intended as a definition and tool for understanding Web 2.0.

If you look closely, you’ll see the word “brand” does not appear anywhere on this map. It can’t… the brand is the container, for all of these wonderful (and wacky) things. Without the container, there is chaos. Let your brand serve as the funnel through which all of your design, development, and social media experiments trickle, so that you can build a brand that will last a lifetime… unlike some of the trends and fads we embrace, then discard. Your brand states who you are in the world. Are you just like everyone else? I don’t think so. Show us who you are, and don’t worry so much about looking Web 2.0, is my unsolicited advise.

This was actually a bit harder than it looks – I began with the intention of creating a UE process, but the truth is, these activities can be done at various times throughout the life of a project, so they are somewhat chronological like a process, but not totally rigid. Many times, multiple things are going on at once. For example, I might be working on a Product Design Guide for developers, packaging design with marketing, and doing user testing on a particular feature, so it’s impossible to say “we must do this first.” Each company I work with is different and so the process has to be flexible to account for time, budget and necessity.

Italic bold phrases in this document (ie. Personas) represent actual deliverables that will most likely be produced as a result of doing the activity, and are all things I have produced for various clients and employers. I will eventually offer a complete library of deliverable samples for people who are new to user experience, or companies who are curious about those documents. I hope you enjoy these!

>> User Experience Activities | Ecommerce
>> User Experience Activities | Software

To quote from a MozillaLinks review “Firefox 3 is not a timid release. It has been designed since the beginning with the specific goal of simplifying the web experience…” The problem is, that the visual design varies only slightly from Safari. Since the day Safari came out, it’s offered the same clean, easier to use and understand interface than any other web browser I’ve used. Now that was an original design!

Firefox offers some things that Safari doesn’t, namely a ton of add-ons whose usefulness will vary from user to user. I am a particular kind of user – for some reason, it’s very distracting for me to see a lot of “clutter” in my visual space, and that’s one reason why I’ve had a strong preference for Apple-designed products such as Safari. What I need is there, and no more, and the way the design works is particularly appealing to me – subtle gray-on-gray and minimalistic icons provide an unobtrusive backdrop for what I am focused on, which is a web page or pdf (Safari has in-browser pdf viewing, a feature that’s made hopping from page to pdf a lot more seamless.)

Even though some of the Firefox add-ons seem interesting (though a lot of them are social media related), in just a few minutes I have found myself migrating back over to the simple yet elegant Safari browser to write this blog post. The other browser window just offers too many distractions, and the gui feels more “crude” than the Safari interface, because there’s just too much stuff on the interface.

Some immediate things bother me visually:

• The giant blue star in the Firefox url field, for example, is a visual distraction. They’ve put the “edit bookmarks” feature in a popup dialog, ostensibly to save a user some clicks – but how often do we edit bookmarks?

• They carbon-copied one of Safari’s handiest features, which is a Google search field on the right hand side of the browser window. But they uglied it up by adding the Google logo on top of a fancy gui element. It’s just unnecessary.

• The back/forward buttons are not symmetrical, for no reason I can tell. They both have the feature where if you press down on the icon, some recent pages show up so you can navigate quickly.

The problem with all of these things, is that they are directly in your line of vision almost all the time. This was the great beauty of the Safari interface Apple invented… it “disappears” so you can focus on the content of the page. When you need something, you look back up and it’s there. Apparently, you can switch the toolbar icons to the small size, which makes the browser look even more like Safari. Sigh…….

The one compliment I can bestow without hesitance regards the installation process. I have not yet installed Firefox on my PC, but on the Mac it was a thing of beauty. As someone who has witnessed more user tests on frustrating installations than I can count, one thing I appreciate is a well-designed, user-centered installation process and Firefox gets an A+ on this from my perspective. I’ll test it on the PC to be sure, but I wouldn’t think too many people would get confused or hung up installing this browser.

But that’s the only compliment I personally have for this new release. After seeing Samsung’s copycat iPhone, among others with claims of “being an iPhone killer”, and now this, I feel rather perturbed. Is there no original design to be found anywhere? I guess we’ll just have to wait for the next new Apple product to see it!

One of the products has captured my fancy, a computing system called the Slice, “an organically inspired computing system which envisions a new approach to accessing, organizing and interacting with information and data stored on the PC.” Only a prototype concept, but how I wish I could own this today!

Check out the Slice and all the other massively cool Beautiful And Original Product Designs at Smashing Magazine… lots of design inspiration and aesthetically stunning products to admire!

One of the products has captured my fancy, a computing system called the Slice, “an organically inspired computing system which envisions a new approach to accessing, organizing and interacting with information and data stored on the PC.” Only a prototype concept, but how I wish I could own this today!

Check out the Slice and all the other massively cool Beautiful And Original Product Designs at Smashing Magazine… lots of design inspiration and aesthetically stunning products to admire!

I recently did a quick project for my best friend, who has a son with Asperger’s Syndrome. She is very active with other mothers in her community whose children have autism-related conditions, and wanted to reach a larger audience of mothers so they can band together and help each other.

Check out the Rainbow Mum site and branding, and if you know anyone whose children or family members live “on the spectrum”, send them over!

Link: http://rainbowmum.com/