Update (2009-10-25): We are located in Cambridge, MA, USA and this is a full-time, in-person position.

Find out more about Language International, because I’m not going to talk about that here.

The business and development team (2 business folks, 2 engineers, and me) discussed what we thought makes up the ideal candidate. We made a list of qualities and assigned an arbitrary rating scale to grade the importance of each quality.

Must have skills

The first portion is a list of absolutely necessary skills. If you don’t match our expectations here, it’s going to be a hard sell. That said, if you’re proficient with the 2nd list of preferred skills, you might still have a chance.

Prototyping

Able to build rapid prototypes (regardless of technology, i.e. Paper, HTML/CSS…) ideally you can take a design from sketches to markup.

Markup and style

Capable and comfortable implementing designs with HTML/CSS.

Design taste

Has great taste in design. Cite sources of inspiration or influence: i.e. Books, blogs, etc…

SEO fundamentals

Understand the essentials of SEO, “good content + good markup + linking strategy = good SEO.”

Unafraid of code

Understand how back-end technology works. The point is, you can’t be scared to work around and within PHP.

Preferred skills

It would be great if you have experience with the following. These are still important to us, but not as much as the previous list. Icing on the cake, as it were.

UX design and research

Solid skills in experience design. You can expect to sketch interfaces and user flows. Would be great if you have experience with research as well.

Manage and measure UX

Can manage and measure the success of design. You should have experience defending your design choices with business and user goals.

Experienced with non-designers

Has worked directly with Business folks, Engineers, and Designers (i.e. You should be comfortable working with designers and non-designers alike). We’re looking for a team player, not someone who only works in heroic issolation. This isn’t a “toss it over the fence” position.

Articulate design requirements

Can identify problems and possible solutions based on the concepts mentioned in meetings.

Visual design

Capable of visually designing interfaces (read: graphic design).

SEM experience

Has worked with a company whose source of new customers are derived from SEO and SEM.

Start-up experience

Has worked at a start-up company.

Diverse employment background

You’ve probably worked as a freelancer, but you’ve also held full-time jobs (e.g. paid non-hourly, which breeds a different kind of work ethic than a part-time/freelance only background).

Drupal and jQuery

You’ve worked with Drupal and jQuery. That’s what we use.

Nice to have skills

I’m mostly kidding here.

• Likes coffee, tea, and/or quality beer.
• Has positive attitude, e.g. uses smiley faces in IM’s.
• Is tickled pink by fine typography.
• Knows when to high-five, and when to low-five.
• Tweets.

How to apply

Forward your resume and portfolio to Karen Ong, our CEO and hiring manager. Your first task will likely be to inspect our site and give us a short list of glaring errors or problems with the design (of the experience variety). I’ll be the first to admit, there are tons of problems with our site and the flow between pages.

What would you do if we hired you? It’s a hypothetical question that warrants a hypothetical answer. If you have any questions regarding this job opening or our company in general, please feel free to contact me. Cheers, I hope to hear from you soon. We’re trying to fill this spot as soon as possible.

Before I wrote the article, I knew why I use the tools that I use, or so I thought. But as I put my thoughts about my tools in writing, I was surprised: I came to a higher level of confidence about why I use them. Much like public speaking, you might not realize how little you know about a topic until you speak about it. The same is relatively true about writing.

It’s been a while since the first draft of the article. Many thoughtful people helped me hone it along the way. I want to thank everyone who critiqued my rough drafts (emphasis on rough). I’m truly thankful for your help: Marc Amos, Megan Grocki, Whitney Hess, Brian O’Neill, David Rondeau, Joan Vermette, and Alla Zollers.

I’d also like to thank the nice folks at UX Booth, especially Matthew Kammerer, who encouraged me to publish on their excellent site.

I’m looking forward to writing more about my tools in the very near future. I have another article in the pipeline about how giving constructive criticism, rather than deconstructive criticism, is always more beneficial. The nice people who helped me edit my tools article have motivated me.

Cheers!

According to the Wikipedia,

Subpixel rendering is a way to increase the apparent resolution of a computer’s liquid crystal display (LCD) by rendering pixels to take into account the screen type’s physical properties.

Getting to the options in Mac OS X

If you’re on a Mac, you can easily view subpixels after changing a few settings in your System Preferences. Here’s how…

Open System Preferences > Universal Access > Zoom options.

1. Turn “Smooth images” off for subpixels

I usually leave this option on for normal use. But when I actually want to see the subpixels, I turn it off.

2. Choose “Continuously with pointer”

The other options feel very unnatural to use. The last option, “So the pointer is at or near the center of the image” feels too rigid. Try it, you’ll see what I mean.

3. Check “Use scroll wheel with modifier keys”

I use this option regularly, especially if someone walks over to my screen and I want to show them one specific element on the screen. I zoom in and they don’t have to hunch over the screen to see.

Done. Now zoom in with your shortcut (mine is Option + Scroll Wheel) to view subpixels in all their glory.

Favicons need subpixel love

In a thread on Typophile, Miha posted an improved YouTube favicon:

Subpixel font

Miha is also designing a hand-made, subpixel font with 3 pixel x-height. It’s amazing.

Dan and Ethan are both excellent writers with presentation skills to boot. So when I heard they were hosting a full-day workshop, I pounced on the opportunity.

The subject of the workshop was based on their recently published book, Handcrafted CSS. The concept of craftsmanship is an intriguing one, found in the Shaker design philosophy:

If something is both useful and necessary and you can recognize and eliminate what is not essential, then go ahead and make it as beautifully as you can. —Shaker Quotes

On perfection and compromise

This philosophy pervaded the workshop. Likewise, the book and accompanying videos encourage us to find the intersection of art and utility. If you didn’t make it to the workshop, I highly recommend picking up the video edition of the book. Dan expands on the bulletproof essentials of craftsmanship on the web, starting the video by stating,

Being a good craftsman on the web requires continually asking questions…

But continually asking questions isn’t something limited to web design. This is a remarkable trait of a perfectionist. Being curious and always asking the question, “what happens if…” is crucial to being able to predict and deal with worst-case scenarios. He also teaches that a good craftsman also understands and embraces compromise, which reminds me something Greg Storey once pointed out about Dan. A perfectionist knows when to bust out the duct tape and get the job done.

