Entries Tagged 'Concept and Design' ↓

In a previous job, I used to be the Lead User Interface Designer for an enterprise level CMS (Content Management System). One of my last tasks, was to update the “New” icon. The new icon creates new records. Sounds pretty easy right? Two months after undertaking that task, the icon was still not updated. Why? The software development industry is relatively young, rapidly evolving, and surprisingly little is automated. It is full of communication issues, organizational issues, customs, values, fashions, and myths. It brings out the best and the worst in people. Personalities determine much of what happens. It is more like making movies than engineering cars.

If I paid myself a salary, I should’ve gotten at least $120 to write this article. - Jeff Knooren

I was told it was impossible to update any icon in the system. The Engineers who coded the interface had created 20 New icons over the years. They all had different file names, height/width attributes, located in different folders, yet they were essentially the same icon. Frustrating, because in software development, design is undervalued. Often no user interface design is done, or it’s considered a formality, before the “real work” of coding. organizational issues then becomes recoding, and recoding, and recoding. This is short-sighted, because you write more code in the long run. The useful debate is about doing something right from the beginning, which saves you 10x the work later on; Capture problems early.

If an engineers objective is to finish a function on time, and a designer’s objective is to make it look pretty, that isn’t teamwork. Each member needs to put trust in the expertise of the others. They should welcome a system that makes their job easier. Specific to this post, I’m talk about graphic sprites. An explanation of it can be found on AListApart. So, how the AListApart article applies to your website, is demonstrated below:

Structure

You need at least two rows, and two columns. I’ve got a 400×400px graphic divided into a 20×20 grid. The top-most row is for actions such as “Add” or “Delete”. The left column is for “Base” icons, like “Document” or “Appointment”.

Actions

An action gives you the ability to mix-n-match icons symbols, like pluses or checkmarks, with a base icon placed below it. For example a “Document” icon, combined with a “+” symbol makes a “New Document” icon.

Base Icons

Are “things” that are acted upon. One problem you will run across with this grid method, is that not every possible combination of icon will make sense. Just ignore the few unusable combinations.

Setup

My icons generally have a strong black border around them. Notice the icons are smaller than the grid. This allows me to get the best possible placement for bases and actions, because sometimes the strong black borders are too thick.

Why do this?

You’ll be able to easily compare the icons to make sure they’re a consistent set of icons, and not a hodge-podge of icons from say, windows and mac operating systems. Using this grid format and naming convention, will allow you to keep all the icons organized in one file, rather than possibly hundreds of icons scattered about your application.

Think back for a minute and try to think of anything that you’ve purchased where your emotions have not played a major part in the decision process. Emotions help visualize ourselves benefiting from the purchase. Food manufacturers count on bright packaging to attract your attention so you’ll buy their products. With that in mind, make your sales literature produce positive thoughts in your customers head. The fact is, emotions are attached every purchase, and that goes for a client purchasing your services in web development.

The next time you see a television commercial, consider that the company who made that ad probably spent millions of dollars on it. They are paying for advertising that works, because it relates to their target markets by appealing to their emotions. The Web is different from television, because each page is something you think about, while looking at and reading. Conversely, TV is mainly an emotional zone out. This makes TV suited for flashy advertising to promote superficial qualities of products. Every one of my clients who makes first contact with me, has said they liked my previous work. See, emotions gave away why they chose to buy from me, and I didn’t have to blow anything up.

Putting Emotions In Your Advertisements

Every product or service fills a particular need. You’ll have to find the benefits and emotions in what you plan to offer. By focusing your efforts in writing with positive emotions, it will result in a better response rate and closing ratios. Emotional Response Marketing really works. Here are three simple steps to get you started:

• List the Benefits of Your Service - This should have already been done when doing market research. But know what benefits your service provides your prospective clients.
• Take Each Benefit and Match the Emotions It Creates - Buy me, buy me, hire me, hire me, look at me, look at what I’m doing. I’m a ho. We’re all hos, doesn’t matter. We’re selling a part of our self; we’re selling our vision. Not all emotions are going to be positive ones. But use negative emotions sparingly. You want to focus on the positive emotions as they are much more powerful. Everyone wants to feel good so I recommend keeping positive.
• Create Exciting Words and Phrases to Relate These Emotions - Guaranteeing your service, or mentioning discounts are good examples to talk about. Pretend a client is sitting in the same room with you, so can relate to them on a one to one basis. The hard part is getting people to understand where you’re coming from and getting clients to trust you; to hire you and do exactly what you want to do. Getting clients to push their thoughts and push their ideas a little farther.

