Archive for the 'Design' Tag

Posted by | January 07, 2010

Consultant Thursdays: Should User Experience Designers Know Design Or Programming?

That was a question that came across one of the mailing lists — “do I have to learn how to program to be a good user experience designer?” A job posting was listed where the requirements could have been along the lines of smoking crack, and for new designers, they wouldn’t know any better because they are just trying to make a buck.

But should they?

That’s a hard question to answer, especially with the ever changing landscape of the industry.

The answer: it really depends on where you live and what you are looking to do. Many employers are looking for jack of all trades (especially in startups), while others are looking for specialists. Some are willing to give up deep skill sets in one area versus knowledge in all areas, or are looking for people of unique skill sets to build teams around.

A UX Designer in San Francisco is going to have a much different working experience than one in Columbus, Ohio because they will be at much different companies.

I’m lucky to have worked in both generalist and specialist environments. To be honest, I like getting my hands dirty sometimes. That includes building prototypes, doing my own guerrilla usability testing, and even throwing in some design to make it high fidelity.

Other user experience designers like to focus on specific areas, like user research. It just depends.

If you know something about code, you’re less likely to design something that can’t be built.

Pros – There’s nothing worse than designing a solution that you think makes it really easy for the user, and then the programmers come back to you and say, “Well, that’s nice, but it’s going to take two months and we have only a month.” It’s like designing a car: if you design an engine that’s too big for the frame, the engine design has to be reworked.

Cons – That said, if you get too heads down in the code, you are going to be less effective as a user experience designer. Or, worse, you could limit your imagination and design a solution that would be more effective if you knew less about what was under the hood.

Specialists get paid more, but have fewer opportunities.

Pros – Everyone loves a big paycheck, and specialists are always going to have deeper knowledge of a particular topic. If you’re good, being a specialist means that you’re sought after. I have a lot of experience in e-commerce systems, for example, and somehow manage to improve those user experiences that lead to improved revenue. That’s a skill worth having that will make you valuable just about anytime of the day.

Cons – If they think you are too much of a specialist, it becomes really hard to get a job (“I didn’t know you could do that”), and in a bad economy, the last thing you want to do is fence yourself in. Those that were working in the field during the early 2000′s remember the day when being a project manager or a psuedo-programmer was a good thing. There’s nothing worse than being “just” a user researcher when they are looking for an Interaction Designer with research experience.

Sometimes it’s just about setting expectations.

Pros — Even if you don’t call yourself a specialist, putting a wider net out there for jobs is better because there may be a position that requires several different skills (Knowledge of JQuery, CSS, XHTML and some light design on top of doing the usual User Experience tasks like wireframes). This could translate into where you build functioning prototypes that the developers can use to build the finished product, but during the interview process. That said, I just recently started learning SketchFlow, a wonderful product that’s part of the Microsoft Expression Suite. There’s no way I could have picked it up as fast as I did without some knowledge of other prototyping tools like Flash, Axure and Visio.

Cons — Some skills required for the roles are so divergent that what they are looking for is a unicorn i.e. that one person that knows all of the above, plus ActionScript 3.0, plus .NET. The people that know all of those technologies either are a) getting paid much more than just being a User Experience Designers, b) do all of them poorly or c) are full of shit. You can only be good at so much.

The real answer? Look at the market and act accordingly.

Do what you have to do, and where you want to drive your career to, to succeed. Talk to other designers in the area to get an idea what they are doing. And remember, it’s a changing landscape — that requires some flexibility.

Posted by | December 28, 2009

The Science Of White Space In Design

Sometimes we forget about this, but white space is a very important component in design and user experience. Inspired Magazine has a great post about the usage of white space in design, even if it is print.

Posted by | September 15, 2009

Typographic Design Patterns and Best Practices from the Best Blogs of Today

One of my favorite topics is typography and even though there’s a somewhat limited set of options in CSS, typography can still vary tremendously using pure CSS syntax.

Smashing Magazine conducted a detailed survey of 50 popular websites to see answer questions like Serif or sans-serif? Large or small font? Light or dark background? and more.

Though the findings aren’t scientific, the study shows a clear set of common practices and guidelines for setting type in Web design. Granted, these points should serve only as rough guidelines (not hard and fast rules):

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course, every website is unique, and few people want their sites to look like everyone else’s sites. But it’s always great to keep in mind that following these guidelines could make your website feel more familiar to your readers. (If you are a data and spreadsheet nerd like I am, check out the spreadsheet of the study and export its data for further analysis.)

Posted by | July 29, 2009

Formatting for Maximum Readability