The workshop

The venue, the Hawthorne Hotel, was great. They provided us with breakfast, lunch, snacks, and sufficient coffee to tug along a room full of web folks all day. I enjoyed the format of the conference, which was similar to An Event Apart. Each session was buffered with ample time to mingle with attendee’s.

Some people mentioned the workshop could have been longer (i.e. 2 days), but I disagree, a full day was just right for me. My only suggestion would be to do it frequently, and as a road show. Though I’d be satiated by more frequent Markup & Style Society meetings, too.

I’ve read their books, and I’ve been following both of their work for years, but I was still pleasantly surprised with the content of the workshop. It was fresh and built on the foundations they’ve laid. Like many presentations, there’s always more to the slides and projects within than meets the eye. When someone is explaining their work and retelling the story you get a different perspective of their process.

Teaching and speaking

When talking about markup and style, it’s so easy to present dry slides full of code. However, both of them did an excellent job of giving granular details about the code and still keeping it lively enough to hold even my attention; I’m distracted by anything shiny or—let’s go ride bikes!

Sorry, where was I? Specifically, Ethan’s example of a table-based calendar for New York Magazine was outstanding. I never thought I’d say it, but that was one sexy table. I like how he eased into the example, providing context to his circumstances and built the case line upon line. By the end, he used more table-related elements than I’d guess most people would know what to do with. It was inspiring to say the least.

I asked Ethan where he got his inspiration to try things with <colgroup>, he said it was one of those “3AM experiments” which made perfect sense. Beautiful accidents frequently take place after midnight.

Handcrafted sketches & business cards

Since May of this year, I’ve been experimenting with sketchnotes. The sketches from the workshop turned out great, maybe the best ones yet. I’m not the first to do sketchnotes, Mike Rohde originally inspired me to get my hands dirty with sketchnotes. Hat tip to you, good sir!

Another ongoing experiment is my hand-painted business cards. Around the same time I started sketchnoting, I decided I would use gouache (a creamy watercolor paint) and markers to make my business cards (seen below). I’m considering ways to include this visual style into my upcoming self-branding project.

Markup & Style Society T-shirt

I designed a T-shirt for the Markup & Style Society using acrylic paint and an American Apparel tri-blend shirt. My hopes were to encourage Dan & Ethan to organize another meeting. (Take your time guys, you’ve been busy as hell.)

The ampersand is Sky sans, and “Forsooth” is Hoefler Text. I’m hoping get them printed at some point, with permission of course. So stay tuned! Thanks for reading.

Looking for serious documentation?

If you’re looking for a serious guide to bi-directional web pages, I recommend reading the W3C’s articles on the subject: Best Practices for Authoring HTML: Handling Right-to-left Scripts and Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts. They were all I needed to get started, but lacked enough of the practical implementation notes for me to feel the need to write an article about bi-directional websites.

How I created a direction-agnostic layout

1. Grab the browser accept language (using PHP or your CMS).
2. Make a PHP if statement echoing “ltr” or “rtl,” in the body tag of your page template.
3. Copy and paste all directional styles (e.g. margin, padding, text-align, etc.) into a separate stylesheet, called textdirection.css throughout this article.
4. Duplicate all your directional styles in textdirection.css
5. Add body.ltr to one set of styles, and body.rtl to the other set of styles

Browser accept language

In order to switch the layout depending on the language of the browser, you’ll need to grab the HTTP_ACCEPT_LANGUAGE. Google around for it, I’m sure you’ll find something that works within your development environment.

At Language International, we use Drupal for our back-end. I use this snippet of code to grab the browser accept language (I’m not sure exactly how or why this works, but thanks to our awesome engineering duo, I don’t need to know). Add this PHP to the html tag and the body tag.

Markup for the html tag:

<html dir="<? if ( $language->language == "he" || $language->language == "ar" ) { echo "rtl"; } else { echo "ltr"; } ?>" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>">

Markup for the body tag:

<body class="<? if ( $language->language == "he" || $language->language == "ar" ) { echo "rtl"; } else { echo "ltr"; } ?> other classes">

As far as I know, Arabic and Hebrew are the only two right-to-left languages my website is going to support. If we add support for more, I’ll have to add them to the PHP if statement, since this is just taking those 2 languages into account.

Remove directional styles

In my case, we had a purely left-to-right web site. Naturally I had oodles of styles using attributes like margin-left, background-position: left top, and so on throughout my main stylesheet. Any attribute referring to a left or right direction has to be removed from the main stylesheet. The easiest way to find all your directional styles is to search for these terms in your main stylesheet, or anywhere that mentions them:

• background
• background-position
• clear
• float
• left
• margin
• margin-right
• margin-left
• padding
• padding-right
• padding-left
• right
• text-align

Searching for “left” and “right” alone won’t find everything. But you’ll probably locate the bulk of your directional styles that way. If you’re like me, you use shorthand whenever possible, so you’ll also want to find the subtle directional attributes like background-position: 0 50%; or margin: 0 10px 0 20px; and weed those out, too.

Of course, these attributes are probably mixed in with loads of other direction-agnostic attributes. I found the easiest way to weed out these styles was to copy the selector and all its attributes to textdirection.css, then double back and remove all the direction-agnostic attributes from the file.

Textdirection.css example

Copy the entire selector from your main stylesheet to textdirection.css:

.contactLanding .colMain {
	float: left;
	margin: 0 3% 0 5%;
	padding: 0 2.5% 2.5%;
	width: 60%;
}

While in textdirection.css, remove all the direction-agnostic styles, like this:

.rtl .contactLanding .colMain {
	float: left;
	margin: 0 3% 0 5%;
}

Then go back to your main stylesheet and remove the directional styles, like this:

.contactLanding .colMain {
	padding: 0 2.5% 2.5%;
	width: 60%;
}

Double the CSS, double the fun!

