Netsuite, for those of you who are still blissfully unaware, can be described as a giant, Cthulu-esque ecommerce platform, graced with enough tentacles to integrate warehousing and distribution, product development, management, accounting, and the front-end webstore.

To be fair, the webstore, and thus the products assigned to it, is really the only part of Netsuite that I have anything to do with. I get the impression that the webstore area was a tacked-on afterthought that has since grown, and I can promise you that Netsuite corporate either didn’t talk to, or didn’t listen to, any good usability guys while building it. So it’s possible that the warehousing and financial areas of the system are screamingly stellar, and it’s just the webstore part that makes me want to break my own fingers.

Like with so many of the truly evil influences in my life, I have a love-hate relationship with Netsuite. When one of my clients opted to buy Netsuite’s Gold Support option, I discovered that the NS guys were so on the ball, I had to resist the urge to ask them for relationship advice and stock tips. One of their Indian support reps actually wrote me a Javascript function off the top of his head that not only solved the problem I was calling about, but several other issues besides, and which, I’m sure, would have produced cold fusion if I’d passed it the right arguments. And that wasn’t an isolated incident.

On the other hand, well… allow me to demonstrate with a real-life example:

The problem: 450 images were uploaded to the Netsuite images folder with the wrong name. I need to delete them, and re-upload them with the correct name.

Easy-peasy. I’ll just search the file cabinet for the wayward images and delete the returned results. Here are the results now:

Wait, what? There’s NO MASS DELETE OPTION FOR RETURNED SEARCH RESULTS?

In fact, there’s no delete option on this screen at all. The only way to delete from a returned search is to click “Edit” for each file, then click here:

At which point you’re not returned to the search results, you’re returned to the File Cabinet screen:

… which a) erases your search results and b) tantalizes you with a giant “Delete Files” button, which, being the spawn of the devil, takes you to another screen, where file cabinet images are not sortable by any kind of criteria, and on which page NO FILE PATH IS SHOWN, making it completely IMPOSSIBLE to know whether or not you’re even deleting the right item from the right place and <hysteria> oh god oh god oh god you already have a checkbox on the file cabinet screen! Just add another checkbox! All the pieces are there! Just ONE MORE CHECKBOX! AND I CAN CLICK IT AND DELETE THINGS! RIGHT FROM HERE! WITHOUT GOING ANYWHERE!</hysteria>

*ahem*

That’s right – 5 clicks to delete each item. 450 items. 3 unbillable hours. Now if you’ll excuse me, I have case of carpal tunnel to cultivate.

This set includes a Photoshop CS-series compliant *.asl file with 3 peeled sticker layer styles, installation instructions, and a the original *.psd, which will allow you to edit the styles to suit your needs.

This set includes a Photoshop *.pat pattern file with 4 bamboo color combinations, installation instructions, and a vector Illustrator file.

When the code you’re handed is kind of shitty, roll it into a ball that’s 250 times heavier than your body weight and bury it.

Fresh from the labs: 10 free grunge file extension icons in .png format. All icons are 56×56 px. File types include: zip, url, png, eps, doc, docx, jpg, mov, mp3, pdf.

Me: Hi! I’d really love to buy your new Drupal module. I was wondering if you guys do custom scripting? Could you integrate a checkout of some kind? What would be a ballpark quote for that?

Him: Uh…. yeah, we talked about it, but that would be a lot of work.

Me: *eyeshift* Okay. Still, though, when you say “a lot of work”, how much are we talking about?

Him: I mean it would pretty much be impossible. We’re super busy for the next few months.

Me: But I can get someone else to modify it instead, then? Hire a freelancer?

Him: Um, yeah, we’re legally required to let you do that.

Me: … Good? Anyway, if you can’t do that modification, would it be possible to do a slightly easier modification?

Him: Theoretically.

Me: …

Him: We’re really busy.

Me: For the next few months.

Him: At least.

Me: (silence)

Him: (silence)

Me: So, uh, can I buy your module? As is?

Him (sighing heavily): Why don’t you shoot me an email and I’ll pass it along to the guy that handles this stuff, and he’ll let you know what you have to do. I’m the More Technical Guy.

I still haven’t heard from them.

The biggest fail here is not that More Technical Guy was kind of a dick. I mean, I have a thing for antisocial coders. They’re hot. Where I’m concerned, on a normal day, the word “theoretically” constitutes a wildly successful pick-up line.

