Archive for the ‘Web Design’ Category

Giving Users Some Credit [Design Informer]

Aug 18, 2010 Interaction Design, User Experience, User Interface Design, Web Design

Really liked this article, which is a little reality check for web usability. Especially neat was the UX version of “The Golden Rule” at the end of the post.

enjoy.

Giving Users Some Credit | Design Informer:

Creating designs that are intuitive and easy to use is something we should continually strive for if we want our sites and applications to be visited and used by as many people as possible. Ultimately, making those sites easy, as well as enjoyable, to use is a critical part of helping them be successful and it starts by abandoning outdated opinions on what users can, and cannot, understand. It starts by giving our users some credit and realizing that they are not ‘idiots.’

Simple CSS Cross-Browser Drop Shadow

Aug 17, 2010 Web Design, Web Development, Web Standards, jQuery

After seeing what Google did with Google Images, I thought, “OK… time to find a cross-browser way of doing drop shadows.” I was expecting to find something that combined CSS, HTML, and possibly some JQuery (which has some plugins for doing drop shadows, but none that really struck me as adequate for my project’s needs).

So then I found a reference to this blog post by Robert Nyman:

Drop shadow with CSS for all web browsers – Robert’s talk

…which includes a very simple CSS rule that seems to work in the following browsers:

  • Firefox 3.5+
  • Safari 3+
  • Google Chrome
  • Opera 10.50
  • Internet Explorer 5.5+

…and here’s a quick look at the final product (with some extra commentary from yours truly…):

.shadow {
	/* firefox, mozilla, et al. */
	-moz-box-shadow: 3px 3px 4px #000;

	/* webkit: safari, chrome */
	-webkit-box-shadow: 3px 3px 4px #000;

	/* css3 */
	box-shadow: 3px 3px 4px #000;

	/* For IE 8 (concatenate on one line) */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(
		Strength=4, Direction=135, Color='#000000')";

	/* For IE 5.5 - 7 (concatenate on one line) */
	filter: progid:DXImageTransform.Microsoft.Shadow(
		Strength=4, Direction=135, Color='#000000');
}

I’m thinking that with some tweaking of the colors I can get what I’m really after, and this should integrate nicely with some relatively simple JQuery scripting as well.

We shall see… if it doesn’t work out I’ll post a follow-up.

Tags: , , , , ,

Occam’s Razor: A Great Principle for Designers [Webdesigner Depot]

Aug 12, 2010 Web Design

Occam’s Razor: A Great Principle for Designers | Webdesigner Depot:

Lex parsimoniae is the Latin expression of what is known in English as Occam’s Razor, a philosophical rule of thumb that has guided some of the world’s best and brightest minds (including Isaac Newton). It is named after the 14th-century logician and theologian William of Ockham. But what the heck does Occam’s Razor have to do with web design? I’m glad you asked. To put it plainly, Occam’s Razor states that the simplest explanation is usually true. For our purposes, to use Occam’s Razor is to do something in the simplest manner possible because simpler is usually better. In this article, we’ll show you how to use Occam’s Razor to create better websites and to enhance the user experience, both for yourself and your clients.

Overcoming Design Creative Block

Aug 12, 2010 Interaction Design, User Interface Design, Web Design

While specifically written for Logo Design, I thought the suggestions contained in this article were applicable to most other design disciplines like web or user interface design…

Tips for Overcoming Logo Design Creative Block:

This phase can be very frustrating for any creative person. If you don’t recover within a few days, a creative block can destroy your self-confidence. The fear that you will never again be able to produce good work drives you to desperation. You try harder and harder and end up exhausting your mental faculties. This makes the situation worse. Therefore, it is very important to deal with this delicate phase of creative block with a lot of patience and care. Only you can get yourself out of it. Designers all over the world face this problem and don’t know what to do. There is actually no reason to panic. Let’s look at a few ways by which you can get rid of your creative block.

30+ Handy Blank Templates for Designers

Jul 23, 2010 Web Design

30+ Handy Blank Templates for Designers | Creative Repository:

Sometimes you have a nice concept for a design in your mind, but you don’t know where to start; or sometimes you are just not aware of the right size for the design to implement. That’s where templates come handy. I have collected some very useful templates with proper guidelines, sizes and resolutions for design projects like business cards, letterheads, vinyl designs, brochures etc. I believe that these will prove to be a great time-saver for many of you guys. Most of these are in PSD or AI format, and are easily editable. Hope you find them useful.

Preparing Your Web Content for iPad (Apple Technical Note TN2262)