Your textdirection.css file should now have all your directional styles in it, but they still need a class added to them to trigger which direction the text should to run. Now we’re cooking. Notice in the example above I added “.rtl” before “.contactLanding .colMain” in my textdirection.css file. The rtl class is inserted into the body tag with the snippet of PHP from earlier in this article.

Now duplicate the contents of your textdirection.css file. One copy should be labeled “left to right” the other “right to left.” Any time you add new styles, you’ll have to add them to their respective text direction section. Here’s how your textdirection.css file should look:

/* ======================= */
/* != Directional styles = */
/* ======================= */

/* !================= */
/* != Left to Right = */

.ltr .contactLanding .colMain {
	float: right;
	margin: 0 5% 0 3%;
}

/* !================= */
/* != Right to Left = */

.rtl .contactLanding .colMain {
	float: left;
	margin: 0 3% 0 5%;
}

Bi-directional text

I found this info on the W3C’s site: CSS vs. markup for bidi support.

Normally a user agent will not automatically recognize or know what to do with any bidi markup you use in XML documents. CSS properties should therefore be used to indicate the expected visual behaviour of text in your document.

The CSS, however, should always be linked to dedicated bidi markup in the text.

If you ever need to combine right-to-left and left-to-right text in the same string, for instance in the copyright at the bottom of a page, you’ll also need to add this bit of style to your textdirection.css stylesheet:

*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }

*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }

bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }

This overrides the language of the page and always renders this snippet from left-to-right, even on a page displaying a right-to-left language. Here’s the HTML to ensure our copyright statement is displayed from left-to-right:

<p><bdo dir="ltr"><?=t("© ". date(Y) ." Language International, Inc.")?></bdo></p>

That’s a wrap

It would have helped me to have a simple guide like this, so I hope someone finds this useful. Have you worked with multi-lingual sites? How did you overcome the right-to-left layout hurdle? I’d be interested in hearing from you. Thanks for reading!

If my circumstances aren’t rare, why haven’t I seen relevant examples of hardships and successes evangelizing and designing user experiences in start-ups?

After speaking with several people about my curious observation, I’ve come to a number of conclusions. One is, relevant examples are a small part of the big picture. Another is, people who are new to UX don’t know or don’t want to talk about their challenges and successes. But I’d like to focus on producing examples, rather than motivating people to talk more. The former I can directly achieve, the latter I can only passively affect.

Personas were a bad example

In my last post, I used an example of how I had not seen an example of low-budget personas. Unfortunately, personas were a poor choice for discussing a lack of documentation. Hardly anyone can agree that they’re useful, so I struck a nerve that might have distracted some people from my main point: the lack of examples. Also, there aren’t a lot of people doing them, so naturally, it’s going to be harder to find relevant examples of low-budget personas. So, I digress.

An example from the bit cave™

I’m going to use an example from a subject that is well documented, HTML and CSS. I know this isn’t an apples-to-apples comparison, but the contrast is enlightening (to me at least).

In chapter 2 of the excellent book Bulletproof Web Design by Dan Cederholm, an example of scalable navigation is dissected and built from the ground up. He starts by giving us some context, showing a common approach to tabbed navigation. He then refutes the flawed approach and expounds a better method of building tabbed navigation. His example is repeatable and replicable. You can take the code he provides and build your own scalable navigation, step-by-step. There aren’t many examples like that in UX design. But there are some who are providing clear examples of entry-level UX design tasks and methods.

UX documentation examples

Kevin Hoffman reminded me of one of the first UX design books I had ever read: Dan Brown’s Communicating Design: Developing Web Site Documentation for Design and Planning. It has plenty of examples to whet the appetite of an UX newbie. But what I’m really after are examples of wireframes or flow charts from someone in my situation: low-budget, no expertise, and inexperienced (UX-wise) colleagues.

Why do these examples have to come from someone in this situation? Because I’m willing to bet that how an amateur does wireframes is going to be different (but not necessarily better) than how an expert does wireframes. The amateur might not know the best way to do it, but they’ll likely cover ground that’s more familiar to other amateurs. I’m not discounting the expert as irrelevant, on the contrary, the best way to learn is from experts. But, that aside, I haven’t seen amateurs teaching amateurs, and would like to see what comes from it.

Maybe I’m asking for too much? Which is why I’m not shaking my fist at the world, demanding someone else fill this void. Rather, I’m going to start writing about UX design examples in the wild, at my start-up company.

Jason Robb, on wireframes

My first article will be on wireframing with sticky notes, a notebook, and good ol’ markup and style. I’ll (hopefully) show how I went from a set of business requirements, to a rough concept on paper, to implementation in HTML and CSS. I’ll be publishing it on this site some time in the very near future.

My first ever presentation, at Pittsburgh Web Design Day, was about wireframes. The presentation went okay, but one thing I realized was how crucial examples are to effective communication. Unfortunately, my slides were saturated with lists instead of wireframes from the wild. Not to mention I was grossly unprepared. So hopefully this will be a nice opportunity to reclaim some lost ground.

Suggestions?

If you have a suggestion for a topic to cover, I’d love to hear from you! There is nothing too simple or mundane for me to talk about, anything from UX ideation to implementation. Please email me or @ me on Twitter. Thanks for reading!

I recently heard the wonderful Jared Spool speak on the topic of personas at the UPA Boston mini conference. The usefulness of personas notwithstanding (not getting into that can of worms here), I walked away from his talk with a familiar, looming question:

Can robust personas be built by a single designer, with limited time and resources?

I asked Jared, and his response was “it depends, but yes.” It was encouraging to hear, no doubt! But where do I start? His talk outlined how he built robust personas in 30 days. The robust part is because the personas his team built used data gathered from real users. As opposed to using made up quotes and information. Now, of course I don’t expect or assume that a single person, with limited time and resources could do it in exactly the same way as someone with a team of experts could do it. But that doesn’t mean I can’t make personas at all, does it? There has to be some way for me to build them. Perhaps that means using less data or spreading out my work over a longer period of time.

Specific examples for a specific audience

And that ambiguity is exactly where encouragement alone fails to be helpful. I need examples! I need realistic case studies of how someone like me succeeded in building personas. I need to know how they approached them, and how it impacted the problems they were trying to solve.