The fail is that the CEO is letting More Technical Guy pick up incoming calls from clients. Unless your coding team is made up of peppy, well-informed girls named Amber, I don’t want to talk to them first. Nay, YOU don’t want me to talk to them. Ever. Why? Because even though the merest whiff of a sales pitch would have had me forking over, I still have my money right now.

The entire structure of a programming firm is based around keeping the coders in the most comfortable, moist… est (most moist? really?), dumb-proof bomb-shelter you can manage, away away away from annoying client questions like “Can I buy that?”, and all the way on the other end of the office from the chipper morning people. Let’s stick with that, mmmkay?

That is all.

Dear Papa John’s: I will fail to perform a usability assessment for *way less* than your guys are charging.

Behold, a maze of digital dungeons and garden-topped horror… *flashback dream sequence*

SCREEN ONE: THE HOMEPAGE

Giant picture of stretchy cheese, check. In-your-face order button, check. Masturbatory picture of founder making a manly basketball shot. Um, check. The door to the labyrinth is deliciously disguised in garlands of high-calorie photography. Pizza: I want it.

Except for the one that’s in Spanish, the nav buttons are looking pretty useful. Hell, standing here, I feel like I can do anything. I’m on top of the world. I can even follow Papa John’s on Twitter (“Making another pizza!” posted at 10:25a.m. “Making another pizza!” posted at 10:25-and-a-half-a.m. “Making another pizza!” posted at…). Turns out that what I can’t do is view the menu without plugging in my zip code.

Not that this is unique to Papa John’s. Thanks to the joys of franchising, each menu is probably a bit different, and they need your location to give you accurate readings. So we’ll cut them some slack, and click on “Menu & Specials”.

Which brings us to…

SCREEN TWO: PLUGGING IN YOUR ADDRESS

The problem here is that plugging in your address and zip code takes you to one screen, while plugging in your city and state takes you to a completely different and way more confusing screen. In a futile bid for expediency, let’s pretend I don’t know that, and I’ll jump straight into the ordering process by filling in an address and zip.

SCREEN 3: THE MENU

Helllooooo, ugly! But OK. Large pizza, plz.

SCREEN 4: CHOICES, CHOICES

If the choose-your-toppings screen has to be this long, then it better be fun to navigate. It had better not, Papa Johns, look like an interactive Privacy Policy. Bottom of the page, I’m presented with two options: “Add to Order”, and “Add to order & checkout”.

I’ve picked a large pizza, I’ve added some topping goodness, and now I want to eat it, so I’m gonna go ahead and “Add to order & checkout”.

SCREEN 5: OHEZ NOES!

But… I don’t have an account. The email address that auto-appears belongs to someone else who used this computer months ago. And there’s no “Not You? Sign up for a new account” option. Save me, Firefox Back Button!

SCREEN 4… AGAIN

Following the trail of garlic-powdered breadcrumbs I’ve cunningly strewn along my path, I land back on the Choices screen, where I, imitating the casual pizza buyer, fail to notice that all of my selections have been wiped, meaning I’ll need to plug them again. Getting hungrier, I try the other button. Add to Cart.

SCREEN 5’s EVIL TWIN: AN ERROR HAS BEEN DETECTOREDZ

HAHAHAHAHAHAHA. That would be the funniest prank call ever. “Yeah, hi, Papa Johns? Oh good. I’d just like to report that there are invalid items in deal code EDO89, but I think that’s only for restaurant number 369.”

I am so tempted to call them right now and actually… oh, no wait. Even if I wanted to, I can’t make that phone call, because there is no number, Neo. There is also no useful error text to explain to the user what actually went wrong. And in an age of live field authentication, there is no need for this screen.

I’m guessing I landed here because I didn’t re-do the choices screen. So let’s hit “Continue”, which should take me back to that screen, where I can modify my… oh. Nevermind.

SCREEN 3: WRATH OF KHAN

Aaaand we’re back to the menu. Aaaand I now have 2 items in my cart, though I only wanted one. I don’t see a checkout button. “View Cart”, maybe?

And another thing: I try really hard not to get my panties in a bunch over “their” vs. “they’re” mistakes and other small annoyances in casual writing. I don’t want to be that girl. But if you were to see mah panties in the presence of crappy grammar, you might rightly point out that they do wad up a little. And I can’t help feeling like having a “View Cart” button for a pizza delivery checkout is a copywriting fail. Just as there is, in fact, no crying in baseball, so there are also no carts in pizza.

