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

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.

Super Bad

This is a real website.

intense-pulsed-light-IPL-warning-danger-sign-specifications

Here at UI Trends we love Santa about as much as we love design and came up the following list. Please feel free to add any that you think we may have left off.

  • 10. Santa knows when people have been naughty or nice.
  • 9. Santa’s work transcends language and geography.
  • 8. Santa and his team have strong domain knowledge.
  • 7. Santa loves his work and doesn’t do it for the money.
  • 6. Santa uses specialized tools to get a project done.
  • 5. Santa has a fondness for #ff0000 and #ffffff.
  • 4. Santa has no problem pulling an all nighter.
  • 3. Santa is extremely good at managing very very large lists.
  • 2. Santa listens attentively and understands what people really want instead of what they say they want.
  • 1. Santa works well under pressure and seemingly impossible deadlines.

The fine folks at Class On Demand have provided us a copy of “Designer’s Guide to Photoshop” training DVD. Usually these cost $79.95 but we are giving it away for free to one lucky winner.

All you need to do to win this DVD is to leave a comment on this post by January 15, 2010 about why you should win and how this training will help you. That’s it… also you have to live in the continental USA because I’m paying the shipping out of my own pocket and my pockets are very small and cheaply made.

dvd

The contest is now closed. Congrats to the big winner and future photoshop pro Steven Rogers!!!!!!!!!

This post is a review of the Apple Magic Mouse.

I recently retired my trusty dual G5 Mac aka “Old Ironsides” in favor of a brand spanking new 27 inch iMac. As I bask and possibly self tan off the glow of this incredible monitor and remind myself to blink as to not burn out my retinas, I can’t believe I’m actually about to type this, but the display isn’t actually my favorite part, I actually expected the display to be cool. I wasn’t expecting the new Magic Mouse to be all that magical, as I have a natural distaste for wizards, magicians, and that other magic spelled with a K.

Before I continue, I feel inclined to mention that according to one of the deleted comments in my last post, I “might possibly be on crack” but I assure you that the Magic Mouse is totally awesome, almost as awesome as crack.

The Magic Mouse looks slick and futuristic like everything else from Apple (unlike crack) and has a nice weight that makes it feel almost natural in your hand or as natural as something manufactured out of metal and shiny plastic can possibly be (unlike a crack pipe). Interacting with the Magic Mouse is more like using a touch screen iPod touch or iPhone, you can click or even right-click without any actual buttons (not sure how that is even possible) zoom the entire screen, effortlessly scroll up/down/left/right and you can even go forward and back in Safari or iPhoto with the swipe of two fingers. Using the Magic Mouse is what I assume being on crack is like, you get to do things that make perfect sense to you but is completely illogical to everyone else, you know the rest of the squares with their normal mice.

And now just like crack, using the Magic Mouse has become addictive to me. Unfortunately the monkey is on my back I can’t get it off and I’m going to be stuck using my old optical mouse when I get to work on Monday with it’s annoying red glow and clunky wheel. But when I get off of work, trust me, I’m going to run right back to my Magic Mouse and like the saying goes “you ain’t catching no crackhead!”

Page 1 of 812345»...Last »