May 20, 2010 Apple, User Experience, User Interface Design, Web Design, Web Development, ipad, iphone, javascript

Apple ~Technical Note TN2262: Preparing Your Web Content for iPad:

Safari on iPad is capable of delivering a “desktop” web experience. iPad has a large, 9.7″ screen and fast network connectivity, and Safari on iPad uses the same WebKit layout engine as Safari on Mac OS X and Windows. You can ensure that your website looks and works great on iPad, and even create new touch-enabled web experiences for your customers, by considering a few specific differences between iPad and other platforms.

If you have access to an iPad, test your website using the iPad. If not, you can test your website in Safari on iPad using the iPhone Simulator (Hardware -> Device -> iPad). iPad is available in the iPhone Simulator in iPhone OS 3.2 SDK beta 2 and later, which is available to iPhone Developer Program members. In cases where it is possible to simulate iPad-like behavior in Safari on a desktop computer, instructions are given below.

15+ Free Abobe Air Applications for Designers and Developers

Feb 26, 2010 Web Design

Great Adobe AIR-based tools for web design and development!

15+ Free Abobe Air Applications for Designers and Developers | Admix Web:

Adobe AIR, which stands for Adobe Integrated Runtime, is a cross-functioning system runtime engine that allows web designers and web developers to create rich internet applications, and Adobe AIR is compatible with Windows, Macs and Linux. Adobe AIR is a very functional and useful system for web designers and web developers because it permits Flash, Flex, JavaScript, HTML and AJAX code to look like traditional desktop applications by running without the Web browser. Adobe has created an official Adobe AIR Marketplace which essesntially trys to show all of the Adobe AIR applications that exist. These applications range from tools useful for designers to developers to bloggers to the average person using the web. These are great tools and applications because they can make our lives as designer and developers easier, and best of all they are free. I have compliled a list of 15+ great Adobe AIR applications for you all to use. Remember, this list is not a best of or all inclusive, just ones that I have found to be helpful! Click on the images for links to the application. Enjoy!

Please don’t add debug messages to your customer-facing application

Sep 22, 2009 Interaction Design, User Experience, Web Design, Web Development

Debugging messages are for developers/engineers, not for humans (I can say that since I’m a developer). But I can’t believe that it’s 2009 and I still encounter things like the following example…

Every time I log into one of my online banking systems, I get a message like the following:

Online Banking Debug Message

This is just intrusive and rude behavior (as Alan Cooper might say). First of all, the message first off tells me when the last unsuccessful attempt was made to access the account… HUH??? Then it tries to be helpful and tell me when the last successful attempt was made.

It just makes no sense at all to me why this message exists at all. Why would I ever care about these particular statistics, and even if I did care about them, is it really necessary to pop up a message box every time I log in???

I vote no.

Fine. If you want to have that information accessible, provide a log of all accesses tucked away in my account settings or somewhere I can get to if I think I have a security concern. Don’t show this message to me, please. What this message boils down to is a debug-ish message in the clothing of security (I could be wrong, but that’s what it smells like to me).

Interestingly, as a side note, I happen to know that this system is from a company that is now owned by Intuit (my former stomping ground), and in the two or more years since that acquisition, this message box has surprisingly still not disappeared.

Tags: , , , , , , , , , , , , ,

ASP.NET Forum Tags: Semicolons as Separators?

May 25, 2009 Interaction Design, User Experience, User Interface Design, Web Design, Web Development

Ummm… OK I know Microsoft is trying to give the illusion of being user friendly and all, but when the delimiter for tags that categorize a post on the ASP.NET developer forums, they chose semicolons.

Is it just me or is that a ludicrous choice? Why not a space (my preference – a la delicious) or a comma?

In addition, there is no example visible to show you what the legal delimiter is! You have to miraculously divine what it wants, or let it show you what it wants, as I chose to do.

To find out what the delimiter is, I had to do the following:

  1. Open the “Select Tags…” dialog.
  2. Select two (short) tags. (I notice lots of other folks thought that a space would be a logical delimiter too…!)
  3. Close the dialog.
  4. Oops. Closing the dialog didn’t populate the text box with my selections. Awesome.
  5. Trying again… Open the “Select Tags…” dialog.
  6. Select two (short) tags, this time at the end of the list where I notice OK and Cancel buttons (yes – you heard that right. The buttons are embedded in the list itself… and at the bottom of the list, no less! They’re not on the dialog “window.”)
  7. Click OK.
  8. Observe that text box has the new selections delimited by semicolons.

The auto-populating text box is another usability nightmare deserving of its own article, but I’ll let someone else write that one up. ;)

Tags: , , , , ,