Point is, it doesn’t matter what you put on the button, as long as your customers know exactly and immediately how to give you money. “View Cart” doesn’t do it for me.

SCREEN 6: CART

After removing the superfluous pizza, my order looks right, and I would really, really, really like to eat now. Checkout button gets some love.

SCREEN 5: BACK IN BLACK

Dude, you have got to be kidding me. And don’t even ask me what happens here when you have a second Papa John’s tab open, because I’ll lose d6 sanity points. If you were gonna force me to login (which I shouldn’t actually have to do to order from you), then all login information should have been gathered when a) you were gathering zip code data and b) I was still excited about ordering.

This is where 95% of your frustrated customers pick up the phone and just call the order in, begging the question: Why, pray tell, did you spend 20 grand on an online ordering system?

With the Horn of Gondor ringing in my ears, I decide this is no longer about pizza. This is about war.

A very careful perusal of the screen I’m staring at yields up a clue:

A HAH!

SCREEN 7: A NEW ACCOUNT SIGNUP BUTTON!

Sigh. Click.

(Also, “Online Need Help Guide?” Yes, online help you need.)

SCREEN 8: FILLING OUT MY TAX RETURN

After filling out a strangely dual-paneled questionnaire (nice mushrooms) in which I tell PJ’s my marital status, favorite Crayon color and consistency of my last stool sample we get to:

SCREEN 9: NOW WITH 100% MORE POINTLESS CLICKING

SCREEN 10: MAKE IT STOP

SCREEN… 3

NOOOOOOOOOOOOOOOOOOOOO!

“I am so offended right now,” said my husband, giving up and logging onto Dominos, “that I’d rather be repeatedly kneed in the balls by the Noid than pay Papa John’s twenty bucks to not fix their interface. And I don’t even like Dominos.”

In this intermediate-advanced illustrator tutorial, we’ll learn how to make a 3D newspaper icon in Adobe Illustrator. This tutorial is based on the news icon in my <shameless plug> Formida icon set </shameless plug>, and was made in CS3.

We’ll be using the pen tool to create our basic background shapes, adding some shadows, color and shading to give the newspaper a sense of bulkiness and, uh, floppiness. And then we’ll use Illustrator’s Envelope Distort feature to mold the newspaper content to its background. This is the icon we’ll be making:

You should already have a basic understanding of how to use the pen tool and the direct selection tool (white arrow), how to apply color and gradients, and how to move, copy, and import objects and text boxes.

SECTION 1: PAGES

The first thing we’re going to do here is create a series of stacked “pages” to form our newspaper background. To each page, we’ll apply a light white-light gray gradient, and then we’ll apply a drop-shadow to each page to give the illusion of depth. Let’s get started.

Grab your pen tool, and draw a shape like the one below. This will be the top page of your newspaper. The color doesn’t matter at the moment. Mine is green so it can be seen easily. Note how the bottom bows out slightly.

Click on your shape so that it’s selected. Then click over to the gradient tool. You want to apply a light gray-dark gray linear gradient on the shape. The color is very important here, as an unrealistic color will make an unrealistic-looking newspaper.

My gradient colors are:
1. Light gray: #F7F4F5
2. Middle gray: #DDDCDC
3. Dark gray: #878585

Below is what my shape looks like with the gradient originally applied, then correctly aligned. After I’d created the correct gradient, I had to try several times to “realign” the gradient on the shape, so that the bottom dark gray lined up with the angle of the newspaper.

To realign a gradient, make sure the shape is selected. Select the gradient tool. Drag in a line over the top of the shape in the direction you want the gradient to go. This will reposition the gradient.

Now to apply a drop shadow. Select the shape, and go to Effect > Stylize > Drop Shadow. You probably want your drop shadow to be lighter than you think you do. The human eye picks up very subtle variations, so you’re drop shadow shouldn’t be too in-your-face. My settings, and results, look like this:

The trick to making a fully filled out newspaper is duplicating the finished front page you made, altering it slightly by re-aligning the gradient, and altering its shape slightly so that you appear to have multiple pages. This is my finished blank newspaper:

This stack looks like a filled out 3D object. But when we break it apart into its individual pages, we start to see how easy it is to construct a nice looking paper. Here are each of the 6 pages of the newspaper, from front to back:

Your gradients don’t have to look exactly like mine, but they should be varied.

