The fine folks at Class On Demand have provided us a copy of “Designer’s Guide to Illustrator” training DVD featuring Adobe Certified Expert & Instructor Sue Jenkins. Usually these cost $79.95 but we are giving it away for free to one lucky winner, that could be you!

To be eligible to win this DVD, copy and paste the red text below in the comments section of this page and fill in the blanks with whatever word you want Mad Libs style by April 3, 2010. Also please live in the USA.

I find working with Adobe Illustrator to be _________ and I would like to learn more about _________.  Also I want the world to know that Jeff Noble is  _________.

90940

Personas are a vital tool in designing a product or interface that connects with its users. When you don’t have clear personas as your designing guide, other factors get in the way. Ultimately the interaction fails: it gets made for ease of the coder rather than ease of the user, features get added that don’t present a strong benefit to the user, without a single vision everyone ends up compromising and nothing gets accomplished thoroughly. Below are a few key nuggets I took from the sources at the end of this post.

tree_swing_development_requirements

Why personas are effective:
1. Easier design consensus because you have something concrete to refer to
2. Helps people set aside personal opinions and base decisions on the user
3. Makes it more likely to use the persona in decisions
- Easier to recall the persona
- Personalizes otherwise abstract data about customers
4. Helps the team understand the target users
5. Early user validation
6. Helps identify key requirements by going through use cases

What are Ad Hoc Personas?
1. Like data driven personas they are specific detailed descriptions
2. Created in direct collaboration w/ high-level stakeholders
3. Can and should be created before collecting any more data
4. A focus and communication tool first and a product design tool second
5. Prioritized according to business objectives before communicated to rest of the organization

Why use Ad Hoc Personas?
1. Collecting more data is expensive and often not very helpful if you don’t know what you need to collect
2. Personas are there like it or not so get on the same page rather than working with different users in mind
3. The executive team is probably not clear on business objectives and personas can help
4.  Ad Hoc personas are quick and inexpensive
5. Pulling the right kind of data is hard enough and Ad Hoc Personas help in getting organized and on the same page first
6. When everyone has a different user in mind everyone tends to make tiny compromises which end up as tiny holes in product and a big compromise in the end

What Personas should include:
1. Name and picture
2. Demographics (age, education, ethnicity, family status)
3. Job title and major responsibilities
4. Goals, tasks scenarios, interactions
5. Environment (physical, social, technological)
6. A quote that sums up what matters most to the persona with relevance to interaction with the product

How to make Data-driven Personas:
1. Gather information from user Interviews
2. Refine, analyze distill into one or multiple fictitious characters/archetypes
3. Develop one or many Characters in realistic detail
4. One persona should always be the primary focus for the design
5. Use role-playing and QA sessions using the persona to evaluate design solutions


Real or Imaginary: The effectiveness of using personas in product design

The Power of Ad Hoc Personas
The Essence of a Successful Persona Project
Usability.gov

HTML5 Challenges

If you haven’t heard about HTML5, then I’m both happy that you have awoken from your coma, and sad that you haven’t been following the magic miracle that will finally fix all the browser compatibility problems and give us amazing animation and video without “a buggy/lazy” plugin. While the development of HTML5 is encouraging, and recent developments like YouTube rolling out HTML5 video for the two browsers out now that support it, as well as Apple refusing to put Flash on the iPad and iPhone, it still might be a bit soon to crown HTML5 the king of the web any time soon. I found the following links below that highlight some of the current challenges, I know, shame on me for bringing it up.

Enjoy Time Spent Encoding Videos

“There is no single combination of containers and codecs that works in all HTML5 browsers. To make your video watchable across all of these devices and platforms, you’re going to have to encode your video more than once.”
http://diveintohtml5.org/video.html

Hope You Like Banners

“HTML5 won’t kill Flash banner ads – they’ll just be done in HTML5, but now you can’t ignore them with a Flash-blocker”
http://radleymarx.com/2010/02/five-myths-of-html5-vs-adobe-flash

Just a Reminder, Standards Move Slow

“The de facto standard for the Web in the past decade was IE6.”
http://blog.est.im/archives/830/comment-page-1

A Somewhat Misleading Final Specification Date

“The HTML5 specification is not expected to be finalized until 2022″
http://www.eweek.com/c/a/Application-Development/20-Essential-Things-to-Know-About-the-HTML5-Web-Language-329684/?kc=EWKNLEDP02082010A

Ready or Not?

Is HTML5 Ready? http://ishtml5ready.com/
Is HTML5 Ready Yet? http://ishtml5readyyet.com/

Trend: Javascript Toolkits

It seems Javascript Toolkits have infiltrated every nook and cranny of the internet. And it seems like everybody and their nephew has built one.