Create your own store with a shopping cart, and sell consulting services as items in your store. - Jeff Knooren

After the buying decision is made, we begin the process of using the analytical part of our brain to reassure ourselves we made the right choice, but the fact still remains; we all make emotional buying decisions. When you create advertising pieces, be sure to keep your focus in mind. What do you want to accomplish? If every aspect does not lend itself in some way to getting the prospects to respond the way you need them to, consider reworking.

Understand the most fundamental desire of any customers: They don’t want to be sold. They want you to solve a problem. So don’t sell. Solve! Their problems keep you in business. Especially if you solve it painlessly.

1. You’re not selling books; you’re selling guidance, and help.
2. You’re not ice cream; you sell cool, comfortable, indulgence.
3. You’re not selling expensive clothes; you sell envy.
4. You’re not selling perfume. You sell love in a bottle.
5. You’re not selling a business opportunity. You sell the end to ones financial worries.

I would prefer not to work with clients who just want to ‘get it done.’ I turn away clients who want the easiest, fastest, and cheapest way. Whether it’s billboards, postcards, Web sites, newspapers, magazines, or brochures — keep your focus in check. Making it easy for the customer to buy will bring results. In other words: help customers buy; don’t try a hard sell. Because hard sells only work on TV.

References:

• Levels of Processing: A Framework for Memory Research (context) - Fergus, Robert et al. - 1972
• Implicit Memory: History and Current Status (context) - Daniel - 1987

As an addition to yesterdays post about CSS Best Practices; sometimes I wonder if I will ever live to see the day when CSS rounded tabs would be a simple process? I’ve spent damn near 24hrs trying to get it to work. Here is what I mean:

I’m not asking for sharks with freakin’ laserbeams on their heads! I came so close, but as soon as you try to adjust paddings or whatnot for that one pixel difference, it all falls apart. I think anyone who try’s to accomplish “tableless layouts” is a fool! Using tables, and 20 minutes I acheived the desired result:

Not only does it line up perfectly in all browsers, but I could easily make the roundness not extend 100%. The idea on that, is I might want to put text links or icons to the far right side. Another bonus, is there are ready-made table cells available for an Icon sprite which I mentioned a few days ago.

It is very easy to layout a page like this using a simple table. It is just as easy whether the columns have fixed widths or variable widths. Flexible-width approaches like this one tend to be harder without using a table. My conclusion, is that tableless layouts are hype used to sell books. If you have the skills to develop a tableless-layout web site, you also have the skills to develop one with table-layout that is “Strict” compliant, accessible, efficient, flexible, etc. It validates, why not use it, what’s the problem?

My life revolved around stylesheets when I lended a hand to The Web Standards Project. Web sites/software today is pretty much designed using CSS and Web 2.0 methods of prototyping. So when I was Lead Interface Designer at Kintera, I really enjoyed questioning every decision about interfaces, and how we use CSS so we’re not locked into decisions we can’t get out of.

No PX for font size

If the majority of your visitors use Internet Explorer, then specify PX on the BODY tag only. Let this be a starting point that the other tags will inheirit the relative sizing from. Don’t use pixels for anything else. Using percentages (or other relative values) to specify page layout in CSS allows readers adjust the font sizes. The exception being; You’re building a piece of software

Avoid Unnecessary Selectors

I’m still trying to explain this properly, so here it goes; In HTML layout, CLASS and IDs do not have to be filled out for every HTML element on the page. Tags are nested within each far enough, that they become unique quite easily. This is due to the DOM or Document Object Model, and all webpages ever made on the internet follow this structure. It simply means that what ever you put on a webpage is nested in some kind of container. In that sense, it is like a book with a Table Of Contents. Therefore, each webpage is a book with table of contents.

Here I’ve created a basic table. There is a header, and two columns. But notice how they have a layout which can be mapped to a table of contents. There is a Title, Subject, etc… Using this general format of a book, make it easy to communicate to someone else where content is on a page. Simplying say “it’s a title” is easier than “customformat_IU_600xLEFT” Because no-one wants to memorize the names of selectors.

If you want a tableless/CSS mapping for this convention; Using H1 -> H6 should be the HTML code equivalent. The H1 though H6 tags are the easiest way to apply style to your content, without having to manually type in the ID or CLASS of that element. If at all possible, you want to eliminate custom classes, because it’s just more things you have to remember on a daily basis. CSS does the hard work for you by rewriting these tags. It is acceptable to use HTML to align text right, left, center because using CSS to do this might create too many custom classes.