To start duplicating pages like this, select the first page we made, Page 1. Ctrl + C to copy, and Ctrl + V to paste that copy onto the screen. Using your direct selection tool, select just the top-right corner of the copy and change it by dragging it outward, pulling it in, or changing its curve ever so slightly. Do the same for the top-left corner.

With the new page still selected, select your gradient tool, and re-align the page gradient as desired. Then, with your page still selected, right click > Arrange > Send to Back, and position Page 2 behind page 1. Repeat. Adjust page corners as necessary for the desired effect.

You might want to remove the drop-shadow from the last page by selecting the last page (Page 6, in my case) going to the Appearance palette, selecting the drop-shadow field, and dragging it to the trash. If you can’t see the appearance palette, go to Window > Appearance.

Once your pages are stacked and arranged, you’ll want to add some very light shadows to the front of the page to simulate light page folds, and make the newspaper appear to be a little floppy. These will look unrealistic until we drop the newspaper content on top of everything, but bear with me here.

First, using your pen tool or the arc tool, create two curved lines across the newspaper – one thin, one thick. They should be dark gray in color.

Select the smaller arc, and set the opacity (under the Transparency panel) to 63%. Then, go to Effects > Blur > Gaussian Blur. I set my gaussian blur to 17.0 pixels, but your blur will depend on the relative size of the object in your document.

Select the larger arc, and do the same. The opacity on my larger arc is 55%, with a gaussian blur of 42.0 pixels. Select the appropriate blur and opacity settings for your own strokes, so that when you’re done, you have something like this:

Okay, that’s it for the pages and backing. In the next section, we’ll talk about laying in some content.

This is the first set in a new series of 3D icons. You get 6 icons in three sizes, 48×48px, 64×64px and 128×128px. Icons includes – newspaper, RSS, briefcase, home, download and mailbox. Prepaid GraphicRiver customers will pay $3.00 for this set, or buy it without a deposit for $5.00.

We were going for cheap, fast, and simple, simple, simple, so in terms of a design, I settled on the blissfully free Grace Photoblog Theme developed by the UK’s own 7879 Designs.

Price: 5 out of 5

There’s only one f-word I like better than “Free”. And that’s Fibrous Astrocyte.

Functionality: 4 out of 5

Grace comes with a couple of delectable features: an optional “featured content” image rotator that pulls posts from a pre-determined category and displays their attached images on the homepage; and a auto-resizing thumbnail script that, um, auto-resizes thumbnails.

There was some “hrm”ing, some turning the box upside down and shaking it, and some re-re-re-referencing the Grace homepage comments to get the rotator kicked off, and I gather that a few other users had installation issues, but it did work. If you’d like a demo of the rotator, it’s been disabled on patriciapschaefer.com, so check out the live demo courtesy of 7879.

The thumbnail script works like a charm, with each post only requiring one image upload. Grace takes your main image, tosses it up at the top of your post, makes a thumbnail out of it, and drops that thumbnail into the home page. If you’d prefer to control the look and feel of the thumbnails yourself, making them by hand, the Grace admin panel lets you toggle auto thumbnails off and on.

Out-of-the-box Design: 3 out of 5

The beauty of Grace Photoblog is the simple media engine that drives the theme, and in the fact that the photographer’s work, not the web design, is what the theme highlights.

Grace puts the photographer’s creations front and center, with a default capacity for 900px width for each photo – that’s a maximum size I couldn’t find from any other free theme, particularly while the photo is still residing inside the template (not linked off-site or in another tab / window). In terms of photographic display, I think Grace has everything a photographer likes to see.

But an overlarge header that drops photo content too far below the fold, ultra-basic CSS, and a dubious grungy background make Grace in desperate need of some pre-launch tweaks.

Ease of Modification: 5 out of 5

Though the out-of-the-box design isn’t all that much to look at, Grace doesn’t need too much work to look sharp. I made four extremely fast mods to this theme:

1) Took the header height down to a manageable size.
2) Added a dark wood background
3) Added the “wp-pagenumbers” plug-in, which replaces the default Wordpress “<< Previous – Next >>” links with proper page numbers.
4) Dropped in a new logo.

Grace landing page before:

Aaaand after:

And then I gave myself a Girl Scouts sloganeering badge for coming up with Grace: the easy-bake oven of WP-powered photoblogs. Eh? Eh? All in a day’s work.

So, in conclusion…

Awesome for: Photo-centric sites with bare-bones content and navigation, or for use as a “blank slate” engine to design on top of.

Not so much with the: Integrated design.