Sometimes, I work for hours on end into the night, trying to get an assignment or side-project finished. And I start thinking about all the other people I know…who are NOT working at this hour. They’re doing something fun or, better yet, they might be sound asleep. Then I start thinking about all the sleep I will miss out on, how I have to get up early the next day no matter what.

And pretty soon, you start going crazy. Too many things to do. Hardly a day of rest in this economy, and the money goes towards paying bills anyway. So what’s the point?

Of course, this kind of thinking should be prohibited as it gets you nowhere fast. As a matter of fact, that’s exactly how you will and can self-induce depression and anxiety. Especially if the majority of your social interaction takes place between you and the computer.

The best thing for me to do in situations like this — no, going to the beach for an afternoon is unfortunately not an option for me — is to listen to “specific music.” This might ring true with some of you who are in similar situations. However, the “specific music” I listen to has to do the following:

• Don’t involve my mind into anything that requires thinking about it. I already have to focus on my work, so it has to be background music. If it’s familiar, even better.
• No lyrics. But this rule may be broken any time. If there are lyrics, it has to be something “abstract” and familiar. For me, that would be the (mostly) British progressive-rock band YES, especially the “Highlights – The Very Best Of Yes” album. Nothing that makes me go, “What did they just sing?” Just some lyrics that I’ve heard over and over already.
• Repetitious motives work extremely well. Whether you prefer progressive rock, jazz, math rock, trance, classical or psychedelic, I have found that anything with repetitious musical themes works really well to calm down my subconscious thinking. Somehow, it helps my mind know what to expect. Unlike the work that I do — in which a project can be cancelled anytime or the requirements might change and the 4–hour GUI design I finished after midnight might end up in the trash — a repetitive melody or riff structure will involve that part of my brain and lead it elsewhere.
• Volume is important, too. Obviously, if you work by yourself, that might not always seem like an issue to you. However, in my case (and you may be totally different), too much music that’s too loud will actually result in a headache. On the other hand, if I can barely hear it and have to strain my auditory senses, I end up concentrating on that — instead of my work. So find what works best for you, and feel free to invest in a pair of comfortable headphones.

So, having said all that, you’re probably wondering, “What should I listen to?” There’s no right answer, of course, that would work for everybody. Each one of us has different tastes in music, and there might be some overlap, but hardly ever do we agree on much.

Without hoping that anyone out there would agree with my musical choices (but they work for me), I’m going to list a few of my favorites. At any rate, I would love to hear from you. Tell me what works and, if you could, explain to me why you think it keeps you sane, makes you more productive, etc.

Yes – “Highlights – The Very Best Of Yes”

Carbon Based Lifeforms – anything, but in particular the albums “Hydroponic Gardens” and “World Of Sleepers”

Ulrich Schnauss – everything, but if you want specifics, how about the albums “Far Away Trains Passing By” and “A Strangely Isolated Place”

Peter White – most everything, specifically “Glow,” “Caravan Of Dreams” and “Reflections”

BrainSync (Kelly Howell) – just about any of their subliminal albums with a topic of interest (since I don’t smoke, the smoke cessation program wouldn’t do much for me and Deep Sleep just doesn’t seem appropriate for some reason)

Tags: music for programming, music to program by, music for developers,

More specifically, it depends on the web browser. According to Eric Puidokas, who did some z-index testing in a number of web browsers, “The results show IE, Firefox and Opera all use a 32-bit signed integer to store the value of z-index.”

From Eric Puidokas’ web site.

Great job! I’m certainly hoping that I will never need any z-index attributes to go that high, but it’s always good to know about the potential possibilities.

Not that there is anything wrong with scrolling through 44 jQuery tab examples, but — to be honest — it all becomes a bit of a blur, very quickly. To me, the real nuggets of useful information come in the form of shorter blog articles, usually focusing on one issue at a time, offering perhaps a handful of links to related resources.

So without any further ado, here are some online destinations that I have recently encountered and enjoyed because of a) the down-to-earth information they have to offer and/or b) the fact that they are rocking-and-rolling pretty much on their own:

Dew Lilly (Anne) – Freelance Web & Graphic Designer / Flagstaff, Arizona

http://www.website-and-graphic-design.com/blog/

Laura Spencer – Freelance Writer / North West Texas

http://freelancefolder.com/how-to-be-genuine-and-nice-in-a-web-20-world-and-why-its-important/

http://www.writingthoughts.com/

The Get Smart Blog (Bridget Ayers) / San Diego, California

http://www.thegetsmartblog.com/