Without relevant examples, I frequently get the feeling that it’s an all or nothing situation. It’s like when people say “usability testing is expensive, time consuming, and takes an expert to translate the results.” That’s obviously not true, and we can benefit from doing even the smallest of studies. The difference is, I’ve seen examples of how usability studies on a shoe-string budget work. I have not seen examples of low-budget personas. (Again, not picking on personas, the same argument could be made for design pattern frameworks or mental models. The list goes on and on.)

It’s not Jared’s problem

I’m not putting this responsibility on Jared. It’s not his problem if I can’t translate his approach to my situation. I’m not asking him to meet me halfway. And I’m definitely not suggesting he should change the way he presents personas to his audiences. He rocks, and should stick to his guns.

But I’m not going to learn how to do personas from examples of how to do it with a team of experts. And I’m not going to learn how to build a design pattern framework, or mental models, if the examples are coming from that same frame of reference. Excluding examples for the loners is missing the mark for many. The newbies (myself included) need the right kind of examples that are relevant to our needs.

Who’s coming with me?

I know I’m not alone in this. There are people in the web industry that are in the same position as me. That is, not much experience, no mentor, and no help from an army of designers, developers, and researchers.

So I’m rallying the troops. I don’t know what’s next, but there is an opportunity here. Can we educate each other with relevant examples of these emerging concepts? It would be awesome if there were a blog, a conference, a community, or all 3, that is specifically for this crowd.

Who wants to help me? Email me, leave a comment below, or get a hold of me on Twitter. Thank you!

Update: Please read my follow up post: UX Examples for Start-ups. I received some great feedback, so I summarize some of it. And I decided that I would blog about the examples I see missing from the community. Thanks again for reading.

Which is better?

If you’ve been reading the IxDA, you’ve probably noticed how heated the discussion gets when someone brings up anything like what I’m about to analyze. Some people make a big deal (read: rant) about the difference between UX generalists and UX specialists. The argument that I’ve observed is along the lines of this:

Which is better (note: better is ambiguous)? A generalist, proficient with a wide range of skills or a specialist, superb at one skill, less than adequate at other skills.

The score

I’m in the generalist camp, but hear me out. From where I stand, I can improve any one skill to above average (I’m being modest) with some hard work and guidance. If a specialized UX designer, with no skills in coding wants to become proficient at an above average level, they’ve got a longer way to go than the generalist. That’s a fact. But the question is, why would they ever need to know an above average level of coding? In their current position, they don’t, because someone else who has specialized in coding will do a much better job at it than them. Point for the specialists. 1-0.

The specialists say “generalists can’t devote enough time to one thing to become a true expert, or if so, it’s rare.” And that may be true. But if a generalist spent all their time on one thing, then they wouldn’t be getting their job done. A job that requires them to know a decent amount of coding, graphic design, back-end integration, fire fighting, and juggling. By being a generalist in a position that requires it, I’m helping to get my startup off the ground better than if I were a specialist who only did HTML/CSS. That’s a fact, and a point for the generalists. 1-1.

Tie breaker: circumstances

It all comes down to circumstances. If your circumstances require you to specialize, then be specialized. If your circumstances require you to generalize, then generalize. If you find yourself as a one in the other’s world, my recommendation: get your job done, or get a new job. Get your job done, regardless of the circumstances.

It’s not about us. UX design isn’t the top of the totem pole. The number one thing that’s most important is the health of your business. Don’t get me wrong, your customers are important, and the health of your business depends on them. But you can’t control your customers. The end of your control is your business management. From there, you’ve got to rely on sound judgment from your superiors and great UX design.

The real question

The question should be rephrased, or rather, honed to this:

Which is better for your business? A generalist, or a specialist?

The answer is a hard one, and I won’t try to answer it here. But now we know the question we should be asking. Is it right for your business to hire a UX specialist or a UX generalist? Discuss.

Ideas: from abstract to concrete

These ideas need to be put down on paper. They need to be taken from an abstract form of thinking and put down on to something concrete. They need to be acted upon right now.

It’s the reason I started carrying a moleskin around with me 2 years ago. If I wait until I get home or the office or wherever, I risk losing some part of that stream of ideas. It’s the equivalent to bottling up lightning. If I stop what I’m doing, and get this fresh stream of ideas out of my brain and on paper, I can return to it and stir up those synapses again some time. When it’s time to pursue them, that enthusiasm can hopefully be uncapped with the same vigor I felt when I wrote them down.

Getting addicted

The burst of ideas is addictive, as Jim Coudal puts it in a podcast called Short Attention Span, Big Dividends. He talks about how the ideas that come from this burst are often easier to fall in love with than it is to stay married. Your brainstormed ideas might not hold water, but it feels so good to get it out of your head and on to paper. Several of Coudal’s revenue streams started by documenting these bursts of enthusiastic ideas. If it’s on paper it’s easier to share it, and it’s easier to refine it, and it’s easier to develop it. How many times have you heard someone say “that could make me some money” but never does anything about?

Enthusiasm fuels productivity

Thinking about the idea of enthusiasm reminds me a lot of how I work. Enthusiasm is fuel for the fire of productivity. If I’m really excited about something, I want to dive in right away. I want to drop everything and plow through it. Sometimes, sadly it’s to the detriment of other projects progress, albeit deadlines are never broken.

Allow me to elaborate with some examples. It takes time to get in the zone to code. Sometimes it doesn’t take any time at all. I can fire up Coda (my favorite text-editor) and get stuff done. However, if my enthusiasm for a project is low, it takes time to build momentum. I’ve found that the key to being super productive is to work on things in order of enthusiasm. But first, here’s why I don’t start with projects in the back of my mind.

Don’t start with so-so

The problem I have with giving higher priority (in terms of work order) to less interesting projects is two-fold: 1) I’m trying to get it done so I can get on with project B, which I’m far more enthusiastic about. You may think, “that should motivate you to get project A done fastest, right?” Wrong, because then my attention is split. And 2) getting things done is all about concentration. If I’m not fully focused on a project I’m more likely to get distracted. I’m more likely to get frustrated. I’m more likely to be unproductive. So for me, starting with so-so is a waste of time.