So which toolkit is the right one for you?  Well, most of the big names have the same subset of features, such as “drag and drop”, animation capabilities, and XML HTTPRequest functionality.  Maybe you need something a little more, like HTML Generation or the out-of-the-box charting functionality of Dojo.  Or, your deciding factor may be licensing.  You may love the features of GWT, but your company doesn’t gel with the Apache License.

I put together the illustration below from the data available on this wiki article to compare all the big guns in the Javascript Toolkit game.  I know I left off some that you may be using, and didn’t list all of the features, but this should be a good snapshot to get you started.  Please let us know your experience with these or any other Javascript Toolkits.

Another thing we would love to know is will you be using one of these toolkits when HTML5 is “fully supported” in all the major browsers… whenever that may be?

javasript_toolkit_comparison

Toolkit sites:
Scriptaculous: http://script.aculo.us/
Dojo: http://dojotoolkit.org/
GWT: http://code.google.com/webtoolkit/
jQuery: http://jquery.com/
MooTools: http://mootools.net/
midori: http://www.midorijs.com/

Trend: Horizontal Scrolling

Most people try fitting their design to the width of a standard window size to avoid horizontal scrolling. Nielsen even claims that “users hate horizontal scrolling” , and names reasons to stray away from horizontal scrolling. But then, there are those–I dare say most of them are designers–who do it anyway. So are these guys designing without regard to the usability of their sites, do they just not give a fudge about usability, or are they designing for a situation they feel warrants horizontal scrolling?

Graphic Therapy

Urucu

We Shoot Bottles

Tyler Finck

Click this link for a showcase of horizontal sites The Horizontal Way

The boss has gone crazy!!! Well not really but, the fine folks at Class On Demand have provided us a copy of “Dreamweaver For Designers” training DVD. Usually these cost $199.95 but we are giving it away for free to one lucky winner. Zero, Nada. Gratis.

All you need to do to win this DVD is leave a comment about why you love the UItrends website by February 20th, 2010. Bonus points if you include some areas we can improve, double bonus points to anyone that can spur Sarah Selser to post another big buttons article or tell us what has happened to Chris Farmer.  Sorry but you do have to live in the continental USA.

98060

Congrats to our winner Kim Schaumloffel!!!!

According to my admittedly flawed calculations there are approximately  the same number of articles on website form behaviors as the number of McDonald’s customers served each day.  Speaking of McDonald’s, rather than throwing up a lot of the same info, putting together yet another lame attempt at a top whatever number list, or you wasting your time going through all of these articles, I figured it might just be better to list out some of the best resources I found.  Why? Cause I have nothing better to do and hopefully some of these are helpful or at least inspirational to you.



Trend: Customized Sites for You

I thought about this the other day.

Amazon. Facebook. LinkedIn. Like me, I am sure many of you use these websites often. They are only a few of many, many websites that are excellent and accurate with recommendations, whether it is merchandise or people. For example, I logged into Amazon recently to do some Christmas shopping. Upon logging in, Amazon had recommendations for me based on my previous purchases.

Facebook and LinkedIn have very similar capabilities. Facebook actually scares me sometimes by the timing of its friend recommendations to me. I dreamt one night about an old friend from my soccer team years ago. I could not remember his name; just that he was some skinny kid with long hair. The next day I logged into Facebook and that same guy had friend requested me. Granted, it was not Facebook directly that initiated the contact, but it might have been. Perhaps Facebook subliminally put him in my head and me in his head and then recommended me to him, which then made him friend me. Either way it was a freaky experience.

LinkedIn is also great at finding past co-workers and past co-workers of co-workers, even those you do not want a connection. There is definitely a trend where sites are getting to know their customers more and more to better satisfy them. This makes sense, but it also scares me.

It scares me that they know me so well. Everything I do is traceable by them, from which links I click to how much idle time I spend on their site. What am I going to look like to them in ten, twenty, fifty years from now? Can you imagine all the data they will have on you after fifty years? I doubt Facebook will be around in its current form, but knowing Facebook will have that much data of my life stored somewhere scares me. Should it? Should I be concerned that these sites, along with many others, are tracking so much of my life? Maybe, that’s one of the reasons that sites such as Web 2.0 Suicide machine exist. I haven’t done that yet, and I don’t think I will, but I am much more aware of my actions online than before.

Now, if you will excuse me, I have a battle to fight in Mafia Wars, then order some books from Amazon, see what job Joe Schmo has now, …

It’s the year 2010.  Weren’t we supposed to have jetpacks and flying cars by now? I mean come on, no hoverboards?  No teleportation??

Well, at least UI design is slowly catching up.  The demand for a user interface that delivers a rewarding experience and is aesthetically pleasing has never been higher.  Fortunately, the tools and methods for building a well rounded UI are now very numerous.