PS: I just realized that all of those blogs are primarily written by women. Hmmm, not sure why that is, but just in case you were wondering, I do read tons of other blogs about web design, web development, Flex technology, database programming, CSS techniques and graphic design that are written by men. The ones I’ve listed here are just the most interesting that I’ve read in a while, as of right now.

If you like the general theme, the color scheme and the overall graphic design, there is an icon in there for just about everything. The author of these icons states that he was particularly inspired by three other icon sets:

1. Drunkey Love
2. Silk Icons
3. Fugure Icons

From the 512 Pixel LED Icon Set web page:

Some may ask: “How is our icon set different?” Drunkey’s, James’ and Kamiyamane’s icons have a total number of 3044, ours – exactly 500, but all original (only the most frequently requested variants are included). Led Icons set is not yet complete – if any important icons are missing, let us know – we’ll include.

Free Download at http://led24.de/iconset/

You know the scenario, right? The development team (which, in a typical small business scenario does not include any user interaction designers) works like crazy on a web application for about a year. They implement cutting-edge functionality, over-the-top back-end contraption . . . and all kinds of “interesting” ways to use the same button for three different purposes, dependent upon the step in the workflow process, the same button will do three different things. Cool, eh?

Companies that focus on usability, human factors and graphical user interface design

Good web application GUI examples

Around that time, they show the web application to the boss, who in turn wants the Customer Support department to see it, too. Oh, and then Sales & Marketing join in as well. That’s usually about the time they realize that the end user documentation is missing.

If you’ve ever been in a situation like that, you probably know what’s coming. As soon as real people see the web application, they are going to have questions. By golly, you know, even though everything was supposed to be intuitive and straightforward, the people over 30 just don’t seem to get it. They can’t figure out that right-clicking that one icon (looks like a tin can but means ARCHIVE) is what you’re supposed to do on that one web apge. And so forth and so on.

After that, one very embarrassed development manager has a meeting with the boss. In a very diplomatic manner, the boss tells the development manager that “the end user experience needs to be finetuned a little bit.” The development manager then starts looking around for someone (anyone, really) who can define usability and hopes to have all the problems solved by the time he finds such a person. Perhaps even post an ominous message to that effect on craigslist, eh?

Back in the real world, the web application completion date gets delayed. Developers and their managers begin to stress out. Graphic designers get hired to fix something that nobody can explain in actual words; usually, somebody will just point at the web application and say something along the lines of, “We need this to work better.”

Inevitably, the budget for the project needs an increase, because now things need to get fixed and revised and re-tested. If everything goes well, somebody comes in and advises the team on usability, end user eye movement, GUI standards and a variety of issues involving white space, targetability of graphical user interface elements that need to be clicked, consistent fonts and a global color scheme.

However, the likelihood that the average small business in the United States ends up hiring someone like HFI, EffectiveUI or Cynergy Systems seems very small — due to the seemingly high cost associated with such companies. (This is by no means a scientific assessment, but based on the number of HR related web applications I have seen, tested and experienced, this conclusion seems very reasonable.)

Most lilkely, somebody in the organization knows someone who has done something like this before — or worse, they know someone who knows someone else. As a result, a lot of usability and graphical user interface work goes to people who don’t necessarily do such work on a regular basis. Quite frequently, this kind of work goes to ad agencies and creative design outfits who know all about dazzle but very little about the particular workflow of the web application.

In the end, usability and graphical user interface work gets a bad rap. Developers tend to get even more frustrated, because the decision to make all buttons blue (instead of gray) does not seem to solve the actual problems the boss wanted to have fixed. Even worse, some smooth-talking creative designers find a way of justifying almost everything with the right spin on it, and when the boss buys into a series of such arguments, the development team feels as though all hope is lost.

So much for the typical bad-case scenario. Now let’s take a look at the flip side of that coin.

If you end up hiring someone who knows what their doing and/or has done similar work before, chances are, the developers will have to re-program some of their work, but the reasons for doing so will actually be the solutions to the overarching problems.

For example, the boss, the manager and even the developers might agree that the order process is cumbersome and confusing. So they look ath the one web page on which all of this takes place. They have some very precise questions for the usability and GUI expert, and they want to know whether the buttons should be in a different color, and would it make more sense to have the drop-down on the left side or on the right?

OK, that’s good. People are thinking about stuff. Unfortunately, in some cases it makes absolutely no sense to focus on such a small aspect of the entire web application. Chances are — and this is not meant to be offensive rather eye-opening — if we’re worried about this sort of thing, we’ve overlooked something else entirely.

