On User Experience, Prototyping and Wireframing

To be a designer of websites and services requires a lot more than just Photoshop skills. Teaching a class last week made me realize that things that are clear to me might not be so clear to everyone else. Well, duh.

The three things that got confused last week a lot were User Experience (a.k.a. UX), Prototyping and Wireframing. I’ll try to clarify here which is what is which and where and why. Yes, it’s very confusing.

User Experience Design

UX can be applied to almost anything at all, not just websites. An object. A service. An application. A meal. You name it. And it is a very valuable asset. Just ask Apple or Nokia. The former gets it, the latter doesn’t as of yet.

UX design is done by people called Experience Designers, XDs. Or by You or plain ol’ me.

Very Often UX is confused with prototyping or wireframing a website, or both.

Wireframing

Wireframing something is designing an application’s or website’s functions and connecting them to components. Components are generally buttons, scroll bars, lists, etc. on pages, forms and pop-up dialog windows.

Wireframe models don’t actually look like much. They’re more of a study of a user’s journey into a website or service.

There are plenty of wireframing tools available on the net. I recommend one should start with Balsamiq to get the basic idea of wireframing.

Prototyping

Prototyping a website, Rich Internet Application or any of the sort usually means presenting the client and/or manager a working i.e. clickable model of the product. Generally the graphic design has been applied with the wireframe components that are now linked to faux functions. It looks and works like the real thing, but it’s not. To make a prototype does not require a single line of code.

You can easily prototype almost anything using Photoshop or Illustrator files and compiling a clickable model with a number of auxiliary tools. Some paste stuff into PowerPoint or Keynote and create links from one slide to another.

One solution is my favorite app Adobe FireWorks. It’s essentially a multi-page graphics app that generates HTML in the background without user interference. It outputs linked HTML or internally linked PDFs, which can then be viewed by clients. Adobe TV has a very nice tutorial about prototyping with FireWorks.

One issue I’ve had to stress with clients is that the prototype is not the product. The work on the product begins when the client or manager approves the prototype. The other main issue has been not to let anyone add features to the product after the prototype has been approved.

Conclusion

For most creatives coming from the print world UI Design, Wireframing and prototyping seem like a lot of extra work. Truth is, you’ll be working a lot less if you do the base work properly and you’ll be working on the things you should be working on. Instead of doing endless corrections upstream, which just sucks.

– Until next time, blog on.

Is It Time for FireWorks?

I’m a big fan of Adobe FireWorks (formerly a Macromedia product). Lot of the creatives I meet daily have very little or no knowledge on it. Still many of them could really benefit from it doing web/app design or just simple graphics stuff for online purposes. For those who wonder, Smashing Magazine has a very nice article on FireWorks.

The Future of Flash on Desktops Mobile Devices and in General

This issue is something else. Steveattacking Adobe for laziness, Adobe defending itself and the Flash platform, hordes of nerds and business people on barricades. After  Apple announced the iPhone 4.0 SDK, some have even resorted to emotional tirades of that I refuse repeat or link to from my blog.  I’ll just say that it’s been like listening to your mom and dad arguing in the next room.

The lowest common nominator seems to be that a lot of people offer their opinions as facts. Here’s my opinion based on facts I know and deem reliable.

First, I have to say that I do consultant work for both companies. And I make money doing stuff with Flash. Neither of these isn’t going to magically disappear in the near future. Writing this entry isn’t going make anyone mad at me and I’m not after huge hit rates, since I don’t have advertisements in this blog.

From a technical point of view some things are very clear:

• FlashPlayer 10.0 performs more slowly on Mac OS X than it does on Windows
• FlashPlayer plug-in sometimes makes some browsers crash
• FlashPlayer uses more power than other players, especially during video playback

FlashPlayer version 10.1 seems to address these issues, but to what extent, I really have no idea yet. Testing the 10.1 public beta confirms better performance and lower power consumption. Stability issues are a blur, since everything is still in a beta stage. Adobe will ship FlashPlayer 10.1 along with Creative Suite 5.

I understand fully that Adobe spent a lot of money acquiring Macromedia and the Flash platform along with it (or if you prefer, the other way around) and expect their efforts to pay off. They have developed a bunch of very interesting programs for designer/developer workflow like Flash Catalyst and Flash Builder. I bet they’d really hate to see Flash platform lose ground now.

Adobe is not in the FlashPlayer business. It’s in the creative software business. Apple is in the hardware and software business. And they both sell services too. Apple is very big these days and really successful. Adobe is a lot smaller and doing OK as far as I know.

Some are calling Apple evil and unfair. But Apple owns its brands, platforms, services (online stores) and everything else. They do have every right build any fence they legally can around their property.