Start with awesome

This may be hard to swallow for the project managers out there, but if I’m excited about writing a blog post, and less so about working on code (i.e. right now), then I’m going to write a blog post. It’s not wasteful, and it’s not a distraction from the more important thing (code). Hold your horses though, here’s why it works for me.

If I’ve got momentum behind my enthusiasm for a project, I’m more likely to get in the zone (which means higher productivity). I’m more likely to plow through and finish it in record time (faster than if I was unenthusiastic about it). I’m more likely to enjoy what I’m doing. I’m more likely to feel productive. Which is important for morale and whether or not I generate momentum for the less enthusiastic project up next.

Deadlines and distractions

Sometimes life isn’t that permitting. Occasionally I’m distracted with something of high priority that just came up. For instance, I’m working on a logo, and I love it. All of a sudden, a bug surfaces on our web site, brought to my attention by a colleague. I need to stop working on that logo right now and deal with the problem. It’s just like the glass falling off a counter, but I never saw it coming. Not to mention I didn’t work up an enthusiasm for it.

It’s derailed my logo design. This distraction could be potentially crushing my momentum I have for this logo design. It takes me out of the zone, and topples my productivity. But it’s okay, because this bug is really killer, and needs addressed right now. Part of working in at a startup company is being flexible. By diverting attention to the more important matter I’m being flexible at the cost of being less productive. This is sometimes the difference between launching with half the features or launching 2 weeks late. You make the call, it always depends on the circumstances.

Flexibility vs. rigidity

Anyhow, the momentum of enthusiasm is how I get stuff done. Another example: My girlfriend is awesome at prioritizing. She can plan her day starting with the most important things and finish with the little things. She can plow through it seemingly with ease. It’s how she works. She’s enthusiastic about her projects and she’s immensely productive. But where our processes differ is in our flexibility. (I’m not picking on her, but making an observation that we both acknowledge.)

If she’s thrown off by something, if something doesn’t go as planned, her productivity is stifled. For instance: If she forgets something at the grocery store and has to go back for it, she’ll likely be frustrated. Frustration is unsatisfying, for anyone. If I’m frustrated with something, my focus is diverted and productivity slips. But the focus shouldn’t be on not doing things that frustrate you, it should always be on the positive side. Do things that make you feel satisfied. Even if that means shuffling the deck. As long as you get through all the cards, you’re doing it right. That’s my style, and I’m sticking to it.

photo by Rachel James.

The event was held at Microsoft’s New England Research and Development center. The main event was on the 1st floor, which was awesome. The reception/drinks after the event were on the 11th floor, which is where Refresh Boston usually holds their presentations.

This was my first ever unconference-style event. It was confusing at first, but grew on me quickly. Planning the talks at the start of the day felt haphazardly but was intoxicating. It was unlike any event I’ve ever attended. There wasn’t a complete lack of authority, but if it was there, I didn’t notice it. I’m not sure how each talk/presentation was selected, I wasn’t observing the whole process.

Organizing is hard work

For the most part, I was an observer. I just recently started a book club for UX design here in Boston, and so my knowledge base of organizing is fairly limited. At the time we only had one meeting. The event was quite an eye opener for me. I had a little idea of how daunting organizing a user group could be. My group is under a hundred at the moment, and less than 30 attendee’s. Some of the group leaders at the summit mentioned they had several hundred into the thousands of members. Organizing at that level has got to be tough. I have a new found appreciation for the events I’ve been just showing up to.

We made ice cream with liquid nitrogen.

Good sessions

The sessions themselves were good. One of them we talked about how to get creative with our groups. Someone mentioned that we could start a “concrete group” that gets together to make stuff out of concrete. It’s totally irrelevant to me, but it was interesting to entertain the notion. One of the sessions was about a tech/hacker groups in Rhode Island, AS220 and DC401. One of them has a laser cutter. There was talk of shared work spaces where people can come to make crazy stuff that I can’t imagine. It was the first I have ever heard of hacker spaces, besides the occasional mention of MIT’s fab lab. I didn’t realize there was a huge, global following of this sort of thing.

I met a lot of great people that do interesting things. I’m looking forward to keeping in touch and hopefully seeing them again soon. Until then, check out the NEUGLS user group on Google or the PB Wiki for the event itself.

My talk went well enough. I can’t complain. I should have been far more prepared. Rehearsal is important, that is an understatement. My slides are on Slide Share, and my talk is on Speaker Rate. So if you saw this talk, please, please give me some feedback! I want to know how you liked it and how to improve it.

What The Wireframe?

This is my presentation, which is being featured on the Slide Share home page. Neat!

Attendees were awesome

I learned a ton from the attendees too. They were smart and friendly, and made me feel right at home! I was asked a very perplexing question by a nice guy named Joe. He asked me, and I’m paraphrasing, “What do we do if our designers don’t use paper wireframes?” He’s in a tough spot. He’s a front-end developer, and he works with designers who pass their PSD wireframes over a wall for him to slice up and put in to code. The designers are set on their designs, which is okay for the most part, but the problem becomes: what if the concept that the wireframe proposes is wrong? How can they work together to create a better product, instead of being at odds with each other? It’s a very curious situation, and I’ll be chewing on it for a while.

One thing we thought of, was that he could go to the designer and propose they work together in making some collaborative wireframes. A white board session might be ideal, but I suggested that Joe should wireframe the interface on paper, and show the PSD maker. I hope it works out for you Joe! If you’re reading this, shoot me an email, I’d love to follow up with you.

Thank you!

If you were there, thank you so much. Without you this event wouldn’t have been as great. I’m thrilled to have been invited to Web Design Day, and huge thank you goes out to Jason Head, who organized it. That was a lot of work, and totally worth it. On the scale of awesome events, this one is at the top. It was great to meet so many enthusiastic people. This was an event I’ll never forget!

Enter the UX Book Club

A few months ago, the UX Book Club popped up on my web radar. It’s essentially a decentralized club, located anywhere there are UX fans to volunteer to start one. Naturally I thought it was a great idea, so I started a Boston page and alerted the locals.