Don’t get me wrong. I’m not writing this with an “ I KNOW IT ALL AND YOU KNOW NOTHING” attitude. For many years, I used to struggle with myopia in the sense that isolated web page (or software screen) designs were thrown at me out of context. Only when I stepped back and worked through the way the entire web application (or desktop software program) was supposed to work did I have an AHA moment. Most of the time. Not always.

And, yes, I still struggle through the GUI design and usability process. Things change all the time, and we certainly don’t ever want to take anything for granted. And you never really want to be in charge of your own web application (doing the usability, the GUi design and the programming all by yourself) — that only leads to system-centric design.

In a nutshell, realizing that it takes an outsider to take on those tasks is a critical first step to getting things right (or at least righter). And by outsider, I’m not necessarily talking about someone from a third party. It can absolutely be a staff member, just not the same staff member who has other stakes in the development process (or is the lead developer of the project).

Such findings have been previously documented by others who deal exclusively with software design and usability. If my memory seves me correctly, even well renown usability expert Jakob Nielsen has brought up this particular point on a number of occasions. So have others, but let’s move on.

If we allow an outsider to take a look at the workflow — and what we’re ultimately attempting to allow the end user to accomplish — we will often find that, in an effort to get things done and do those things in an awesome way, we ended up over-developing. I’m not saying we developed too much, but I am suggesting that we typically end up being too clever for our own good.

For example, consider a simple HR process in which the web application needs to evaluate an employee’s performance. In this web application, you get to evaluate a number of performance factors (such as timeliness, accuracy, working with others, etc.). You rate an employee on each individual performance factor, and to get from one factor to another, you click the NEXT button.

Then, when all factors have been evaluated, and there is no more next factor to advance to, you get to mark the perfromance evaluation as “ready to meet in person.” Only now, the clever web application has switched the NEXT button ot a MARK AS READY button. Sure, it might actually be a totally different button (from a developer’s point of view), but as far as the end user can tell, the buttons are in the same place, look the same and only one of them shows up at a time — so why wouldn’t it be the same button?

Now presume the meeting process is over and the performance evaluation can be taken to the next level. Yes, you are right: The developers changed the button again, and now it states COMPLETE. Pretty clever, eh?

The point of this little example is that sometimes, as developers who are knee-deep involved and invested in the development, worrying about deadlines and project milestones, we can easily get too close to the technicalities and the functionality of a web application. All the pressures tend to make us forget that not everybody is as computer-savvy as we are, and somebody else might just not get it (especially if the end user only uses the web application a couple of times per year).

To follow up on the scenario I mentioned above, it was actually much more helpful (to the end users) to break up the factor evaluation part of the performance measurement web applciation into three separate web pages (or screens):

1) evaluation

2) meeting follow-up

3) completion

More work? Yes, if you consider that an existing web page had to be broken apart into three separate web pages. More satisfaction? Yes, even the boss was happy and found such an approach reasonable. Could this have been avoided? Absolutely.

Once again, the point here is not to belittle web application developers who have to call in the GUI Police after the fact. The point is to convince stakeholders to consider usability and graphical user interface design up front.

1. Web application developers, web designers and UI experts need to be involved in the design and development process from the start. (Let’s add a member from the Documentation team as well.)
2. That’s not to say that they should be cross-trained in each others’ areas of expertise; it simply means that they need to run things by each other and work through the planning phases together.
3. As ridiculous as this may sound to some people in 2009, do some user-centered research upfront. Even if your product enters Version 5, you might want to do a reality check and find out whether the old, etsablished workflow still applies or not. If possible, invite a few local clients to meet with you and talk about the ways in which their people use the web application. Call it a focus group and get the boss to pay for drinks and donuts.
4. Even more ridiculous, come up with paper prototypes, demonstrating the workflow and the key elements for each step of the way. Draw these by hand until you’ve run them by a few people. Use tape to add (removable and/or flippable) dialog boxes. Hang them up on a wall or a white board, and walk through each step with the product developer or a subject matter expert. Meet in groups or with one individual at a time — as long as you find out what works, what is expected and what might be unacceptable.
5. Don’t ever be afraid to ask questions and try out new things. If you’re not sure about something, ask now. If you’re going to commit a blunder, do it now during the planning and prototyping phase. It will be cheap and easy to rectify. (Committing those blunders during beta testing is going to cost money and cause a lot of stress, but that’s still better than fixing and revising things after the official product release.)

While most of my observations and explanations may come across as common sense to most of you, dear readers, I am hopeful that there is a hidden nugget in all of this for one or two of you.

Perhaps I might be forgiven for being somewhat opinionated about how to be n effective usability & GUI expert by listing a few additional ideas about being (or becoming) a usability & GUI person in general.