Here I put the above convention to use. Another benefit, is that software like Dreamweaver has keyboard shortcuts to select H1-H6 tags, eliminating the need to manualy have to type them out. Jack Slocum has a similar method using compass directions (North, South, but without the ability to use shortcut keys.)

CSS declarations on one line

I’ve always put my entire declaration on one line. Here’s an example to explain what I mean:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
   font-size:18px;
   border:1px solid blue;
   color:#000;
   background-color:#FFF;
   }

The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an ID or a CLASS. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many. Here is a stylesheet I use as a template.

#xxxx{}
#xxxx .input{}
#xxxx .selected{}
#xxxx .textarea{}
#xxxx a,#xxxx a:link,#xxxx a:visited{}
#xxxx a:hover{color:#FF6600}
#xxxx b{}
#xxxx h1,#xxxx .title{}
#xxxx h2,#xxxx .subject{}
#xxxx h3,#xxxx .regular{}
#xxxx h4,#xxxx .highlight{}
#xxxx h5,#xxxx .special{}
#xxxx h6,#xxxx .help{}
#xxxx i{}
#xxxx img{}
#xxxx p{}
#xxxx span{}
#xxxx td{}
#xxxx th{}
#xxxx th a,#xxxx th a:link,#xxxx th a:visited{}
#xxxx th a:hover{}
#xxxx ul li,#xxxx ol li{}
#xxxx ul,#xxxx ol{}

Software like Dreamweaver has keyboard shortcuts to select H1-H6 tags, eliminating the need to manualy have to type them out. - Jeff Knooren

Allow Block Elements To Fill Space Naturally

I set a width but not the margins or paddings. If setting margins or paddings, I don’t set a width. The box model is such a pain, especially with percentages. Therefore, width on the containers and then set margin and padding on the elements within them.

CSS Shorthand

It has been argued for quite some time that setting margin-top, margin-right, margin-bottom and margin-left is too verbose, and it will take fewer bytes to use shorthand. However, the savings won’t make that much difference. Additionally, paddings and margins are STILL not properly rendered in all browsers. The long form version is the only one that works without hacks.

Browser Support

Support only the latest browsers. That means dropping IE5 and IE5.5 support. phasing out these old browsers means having to use less hacks to get things working. Along with using very few hacks means I can avoid shovelling different style sheets to separate browsers. I have one sheet, and that’s it. You have to consider your audience before dropping browser support.

One of the good things about making a time tracking application from scratch, is that over time, you can make small improvements to it as the need arises. - Jeff Knooren

Containing Floats

After many frustrating attempts with relative and absolute position techniques, you might have figured out the only way to put things where you want them is to use the Float attribute. But only worry about containing your floats if you have a background you are trying to set on your container. The overflow should be set on the container. The content within the container should be designed to stay within the container. Anything too big and it’ll get clipped. Shifting things using negative margins outside the container will also get clipped. Here is an example, of floating images, from the main page of my website

This isn’t one floating image, it’s 7 images floating and overlapped. The arrows can be positioned using CSS.

Overflow

Overflow is usually where people get bit by IE. If you’ve got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you’ve messed up your margins, widths, or padding on one of these containers but Firefox (et al) won’t reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you’re better off trying to fix the issue in the design.

Floating multiple elements on the same line

For basic positioning, relative and absolute positioning work just fine. But when your layouts become a little more complex as they always tend to do, tyring to position div’s within div’s using this method can become a real struggle. The cool thing about Float, unlike the other positioning attributes it makes it so easy to position elements right next to each other. For example, if your wante to create a navigation menu that spanned left to right with say 5 different boxes, the Float attribute makes this so simple. When you create a floated div tag using the following code: float: left; providing it fits into the length of the page it will position this flush with the side of a previous floated element:

Spending an hour to prepare an estimate, along with 100 other people isn’t a productive way to do business. - Jeff Knooren

Summary

When you get to be in a position to lay down some rules for others to follow, you have to go beyond a preliminary examination of your choices. This questioning lead me to examining issues such as, WHY is that font THAT size? Or, why is this thing light blue, and not dark blue? To begin such a questioning process, you need to start somewhere, and document those choices. This post, is what the first version of that foundation might look like. Additionally, I think developers tend to go overboard in creating CSS selectors. Well, what have you got to say for yourselves?