Setting up the proper channels

I left the idea on hold for a few months, until I realized it wasn’t going to happen unless I put it together. So I set up the requisite event and group pages, created a twitter account, and bought a domain name, UX Boston.com. (It takes a domain name and a new web site to create the pressure required to motivate me to organize a social event.)

First time’s a charm

Our first meet up was Thursday, March 26th, and it was awesome. I’ll do my best to summarize what happened.

6 great people (well, 5 great people, and me) met up for drinks and food at the Cambridge Brewing Company. After some introductions I busted out the 4 books I brought with me. We passed them around and discovered most of them were new to us. I didn’t plan to dive in to any one of the books, but wanted to get a feel for what everyone else expected. That seemed to work fine for everyone else.

Here are few things we said we wanted to get out of the club.

• Learn about UX design.
• Discuss UX with like-minded people.
• Find out what are other people reading.

How do I become a UX designer?

This is a question we’re aiming to answer. We discovered there’s a curious process to becoming a UX designer. It is, like I said, a position that can sneak up on you. You start with a simple vision: make the experience of the people using your product as easy and delightful as possible. And if you stick with it, one day, you know more about UX than you thought you could. I’ll percolate on this notion for a while. There is more to it than magic dust.

Where are all the UX mentors?

We noticed there’s too much isolation in small and large companies. All 6 of us noted that if you’re interested in UX design, it’s hard to come by a mentor or a like-minded colleague that you can bounce these ideas off of. A mentor is such a valuable thing. If you don’t have one, find one. (I’m willing to be a mentor to whoever asks. I’m friendly. Just say hi, and I’ll take you out for a coffee or a beer.)

But that’s also where the UX Book Club comes in to the picture, we’re a group of like-minded individuals. All willing to learn how to become better UX designers, even if that’s not our formal training or practice.

Safety in numbers

I enjoyed the small crowd. It was small enough that we all got a chance to talk about UX design and other things directly related to our circumstances. I’m interested to see how we adapt to a larger venue with more people.

The format this time was more free-form and social than structured and book-related. Which is fine, and we’ve got a better plan for next time. First of all, we’ll all read the same book before we come. I’ll be prepared to summarize in case someone comes that hasn’t read it. I’ll have an outline of the book, with points to discuss from each chapter. I’m really excited for meeting #2!

Next meeting – next month

Our next meet up is next month, though we haven’t set a date yet. The next book we will read will be Don’t Make Me Think by Steve Krug. It’s a great starter to the UX way of thinking. Some of us have already read it, which means it’ll be easier to talk about after refreshing out memories. It’s an easy read, everyone should read it, whether you’re an aspiring UX designer or someone to makes things for the web. You can learn a lot from Mr. Krug.

Most importantly, thank you!

Thank you all for coming! I greatly appreciated it, and I’m truly grateful that 5 of you, not knowing what to expect, came out on Thursday. I hope to see you again at the next one. If you didn’t make it out, we’d love to see you next month.

What: Pittsburgh Web Design Day
Where: Left Field
When: Saturday April 4th 8:30am - 4:30pm
Cost: $40 (Limited Registration: 85 people)

About the conference

From the Web Design Day web site:

Pittsburgh Web Design Day is a one-day, local web design conference to highlight local talent as well as those with strong ties to Pittsburgh who have gone on to be leaders in our industry.

Organized by G. Jason Head of Refresh Pittsburgh and On the Fridge, LLC (organizers of Flashpitt), Web Design Day is designed to be an affordable Pittsburgh-based event. Modeled after the successful DC Design Talks, Web Design Day will feature a number of high-end web design presentations, a tasty lunch catered by our friends at Franktuary and a great networking opportunities - all in a professional (and totally sweet) meeting space!

Registrations are limited to 85 people - so register quickly!

A pragmatic approach to wireframes

And the description of my talk, titled “What the Wireframe?”

In this talk, Jason explores a pragmatic approach to wireframes. Asking and answering the questions: What’s the difference between wireframes and prototypes? Which tools are used to create wireframes? Which medium yields better results, paper or digital? How do you decide whether to create low-fidelity (sketches) or high-fidelity (HTML) wireframes? And how should wireframes be presented to your team or stakeholders?

I’ll probably have some case studies from my work at MyHappyPlanet, and from our new venture, Language International (blog post about this soon). I’ve collected a great deal of wireframe inspiration and resources. I can’t wait to share my findings.

It seems registrations are filling up quick, so get going!

The source of life’s pressure

Allow me to set the stage by elaborating on the source and conditions of being under pressure in life. As Bill Nye would say, “consider the following.”

As a side note, I sometimes imagine what it’d be like if everything I did was accompanied by sound effects like on Bill Nye’s show.

Scenario #1: When life gets tough, I’m more apt to keep up and stay productive. Much like putting your thumb over the end of a yard hose, increasing the pressure makes it easier to spray bird crap off the roof of your car. But when life gets too tough, we risk falling apart. Continuing the analogy, it’s the equivalent to pressing our thumb all the way down on the hose nozzle, spraying water everywhere in a useless manner.

Scenario #2: When life is good, and if I don’t have anything to look forward to, it’s easier for me to get behind and let my productivity stagnate. This is the negative effect of being on Easy Street, and under too little pressure. If allowed to continue, boredom creeps in, and soon I’m infected with complacency. Knowing the looks of it from personal experience, I’m honestly more on guard when I’m not feeling any sense of pressure from life than when I’m under too much.

Weakness: internal pressure

Internal pressure is inherently weak because we must have self-control and self-discipline to harness it. Contrasted to the pressure from external sources (namely: authority), I feel more motivated by them than I do by my own self-imposed deadlines or constraints. From what I’ve gathered, this is normal. Though internal pressure is not a strong force until we’ve nurtured it, so I’ve acknowledged it as a weakness.

Strength: external pressure

Meet our friend external pressure. Hiya! It comes in the form of authority, which we’ve been under in one way or another since we’ve been born. But external pressure is inconsistent, and so we can’t rely on it. My mom & dad, a great source of motivation and pressure in my youth, frequently told me,