• Pay attention to the way software works — or deosn’t. If something works well for you (for example, Microsoft Word 2003), try and figure out why it works. If something annoys you (for example, Microsoft Word 2007), on the other hand, try and figure out what it is that makes it hard to get things done. Most of all, nurture ideas about what you could do to improve the software.
• Read, read and read. Get your hands on books by software design evangelists, usability experts, human factors experts and others who are engaged in making software and web appications work for the rest of the world. A few names that come to mind are JoAnne Hackos, Robert M. Gagne, Jakob Nielsen, Alan Cooper, Kathy Baxter, Donald A. Norman, Deborah J. Mayhew, Patrick W. Jordan, etc.
• If you don’t have easy access to any of their books, look up their web sites, search for podcasts, find their videos on YouTube or just simply go to town on Google.
• Find a mentor. If any usability or GUI authorities hold workshops, seminars or give keynote addresses near you, attend. It’s also a good idea to put your ear to the ground and find out who’s considered an expert in those fields in your geographical area. Perhaps you could meet up with one of them for occasional chats or visits. Perhaps they would allow you to call them (or send them e-mail messages) once a month to find out what’s new in the field?
• Volunteer to be involved in product reviews at work. Or jump at every opportunity to conduct usability testing (with actual end users) or participate in reviews. You may not always have a lot to bring to the table (especially if there already is a designated usability expert), but you will certainly learn something new every time you engage.
• Take screenshots of good examples. Start your own collection on flickr or photobucket. Give credit where credit is due, and cite the sources (you will be glad you did when you finally find a good use for one of the design approaches you saw several months ago).
• Participate in GUI and usability discussion on message boards, join relevant groups on LinkedIn and on Facebook. Listen to others. Follow the links of those people who seem to have the best comments. Ask for follow-up clarifications if somebody mentions something you’ve never heard of.
• If at all possible, get yoru hands wet on a few freelance projects (if you are a full-time employee somewhere else). Don’t worry about the money (yet). Try and find someone locally, so that you can meet with them in person to discuss their GUI & usability needs.
• Unless you know how to use Photoshop (or something just like it), find a graphic designer with whom you could collaborate. Ten out of nine times [sic] it is important to show your clients what you mean by mocking up a few examples.
• Most of all, don’t have an IT’S MY WAY OR THE HIGHWAY attitude. Almost every situation involving GUI design & usability advice requires some sort of compromise. Perhaps it’s impractical to re-program the entire web application, and you need to make do with what you have. You’re going to have to negotiate with project managers, developers and CEOs. Be tactful. Make your point, support it with evidence from current studies and tests, and then present two or three solutions in such a manner that your clients can gracefully decline Option A but still feel in control when accepting Option B or C.

Companies that focus on usability, human factors and graphical user interface design

Links to various companies that promote usability, human factors, graphical user interface design and such in a good way:

Human Factors International

Jakob Nielsen’s Web Site

Nielsen Norman Group

EffectiveUI

TandemSEVEN

UX Roast

Cynergy Systems, Inc.

Web application with good GUI implementations, resources, etc.

Examples of web sites and web applications that have implemented best practices in terms of usability, human factors, graphical user interface design and such.

WebAppers

User Interface Resource Center

Envato

Yahoo Design Pattern Library for GUI Developers

AudioJungle

Good.is

Digitalmash 

CollabFinder

Postbox 

RedBrick Health 

GUI Design & Prototyping Tools 

Having been previously self-employed, I’m currently considering the idea of building a close-knit network of like-minded web professionals.

This would not be a new company but rather a loosely connected circle of individuals who already work on their own but sometimes need help to get projects done. Everyone brings in their own business, but if you need resources to tackle the work, ta-dah, here we are.

Personally, I only have a few clients with sporadic work at the moment. Then again, I am only doing “my own thing” on the side. However, I have had to turn down larger projects, too, because I simply didn’t have the time and resources to commit to something of a larger magnitude as a moonlighter. 

So, the goal here is to help each other out with various projects and identify key solution providers for graphic design, web programming, Flash development, database maintenance, GUI design, sales, print publishing, marketing, documentation, SEO, RIA, etc.

Ideally, this group of collaborators would also live in relative proximity to Lehi, Saratoga Springs, American Fork, Draper, Sandy, Bluffdale, South Jordan (give or take a ZIP Code or two).

Each individual would remain “as is” (e.g., small business, DBA, LLC, freelancer or whatever the chosen status) but would also be ready, willing and able to help out with other people’s projects.