Adobe put a lot of resources into iPhone development and now they are understandably upset. But in business you assume a certain amount of risk. The uproar seems also a bit overt since the iPhone feature is just one feature in the huge CS5 package. I’m very surprised that Adobe PR didn’t catch the inapproriate tweets and blog entrys. Now the bloodthirsty media is having a field day, a bunch of lawyers are probably making money off it.

I only wish that Adobe would fix FlashPlayer and make up with Apple. And we could all just try to get along.

-Tommi

Adobe Creative Suite 5 Launched

Adobe announced Creative Suite 5 today. Lots of cool stuff there. You can watch the launch event and find out new features by product. Have fun!

-Tommi

Adobe Creative Suite 5 launch date April 12 2010

You can sign up for the event at http://cs5launch.adobe.com/

A Fix for Another Adobe CS4 Licensing Issue

May I begin by simply saying “Aaaaargh!”

DreamWeaver, Photoshop and in fact all of my Creative Suite 4 apps refuse to start and return the error “Licensing for this product has stopped working” ect.

This time the error code was 150:30. Beats me what that means.

Yes, the licensing issue returned and again apparently for no good reason. (if there is a good reason for it, pray tell me)

With a lot of profanities streaming from my mouth I started once again googling for help. I found the same Adobe support docs as previously and repeated the steps like a good citizen that I am.

None of the Adobe Support docs did anything to help, but an entry by Brett Thompson in the discussion area gave the solution:

Navigate to folder: /Library/Preferences/FLEXnet Publisher and delete the contents.

For me, this did the trick. I wish the solution would be posted in the official support area, since Brett mentioned the tip came from Adobe support person.

I even saw a advice to update Adobe Media Player in order to fix the issue. Seems a bit far fetched. ; )

So far stuff seems to run OK. Seriously considering rebuilding my workstation from scratch. And believe me, I do not relish this idea.

Until next time, Licensing, my arch nemesis.

– Tommi

P.S. Adobe MAX online keynote registration is alive (finally). I got mine.

Problem solved: Snow Leopard and CS4 updates

I had a very annoying week, install-wise. I had upgraded my demo Mac (a gracious 15″ MacBook Pro loaner from Apple) to Snow Leopard 10.6.1 and ran CS4 happily as ever.

One fine morning there was an error: licensing had stopped working. I googled the error message and got referred to Adobe website support section, where I learned of multiple solutions depending on the error code. Mine was nr 5, BTW.

I downloaded the fix and did as told. The licensing thingy now requested my serial again, so I whipped out my TLP license codes and pasted them in. And found that they were invalid. No matter how I did it, the license would not work.

I sort of knew I had to reinstall everything from scratch. I proceeded to remove CS4 from my Mac completely and reinstall the whole CS4 Master Collection from the install media.

Installer requested my license code and now also accepted it. So far so good. Installation went OK. My hopes were up. I even went to see a movie and decided to continue with downloading update patches afterwards.

The updates for CS4 Master Collection were about 1.1 gigs, but no worries, since I have a very good broadband connection. Updates started to install, but a number of them failed. After Effects 9.0.2, SoundBooth 2.0.1, Version Cue Server 4.0.1 and something called CSI CS4 (probably nothing to do with the TV Shows) all reported errors.

All apps would boot and run, but I just could not update them. I went through the normal routine of Shift-booting and repairing privileges to no avail.

I started tweeting and googling. Adobe’s very own evangelists Greg Rewis and Jason Levine were kind enough to offer assistance from a beer tent in Munich (Sunday, Oktoberfest, Germany, you know). I beat my Lederhosen-toting friends to it by doing app-specific googling and sure enough, CreativeCow had an answer. If this worked on After Effects, it just might work on the other apps as well.

Apparently there is a hidden folder/directory inside Applications folder called .AdobePatchFiles. Inside lies a large number of files with unintelligible and very long alphanumeric names. I removed them and ran the updates again and they did their job.

Here’s a quick overview of the operation:

1.To access the hidden folder Go to Finder, press Command-Shift-G

2. Type or paste the following text: /Applications/.AdobePatchFiles/ and hit Return or Enter

3. You now see the contents of the folder. Delete the contents.

4. Run application Adobe Updater again.

I’m not sure who or what to blame for this. It’s just one of those things that come along living and working with digital stuff. Sincere thanks to all dudes and dudettes who came to my assistance.

Keep on blogging, amigos.

-Tommi

P.S. That was first real entry in this blog. I’ll try think of something fun for the next one.

CS4 demo at Sovelto

Yours truly will throw a Creative Suite 4 demo at Sovelto, an authorized Adobe training partner company on Friday Sep 18th.

Adobe’s very own Mikael Ahlavuo will also be present with Sovelto’s Photoshop sensei Juha Laamanen.

Hope to see a lot of people there.

– Tommi

Bay City Rollers

There’s no sensible reason for this post. ; )

Ahh, yes. The iPhone…

Just testing how many tupos I can make with the iPhone.;p not that many, I guess.