Are your written materials easy to read? Sometimes people get so caught up in creating a certain image – or squeezing a lot of words into a limited space – that they completely lose sight of readability. Unless yours is a completely visual message, it’s important that people be able to read your words. Make sure your finished piece is formatted for maximum readability.

Make it Easy to Scan

People don’t want to wade through what appears to be a short novel. If the mere site of your written piece overwhelms the reader, you can bet he or she will quickly move on to something else.

  • Recommendation: Put your headings and subheads in bold type, use bullet points, left justify your text (don’t center everything) and break things down into short, easy-to-manage paragraphs.

Avoid Giving Readers a Headache

Have you noticed that an increasing number of websites are composed of tiny little white letters set against a black background? Ugh! Instant eyestrain.

  • Recommendation: For maximum readability of any written piece (not just websites) stick with dark type on a light background, and don’t use anything smaller than a 10-point font.

Think about Your Font Formats

Sometimes it works to use special formatting to call attention to particular words, but if you’re not careful you’ll end up making those important words difficult to read.

  • Recommendation: Go easy on your use of ALL CAPS, italics, underlines, Initial Caps, and other special formats. These all work well on headlines and brief items, but should generally be avoided on longer passages.

Remember, if your letter, website, brochure, or other written piece isn’t formatted for maximum readability, there’s a good chance it won’t get read at all.

Posted by | October 27, 2008

When Designing For Browser Size, Remember The Browser Chrome

This came up at work during a conversation about browser sizes and screen resolution: just what is the usable area of real estate in a browser?

That’s changing a bit with the advent of Google Chrome and minimalist browser user interfaces, but here’s a straight forward chart as compiled at My Own Shit (not kidding about the name), with some of my own notes added:

  • 640 by 480: 618 by 310 actual, 600 by 300 safe
  • 800 by 600: 778 by 430 actual, 770 by 420 safe
  • 1024 by 768: 1004 by 598 actual, 950 by 550 safe
  • 1280 by 1024: 1259 by 853, 1200 by 840 safe
I bolded the most relevant size, but I’m sure that the 1280 size is becoming more and more prevalent. Whatever suze you are designing for, it’s easiest to just think you lose 25 pixels horizontally and 170 pixels vertically, and should size the Photoshop mockup accordingly.
Posted by | October 20, 2008

Paradigm Shift: Chicago Tribune Goes Magazine/Web Design Style

I love print.

I’m going to miss it.

But every once in a while, something happens that makes me stand up and take notice in the print world.

The Chicago Tribune just launched a redesign, and it’s different — very different. I like it. Huge, huge type, lots of graphics, engaging look. Hope to pick up a physical copy sooner than later.

Rumor has it, the Los Angeles Times is next, and it’s never going to be the same.

The first question you are probably asking is, “Why are you talking about this when this is a site about usability?”

Here’s why: No matter how we slice and dice it, all media influences each other. Radio influences the web on how advertisements are structured for pod casts. Magazine and newspaper style design is making a big comeback in blogs. Newspapers are shifting to more magazine style design. And Magazines look to the web for greatness.

We should stay firmly in the physical world so we can adapt it the virtual one.

Posted by | August 20, 2008

Want To Get Started As An Information Architect? These Are Last Books You Will Ever Need.

I was asked the question where a new information architect could get started to learn about the field and I explained that there are experiences all around us that enable all of us to learn. It could be anything from buying speakers for your television to how to book an airline ticket: all of us is uniquely qualified to start as one if we’ve used a computer, and all it takes is just observing how users think and use technology to improve what we have today.

After that explanation, during which her eyes glazed over, the response was, “How about just telling me what books to read.”

Here are five books I like a lot.

Note that none of them (well, one) is written by one of the user experience experts that are most often cited in blogs. There are many authors out there that present equally valid points that should get equal time, and I found these books to be extremely useful and valuable. Most of the books describe the patterns and theory of information architecture and user experience, but a couple of them go into detail about the tools we use to communicate, and how we fit into the software development and web design process.

The last five books I would read if I wanted to learn about information architecture

Why We Buy: The Science Of Shopping

By Paco Underhill, Why We Buy is a great read on the observational study of why people shop, how they shop, and what they buy. Most importantly, it sets the stage for triggers for the motivations of completing an action, which is the basis of all interactive interactions.

This book is not too scientific, but honestly, you can look other places for that; what we’re seeing through the eyes of Paco is the emotions of browsing and shopping in the real world.

Don’t Make Me Think

Don't Make Me ThinkBy Steve Krug, Don’t Make Me Think is the cut-and-dry version of information architecture and the best methods of web navigation. Covered in 216 pages are enough screen shots, design patterns and quick points that just about anyone can get started on building their own websites or improving them dramatically.