“I’m not going to be there with you when you…” (insert job)

…or something to that effect. Warning that I shouldn’t rely on their presence as motivation to do the right thing. And it’s true, your boss or landlord isn’t going to be as forgiving with deadlines. We can’t rely on the pressure of others to motivate us. So the best kind of pressure must come from within ourselves. Now that I’ve isolated the right kind of pressure, I can consider how to generate the same feeling of external pressure, but from within myself.

Self-control, self-discipline & motivation

The focus shifts to our self-control and self-discipline, the generator of internal pressure. These virtues are important. With them, we can generate and rely on our own internal pressure instead of relying on inconsistent external pressure. Increasing motivation from internal pressure is an ongoing process. It doesn’t happen over night. It builds gradually, and that’s normal.

Threat levels & authority

I want to illustrate another point about motivating productivity. I’d rather fail myself before failing someone in authority. This is a good thing, because in a professional setting my authorities priorities are more important than my own. The drawbacks to letting them down out weight failing myself. After all, It’s easier for me to forgive myself than regain the trust and forgiveness of someone in authority. The general possibility of failure is threatening, and more so from failing authority than myself. Although I’d like to have the threat levels evenly matched. Respecting my own goals, and the goals of my authority. Here’s why…

Figure 1 shows the perceived threat level based on the source of the pressure. External pressure from authority is capable of producing the optimal threat level, thus it’s capable of generating the most motivation to be productive. Internal pressure, generated from within myself, doesn’t quite reach the 100% threat threshold, and therefore, it’s incapable of producing as much motivating pressure as external pressure. These are important to note, because they create boundaries to my productivity.

Figure 2 shows the optimal level of productivity motivated by external pressure, compared to the maximum level of productivity motivated by internal pressure. This shows that internal pressure can produce a maximum productivity that is less than optimal. And thus, the limited affect of internal pressure is revealed.

Conclusions

Since external pressure is inconsistent and unreliable, we should learn to harness and increase our dependency on internal pressure. It’s always better to motivate yourself with internal pressure because it’s under your control. But that takes: self-discipline, self-control, and a consistent source of motivation to drive you.

The key to the correlation between productivity and pressure is being motivated by authority and motivating yourself. It’s easier to be motivated by external pressure, but better to be motivated by internal pressure.

That’s all folks. You don’t have to go home but you can’t stay here!

Stickies save the day!

When I’m distracted with something I shouldn’t be doing right now, I open up Stickies.app or grab a paper sticky note and jot it down. Here’s how I decide which to use and when to use them.

Short term: paper

If the task in question needs completed very soon, I’ll use a paper sticky. For instance, making a grocery list or reminding myself to email a colleague about a silly question.

Long term: Stickies.app

If the task will need completed eventually, but not in the immediate future, I’ll put it in Stickies.app. A few reasons for using digital stickies: I’m more likely to throw away paper stickies. Paper stickies contribute to cluttering my physical desktop. Digital stickies are easier to read, and don’t get lost in the whirlwind that is my desk.

Use spaces for organization

I keep all my stickies isolated on 1 of 6 possible Spaces. (Spaces is a native Mac feature for multiple desktops.) This means I can switch to my Stickies space if I’m thinking about what I’m going to do next, or when I have an epiphany of some sort that needs recorded. Then, boom, back to my work. Instant distraction dissipation.

Space #3, the space for sticky notes only.

Categorize & build a queue

Within the Stickies.app itself, I’ve got several categories: Home, Work, Design ideas, Tech tasks, Misc. etc.. Some of these categories come and go, but the first 3 are generally permanent.

Within each of those categories I’ve got a queue. I use a horizontal rule (5 equal signs), to show what I’m going to accomplish in the very near future. And beneath that I have a queue of the next big tasks to complete. I prioritize the top 5 tasks or so, and everything beneath those is just a brain dump of ideas and to-do’s.

So far, this has helped me stay organized and prioritize everything I need to do in my perpetually distracted life. It’s true what they say, organization creates capacity. (Hmm, I should jot that down, and write more about it some time.)

The quick rundown about why these styles are so great.

• PHP and JS are warm colors
• HTML and CSS are cool colors
• Comments are all the same color (across syntax)
• Not too bright, not too dull
• Easy to see PHP amidst HTML
• Shows spaces, tabs, and hard returns subtly

What’s with all the colors?

I can already hear someone saying “all you need is black and white.” That is true, that’s the essentials to editing text. A good friend once said to me “life’s too short to eat only grape jelly.” And he’s right. You’ve been eating the grape jelly of black and white syntax coloring, and until you’ve tried my strawberry-orange-marmalade-guava syntax coloring, well… you haven’t lived.

It’s not for everyone. I realize that. I’m not suggesting it’s the best. But it works for me. I’ve been using this theme for the last 2 months, so I can honestly say, that it does a great job for me, and the styles have been honed.

Warm to cool, back-end to front-end

The markup and style is in cool colors (purple through green) and the Javascript and PHP make up the warm colors (red through yellow). Making it very clear [to me] which language I’m working with. Also, spotting a snippet of PHP in a sea of HTML is a cinch.

I use PHP-HTML as my default syntax mode. Most of the code I write is mixed with some degree of PHP. The other styles are mocked off of the PHP-HTML Seestyle. The current version (0.9.0) includes CSS, PHP-HTML and JS styles. I’ll trickle the color coding through the rest of the available syntax modes in due time. HTML being the first of the next round of updates.

PHP-HTML styles

CSS styles

Javascript styles

Enjoy, or don’t.

Unique goal

The goal of UI Scraps is to gather UI design inspiration and discuss good, bad, & noteworthy snippets of UI design. I haven’t seen anyone else specifically doing UI design commentary in the way I’d like to see it. But there are two people who have inspired me to aggregate screenshots and discuss interface designs.

Inspiration elsewhere

A fellow Bostonian, Patrick Haney, has a nice collection of web site screenshots on Flickr and points out their triumphs and shortcomings. Check out his Web Design Inspiration set. The dissection and discussion of specific design elements is the key to his approach. He has a set for Uninspiring Web Design, too. It’s sparse, but it gets the point across, some web sites are a wreck. I’d like to capture bad UI designs more frequently at UI Scraps.