Wireframes and Mockups have become a standard in the design process, and tools keep popping up specifically for wireframing.  I recently tried out Cacoo, a new web-based wireframing tool.  I have been using different wireframing/mockup tools for the last few years, like Adobe Fireworks and Balsamiq Mockups, so I had an idea of what I was looking for when using Cacoo.  Here are my main likes and dislikes (besides their pastel based theme… just kidding):

Like: Extensive Library - Cacoo has pretty much every general type of UI component you would want to include and then some in it’s “Stencil” library.  Everything from wireframe components (buttons, text inputs, etc…), to UML diagram assets and flow charts, to user icons (good for story boards) . It also has grouping capabilities like in Balsamiq or Fireworks, which essentially allows you to create your own components from 2 or more simple components.  And, like Balsamiq, it features a “Freehand Wireframe” Stencil, which gives your wireframe an unfinished sketch look… useful for keeping visual design out of the conversation until appropriate.

Like: Web based, Collaborative - It’s nice to be able to access your wireframe projects anywhere, and since Cacoo is built in Flash, it’s highly interactive and doesn’t suffer from browser related inconsistencies (does require Flash Player 10).  They also added a feature that I would have never thought of: real time collaboration.  An entire team can discuss and edit the same wireframe in real time.  I haven’t fully tested this feature out, but it looks very promising.

Dislike: Limited Export - As far as I can tell, Cacoo only exports to a flat PNG format (does not have any layer information), so you essentially just get a screenshot of your wireframe.  Comparatively, the latest version of Balsamiq Mockups has the ability to export to XML as well as PNG.

cacoo

Overall, Cacoo falls in between Fireworks and Balsamiq Mockups in terms of features.  It has a far better library of UI components than Balsamiq, but not quite as extensive set of features as Fireworks, especially the lack of a real free hand draw tool.  It has nowhere near the learning curve of Fireworks, which is a huge plus and I would even go as far as to say that it is as easy to use as Balsamiq Mockups.  The one big thing that Balsamiq has that Cacoo doesn’t is an extensive online community of users and contributers.  There are a ton of free add-ons that can be downloaded at http://mockupstogo.net/.  Also Rich Internet Application gurus , the Midnight Coders have provided a conversion service that creates a full blown Flex application from your Balsamiq mockup.  Pretty sweet idea!

So all things considered, Cacoo is a very solid wireframing tool, and if some of the unique features – like the real time collaboration – prove as useful as advertised, I may be making the switch in the near future.  In the mean time, I’m still holding out for my damn jetpack to show up in the mail!!

Jared Spool is the CEO and founder of User Interface Engineering, a usability research organization. He is a prolific speaker and noted expert in the field of usability and user interface design, as well as the author of many books and most recently "Web Anatomy: Interaction Design Frameworks that Work". You can find more on Jared here.

We asked Jared the following questions:

1. Jared, as CEO and Founder of User Interface Engineering, I have to ask for your opinion on the many terms in use in our field: Interaction Design, User Experience, User Interface Design, Usability, Human Factors, Web Design, etc. Why "User Interface Engineering" and not "User Interface Design" or one of the others?

I don’t think the words are very important. After all, what is marketing? Can you clearly tell me what a marketing person does? I bet, if you were to describe what you think the "average marketing person" did, then showed that to anyone in the marketing department at your company, not a single one would cop to doing what you wrote down. In fact, they probably have as much trouble explaining what "marketing" is as we have explaining what "user experience" is.

And it’s not unique to business. Beyond what licensing regulates, what does a doctor do? What does an artist do? The names are associative to what’s been done, not to any concrete notion of a role or area of responsibility. That’s why territorial arguments are present everywhere.

So, as a new VP of User Experience, what will define you is what you do, the impact you will have on the customers, products, and bottom line of the business. You, and any manager, can define the meaning of your group’s title by the examples of what it does.

So, which term is best? The one you use.

2. I know that you have significant corporate experience. With regard to design (or user interface engineering), who makes the decisions? Who is responsible for the final design? The final color scheme? The information architecture? Input from a variety of individuals is key, but someone must make the final call, and subjective elements can be challenging. After all, someone did create "hot dog stand".

I’ve been a Mac user for two years. Despite 18 years of Windows use preceding that, I’ve managed to successfully put the memory of Hot Dog Stand far behind me. Thanks for bringing it back.

Why are you focusing specifically on aesthetics? Of all the things a skilled visual designer brings to the table, aesthetics are the least important. And of all the things a team needs to focus on to create a solid design, aesthetics are pretty low on the scale.

You don’t have to go any further than Craigslist to see that you can build an awesome experience with low-grade aesthetics. And history is littered with the carcasses of high grade aesthetic products that weren’t useful, usable, desirable, effective, or delightful beyond the initial exposure.

A skilled visual designer will certainly add aesthetics to the solution. But, if they are good at what they do, they’ll focus on the visual priority and communication of the information. Any aesthetic decisions must be in the service of that visual communication. If it communicates effectively, it’s a good aesthetic choice. If it doesn’t, it isn’t, no matter how sexy it looks.

So, maybe the least important person in the organization should decide on aesthetics, to allow the important decisions, surrounding the overall experience to be decided on by people who know what they are doing.

If the "head of design" is focused on making the call on aesthetics, I’d be willing to bet the organization produces crap for products. There’s about 99 things the head of design should be putting ahead of aesthetics.

Probably the first thing I’d recommend any "head of design" to focus on is the feedback mechanism that the organization will use to determine if the design is working for them. How will they tell, at any stage in the design process, whether the design is working. Our research shows that organizations with a strong feedback mechanism will rely on that to make their ultimate decisions, not any single individual. This will make it much easier to push good design forward faster.

The second priority of a "head of design" is to help the organization realize a solid experience vision. The vision is the stake in the sand that everyone walks to. When a solid experience vision — one that answers the question, "What will the experience of using our design be like five years from now?" — is omnipresent in the organization, part of the organization’s DNA, then all decisions gravitate towards that vision. Each person faced with a decision that impacts the design can ask, "Is this solution getting us closer to the vision or farther away?"

The goal with having strong feedback and a solid vision is to reduce the need for centralized authority to make all design decisions. In an organization of any but the smallest size, centralized authority becomes a bottleneck, losing all effectiveness. Empowering solid design thinking throughout the organization is far more effective, though a hard challenge (especially when such thinking hasn’t existed before).

3. Teams seem to be looking for cheaper and faster ways of validating designs. Usability is often perceived as being very expensive. So, does usability testing need to shed a few pounds? Let me just ask outright: usability testing: hot or not?

Usability testing, in its most basic form, costs basically nothing. It’s a simple process. You sit next to someone and watch them experience your design.

Any associated expense comes from adding rigor to the process. Rigor doesn’t have to be expensive, but it can be.

Think of it like painting a house. One can do it practically themselves, saving a lot of money, but it will probably take a lot of time and, without the proper tools, not produce a high quality result. But it’ll get the job done.

The question is how much is quality and time worth? There is a relationship to how much you invest and the quality and speed you’ll get back. Buy some ladders, get better quality brushes and rollers, higher quality paints, and a little help from some unemployed college students, and you now can deliver a better quality paint job.

The same is true with usability testing. Smart investments improve the quality.

But, here’s the thing that makes it different from painting a house: It may be a mistake to hire someone to do the usability testing for you.

The primary benefit of any usability testing project isn’t the report at the end or the list of recommended changes. Our research shows it’s the exposure the team has with observing real users work with their designs. The more exposure, the better the products that come out.

If you hire out your usability testing, well, it’s sorta like hiring out your vacation — it gets the job done but you don’t quite get the best experience.

So, the biggest investment in usability testing isn’t the money required — that can be pretty inexpensive. It’s the time. Our research shows that the teams at the most effective organizations spend at least two hours every six weeks watching users interact with their designs. That’s every member of the team.

And that experience pays for itself very quickly. The team now knows what it’s like to use the design. They know what changes had the impact they’d hoped, and which ones fell flat. And they see how small, nagging problems can add up to ruin an otherwise innovative solution.

It’s very cheap to get started with testing, if you’re willing to make the investment.

On the other hand, if you’re really concerned with expense, I recommend you build a completely crappy product. That’s always going to be the cheapest solution. (And, interestingly enough, if you want to make it really crappy, you can do it really quickly too.)

4. Traditional software teams typically consist of architects, coders, testers, managers, and writers. Should designers (or user interface engineers) be the sixth element commanding an equivalent slot, or should they be called in to service the core team on an as-needed basis? Are user interface professionals someone you take home to mom, or a cheap booty call?

I don’t know what a "traditional software team" is. I’ve now worked with dozens of organizations, each with dozens of teams. They are like snowflakes. No two are alike.

In importance, the skills on the team far out weigh the roles of the individual team members. Teams developing web sites need solid information architecture skills. However, there’s no requirement that an information architect be on the team. Teams need solid interaction design skills, but they don’t need an interaction designer.

The question isn’t "should a designer be on the team?" The right question is, "does the team need solid design skills?" The answer to that question is a resounding yes, if you want to end up with a high quality design.

Who on the team should have these skills? Everyone. The best teams focus on cross training team members so they are always improving on the necessary skills. This way, the team becomes more flexible and agile, ready for any challenge the organization throws at them.

Focus on skills, not roles, if you want to produce quality results.

5. If you could name your favorite current trend in Web design, what would it be?

Asking me for a favorite trend would be like asking me for a favorite compass direction.

Page 1 of 912345...Last »