What I like most about this book is that Steve doesn’t talk down to the reader like some other specialists, he informs the reader in a very comfortable, friendly tone.

Designing Interfaces

By Jenifer Tidwell, Designing Interfaces most importantly shows exactly what is most important about designing software and web sites: that all applications should follow a very well defined set of a patterns so the user interactions follow exactly what the user expects.

Jenifer’s book goes into excruciating detail of what interface widgets to use when, and why the widget should be used, how to use them, and examples of how the widgets were used in other applications.

Web ReDesign 2.0: Workflow The Works

By Kelly Goto and Emily Cotler, Web ReDesign works through not only examples of wireframes, site maps, and how to quote projects, but looks at the project management process of web development. What I like best is that the book shows exactly how Information Architects, Web Designers, Programmers and the client fit together in an orchestra of what happens before, during and after a site launch.

Kelly and Emily also do a masterful job of including other expert voices and opinions like Christina Wodtke and Lynda Weinman about what it takes to launch a successful and user-friendly website.

Grids for the Internet & Other Digital Media

By Veruschka Götz, Grids is a out-of-print but very valuable publication that goes into amazing detail about the usage of grids for interactive applications (not just the Internet but also for multimedia applications and print design).

The book also covers the lost art of typography, how it should be used in websites, and usage of type on a grid. Even if you aren’t a designer, you’ll appreciate the clear and concise examples displayed in a very modern fashion of this title.

Posted by | July 24, 2008

Consultant Thursdays: Sometimes The Best Design Isn’t The Best Design

I’ve worked with my fair share of clients, coming up with something cool or snazy, presenting it to them, they look at it, and the first thing that comes out of their mouth is, “I don’t like it” or “I like this design over here,” pointing at another design produced by another designer. There’s the usual complaint of, “but our design is better” or you mutter something under your breath.

Smashing Magazine has an article on this too, but here’s a few truths to live with:

The clients don’t always pick the best design

The design you are presenting might be something rich and inviting, with all the bells and whistles you throw on there. The other design might be something clean and sharp, but not exciting. Not exciting sells, especially in certain less progressive environments, like governments or large corporations. The stakeholder or final decision maker probably isn’t a designer, so they really can’t tell the difference between rich and not rich, just what they like or don’t like. Some of the sites I’ve designed I hate, but the client loved, because it hit their target audience.

The clients are influenced by a local designer

There’s nothing like being there in person when showing off a design, and if you can’t do this, you’re already at a disadvantage — you can’t discuss some of your motivations for doing a particular design, or taking a particular angle. Sometimes you are set up to fail from the very start, and it’s best to recognize it and put your best foot forward, even if you know you aren’t going to be the winning design.

Sometimes the best design isn’t the most usable design

When I was working at Escrow.com, eBay was one of our partners. We redesigned the user interface of the site, and on every iteration, we made it look more like eBay. On every iteration, revenue increased. As much as the user interface designer I worked with hated it, we had to keep going that way. Many users might consider eBay one of the ugliest sites on the web, but when revenue rises, you keep going that direction. If you don’t, you are ignoring your users. Follow the obvious roadsigns.

Design is subjective

Totally true, but the best argument I’ve set for some of the clients is, “let’s try some A/B testing.” If it’s a simple website, and the site gets a fair amount of traffic, you’ll know quickly which design works better. Changing the colors of certain buttons in a design can affect the conversion rate. As much as you would like to tell the stakeholder they aren’t the audience, sometimes it’s best to do just that by involing end users.

Posted by | July 02, 2008

The Web Going To International Typographic Style? It’s About Really Clean Design.

I have this love affair with Helvetica (note, I said Helvetica, not that bastard child, Arial) and other really clean type styles. It’s one of the reason I’m kind of futzing with this site on a semi-regular basis — I’m trying to get that perfect look typographically, and it will always be a work in progress.

Along those same lines, Samantha Warren has a great blog post where she talks about the shift of the web to clean, international typographic style, which basically emphasizes simple geometrics and focuses on minimalism. They point to iA Japan as an example of gorgeous design. I agree. iA Japan has another great read about typography, how the web is 95 percent tyopgraphy. Agreed there too.

 

About Usability Counts

Patrick NeemanPatrick Neeman is Director of User Experience at Jobvite, a social recruiting platform and runs both the UX Drinking Game and Startup Drinking Game | More | Contact

If you're a UX Designer in San Francisco, ping me at Twitter. I want to add you to a list I have there.