Then there’s Tom Fadail, a friendly chap who runs the site Design Snips. He’s assimilated a collection of web site snippets, then rates and categorizes them. One qualm I have with the ratings is, there aren’t any sites that get rated lower than 2 (I’m only guessing, though I haven’t seen any). It’s appropriate for his site, since it’s an aggregate of good design snips. This site is great because of its brevity.

Lessons learned

I applaud both of these gents, as they’ve inspired me and many others over the years. I plan to take the things I like about each of their projects and add my own spin to the subject.

I like the small scope of Tom’s Design Snips, giving just a taste to whet your appetite. And I like the discussion and elaboration that Pat provides in his photo set. But where they both fall short is the lack of examples of bad UI design. Learning from the failures and shortcomings of ineffective UI’s is extremely valuable, and should be captured.

How to share the screenshots?

I’ve tried to use Flickr to collect UI design inspiration (my photo set), but I like to keep my Flickr photostream for photographs, so that wasn’t the best solution for me. Sharing the screenshots on Skitch.com isn’t as accessible as I’d like it to be. Plus it’s not easy to make screen captures public by default.

Tumblr: for the share?

Due to my limited free time, I’ve decided to use Tumblr. It took a couple hours to get the site set up and running with all the trimmings. Comments via Disqus. I styled one of Tumblr’s prepacked minimal themes to my liking, mimicking this site. And designed another visual identity, which is always a treat for me.

I’m welcoming any questions, comments, or suggestions to make the project better. Feel free to comment here, there, or email me: Jason at this domain.

It’s a hardware problem

It’s not software related, but due to this ribbon cable being curled/bent.

Putting the laptop to sleep, removing the battery (while plugged in), and pressing down on the ribbon cable brings it out of sleep mode and gives life back to the keyboard & trackpad. Astounding. I discovered how to do this, thanks to a thread on the Apple Support forums.

The fix?

I rolled up a sticky note and placed it on top of the cable. When the battery is locked in place, it puts pressure on the cable, and makes the keyboard and trackpad functional.

Sticky note under battery saves the day

Isn’t that a little unsafe to put a piece of paper under your battery? Won’t it get hot down there? Yes and yes, it will get hot, but if my battery is hot enough to burn paper, I’ve got bigger issues to worry about than a toasty sticky note. So I’m not worried about it, for now.

One of my colleagues, Tony, put it nicely, “You don’t have to worry about sunburn if the sun explodes.”

Comment mile-markers

December 15, 2008 — Is this happening to your MacBook Pro? Test for this problem like this: Put your laptop to sleep. Leave it plugged in. Remove the battery. Press down on the ribbon cable. If your laptop comes back from sleep, then you’ll need to use the sticky note solution mentioned above.

January 7, 2009 — According to Simon, Apple does not think this is a problem. Although if you’re a loyal lifetime customer like Simon, you might get free repair. So take it in and see what you can get.

January 19, 2009 — New test data has surfaced! Not So Fast claims that this doesn’t fix his problem, but his trackpad and keyboard work fine if in boot camp Windows Vista. I’ll be sure to test this on my own laptop and report back sometime soon.

March 14, 2009 — I went to the Apple store yesterday. I reported this problem and their answer was quite intriguing. The answer I got was “It’s not a defect” which is really a stretching of the truth. The truth is, it is a defect, because if it’s causing a problem, then it’s a problem. I’m kind of surprised I got that answer. The nice fellow at the Genius bar said “it’s normal wear that causes the ribbon cable to shift out of position.” But if it was normal, then it’s intended to break, which I refuse to take as a serious answer. You can’t tell me that your product is designed to break. That’s hogwash.

However, they did give me a brand new battery, and improved the sticky note. Instead of using pressure to keep the ribbon in place, they used a piece of anti-static tape. It looks like regular tape. You could probably get away with using plain old scotch tape. The problem isn’t cause by lack of pressure, but because of the ribbon shifting out of place. So the tape holds it in place, and keeps a little pressure on it. Solved.

I want to pick a color overlay for a layer style. But Photoshop (CS3) makes me open 2 windows instead of one to do so. It’s a bit aggravating and wasteful. Please combine these windows.

When trying to change a color overlay, I’m confronted with this:

Naturally, I want to change the color on this menu. Which brings me to this:

But what I really want is both in one, like this:

Wouldn’t that be great? Now get on it, Adobe. Thanks!

I’m an occasional jetBlue customer. And over the years, I’ve noticed their email marketing has become progressively complex, albeit meaningful.

If you receive their promotional emails, then you probably know what I mean. The most recent headline reads, “Get 10% off selected flights.*” Here’s the hilarious asterisk clause describing when I must fly to get the 10% off.

Code is valid for 10% off of o/w or r/t travel that is purchased by November 13, 2008, 11:59 PM MT, for travel between November 10, 2008 and February 10, 2009. Blackout dates are between November 25, 2008 and December 2, 2008, between December 16, 2008 and January 7, 2009 and between January 15, 2009 and January 19, 2009.

Okay, let’s lay out all the variables without the negatives.

I’ve got to buy the tickets some time in the next 3 days. Fly between November 10 – 25, or December 3 – 15, or January 8 – 14, or January 20 – February 10. That’s pretty complicated, but I’m not sure they could simplify it any more. Unless they said “Fly anytime but during Thanksgiving, Christmas, New years, and the Super Bowl.”

Exactly when the casual traveler might plan to take a holiday. My guess is, their prices increase during the upcoming holiday season, and the compensation is targeted at business travelers. So, this isn’t an offer for casual fliers.

Crafty kicks in

Here’s the kicker. I’m still going to fly jetBlue during those blackout dates, regardless of the 10% discount that I’m not eligible for. Because I’m about to buy tickets to fly during the holidays, and this email prompted me to visit jetBlue when I do.

They wouldn’t cut to the chase, and say “No holiday flights.” They would get less of a click through rate. Smart email marketing on their part. Compassion for their business customers, clever marketing for the casual flier. Or should I say, “casual jetter?”