Ideally, the members of this group would bring in new business and consider staffing the various roles from within the group first and foremost.

Requirements:

• This requires commitment. No fly-by-night or “let’s try this for a week” attitude. Must have a few projects under the belt and be willing to show some professional examples.
• Work must be of professional quality. We’re not talking award-winning here (although that would always be a bonus), but the fruits of your labor should be professional and demonstrate your abilities.
• A sense of humor. Personally, I do get down to business and work long, hard hours to get the job done. However, if I can’t work with people who enjoy life and like to laugh every now and then, I might as well join a corporate environment. If you feel the same way, read on.
• Honesty. We all want to make money, and the most efficient way to do that (in my opinion) is to produce good work, follow through on commitments to clients and do what you say you will do. Slacking off and missing deadlines is the death knell of many consultancies. So unless you’re prepared to put in an honest day’s work and stick to your commitments, I’d rather pass.

Other than that, I am simply looking for one or two collaborators in each of the following areas:

Web Design, Web Development, Web Application Development, SEO, Web Marketing, Database Design & Development, Flash Design & Development, Valid (x)HTML, Valid CSS, Rich Internet Application Design & Development, Graphic Design, Graphical User Interface Design, JavaScript Development, CSS Development

Interested? Ideas? Connections? Send me an e-mail message to webgyver [at] webgyver [dot] com

May I introduce to you: jPlayer by Happyworm (who cites Mark Boas, Mark Panaghiston and Silvia Benvenuti as the essential key players in the development of this super awesome multi-media jQuery add-on).

Don’t get me wrong, by the way. I didn’t mean to say that the jPlayer jQuery MP3 player plug-in is a simple thing. It just seems so simple, and like all things that seem simple, there’s a ton of work and thought and sweat that goes into it.

In the end, the easier and simpler it looks to the people who will be using it, the more work it requires to craft it.

OK, but rather than gushing on and on about the many possibilities and the various configurations of jPlayer, please go and check it out yourself at the jPlayer demo page. All I would like to say is that several ideas came to my mind immediately when I found out about jPlayer:

• Build audio training directly into web applications
• Finally add audio jukeboxes in a straightforward and stylish manner to all those band web sites I’m working on
• Provide audio annotations to blogs and photo web sites

One caveat, though, just in case you’re picky about Flash or the Flash Player: Yes, there is invisible Flash involved. You need to be able to store and access SWF files on your web server. That’s nothing fancy, really, but it might be a hassle for the 1% or 2% or Internet users who do not have the Flash Player installed on their systems.

And now, dear reader, if you’d please excuse me, I have some development tests to do, involving MP3 audio.

What’s so amazing (to me) is that :

1. It is simple
2. It works
3. It shows you ho the E4X syntax works
4. It does some extra stuff on top of that
5. Michael Fitchett is providing the source code for all of that

The majority of experienced Flex developers agree that E4X is the best format to work with XML data in Flex. Unfortunately, if you’re trying to find code examples of how to make that work, you can spend hours on end to find what you’re looking for. And even then, all you get are random snippets with partial solutions.

Thanks to Michael, I was able to finish a personal project (trying to learn how to work with E4X so that I’m prepared when I take on actual XML projects in the future). In the end, it was all about making a couple of syntax changes . . . and magically, everything began to work.

However, unlike some of the people I sometimes work with, I would never say, “Oh, was that all?”*

I am very grateful for the example and the inspiration.

*Have you ever worked on somebody’s computer to fix an annoyance? Or look at someone else’s code to get them over a hump that was causing work to be delayed? By the time they call you, it’s already been hours or a day since they last did anything productive. Then you come by and look at the problem, try a few things, and POOF, it works. After that, they just shrug their shoulders and say something like, “Oh was that all? I could have done that.”

Usually, I hate to plug other people’s products or services, but this deal seems too good to keep it all to myself. You get 600 TAIYO YUDEN DVD-Rs for about $129.00 (plus free standard shipping).

Nope, I don’t get a commission! At any rate, if you’re interested in deals like this, go visit Supermediastore.com and poke around.

Don’t blame me, if you end up ordering more than one thing, though. These guys have some pretty good deals on electronics and computer supplies.

The software is free. It’s amazingly simple. They don’t pay me a commission for plugging their product. No adware. No spyware. And have I mentioned already that it is simple and fast?

View Source Editor Download Link

However, if you crave pain and that “do it yourself” feeling, you can also use the Windows Registry to change IE’s default handling of displaying the source code for web pages.

The blog editor at My Digital Life has a nice explanation of the process posted. Here’s a preview of what they have to say: